solid-js 1.6.0-beta.2 → 1.6.0-beta.4

package/h/jsx-runtime/types/jsx.d.ts

@@ -603,7 +603,7 @@ export namespace JSX {
 
   interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
     accessKey?: FunctionMaybe<string>;
-    class?: FunctionMaybe<string>;
+    class?: FunctionMaybe<string> | undefined;
     contenteditable?: FunctionMaybe<boolean | "inherit">;
     contextmenu?: FunctionMaybe<string>;
     dir?: FunctionMaybe<HTMLDir>;
@@ -1090,7 +1090,7 @@ export namespace JSX {
     tabindex?: FunctionMaybe<number | string>;
   }
   interface StylableSVGAttributes {
-    class?: FunctionMaybe<string>;
+    class?: FunctionMaybe<string> | undefined;
     style?: FunctionMaybe<CSSProperties | string>;
   }
   interface TransformableSVGAttributes {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.6.0-beta.2",
+  "version": "1.6.0-beta.4",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",

package/types/jsx.d.ts

@@ -611,7 +611,7 @@ export namespace JSX {
   interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
     // [key: ClassKeys]: boolean;
     accessKey?: string;
-    class?: string;
+    class?: string | undefined;
     contenteditable?: boolean | "inherit";
     contextmenu?: string;
     dir?: HTMLDir;
@@ -1098,7 +1098,7 @@ export namespace JSX {
     tabindex?: number | string;
   }
   interface StylableSVGAttributes {
-    class?: string;
+    class?: string | undefined;
     style?: CSSProperties | string;
   }
   interface TransformableSVGAttributes {

package/web/dist/dev.cjs

@@ -7,16 +7,18 @@ var solidJs = require('solid-js');
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
 const Properties = /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
-const Aliases = Object.create(null);
-Aliases.className = "class";
-Aliases.htmlFor = "for";
-const PropAliases = Object.create(null);
-PropAliases.class = "className";
-PropAliases.formnovalidate = "formNoValidate";
-PropAliases.ismap = "isMap";
-PropAliases.nomodule = "noModule";
-PropAliases.playsinline = "playsInline";
-PropAliases.readonly = "readOnly";
+const Aliases = /*#__PURE__*/Object.assign(Object.create(null), {
+  className: "class",
+  htmlFor: "for"
+});
+const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
+  class: "className",
+  formnovalidate: "formNoValidate",
+  ismap: "isMap",
+  nomodule: "noModule",
+  playsinline: "playsInline",
+  readonly: "readOnly"
+});
 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([
 "altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
@@ -558,7 +560,8 @@ function Portal(props) {
     Object.defineProperty(container, "host", {
       get() {
         return marker.parentNode;
-      }
+      },
+      configurable: true
     });
     insert(renderRoot, renderPortal());
     mount.appendChild(container);

package/web/dist/dev.js

@@ -4,16 +4,18 @@ export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch,
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
 const Properties = /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
-const Aliases = Object.create(null);
-Aliases.className = "class";
-Aliases.htmlFor = "for";
-const PropAliases = Object.create(null);
-PropAliases.class = "className";
-PropAliases.formnovalidate = "formNoValidate";
-PropAliases.ismap = "isMap";
-PropAliases.nomodule = "noModule";
-PropAliases.playsinline = "playsInline";
-PropAliases.readonly = "readOnly";
+const Aliases = /*#__PURE__*/Object.assign(Object.create(null), {
+  className: "class",
+  htmlFor: "for"
+});
+const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
+  class: "className",
+  formnovalidate: "formNoValidate",
+  ismap: "isMap",
+  nomodule: "noModule",
+  playsinline: "playsInline",
+  readonly: "readOnly"
+});
 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([
 "altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
@@ -555,7 +557,8 @@ function Portal(props) {
     Object.defineProperty(container, "host", {
       get() {
         return marker.parentNode;
-      }
+      },
+      configurable: true
     });
     insert(renderRoot, renderPortal());
     mount.appendChild(container);

package/web/dist/server.cjs

@@ -8,16 +8,10 @@ const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked"
 const BooleanAttributes = /*#__PURE__*/new Set(booleans);
 /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
-const Aliases = Object.create(null);
-Aliases.className = "class";
-Aliases.htmlFor = "for";
-const PropAliases = Object.create(null);
-PropAliases.class = "className";
-PropAliases.formnovalidate = "formNoValidate";
-PropAliases.ismap = "isMap";
-PropAliases.nomodule = "noModule";
-PropAliases.playsinline = "playsInline";
-PropAliases.readonly = "readOnly";
+const Aliases = /*#__PURE__*/Object.assign(Object.create(null), {
+  className: "class",
+  htmlFor: "for"
+});
 
 const {
   hasOwnProperty
@@ -269,7 +263,7 @@ function toRefParam(index) {
   return ref;
 }
 
-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)}`;
+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),_$HY.fe(e)}`;
 function renderToString(code, options = {}) {
   let scripts = "";
   solidJs.sharedConfig.context = {
@@ -644,11 +638,19 @@ function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
 } = {}) {
-  return `<script${nonce ? ` nonce="${nonce}"` : ""}>var e,t;e=window._$HY||(_$HY={events:[],completed:new WeakSet,r:{}}),t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])})))),e.init=(t,o)=>{e.r[t]=[new Promise(((e,t)=>o=e)),o]},e.set=(t,o,s)=>{(s=e.r[t])&&s[1](o),e.r[t]=[o]},e.unset=t=>{delete e.r[t]},e.load=t=>e.r[t];</script><!--xs-->`;
+  return `<script${nonce ? ` nonce="${nonce}"` : ""}>var e,t;e=window._$HY||(_$HY={events:[],completed:new WeakSet,r:{},fe(){},init(e,t){_$HY.r[e]=[new Promise(((e,o)=>t=e)),t]},set(e,t,o){(o=_$HY.r[e])&&o[1](t),_$HY.r[e]=[t]},unset(e){delete _$HY.r[e]},load:e=>_$HY.r[e]}),t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),["${eventNames.join('", "')}"].forEach((o=>document.addEventListener(o,(o=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])}))));</script><!--xs-->`;
 }
 function Hydration(props) {
-  solidJs.sharedConfig.context.noHydrate = false;
-  return props.children;
+  if (!solidJs.sharedConfig.context.noHydrate) return props.children;
+  const context = solidJs.sharedConfig.context;
+  solidJs.sharedConfig.context = { ...context,
+    count: 0,
+    id: `${context.id}${context.count++}-`,
+    noHydrate: false
+  };
+  const res = props.children;
+  solidJs.sharedConfig.context = context;
+  return res;
 }
 function NoHydration(props) {
   solidJs.sharedConfig.context.noHydrate = true;

package/web/dist/server.js

@@ -5,16 +5,10 @@ const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked"
 const BooleanAttributes = /*#__PURE__*/new Set(booleans);
 /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
-const Aliases = Object.create(null);
-Aliases.className = "class";
-Aliases.htmlFor = "for";
-const PropAliases = Object.create(null);
-PropAliases.class = "className";
-PropAliases.formnovalidate = "formNoValidate";
-PropAliases.ismap = "isMap";
-PropAliases.nomodule = "noModule";
-PropAliases.playsinline = "playsInline";
-PropAliases.readonly = "readOnly";
+const Aliases = /*#__PURE__*/Object.assign(Object.create(null), {
+  className: "class",
+  htmlFor: "for"
+});
 
 const {
   hasOwnProperty
@@ -266,7 +260,7 @@ function toRefParam(index) {
   return ref;
 }
 
-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)}`;
+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),_$HY.fe(e)}`;
 function renderToString(code, options = {}) {
   let scripts = "";
   sharedConfig.context = {
@@ -641,11 +635,19 @@ function generateHydrationScript({
   eventNames = ["click", "input"],
   nonce
 } = {}) {
-  return `<script${nonce ? ` nonce="${nonce}"` : ""}>var e,t;e=window._$HY||(_$HY={events:[],completed:new WeakSet,r:{}}),t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),["${eventNames.join('","')}"].forEach((o=>document.addEventListener(o,(o=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])})))),e.init=(t,o)=>{e.r[t]=[new Promise(((e,t)=>o=e)),o]},e.set=(t,o,s)=>{(s=e.r[t])&&s[1](o),e.r[t]=[o]},e.unset=t=>{delete e.r[t]},e.load=t=>e.r[t];</script><!--xs-->`;
+  return `<script${nonce ? ` nonce="${nonce}"` : ""}>var e,t;e=window._$HY||(_$HY={events:[],completed:new WeakSet,r:{},fe(){},init(e,t){_$HY.r[e]=[new Promise(((e,o)=>t=e)),t]},set(e,t,o){(o=_$HY.r[e])&&o[1](t),_$HY.r[e]=[t]},unset(e){delete _$HY.r[e]},load:e=>_$HY.r[e]}),t=e=>e&&e.hasAttribute&&(e.hasAttribute("data-hk")?e:t(e.host&&e.host instanceof Node?e.host:e.parentNode)),["${eventNames.join('", "')}"].forEach((o=>document.addEventListener(o,(o=>{let s=o.composedPath&&o.composedPath()[0]||o.target,a=t(s);a&&!e.completed.has(a)&&e.events.push([a,o])}))));</script><!--xs-->`;
 }
 function Hydration(props) {
-  sharedConfig.context.noHydrate = false;
-  return props.children;
+  if (!sharedConfig.context.noHydrate) return props.children;
+  const context = sharedConfig.context;
+  sharedConfig.context = { ...context,
+    count: 0,
+    id: `${context.id}${context.count++}-`,
+    noHydrate: false
+  };
+  const res = props.children;
+  sharedConfig.context = context;
+  return res;
 }
 function NoHydration(props) {
   sharedConfig.context.noHydrate = true;

package/web/dist/web.cjs

@@ -7,16 +7,18 @@ var solidJs = require('solid-js');
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
 const Properties = /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
-const Aliases = Object.create(null);
-Aliases.className = "class";
-Aliases.htmlFor = "for";
-const PropAliases = Object.create(null);
-PropAliases.class = "className";
-PropAliases.formnovalidate = "formNoValidate";
-PropAliases.ismap = "isMap";
-PropAliases.nomodule = "noModule";
-PropAliases.playsinline = "playsInline";
-PropAliases.readonly = "readOnly";
+const Aliases = /*#__PURE__*/Object.assign(Object.create(null), {
+  className: "class",
+  htmlFor: "for"
+});
+const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
+  class: "className",
+  formnovalidate: "formNoValidate",
+  ismap: "isMap",
+  nomodule: "noModule",
+  playsinline: "playsInline",
+  readonly: "readOnly"
+});
 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([
 "altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
@@ -555,7 +557,8 @@ function Portal(props) {
     Object.defineProperty(container, "host", {
       get() {
         return marker.parentNode;
-      }
+      },
+      configurable: true
     });
     insert(renderRoot, renderPortal());
     mount.appendChild(container);

package/web/dist/web.js

@@ -4,16 +4,18 @@ export { ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch,
 const booleans = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "controls", "default", "disabled", "formnovalidate", "hidden", "indeterminate", "ismap", "loop", "multiple", "muted", "nomodule", "novalidate", "open", "playsinline", "readonly", "required", "reversed", "seamless", "selected"];
 const Properties = /*#__PURE__*/new Set(["className", "value", "readOnly", "formNoValidate", "isMap", "noModule", "playsInline", ...booleans]);
 const ChildProperties = /*#__PURE__*/new Set(["innerHTML", "textContent", "innerText", "children"]);
-const Aliases = Object.create(null);
-Aliases.className = "class";
-Aliases.htmlFor = "for";
-const PropAliases = Object.create(null);
-PropAliases.class = "className";
-PropAliases.formnovalidate = "formNoValidate";
-PropAliases.ismap = "isMap";
-PropAliases.nomodule = "noModule";
-PropAliases.playsinline = "playsInline";
-PropAliases.readonly = "readOnly";
+const Aliases = /*#__PURE__*/Object.assign(Object.create(null), {
+  className: "class",
+  htmlFor: "for"
+});
+const PropAliases = /*#__PURE__*/Object.assign(Object.create(null), {
+  class: "className",
+  formnovalidate: "formNoValidate",
+  ismap: "isMap",
+  nomodule: "noModule",
+  playsinline: "playsInline",
+  readonly: "readOnly"
+});
 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([
 "altGlyph", "altGlyphDef", "altGlyphItem", "animate", "animateColor", "animateMotion", "animateTransform", "circle", "clipPath", "color-profile", "cursor", "defs", "desc", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "font", "font-face", "font-face-format", "font-face-name", "font-face-src", "font-face-uri", "foreignObject", "g", "glyph", "glyphRef", "hkern", "image", "line", "linearGradient", "marker", "mask", "metadata", "missing-glyph", "mpath", "path", "pattern", "polygon", "polyline", "radialGradient", "rect",
@@ -552,7 +554,8 @@ function Portal(props) {
     Object.defineProperty(container, "host", {
       get() {
         return marker.parentNode;
-      }
+      },
+      configurable: true
     });
     insert(renderRoot, renderPortal());
     mount.appendChild(container);