solid-js 1.3.17 → 1.4.0-beta.2

package/web/dist/server.cjs

@@ -269,8 +269,8 @@ function renderToStringAsync(code, options = {}) {
     nonce,
     writeResource(id, p, error) {
       if (error) return scripts += `_$HY.set("${id}", ${serializeError(p)});`;
-      if (!p || typeof p !== "object" || !("then" in p)) return scripts += serializeSet(dedupe, id, p);
-      p.then(d => scripts += serializeSet(dedupe, id, d)).catch(() => scripts += `_$HY.set("${id}", {});`);
+      if (!p || typeof p !== "object" || !("then" in p)) return (scripts += serializeSet(dedupe, id, p)) + ";";
+      p.then(d => scripts += serializeSet(dedupe, id, d) + ";").catch(() => scripts += `_$HY.set("${id}", {});`);
     }
   };
   const timeout = new Promise((_, reject) => setTimeout(() => reject("renderToString timed out"), timeoutMs));
@@ -318,6 +318,7 @@ function renderToStream(code, options = {}) {
   } = options;
   const tmp = [];
   const tasks = [];
+  const blockingResources = [];
   const registry = new Map();
   const dedupe = new WeakMap();
   const checkEnd = () => {
@@ -332,6 +333,13 @@ function renderToStream(code, options = {}) {
       completed = true;
     }
   };
+  const pushTask = task => {
+    tasks.push(task);
+    if (!scheduled) {
+      Promise.resolve().then(writeTasks);
+      scheduled = true;
+    }
+  };
   const writeTasks = () => {
     if (tasks.length && !completed) {
       buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks.join(";")}</script>`);
@@ -340,6 +348,7 @@ function renderToStream(code, options = {}) {
     scheduled = false;
   };
   let writable;
+  let firstFlushed = false;
   let completed = false;
   let scriptFlushed = false;
   let scheduled = true;
@@ -357,45 +366,45 @@ function renderToStream(code, options = {}) {
     suspense: {},
     assets: [],
     nonce,
-    writeResource(id, p, error) {
-      if (!scheduled) {
-        Promise.resolve().then(writeTasks);
-        scheduled = true;
-      }
-      if (error) return tasks.push(`_$HY.set("${id}", ${serializeError(p)})`);
-      if (!p || typeof p !== "object" || !("then" in p)) return tasks.push(serializeSet(dedupe, id, p));
-      tasks.push(`_$HY.init("${id}")`);
+    writeResource(id, p, error, wait) {
+      if (error) return pushTask(`_$HY.set("${id}", ${serializeError(p)})`);
+      if (!p || typeof p !== "object" || !("then" in p)) return pushTask(serializeSet(dedupe, id, p));
+      if (wait && !firstFlushed) blockingResources.push(p);else pushTask(`_$HY.init("${id}")`);
       p.then(d => {
-        !completed && buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${serializeSet(dedupe, id, d)}</script>`);
+        !completed && pushTask(serializeSet(dedupe, id, d));
       }).catch(() => {
-        !completed && buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", {})</script>`);
+        !completed && pushTask(`_$HY.set("${id}", {})`);
       });
     },
     registerFragment(key) {
-      registry.set(key, []);
-      if (!scheduled) {
-        Promise.resolve().then(writeTasks);
-        scheduled = true;
+      if (!registry.has(key)) {
+        registry.set(key, []);
+        pushTask(`_$HY.init("${key}")`);
       }
-      tasks.push(`_$HY.init("${key}")`);
       return (value, error) => {
         if (registry.has(key)) {
           const keys = registry.get(key);
           registry.delete(key);
           if (waitForFragments(registry, key)) return;
           if ((value !== undefined || error) && !completed) {
-            buffer.write(`<div hidden id="${key}">${value !== undefined ? value : " "}</div><script${nonce ? ` nonce="${nonce}"` : ""}>${!scriptFlushed ? REPLACE_SCRIPT : ""}${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}$df("${key}"${error ? "," + serializeError(error) : ""})</script>`);
-            scriptFlushed = true;
+            if (!firstFlushed) {
+              Promise.resolve().then(() => html = replacePlaceholder(html, key, value !== undefined ? value : ""));
+              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}_$HY.set("${key}",${error ? serializeError(error) : "null"})`);
+            } else {
+              buffer.write(`<div hidden id="${key}">${value !== undefined ? value : " "}</div>`);
+              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}")`).join(";") : ""}$df("${key}"${error ? "," + serializeError(error) : ""})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
+              scriptFlushed = true;
+            }
           }
         }
-        checkEnd();
+        if (firstFlushed) checkEnd();
         return true;
       };
     }
   };
   let html = resolveSSRNode(escape(code()));
-  html = injectAssets(solidJs.sharedConfig.context.assets, html);
-  Promise.resolve().then(() => {
+  function doShell() {
+    html = injectAssets(solidJs.sharedConfig.context.assets, html);
     if (tasks.length) html = injectScripts(html, tasks.join(";"), nonce);
     buffer.write(html);
     tasks.length = 0;
@@ -405,29 +414,37 @@ function renderToStream(code, options = {}) {
         !completed && buffer.write(v);
       }
     });
-  });
+  }
   return {
     pipe(w) {
-      buffer = writable = w;
-      tmp.forEach(chunk => buffer.write(chunk));
-      if (completed) writable.end();else setTimeout(checkEnd);
+      Promise.allSettled(blockingResources).then(() => {
+        doShell();
+        buffer = writable = w;
+        tmp.forEach(chunk => buffer.write(chunk));
+        firstFlushed = true;
+        if (completed) writable.end();else setTimeout(checkEnd);
+      });
     },
     pipeTo(w) {
-      const encoder = new TextEncoder();
-      const writer = w.getWriter();
-      writable = {
-        end() {
-          writer.releaseLock();
-          w.close();
-        }
-      };
-      buffer = {
-        write(payload) {
-          writer.write(encoder.encode(payload));
-        }
-      };
-      tmp.forEach(chunk => buffer.write(chunk));
-      if (completed) writable.end();else setTimeout(checkEnd);
+      Promise.allSettled(blockingResources).then(() => {
+        doShell();
+        const encoder = new TextEncoder();
+        const writer = w.getWriter();
+        writable = {
+          end() {
+            writer.releaseLock();
+            w.close();
+          }
+        };
+        buffer = {
+          write(payload) {
+            writer.write(encoder.encode(payload));
+          }
+        };
+        tmp.forEach(chunk => buffer.write(chunk));
+        firstFlushed = true;
+        if (completed) writable.end();else setTimeout(checkEnd);
+      });
     }
   };
 }
@@ -496,9 +513,10 @@ function ssrStyle(value) {
   return result;
 }
 function ssrSpread(props, isSVG, skipChildren) {
+  let result = "";
+  if (props == null) return results;
   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];
@@ -516,7 +534,7 @@ function ssrSpread(props, isSVG, skipChildren) {
       classResolved = true;
     } else if (BooleanAttributes.has(prop)) {
       if (value) result += prop;else continue;
-    } else if (prop === "ref" || prop.slice(0, 2) === "on") {
+    } else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on") {
       continue;
     } else {
       result += `${Aliases[prop] || prop}="${escape(value, true)}"`;
@@ -525,8 +543,8 @@ function ssrSpread(props, isSVG, skipChildren) {
   }
   return result;
 }
-function ssrBoolean(key, value) {
-  return value ? " " + key : "";
+function ssrAttribute(key, value, isBoolean) {
+  return isBoolean ? value ? " " + key : "" : value != null ? ` ${key}="${value}"` : "";
 }
 function ssrHydrationKey() {
   const hk = getHydrationKey();
@@ -637,9 +655,26 @@ function waitForFragments(registry, key) {
 }
 function serializeSet(registry, key, value) {
   const exist = registry.get(value);
-  if (exist) return `_$HY.set("${key}", _$HY.r["${exist}"][0]);`;
+  if (exist) return `_$HY.set("${key}", _$HY.r["${exist}"][0])`;
   value !== null && typeof value === "object" && registry.set(value, key);
-  return `_$HY.set("${key}", ${devalue(value)});`;
+  return `_$HY.set("${key}", ${devalue(value)})`;
+}
+function replacePlaceholder(html, key, value) {
+  const nextRegex = /(<[/]?span[^>]*>)/g;
+  const marker = `<span id="pl-${key}">`;
+  const first = html.indexOf(marker);
+  if (first === -1) return html;
+  nextRegex.lastIndex = first + marker.length;
+  let match;
+  let open = 0,
+      close = 0;
+  while (match = nextRegex.exec(html)) {
+    if (match[0][1] === "/") {
+      close++;
+      if (close > open) break;
+    } else open++;
+  }
+  return html.slice(0, first) + value + html.slice(nextRegex.lastIndex);
 }
 function pipeToNodeWritable(code, writable, options = {}) {
   if (options.onReady) {
@@ -748,7 +783,7 @@ exports.renderToStringAsync = renderToStringAsync;
 exports.resolveSSRNode = resolveSSRNode;
 exports.spread = spread;
 exports.ssr = ssr;
-exports.ssrBoolean = ssrBoolean;
+exports.ssrAttribute = ssrAttribute;
 exports.ssrClassList = ssrClassList;
 exports.ssrHydrationKey = ssrHydrationKey;
 exports.ssrSpread = ssrSpread;

package/web/dist/server.js

@@ -266,8 +266,8 @@ function renderToStringAsync(code, options = {}) {
     nonce,
     writeResource(id, p, error) {
       if (error) return scripts += `_$HY.set("${id}", ${serializeError(p)});`;
-      if (!p || typeof p !== "object" || !("then" in p)) return scripts += serializeSet(dedupe, id, p);
-      p.then(d => scripts += serializeSet(dedupe, id, d)).catch(() => scripts += `_$HY.set("${id}", {});`);
+      if (!p || typeof p !== "object" || !("then" in p)) return (scripts += serializeSet(dedupe, id, p)) + ";";
+      p.then(d => scripts += serializeSet(dedupe, id, d) + ";").catch(() => scripts += `_$HY.set("${id}", {});`);
     }
   };
   const timeout = new Promise((_, reject) => setTimeout(() => reject("renderToString timed out"), timeoutMs));
@@ -315,6 +315,7 @@ function renderToStream(code, options = {}) {
   } = options;
   const tmp = [];
   const tasks = [];
+  const blockingResources = [];
   const registry = new Map();
   const dedupe = new WeakMap();
   const checkEnd = () => {
@@ -329,6 +330,13 @@ function renderToStream(code, options = {}) {
       completed = true;
     }
   };
+  const pushTask = task => {
+    tasks.push(task);
+    if (!scheduled) {
+      Promise.resolve().then(writeTasks);
+      scheduled = true;
+    }
+  };
   const writeTasks = () => {
     if (tasks.length && !completed) {
       buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${tasks.join(";")}</script>`);
@@ -337,6 +345,7 @@ function renderToStream(code, options = {}) {
     scheduled = false;
   };
   let writable;
+  let firstFlushed = false;
   let completed = false;
   let scriptFlushed = false;
   let scheduled = true;
@@ -354,45 +363,45 @@ function renderToStream(code, options = {}) {
     suspense: {},
     assets: [],
     nonce,
-    writeResource(id, p, error) {
-      if (!scheduled) {
-        Promise.resolve().then(writeTasks);
-        scheduled = true;
-      }
-      if (error) return tasks.push(`_$HY.set("${id}", ${serializeError(p)})`);
-      if (!p || typeof p !== "object" || !("then" in p)) return tasks.push(serializeSet(dedupe, id, p));
-      tasks.push(`_$HY.init("${id}")`);
+    writeResource(id, p, error, wait) {
+      if (error) return pushTask(`_$HY.set("${id}", ${serializeError(p)})`);
+      if (!p || typeof p !== "object" || !("then" in p)) return pushTask(serializeSet(dedupe, id, p));
+      if (wait && !firstFlushed) blockingResources.push(p);else pushTask(`_$HY.init("${id}")`);
       p.then(d => {
-        !completed && buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>${serializeSet(dedupe, id, d)}</script>`);
+        !completed && pushTask(serializeSet(dedupe, id, d));
       }).catch(() => {
-        !completed && buffer.write(`<script${nonce ? ` nonce="${nonce}"` : ""}>_$HY.set("${id}", {})</script>`);
+        !completed && pushTask(`_$HY.set("${id}", {})`);
       });
     },
     registerFragment(key) {
-      registry.set(key, []);
-      if (!scheduled) {
-        Promise.resolve().then(writeTasks);
-        scheduled = true;
+      if (!registry.has(key)) {
+        registry.set(key, []);
+        pushTask(`_$HY.init("${key}")`);
       }
-      tasks.push(`_$HY.init("${key}")`);
       return (value, error) => {
         if (registry.has(key)) {
           const keys = registry.get(key);
           registry.delete(key);
           if (waitForFragments(registry, key)) return;
           if ((value !== undefined || error) && !completed) {
-            buffer.write(`<div hidden id="${key}">${value !== undefined ? value : " "}</div><script${nonce ? ` nonce="${nonce}"` : ""}>${!scriptFlushed ? REPLACE_SCRIPT : ""}${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}$df("${key}"${error ? "," + serializeError(error) : ""})</script>`);
-            scriptFlushed = true;
+            if (!firstFlushed) {
+              Promise.resolve().then(() => html = replacePlaceholder(html, key, value !== undefined ? value : ""));
+              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}");`) : ""}_$HY.set("${key}",${error ? serializeError(error) : "null"})`);
+            } else {
+              buffer.write(`<div hidden id="${key}">${value !== undefined ? value : " "}</div>`);
+              pushTask(`${keys.length ? keys.map(k => `_$HY.unset("${k}")`).join(";") : ""}$df("${key}"${error ? "," + serializeError(error) : ""})${!scriptFlushed ? ";" + REPLACE_SCRIPT : ""}`);
+              scriptFlushed = true;
+            }
           }
         }
-        checkEnd();
+        if (firstFlushed) checkEnd();
         return true;
       };
     }
   };
   let html = resolveSSRNode(escape(code()));
-  html = injectAssets(sharedConfig.context.assets, html);
-  Promise.resolve().then(() => {
+  function doShell() {
+    html = injectAssets(sharedConfig.context.assets, html);
     if (tasks.length) html = injectScripts(html, tasks.join(";"), nonce);
     buffer.write(html);
     tasks.length = 0;
@@ -402,29 +411,37 @@ function renderToStream(code, options = {}) {
         !completed && buffer.write(v);
       }
     });
-  });
+  }
   return {
     pipe(w) {
-      buffer = writable = w;
-      tmp.forEach(chunk => buffer.write(chunk));
-      if (completed) writable.end();else setTimeout(checkEnd);
+      Promise.allSettled(blockingResources).then(() => {
+        doShell();
+        buffer = writable = w;
+        tmp.forEach(chunk => buffer.write(chunk));
+        firstFlushed = true;
+        if (completed) writable.end();else setTimeout(checkEnd);
+      });
     },
     pipeTo(w) {
-      const encoder = new TextEncoder();
-      const writer = w.getWriter();
-      writable = {
-        end() {
-          writer.releaseLock();
-          w.close();
-        }
-      };
-      buffer = {
-        write(payload) {
-          writer.write(encoder.encode(payload));
-        }
-      };
-      tmp.forEach(chunk => buffer.write(chunk));
-      if (completed) writable.end();else setTimeout(checkEnd);
+      Promise.allSettled(blockingResources).then(() => {
+        doShell();
+        const encoder = new TextEncoder();
+        const writer = w.getWriter();
+        writable = {
+          end() {
+            writer.releaseLock();
+            w.close();
+          }
+        };
+        buffer = {
+          write(payload) {
+            writer.write(encoder.encode(payload));
+          }
+        };
+        tmp.forEach(chunk => buffer.write(chunk));
+        firstFlushed = true;
+        if (completed) writable.end();else setTimeout(checkEnd);
+      });
     }
   };
 }
@@ -493,9 +510,10 @@ function ssrStyle(value) {
   return result;
 }
 function ssrSpread(props, isSVG, skipChildren) {
+  let result = "";
+  if (props == null) return results;
   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];
@@ -513,7 +531,7 @@ function ssrSpread(props, isSVG, skipChildren) {
       classResolved = true;
     } else if (BooleanAttributes.has(prop)) {
       if (value) result += prop;else continue;
-    } else if (prop === "ref" || prop.slice(0, 2) === "on") {
+    } else if (value == undefined || prop === "ref" || prop.slice(0, 2) === "on") {
       continue;
     } else {
       result += `${Aliases[prop] || prop}="${escape(value, true)}"`;
@@ -522,8 +540,8 @@ function ssrSpread(props, isSVG, skipChildren) {
   }
   return result;
 }
-function ssrBoolean(key, value) {
-  return value ? " " + key : "";
+function ssrAttribute(key, value, isBoolean) {
+  return isBoolean ? value ? " " + key : "" : value != null ? ` ${key}="${value}"` : "";
 }
 function ssrHydrationKey() {
   const hk = getHydrationKey();
@@ -634,9 +652,26 @@ function waitForFragments(registry, key) {
 }
 function serializeSet(registry, key, value) {
   const exist = registry.get(value);
-  if (exist) return `_$HY.set("${key}", _$HY.r["${exist}"][0]);`;
+  if (exist) return `_$HY.set("${key}", _$HY.r["${exist}"][0])`;
   value !== null && typeof value === "object" && registry.set(value, key);
-  return `_$HY.set("${key}", ${devalue(value)});`;
+  return `_$HY.set("${key}", ${devalue(value)})`;
+}
+function replacePlaceholder(html, key, value) {
+  const nextRegex = /(<[/]?span[^>]*>)/g;
+  const marker = `<span id="pl-${key}">`;
+  const first = html.indexOf(marker);
+  if (first === -1) return html;
+  nextRegex.lastIndex = first + marker.length;
+  let match;
+  let open = 0,
+      close = 0;
+  while (match = nextRegex.exec(html)) {
+    if (match[0][1] === "/") {
+      close++;
+      if (close > open) break;
+    } else open++;
+  }
+  return html.slice(0, first) + value + html.slice(nextRegex.lastIndex);
 }
 function pipeToNodeWritable(code, writable, options = {}) {
   if (options.onReady) {
@@ -688,4 +723,4 @@ function Portal(props) {
   return "";
 }
 
-export { Assets, Dynamic, HydrationScript, NoHydration, Portal, escape, generateHydrationScript, getHydrationKey, isServer, pipeToNodeWritable, pipeToWritable, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrBoolean, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle };
+export { Assets, Dynamic, HydrationScript, NoHydration, Portal, escape, generateHydrationScript, getHydrationKey, isServer, pipeToNodeWritable, pipeToWritable, renderToStream, renderToString, renderToStringAsync, resolveSSRNode, spread, ssr, ssrAttribute, ssrClassList, ssrHydrationKey, ssrSpread, ssrStyle };

package/web/dist/web.cjs

@@ -135,6 +135,9 @@ function setAttribute(node, name, value) {
 function setAttributeNS(node, namespace, name, value) {
   if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
 }
+function className(node, value) {
+  if (value == null) node.removeAttribute("class");else node.className = value;
+}
 function addEventListener(node, name, handler, delegate) {
   if (delegate) {
     if (Array.isArray(handler)) {
@@ -315,7 +318,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     addEventListener(node, name, value, delegate);
     delegate && delegateEvents([name]);
   } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
-    if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
+    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
@@ -635,6 +638,7 @@ exports.SVGNamespace = SVGNamespace;
 exports.addEventListener = addEventListener;
 exports.assign = assign;
 exports.classList = classList;
+exports.className = className;
 exports.clearDelegatedEvents = clearDelegatedEvents;
 exports.delegateEvents = delegateEvents;
 exports.dynamicProperty = dynamicProperty;

package/web/dist/web.js

@@ -132,6 +132,9 @@ function setAttribute(node, name, value) {
 function setAttributeNS(node, namespace, name, value) {
   if (value == null) node.removeAttributeNS(namespace, name);else node.setAttributeNS(namespace, name, value);
 }
+function className(node, value) {
+  if (value == null) node.removeAttribute("class");else node.className = value;
+}
 function addEventListener(node, name, handler, delegate) {
   if (delegate) {
     if (Array.isArray(handler)) {
@@ -312,7 +315,7 @@ function assignProp(node, prop, value, prev, isSVG, skipRef) {
     addEventListener(node, name, value, delegate);
     delegate && delegateEvents([name]);
   } else if ((isChildProp = ChildProperties.has(prop)) || !isSVG && (PropAliases[prop] || (isProp = Properties.has(prop))) || (isCE = node.nodeName.includes("-"))) {
-    if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
+    if (prop === "class" || prop === "className") className(node, value);else if (isCE && !isProp && !isChildProp) node[toPropertyName(prop)] = value;else node[PropAliases[prop] || prop] = value;
   } else {
     const ns = isSVG && prop.indexOf(":") > -1 && SVGNamespace[prop.split(":")[0]];
     if (ns) setAttributeNS(node, ns, prop, value);else setAttribute(node, Aliases[prop] || prop, value);
@@ -568,4 +571,4 @@ function Dynamic(props) {
   });
 }
 
-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 };
+export { Aliases, Assets, ChildProperties, DOMElements, DelegatedEvents, Dynamic, Assets as HydrationScript, NoHydration, Portal, PropAliases, Properties, SVGElements, SVGNamespace, addEventListener, assign, classList, className, 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

@@ -31,6 +31,7 @@ export function spread<T>(
 export function assign(node: Element, props: any, isSVG?: Boolean, skipChildren?: Boolean): void;
 export function setAttribute(node: Element, name: string, value: string): void;
 export function setAttributeNS(node: Element, namespace: string, name: string, value: string): void;
+export function className(node: Element, value: string): void;
 export function innerHTML(node: Element, content: string): void;
 export function addEventListener(
   node: Element,