@mindees/renderer 0.1.0

package/dist/ssr.d.ts

@@ -0,0 +1,40 @@
+import { DomDocument, DomNode } from "./dom.js";
+import { Mounted } from "./render.js";
+import { Component, MindeesNode } from "@mindees/core";
+
+//#region src/ssr.d.ts
+/**
+ * Render an element tree (or component + props) to an HTML string on the server.
+ *
+ * Reactive bindings run once to produce the initial snapshot, then the scope is
+ * disposed (SSR is a one-shot render — no live updates on the server).
+ *
+ * @example
+ * const html = renderToString(App, {})
+ * // → "<div><span>hello</span></div>"
+ */
+declare function renderToString(node: MindeesNode): string;
+declare function renderToString<P>(component: Component<P>, props: P): string;
+/**
+ * Hydrate a server-rendered container on the client: render the same tree with
+ * the DOM backend so reactive bindings attach and take over updates.
+ *
+ * NOTE: this is a **developer-preview** hydration. It currently renders into the
+ * (cleared) container rather than adopting existing DOM nodes in place;
+ * node-adopting hydration (zero re-create) is tracked for a later phase. The
+ * observable result — a live, reactive tree matching the server HTML — is
+ * correct today.
+ *
+ * @param container - The element whose contents were server-rendered.
+ * @param node - The same tree (element or component+props) used on the server.
+ * @param options - Optionally supply a `document` (e.g. for tests).
+ */
+declare function hydrate(container: DomNode, node: MindeesNode, options?: {
+  document?: DomDocument;
+}): Mounted<DomNode>;
+declare function hydrate<P>(container: DomNode, component: Component<P>, props: P, options?: {
+  document?: DomDocument;
+}): Mounted<DomNode>;
+//#endregion
+export { hydrate, renderToString };
+//# sourceMappingURL=ssr.d.ts.map

package/dist/ssr.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr.d.ts","names":[],"sources":["../src/ssr.ts"],"mappings":";;;;;;;;;;;;;;;iBA0BgB,cAAA,CAAe,IAAiB,EAAX,WAAW;AAAA,iBAChC,cAAA,IAAkB,SAAA,EAAW,SAAA,CAAU,CAAA,GAAI,KAAA,EAAO,CAAA;AAAC;AAmCnE;;;;;;;;;;;;;AAnCmE,iBAmCnD,OAAA,CACd,SAAA,EAAW,OAAA,EACX,IAAA,EAAM,WAAA,EACN,OAAA;EAAY,QAAA,GAAW,WAAA;AAAA,IACtB,OAAA,CAAQ,OAAA;AAAA,iBACK,OAAA,IACd,SAAA,EAAW,OAAA,EACX,SAAA,EAAW,SAAA,CAAU,CAAA,GACrB,KAAA,EAAO,CAAA,EACP,OAAA;EAAY,QAAA,GAAW,WAAA;AAAA,IACtB,OAAA,CAAQ,OAAA"}

package/dist/ssr.js

@@ -0,0 +1,31 @@
+import { createDomBackend, domTagFor } from "./dom.js";
+import { createHeadlessBackend, createHeadlessRoot } from "./headless.js";
+import { render } from "./render.js";
+//#region src/ssr.ts
+function renderToString(...args) {
+	const backend = createHeadlessBackend();
+	const root = createHeadlessRoot("#root");
+	const mounted = args.length === 2 ? render(args[0], args[1], backend, root) : render(args[0], backend, root);
+	try {
+		return root.children.map((child) => backend.serialize(child, { mapTag: domTagFor })).join("");
+	} finally {
+		mounted.dispose();
+	}
+}
+function hydrate(container, a, b, c) {
+	const looksLikeOptions = (v) => v === void 0 || typeof v === "object" && v !== null && Object.keys(v).every((k) => k === "document");
+	const isComponent = c !== void 0 || b !== void 0 && !looksLikeOptions(b);
+	const props = isComponent ? b : void 0;
+	const backend = createDomBackend(((isComponent ? c : b) ?? {}).document);
+	let child = container.firstChild ?? null;
+	while (child) {
+		const next = child.nextSibling;
+		container.removeChild(child);
+		child = next;
+	}
+	return isComponent ? render(a, props, backend, container) : render(a, backend, container);
+}
+//#endregion
+export { hydrate, renderToString };
+
+//# sourceMappingURL=ssr.js.map

package/dist/ssr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ssr.js","names":[],"sources":["../src/ssr.ts"],"sourcesContent":["/**\n * Server-side rendering for the web target.\n *\n * `renderToString` renders an element/component tree to crawlable HTML using the\n * headless backend (no DOM needed) — giving MindeesNative real SSR + SEO, which\n * Flutter Web's canvas renderer cannot. `hydrate` then attaches reactive\n * bindings to the server-rendered DOM on the client.\n *\n * @module\n */\n\nimport type { Component, MindeesNode } from '@mindees/core'\nimport { createDomBackend, type DomDocument, type DomNode, domTagFor } from './dom'\nimport { createHeadlessBackend, createHeadlessRoot } from './headless'\nimport { type Mounted, render } from './render'\n\n/**\n * Render an element tree (or component + props) to an HTML string on the server.\n *\n * Reactive bindings run once to produce the initial snapshot, then the scope is\n * disposed (SSR is a one-shot render — no live updates on the server).\n *\n * @example\n * const html = renderToString(App, {})\n * // → \"<div><span>hello</span></div>\"\n */\nexport function renderToString(node: MindeesNode): string\nexport function renderToString<P>(component: Component<P>, props: P): string\nexport function renderToString<P>(...args: [MindeesNode] | [Component<P>, P]): string {\n  const backend = createHeadlessBackend()\n  const root = createHeadlessRoot('#root')\n  // Component form is the 2-arg call (a component + its props). A 1-arg call is\n  // a node — including an accessor node `() => MindeesNode` — so we dispatch by\n  // arity, not `typeof`.\n  const mounted =\n    args.length === 2\n      ? render(args[0] as Component<P>, args[1] as P, backend, root)\n      : render(args[0] as MindeesNode, backend, root)\n  try {\n    // Serialize with the web tag mapping so SSR HTML matches what the DOM\n    // backend produces on hydration (view→div, text→span, …).\n    return root.children.map((child) => backend.serialize(child, { mapTag: domTagFor })).join('')\n  } finally {\n    // SSR is one-shot: dispose bindings so nothing leaks on the server.\n    mounted.dispose()\n  }\n}\n\n/**\n * Hydrate a server-rendered container on the client: render the same tree with\n * the DOM backend so reactive bindings attach and take over updates.\n *\n * NOTE: this is a **developer-preview** hydration. It currently renders into the\n * (cleared) container rather than adopting existing DOM nodes in place;\n * node-adopting hydration (zero re-create) is tracked for a later phase. The\n * observable result — a live, reactive tree matching the server HTML — is\n * correct today.\n *\n * @param container - The element whose contents were server-rendered.\n * @param node - The same tree (element or component+props) used on the server.\n * @param options - Optionally supply a `document` (e.g. for tests).\n */\nexport function hydrate(\n  container: DomNode,\n  node: MindeesNode,\n  options?: { document?: DomDocument },\n): Mounted<DomNode>\nexport function hydrate<P>(\n  container: DomNode,\n  component: Component<P>,\n  props: P,\n  options?: { document?: DomDocument },\n): Mounted<DomNode>\nexport function hydrate<P>(\n  container: DomNode,\n  a: MindeesNode | Component<P>,\n  b?: P | { document?: DomDocument },\n  c?: { document?: DomDocument },\n): Mounted<DomNode> {\n  type Options = { document?: DomDocument }\n  const looksLikeOptions = (v: unknown): v is Options =>\n    v === undefined ||\n    (typeof v === 'object' && v !== null && Object.keys(v).every((k) => k === 'document'))\n\n  // `MindeesNode` includes the accessor form `() => MindeesNode`, so `typeof a`\n  // can't tell a component from a node. Dispatch by arity/shape instead:\n  // - a 4th arg (`c`) present ⇒ component form `(container, Component, props, options?)`.\n  // - a 3rd arg (`b`) that is NOT a bare `{ document }` options object ⇒ also the\n  //   component form (props supplied without options).\n  // - otherwise ⇒ node form `(container, node, options?)` where `b` is options.\n  const isComponent = c !== undefined || (b !== undefined && !looksLikeOptions(b))\n  const props = isComponent ? (b as P) : undefined\n  const options: Options = (isComponent ? c : (b as Options | undefined)) ?? {}\n\n  const backend = createDomBackend(options.document)\n\n  // Current preview: clear server-rendered children, then render fresh and\n  // attach bindings. Adopt-in-place hydration is a documented follow-up.\n  let child = (container as DomNode & { firstChild?: DomNode | null }).firstChild ?? null\n  while (child) {\n    const next = child.nextSibling\n    container.removeChild(child)\n    child = next\n  }\n\n  return isComponent\n    ? render(a as Component<P>, props as P, backend, container)\n    : render(a as MindeesNode, backend, container)\n}\n"],"mappings":";;;;AA4BA,SAAgB,eAAkB,GAAG,MAAiD;CACpF,MAAM,UAAU,sBAAsB;CACtC,MAAM,OAAO,mBAAmB,OAAO;CAIvC,MAAM,UACJ,KAAK,WAAW,IACZ,OAAO,KAAK,IAAoB,KAAK,IAAS,SAAS,IAAI,IAC3D,OAAO,KAAK,IAAmB,SAAS,IAAI;CAClD,IAAI;EAGF,OAAO,KAAK,SAAS,KAAK,UAAU,QAAQ,UAAU,OAAO,EAAE,QAAQ,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE;CAC9F,UAAU;EAER,QAAQ,QAAQ;CAClB;AACF;AA2BA,SAAgB,QACd,WACA,GACA,GACA,GACkB;CAElB,MAAM,oBAAoB,MACxB,MAAM,KAAA,KACL,OAAO,MAAM,YAAY,MAAM,QAAQ,OAAO,KAAK,CAAC,EAAE,OAAO,MAAM,MAAM,UAAU;CAQtF,MAAM,cAAc,MAAM,KAAA,KAAc,MAAM,KAAA,KAAa,CAAC,iBAAiB,CAAC;CAC9E,MAAM,QAAQ,cAAe,IAAU,KAAA;CAGvC,MAAM,UAAU,mBAFU,cAAc,IAAK,MAA8B,CAAC,GAEnC,QAAQ;CAIjD,IAAI,QAAS,UAAwD,cAAc;CACnF,OAAO,OAAO;EACZ,MAAM,OAAO,MAAM;EACnB,UAAU,YAAY,KAAK;EAC3B,QAAQ;CACV;CAEA,OAAO,cACH,OAAO,GAAmB,OAAY,SAAS,SAAS,IACxD,OAAO,GAAkB,SAAS,SAAS;AACjD"}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@mindees/renderer",
+  "version": "0.1.0",
+  "description": "MindeesNative Helix — fine-grained reactive renderer with a web/DOM backend, SSR + hydration, and a headless test backend. Native and GPU-canvas backends are research tracks.",
+  "license": "MIT OR Apache-2.0",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mindees/mindees.git",
+    "directory": "packages/renderer"
+  },
+  "dependencies": {
+    "@mindees/core": "0.1.0"
+  },
+  "devDependencies": {
+    "happy-dom": "20.9.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc --noEmit"
+  }
+}