@microsoft/webui-framework 0.0.6 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,12 +1,25 @@
1
- import { WebUIElement } from "./element.js";
2
- import { observable, attr } from "./decorators.js";
3
- import { getTemplate } from "./template.js";
4
- import { hydrationStart, hydrationEnd } from "./lifecycle.js";
5
- export {
6
- WebUIElement,
7
- attr,
8
- getTemplate,
9
- hydrationEnd,
10
- hydrationStart,
11
- observable
12
- };
1
+ // Copyright (c) Microsoft Corporation.
2
+ // Licensed under the MIT license.
3
+ /**
4
+ * @microsoft/webui-framework — lightweight Web Component runtime with SSR hydration.
5
+ *
6
+ * Provides a reactive base class, decorators, and hydration utilities for
7
+ * building Web Components that work with WebUI's server-side rendering pipeline.
8
+ *
9
+ * @example
10
+ * ```ts
11
+ * import { WebUIElement, observable, attr } from '@microsoft/webui-framework';
12
+ *
13
+ * class MyCounter extends WebUIElement {
14
+ * @attr count = 0;
15
+ * @observable label = 'Count';
16
+ * }
17
+ * MyCounter.define('my-counter');
18
+ * ```
19
+ *
20
+ * @packageDocumentation
21
+ */
22
+ export { WebUIElement } from './element.js';
23
+ export { observable, attr } from './decorators.js';
24
+ export { getTemplate } from './template.js';
25
+ export { hydrationStart, hydrationEnd } from './lifecycle.js';
package/dist/lifecycle.js CHANGED
@@ -1,27 +1,51 @@
1
+ // Copyright (c) Microsoft Corporation.
2
+ // Licensed under the MIT license.
3
+ /**
4
+ * Hydration lifecycle tracker.
5
+ *
6
+ * Tracks aggregate hydration timing via the Performance API and fires a
7
+ * global `webui:hydration-complete` event on `window` once every registered
8
+ * component has finished hydrating.
9
+ *
10
+ * ## Performance marks
11
+ *
12
+ * Global:
13
+ * - `webui:hydrate:total:start` — first component begins hydrating
14
+ * - `webui:hydrate:total:end` — last component finishes
15
+ * - measure `webui:hydrate:total`
16
+ *
17
+ * ## Window event
18
+ *
19
+ * `webui:hydration-complete` — dispatched once on `window` when all
20
+ * components are hydrated.
21
+ */
22
+ /** How many components are still waiting to hydrate. */
1
23
  let pendingCount = 0;
24
+ /** Whether the global start mark has been placed. */
2
25
  let started = false;
26
+ /** Whether the global complete event has already fired. */
3
27
  let completed = false;
4
- function hydrationStart() {
5
- if (!started) {
6
- performance.mark("webui:hydrate:total:start");
7
- started = true;
8
- }
9
- pendingCount++;
28
+ /**
29
+ * Call before a component begins hydration.
30
+ * Increments the pending counter and (once) places the global start mark.
31
+ */
32
+ export function hydrationStart() {
33
+ if (!started) {
34
+ performance.mark('webui:hydrate:total:start');
35
+ started = true;
36
+ }
37
+ pendingCount++;
10
38
  }
11
- function hydrationEnd() {
12
- pendingCount--;
13
- if (pendingCount <= 0 && !completed) {
14
- completed = true;
15
- performance.mark("webui:hydrate:total:end");
16
- performance.measure(
17
- "webui:hydrate:total",
18
- "webui:hydrate:total:start",
19
- "webui:hydrate:total:end"
20
- );
21
- window.dispatchEvent(new Event("webui:hydration-complete"));
22
- }
39
+ /**
40
+ * Call after a component has finished hydration.
41
+ * When the last component finishes, fires the global event + measure.
42
+ */
43
+ export function hydrationEnd() {
44
+ pendingCount--;
45
+ if (pendingCount <= 0 && !completed) {
46
+ completed = true;
47
+ performance.mark('webui:hydrate:total:end');
48
+ performance.measure('webui:hydrate:total', 'webui:hydrate:total:start', 'webui:hydrate:total:end');
49
+ window.dispatchEvent(new Event('webui:hydration-complete'));
50
+ }
23
51
  }
24
- export {
25
- hydrationEnd,
26
- hydrationStart
27
- };
@@ -0,0 +1,3 @@
1
+ // Copyright (c) Microsoft Corporation.
2
+ // Licensed under the MIT license.
3
+ export {};
package/dist/template.js CHANGED
@@ -1,6 +1,5 @@
1
- function getTemplate(name) {
2
- return window.__webui_templates?.[name];
1
+ // Copyright (c) Microsoft Corporation.
2
+ // Licensed under the MIT license.
3
+ export function getTemplate(name) {
4
+ return window.__webui_templates?.[name];
3
5
  }
4
- export {
5
- getTemplate
6
- };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microsoft/webui-framework",
3
- "version": "0.0.6",
3
+ "version": "0.0.7",
4
4
  "type": "module",
5
5
  "description": "WebUI Framework Next — Preact-inspired lightweight Web Component runtime with SSR hydration. 15KB minified, compiled-template path mapping, no hydration markers.",
6
6
  "license": "MIT",
@@ -18,20 +18,17 @@
18
18
  "devDependencies": {
19
19
  "@playwright/test": "^1.58.2",
20
20
  "@types/node": "^25.3.5",
21
- "esbuild": "^0.27.3",
22
21
  "typescript": "^5.9.3",
23
- "@microsoft/webui-test-support": "0.0.6"
22
+ "@microsoft/webui-test-support": "0.0.7"
24
23
  },
25
24
  "scripts": {
26
- "build": "find src -name '*.ts' ! -name '*.test.ts' | xargs esbuild --outdir=dist --outbase=src --format=esm --platform=browser && tsc --emitDeclarationOnly",
25
+ "build": "tsc",
27
26
  "typecheck": "tsc --noEmit",
28
27
  "typecheck:e2e": "tsc -p tsconfig.test.json --noEmit",
29
- "build:e2e:scripts": "esbuild ./tests/server.ts --bundle --external:esbuild --outdir=tests/dist --format=esm --platform=node --target=es2022",
30
- "build:e2e": "pnpm build:e2e:scripts",
31
28
  "test": "pnpm test:unit && pnpm test:e2e",
32
- "test:unit": "esbuild \"src/**/*.test.ts\" --bundle --outdir=dist/tests --outbase=src --format=esm --platform=node --target=es2022 && node --test \"dist/tests/**/*.test.js\"",
33
- "test:e2e": "pnpm typecheck:e2e && pnpm build:e2e && playwright test",
29
+ "test:unit": "tsc -p tsconfig.unit-test.json && node --test \"dist/**/*.test.js\"",
30
+ "test:e2e": "pnpm typecheck:e2e && playwright test",
34
31
  "test:update-snapshots": "pnpm test:e2e:update-snapshots",
35
- "test:e2e:update-snapshots": "pnpm typecheck:e2e && pnpm build:e2e && playwright test --update-snapshots"
32
+ "test:e2e:update-snapshots": "pnpm typecheck:e2e && playwright test --update-snapshots"
36
33
  }
37
34
  }