@solidjs/web 2.0.0-beta.4 → 2.0.0-beta.6

package/dist/web.js

@@ -1,9 +1,40 @@
 import { createRenderEffect, createMemo as createMemo$1, sharedConfig, untrack, runWithOwner, flatten, createRoot, omit, enableHydration } from 'solid-js';
-export { Errored, For, Hydration, Loading, Match, NoHydration, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
+export { Errored, For, Hydration, Loading, Match, NoHydration, Reveal, Show, Switch, createComponent, getOwner, merge as mergeProps, untrack } from 'solid-js';
 import { createMemo } from '@solidjs/signals';
 
-const Properties = /*#__PURE__*/new Set([
-"value", "checked", "selected", "muted"]);
+const DOMWithState = {
+  INPUT: {
+    value: 1,
+    defaultValue: 1,
+    checked: 1,
+    defaultChecked: 1
+  },
+  SELECT: {
+    value: 1
+  },
+  OPTION: {
+    value: 1,
+    selected: 1,
+    defaultSelected: 1
+  },
+  TEXTAREA: {
+    value: 1,
+    defaultValue: 1
+  },
+  VIDEO: {
+    muted: 1,
+    defaultMuted: 1
+  },
+  AUDIO: {
+    muted: 1,
+    defaultMuted: 1
+  }
+};
+for (const tagName in DOMWithState) {
+  for (const propName in DOMWithState[tagName]) {
+    DOMWithState[tagName]["prop:" + propName] = 1;
+  }
+}
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
 const DelegatedEvents = /*#__PURE__*/new Set(["beforeinput", "click", "dblclick", "contextmenu", "focusin", "focusout", "input", "keydown", "keyup", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "pointerdown", "pointermove", "pointerout", "pointerover", "pointerup", "touchend", "touchmove", "touchstart"]);
 const SVGElements = /*#__PURE__*/new Set([
@@ -11,7 +42,10 @@ const SVGElements = /*#__PURE__*/new Set([
 "set", "stop",
 "svg", "switch", "symbol", "text", "textPath",
 "tref", "tspan", "use", "view", "vkern"]);
-const SVGNamespace = {
+const MathMLElements = /*#__PURE__*/new Set(["annotation", "annotation-xml", "maction", "math", "menclose", "merror", "mfenced", "mfrac", "mi", "mmultiscripts", "mn", "mo", "mover", "mpadded", "mphantom", "mprescripts", "mroot", "mrow", "ms", "mspace", "msqrt", "mstyle", "msub", "msubsup", "msup", "mtable", "mtd", "mtext", "mtr", "munder", "munderover", "semantics"]);
+const Namespaces = {
+  svg: "http://www.w3.org/2000/svg",
+  mathml: "http://www.w3.org/1998/Math/MathML",
   xlink: "http://www.w3.org/1999/xlink",
   xml: "http://www.w3.org/XML/1998/namespace"
 };
@@ -97,14 +131,14 @@ function render$1(code, element, init, options = {}) {
     element.textContent = "";
   };
 }
-function template(html, isImportNode, isSVG, isMathML) {
+function create(html, bypassGuard, flag) {
+  const t = document.createElement("template");
+  t.innerHTML = html;
+  return flag === 2 ? t.content.firstChild.firstChild : t.content.firstChild;
+}
+function template(html, flag) {
   let node;
-  const create = bypassGuard => {
-    const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
-    t.innerHTML = html;
-    return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
-  };
-  const fn = isImportNode ? bypassGuard => untrack(() => document.importNode(node || (node = create()), true)) : bypassGuard => (node || (node = create())).cloneNode(true);
+  const fn = flag === 1 ? bypassGuard => document.importNode(node || (node = create(html, bypassGuard, flag)), true) : bypassGuard => (node || (node = create(html, bypassGuard, flag))).cloneNode(true);
   return fn;
 }
 function delegateEvents(eventNames, document = window.document) {
@@ -133,16 +167,16 @@ function setAttribute(node, name, value) {
 }
 function setAttributeNS(node, namespace, name, value) {
   if (isHydrating(node)) return;
-  if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
+  if (value == null || value === false) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value === true ? "" : value);
 }
-function className(node, value, isSVG, prev) {
+function className(node, value, prev) {
   if (isHydrating(node)) return;
   if (value == null || value === false) {
     prev && node.removeAttribute("class");
     return;
   }
   if (typeof value === "string") {
-    value !== prev && (isSVG ? node.setAttribute("class", value) : node.className = value);
+    value !== prev && node.setAttribute("class", value);
     return;
   }
   if (typeof prev === "string") {
@@ -197,7 +231,7 @@ function style(node, value, prev) {
 function setStyleProperty(node, name, value) {
   value != null ? node.style.setProperty(name, value) : node.style.removeProperty(name);
 }
-function spread(node, props = {}, isSVG, skipChildren) {
+function spread(node, props = {}, skipChildren) {
   const prevProps = {};
   if (!skipChildren) insert(node, () => props.children);
   effect(() => {
@@ -211,7 +245,7 @@ function spread(node, props = {}, isSVG, skipChildren) {
       newProps[prop] = props[prop];
     }
     return newProps;
-  }, props => assign(node, props, isSVG, true, prevProps, true));
+  }, props => assign(node, props, true, prevProps, true));
   return prevProps;
 }
 function dynamicProperty(props, key) {
@@ -256,21 +290,21 @@ function insert(parent, accessor, marker, initial) {
   }
   effect(prev => normalize(accessor, prev, multi), (value, current) => insertExpression(parent, value, current, marker), initial);
 }
-function assign(node, props, isSVG, skipChildren, prevProps = {}, skipRef = false) {
+function assign(node, props, skipChildren, prevProps = {}, skipRef = false) {
+  const nodeName = node.nodeName;
   props || (props = {});
   for (const prop in prevProps) {
     if (!(prop in props)) {
       if (prop === "children") continue;
-      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef);
+      prevProps[prop] = assignProp(node, prop, null, prevProps[prop], skipRef, nodeName);
     }
   }
   for (const prop in props) {
     if (prop === "children") {
-      if (!skipChildren) insertExpression(node, props.children);
+      if (!skipChildren) insertExpression(node, normalize(props.children, undefined, false));
       continue;
     }
-    const value = props[prop];
-    prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef);
+    prevProps[prop] = assignProp(node, prop, props[prop], prevProps[prop], skipRef, nodeName);
   }
 }
 function hydrate$1(code, element, options = {}) {
@@ -397,18 +431,20 @@ function flattenClassList(list, result) {
     if (Array.isArray(item)) flattenClassList(item, result);else if (typeof item === "object" && item != null) Object.assign(result, item);else if (item || item === 0) result[item] = true;
   }
 }
-function assignProp(node, prop, value, prev, isSVG, skipRef) {
-  let forceProp;
+function assignProp(node, prop, value, prev, skipRef, nodeName) {
   if (prop === "style") return style(node, value, prev), value;
-  if (prop === "class") return className(node, value, isSVG, prev), value;
-  if (value === prev) return prev;
+  if (prop === "class") return className(node, value, prev), value;
+  if (value === prev && !DOMWithState[nodeName]?.[prop]) return prev;
   if (prop === "ref") {
     if (!skipRef && value) ref(() => value, node);
-  } else if (prop.slice(0, 3) === "on:") {
+    return value;
+  }
+  const hasNamespace = prop.indexOf(":") > -1;
+  if (hasNamespace && prop.slice(0, 3) === "on:") {
     const e = prop.slice(3);
     prev && node.removeEventListener(e, prev, typeof prev !== "function" && prev);
     value && node.addEventListener(e, value, typeof value !== "function" && value);
-  } else if (prop.slice(0, 2) === "on") {
+  } else if (!hasNamespace && prop.slice(0, 2) === "on") {
     const name = prop.slice(2).toLowerCase();
     const delegate = DelegatedEvents.has(name);
     if (!delegate && prev) {
@@ -419,11 +455,11 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
       addEventListener(node, name, value, delegate);
       delegate && delegateEvents([name]);
     }
-  } else if ((forceProp = prop.slice(0, 5) === "prop:") || ChildProperties.has(prop) || !isSVG && Properties.has(prop)) {
-    if (forceProp) prop = prop.slice(5);else if (isHydrating(node)) return value;
-    if (prop === "value" && node.nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
+  } else if (hasNamespace && prop.slice(0, 5) === "prop:" || ChildProperties.has(prop) || DOMWithState[nodeName]?.[prop]) {
+    if (hasNamespace) prop = prop.slice(5);else if (isHydrating(node)) return value;
+    if (prop === "value" && nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[prop] = value;
   } else {
-    const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
+    const ns = hasNamespace && Namespaces[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
   }
   return value;
@@ -505,7 +541,6 @@ function insertExpression(parent, value, current, marker) {
         appendNodes(parent, value, marker);
       } else reconcileArrays(parent, current, value);
     } else {
-      if (current && current.nodeType) clearHydrationRegistry(current);
       current && cleanChildren(parent);
       appendNodes(parent, value);
     }
@@ -531,18 +566,6 @@ function normalize(value, current, multi, doNotUnwrap) {
 function appendNodes(parent, array, marker = null) {
   for (let i = 0, len = array.length; i < len; i++) parent.insertBefore(array[i], marker);
 }
-function clearHydrationRegistry(node) {
-  if (!sharedConfig.registry || !node || node.nodeType !== 1) return;
-  const key = node.getAttribute("_hk");
-  if (key) sharedConfig.registry.delete(key);
-  const descendants = node.querySelectorAll?.(`*[_hk]`);
-  if (descendants) {
-    for (let i = 0; i < descendants.length; i++) {
-      const descendantKey = descendants[i].getAttribute("_hk");
-      if (descendantKey) sharedConfig.registry.delete(descendantKey);
-    }
-  }
-}
 function cleanChildren(parent, current, marker, replacement) {
   if (marker === undefined) return parent.textContent = "";
   if (current.length) {
@@ -551,10 +574,7 @@ function cleanChildren(parent, current, marker, replacement) {
       const el = current[i];
       if (replacement !== el) {
         const isParent = el.parentNode === parent;
-        if (replacement && !inserted && !i) isParent ? (clearHydrationRegistry(el), parent.replaceChild(replacement, el)) : parent.insertBefore(replacement, marker);else if (isParent) {
-          clearHydrationRegistry(el);
-          el.remove();
-        }
+        if (replacement && !inserted && !i) isParent ? parent.replaceChild(replacement, el) : parent.insertBefore(replacement, marker);else isParent && el.remove();
       } else inserted = true;
     }
   } else if (replacement) parent.insertBefore(replacement, marker);
@@ -668,4 +688,4 @@ function Dynamic(props) {
   return createDynamic(() => props.component, others);
 }
 
-export { voidFn as Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, voidFn as HydrationScript, Portal, Properties, RequestContext, SVGElements, SVGNamespace, addEventListener, applyRef, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };
+export { voidFn as Assets, ChildProperties, DOMElements, DOMWithState, DelegatedEvents, Dynamic, voidFn as HydrationScript, MathMLElements, Namespaces, Portal, RequestContext, SVGElements, addEventListener, applyRef, assign, className, clearDelegatedEvents, createDynamic, delegateEvents, dynamicProperty, effect, escape, voidFn as generateHydrationScript, voidFn as getAssets, getFirstChild, getHydrationKey, getNextElement, getNextMarker, getNextMatch, getNextSibling, voidFn as getRequestEvent, hydrate, insert, isDev, isServer, memo, ref, render, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, runHydrationEvents, setAttribute, setAttributeNS, setProperty, setStyleProperty, spread, ssr, ssrAttribute, ssrClassList, ssrElement, ssrHydrationKey, ssrStyle, style, template, voidFn as useAssets };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solidjs/web",
   "description": "Solid's web runtime for the browser and the server",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.6",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -75,11 +75,12 @@
     "seroval-plugins": "^1.1.0"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-beta.4",
-    "@solidjs/signals": "^0.13.6"
+    "@solidjs/signals": "^0.13.11",
+    "solid-js": "^2.0.0-beta.6"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-beta.4"
+    "@solidjs/signals": "^0.13.11",
+    "solid-js": "2.0.0-beta.6"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",

package/storage/types/src/index.d.ts

@@ -2,7 +2,7 @@ import { hydrate as hydrateCore, render as renderCore } from "./client.js";
 import { JSX, ComponentProps, ValidComponent } from "solid-js";
 export * from "./client.js";
 export declare function render(...args: Parameters<typeof renderCore>): ReturnType<typeof renderCore>;
-export { For, Show, Switch, Match, Errored, Loading, NoHydration, Hydration, merge as mergeProps } from "solid-js";
+export { For, Show, Switch, Match, Errored, Loading, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 export * from "./server-mock.js";
 export declare const isServer: boolean;
 export declare const isDev: boolean;

package/types/client.d.ts

@@ -1,10 +1,11 @@
 import { JSX } from "./jsx.js";
-export const Properties: Set<string>;
+export const DOMWithState: Record<string, Record<string, number>>;
 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>;
+export const MathMLElements: Set<string>;
+export const Namespaces: Record<string, string>;
 
 type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
 export function render(
@@ -13,7 +14,7 @@ export function render(
   init?: JSX.Element,
   options?: { owner?: unknown }
 ): () => void;
-export function template(html: string, isImportNode?: boolean, isSVG?: boolean, isMathML?: boolean): () => Element;
+export function template(html: string, flag?: number): () => Element;
 export function effect<T>(fn: (prev?: T) => T, effect: (value: T, prev?: T) => void, init?: T): void;
 export function memo<T>(fn: () => T, equal: boolean): () => T;
 export function untrack<T>(fn: () => T): T;
@@ -29,13 +30,11 @@ export function clearDelegatedEvents(d?: Document): void;
 export function spread<T>(
   node: Element,
   accessor: T,
-  isSVG?: Boolean,
   skipChildren?: Boolean
 ): void;
 export function assign(
   node: Element,
   props: any,
-  isSVG?: Boolean,
   skipChildren?: Boolean,
   prevProps?: any,
   skipRef?: Boolean
@@ -45,7 +44,7 @@ export function setAttributeNS(node: Element, namespace: string, name: string, v
 type ClassList =
   | Record<string, boolean>
   | Array<string | number | boolean | null | undefined | Record<string, boolean>>;
-export function className(node: Element, value: string | ClassList, isSvg?: boolean, prev?: string | ClassList): void;
+export function className(node: Element, value: string | ClassList, prev?: string | ClassList): void;
 export function setProperty(node: Element, name: string, value: any): void;
 export function setStyleProperty(node: Element, name: string, value: any): void;
 export function addEventListener(

package/types/index.d.ts

@@ -2,7 +2,7 @@ import { hydrate as hydrateCore, render as renderCore } from "./client.js";
 import { JSX, ComponentProps, ValidComponent } from "solid-js";
 export * from "./client.js";
 export declare function render(...args: Parameters<typeof renderCore>): ReturnType<typeof renderCore>;
-export { For, Show, Switch, Match, Errored, Loading, NoHydration, Hydration, merge as mergeProps } from "solid-js";
+export { For, Show, Switch, Match, Errored, Loading, Reveal, NoHydration, Hydration, merge as mergeProps } from "solid-js";
 export * from "./server-mock.js";
 export declare const isServer: boolean;
 export declare const isDev: boolean;

package/types/server.d.ts

@@ -1,10 +1,10 @@
 import { JSX } from "./jsx.js";
-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>;
+export const MathMLElements: Set<string>;
+export const Namespaces: Record<string, string>;
 
 type MountableElement = Element | Document | ShadowRoot | DocumentFragment | Node;
 
@@ -107,7 +107,6 @@ export function insert<T>(
 export function spread<T>(
   node: Element,
   accessor: T,
-  isSVG?: Boolean,
   skipChildren?: Boolean
 ): void;
 
@@ -131,13 +130,13 @@ export function addEventListener(
 /** @deprecated not supported on the server side */
 export function render(code: () => JSX.Element, element: MountableElement): () => void;
 /** @deprecated not supported on the server side */
-export function template(html: string, isImportNode?: boolean, isSVG?: boolean, isMathML?: boolean): () => Element;
+export function template(html: string, flag?: number): () => Element;
 /** @deprecated not supported on the server side */
 export function setProperty(node: Element, name: string, value: any): void;
 /** @deprecated not supported on the server side */
 export function className(node: Element, value: string): void;
 /** @deprecated not supported on the server side */
-export function assign(node: Element, props: any, isSVG?: Boolean, skipChildren?: Boolean): void;
+export function assign(node: Element, props: any, skipChildren?: Boolean): void;
 
 /** @deprecated not supported on the server side */
 export function hydrate(