optimize hydration keys

.changeset/slow-pugs-join.md

@@ -0,0 +1,6 @@
+---
+"babel-preset-solid": patch
+"solid-js": patch
+---
+
+optimize hydration keys

package.json

@@ -34,21 +34,21 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@types/node": "^18.11.19",
     "@vitest/coverage-c8": "^0.29.7",
-    "babel-plugin-jsx-dom-expressions": "^0.37.23",
+    "babel-plugin-jsx-dom-expressions": "^0.38.0",
     "coveralls": "^3.1.1",
     "csstype": "^3.1.0",
-    "dom-expressions": "0.37.23",
-    "hyper-dom-expressions": "0.37.23",
+    "dom-expressions": "0.38.0",
+    "hyper-dom-expressions": "0.38.0",
     "jsdom": "^21.1.1",
-    "lit-dom-expressions": "0.37.23",
+    "lit-dom-expressions": "0.38.0",
     "ncp": "^2.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "rimraf": "^3.0.2",
     "rollup": "^3.7.5",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-copy": "^3.4.0",
-    "seroval": "^1.0.4",
+    "seroval": "^1.1.0",
     "simple-git-hooks": "^2.8.1",
     "symlink-dir": "^5.0.1",
     "tsconfig-replace-paths": "^0.0.11",

packages/babel-preset-solid/package.json

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

packages/solid/package.json

@@ -241,7 +241,7 @@
   ],
   "dependencies": {
     "csstype": "^3.1.0",
-    "seroval": "^1.0.4",
-    "seroval-plugins": "^1.0.3"
+    "seroval": "^1.1.0",
+    "seroval-plugins": "^1.1.0"
   }
 }

packages/solid/src/reactive/signal.ts

@@ -620,7 +620,7 @@ export function createResource<T, S, R>(
     );
 
   if (sharedConfig.context) {
-    id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
+    id = sharedConfig.getNextContextId();
     let v;
     if (options.ssrLoadFrom === "initial") initP = options.initialValue as T;
     else if (sharedConfig.load && (v = sharedConfig.load(id))) initP = v;

packages/solid/src/render/Suspense.ts

@@ -142,7 +142,7 @@ export function Suspense(props: { fallback?: JSX.Element; children: JSX.Element
     },
     owner = getOwner();
   if (sharedConfig.context && sharedConfig.load) {
-    const key = sharedConfig.context.id + sharedConfig.context.count;
+    const key = sharedConfig.getContextId();
     let ref = sharedConfig.load(key);
     if (ref) {
       if (typeof ref !== "object" || ref.status !== "success") p = ref;
@@ -200,7 +200,7 @@ export function Suspense(props: { fallback?: JSX.Element; children: JSX.Element
           return createRoot(disposer => {
             dispose = disposer;
             if (ctx) {
-              setHydrateContext({ id: ctx.id + "f", count: 0 });
+              setHydrateContext({ id: ctx.id + "F", count: 0 });
               ctx = undefined;
             }
             return props.fallback;

packages/solid/src/render/component.ts

@@ -388,5 +388,5 @@ export function lazy<T extends Component<any>>(
 let counter = 0;
 export function createUniqueId(): string {
   const ctx = sharedConfig.context;
-  return ctx ? `${ctx.id}${ctx.count++}` : `cl-${counter++}`;
+  return ctx ? sharedConfig.getNextContextId() : `cl-${counter++}`;
 }

packages/solid/src/render/flow.ts

@@ -258,7 +258,7 @@ export function ErrorBoundary(props: {
 }): JSX.Element {
   let err;
   if (sharedConfig!.context && sharedConfig!.load)
-    err = sharedConfig.load(sharedConfig.context.id + sharedConfig.context.count);
+    err = sharedConfig.load(sharedConfig.getContextId());
   const [errored, setErrored] = createSignal<any>(
     err,
     "_SOLID_DEV_" ? { name: "errored" } : undefined

packages/solid/src/render/hydration.ts

@@ -12,9 +12,26 @@ type SharedConfig = {
   done?: boolean;
   count?: number;
   effects?: Computation<any, any>[];
+  getContextId(): string;
+  getNextContextId(): string;
 };
 
-export const sharedConfig: SharedConfig = { context: undefined, registry: undefined };
+export const sharedConfig: SharedConfig = {
+  context: undefined,
+  registry: undefined,
+  getContextId() {
+    return getContextId(this.context!.count);
+  },
+  getNextContextId() {
+    return getContextId(this.context!.count++);
+  }
+};
+
+function getContextId(count: number) {
+  const num = String(count),
+    len = num.length - 1;
+  return sharedConfig.context!.id + (len ? String.fromCharCode(96 + len) : "") + num;
+}
 
 export function setHydrateContext(context?: HydrationContext): void {
   sharedConfig.context = context;
@@ -23,7 +40,7 @@ export function setHydrateContext(context?: HydrationContext): void {
 export function nextHydrateContext(): HydrationContext | undefined {
   return {
     ...sharedConfig.context,
-    id: `${sharedConfig.context!.id}${sharedConfig.context!.count++}-`,
+    id: sharedConfig.getNextContextId(),
     count: 0
   };
 }

packages/solid/src/server/rendering.ts

@@ -49,8 +49,27 @@ function resolveSSRNode(node: any): string {
 
 type SharedConfig = {
   context?: HydrationContext;
+  getContextId(): string;
+  getNextContextId(): string;
 };
-export const sharedConfig: SharedConfig = {};
+export const sharedConfig: SharedConfig = {
+  context: undefined,
+  getContextId() {
+    if (!this.context) throw new Error(`getContextId cannot be used under non-hydrating context`);
+    return getContextId(this.context.count);
+  },
+  getNextContextId() {
+    if (!this.context)
+      throw new Error(`getNextContextId cannot be used under non-hydrating context`);
+    return getContextId(this.context.count++);
+  }
+};
+
+function getContextId(count: number) {
+  const num = String(count),
+    len = num.length - 1;
+  return sharedConfig.context!.id + (len ? String.fromCharCode(96 + len) : "") + num;
+}
 
 function setHydrateContext(context?: HydrationContext): void {
   sharedConfig.context = context;
@@ -60,16 +79,14 @@ function nextHydrateContext(): HydrationContext | undefined {
   return sharedConfig.context
     ? {
         ...sharedConfig.context,
-        id: `${sharedConfig.context.id}${sharedConfig.context.count++}-`,
+        id: sharedConfig.getNextContextId(),
         count: 0
       }
     : undefined;
 }
 
 export function createUniqueId(): string {
-  const ctx = sharedConfig.context;
-  if (!ctx) throw new Error(`createUniqueId cannot be used under non-hydrating context`);
-  return `${ctx.id}${ctx.count++}`;
+  return sharedConfig.getNextContextId();
 }
 
 export function createComponent<T>(Comp: (props: T) => JSX.Element, props: T): JSX.Element {
@@ -266,7 +283,7 @@ export function ErrorBoundary(props: {
     clean: any,
     sync = true;
   const ctx = sharedConfig.context!;
-  const id = ctx.id + ctx.count;
+  const id = sharedConfig.getContextId();
   function displayFallback() {
     cleanNode(clean);
     ctx.serialize(id, error);
@@ -368,7 +385,7 @@ export function createResource<T, S>(
     source = true as ResourceSource<S>;
   }
   const contexts = new Set<SuspenseContextType>();
-  const id = sharedConfig.context!.id + sharedConfig.context!.count++;
+  const id = sharedConfig.getNextContextId();
   let resource: { ref?: any; data?: T } = {};
   let value = options.storage ? options.storage(options.initialValue)[0]() : options.initialValue;
   let p: Promise<T> | T | null;
@@ -562,7 +579,7 @@ export function SuspenseList(props: {
 export function Suspense(props: { fallback?: string; children: string }) {
   let done: undefined | ((html?: string, error?: any) => boolean);
   const ctx = sharedConfig.context!;
-  const id = ctx.id + ctx.count;
+  const id = sharedConfig.getContextId();
   const o = createOwner();
   const value: SuspenseContextType =
     ctx.suspense[id] ||
@@ -607,14 +624,14 @@ export function Suspense(props: { fallback?: string; children: string }) {
   done = ctx.async ? ctx.registerFragment(id) : undefined;
   return catchError(() => {
     if (ctx.async) {
-      setHydrateContext({ ...ctx, count: 0, id: ctx.id + "0-f", noHydrate: true });
+      setHydrateContext({ ...ctx, count: 0, id: ctx.id + "0F", noHydrate: true });
       const res = {
         t: `<template id="pl-${id}"></template>${resolveSSRNode(props.fallback)}<!--pl-${id}-->`
       };
       setHydrateContext(ctx);
       return res;
     }
-    setHydrateContext({ ...ctx, count: 0, id: ctx.id + "0-f" });
+    setHydrateContext({ ...ctx, count: 0, id: ctx.id + "0F" });
     ctx.serialize(id, "$$f");
     return props.fallback;
   }, suspenseError);