@typed/template 0.14.0 → 1.0.0-beta.1

package/dist/many.d.ts

@@ -0,0 +1,68 @@
+import type { Scope } from "effect/Scope";
+import { Fx, RefSubject } from "@typed/fx";
+import { type RenderEvent } from "./RenderEvent.js";
+/**
+ * Efficiently renders a reactive list of items by using keys to minimize DOM operations and maintain component state.
+ *
+ * `many` optimizes list rendering by:
+ * 1. **Keyed Diffing**: Uniquely identifies items using `getKey`. Components are only mounted when a new key appears and unmounted when a key disappears.
+ * 2. **Granular Updates**: Instead of re-rendering the component when an item changes, `many` passes a `RefSubject<A>` to the `render` function.
+ *    The component remains mounted, and the `RefSubject` emits the updated value, allowing the component to update only the changed parts of the DOM.
+ *
+ * This pattern is essential for performance when rendering lists where items may be reordered, added, removed, or modified in place.
+ *
+ * **Rendering Modes:**
+ *
+ * `many` behaves differently based on the environment:
+ * - **HTML/SSR** (Computed Behavior = `'one'`): Concurrently renders all portions of the list but streams ready pieces in the order of their definitions.
+ * - **DOM** (Computed Behavior = `'multiple'`): Integrates with hydration behaviors to reuse existing DOM nodes or efficiently update the DOM using keyed diffing.
+ *
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import { html, many } from "@typed/template"
+ * import { DomRenderTemplate, render } from "@typed/template/Render"
+ * import { Fx } from "@typed/fx"
+ * import { Layer } from "effect"
+ * import * as RefSubject from "@typed/fx/RefSubject"
+ *
+ * interface Todo {
+ *   readonly id: string
+ *   readonly text: string
+ *   readonly completed: boolean
+ * }
+ *
+ * const program = Effect.gen(function* () {
+ *   const todos = yield* RefSubject.make<Todo[]>([
+ *     { id: "1", text: "Learn Effect", completed: false },
+ *     { id: "2", text: "Build app", completed: false }
+ *   ])
+ *
+ *   const todoList = many(
+ *     todos,
+ *     (todo) => todo.id, // Key function
+ *     (todoRef, key) => // Render function receives RefSubject
+ *       html`<li>
+ *         ${RefSubject.map(todoRef, (todo) => todo.text)}
+ *         <button onclick=${RefSubject.update(todoRef, (todo) =>
+ *           ({ ...todo, completed: !todo.completed })
+ *         )}>Toggle</button>
+ *       </li>`
+ *   )
+ *
+ *   const template = html`<ul>${todoList}</ul>`
+ *
+ *   yield* render(template, document.body).pipe(
+ *     Fx.drainLayer,
+ *     Layer.provide(DomRenderTemplate),
+ *     Layer.launch
+ *   )
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category rendering
+ */
+export declare function many<A, E, R, B extends PropertyKey, R2, E2>(values: Fx.Fx<ReadonlyArray<A>, E, R>, getKey: (a: A) => B, render: (value: RefSubject.RefSubject<A>, key: B) => Fx.Fx<RenderEvent, E2, R2 | Scope>): Fx.Fx<RenderEvent, E | E2, R | R2 | Scope>;
+export declare const MANY_HOLE: (key: PropertyKey) => string;
+//# sourceMappingURL=many.d.ts.map

package/dist/many.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"many.d.ts","sourceRoot":"","sources":["../src/many.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAG3C,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,kBAAkB,CAAC;AAS1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,wBAAgB,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,SAAS,WAAW,EAAE,EAAE,EAAE,EAAE,EACzD,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACrC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,EACnB,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC,GACtF,EAAE,CAAC,EAAE,CAAC,WAAW,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC,CAiC5C;AA0BD,eAAO,MAAM,SAAS,GAAI,KAAK,WAAW,WAAkC,CAAC"}

package/dist/many.js

@@ -0,0 +1,107 @@
+import * as Effect from "effect/Effect";
+import * as Layer from "effect/Layer";
+import * as Option from "effect/Option";
+import * as ServiceMap from "effect/ServiceMap";
+import { Fx, RefSubject } from "@typed/fx";
+import { HydrateContext } from "./HydrateContext.js";
+import { renderToString } from "./internal/encoding.js";
+import { DomRenderEvent, HtmlRenderEvent, isHtmlRenderEvent, } from "./RenderEvent.js";
+// We wrap the all the nodes in a single RenderEvent so that we can micro-optimize
+// the downstream behaviors of diffing/patching.
+const wrapInRenderEvent = Fx.map((events) => DomRenderEvent(events.flatMap(getNodesFromRendered)));
+/**
+ * Efficiently renders a reactive list of items by using keys to minimize DOM operations and maintain component state.
+ *
+ * `many` optimizes list rendering by:
+ * 1. **Keyed Diffing**: Uniquely identifies items using `getKey`. Components are only mounted when a new key appears and unmounted when a key disappears.
+ * 2. **Granular Updates**: Instead of re-rendering the component when an item changes, `many` passes a `RefSubject<A>` to the `render` function.
+ *    The component remains mounted, and the `RefSubject` emits the updated value, allowing the component to update only the changed parts of the DOM.
+ *
+ * This pattern is essential for performance when rendering lists where items may be reordered, added, removed, or modified in place.
+ *
+ * **Rendering Modes:**
+ *
+ * `many` behaves differently based on the environment:
+ * - **HTML/SSR** (Computed Behavior = `'one'`): Concurrently renders all portions of the list but streams ready pieces in the order of their definitions.
+ * - **DOM** (Computed Behavior = `'multiple'`): Integrates with hydration behaviors to reuse existing DOM nodes or efficiently update the DOM using keyed diffing.
+ *
+ * @example
+ * ```ts
+ * import { Effect } from "effect"
+ * import { html, many } from "@typed/template"
+ * import { DomRenderTemplate, render } from "@typed/template/Render"
+ * import { Fx } from "@typed/fx"
+ * import { Layer } from "effect"
+ * import * as RefSubject from "@typed/fx/RefSubject"
+ *
+ * interface Todo {
+ *   readonly id: string
+ *   readonly text: string
+ *   readonly completed: boolean
+ * }
+ *
+ * const program = Effect.gen(function* () {
+ *   const todos = yield* RefSubject.make<Todo[]>([
+ *     { id: "1", text: "Learn Effect", completed: false },
+ *     { id: "2", text: "Build app", completed: false }
+ *   ])
+ *
+ *   const todoList = many(
+ *     todos,
+ *     (todo) => todo.id, // Key function
+ *     (todoRef, key) => // Render function receives RefSubject
+ *       html`<li>
+ *         ${RefSubject.map(todoRef, (todo) => todo.text)}
+ *         <button onclick=${RefSubject.update(todoRef, (todo) =>
+ *           ({ ...todo, completed: !todo.completed })
+ *         )}>Toggle</button>
+ *       </li>`
+ *   )
+ *
+ *   const template = html`<ul>${todoList}</ul>`
+ *
+ *   yield* render(template, document.body).pipe(
+ *     Fx.drainLayer,
+ *     Layer.provide(DomRenderTemplate),
+ *     Layer.launch
+ *   )
+ * })
+ * ```
+ *
+ * @since 1.0.0
+ * @category rendering
+ */
+export function many(values, getKey, render) {
+    return Fx.gen(function* () {
+        const behavior = yield* RefSubject.CurrentComputedBehavior;
+        if (behavior === "multiple") {
+            const services = yield* Effect.services();
+            const hydrateContext = ServiceMap.getOption(services, HydrateContext);
+            // If we're hydrating, attempt to provide the correct HydrateContext to rendering Fx
+            if (Option.isSome(hydrateContext) && hydrateContext.value.hydrate) {
+                return Fx.keyed(values, {
+                    getKey,
+                    onValue: (ref, key) => Fx.provide(render(ref, key), Layer.succeedServices(HydrateContext.serviceMap({ ...hydrateContext.value, manyKey: key.toString() }))),
+                }).pipe(wrapInRenderEvent);
+            }
+            return Fx.keyed(values, { getKey, onValue: render }).pipe(wrapInRenderEvent);
+        }
+        const initial = yield* Fx.first(values);
+        if (Option.isNone(initial) || initial.value.length === 0)
+            return Fx.empty;
+        const initialValues = initial.value;
+        const lastIndex = initialValues.length - 1;
+        return Fx.mergeOrdered(...initialValues.map((value, i) => renderValue(value, getKey, render, i === lastIndex)));
+    });
+}
+function renderValue(value, getKey, render, last) {
+    return Fx.unwrap(Effect.map(RefSubject.make(value), (ref) => {
+        const key = getKey(value);
+        return render(RefSubject.slice(ref, 0, 1), key).pipe(Fx.dropAfter((e) => isHtmlRenderEvent(e) && e.last), Fx.map((r) => HtmlRenderEvent(renderToString(r, ""), false)), Fx.append(HtmlRenderEvent(MANY_HOLE(key), last)));
+    }));
+}
+function getNodesFromRendered(rendered) {
+    const value = rendered.valueOf();
+    return Array.isArray(value) ? value : [value];
+}
+export const MANY_HOLE = (key) => `<!--/m_${key.toString()}-->`;

package/package.json

@@ -1,234 +1,36 @@
 {
   "name": "@typed/template",
-  "version": "0.14.0",
-  "description": "",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/tylors/typed.git"
-  },
-  "sideEffects": [],
-  "author": "Typed contributors",
-  "homepage": "https://github.com/tylors/typed",
-  "dependencies": {
-    "@effect/platform": "^0.66.2",
-    "@effect/schema": "^0.74.1",
-    "effect": "^3.8.4",
-    "fast-check": "^3.22.0",
-    "html5parser": "^2.0.2",
-    "typed-query-selector": "^2.12.0",
-    "udomdiff": "^1.1.0",
-    "@typed/context": "0.30.0",
-    "@typed/dom": "18.0.0",
-    "@typed/environment": "0.11.0",
-    "@typed/fx": "1.32.0",
-    "@typed/wire": "0.6.0"
-  },
-  "main": "./dist/cjs/index.js",
-  "module": "./dist/esm/index.js",
-  "types": "./dist/dts/index.d.ts",
+  "version": "1.0.0-beta.1",
+  "type": "module",
   "exports": {
-    "./package.json": "./package.json",
     ".": {
-      "types": "./dist/dts/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "default": "./dist/cjs/index.js"
-    },
-    "./Directive": {
-      "types": "./dist/dts/Directive.d.ts",
-      "import": "./dist/esm/Directive.js",
-      "default": "./dist/cjs/Directive.js"
-    },
-    "./ElementRef": {
-      "types": "./dist/dts/ElementRef.d.ts",
-      "import": "./dist/esm/ElementRef.js",
-      "default": "./dist/cjs/ElementRef.js"
-    },
-    "./ElementSource": {
-      "types": "./dist/dts/ElementSource.d.ts",
-      "import": "./dist/esm/ElementSource.js",
-      "default": "./dist/cjs/ElementSource.js"
-    },
-    "./Entry": {
-      "types": "./dist/dts/Entry.d.ts",
-      "import": "./dist/esm/Entry.js",
-      "default": "./dist/cjs/Entry.js"
-    },
-    "./EventHandler": {
-      "types": "./dist/dts/EventHandler.d.ts",
-      "import": "./dist/esm/EventHandler.js",
-      "default": "./dist/cjs/EventHandler.js"
-    },
-    "./Html": {
-      "types": "./dist/dts/Html.d.ts",
-      "import": "./dist/esm/Html.js",
-      "default": "./dist/cjs/Html.js"
-    },
-    "./HtmlChunk": {
-      "types": "./dist/dts/HtmlChunk.d.ts",
-      "import": "./dist/esm/HtmlChunk.js",
-      "default": "./dist/cjs/HtmlChunk.js"
-    },
-    "./Hydrate": {
-      "types": "./dist/dts/Hydrate.d.ts",
-      "import": "./dist/esm/Hydrate.js",
-      "default": "./dist/cjs/Hydrate.js"
-    },
-    "./Many": {
-      "types": "./dist/dts/Many.d.ts",
-      "import": "./dist/esm/Many.js",
-      "default": "./dist/cjs/Many.js"
-    },
-    "./Meta": {
-      "types": "./dist/dts/Meta.d.ts",
-      "import": "./dist/esm/Meta.js",
-      "default": "./dist/cjs/Meta.js"
-    },
-    "./Parser": {
-      "types": "./dist/dts/Parser.d.ts",
-      "import": "./dist/esm/Parser.js",
-      "default": "./dist/cjs/Parser.js"
-    },
-    "./Part": {
-      "types": "./dist/dts/Part.d.ts",
-      "import": "./dist/esm/Part.js",
-      "default": "./dist/cjs/Part.js"
-    },
-    "./Placeholder": {
-      "types": "./dist/dts/Placeholder.d.ts",
-      "import": "./dist/esm/Placeholder.js",
-      "default": "./dist/cjs/Placeholder.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     },
-    "./Platform": {
-      "types": "./dist/dts/Platform.d.ts",
-      "import": "./dist/esm/Platform.js",
-      "default": "./dist/cjs/Platform.js"
-    },
-    "./Render": {
-      "types": "./dist/dts/Render.d.ts",
-      "import": "./dist/esm/Render.js",
-      "default": "./dist/cjs/Render.js"
-    },
-    "./RenderContext": {
-      "types": "./dist/dts/RenderContext.d.ts",
-      "import": "./dist/esm/RenderContext.js",
-      "default": "./dist/cjs/RenderContext.js"
-    },
-    "./RenderEvent": {
-      "types": "./dist/dts/RenderEvent.d.ts",
-      "import": "./dist/esm/RenderEvent.js",
-      "default": "./dist/cjs/RenderEvent.js"
-    },
-    "./RenderQueue": {
-      "types": "./dist/dts/RenderQueue.d.ts",
-      "import": "./dist/esm/RenderQueue.js",
-      "default": "./dist/cjs/RenderQueue.js"
-    },
-    "./RenderTemplate": {
-      "types": "./dist/dts/RenderTemplate.d.ts",
-      "import": "./dist/esm/RenderTemplate.js",
-      "default": "./dist/cjs/RenderTemplate.js"
-    },
-    "./Renderable": {
-      "types": "./dist/dts/Renderable.d.ts",
-      "import": "./dist/esm/Renderable.js",
-      "default": "./dist/cjs/Renderable.js"
-    },
-    "./Template": {
-      "types": "./dist/dts/Template.d.ts",
-      "import": "./dist/esm/Template.js",
-      "default": "./dist/cjs/Template.js"
-    },
-    "./Test": {
-      "types": "./dist/dts/Test.d.ts",
-      "import": "./dist/esm/Test.js",
-      "default": "./dist/cjs/Test.js"
-    },
-    "./Vitest": {
-      "types": "./dist/dts/Vitest.d.ts",
-      "import": "./dist/esm/Vitest.js",
-      "default": "./dist/cjs/Vitest.js"
-    },
-    "./compiler-tools": {
-      "types": "./dist/dts/compiler-tools.d.ts",
-      "import": "./dist/esm/compiler-tools.js",
-      "default": "./dist/cjs/compiler-tools.js"
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.js"
     }
   },
-  "typesVersions": {
-    "*": {
-      "Directive": [
-        "./dist/dts/Directive.d.ts"
-      ],
-      "ElementRef": [
-        "./dist/dts/ElementRef.d.ts"
-      ],
-      "ElementSource": [
-        "./dist/dts/ElementSource.d.ts"
-      ],
-      "Entry": [
-        "./dist/dts/Entry.d.ts"
-      ],
-      "EventHandler": [
-        "./dist/dts/EventHandler.d.ts"
-      ],
-      "Html": [
-        "./dist/dts/Html.d.ts"
-      ],
-      "HtmlChunk": [
-        "./dist/dts/HtmlChunk.d.ts"
-      ],
-      "Hydrate": [
-        "./dist/dts/Hydrate.d.ts"
-      ],
-      "Many": [
-        "./dist/dts/Many.d.ts"
-      ],
-      "Meta": [
-        "./dist/dts/Meta.d.ts"
-      ],
-      "Parser": [
-        "./dist/dts/Parser.d.ts"
-      ],
-      "Part": [
-        "./dist/dts/Part.d.ts"
-      ],
-      "Placeholder": [
-        "./dist/dts/Placeholder.d.ts"
-      ],
-      "Platform": [
-        "./dist/dts/Platform.d.ts"
-      ],
-      "Render": [
-        "./dist/dts/Render.d.ts"
-      ],
-      "RenderContext": [
-        "./dist/dts/RenderContext.d.ts"
-      ],
-      "RenderEvent": [
-        "./dist/dts/RenderEvent.d.ts"
-      ],
-      "RenderQueue": [
-        "./dist/dts/RenderQueue.d.ts"
-      ],
-      "RenderTemplate": [
-        "./dist/dts/RenderTemplate.d.ts"
-      ],
-      "Renderable": [
-        "./dist/dts/Renderable.d.ts"
-      ],
-      "Template": [
-        "./dist/dts/Template.d.ts"
-      ],
-      "Test": [
-        "./dist/dts/Test.d.ts"
-      ],
-      "Vitest": [
-        "./dist/dts/Vitest.d.ts"
-      ],
-      "compiler-tools": [
-        "./dist/dts/compiler-tools.d.ts"
-      ]
-    }
-  }
-}
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "[ -d dist ] || rm -f tsconfig.tsbuildinfo; tsc",
+    "test": "vitest run --passWithNoTests"
+  },
+  "dependencies": {
+    "@typed/fx": "workspace:*",
+    "effect": "catalog:",
+    "html5parser": "2.0.2"
+  },
+  "devDependencies": {
+    "happy-dom": "catalog:",
+    "typescript": "catalog:",
+    "vitest": "catalog:"
+  },
+  "files": [
+    "dist",
+    "src"
+  ]
+}