marko 6.0.4 → 6.0.6

package/dist/dom.js

@@ -24,6 +24,8 @@ __export(dom_exports, {
   attrsEvents: () => attrsEvents,
   awaitTag: () => awaitTag,
   classAttr: () => classAttr,
+  classItem: () => classItem,
+  classItems: () => classItems,
   compat: () => compat,
   conditional: () => conditional,
   conditionalClosure: () => conditionalClosure,
@@ -76,6 +78,9 @@ __export(dom_exports, {
   setTagVarChange: () => setTagVarChange,
   state: () => state,
   styleAttr: () => styleAttr,
+  styleItem: () => styleItem,
+  styleItemValue: () => styleItemValue,
+  styleItems: () => styleItems,
   tagVarSignal: () => tagVarSignal,
   tagVarSignalChange: () => tagVarSignalChange,
   textContent: () => textContent,
@@ -114,39 +119,30 @@ function forTo(to, from, step, cb) {
 }
 
 // src/common/helpers.ts
-function classValue(value2) {
-  return toDelimitedString(value2, " ", stringifyClassObject);
+function classValue(classValue2) {
+  return toDelimitedString(classValue2, " ", stringifyClassObject);
 }
 function stringifyClassObject(name, value2) {
   return value2 ? name : "";
 }
-function styleValue(value2) {
-  return toDelimitedString(value2, ";", stringifyStyleObject);
+function styleValue(styleValue2) {
+  return toDelimitedString(styleValue2, ";", stringifyStyleObject);
 }
 function stringifyStyleObject(name, value2) {
-  return value2 || value2 === 0 ? `${name}:${typeof value2 == "number" && value2 && !/^(--|ta|or|li|z)|cou|nk|it|ag|we|do|w$/.test(name) ? value2 + "px" : value2}` : "";
+  return value2 || value2 === 0 ? `${name}:${value2 && typeof value2 == "number" && !/^(--|ta|or|li|z)|cou|nk|it|ag|we|do|w$/.test(name) ? value2 + "px" : value2}` : "";
 }
 function toDelimitedString(val, delimiter, stringify) {
-  switch (typeof val) {
-    case "string":
-      return val;
-    case "object":
-      if (val !== null) {
-        let result = "", curDelimiter = "";
-        if (Array.isArray(val))
-          for (let v of val) {
-            let part = toDelimitedString(v, delimiter, stringify);
-            part !== "" && (result += curDelimiter + part, curDelimiter = delimiter);
-          }
-        else
-          for (let name in val) {
-            let v = val[name], part = stringify(name, v);
-            part !== "" && (result += curDelimiter + part, curDelimiter = delimiter);
-          }
-        return result;
-      }
-  }
-  return "";
+  let str = "", sep = "", part;
+  if (val)
+    if (typeof val != "object")
+      str += val;
+    else if (Array.isArray(val))
+      for (let v of val)
+        part = toDelimitedString(v, delimiter, stringify), part && (str += sep + part, sep = delimiter);
+    else
+      for (let name in val)
+        part = stringify(name, val[name]), part && (str += sep + part, sep = delimiter);
+  return str;
 }
 function isEventHandler(name) {
   return /^on[A-Z-]/.test(name);
@@ -208,27 +204,20 @@ var DEFAULT_RUNTIME_ID = "M", DEFAULT_RENDER_ID = "_";
 // src/dom/resume.ts
 var registeredValues = {};
 function init(runtimeId = DEFAULT_RUNTIME_ID) {
-  let renders = window[runtimeId], defineRuntime = (desc) => Object.defineProperty(window, runtimeId, desc), resumeRender, initRuntime = (renders2) => {
+  let renders = self[runtimeId], defineRuntime = (desc) => Object.defineProperty(self, runtimeId, desc), resumeRender, initRuntime = (renders2) => {
     defineRuntime({
       value: resumeRender = (renderId) => {
         let render = resumeRender[renderId] = renders2[renderId] || renders2(renderId), walk2 = render.w, commentPrefixLen = render.i.length, branchStack = [], scopeLookup = render.s = {}, serializeContext = {
           _: registeredValues
-        }, branchIds = /* @__PURE__ */ new Set(), parentBranchIds = /* @__PURE__ */ new Map(), lastEffect, currentBranchId, $global, lastScopeId = 0;
+        }, branchIds = /* @__PURE__ */ new Set(), parentBranchIds = /* @__PURE__ */ new Map(), branchEnd = (branchId, reference) => {
+          let branch = scopeLookup[branchId] ||= {}, endNode = reference, prevNode;
+          for (; (prevNode = endNode.previousSibling) !== branch.h && ~visits.indexOf(endNode = prevNode); ) ;
+          return branch.j = lastEndNode = endNode === lastEndNode ? reference.parentNode.insertBefore(new Text(), reference) : endNode, branch.h ||= lastEndNode, branchIds.add(branchId), branch;
+        }, currentBranchId, $global, lastScopeId = 0, lastEffect, lastEndNode, visits, resumes;
         return render.w = () => {
-          walk2.call(render);
-          let visits = render.v, resumes = render.r;
-          if (visits.length) {
-            let visitNodes = new Set(visits), lastEndNode;
-            visits.length = 0;
-            let branchEnd = (branchId, reference) => {
-              let branch = scopeLookup[branchId] ||= {}, endNode = reference;
-              for (; endNode.previousSibling !== branch.h && visitNodes.has(endNode = endNode.previousSibling); ) ;
-              return endNode === lastEndNode && (endNode = reference.parentNode.insertBefore(
-                new Text(),
-                reference
-              )), branch.j = lastEndNode = endNode, branch.h ||= endNode, branchIds.add(branchId), branch;
-            };
-            for (let visit of visitNodes) {
+          try {
+            walk2(), isResuming = 1;
+            for (let visit of visits = render.v) {
               let commentText = visit.data, dataIndex = commentText.indexOf(" ") + 1, scopeId = +commentText.slice(
                 commentPrefixLen + 1,
                 dataIndex ? dataIndex - 1 : commentText.length
@@ -260,41 +249,37 @@ function init(runtimeId = DEFAULT_RUNTIME_ID) {
                 }
               }
             }
-          }
-          if (resumes)
-            try {
-              render.r = [], isResuming = 1;
-              for (let i = 0; i < resumes.length; i++) {
-                let serialized = resumes[i];
-                if (typeof serialized == "function")
-                  for (let scope of serialized(serializeContext))
-                    if (!$global)
-                      $global = scope || {}, $global.runtimeId = runtimeId, $global.renderId = renderId, $global.o = 1e6;
-                    else if (typeof scope == "number")
-                      lastScopeId += scope;
-                    else {
-                      let scopeId = ++lastScopeId, prevScope = scopeLookup[scopeId];
-                      scope.$global = $global, scope.m = scopeId, prevScope !== scope && (scopeLookup[scopeId] = Object.assign(
-                        scope,
-                        prevScope
+            for (let serialized of resumes = render.r || [])
+              if (typeof serialized == "string")
+                lastEffect = serialized;
+              else if (typeof serialized == "number")
+                registeredValues[lastEffect](
+                  scopeLookup[serialized],
+                  scopeLookup[serialized]
+                );
+              else
+                for (let scope of serialized(serializeContext))
+                  if (!$global)
+                    $global = scope || {}, $global.runtimeId = runtimeId, $global.renderId = renderId, $global.o = 1e6;
+                  else if (typeof scope == "number")
+                    lastScopeId += scope;
+                  else {
+                    let scopeId = ++lastScopeId, prevScope = scopeLookup[scopeId];
+                    scope.$global = $global, scope.m = scopeId, prevScope !== scope && (scopeLookup[scopeId] = Object.assign(
+                      scope,
+                      prevScope
+                    ));
+                    let parentBranchId = scope.g || parentBranchIds.get(scopeId);
+                    if (parentBranchId && (scope.k = scopeLookup[parentBranchId]), branchIds.has(scopeId)) {
+                      let branch = scope, parentBranch = branch.k;
+                      scope.k = branch, parentBranch && (branch.t = parentBranch, (parentBranch.z ||= /* @__PURE__ */ new Set()).add(
+                        branch
                       ));
-                      let parentBranchId = scope.g || parentBranchIds.get(scopeId);
-                      if (parentBranchId && (scope.k = scopeLookup[parentBranchId]), branchIds.has(scopeId)) {
-                        let branch = scope, parentBranch = branch.k;
-                        scope.k = branch, parentBranch && (branch.t = parentBranch, (parentBranch.z ||= /* @__PURE__ */ new Set()).add(
-                          branch
-                        ));
-                      }
                     }
-                else
-                  typeof serialized == "string" && (lastEffect = serialized, serialized = resumes[++i]), registeredValues[lastEffect](
-                    scopeLookup[serialized],
-                    scopeLookup[serialized]
-                  );
-              }
-            } finally {
-              isResuming = 0;
-            }
+                  }
+          } finally {
+            isResuming = visits.length = resumes.length = 0;
+          }
         }, render;
       }
     });
@@ -526,9 +511,26 @@ function setAttribute(element, name, value2) {
 function classAttr(element, value2) {
   setAttribute(element, "class", classValue(value2) || void 0);
 }
+function classItems(element, items) {
+  for (let key in items)
+    classItem(element, key, items[key]);
+}
+function classItem(element, name, value2) {
+  element.classList.toggle(name, !!value2);
+}
 function styleAttr(element, value2) {
   setAttribute(element, "style", styleValue(value2) || void 0);
 }
+function styleItems(element, items) {
+  for (let key in items)
+    styleItem(element, key, items[key]);
+}
+function styleItem(element, name, value2) {
+  element.style.setProperty(name, value2 || value2 === 0 ? value2 + "" : "");
+}
+function styleItemValue(value2) {
+  return value2 && typeof value2 == "number" ? value2 + "px" : value2;
+}
 function data(node, value2) {
   let normalizedValue = normalizeString(value2);
   node.data !== normalizedValue && (node.data = normalizedValue);
@@ -708,7 +710,6 @@ function toInsertNode(startNode, endNode) {
 }
 
 // src/dom/scope.ts
-var pendingScopes = [];
 function createScope($global, closestBranch) {
   let scope = {
     m: $global.o++,
@@ -721,11 +722,6 @@ function createScope($global, closestBranch) {
 function skipScope(scope) {
   return scope.$global.o++;
 }
-function finishPendingScopes() {
-  for (let scope of pendingScopes)
-    scope.p = 0;
-  pendingScopes = [];
-}
 function findBranchWithKey(scope, key) {
   let branch = scope.k;
   for (; branch && !branch[key]; )
@@ -951,12 +947,7 @@ function createCloneableHTML(html2, ns) {
 }
 
 // src/dom/schedule.ts
-var port2 = /* @__PURE__ */ (() => {
-  let { port1, port2: port22 } = new MessageChannel();
-  return port1.onmessage = () => {
-    isScheduled = 0, run();
-  }, port22;
-})(), isScheduled;
+var isScheduled, channel;
 function schedule() {
   isScheduled || (isScheduled = 1, queueMicrotask(flushAndWaitFrame));
 }
@@ -964,7 +955,9 @@ function flushAndWaitFrame() {
   run(), requestAnimationFrame(triggerMacroTask);
 }
 function triggerMacroTask() {
-  port2.postMessage(0);
+  channel || (channel = new MessageChannel(), channel.port1.onmessage = () => {
+    isScheduled = 0, run();
+  }), channel.port2.postMessage(0);
 }
 
 // src/dom/signals.ts
@@ -1313,7 +1306,7 @@ function byFirstArg(name) {
 }
 
 // src/dom/queue.ts
-var pendingRenders = [], pendingRendersLookup = /* @__PURE__ */ new Map(), caughtError = /* @__PURE__ */ new WeakSet(), placeholderShown = /* @__PURE__ */ new WeakSet(), pendingEffects = [], rendering, scopeKeyOffset = 1e3;
+var pendingRenders = [], pendingRendersLookup = /* @__PURE__ */ new Map(), caughtError = /* @__PURE__ */ new WeakSet(), placeholderShown = /* @__PURE__ */ new WeakSet(), pendingEffects = [], pendingScopes = [], rendering, scopeKeyOffset = 1e3;
 function queueRender(scope, signal, signalKey, value2, scopeKey = scope.m) {
   let key = scopeKey * scopeKeyOffset + signalKey, existingRender = signalKey >= 0 && pendingRendersLookup.get(key);
   if (existingRender)
@@ -1377,7 +1370,9 @@ function runRenders() {
     }
     render.D.k?.A || runRender(render);
   }
-  finishPendingScopes();
+  for (let scope of pendingScopes)
+    scope.p = 0;
+  pendingScopes = [];
 }
 var runRender = (render) => render.L(render.D, render.I), enableCatch = () => {
   enableCatch = () => {
@@ -1453,7 +1448,7 @@ var classIdToBranch = /* @__PURE__ */ new Map(), compat = {
   }) {
     return Array.isArray(value2) && typeof value2[0] == "string" ? getRegisteredWithScope(
       value2[0],
-      value2.length === 2 && window[runtimeId]?.[componentIdPrefix === "s" ? "_" : componentIdPrefix]?.s[value2[1]]
+      value2.length === 2 && self[runtimeId]?.[componentIdPrefix === "s" ? "_" : componentIdPrefix]?.s[value2[1]]
     ) : value2;
   },
   createRenderer(params, clone) {

package/dist/dom.mjs

@@ -29,39 +29,30 @@ function forTo(to, from, step, cb) {
 }
 
 // src/common/helpers.ts
-function classValue(value2) {
-  return toDelimitedString(value2, " ", stringifyClassObject);
+function classValue(classValue2) {
+  return toDelimitedString(classValue2, " ", stringifyClassObject);
 }
 function stringifyClassObject(name, value2) {
   return value2 ? name : "";
 }
-function styleValue(value2) {
-  return toDelimitedString(value2, ";", stringifyStyleObject);
+function styleValue(styleValue2) {
+  return toDelimitedString(styleValue2, ";", stringifyStyleObject);
 }
 function stringifyStyleObject(name, value2) {
-  return value2 || value2 === 0 ? `${name}:${typeof value2 == "number" && value2 && !/^(--|ta|or|li|z)|cou|nk|it|ag|we|do|w$/.test(name) ? value2 + "px" : value2}` : "";
+  return value2 || value2 === 0 ? `${name}:${value2 && typeof value2 == "number" && !/^(--|ta|or|li|z)|cou|nk|it|ag|we|do|w$/.test(name) ? value2 + "px" : value2}` : "";
 }
 function toDelimitedString(val, delimiter, stringify) {
-  switch (typeof val) {
-    case "string":
-      return val;
-    case "object":
-      if (val !== null) {
-        let result = "", curDelimiter = "";
-        if (Array.isArray(val))
-          for (let v of val) {
-            let part = toDelimitedString(v, delimiter, stringify);
-            part !== "" && (result += curDelimiter + part, curDelimiter = delimiter);
-          }
-        else
-          for (let name in val) {
-            let v = val[name], part = stringify(name, v);
-            part !== "" && (result += curDelimiter + part, curDelimiter = delimiter);
-          }
-        return result;
-      }
-  }
-  return "";
+  let str = "", sep = "", part;
+  if (val)
+    if (typeof val != "object")
+      str += val;
+    else if (Array.isArray(val))
+      for (let v of val)
+        part = toDelimitedString(v, delimiter, stringify), part && (str += sep + part, sep = delimiter);
+    else
+      for (let name in val)
+        part = stringify(name, val[name]), part && (str += sep + part, sep = delimiter);
+  return str;
 }
 function isEventHandler(name) {
   return /^on[A-Z-]/.test(name);
@@ -123,27 +114,20 @@ var DEFAULT_RUNTIME_ID = "M", DEFAULT_RENDER_ID = "_";
 // src/dom/resume.ts
 var registeredValues = {};
 function init(runtimeId = DEFAULT_RUNTIME_ID) {
-  let renders = window[runtimeId], defineRuntime = (desc) => Object.defineProperty(window, runtimeId, desc), resumeRender, initRuntime = (renders2) => {
+  let renders = self[runtimeId], defineRuntime = (desc) => Object.defineProperty(self, runtimeId, desc), resumeRender, initRuntime = (renders2) => {
     defineRuntime({
       value: resumeRender = (renderId) => {
         let render = resumeRender[renderId] = renders2[renderId] || renders2(renderId), walk2 = render.w, commentPrefixLen = render.i.length, branchStack = [], scopeLookup = render.s = {}, serializeContext = {
           _: registeredValues
-        }, branchIds = /* @__PURE__ */ new Set(), parentBranchIds = /* @__PURE__ */ new Map(), lastEffect, currentBranchId, $global, lastScopeId = 0;
+        }, branchIds = /* @__PURE__ */ new Set(), parentBranchIds = /* @__PURE__ */ new Map(), branchEnd = (branchId, reference) => {
+          let branch = scopeLookup[branchId] ||= {}, endNode = reference, prevNode;
+          for (; (prevNode = endNode.previousSibling) !== branch.h && ~visits.indexOf(endNode = prevNode); ) ;
+          return branch.j = lastEndNode = endNode === lastEndNode ? reference.parentNode.insertBefore(new Text(), reference) : endNode, branch.h ||= lastEndNode, branchIds.add(branchId), branch;
+        }, currentBranchId, $global, lastScopeId = 0, lastEffect, lastEndNode, visits, resumes;
         return render.w = () => {
-          walk2.call(render);
-          let visits = render.v, resumes = render.r;
-          if (visits.length) {
-            let visitNodes = new Set(visits), lastEndNode;
-            visits.length = 0;
-            let branchEnd = (branchId, reference) => {
-              let branch = scopeLookup[branchId] ||= {}, endNode = reference;
-              for (; endNode.previousSibling !== branch.h && visitNodes.has(endNode = endNode.previousSibling); ) ;
-              return endNode === lastEndNode && (endNode = reference.parentNode.insertBefore(
-                new Text(),
-                reference
-              )), branch.j = lastEndNode = endNode, branch.h ||= endNode, branchIds.add(branchId), branch;
-            };
-            for (let visit of visitNodes) {
+          try {
+            walk2(), isResuming = 1;
+            for (let visit of visits = render.v) {
               let commentText = visit.data, dataIndex = commentText.indexOf(" ") + 1, scopeId = +commentText.slice(
                 commentPrefixLen + 1,
                 dataIndex ? dataIndex - 1 : commentText.length
@@ -175,41 +159,37 @@ function init(runtimeId = DEFAULT_RUNTIME_ID) {
                 }
               }
             }
-          }
-          if (resumes)
-            try {
-              render.r = [], isResuming = 1;
-              for (let i = 0; i < resumes.length; i++) {
-                let serialized = resumes[i];
-                if (typeof serialized == "function")
-                  for (let scope of serialized(serializeContext))
-                    if (!$global)
-                      $global = scope || {}, $global.runtimeId = runtimeId, $global.renderId = renderId, $global.o = 1e6;
-                    else if (typeof scope == "number")
-                      lastScopeId += scope;
-                    else {
-                      let scopeId = ++lastScopeId, prevScope = scopeLookup[scopeId];
-                      scope.$global = $global, scope.m = scopeId, prevScope !== scope && (scopeLookup[scopeId] = Object.assign(
-                        scope,
-                        prevScope
+            for (let serialized of resumes = render.r || [])
+              if (typeof serialized == "string")
+                lastEffect = serialized;
+              else if (typeof serialized == "number")
+                registeredValues[lastEffect](
+                  scopeLookup[serialized],
+                  scopeLookup[serialized]
+                );
+              else
+                for (let scope of serialized(serializeContext))
+                  if (!$global)
+                    $global = scope || {}, $global.runtimeId = runtimeId, $global.renderId = renderId, $global.o = 1e6;
+                  else if (typeof scope == "number")
+                    lastScopeId += scope;
+                  else {
+                    let scopeId = ++lastScopeId, prevScope = scopeLookup[scopeId];
+                    scope.$global = $global, scope.m = scopeId, prevScope !== scope && (scopeLookup[scopeId] = Object.assign(
+                      scope,
+                      prevScope
+                    ));
+                    let parentBranchId = scope.g || parentBranchIds.get(scopeId);
+                    if (parentBranchId && (scope.k = scopeLookup[parentBranchId]), branchIds.has(scopeId)) {
+                      let branch = scope, parentBranch = branch.k;
+                      scope.k = branch, parentBranch && (branch.t = parentBranch, (parentBranch.z ||= /* @__PURE__ */ new Set()).add(
+                        branch
                       ));
-                      let parentBranchId = scope.g || parentBranchIds.get(scopeId);
-                      if (parentBranchId && (scope.k = scopeLookup[parentBranchId]), branchIds.has(scopeId)) {
-                        let branch = scope, parentBranch = branch.k;
-                        scope.k = branch, parentBranch && (branch.t = parentBranch, (parentBranch.z ||= /* @__PURE__ */ new Set()).add(
-                          branch
-                        ));
-                      }
                     }
-                else
-                  typeof serialized == "string" && (lastEffect = serialized, serialized = resumes[++i]), registeredValues[lastEffect](
-                    scopeLookup[serialized],
-                    scopeLookup[serialized]
-                  );
-              }
-            } finally {
-              isResuming = 0;
-            }
+                  }
+          } finally {
+            isResuming = visits.length = resumes.length = 0;
+          }
         }, render;
       }
     });
@@ -441,9 +421,26 @@ function setAttribute(element, name, value2) {
 function classAttr(element, value2) {
   setAttribute(element, "class", classValue(value2) || void 0);
 }
+function classItems(element, items) {
+  for (let key in items)
+    classItem(element, key, items[key]);
+}
+function classItem(element, name, value2) {
+  element.classList.toggle(name, !!value2);
+}
 function styleAttr(element, value2) {
   setAttribute(element, "style", styleValue(value2) || void 0);
 }
+function styleItems(element, items) {
+  for (let key in items)
+    styleItem(element, key, items[key]);
+}
+function styleItem(element, name, value2) {
+  element.style.setProperty(name, value2 || value2 === 0 ? value2 + "" : "");
+}
+function styleItemValue(value2) {
+  return value2 && typeof value2 == "number" ? value2 + "px" : value2;
+}
 function data(node, value2) {
   let normalizedValue = normalizeString(value2);
   node.data !== normalizedValue && (node.data = normalizedValue);
@@ -623,7 +620,6 @@ function toInsertNode(startNode, endNode) {
 }
 
 // src/dom/scope.ts
-var pendingScopes = [];
 function createScope($global, closestBranch) {
   let scope = {
     m: $global.o++,
@@ -636,11 +632,6 @@ function createScope($global, closestBranch) {
 function skipScope(scope) {
   return scope.$global.o++;
 }
-function finishPendingScopes() {
-  for (let scope of pendingScopes)
-    scope.p = 0;
-  pendingScopes = [];
-}
 function findBranchWithKey(scope, key) {
   let branch = scope.k;
   for (; branch && !branch[key]; )
@@ -866,12 +857,7 @@ function createCloneableHTML(html2, ns) {
 }
 
 // src/dom/schedule.ts
-var port2 = /* @__PURE__ */ (() => {
-  let { port1, port2: port22 } = new MessageChannel();
-  return port1.onmessage = () => {
-    isScheduled = 0, run();
-  }, port22;
-})(), isScheduled;
+var isScheduled, channel;
 function schedule() {
   isScheduled || (isScheduled = 1, queueMicrotask(flushAndWaitFrame));
 }
@@ -879,7 +865,9 @@ function flushAndWaitFrame() {
   run(), requestAnimationFrame(triggerMacroTask);
 }
 function triggerMacroTask() {
-  port2.postMessage(0);
+  channel || (channel = new MessageChannel(), channel.port1.onmessage = () => {
+    isScheduled = 0, run();
+  }), channel.port2.postMessage(0);
 }
 
 // src/dom/signals.ts
@@ -1228,7 +1216,7 @@ function byFirstArg(name) {
 }
 
 // src/dom/queue.ts
-var pendingRenders = [], pendingRendersLookup = /* @__PURE__ */ new Map(), caughtError = /* @__PURE__ */ new WeakSet(), placeholderShown = /* @__PURE__ */ new WeakSet(), pendingEffects = [], rendering, scopeKeyOffset = 1e3;
+var pendingRenders = [], pendingRendersLookup = /* @__PURE__ */ new Map(), caughtError = /* @__PURE__ */ new WeakSet(), placeholderShown = /* @__PURE__ */ new WeakSet(), pendingEffects = [], pendingScopes = [], rendering, scopeKeyOffset = 1e3;
 function queueRender(scope, signal, signalKey, value2, scopeKey = scope.m) {
   let key = scopeKey * scopeKeyOffset + signalKey, existingRender = signalKey >= 0 && pendingRendersLookup.get(key);
   if (existingRender)
@@ -1292,7 +1280,9 @@ function runRenders() {
     }
     render.D.k?.A || runRender(render);
   }
-  finishPendingScopes();
+  for (let scope of pendingScopes)
+    scope.p = 0;
+  pendingScopes = [];
 }
 var runRender = (render) => render.L(render.D, render.I), enableCatch = () => {
   enableCatch = () => {
@@ -1368,7 +1358,7 @@ var classIdToBranch = /* @__PURE__ */ new Map(), compat = {
   }) {
     return Array.isArray(value2) && typeof value2[0] == "string" ? getRegisteredWithScope(
       value2[0],
-      value2.length === 2 && window[runtimeId]?.[componentIdPrefix === "s" ? "_" : componentIdPrefix]?.s[value2[1]]
+      value2.length === 2 && self[runtimeId]?.[componentIdPrefix === "s" ? "_" : componentIdPrefix]?.s[value2[1]]
     ) : value2;
   },
   createRenderer(params, clone) {
@@ -1466,6 +1456,8 @@ export {
   attrsEvents,
   awaitTag,
   classAttr,
+  classItem,
+  classItems,
   compat,
   conditional,
   conditionalClosure,
@@ -1518,6 +1510,9 @@ export {
   setTagVarChange,
   state,
   styleAttr,
+  styleItem,
+  styleItemValue,
+  styleItems,
   tagVarSignal,
   tagVarSignalChange,
   textContent,

package/dist/html.js

@@ -93,39 +93,30 @@ function* attrTagIterator() {
 }
 
 // src/common/helpers.ts
-function classValue(value) {
-  return toDelimitedString(value, " ", stringifyClassObject);
+function classValue(classValue2) {
+  return toDelimitedString(classValue2, " ", stringifyClassObject);
 }
 function stringifyClassObject(name, value) {
   return value ? name : "";
 }
-function styleValue(value) {
-  return toDelimitedString(value, ";", stringifyStyleObject);
+function styleValue(styleValue2) {
+  return toDelimitedString(styleValue2, ";", stringifyStyleObject);
 }
 function stringifyStyleObject(name, value) {
-  return value || value === 0 ? `${name}:${typeof value == "number" && value && !/^(--|ta|or|li|z)|cou|nk|it|ag|we|do|w$/.test(name) ? value + "px" : value}` : "";
+  return value || value === 0 ? `${name}:${value && typeof value == "number" && !/^(--|ta|or|li|z)|cou|nk|it|ag|we|do|w$/.test(name) ? value + "px" : value}` : "";
 }
 function toDelimitedString(val, delimiter, stringify) {
-  switch (typeof val) {
-    case "string":
-      return val;
-    case "object":
-      if (val !== null) {
-        let result = "", curDelimiter = "";
-        if (Array.isArray(val))
-          for (let v of val) {
-            let part = toDelimitedString(v, delimiter, stringify);
-            part !== "" && (result += curDelimiter + part, curDelimiter = delimiter);
-          }
-        else
-          for (let name in val) {
-            let v = val[name], part = stringify(name, v);
-            part !== "" && (result += curDelimiter + part, curDelimiter = delimiter);
-          }
-        return result;
-      }
-  }
-  return "";
+  let str = "", sep = "", part;
+  if (val)
+    if (typeof val != "object")
+      str += val;
+    else if (Array.isArray(val))
+      for (let v of val)
+        part = toDelimitedString(v, delimiter, stringify), part && (str += sep + part, sep = delimiter);
+    else
+      for (let name in val)
+        part = stringify(name, val[name]), part && (str += sep + part, sep = delimiter);
+  return str;
 }
 function isEventHandler(name) {
   return /^on[A-Z-]/.test(name);
@@ -190,7 +181,7 @@ function forToBy(by, index) {
 }
 
 // src/html/inlined-runtimes.ts
-var WALKER_RUNTIME_CODE = '(e=>(self[e]=(l,t=e+l,d=t.length,f={},s=[],x=document,a=x.createTreeWalker(x,129))=>self[e][l]={i:t,d:x,l:f,v:s,x(){},w(e,l,x){for(;e=a.nextNode();)this.x(l=(l=e.data)&&!l.indexOf(t)&&(f[x=l.slice(d+1)]=e,l[d]),x,e),l>"#"&&s.push(e)}},self[e]))', REORDER_RUNTIME_CODE = '(e=>{let i,l,t,r={},c=(e,i)=>{e.replaceWith(...i.childNodes),i.remove()};e.d.head.append(e.d.querySelector("style["+e.i+"]")||""),e.j={},e.x=(d,o,n,a,g)=>{"#"==d?(r[o]=l).i++:n==t&&i(),"T"==n.tagName&&(o=n.getAttribute(e.i))&&((a=e.l["^"+o])&&(r[o]={i:1,c(i=e.l[o]||n){for(;(t=i.previousSibling||a).remove(),a!=t;);c(i,n)}}),t=n.nextSibling,l=r[o],i=()=>{a||c(e.l[o],n),--l.i||l.c()},(d=e.j[o])&&(g=l.c,l.c=()=>g()+d(e.r)))}})';
+var WALKER_RUNTIME_CODE = '(e=>(self[e]=(l,d=e+l,f=d.length,o={},n=[],s=document,t=s.createTreeWalker(s,129))=>s=self[e][l]={i:d,d:s,l:o,v:n,x(){},w(e,l,x){for(;e=t.nextNode();)s.x(l=(l=e.data)&&!l.indexOf(d)&&(o[x=l.slice(f+1)]=e,l[f]),x,e),l>"#"&&n.push(e)}},self[e]))', REORDER_RUNTIME_CODE = '(e=>{let i,l,t,r={},c=(e,i)=>{e.replaceWith(...i.childNodes),i.remove()};e.d.head.append(e.d.querySelector("style["+e.i+"]")||""),e.j={},e.x=(d,o,n,a,g)=>{"#"==d?(r[o]=l).i++:n==t&&i(),"T"==n.tagName&&(o=n.getAttribute(e.i))&&((a=e.l["^"+o])&&(r[o]={i:1,c(i=e.l[o]||n){for(;(t=i.previousSibling||a).remove(),a!=t;);c(i,n)}}),t=n.nextSibling,l=r[o],i=()=>{a||c(e.l[o],n),--l.i||l.c()},(d=e.j[o])&&(g=l.c,l.c=()=>g()+d(e.r)))}})';
 
 // src/html/serializer.ts
 var kTouchedIterator = Symbol(), { hasOwnProperty } = {}, Generator = function* () {