npm - sibujs - Versions diffs - 1.2.0 → 1.3.0 - Mend

sibujs 1.2.0 → 1.3.0

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.

Files changed (89) hide show

package/README.md +29 -25
package/dist/browser.cjs +804 -2
package/dist/browser.d.cts +591 -1
package/dist/browser.d.ts +591 -1
package/dist/browser.js +50 -8
package/dist/build.cjs +654 -144
package/dist/build.js +14 -12
package/dist/cdn.global.js +188 -7
package/dist/chunk-2BYQDGN3.js +742 -0
package/dist/chunk-32DY64NT.js +282 -0
package/dist/chunk-3AIRKM3B.js +1263 -0
package/dist/chunk-3X2YG6YM.js +505 -0
package/dist/chunk-5X6PP2UK.js +28 -0
package/dist/chunk-77L6NL3X.js +1097 -0
package/dist/chunk-BGN5ZMP4.js +26 -0
package/dist/chunk-BTU3TJDS.js +365 -0
package/dist/chunk-CHF5OHIA.js +61 -0
package/dist/chunk-CMBFNA7L.js +27 -0
package/dist/chunk-DAHRH4ON.js +331 -0
package/dist/chunk-EBGIRKQY.js +616 -0
package/dist/chunk-EUZND3CB.js +27 -0
package/dist/chunk-F3FA4F32.js +292 -0
package/dist/chunk-JAKHTMQU.js +1000 -0
package/dist/chunk-JCI5M6U6.js +956 -0
package/dist/chunk-KQPDEVVS.js +398 -0
package/dist/chunk-NEKUBFPT.js +60 -0
package/dist/chunk-NYVAC6P5.js +37 -0
package/dist/chunk-PTQJDMRT.js +146 -0
package/dist/chunk-QWZG56ET.js +2744 -0
package/dist/chunk-TSOKIX5Z.js +654 -0
package/dist/chunk-VRW3FULF.js +725 -0
package/dist/chunk-WZSPOOER.js +84 -0
package/dist/chunk-YT6HQ6AM.js +14 -0
package/dist/chunk-ZD6OAMTH.js +277 -0
package/dist/contracts-DDrwxvJ-.d.cts +245 -0
package/dist/contracts-DDrwxvJ-.d.ts +245 -0
package/dist/data.cjs +35 -2
package/dist/data.d.cts +7 -0
package/dist/data.d.ts +7 -0
package/dist/data.js +9 -8
package/dist/devtools.cjs +122 -0
package/dist/devtools.d.cts +69 -461
package/dist/devtools.d.ts +69 -461
package/dist/devtools.js +127 -6
package/dist/ecosystem.cjs +23 -6
package/dist/ecosystem.d.cts +1 -1
package/dist/ecosystem.d.ts +1 -1
package/dist/ecosystem.js +10 -9
package/dist/extras.cjs +1207 -65
package/dist/extras.d.cts +5 -5
package/dist/extras.d.ts +5 -5
package/dist/extras.js +69 -24
package/dist/index.cjs +663 -144
package/dist/index.d.cts +397 -17
package/dist/index.d.ts +397 -17
package/dist/index.js +39 -17
package/dist/introspect-BumjnBKr.d.cts +477 -0
package/dist/introspect-CZrlcaYy.d.ts +477 -0
package/dist/introspect-Cb0zgpi2.d.cts +477 -0
package/dist/introspect-Y2xNXGSf.d.ts +477 -0
package/dist/motion.js +4 -4
package/dist/patterns.cjs +51 -2
package/dist/patterns.d.cts +18 -8
package/dist/patterns.d.ts +18 -8
package/dist/patterns.js +7 -7
package/dist/performance.js +4 -4
package/dist/plugins.cjs +428 -81
package/dist/plugins.d.cts +27 -4
package/dist/plugins.d.ts +27 -4
package/dist/plugins.js +156 -37
package/dist/ssr-4PBXAOO3.js +40 -0
package/dist/ssr-Do_SiVoL.d.cts +201 -0
package/dist/ssr-Do_SiVoL.d.ts +201 -0
package/dist/ssr.cjs +312 -60
package/dist/ssr.d.cts +10 -1
package/dist/ssr.d.ts +10 -1
package/dist/ssr.js +13 -10
package/dist/tagFactory-DaJ0YWX6.d.cts +47 -0
package/dist/tagFactory-DaJ0YWX6.d.ts +47 -0
package/dist/testing.cjs +233 -2
package/dist/testing.d.cts +42 -1
package/dist/testing.d.ts +42 -1
package/dist/testing.js +129 -2
package/dist/ui.cjs +374 -3
package/dist/ui.d.cts +252 -2
package/dist/ui.d.ts +252 -2
package/dist/ui.js +328 -8
package/dist/widgets.js +7 -7
package/package.json +1 -1

package/dist/ssr-Do_SiVoL.d.cts ADDED Viewed

@@ -0,0 +1,201 @@
+/**
+ * Converts an HTMLElement tree to an HTML string for server-side rendering.
+ *
+ * Security: attribute names are validated, `on*` handlers are dropped,
+ * URL-bearing attributes are routed through `sanitizeUrl`, and attribute
+ * values are escaped against both `"` and `'`. `<script>` and `<style>`
+ * tags are stripped from the serialized output.
+ */
+declare function renderToString(element: HTMLElement | DocumentFragment | Node): string;
+interface HydrateOptions {
+    /**
+     * Enable dev-mode hydration diagnostics. When true, the walker
+     * compares the server-rendered tree against the client tree and
+     * logs the first tag mismatch, attribute difference, or child count
+     * mismatch to the console. Disabled by default.
+     */
+    diagnostics?: boolean;
+    /**
+     * Called for each detected mismatch instead of the default console
+     * warning. Useful for routing diagnostics to a telemetry system.
+     */
+    onMismatch?: (report: HydrationMismatch) => void;
+}
+interface HydrationMismatch {
+    kind: "tag" | "attribute" | "child-count" | "text";
+    path: string;
+    serverValue: string;
+    clientValue: string;
+    message: string;
+}
+/**
+ * Hydrates a server-rendered DOM tree by attaching event listeners
+ * and activating reactive bindings.
+ *
+ * When `options.diagnostics` is true, the walker reports the first
+ * server/client mismatch it finds. This is a dev-mode tool — pass
+ * `diagnostics: false` (or omit it) in production.
+ */
+declare function hydrate(component: () => HTMLElement, container: HTMLElement, options?: HydrateOptions): void;
+/**
+ * Branded type for raw HTML that has been explicitly marked as trusted.
+ * Use `trustHTML()` to create a value of this type. This prevents
+ * accidental injection of unsanitized user input into `headExtra`.
+ */
+type TrustedHTML = string & {
+    readonly __brand: "TrustedHTML";
+};
+/**
+ * Mark an HTML string as trusted for use in contexts that accept raw HTML
+ * (e.g. `renderToDocument({ headExtra })`). Only call this on
+ * developer-controlled strings — never on user input.
+ *
+ * @example
+ * ```ts
+ * const extra = trustHTML('<link rel="preconnect" href="https://fonts.googleapis.com">');
+ * renderToDocument(App, { headExtra: extra });
+ * ```
+ */
+declare function trustHTML(html: string): TrustedHTML;
+/**
+ * Renders a component to a full HTML document string.
+ *
+ * `headExtra` requires a `TrustedHTML` value created via `trustHTML()`.
+ * This prevents accidental injection of unsanitized user input.
+ *
+ * Security: meta/link/bodyAttrs keys are validated against
+ * `SAFE_ATTR_NAME` (rejecting crafted keys that would break out of the
+ * attribute context). URL attributes in meta/link/scripts/bodyAttrs pass
+ * through `sanitizeUrl`. The page `title` is HTML-escaped.
+ */
+declare function renderToDocument(component: () => HTMLElement, options?: {
+    title?: string;
+    meta?: Record<string, string>[];
+    links?: Record<string, string>[];
+    scripts?: string[];
+    bodyAttrs?: Record<string, string>;
+    /**
+     * Raw HTML injected into `<head>`. Must be wrapped in `trustHTML()`
+     * to confirm the content is developer-controlled.
+     */
+    headExtra?: TrustedHTML;
+}): string;
+/**
+ * Renders a component tree to an async iterable of HTML chunks.
+ * Enables progressive server-side rendering — the consumer can write
+ * each chunk to a response stream as it becomes available.
+ *
+ * Same security posture as `renderToString`.
+ */
+declare function renderToStream(element: HTMLElement | DocumentFragment | Node): AsyncGenerator<string>;
+/**
+ * Collects the full output of renderToStream into a string.
+ */
+declare function collectStream(stream: AsyncGenerator<string> | AsyncIterable<string>): Promise<string>;
+/**
+ * Renders a component tree to a Web ReadableStream<string>.
+ * Compatible with Node 18+, Deno, and edge runtimes.
+ * Uses pull-based backpressure — chunks are produced on demand.
+ */
+declare function renderToReadableStream(element: HTMLElement | DocumentFragment | Node): ReadableStream<string>;
+/**
+ * Marks an element as a hydration island. During partial hydration
+ * only elements marked with `data-sibu-island` will be hydrated.
+ */
+declare function island(id: string, component: () => HTMLElement): HTMLElement;
+/**
+ * Hydrate only elements marked as islands (`data-sibu-island`).
+ * Non-island content keeps its server-rendered HTML untouched.
+ *
+ * Security: uses `hasOwnProperty.call` to guard against prototype-pollution
+ * lookups (e.g. an island id of `__proto__` must not resolve to `Object.prototype`).
+ */
+declare function hydrateIslands(container: HTMLElement, islands: Record<string, () => HTMLElement>): void;
+/**
+ * Progressively hydrate islands only when they enter the viewport.
+ * Uses IntersectionObserver to defer hydration of off-screen islands,
+ * reducing initial JavaScript execution cost.
+ *
+ * Returns a cleanup function that disconnects all observers.
+ */
+declare function hydrateProgressively(container: HTMLElement, islands: Record<string, () => HTMLElement>, options?: IntersectionObserverInit): () => void;
+/**
+ * Reset SSR state between requests. Call at the start of each SSR render
+ * to prevent ID drift in long-lived server processes.
+ */
+declare function resetSSRState(): void;
+/**
+ * Create a suspense boundary for SSR streaming.
+ * Renders fallback HTML inline and returns a promise for the resolved content.
+ *
+ * The returned element contains the fallback UI with a `data-sibu-suspense-id`
+ * marker. The promise resolves to `{ id, html }` once async content is ready.
+ */
+declare function ssrSuspense(props: {
+    fallback: () => HTMLElement;
+    content: () => Promise<HTMLElement>;
+}): {
+    element: HTMLElement;
+    promise: Promise<{
+        id: string;
+        html: string;
+    }>;
+};
+/**
+ * Generate an inline script that swaps a suspense fallback with resolved content.
+ *
+ * Security: the `id` is validated against a strict allowlist. Values that
+ * do not match throw, so an attacker-controlled id cannot inject context
+ * breakers into the selector or the JS string. `ssrSuspense()`'s internal
+ * generator always produces allowlist-safe ids.
+ */
+declare function suspenseSwapScript(id: string, nonce?: string): string;
+/**
+ * Renders a component tree with suspense boundaries as a stream.
+ * Yields the main tree HTML first (including fallback content for suspended
+ * boundaries), then flushes resolved content with inline swap scripts.
+ *
+ * Supports an optional `nonce` that is propagated to the resolved-content
+ * swap scripts so the stream works with strict CSP.
+ */
+declare function renderToSuspenseStream(element: HTMLElement | DocumentFragment | Node, pendingBoundaries?: Promise<{
+    id: string;
+    html: string;
+}>[], options?: {
+    nonce?: string;
+}): AsyncGenerator<string>;
+/**
+ * Escape a JSON string for safe embedding inside a `<script>` tag. This
+ * goes beyond the usual `</script>` concern:
+ *
+ *  - `<`, `>`, `&` are unicode-escaped so nothing inside a string literal
+ *    can close the script tag or start a new one.
+ *  - `U+2028` (LINE SEPARATOR) and `U+2029` (PARAGRAPH SEPARATOR) are
+ *    unicode-escaped. Before ES2019 these were illegal inside a JS string
+ *    literal, so including them verbatim would cause a SyntaxError on
+ *    older engines and could break out of string context.
+ */
+declare function escapeScriptJson(json: string): string;
+/**
+ * Serialize application state into an HTML script tag for SSR.
+ * The serialized data is embedded in the document and picked up
+ * on the client with `deserializeState()`.
+ *
+ * Security: the serialized JSON is escaped against `<`/`>`/`&` so nothing
+ * can close the `<script>` tag, plus `U+2028` / `U+2029` which otherwise
+ * break out of string literals on pre-ES2019 engines. Supports a `nonce`
+ * attribute so the script is compatible with strict CSP.
+ */
+declare function serializeState(state: Record<string, unknown>, nonce?: string): string;
+/**
+ * Retrieve state that was embedded by `serializeState()` during SSR.
+ *
+ * When a `validate` function is provided, it acts as a type guard —
+ * only data that passes validation is returned. This prevents
+ * tampered SSR payloads from being trusted by the client.
+ *
+ * @param validate Optional type guard to verify data integrity
+ */
+declare function deserializeState<T = Record<string, unknown>>(validate?: (data: unknown) => data is T): T | undefined;
+export { type HydrateOptions as H, type TrustedHTML as T, type HydrationMismatch as a, hydrateIslands as b, collectStream as c, deserializeState as d, escapeScriptJson as e, hydrateProgressively as f, renderToReadableStream as g, hydrate as h, island as i, renderToStream as j, renderToString as k, renderToSuspenseStream as l, resetSSRState as m, ssrSuspense as n, suspenseSwapScript as o, renderToDocument as r, serializeState as s, trustHTML as t };

package/dist/ssr-Do_SiVoL.d.ts ADDED Viewed

@@ -0,0 +1,201 @@
+/**
+ * Converts an HTMLElement tree to an HTML string for server-side rendering.
+ *
+ * Security: attribute names are validated, `on*` handlers are dropped,
+ * URL-bearing attributes are routed through `sanitizeUrl`, and attribute
+ * values are escaped against both `"` and `'`. `<script>` and `<style>`
+ * tags are stripped from the serialized output.
+ */
+declare function renderToString(element: HTMLElement | DocumentFragment | Node): string;
+interface HydrateOptions {
+    /**
+     * Enable dev-mode hydration diagnostics. When true, the walker
+     * compares the server-rendered tree against the client tree and
+     * logs the first tag mismatch, attribute difference, or child count
+     * mismatch to the console. Disabled by default.
+     */
+    diagnostics?: boolean;
+    /**
+     * Called for each detected mismatch instead of the default console
+     * warning. Useful for routing diagnostics to a telemetry system.
+     */
+    onMismatch?: (report: HydrationMismatch) => void;
+}
+interface HydrationMismatch {
+    kind: "tag" | "attribute" | "child-count" | "text";
+    path: string;
+    serverValue: string;
+    clientValue: string;
+    message: string;
+}
+/**
+ * Hydrates a server-rendered DOM tree by attaching event listeners
+ * and activating reactive bindings.
+ *
+ * When `options.diagnostics` is true, the walker reports the first
+ * server/client mismatch it finds. This is a dev-mode tool — pass
+ * `diagnostics: false` (or omit it) in production.
+ */
+declare function hydrate(component: () => HTMLElement, container: HTMLElement, options?: HydrateOptions): void;
+/**
+ * Branded type for raw HTML that has been explicitly marked as trusted.
+ * Use `trustHTML()` to create a value of this type. This prevents
+ * accidental injection of unsanitized user input into `headExtra`.
+ */
+type TrustedHTML = string & {
+    readonly __brand: "TrustedHTML";
+};
+/**
+ * Mark an HTML string as trusted for use in contexts that accept raw HTML
+ * (e.g. `renderToDocument({ headExtra })`). Only call this on
+ * developer-controlled strings — never on user input.
+ *
+ * @example
+ * ```ts
+ * const extra = trustHTML('<link rel="preconnect" href="https://fonts.googleapis.com">');
+ * renderToDocument(App, { headExtra: extra });
+ * ```
+ */
+declare function trustHTML(html: string): TrustedHTML;
+/**
+ * Renders a component to a full HTML document string.
+ *
+ * `headExtra` requires a `TrustedHTML` value created via `trustHTML()`.
+ * This prevents accidental injection of unsanitized user input.
+ *
+ * Security: meta/link/bodyAttrs keys are validated against
+ * `SAFE_ATTR_NAME` (rejecting crafted keys that would break out of the
+ * attribute context). URL attributes in meta/link/scripts/bodyAttrs pass
+ * through `sanitizeUrl`. The page `title` is HTML-escaped.
+ */
+declare function renderToDocument(component: () => HTMLElement, options?: {
+    title?: string;
+    meta?: Record<string, string>[];
+    links?: Record<string, string>[];
+    scripts?: string[];
+    bodyAttrs?: Record<string, string>;
+    /**
+     * Raw HTML injected into `<head>`. Must be wrapped in `trustHTML()`
+     * to confirm the content is developer-controlled.
+     */
+    headExtra?: TrustedHTML;
+}): string;
+/**
+ * Renders a component tree to an async iterable of HTML chunks.
+ * Enables progressive server-side rendering — the consumer can write
+ * each chunk to a response stream as it becomes available.
+ *
+ * Same security posture as `renderToString`.
+ */
+declare function renderToStream(element: HTMLElement | DocumentFragment | Node): AsyncGenerator<string>;
+/**
+ * Collects the full output of renderToStream into a string.
+ */
+declare function collectStream(stream: AsyncGenerator<string> | AsyncIterable<string>): Promise<string>;
+/**
+ * Renders a component tree to a Web ReadableStream<string>.
+ * Compatible with Node 18+, Deno, and edge runtimes.
+ * Uses pull-based backpressure — chunks are produced on demand.
+ */
+declare function renderToReadableStream(element: HTMLElement | DocumentFragment | Node): ReadableStream<string>;
+/**
+ * Marks an element as a hydration island. During partial hydration
+ * only elements marked with `data-sibu-island` will be hydrated.
+ */
+declare function island(id: string, component: () => HTMLElement): HTMLElement;
+/**
+ * Hydrate only elements marked as islands (`data-sibu-island`).
+ * Non-island content keeps its server-rendered HTML untouched.
+ *
+ * Security: uses `hasOwnProperty.call` to guard against prototype-pollution
+ * lookups (e.g. an island id of `__proto__` must not resolve to `Object.prototype`).
+ */
+declare function hydrateIslands(container: HTMLElement, islands: Record<string, () => HTMLElement>): void;
+/**
+ * Progressively hydrate islands only when they enter the viewport.
+ * Uses IntersectionObserver to defer hydration of off-screen islands,
+ * reducing initial JavaScript execution cost.
+ *
+ * Returns a cleanup function that disconnects all observers.
+ */
+declare function hydrateProgressively(container: HTMLElement, islands: Record<string, () => HTMLElement>, options?: IntersectionObserverInit): () => void;
+/**
+ * Reset SSR state between requests. Call at the start of each SSR render
+ * to prevent ID drift in long-lived server processes.
+ */
+declare function resetSSRState(): void;
+/**
+ * Create a suspense boundary for SSR streaming.
+ * Renders fallback HTML inline and returns a promise for the resolved content.
+ *
+ * The returned element contains the fallback UI with a `data-sibu-suspense-id`
+ * marker. The promise resolves to `{ id, html }` once async content is ready.
+ */
+declare function ssrSuspense(props: {
+    fallback: () => HTMLElement;
+    content: () => Promise<HTMLElement>;
+}): {
+    element: HTMLElement;
+    promise: Promise<{
+        id: string;
+        html: string;
+    }>;
+};
+/**
+ * Generate an inline script that swaps a suspense fallback with resolved content.
+ *
+ * Security: the `id` is validated against a strict allowlist. Values that
+ * do not match throw, so an attacker-controlled id cannot inject context
+ * breakers into the selector or the JS string. `ssrSuspense()`'s internal
+ * generator always produces allowlist-safe ids.
+ */
+declare function suspenseSwapScript(id: string, nonce?: string): string;
+/**
+ * Renders a component tree with suspense boundaries as a stream.
+ * Yields the main tree HTML first (including fallback content for suspended
+ * boundaries), then flushes resolved content with inline swap scripts.
+ *
+ * Supports an optional `nonce` that is propagated to the resolved-content
+ * swap scripts so the stream works with strict CSP.
+ */
+declare function renderToSuspenseStream(element: HTMLElement | DocumentFragment | Node, pendingBoundaries?: Promise<{
+    id: string;
+    html: string;
+}>[], options?: {
+    nonce?: string;
+}): AsyncGenerator<string>;
+/**
+ * Escape a JSON string for safe embedding inside a `<script>` tag. This
+ * goes beyond the usual `</script>` concern:
+ *
+ *  - `<`, `>`, `&` are unicode-escaped so nothing inside a string literal
+ *    can close the script tag or start a new one.
+ *  - `U+2028` (LINE SEPARATOR) and `U+2029` (PARAGRAPH SEPARATOR) are
+ *    unicode-escaped. Before ES2019 these were illegal inside a JS string
+ *    literal, so including them verbatim would cause a SyntaxError on
+ *    older engines and could break out of string context.
+ */
+declare function escapeScriptJson(json: string): string;
+/**
+ * Serialize application state into an HTML script tag for SSR.
+ * The serialized data is embedded in the document and picked up
+ * on the client with `deserializeState()`.
+ *
+ * Security: the serialized JSON is escaped against `<`/`>`/`&` so nothing
+ * can close the `<script>` tag, plus `U+2028` / `U+2029` which otherwise
+ * break out of string literals on pre-ES2019 engines. Supports a `nonce`
+ * attribute so the script is compatible with strict CSP.
+ */
+declare function serializeState(state: Record<string, unknown>, nonce?: string): string;
+/**
+ * Retrieve state that was embedded by `serializeState()` during SSR.
+ *
+ * When a `validate` function is provided, it acts as a type guard —
+ * only data that passes validation is returned. This prevents
+ * tampered SSR payloads from being trusted by the client.
+ *
+ * @param validate Optional type guard to verify data integrity
+ */
+declare function deserializeState<T = Record<string, unknown>>(validate?: (data: unknown) => data is T): T | undefined;
+export { type HydrateOptions as H, type TrustedHTML as T, type HydrationMismatch as a, hydrateIslands as b, collectStream as c, deserializeState as d, escapeScriptJson as e, hydrateProgressively as f, renderToReadableStream as g, hydrate as h, island as i, renderToStream as j, renderToString as k, renderToSuspenseStream as l, resetSSRState as m, ssrSuspense as n, suspenseSwapScript as o, renderToDocument as r, serializeState as s, trustHTML as t };