@microsoft/webui-framework 0.0.4 → 0.0.6

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @microsoft/webui-framework — lightweight Web Component runtime with SSR hydration.
+ *
+ * Provides a reactive base class, decorators, and hydration utilities for
+ * building Web Components that work with WebUI's server-side rendering pipeline.
+ *
+ * @example
+ * ```ts
+ * import { WebUIElement, observable, attr } from '@microsoft/webui-framework';
+ *
+ * class MyCounter extends WebUIElement {
+ *   @attr count = 0;
+ *   @observable label = 'Count';
+ * }
+ * MyCounter.define('my-counter');
+ * ```
+ *
+ * @packageDocumentation
+ */
+export { WebUIElement } from './element.js';
+export { observable, attr } from './decorators.js';
+export { getTemplate } from './template.js';
+export type { TemplateMeta } from './template.js';
+export { hydrationStart, hydrationEnd } from './lifecycle.js';

package/dist/index.js

@@ -0,0 +1,12 @@
+import { WebUIElement } from "./element.js";
+import { observable, attr } from "./decorators.js";
+import { getTemplate } from "./template.js";
+import { hydrationStart, hydrationEnd } from "./lifecycle.js";
+export {
+  WebUIElement,
+  attr,
+  getTemplate,
+  hydrationEnd,
+  hydrationStart,
+  observable
+};

package/dist/lifecycle.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Call before a component begins hydration.
+ * Increments the pending counter and (once) places the global start mark.
+ */
+export declare function hydrationStart(): void;
+/**
+ * Call after a component has finished hydration.
+ * When the last component finishes, fires the global event + measure.
+ */
+export declare function hydrationEnd(): void;

package/dist/lifecycle.js

@@ -0,0 +1,27 @@
+let pendingCount = 0;
+let started = false;
+let completed = false;
+function hydrationStart() {
+  if (!started) {
+    performance.mark("webui:hydrate:total:start");
+    started = true;
+  }
+  pendingCount++;
+}
+function hydrationEnd() {
+  pendingCount--;
+  if (pendingCount <= 0 && !completed) {
+    completed = true;
+    performance.mark("webui:hydrate:total:end");
+    performance.measure(
+      "webui:hydrate:total",
+      "webui:hydrate:total:start",
+      "webui:hydrate:total:end"
+    );
+    window.dispatchEvent(new Event("webui:hydration-complete"));
+  }
+}
+export {
+  hydrationEnd,
+  hydrationStart
+};

package/dist/template-types.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Template type definitions — shared across packages without pulling in
+ * the global `Window` augmentation from `template.ts`.
+ */
+export type CompiledAttrPart = string | [path: string];
+export type TemplateNodePath = number[];
+export type TemplateSlotPath = [
+    parentPath: TemplateNodePath,
+    beforeIndex: number,
+    order?: number
+];
+export type CompiledTextRunMeta = [slot: TemplateSlotPath, parts: CompiledAttrPart[], raw?: 1];
+export type CompiledAttrGroupMeta = [
+    target: TemplateNodePath,
+    start: number,
+    count: number
+];
+/**
+ * Compiled condition — a pre-compiled JS function plus the paths it references.
+ * The Rust compiler emits the function body at build time so the runtime
+ * doesn't need a condition AST interpreter.
+ *
+ * - `[0]` — evaluator function: `(resolve, scope) => boolean`
+ * - `[1]` — referenced paths for the reactive path index
+ */
+export type CompiledCondition = [
+    fn: (v: (path: string, s?: unknown) => unknown, s?: unknown) => boolean,
+    paths: string[]
+];
+export type CompiledConditionalMeta = [condition: CompiledCondition, blockIndex: number, slot: TemplateSlotPath];
+export type CompiledAttrMeta = [name: string, kind: 0, value: string] | [name: string, kind: 1, value: string] | [name: string, kind: 2, condition: CompiledCondition] | [name: string, kind: 3, parts: CompiledAttrPart[]];
+export type CompiledRepeatMeta = [collection: string, itemVar: string, blockIndex: number, slot: TemplateSlotPath];
+export type CompiledEventMeta = [name: string, handler: string, needsEvent: number, target: TemplateNodePath];
+export interface TemplateBlockMeta {
+    h: string;
+    tx?: CompiledTextRunMeta[];
+    a?: CompiledAttrMeta[];
+    ag?: CompiledAttrGroupMeta[];
+    c?: CompiledConditionalMeta[];
+    r?: CompiledRepeatMeta[];
+    e?: CompiledEventMeta[];
+}
+export interface TemplateMeta extends TemplateBlockMeta {
+    b?: TemplateBlockMeta[];
+    sa?: string;
+    re?: [string, string, number][];
+    /** Shadow DOM flag — when true, client-created components use shadow root. */
+    sd?: boolean;
+}

package/dist/template.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Template registry — stores compiled metadata objects from the Rust compiler.
+ *
+ * Each entry is a metadata object with:
+ * - `h`  — static HTML for the component template
+ * - `tx` — text runs `[slot, parts]` for text binding positions
+ * - `a`  — attribute binding metadata
+ * - `ag` — attribute target groups `[path, startIndex, count]`
+ * - `c`  — conditional blocks `[conditionAst, blockIndex]`
+ * - `cl` — conditional anchor slots
+ * - `r`  — repeat/for blocks `[collection, itemVar, blockIndex]`
+ * - `rl` — repeat anchor slots
+ * - `e`  — element events `[eventName, handlerName, needsEvent]`
+ * - `el` — event target element paths
+ * - `b`  — nested compiled block metadata
+ * - `sa` — adopted stylesheet specifier for CSS module strategy
+ * - `sd` — shadow DOM flag for client-created components
+ * - `re` — root events on the host element
+ */
+export type { CompiledAttrGroupMeta, CompiledAttrMeta, CompiledAttrPart, CompiledCondition, CompiledConditionalMeta, CompiledTextRunMeta, TemplateBlockMeta, TemplateMeta, TemplateNodePath, TemplateSlotPath, } from './template-types.js';
+import type { TemplateMeta } from './template-types.js';
+declare global {
+    interface Window {
+        __webui_templates?: Record<string, TemplateMeta>;
+        __webui_state?: Record<string, unknown>;
+        /** When true, all client-created components use shadow DOM. */
+        __webui_shadow?: boolean;
+    }
+}
+export declare function getTemplate(name: string): TemplateMeta | undefined;

package/dist/template.js

@@ -0,0 +1,6 @@
+function getTemplate(name) {
+  return window.__webui_templates?.[name];
+}
+export {
+  getTemplate
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microsoft/webui-framework",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "description": "WebUI Framework Next — Preact-inspired lightweight Web Component runtime with SSR hydration. 15KB minified, compiled-template path mapping, no hydration markers.",
   "license": "MIT",
@@ -20,7 +20,7 @@
     "@types/node": "^25.3.5",
     "esbuild": "^0.27.3",
     "typescript": "^5.9.3",
-    "@microsoft/webui-test-support": "0.0.4"
+    "@microsoft/webui-test-support": "0.0.6"
   },
   "scripts": {
     "build": "find src -name '*.ts' ! -name '*.test.ts' | xargs esbuild --outdir=dist --outbase=src --format=esm --platform=browser && tsc --emitDeclarationOnly",