@praxisjs/runtime 0.5.5 → 0.6.0

package/src/index.ts

@@ -1,22 +1,17 @@
 import { mountChildren } from "./children";
 import { runInScope } from "./context";
+import { reconcile } from "./hydration";
+import { runInRecording } from "./hydration-context";
 import { Scope } from "./scope";
 
-/**
- * Renders a component tree into a container element.
- *
- * The factory function is called once inside the root scope,
- * so `jsx()` can access the current scope via `getCurrentScope()`.
- *
- * @example
- * render(() => <App />, document.getElementById('app'));
- */
-export function render(
+/** Written by `@praxisjs/ssg` onto the mount container in its prerendered HTML. */
+const SSG_MARKER = "data-praxis-ssg";
+
+function mountCreate(
   factory: () => Node | Node[] | null,
   container: HTMLElement,
 ): () => void {
   const rootScope = new Scope();
-
   container.innerHTML = "";
 
   runInScope(rootScope, () => {
@@ -30,6 +25,57 @@ export function render(
   };
 }
 
+function hydrate(
+  factory: () => Node | Node[] | null,
+  container: HTMLElement,
+): () => void {
+  const rootScope = new Scope();
+  const scratch = document.createDocumentFragment();
+
+  // Build normally — same code as mountCreate, just into a detached scratch
+  // node instead of the real container, so it can be walked in document
+  // order afterwards (its own construction order is bottom-up, not useful
+  // for matching against the server-rendered DOM directly).
+  runInRecording(() => {
+    runInScope(rootScope, () => {
+      const result = factory();
+      mountChildren(scratch, result, rootScope);
+    });
+  });
+
+  reconcile(container, Array.from(scratch.childNodes));
+
+  return () => {
+    rootScope.dispose();
+    container.innerHTML = "";
+  };
+}
+
+/**
+ * Renders a component tree into a container element.
+ *
+ * The factory function is called once inside the root scope,
+ * so `jsx()` can access the current scope via `getCurrentScope()`.
+ *
+ * If `container` carries the marker `@praxisjs/ssg` stamps onto prerendered
+ * HTML, the tree is built normally into a detached scratch node and then
+ * reconciled against the existing DOM (real elements are kept and have their
+ * props/listeners replayed onto them; text/comments and any mismatched nodes
+ * are recreated) instead of clearing the container and mounting fresh.
+ *
+ * @example
+ * render(() => <App />, document.getElementById('app'));
+ */
+export function render(
+  factory: () => Node | Node[] | null,
+  container: HTMLElement,
+): () => void {
+  if (container.hasAttribute(SSG_MARKER)) {
+    return hydrate(factory, container);
+  }
+  return mountCreate(factory, container);
+}
+
 export { Scope } from "./scope";
 export { runInScope, getCurrentScope } from "./context";
 export { mountElement } from "./element";

package/src/portal.ts

@@ -1,4 +1,5 @@
 import { StatelessComponent } from "@praxisjs/core";
+import { isServerRenderPass } from "@praxisjs/core/internal";
 
 import { mountChildren } from "./children";
 import { getCurrentScope } from "./context";
@@ -12,6 +13,13 @@ export class Portal extends StatelessComponent<PortalProps> {
   static readonly __isStateless = true;
 
   render() {
+    // Portals escape to an arbitrary external target (default document.body),
+    // which would need a hydration cursor shared across every portal mounted at
+    // that same target — out of scope for v1. Skip during the server render pass
+    // (target content isn't part of the static HTML); the client mounts normally,
+    // create-mode, right after hydration completes — no duplication.
+    if (isServerRenderPass()) return null;
+
     const scope = getCurrentScope();
     const target = resolvePortalTarget(this.props.to);
     if (!target) return null;

package/src/reactive.ts

@@ -1,4 +1,5 @@
 import { runInScope } from "./context";
+import { isRecording, registerReactiveNode } from "./hydration-context";
 import { Scope } from "./scope";
 
 function collectNodes(value: unknown, out: Node[]): void {
@@ -37,6 +38,15 @@ export function mountReactive(
     const newNodes: Node[] = [];
     collectNodes(result, newNodes);
 
+    // During a hydration build pass, remember that each of these fresh nodes
+    // belongs to *this* array — reconcile() mutates `newNodes` in place (by
+    // reference, same array `currentNodes` ends up pointing at) if it decides
+    // to keep a real element instead of one of them, so future diffs here
+    // stay correct.
+    if (isRecording()) {
+      for (const n of newNodes) registerReactiveNode(n, newNodes);
+    }
+
     const anchor = end.parentNode ?? parent;
 
     if (currentNodes.length > 0) {