fix #1596 ssr fragment text merge, fix #1599 ssr onCleanup

.changeset/strange-eggs-itch.md

@@ -0,0 +1,6 @@
+---
+"babel-preset-solid": patch
+"solid-js": patch
+---
+
+fix #1596 ssr fragment text merge, fix #1599 ssr onCleanup

package.json

@@ -33,16 +33,16 @@
     "@types/jest": "^28.1.6",
     "@types/node": "^18.11.19",
     "babel-jest": "^28.1.3",
-    "babel-plugin-jsx-dom-expressions": "^0.35.18",
+    "babel-plugin-jsx-dom-expressions": "^0.35.19",
     "coveralls": "^3.1.1",
     "csstype": "^3.1.0",
-    "dom-expressions": "0.35.18",
+    "dom-expressions": "0.35.19",
     "fast-glob": "^3.2.11",
-    "hyper-dom-expressions": "0.35.18",
+    "hyper-dom-expressions": "0.35.19",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
     "jest-ts-webcompat-resolver": "^1.0.0",
-    "lit-dom-expressions": "0.35.18",
+    "lit-dom-expressions": "0.35.19",
     "ncp": "^2.0.0",
     "npm-run-all": "^4.1.5",
     "rimraf": "^3.0.2",

packages/babel-preset-solid/package.json

@@ -14,7 +14,7 @@
     "test": "node test.js"
   },
   "dependencies": {
-    "babel-plugin-jsx-dom-expressions": "^0.35.18"
+    "babel-plugin-jsx-dom-expressions": "^0.35.19"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0"

packages/solid/src/server/reactive.ts

@@ -13,7 +13,6 @@ export type Setter<T> = undefined extends T
 export type Signal<T> = [get: Accessor<T>, set: Setter<T>];
 
 const ERROR = Symbol("error");
-export const BRANCH = Symbol("branch");
 export function castError(err: any) {
   if (err instanceof Error || typeof err === "string") return err;
   return new Error("Unknown error");
@@ -26,12 +25,23 @@ function handleError(err: any) {
   for (const f of fns) f(err);
 }
 
-const UNOWNED: Owner = { context: null, owner: null };
+const UNOWNED: Owner = { context: null, owner: null, owned: null, cleanups: null };
 export let Owner: Owner | null = null;
 
 interface Owner {
   owner: Owner | null;
   context: any | null;
+  owned: Owner[] | null;
+  cleanups: (() => void)[] | null;
+}
+
+export function createOwner(): Owner {
+  const o = { owner: Owner, context: null, owned: null, cleanups: null };
+  if (Owner) {
+    if (!Owner.owned) Owner.owned = [o];
+    else Owner.owned.push(o);
+  }
+  return o;
 }
 
 export function createRoot<T>(fn: (dispose: () => void) => T, detachedOwner?: typeof Owner): T {
@@ -41,12 +51,14 @@ export function createRoot<T>(fn: (dispose: () => void) => T, detachedOwner?: ty
         ? UNOWNED
         : {
             context: null,
-            owner: detachedOwner === undefined ? owner : detachedOwner
+            owner: detachedOwner === undefined ? owner : detachedOwner,
+            owned: null,
+            cleanups: null
           };
   Owner = root;
   let result: T;
   try {
-    result = fn(() => {});
+    result = fn(fn.length === 0 ? () => {} : () => cleanNode(root));
   } catch (err) {
     handleError(err);
   } finally {
@@ -68,7 +80,7 @@ export function createSignal<T>(
 }
 
 export function createComputed<T>(fn: (v?: T) => T, value?: T): void {
-  Owner = { owner: Owner, context: null };
+  Owner = createOwner();
   try {
     fn(value);
   } catch (err) {
@@ -89,7 +101,7 @@ export function createReaction(fn: () => void) {
 }
 
 export function createMemo<T>(fn: (v?: T) => T, value?: T): () => T {
-  Owner = { owner: Owner, context: null };
+  Owner = createOwner();
   let v: T;
   try {
     v = fn(value);
@@ -136,18 +148,21 @@ export function on<T, U>(
 export function onMount(fn: () => void) {}
 
 export function onCleanup(fn: () => void) {
-  let node;
-  if (Owner && (node = lookup(Owner, BRANCH))) {
-    if (!node.cleanups) node.cleanups = [fn];
-    else node.cleanups.push(fn);
+  if (Owner) {
+    if (!Owner.cleanups) Owner.cleanups = [fn];
+    else Owner.cleanups.push(fn);
   }
   return fn;
 }
 
-export function cleanNode(node: { cleanups?: Function[] | null }) {
+export function cleanNode(node: Owner) {
+  if (node.owned) {
+    for (let i = 0; i < node.owned.length; i++) cleanNode(node.owned[i]);
+    node.owned = null;
+  }
   if (node.cleanups) {
     for (let i = 0; i < node.cleanups.length; i++) node.cleanups[i]();
-    node.cleanups = undefined;
+    node.cleanups = null;
   }
 }
 

packages/solid/src/server/rendering.ts

@@ -11,7 +11,7 @@ import {
   castError,
   onCleanup,
   cleanNode,
-  BRANCH
+  createOwner
 } from "./reactive.js";
 import type { JSX } from "../jsx.js";
 
@@ -270,9 +270,8 @@ export function ErrorBoundary(props: {
     !sync && ctx.replace("e" + id, displayFallback);
     sync = true;
   });
-  onCleanup(() => cleanNode(clean));
   createMemo(() => {
-    Owner!.context = { [BRANCH]: (clean = {}) };
+    clean = Owner;
     return (res = props.children);
   });
   if (error) return displayFallback();
@@ -556,11 +555,7 @@ export function Suspense(props: { fallback?: string; children: string }) {
   let clean: any;
   const ctx = sharedConfig.context!;
   const id = ctx.id + ctx.count;
-  const o = Owner;
-  if (o) {
-    if (o.context) o.context[BRANCH] = clean = {};
-    else o.context = { [BRANCH]: (clean = {}) };
-  }
+  const o = createOwner();
   const value: SuspenseContextType =
     ctx.suspense[id] ||
     (ctx.suspense[id] = {
@@ -574,11 +569,11 @@ export function Suspense(props: { fallback?: string; children: string }) {
     });
   function runSuspense() {
     setHydrateContext({ ...ctx, count: 0 });
+    o && cleanNode(o);
     return runWithOwner(o!, () => {
       return createComponent(SuspenseContext.Provider, {
         value,
         get children() {
-          clean && cleanNode(clean);
           return props.children;
         }
       });
@@ -601,7 +596,9 @@ export function Suspense(props: { fallback?: string; children: string }) {
   done = ctx.async ? ctx.registerFragment(id) : undefined;
   if (ctx.async) {
     setHydrateContext({ ...ctx, count: 0, id: ctx.id + "0-f", noHydrate: true });
-    const res = { t: `<template id="pl-${id}"></template>${resolveSSRNode(props.fallback)}<!pl-${id}>` };
+    const res = {
+      t: `<template id="pl-${id}"></template>${resolveSSRNode(props.fallback)}<!pl-${id}>`
+    };
     setHydrateContext(ctx);
     return res;
   }