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

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 += " ";
   }
@@ -579,6 +581,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;

package/dist/server.js

@@ -816,6 +816,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 +854,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 +881,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 += " ";
   }
@@ -1037,6 +1042,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]

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.3",
   "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.3"
   },
   "devDependencies": {
-    "solid-js": "2.0.0-experimental.2"
+    "solid-js": "2.0.0-experimental.3"
   },
   "scripts": {
     "build": "npm-run-all -nl build:*",