@solidjs/web 2.0.0-experimental.2 → 2.0.0-experimental.4

package/dist/dev.cjs

@@ -363,14 +363,17 @@ function toggleClassKey(node, key, value) {
 function classListToObject(classList) {
   if (Array.isArray(classList)) {
     const result = {};
-    for (let i = 0, len = classList.length; i < len; i++) {
-      const key = classList[i];
-      if (typeof key === "object" && key != null) Object.assign(result, key);else if (key || key === 0) result[key] = true;
-    }
+    flattenClassList(classList, result);
     return result;
   }
   return classList;
 }
+function flattenClassList(list, result) {
+  for (let i = 0, len = list.length; i < len; i++) {
+    const item = list[i];
+    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 propAlias, forceProp;
   if (prop === "style") return style(node, value, prev), value;
@@ -398,7 +401,8 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
   } else if (prop.slice(0, 5) === "bool:") {
     setBoolAttribute(node, prop.slice(5), value);
   } else if ((forceProp = prop.slice(0, 5) === "prop:") || ChildProperties.has(prop) || !isSVG && (propAlias = getPropAlias(prop, node.tagName)) || Properties.has(prop)) {
-    if (forceProp) prop = prop.slice(5);else node[propAlias || prop] = value;
+    if (forceProp) prop = prop.slice(5);
+    if (prop === "value" && node.nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[propAlias || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
@@ -493,7 +497,7 @@ function normalize(value, current, multi, doNotUnwrap) {
     doNotUnwrap
   });
   if (doNotUnwrap && typeof value === "function") return value;
-  if (multi && value != null && !Array.isArray(value)) value = [value];
+  if (multi && !Array.isArray(value)) value = [value != null ? value : ""];
   if (Array.isArray(value)) {
     for (let i = 0, len = value.length; i < len; i++) {
       const item = value[i],

package/dist/dev.js

@@ -830,15 +830,19 @@ function toggleClassKey(node, key, value) {
 function classListToObject(classList) {
   if (Array.isArray(classList)) {
     const result = {};
-    for (let i = 0, len = classList.length; i < len; i++) {
-      const key = classList[i];
-      if (typeof key === "object" && key != null) Object.assign(result, key);
-      else if (key || key === 0) result[key] = true;
-    }
+    flattenClassList(classList, result);
     return result;
   }
   return classList;
 }
+function flattenClassList(list, result) {
+  for (let i = 0, len = list.length; i < len; i++) {
+    const item = list[i];
+    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 propAlias, forceProp;
   if (prop === "style") return style(node, value, prev), value;
@@ -872,6 +876,8 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     Properties.has(prop)
   ) {
     if (forceProp) prop = prop.slice(5);
+    if (prop === "value" && node.nodeName === "SELECT")
+      queueMicrotask(() => (node.value = value)) || (node.value = value);
     else node[propAlias || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
@@ -972,7 +978,7 @@ function normalize(value, current, multi, doNotUnwrap) {
     doNotUnwrap
   });
   if (doNotUnwrap && typeof value === "function") return value;
-  if (multi && value != null && !Array.isArray(value)) value = [value];
+  if (multi && !Array.isArray(value)) value = [value != null ? value : ""];
   if (Array.isArray(value)) {
     for (let i = 0, len = value.length; i < len; i++) {
       const item = value[i],

package/dist/server.cjs

@@ -369,6 +369,8 @@ function ssr(t, ...nodes) {
 }
 function ssrClassName(value) {
   if (!value) return "";
+  if (typeof value === "string") return escape(value, true);
+  value = classListToObject(value);
   let classKeys = Object.keys(value),
     result = "";
   for (let i = 0, len = classKeys.length; i < len; i++) {
@@ -403,7 +405,7 @@ function ssrElement(tag, props, children, needsId) {
   for (let i = 0; i < keys.length; i++) {
     const prop = keys[i];
     if (ChildProperties.has(prop)) {
-      if (children === undefined && !skipChildren) children = prop === "innerHTML" ? props[prop] : escape(props[prop]);
+      if (children === undefined && !skipChildren) children = tag === "script" || tag === "style" || prop === "innerHTML" ? props[prop] : escape(props[prop]);
       continue;
     }
     const value = props[prop];
@@ -421,7 +423,7 @@ function ssrElement(tag, props, children, needsId) {
     } else if (prop.slice(0, 5) === "attr:") {
       result += `${escape(prop.slice(5))}="${escape(value, true)}"`;
     } else {
-      result += `${Aliases[prop] || escape(prop)}="${escape(value, true)}"`;
+      result += `${escape(prop)}="${escape(value, true)}"`;
     }
     if (i !== keys.length - 1) result += " ";
   }
@@ -503,6 +505,29 @@ function resolveSSRNode(node, top) {
   if (t === "function") return resolveSSRNode(node());
   return String(node);
 }
+function mergeProps(...sources) {
+  const target = {};
+  for (let i = 0; i < sources.length; i++) {
+    let source = sources[i];
+    if (typeof source === "function") source = source();
+    if (source) {
+      const descriptors = Object.getOwnPropertyDescriptors(source);
+      for (const key in descriptors) {
+        if (key in target) continue;
+        Object.defineProperty(target, key, {
+          enumerable: true,
+          get() {
+            for (let i = sources.length - 1; i >= 0; i--) {
+              const v = (sources[i] || {})[key];
+              if (v !== undefined) return v;
+            }
+          }
+        });
+      }
+    }
+  }
+  return target;
+}
 function getHydrationKey() {
   const hydrate = solidJs.sharedConfig.context;
   return hydrate && !hydrate.noHydrate && solidJs.sharedConfig.getNextContextId();
@@ -579,6 +604,20 @@ function replacePlaceholder(html, key, value) {
   const last = html.indexOf(close, first + marker.length);
   return html.slice(0, first) + value + html.slice(last + close.length);
 }
+function classListToObject(classList) {
+  if (Array.isArray(classList)) {
+    const result = {};
+    flattenClassList(classList, result);
+    return result;
+  }
+  return classList;
+}
+function flattenClassList(list, result) {
+  for (let i = 0, len = list.length; i < len; i++) {
+    const item = list[i];
+    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;
+  }
+}
 const RequestContext = Symbol();
 function getRequestEvent() {
   return globalThis[RequestContext] ? globalThis[RequestContext].getStore() || solidJs.sharedConfig.context && solidJs.sharedConfig.context.event || console.log("RequestEvent is missing. This is most likely due to accessing `getRequestEvent` non-managed async scope in a partially polyfilled environment. Try moving it above all `await` calls.") : undefined;
@@ -602,11 +641,11 @@ function createDynamic(component, props) {
   }
 }
 function Dynamic(props) {
-  const [, others] = solidJs.splitProps(props, ["component"]);
+  const others = solidJs.omit(props, "component");
   return createDynamic(() => props.component, others);
 }
 function Portal(props) {
-  return "";
+  throw new Error("Portal is not supported on the server");
 }
 
 Object.defineProperty(exports, "ErrorBoundary", {
@@ -617,14 +656,14 @@ Object.defineProperty(exports, "For", {
   enumerable: true,
   get: function () { return solidJs.For; }
 });
-Object.defineProperty(exports, "Index", {
-  enumerable: true,
-  get: function () { return solidJs.Index; }
-});
 Object.defineProperty(exports, "Match", {
   enumerable: true,
   get: function () { return solidJs.Match; }
 });
+Object.defineProperty(exports, "Repeat", {
+  enumerable: true,
+  get: function () { return solidJs.Repeat; }
+});
 Object.defineProperty(exports, "Show", {
   enumerable: true,
   get: function () { return solidJs.Show; }
@@ -633,10 +672,6 @@ Object.defineProperty(exports, "Suspense", {
   enumerable: true,
   get: function () { return solidJs.Suspense; }
 });
-Object.defineProperty(exports, "SuspenseList", {
-  enumerable: true,
-  get: function () { return solidJs.SuspenseList; }
-});
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
   get: function () { return solidJs.Switch; }
@@ -657,10 +692,6 @@ Object.defineProperty(exports, "memo", {
   enumerable: true,
   get: function () { return solidJs.createMemo; }
 });
-Object.defineProperty(exports, "mergeProps", {
-  enumerable: true,
-  get: function () { return solidJs.mergeProps; }
-});
 Object.defineProperty(exports, "untrack", {
   enumerable: true,
   get: function () { return solidJs.untrack; }
@@ -697,6 +728,7 @@ exports.hydrate = notSup;
 exports.insert = notSup;
 exports.isDev = isDev;
 exports.isServer = isServer;
+exports.mergeProps = mergeProps;
 exports.render = notSup;
 exports.renderToStream = renderToStream;
 exports.renderToString = renderToString;

package/dist/server.js

@@ -1,18 +1,16 @@
-import { sharedConfig, createRoot, splitProps } from "solid-js";
+import { sharedConfig, createRoot, omit } from "solid-js";
 export {
   ErrorBoundary,
   For,
-  Index,
   Match,
+  Repeat,
   Show,
   Suspense,
-  SuspenseList,
   Switch,
   createComponent,
   createRenderEffect as effect,
   getOwner,
   createMemo as memo,
-  mergeProps,
   untrack
 } from "solid-js";
 import { Feature, Serializer, getCrossReferenceHeader } from "seroval";
@@ -816,6 +814,8 @@ function ssr(t, ...nodes) {
 }
 function ssrClassName(value) {
   if (!value) return "";
+  if (typeof value === "string") return escape(value, true);
+  value = classListToObject(value);
   let classKeys = Object.keys(value),
     result = "";
   for (let i = 0, len = classKeys.length; i < len; i++) {
@@ -852,7 +852,10 @@ function ssrElement(tag, props, children, needsId) {
     const prop = keys[i];
     if (ChildProperties.has(prop)) {
       if (children === undefined && !skipChildren)
-        children = prop === "innerHTML" ? props[prop] : escape(props[prop]);
+        children =
+          tag === "script" || tag === "style" || prop === "innerHTML"
+            ? props[prop]
+            : escape(props[prop]);
       continue;
     }
     const value = props[prop];
@@ -876,7 +879,7 @@ function ssrElement(tag, props, children, needsId) {
     } else if (prop.slice(0, 5) === "attr:") {
       result += `${escape(prop.slice(5))}="${escape(value, true)}"`;
     } else {
-      result += `${Aliases[prop] || escape(prop)}="${escape(value, true)}"`;
+      result += `${escape(prop)}="${escape(value, true)}"`;
     }
     if (i !== keys.length - 1) result += " ";
   }
@@ -960,6 +963,29 @@ function resolveSSRNode(node, top) {
   if (t === "function") return resolveSSRNode(node());
   return String(node);
 }
+function mergeProps(...sources) {
+  const target = {};
+  for (let i = 0; i < sources.length; i++) {
+    let source = sources[i];
+    if (typeof source === "function") source = source();
+    if (source) {
+      const descriptors = Object.getOwnPropertyDescriptors(source);
+      for (const key in descriptors) {
+        if (key in target) continue;
+        Object.defineProperty(target, key, {
+          enumerable: true,
+          get() {
+            for (let i = sources.length - 1; i >= 0; i--) {
+              const v = (sources[i] || {})[key];
+              if (v !== undefined) return v;
+            }
+          }
+        });
+      }
+    }
+  }
+  return target;
+}
 function getHydrationKey() {
   const hydrate = sharedConfig.context;
   return hydrate && !hydrate.noHydrate && sharedConfig.getNextContextId();
@@ -1037,6 +1063,22 @@ function replacePlaceholder(html, key, value) {
   const last = html.indexOf(close, first + marker.length);
   return html.slice(0, first) + value + html.slice(last + close.length);
 }
+function classListToObject(classList) {
+  if (Array.isArray(classList)) {
+    const result = {};
+    flattenClassList(classList, result);
+    return result;
+  }
+  return classList;
+}
+function flattenClassList(list, result) {
+  for (let i = 0, len = list.length; i < len; i++) {
+    const item = list[i];
+    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;
+  }
+}
 const RequestContext = Symbol();
 function getRequestEvent() {
   return globalThis[RequestContext]
@@ -1069,11 +1111,11 @@ function createDynamic(component, props) {
   }
 }
 function Dynamic(props) {
-  const [, others] = splitProps(props, ["component"]);
+  const others = omit(props, "component");
   return createDynamic(() => props.component, others);
 }
 function Portal(props) {
-  return "";
+  throw new Error("Portal is not supported on the server");
 }
 
 export {
@@ -1109,6 +1151,7 @@ export {
   notSup as insert,
   isDev,
   isServer,
+  mergeProps,
   notSup as render,
   renderToStream,
   renderToString,

package/dist/web.cjs

@@ -355,14 +355,17 @@ function toggleClassKey(node, key, value) {
 function classListToObject(classList) {
   if (Array.isArray(classList)) {
     const result = {};
-    for (let i = 0, len = classList.length; i < len; i++) {
-      const key = classList[i];
-      if (typeof key === "object" && key != null) Object.assign(result, key);else if (key || key === 0) result[key] = true;
-    }
+    flattenClassList(classList, result);
     return result;
   }
   return classList;
 }
+function flattenClassList(list, result) {
+  for (let i = 0, len = list.length; i < len; i++) {
+    const item = list[i];
+    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 propAlias, forceProp;
   if (prop === "style") return style(node, value, prev), value;
@@ -390,7 +393,8 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
   } else if (prop.slice(0, 5) === "bool:") {
     setBoolAttribute(node, prop.slice(5), value);
   } else if ((forceProp = prop.slice(0, 5) === "prop:") || ChildProperties.has(prop) || !isSVG && (propAlias = getPropAlias(prop, node.tagName)) || Properties.has(prop)) {
-    if (forceProp) prop = prop.slice(5);else node[propAlias || prop] = value;
+    if (forceProp) prop = prop.slice(5);
+    if (prop === "value" && node.nodeName === "SELECT") queueMicrotask(() => node.value = value) || (node.value = value);else node[propAlias || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, prop, value);
@@ -485,7 +489,7 @@ function normalize(value, current, multi, doNotUnwrap) {
     doNotUnwrap
   });
   if (doNotUnwrap && typeof value === "function") return value;
-  if (multi && value != null && !Array.isArray(value)) value = [value];
+  if (multi && !Array.isArray(value)) value = [value != null ? value : ""];
   if (Array.isArray(value)) {
     for (let i = 0, len = value.length; i < len; i++) {
       const item = value[i],

package/dist/web.js

@@ -812,15 +812,19 @@ function toggleClassKey(node, key, value) {
 function classListToObject(classList) {
   if (Array.isArray(classList)) {
     const result = {};
-    for (let i = 0, len = classList.length; i < len; i++) {
-      const key = classList[i];
-      if (typeof key === "object" && key != null) Object.assign(result, key);
-      else if (key || key === 0) result[key] = true;
-    }
+    flattenClassList(classList, result);
     return result;
   }
   return classList;
 }
+function flattenClassList(list, result) {
+  for (let i = 0, len = list.length; i < len; i++) {
+    const item = list[i];
+    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 propAlias, forceProp;
   if (prop === "style") return style(node, value, prev), value;
@@ -854,6 +858,8 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     Properties.has(prop)
   ) {
     if (forceProp) prop = prop.slice(5);
+    if (prop === "value" && node.nodeName === "SELECT")
+      queueMicrotask(() => (node.value = value)) || (node.value = value);
     else node[propAlias || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
@@ -954,7 +960,7 @@ function normalize(value, current, multi, doNotUnwrap) {
     doNotUnwrap
   });
   if (doNotUnwrap && typeof value === "function") return value;
-  if (multi && value != null && !Array.isArray(value)) value = [value];
+  if (multi && !Array.isArray(value)) value = [value != null ? value : ""];
   if (Array.isArray(value)) {
     for (let i = 0, len = value.length; i < len; i++) {
       const item = value[i],

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-experimental.2",
+  "version": "2.0.0-experimental.4",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -75,10 +75,10 @@
     "seroval-plugins": "^1.1.0"
   },
   "peerDependencies": {
-    "solid-js": "^2.0.0-experimental.2"
+    "solid-js": "^2.0.0-experimental.4"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-experimental.2"
+    "solid-js": "2.0.0-experimental.4"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",