solid-js 1.3.13 → 1.3.16

package/dist/dev.cjs

@@ -388,7 +388,7 @@ function createSelector(source, fn = equalFn, options) {
   const subs = new Map();
   const node = createComputation(p => {
     const v = source();
-    for (const key of subs.keys()) if (fn(key, v) !== (p !== undefined && fn(key, p))) {
+    for (const key of subs.keys()) if (fn(key, v) !== fn(key, p)) {
       const l = subs.get(key);
       for (const c of l.values()) {
         c.state = STALE;
@@ -448,8 +448,8 @@ options) {
   return prevValue => {
     let input;
     if (isArray) {
-      input = [];
-      for (let i = 0; i < deps.length; i++) input.push(deps[i]());
+      input = Array(deps.length);
+      for (let i = 0; i < deps.length; i++) input[i] = deps[i]();
     } else input = deps();
     if (defer) {
       defer = false;
@@ -621,7 +621,7 @@ function readSignal() {
   if (this.sources && (!runningTransition && this.state || runningTransition && this.tState)) {
     const updates = Updates;
     Updates = null;
-    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookDownstream(this);
+    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookUpstream(this);
     Updates = updates;
   }
   if (Listener) {
@@ -671,7 +671,7 @@ function writeSignal(node, value, isComp) {
         if (TransitionRunning && Transition.disposed.has(o)) continue;
         if (TransitionRunning && !o.tState || !TransitionRunning && !o.state) {
           if (o.pure) Updates.push(o);else Effects.push(o);
-          if (o.observers) markUpstream(o);
+          if (o.observers) markDownstream(o);
         }
         if (TransitionRunning) o.tState = STALE;else o.state = STALE;
       }
@@ -764,7 +764,7 @@ function createComputation(fn, init, pure, state = STALE, options) {
 function runTop(node) {
   const runningTransition = Transition && Transition.running;
   if (!runningTransition && node.state === 0 || runningTransition && node.tState === 0) return;
-  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookDownstream(node);
+  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookUpstream(node);
   if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);
   const ancestors = [node];
   while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) {
@@ -785,7 +785,7 @@ function runTop(node) {
     } else if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) {
       const updates = Updates;
       Updates = null;
-      lookDownstream(node, ancestors[0]);
+      lookUpstream(node, ancestors[0]);
       Updates = updates;
     }
   }
@@ -880,11 +880,12 @@ function runUserEffects(queue) {
     const e = queue[i];
     if (!e.user) runTop(e);else queue[userLength++] = e;
   }
+  if (sharedConfig.context) setHydrateContext();
   const resume = queue.length;
   for (i = 0; i < userLength; i++) runTop(queue[i]);
   for (i = resume; i < queue.length; i++) runTop(queue[i]);
 }
-function lookDownstream(node, ignore) {
+function lookUpstream(node, ignore) {
   const runningTransition = Transition && Transition.running;
   if (runningTransition) node.tState = 0;else node.state = 0;
   for (let i = 0; i < node.sources.length; i += 1) {
@@ -892,18 +893,18 @@ function lookDownstream(node, ignore) {
     if (source.sources) {
       if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
         if (source !== ignore) runTop(source);
-      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookDownstream(source, ignore);
+      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
     }
   }
 }
-function markUpstream(node) {
+function markDownstream(node) {
   const runningTransition = Transition && Transition.running;
   for (let i = 0; i < node.observers.length; i += 1) {
     const o = node.observers[i];
     if (!runningTransition && !o.state || runningTransition && !o.tState) {
       if (runningTransition) o.tState = PENDING;else o.state = PENDING;
       if (o.pure) Updates.push(o);else Effects.push(o);
-      o.observers && markUpstream(o);
+      o.observers && markDownstream(o);
     }
   }
 }
@@ -1426,6 +1427,7 @@ function ErrorBoundary(props) {
   return createMemo(() => {
     if ((e = errored()) != null) {
       const f = props.fallback;
+      if ((typeof f !== "function" || f.length == 0)) console.error(e);
       return typeof f === "function" && f.length ? untrack(() => f(e, () => setErrored(null))) : f;
     }
     onError(setErrored);
@@ -1531,7 +1533,7 @@ function Suspense(props) {
       });
       flicker = s;
       p.then(err => {
-        if (error = err) return set();
+        if ((error = err) || sharedConfig.done) return set();
         sharedConfig.gather(key);
         setHydrateContext(ctx);
         set();

package/dist/dev.js

@@ -384,7 +384,7 @@ function createSelector(source, fn = equalFn, options) {
   const subs = new Map();
   const node = createComputation(p => {
     const v = source();
-    for (const key of subs.keys()) if (fn(key, v) !== (p !== undefined && fn(key, p))) {
+    for (const key of subs.keys()) if (fn(key, v) !== fn(key, p)) {
       const l = subs.get(key);
       for (const c of l.values()) {
         c.state = STALE;
@@ -444,8 +444,8 @@ options) {
   return prevValue => {
     let input;
     if (isArray) {
-      input = [];
-      for (let i = 0; i < deps.length; i++) input.push(deps[i]());
+      input = Array(deps.length);
+      for (let i = 0; i < deps.length; i++) input[i] = deps[i]();
     } else input = deps();
     if (defer) {
       defer = false;
@@ -617,7 +617,7 @@ function readSignal() {
   if (this.sources && (!runningTransition && this.state || runningTransition && this.tState)) {
     const updates = Updates;
     Updates = null;
-    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookDownstream(this);
+    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookUpstream(this);
     Updates = updates;
   }
   if (Listener) {
@@ -667,7 +667,7 @@ function writeSignal(node, value, isComp) {
         if (TransitionRunning && Transition.disposed.has(o)) continue;
         if (TransitionRunning && !o.tState || !TransitionRunning && !o.state) {
           if (o.pure) Updates.push(o);else Effects.push(o);
-          if (o.observers) markUpstream(o);
+          if (o.observers) markDownstream(o);
         }
         if (TransitionRunning) o.tState = STALE;else o.state = STALE;
       }
@@ -760,7 +760,7 @@ function createComputation(fn, init, pure, state = STALE, options) {
 function runTop(node) {
   const runningTransition = Transition && Transition.running;
   if (!runningTransition && node.state === 0 || runningTransition && node.tState === 0) return;
-  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookDownstream(node);
+  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookUpstream(node);
   if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);
   const ancestors = [node];
   while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) {
@@ -781,7 +781,7 @@ function runTop(node) {
     } else if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) {
       const updates = Updates;
       Updates = null;
-      lookDownstream(node, ancestors[0]);
+      lookUpstream(node, ancestors[0]);
       Updates = updates;
     }
   }
@@ -876,11 +876,12 @@ function runUserEffects(queue) {
     const e = queue[i];
     if (!e.user) runTop(e);else queue[userLength++] = e;
   }
+  if (sharedConfig.context) setHydrateContext();
   const resume = queue.length;
   for (i = 0; i < userLength; i++) runTop(queue[i]);
   for (i = resume; i < queue.length; i++) runTop(queue[i]);
 }
-function lookDownstream(node, ignore) {
+function lookUpstream(node, ignore) {
   const runningTransition = Transition && Transition.running;
   if (runningTransition) node.tState = 0;else node.state = 0;
   for (let i = 0; i < node.sources.length; i += 1) {
@@ -888,18 +889,18 @@ function lookDownstream(node, ignore) {
     if (source.sources) {
       if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
         if (source !== ignore) runTop(source);
-      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookDownstream(source, ignore);
+      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
     }
   }
 }
-function markUpstream(node) {
+function markDownstream(node) {
   const runningTransition = Transition && Transition.running;
   for (let i = 0; i < node.observers.length; i += 1) {
     const o = node.observers[i];
     if (!runningTransition && !o.state || runningTransition && !o.tState) {
       if (runningTransition) o.tState = PENDING;else o.state = PENDING;
       if (o.pure) Updates.push(o);else Effects.push(o);
-      o.observers && markUpstream(o);
+      o.observers && markDownstream(o);
     }
   }
 }
@@ -1422,6 +1423,7 @@ function ErrorBoundary(props) {
   return createMemo(() => {
     if ((e = errored()) != null) {
       const f = props.fallback;
+      if ((typeof f !== "function" || f.length == 0)) console.error(e);
       return typeof f === "function" && f.length ? untrack(() => f(e, () => setErrored(null))) : f;
     }
     onError(setErrored);
@@ -1527,7 +1529,7 @@ function Suspense(props) {
       });
       flicker = s;
       p.then(err => {
-        if (error = err) return set();
+        if ((error = err) || sharedConfig.done) return set();
         sharedConfig.gather(key);
         setHydrateContext(ctx);
         set();

package/dist/server.cjs

@@ -508,7 +508,7 @@ function Suspense(props) {
   if (ctx.streaming) {
     setHydrateContext(undefined);
     const res = {
-      t: `<span id="pl${id}">${resolveSSRNode(props.fallback)}</span>`
+      t: `<span id="pl-${id}">${resolveSSRNode(props.fallback)}</span>`
     };
     setHydrateContext(ctx);
     return res;

package/dist/server.js

@@ -504,7 +504,7 @@ function Suspense(props) {
   if (ctx.streaming) {
     setHydrateContext(undefined);
     const res = {
-      t: `<span id="pl${id}">${resolveSSRNode(props.fallback)}</span>`
+      t: `<span id="pl-${id}">${resolveSSRNode(props.fallback)}</span>`
     };
     setHydrateContext(ctx);
     return res;

package/dist/solid.cjs

@@ -385,7 +385,7 @@ function createSelector(source, fn = equalFn, options) {
   const subs = new Map();
   const node = createComputation(p => {
     const v = source();
-    for (const key of subs.keys()) if (fn(key, v) !== (p !== undefined && fn(key, p))) {
+    for (const key of subs.keys()) if (fn(key, v) !== fn(key, p)) {
       const l = subs.get(key);
       for (const c of l.values()) {
         c.state = STALE;
@@ -445,8 +445,8 @@ options) {
   return prevValue => {
     let input;
     if (isArray) {
-      input = [];
-      for (let i = 0; i < deps.length; i++) input.push(deps[i]());
+      input = Array(deps.length);
+      for (let i = 0; i < deps.length; i++) input[i] = deps[i]();
     } else input = deps();
     if (defer) {
       defer = false;
@@ -565,7 +565,7 @@ function readSignal() {
   if (this.sources && (!runningTransition && this.state || runningTransition && this.tState)) {
     const updates = Updates;
     Updates = null;
-    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookDownstream(this);
+    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookUpstream(this);
     Updates = updates;
   }
   if (Listener) {
@@ -615,7 +615,7 @@ function writeSignal(node, value, isComp) {
         if (TransitionRunning && Transition.disposed.has(o)) continue;
         if (TransitionRunning && !o.tState || !TransitionRunning && !o.state) {
           if (o.pure) Updates.push(o);else Effects.push(o);
-          if (o.observers) markUpstream(o);
+          if (o.observers) markDownstream(o);
         }
         if (TransitionRunning) o.tState = STALE;else o.state = STALE;
       }
@@ -707,7 +707,7 @@ function createComputation(fn, init, pure, state = STALE, options) {
 function runTop(node) {
   const runningTransition = Transition && Transition.running;
   if (!runningTransition && node.state === 0 || runningTransition && node.tState === 0) return;
-  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookDownstream(node);
+  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookUpstream(node);
   if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);
   const ancestors = [node];
   while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) {
@@ -728,7 +728,7 @@ function runTop(node) {
     } else if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) {
       const updates = Updates;
       Updates = null;
-      lookDownstream(node, ancestors[0]);
+      lookUpstream(node, ancestors[0]);
       Updates = updates;
     }
   }
@@ -822,11 +822,12 @@ function runUserEffects(queue) {
     const e = queue[i];
     if (!e.user) runTop(e);else queue[userLength++] = e;
   }
+  if (sharedConfig.context) setHydrateContext();
   const resume = queue.length;
   for (i = 0; i < userLength; i++) runTop(queue[i]);
   for (i = resume; i < queue.length; i++) runTop(queue[i]);
 }
-function lookDownstream(node, ignore) {
+function lookUpstream(node, ignore) {
   const runningTransition = Transition && Transition.running;
   if (runningTransition) node.tState = 0;else node.state = 0;
   for (let i = 0; i < node.sources.length; i += 1) {
@@ -834,18 +835,18 @@ function lookDownstream(node, ignore) {
     if (source.sources) {
       if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
         if (source !== ignore) runTop(source);
-      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookDownstream(source, ignore);
+      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
     }
   }
 }
-function markUpstream(node) {
+function markDownstream(node) {
   const runningTransition = Transition && Transition.running;
   for (let i = 0; i < node.observers.length; i += 1) {
     const o = node.observers[i];
     if (!runningTransition && !o.state || runningTransition && !o.tState) {
       if (runningTransition) o.tState = PENDING;else o.state = PENDING;
       if (o.pure) Updates.push(o);else Effects.push(o);
-      o.observers && markUpstream(o);
+      o.observers && markDownstream(o);
     }
   }
 }
@@ -1447,7 +1448,7 @@ function Suspense(props) {
       });
       flicker = s;
       p.then(err => {
-        if (error = err) return set();
+        if ((error = err) || sharedConfig.done) return set();
         sharedConfig.gather(key);
         setHydrateContext(ctx);
         set();

package/dist/solid.js

@@ -381,7 +381,7 @@ function createSelector(source, fn = equalFn, options) {
   const subs = new Map();
   const node = createComputation(p => {
     const v = source();
-    for (const key of subs.keys()) if (fn(key, v) !== (p !== undefined && fn(key, p))) {
+    for (const key of subs.keys()) if (fn(key, v) !== fn(key, p)) {
       const l = subs.get(key);
       for (const c of l.values()) {
         c.state = STALE;
@@ -441,8 +441,8 @@ options) {
   return prevValue => {
     let input;
     if (isArray) {
-      input = [];
-      for (let i = 0; i < deps.length; i++) input.push(deps[i]());
+      input = Array(deps.length);
+      for (let i = 0; i < deps.length; i++) input[i] = deps[i]();
     } else input = deps();
     if (defer) {
       defer = false;
@@ -561,7 +561,7 @@ function readSignal() {
   if (this.sources && (!runningTransition && this.state || runningTransition && this.tState)) {
     const updates = Updates;
     Updates = null;
-    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookDownstream(this);
+    !runningTransition && this.state === STALE || runningTransition && this.tState === STALE ? updateComputation(this) : lookUpstream(this);
     Updates = updates;
   }
   if (Listener) {
@@ -611,7 +611,7 @@ function writeSignal(node, value, isComp) {
         if (TransitionRunning && Transition.disposed.has(o)) continue;
         if (TransitionRunning && !o.tState || !TransitionRunning && !o.state) {
           if (o.pure) Updates.push(o);else Effects.push(o);
-          if (o.observers) markUpstream(o);
+          if (o.observers) markDownstream(o);
         }
         if (TransitionRunning) o.tState = STALE;else o.state = STALE;
       }
@@ -703,7 +703,7 @@ function createComputation(fn, init, pure, state = STALE, options) {
 function runTop(node) {
   const runningTransition = Transition && Transition.running;
   if (!runningTransition && node.state === 0 || runningTransition && node.tState === 0) return;
-  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookDownstream(node);
+  if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) return lookUpstream(node);
   if (node.suspense && untrack(node.suspense.inFallback)) return node.suspense.effects.push(node);
   const ancestors = [node];
   while ((node = node.owner) && (!node.updatedAt || node.updatedAt < ExecCount)) {
@@ -724,7 +724,7 @@ function runTop(node) {
     } else if (!runningTransition && node.state === PENDING || runningTransition && node.tState === PENDING) {
       const updates = Updates;
       Updates = null;
-      lookDownstream(node, ancestors[0]);
+      lookUpstream(node, ancestors[0]);
       Updates = updates;
     }
   }
@@ -818,11 +818,12 @@ function runUserEffects(queue) {
     const e = queue[i];
     if (!e.user) runTop(e);else queue[userLength++] = e;
   }
+  if (sharedConfig.context) setHydrateContext();
   const resume = queue.length;
   for (i = 0; i < userLength; i++) runTop(queue[i]);
   for (i = resume; i < queue.length; i++) runTop(queue[i]);
 }
-function lookDownstream(node, ignore) {
+function lookUpstream(node, ignore) {
   const runningTransition = Transition && Transition.running;
   if (runningTransition) node.tState = 0;else node.state = 0;
   for (let i = 0; i < node.sources.length; i += 1) {
@@ -830,18 +831,18 @@ function lookDownstream(node, ignore) {
     if (source.sources) {
       if (!runningTransition && source.state === STALE || runningTransition && source.tState === STALE) {
         if (source !== ignore) runTop(source);
-      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookDownstream(source, ignore);
+      } else if (!runningTransition && source.state === PENDING || runningTransition && source.tState === PENDING) lookUpstream(source, ignore);
     }
   }
 }
-function markUpstream(node) {
+function markDownstream(node) {
   const runningTransition = Transition && Transition.running;
   for (let i = 0; i < node.observers.length; i += 1) {
     const o = node.observers[i];
     if (!runningTransition && !o.state || runningTransition && !o.tState) {
       if (runningTransition) o.tState = PENDING;else o.state = PENDING;
       if (o.pure) Updates.push(o);else Effects.push(o);
-      o.observers && markUpstream(o);
+      o.observers && markDownstream(o);
     }
   }
 }
@@ -1443,7 +1444,7 @@ function Suspense(props) {
       });
       flicker = s;
       p.then(err => {
-        if (error = err) return set();
+        if ((error = err) || sharedConfig.done) return set();
         sharedConfig.gather(key);
         setHydrateContext(ctx);
         set();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.3.13",
+  "version": "1.3.16",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -144,5 +144,5 @@
     "compiler",
     "performance"
   ],
-  "gitHead": "dfacd34d443f9cdf1958445756e7317bd8e3632c"
+  "gitHead": "616d2f521e70f3c4f6c0ef6944d1763a0cf6a73b"
 }

package/store/types/store.d.ts

@@ -18,10 +18,10 @@ export declare function createDataNode(): Accessor<void> & {
 export declare function setProperty(state: StoreNode, property: PropertyKey, value: any): void;
 export declare function updatePath(current: StoreNode, path: any[], traversed?: PropertyKey[]): void;
 export declare type DeepReadonly<T> = 0 extends 1 & T ? T : T extends NotWrappable ? T : {
-    readonly [K in keyof T]: T[K];
+    readonly [K in keyof T]: DeepReadonly<T[K]>;
 };
 export declare type DeepMutable<T> = 0 extends 1 & T ? T : T extends NotWrappable ? T : {
-    -readonly [K in keyof T]: T[K];
+    -readonly [K in keyof T]: DeepMutable<T[K]>;
 };
 export declare type StorePathRange = {
     from?: number;

package/types/jsx.d.ts

@@ -21,9 +21,12 @@ export namespace JSX {
     (): Element;
   }
   interface ElementClass {
-    render(props: any): Element;
+    // empty, libs can define requirements downstream
   }
   type LibraryManagedAttributes<Component, Props> = Props;
+  interface ElementAttributesProperty {
+    // empty, libs can define requirements downstream
+  }
   interface ElementChildrenAttribute {
     children: {};
   }
@@ -1997,6 +2000,7 @@ export namespace JSX {
       | "treegrid"
       | "treeitem";
     autocapitalize?: HTMLAutocapitalize;
+    slot?: string;
     color?: string;
     itemprop?: string;
     itemscope?: boolean;
@@ -3112,7 +3116,7 @@ export namespace JSX {
       ZoomAndPanSVGAttributes,
       PresentationSVGAttributes {
     version?: string;
-    "base-profile"?: string;
+    baseProfile?: string;
     x?: number | string;
     y?: number | string;
     width?: number | string;

package/types/reactive/signal.d.ts

@@ -201,7 +201,7 @@ export interface Resource<T> extends Accessor<T> {
 }
 export declare type ResourceActions<T> = {
     mutate: Setter<T>;
-    refetch: (info?: unknown) => void;
+    refetch: (info?: unknown) => T | Promise<T> | undefined | null;
 };
 export declare type ResourceReturn<T> = [Resource<T>, ResourceActions<T>];
 export declare type ResourceSource<S> = S | false | null | undefined | (() => S | false | null | undefined);

package/types/render/hydration.d.ts

@@ -10,6 +10,7 @@ declare type SharedConfig = {
     load?: (id: string) => Promise<any> | undefined;
     gather?: (key: string) => void;
     registry?: Map<string, Element>;
+    done?: boolean;
 };
 export declare const sharedConfig: SharedConfig;
 export declare function setHydrateContext(context?: HydrationContext): void;

package/universal/dist/dev.cjs

@@ -194,18 +194,18 @@ function createRenderer$1({
     removeNode(parent, oldNode);
   }
   function spreadExpression(node, props, prevProps = {}, skipChildren) {
+    props || (props = {});
     if (!skipChildren && "children" in props) {
       solidJs.createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
     }
+    props.ref && props.ref(node);
     solidJs.createRenderEffect(() => {
       for (const prop in props) {
-        if (prop === "children") continue;
+        if (prop === "children" || prop === "ref") continue;
         const value = props[prop];
         if (value === prevProps[prop]) continue;
-        if (prop === "ref") value(node);else {
-          setProperty(node, prop, value, prevProps[prop]);
-          prevProps[prop] = value;
-        }
+        setProperty(node, prop, value, prevProps[prop]);
+        prevProps[prop] = value;
       }
     });
     return prevProps;

package/universal/dist/dev.js

@@ -190,18 +190,18 @@ function createRenderer$1({
     removeNode(parent, oldNode);
   }
   function spreadExpression(node, props, prevProps = {}, skipChildren) {
+    props || (props = {});
     if (!skipChildren && "children" in props) {
       createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
     }
+    props.ref && props.ref(node);
     createRenderEffect(() => {
       for (const prop in props) {
-        if (prop === "children") continue;
+        if (prop === "children" || prop === "ref") continue;
         const value = props[prop];
         if (value === prevProps[prop]) continue;
-        if (prop === "ref") value(node);else {
-          setProperty(node, prop, value, prevProps[prop]);
-          prevProps[prop] = value;
-        }
+        setProperty(node, prop, value, prevProps[prop]);
+        prevProps[prop] = value;
       }
     });
     return prevProps;

package/universal/dist/universal.cjs

@@ -194,18 +194,18 @@ function createRenderer$1({
     removeNode(parent, oldNode);
   }
   function spreadExpression(node, props, prevProps = {}, skipChildren) {
+    props || (props = {});
     if (!skipChildren && "children" in props) {
       solidJs.createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
     }
+    props.ref && props.ref(node);
     solidJs.createRenderEffect(() => {
       for (const prop in props) {
-        if (prop === "children") continue;
+        if (prop === "children" || prop === "ref") continue;
         const value = props[prop];
         if (value === prevProps[prop]) continue;
-        if (prop === "ref") value(node);else {
-          setProperty(node, prop, value, prevProps[prop]);
-          prevProps[prop] = value;
-        }
+        setProperty(node, prop, value, prevProps[prop]);
+        prevProps[prop] = value;
       }
     });
     return prevProps;

package/universal/dist/universal.js

@@ -190,18 +190,18 @@ function createRenderer$1({
     removeNode(parent, oldNode);
   }
   function spreadExpression(node, props, prevProps = {}, skipChildren) {
+    props || (props = {});
     if (!skipChildren && "children" in props) {
       createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
     }
+    props.ref && props.ref(node);
     createRenderEffect(() => {
       for (const prop in props) {
-        if (prop === "children") continue;
+        if (prop === "children" || prop === "ref") continue;
         const value = props[prop];
         if (value === prevProps[prop]) continue;
-        if (prop === "ref") value(node);else {
-          setProperty(node, prop, value, prevProps[prop]);
-          prevProps[prop] = value;
-        }
+        setProperty(node, prop, value, prevProps[prop]);
+        prevProps[prop] = value;
       }
     });
     return prevProps;

package/web/dist/dev.cjs

@@ -29,6 +29,7 @@ const SVGNamespace = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
+const DOMElements = new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input"]);
 
 function memo(fn, equals) {
   return solidJs.createMemo(fn, undefined, !equals ? {
@@ -166,8 +167,10 @@ function classList(node, value, prev = {}) {
 }
 function style(node, value, prev = {}) {
   const nodeStyle = node.style;
-  if (value == null || typeof value === "string") return nodeStyle.cssText = value;
-  typeof prev === "string" && (prev = {});
+  const prevString = typeof prev === "string";
+  if (value == null && prevString || typeof value === "string") return nodeStyle.cssText = value;
+  prevString && (nodeStyle.cssText = undefined, prev = {});
+  value || (value = {});
   let v, s;
   for (s in prev) {
     value[s] == null && nodeStyle.removeProperty(s);
@@ -205,11 +208,12 @@ function insert(parent, accessor, marker, initial) {
   if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   solidJs.createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
 }
-function assign(node, props, isSVG, skipChildren, prevProps = {}) {
+function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+  props || (props = {});
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      assignProp(node, prop, null, prevProps[prop], isSVG);
+      assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
     }
   }
   for (const prop in props) {
@@ -218,7 +222,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}) {
       continue;
     }
     const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG);
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
   }
 }
 function hydrate$1(code, element, options = {}) {
@@ -293,13 +297,15 @@ function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
   for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
 }
-function assignProp(node, prop, value, prev, isSVG) {
+function assignProp(node, prop, value, prev, isSVG, skipRef) {
   let isCE, isProp, isChildProp;
   if (prop === "style") return style(node, value, prev);
   if (prop === "classList") return classList(node, value, prev);
   if (value === prev) return prev;
   if (prop === "ref") {
-    value(node);
+    if (!skipRef) {
+      value(node);
+    }
   } else if (prop.slice(0, 3) === "on:") {
     node.addEventListener(prop.slice(3), value);
   } else if (prop.slice(0, 10) === "oncapture:") {
@@ -332,6 +338,10 @@ function eventHandler(e) {
       return node || document;
     }
   });
+  if (solidJs.sharedConfig.registry && !solidJs.sharedConfig.done) {
+    solidJs.sharedConfig.done = true;
+    document.querySelectorAll("[id^=pl-]").forEach(elem => elem.remove());
+  }
   while (node !== null) {
     const handler = node[key];
     if (handler && !node.disabled) {
@@ -343,10 +353,12 @@ function eventHandler(e) {
   }
 }
 function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
+  props || (props = {});
   if (!skipChildren && "children" in props) {
     solidJs.createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
   }
-  solidJs.createRenderEffect(() => assign(node, props, isSVG, true, prevProps));
+  props.ref && props.ref(node);
+  solidJs.createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }
 function insertExpression(parent, value, current, marker, unwrapArray) {
@@ -461,7 +473,7 @@ function gatherHydratable(element, root) {
   for (let i = 0; i < templates.length; i++) {
     const node = templates[i];
     const key = node.getAttribute("data-hk");
-    if (!root || key.startsWith(root)) solidJs.sharedConfig.registry.set(key, node);
+    if ((!root || key.startsWith(root)) && !solidJs.sharedConfig.registry.has(key)) solidJs.sharedConfig.registry.set(key, node);
   }
 }
 function getHydrationKey() {
@@ -614,6 +626,7 @@ Object.defineProperty(exports, 'mergeProps', {
 exports.Aliases = Aliases;
 exports.Assets = Assets;
 exports.ChildProperties = ChildProperties;
+exports.DOMElements = DOMElements;
 exports.DelegatedEvents = DelegatedEvents;
 exports.Dynamic = Dynamic;
 exports.HydrationScript = Assets;

package/web/dist/dev.js

@@ -26,6 +26,7 @@ const SVGNamespace = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
+const DOMElements = new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input"]);
 
 function memo(fn, equals) {
   return createMemo(fn, undefined, !equals ? {
@@ -163,8 +164,10 @@ function classList(node, value, prev = {}) {
 }
 function style(node, value, prev = {}) {
   const nodeStyle = node.style;
-  if (value == null || typeof value === "string") return nodeStyle.cssText = value;
-  typeof prev === "string" && (prev = {});
+  const prevString = typeof prev === "string";
+  if (value == null && prevString || typeof value === "string") return nodeStyle.cssText = value;
+  prevString && (nodeStyle.cssText = undefined, prev = {});
+  value || (value = {});
   let v, s;
   for (s in prev) {
     value[s] == null && nodeStyle.removeProperty(s);
@@ -202,11 +205,12 @@ function insert(parent, accessor, marker, initial) {
   if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
 }
-function assign(node, props, isSVG, skipChildren, prevProps = {}) {
+function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+  props || (props = {});
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      assignProp(node, prop, null, prevProps[prop], isSVG);
+      assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
     }
   }
   for (const prop in props) {
@@ -215,7 +219,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}) {
       continue;
     }
     const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG);
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
   }
 }
 function hydrate$1(code, element, options = {}) {
@@ -290,13 +294,15 @@ function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
   for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
 }
-function assignProp(node, prop, value, prev, isSVG) {
+function assignProp(node, prop, value, prev, isSVG, skipRef) {
   let isCE, isProp, isChildProp;
   if (prop === "style") return style(node, value, prev);
   if (prop === "classList") return classList(node, value, prev);
   if (value === prev) return prev;
   if (prop === "ref") {
-    value(node);
+    if (!skipRef) {
+      value(node);
+    }
   } else if (prop.slice(0, 3) === "on:") {
     node.addEventListener(prop.slice(3), value);
   } else if (prop.slice(0, 10) === "oncapture:") {
@@ -329,6 +335,10 @@ function eventHandler(e) {
       return node || document;
     }
   });
+  if (sharedConfig.registry && !sharedConfig.done) {
+    sharedConfig.done = true;
+    document.querySelectorAll("[id^=pl-]").forEach(elem => elem.remove());
+  }
   while (node !== null) {
     const handler = node[key];
     if (handler && !node.disabled) {
@@ -340,10 +350,12 @@ function eventHandler(e) {
   }
 }
 function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
+  props || (props = {});
   if (!skipChildren && "children" in props) {
     createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
   }
-  createRenderEffect(() => assign(node, props, isSVG, true, prevProps));
+  props.ref && props.ref(node);
+  createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }
 function insertExpression(parent, value, current, marker, unwrapArray) {
@@ -458,7 +470,7 @@ function gatherHydratable(element, root) {
   for (let i = 0; i < templates.length; i++) {
     const node = templates[i];
     const key = node.getAttribute("data-hk");
-    if (!root || key.startsWith(root)) sharedConfig.registry.set(key, node);
+    if ((!root || key.startsWith(root)) && !sharedConfig.registry.has(key)) sharedConfig.registry.set(key, node);
   }
 }
 function getHydrationKey() {
@@ -560,4 +572,4 @@ function Dynamic(props) {
   });
 }
 
-export { Aliases, Assets, ChildProperties, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, generateHydrationScript, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle, style, template };
+export { Aliases, Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, generateHydrationScript, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle, style, template };

package/web/dist/server.cjs

@@ -232,7 +232,7 @@ function stringifyString(str) {
   return result;
 }
 
-const REPLACE_SCRIPT = `function $df(e,y,t,g){t=document.getElementById(e),g=document.getElementById("pl"+e),g&&g.replaceWith(...t.childNodes),_$HY.set(e,y||null)}`;
+const REPLACE_SCRIPT = `function $df(e,t,d,l){d=document.getElementById(e),(l=document.getElementById("pl-"+e))&&l.replaceWith(...d.childNodes),d.remove(),_$HY.set(e,t||null)}`;
 const FRAGMENT_REPLACE = /<!\[([\d-]+)\]>/;
 function renderToString(code, options = {}) {
   let scripts = "";
@@ -499,6 +499,7 @@ function ssrSpread(props, isSVG, skipChildren) {
   if (typeof props === "function") props = props();
   const keys = Object.keys(props);
   let result = "";
+  let classResolved;
   for (let i = 0; i < keys.length; i++) {
     const prop = keys[i];
     if (prop === "children") {
@@ -508,8 +509,11 @@ function ssrSpread(props, isSVG, skipChildren) {
     const value = props[prop];
     if (prop === "style") {
       result += `style="${ssrStyle(value)}"`;
-    } else if (prop === "classList") {
-      result += `class="${ssrClassList(value)}"`;
+    } else if (prop === "class" || prop === "className" || prop === "classList") {
+      if (classResolved) continue;
+      let n;
+      result += `class="${(n = props.class) ? n + " " : ""}${(n = props.className) ? n + " " : ""}${ssrClassList(props.classList)}"`;
+      classResolved = true;
     } else if (BooleanAttributes.has(prop)) {
       if (value) result += prop;else continue;
     } else if (prop === "ref" || prop.slice(0, 2) === "on") {
@@ -675,7 +679,7 @@ function Dynamic(props) {
   if (comp) {
     if (t === "function") return comp(others);else if (t === "string") {
       const [local, sOthers] = solidJs.splitProps(others, ["children"]);
-      return ssr([`<${comp}`, ' ', ">", `</${comp}>`], ssrHydrationKey(), ssrSpread(sOthers), local.children || "");
+      return ssr([`<${comp}`, ' ', ">", `</${comp}>`], ssrHydrationKey(), ssrSpread(sOthers), escape(local.children || ""));
     }
   }
 }

package/web/dist/server.js

@@ -229,7 +229,7 @@ function stringifyString(str) {
   return result;
 }
 
-const REPLACE_SCRIPT = `function $df(e,y,t,g){t=document.getElementById(e),g=document.getElementById("pl"+e),g&&g.replaceWith(...t.childNodes),_$HY.set(e,y||null)}`;
+const REPLACE_SCRIPT = `function $df(e,t,d,l){d=document.getElementById(e),(l=document.getElementById("pl-"+e))&&l.replaceWith(...d.childNodes),d.remove(),_$HY.set(e,t||null)}`;
 const FRAGMENT_REPLACE = /<!\[([\d-]+)\]>/;
 function renderToString(code, options = {}) {
   let scripts = "";
@@ -496,6 +496,7 @@ function ssrSpread(props, isSVG, skipChildren) {
   if (typeof props === "function") props = props();
   const keys = Object.keys(props);
   let result = "";
+  let classResolved;
   for (let i = 0; i < keys.length; i++) {
     const prop = keys[i];
     if (prop === "children") {
@@ -505,8 +506,11 @@ function ssrSpread(props, isSVG, skipChildren) {
     const value = props[prop];
     if (prop === "style") {
       result += `style="${ssrStyle(value)}"`;
-    } else if (prop === "classList") {
-      result += `class="${ssrClassList(value)}"`;
+    } else if (prop === "class" || prop === "className" || prop === "classList") {
+      if (classResolved) continue;
+      let n;
+      result += `class="${(n = props.class) ? n + " " : ""}${(n = props.className) ? n + " " : ""}${ssrClassList(props.classList)}"`;
+      classResolved = true;
     } else if (BooleanAttributes.has(prop)) {
       if (value) result += prop;else continue;
     } else if (prop === "ref" || prop.slice(0, 2) === "on") {
@@ -672,7 +676,7 @@ function Dynamic(props) {
   if (comp) {
     if (t === "function") return comp(others);else if (t === "string") {
       const [local, sOthers] = splitProps(others, ["children"]);
-      return ssr([`<${comp}`, ' ', ">", `</${comp}>`], ssrHydrationKey(), ssrSpread(sOthers), local.children || "");
+      return ssr([`<${comp}`, ' ', ">", `</${comp}>`], ssrHydrationKey(), ssrSpread(sOthers), escape(local.children || ""));
     }
   }
 }

package/web/dist/web.cjs

@@ -29,6 +29,7 @@ const SVGNamespace = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
+const DOMElements = new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input"]);
 
 function memo(fn, equals) {
   return solidJs.createMemo(fn, undefined, !equals ? {
@@ -165,8 +166,10 @@ function classList(node, value, prev = {}) {
 }
 function style(node, value, prev = {}) {
   const nodeStyle = node.style;
-  if (value == null || typeof value === "string") return nodeStyle.cssText = value;
-  typeof prev === "string" && (prev = {});
+  const prevString = typeof prev === "string";
+  if (value == null && prevString || typeof value === "string") return nodeStyle.cssText = value;
+  prevString && (nodeStyle.cssText = undefined, prev = {});
+  value || (value = {});
   let v, s;
   for (s in prev) {
     value[s] == null && nodeStyle.removeProperty(s);
@@ -204,11 +207,12 @@ function insert(parent, accessor, marker, initial) {
   if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   solidJs.createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
 }
-function assign(node, props, isSVG, skipChildren, prevProps = {}) {
+function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+  props || (props = {});
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      assignProp(node, prop, null, prevProps[prop], isSVG);
+      assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
     }
   }
   for (const prop in props) {
@@ -217,7 +221,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}) {
       continue;
     }
     const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG);
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
   }
 }
 function hydrate$1(code, element, options = {}) {
@@ -292,13 +296,15 @@ function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
   for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
 }
-function assignProp(node, prop, value, prev, isSVG) {
+function assignProp(node, prop, value, prev, isSVG, skipRef) {
   let isCE, isProp, isChildProp;
   if (prop === "style") return style(node, value, prev);
   if (prop === "classList") return classList(node, value, prev);
   if (value === prev) return prev;
   if (prop === "ref") {
-    value(node);
+    if (!skipRef) {
+      value(node);
+    }
   } else if (prop.slice(0, 3) === "on:") {
     node.addEventListener(prop.slice(3), value);
   } else if (prop.slice(0, 10) === "oncapture:") {
@@ -331,6 +337,10 @@ function eventHandler(e) {
       return node || document;
     }
   });
+  if (solidJs.sharedConfig.registry && !solidJs.sharedConfig.done) {
+    solidJs.sharedConfig.done = true;
+    document.querySelectorAll("[id^=pl-]").forEach(elem => elem.remove());
+  }
   while (node !== null) {
     const handler = node[key];
     if (handler && !node.disabled) {
@@ -342,10 +352,12 @@ function eventHandler(e) {
   }
 }
 function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
+  props || (props = {});
   if (!skipChildren && "children" in props) {
     solidJs.createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
   }
-  solidJs.createRenderEffect(() => assign(node, props, isSVG, true, prevProps));
+  props.ref && props.ref(node);
+  solidJs.createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }
 function insertExpression(parent, value, current, marker, unwrapArray) {
@@ -460,7 +472,7 @@ function gatherHydratable(element, root) {
   for (let i = 0; i < templates.length; i++) {
     const node = templates[i];
     const key = node.getAttribute("data-hk");
-    if (!root || key.startsWith(root)) solidJs.sharedConfig.registry.set(key, node);
+    if ((!root || key.startsWith(root)) && !solidJs.sharedConfig.registry.has(key)) solidJs.sharedConfig.registry.set(key, node);
   }
 }
 function getHydrationKey() {
@@ -610,6 +622,7 @@ Object.defineProperty(exports, 'mergeProps', {
 exports.Aliases = Aliases;
 exports.Assets = Assets;
 exports.ChildProperties = ChildProperties;
+exports.DOMElements = DOMElements;
 exports.DelegatedEvents = DelegatedEvents;
 exports.Dynamic = Dynamic;
 exports.HydrationScript = Assets;

package/web/dist/web.js

@@ -26,6 +26,7 @@ const SVGNamespace = {
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
+const DOMElements = new Set(["html", "base", "head", "link", "meta", "style", "title", "body", "address", "article", "aside", "footer", "header", "main", "nav", "section", "body", "blockquote", "dd", "div", "dl", "dt", "figcaption", "figure", "hr", "li", "ol", "p", "pre", "ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn", "em", "i", "kbd", "mark", "q", "rp", "rt", "ruby", "s", "samp", "small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "area", "audio", "img", "map", "track", "video", "embed", "iframe", "object", "param", "picture", "portal", "source", "svg", "math", "canvas", "noscript", "script", "del", "ins", "caption", "col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "button", "datalist", "fieldset", "form", "input", "label", "legend", "meter", "optgroup", "option", "output", "progress", "select", "textarea", "details", "dialog", "menu", "summary", "details", "slot", "template", "acronym", "applet", "basefont", "bgsound", "big", "blink", "center", "content", "dir", "font", "frame", "frameset", "hgroup", "image", "keygen", "marquee", "menuitem", "nobr", "noembed", "noframes", "plaintext", "rb", "rtc", "shadow", "spacer", "strike", "tt", "xmp", "a", "abbr", "acronym", "address", "applet", "area", "article", "aside", "audio", "b", "base", "basefont", "bdi", "bdo", "bgsound", "big", "blink", "blockquote", "body", "br", "button", "canvas", "caption", "center", "cite", "code", "col", "colgroup", "content", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "dir", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "font", "footer", "form", "frame", "frameset", "head", "header", "hgroup", "hr", "html", "i", "iframe", "image", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "marquee", "menu", "menuitem", "meta", "meter", "nav", "nobr", "noembed", "noframes", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "plaintext", "portal", "pre", "progress", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp", "script", "section", "select", "shadow", "slot", "small", "source", "spacer", "span", "strike", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "tt", "u", "ul", "var", "video", "wbr", "xmp", "input"]);
 
 function memo(fn, equals) {
   return createMemo(fn, undefined, !equals ? {
@@ -162,8 +163,10 @@ function classList(node, value, prev = {}) {
 }
 function style(node, value, prev = {}) {
   const nodeStyle = node.style;
-  if (value == null || typeof value === "string") return nodeStyle.cssText = value;
-  typeof prev === "string" && (prev = {});
+  const prevString = typeof prev === "string";
+  if (value == null && prevString || typeof value === "string") return nodeStyle.cssText = value;
+  prevString && (nodeStyle.cssText = undefined, prev = {});
+  value || (value = {});
   let v, s;
   for (s in prev) {
     value[s] == null && nodeStyle.removeProperty(s);
@@ -201,11 +204,12 @@ function insert(parent, accessor, marker, initial) {
   if (typeof accessor !== "function") return insertExpression(parent, accessor, initial, marker);
   createRenderEffect(current => insertExpression(parent, accessor(), current, marker), initial);
 }
-function assign(node, props, isSVG, skipChildren, prevProps = {}) {
+function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+  props || (props = {});
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      assignProp(node, prop, null, prevProps[prop], isSVG);
+      assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
     }
   }
   for (const prop in props) {
@@ -214,7 +218,7 @@ function assign(node, props, isSVG, skipChildren, prevProps = {}) {
       continue;
     }
     const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG);
+    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
   }
 }
 function hydrate$1(code, element, options = {}) {
@@ -289,13 +293,15 @@ function toggleClassKey(node, key, value) {
   const classNames = key.trim().split(/\s+/);
   for (let i = 0, nameLen = classNames.length; i < nameLen; i++) node.classList.toggle(classNames[i], value);
 }
-function assignProp(node, prop, value, prev, isSVG) {
+function assignProp(node, prop, value, prev, isSVG, skipRef) {
   let isCE, isProp, isChildProp;
   if (prop === "style") return style(node, value, prev);
   if (prop === "classList") return classList(node, value, prev);
   if (value === prev) return prev;
   if (prop === "ref") {
-    value(node);
+    if (!skipRef) {
+      value(node);
+    }
   } else if (prop.slice(0, 3) === "on:") {
     node.addEventListener(prop.slice(3), value);
   } else if (prop.slice(0, 10) === "oncapture:") {
@@ -328,6 +334,10 @@ function eventHandler(e) {
       return node || document;
     }
   });
+  if (sharedConfig.registry && !sharedConfig.done) {
+    sharedConfig.done = true;
+    document.querySelectorAll("[id^=pl-]").forEach(elem => elem.remove());
+  }
   while (node !== null) {
     const handler = node[key];
     if (handler && !node.disabled) {
@@ -339,10 +349,12 @@ function eventHandler(e) {
   }
 }
 function spreadExpression(node, props, prevProps = {}, isSVG, skipChildren) {
+  props || (props = {});
   if (!skipChildren && "children" in props) {
     createRenderEffect(() => prevProps.children = insertExpression(node, props.children, prevProps.children));
   }
-  createRenderEffect(() => assign(node, props, isSVG, true, prevProps));
+  props.ref && props.ref(node);
+  createRenderEffect(() => assign(node, props, isSVG, true, prevProps, true));
   return prevProps;
 }
 function insertExpression(parent, value, current, marker, unwrapArray) {
@@ -457,7 +469,7 @@ function gatherHydratable(element, root) {
   for (let i = 0; i < templates.length; i++) {
     const node = templates[i];
     const key = node.getAttribute("data-hk");
-    if (!root || key.startsWith(root)) sharedConfig.registry.set(key, node);
+    if ((!root || key.startsWith(root)) && !sharedConfig.registry.has(key)) sharedConfig.registry.set(key, node);
   }
 }
 function getHydrationKey() {
@@ -556,4 +568,4 @@ function Dynamic(props) {
   });
 }
 
-export { Aliases, Assets, ChildProperties, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, generateHydrationScript, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle, style, template };
+export { Aliases, Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, clearDelegatedEvents, delegateEvents, dynamicProperty, escape, generateHydrationScript, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, innerHTML, insert, isServer, memo, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, spread, ssr, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle, style, template };

package/web/types/client.d.ts

@@ -4,6 +4,7 @@ export const PropAliases: Record<string, string>;
 export const Properties: Set<string>;
 export const ChildProperties: Set<string>;
 export const DelegatedEvents: Set<string>;
+export const DOMElements: Set<string>;
 export const SVGElements: Set<string>;
 export const SVGNamespace: Record<string, string>;