marko 6.0.4 → 6.0.5

package/dist/translator/index.js

@@ -999,48 +999,44 @@ var import_babel_utils8 = require("@marko/compiler/babel-utils");
 var rest = false ? Symbol("Attribute Tag") : Symbol();
 
 // src/common/helpers.ts
-function classValue(value) {
-  return toDelimitedString(value, " ", stringifyClassObject);
+function classValue(classValue2) {
+  return toDelimitedString(classValue2, " ", stringifyClassObject);
 }
 function stringifyClassObject(name2, value) {
   return value ? name2 : "";
 }
-function styleValue(value) {
-  return toDelimitedString(value, ";", stringifyStyleObject);
+function styleValue(styleValue2) {
+  return toDelimitedString(styleValue2, ";", stringifyStyleObject);
 }
 function stringifyStyleObject(name2, value) {
-  return value || value === 0 ? `${name2}:${typeof value === "number" && value && !/^(--|ta|or|li|z)|cou|nk|it|ag|we|do|w$/.test(name2) ? value + "px" : value}` : "";
+  return value || value === 0 ? `${name2}:${value && typeof value === "number" && !/^(--|ta|or|li|z)|cou|nk|it|ag|we|do|w$/.test(name2) ? value + "px" : value}` : "";
 }
 function toDelimitedString(val, delimiter, stringify) {
-  switch (typeof val) {
-    case "string":
-      return val;
-    case "object":
-      if (val !== null) {
-        let result = "";
-        let curDelimiter = "";
-        if (Array.isArray(val)) {
-          for (const v of val) {
-            const part = toDelimitedString(v, delimiter, stringify);
-            if (part !== "") {
-              result += curDelimiter + part;
-              curDelimiter = delimiter;
-            }
-          }
-        } else {
-          for (const name2 in val) {
-            const v = val[name2];
-            const part = stringify(name2, v);
-            if (part !== "") {
-              result += curDelimiter + part;
-              curDelimiter = delimiter;
-            }
-          }
+  let str = "";
+  let sep = "";
+  let part;
+  if (val) {
+    if (typeof val !== "object") {
+      str += val;
+    } else if (Array.isArray(val)) {
+      for (const v of val) {
+        part = toDelimitedString(v, delimiter, stringify);
+        if (part) {
+          str += sep + part;
+          sep = delimiter;
+        }
+      }
+    } else {
+      for (const name2 in val) {
+        part = stringify(name2, val[name2]);
+        if (part) {
+          str += sep + part;
+          sep = delimiter;
         }
-        return result;
       }
+    }
   }
-  return "";
+  return str;
 }
 function isEventHandler(name2) {
   return /^on[A-Z-]/.test(name2);
@@ -5627,78 +5623,70 @@ var import_babel_utils24 = require("@marko/compiler/babel-utils");
 // src/translator/visitors/tag/native-tag.ts
 var import_compiler31 = require("@marko/compiler");
 var import_babel_utils23 = require("@marko/compiler/babel-utils");
+
+// src/translator/util/css-px-props.ts
+var css_px_props_default = /* @__PURE__ */ new Set([
+  "background-size",
+  "baseline-shift",
+  "border-bottom-left-radius",
+  "border-bottom-right-radius",
+  "border-bottom-width",
+  "border-left-width",
+  "border-right-width",
+  "border-top-left-radius",
+  "border-top-right-radius",
+  "border-top-width",
+  "bottom",
+  "column-gap",
+  "column-rule-width",
+  "column-width",
+  "cx",
+  "cy",
+  "flex-basis",
+  "font-size",
+  "grid-auto-columns",
+  "grid-auto-rows",
+  "height",
+  "left",
+  "letter-spacing",
+  "margin-bottom",
+  "margin-left",
+  "margin-right",
+  "margin-top",
+  "max-height",
+  "max-width",
+  "min-height",
+  "min-width",
+  "offset-distance",
+  "outline-offset",
+  "outline-width",
+  "padding-bottom",
+  "padding-left",
+  "padding-right",
+  "padding-top",
+  "perspective",
+  "r",
+  "right",
+  "row-gap",
+  "rx",
+  "ry",
+  "shape-margin",
+  "stroke-dashoffset",
+  "stroke-width",
+  "text-indent",
+  "top",
+  "vertical-align",
+  "width",
+  "word-spacing",
+  "x",
+  "y"
+]);
+
+// src/translator/visitors/tag/native-tag.ts
 var kNativeTagBinding = Symbol("native tag binding");
 var kSkipMark = Symbol("skip native tag mark");
 var kGetterId = Symbol("node getter id");
 var htmlSelectArgs = /* @__PURE__ */ new WeakMap();
-function assertExclusiveControllableGroups(tag, attrs2) {
-  const exclusiveGroups = [
-    attrs2.open || attrs2.openChange,
-    attrs2.checked || attrs2.checkedChange,
-    attrs2.checkedValue || attrs2.checkedValueChange,
-    attrs2.valueChange
-  ].filter(Boolean);
-  if (exclusiveGroups.length > 1) {
-    throw tag.get("name").buildCodeFrameError(
-      `The attributes ${exclusiveGroups.map((attr2) => `"${attr2.name}"`).join(", ")} are mutually exclusive.`
-    );
-  }
-}
-function getRelatedControllable(tagName, attrs2) {
-  switch (tagName) {
-    case "input":
-      if (attrs2.checked || attrs2.checkedChange) {
-        return {
-          special: false,
-          helper: "controllable_input_checked",
-          attrs: [attrs2.checked, attrs2.checkedChange]
-        };
-      }
-      if (attrs2.checkedValue || attrs2.checkedValueChange) {
-        return {
-          special: true,
-          helper: "controllable_input_checkedValue",
-          attrs: [attrs2.checkedValue, attrs2.checkedValueChange, attrs2.value]
-        };
-      }
-      if (attrs2.value || attrs2.valueChange) {
-        return {
-          special: false,
-          helper: "controllable_input_value",
-          attrs: [attrs2.value, attrs2.valueChange]
-        };
-      }
-      break;
-    case "select":
-      if (attrs2.value || attrs2.valueChange) {
-        return {
-          special: true,
-          helper: "controllable_select_value",
-          attrs: [attrs2.value, attrs2.valueChange]
-        };
-      }
-      break;
-    case "textarea":
-      if (attrs2.value || attrs2.valueChange) {
-        return {
-          special: true,
-          helper: "controllable_textarea_value",
-          attrs: [attrs2.value, attrs2.valueChange]
-        };
-      }
-      break;
-    case "details":
-    case "dialog":
-      if (attrs2.open || attrs2.openChange) {
-        return {
-          special: false,
-          helper: "controllable_detailsOrDialog_open",
-          attrs: [attrs2.open, attrs2.openChange]
-        };
-      }
-      break;
-  }
-}
 var native_tag_default = {
   transform: {
     enter(tag) {
@@ -5840,24 +5828,20 @@ var native_tag_default = {
       }
     }
   },
-  translate: {
-    enter(tag) {
-      const tagName = getTagName(tag);
-      const tagExtra = tag.node.extra;
-      const nodeBinding = tagExtra[kNativeTagBinding];
-      const isHTML = isOutputHTML();
-      const name2 = tag.get("name");
-      const tagDef = (0, import_babel_utils23.getTagDef)(tag);
-      const write2 = writeTo(tag);
-      const tagSection = getSection(tag);
-      if (isHTML && tagExtra.tagNameNullable) {
-        flushBefore(tag);
-      }
-      if (tag.has("var")) {
-        const varName = tag.node.var.name;
-        const varBinding = tag.scope.getBinding(varName);
-        const getterId = tagExtra[kGetterId];
-        if (isHTML) {
+  translate: translateByTarget({
+    html: {
+      enter(tag) {
+        const tagName = getTagName(tag);
+        const tagExtra = tag.node.extra;
+        const nodeBinding = tagExtra[kNativeTagBinding];
+        const tagDef = (0, import_babel_utils23.getTagDef)(tag);
+        const write2 = writeTo(tag);
+        const tagSection = getSection(tag);
+        if (tagExtra.tagNameNullable) {
+          flushBefore(tag);
+        }
+        if (tag.node.var) {
+          const getterId = tagExtra[kGetterId];
           translateVar(
             tag,
             callRuntime(
@@ -5866,96 +5850,21 @@ var native_tag_default = {
               getterId && import_compiler31.types.stringLiteral(getterId)
             )
           );
-        } else {
-          let getterFnIdentifier;
-          if (getterId) {
-            getterFnIdentifier = generateUidIdentifier(`get_${varName}`);
-            (0, import_babel_utils23.getProgram)().node.body.push(
-              import_compiler31.types.variableDeclaration("const", [
-                import_compiler31.types.variableDeclarator(
-                  getterFnIdentifier,
-                  callRuntime(
-                    "nodeRef",
-                    import_compiler31.types.stringLiteral(getterId),
-                    import_compiler31.types.stringLiteral(
-                      getAccessorPrefix().Getter + getScopeAccessorLiteral(nodeBinding).value
-                    )
-                  )
-                )
-              ])
-            );
-          }
-          for (const reference of varBinding.referencePaths) {
-            const referenceSection = getSection(reference);
-            if (isSameOrChildSection(tagSection, referenceSection)) {
-              if (isInvokedFunction(reference)) {
-                reference.parentPath.replaceWith(
-                  import_compiler31.types.expressionStatement(
-                    createScopeReadExpression(referenceSection, nodeBinding)
-                  )
-                );
-              } else if (getterFnIdentifier) {
-                reference.replaceWith(
-                  import_compiler31.types.callExpression(getterFnIdentifier, [
-                    getScopeExpression(referenceSection, getSection(tag))
-                  ])
-                );
-              } else {
-                reference.replaceWith(
-                  import_compiler31.types.expressionStatement(
-                    import_compiler31.types.memberExpression(
-                      getScopeExpression(tagSection, referenceSection),
-                      import_compiler31.types.stringLiteral(
-                        getAccessorPrefix().Getter + getScopeAccessorLiteral(nodeBinding).value
-                      ),
-                      true
-                    )
-                  )
-                );
-              }
-            }
-          }
         }
-      }
-      const visitAccessor = nodeBinding && getScopeAccessorLiteral(nodeBinding);
-      if (visitAccessor) {
-        visit(tag, 32 /* Get */);
-      }
-      write2`<${name2.node}`;
-      const usedAttrs = getUsedAttrs(tagName, tag.node);
-      const { staticAttrs, staticControllable, skipExpression } = usedAttrs;
-      let { spreadExpression } = usedAttrs;
-      if (staticControllable) {
-        const { helper, attrs: attrs2 } = staticControllable;
-        const firstAttr = attrs2.find(Boolean);
-        const referencedBindings = firstAttr.value.extra?.referencedBindings;
-        const values = attrs2.map((attr2) => attr2?.value);
-        if (isHTML) {
+        const visitAccessor = nodeBinding && getScopeAccessorLiteral(nodeBinding);
+        write2`<${tag.node.name}`;
+        const usedAttrs = getUsedAttrs(tagName, tag.node);
+        const { staticAttrs, staticControllable, skipExpression } = usedAttrs;
+        let { spreadExpression } = usedAttrs;
+        if (staticControllable) {
+          const { helper, attrs: attrs2 } = staticControllable;
           if (tagName !== "select" && tagName !== "textarea") {
+            const values = attrs2.map((attr2) => attr2?.value);
             write2`${callRuntime(helper, getScopeIdIdentifier(tagSection), visitAccessor, ...values)}`;
           }
           addHTMLEffectCall(tagSection, void 0);
-        } else {
-          addStatement(
-            "render",
-            tagSection,
-            referencedBindings,
-            import_compiler31.types.expressionStatement(
-              callRuntime(helper, scopeIdentifier, visitAccessor, ...values)
-            )
-          );
-          addStatement(
-            "effect",
-            tagSection,
-            void 0,
-            import_compiler31.types.expressionStatement(
-              callRuntime(`${helper}_effect`, scopeIdentifier, visitAccessor)
-            )
-          );
         }
-      }
-      let writeAtStartOfBody;
-      if (isHTML) {
+        let writeAtStartOfBody;
         if (tagName === "select") {
           if (staticControllable) {
             htmlSelectArgs.set(tag.node, {
@@ -6011,89 +5920,313 @@ var native_tag_default = {
             );
           }
         }
-      }
-      for (const attr2 of staticAttrs) {
-        const { name: name3, value } = attr2;
-        const { confident, computed } = value.extra || {};
-        const valueReferences = value.extra?.referencedBindings;
-        if (isHTML && tagName === "option" && name3 === "value") {
-          write2`${callRuntime("optionValueAttr", value)}`;
-          continue;
-        }
-        switch (name3) {
-          case "class":
-          case "style": {
-            const helper = `${name3}Attr`;
-            if (confident) {
-              write2`${getHTMLRuntime()[helper](computed)}`;
-            } else if (isHTML) {
-              write2`${callRuntime(helper, value)}`;
-            } else {
-              addStatement(
-                "render",
-                tagSection,
-                valueReferences,
-                import_compiler31.types.expressionStatement(
-                  callRuntime(
-                    helper,
-                    import_compiler31.types.memberExpression(scopeIdentifier, visitAccessor, true),
-                    value
-                  )
-                )
-              );
-            }
-            break;
+        for (const attr2 of staticAttrs) {
+          const { name: name2, value } = attr2;
+          const { confident, computed } = value.extra || {};
+          const valueReferences = value.extra?.referencedBindings;
+          if (tagName === "option" && name2 === "value") {
+            write2`${callRuntime("optionValueAttr", value)}`;
+            continue;
           }
-          default:
-            if (confident) {
-              write2`${getHTMLRuntime().attr(name3, computed)}`;
-            } else if (isHTML) {
-              if (isEventHandler(name3)) {
+          switch (name2) {
+            case "class":
+            case "style": {
+              const helper = `${name2}Attr`;
+              if (confident) {
+                write2`${getHTMLRuntime()[helper](computed)}`;
+              } else {
+                write2`${callRuntime(helper, value)}`;
+              }
+              break;
+            }
+            default:
+              if (confident) {
+                write2`${getHTMLRuntime().attr(name2, computed)}`;
+              } else if (isEventHandler(name2)) {
                 addHTMLEffectCall(tagSection, valueReferences);
               } else {
-                write2`${callRuntime("attr", import_compiler31.types.stringLiteral(name3), value)}`;
+                write2`${callRuntime("attr", import_compiler31.types.stringLiteral(name2), value)}`;
               }
-            } else if (isEventHandler(name3)) {
-              addStatement(
-                "effect",
-                tagSection,
-                valueReferences,
-                import_compiler31.types.expressionStatement(
-                  callRuntime(
-                    "on",
-                    import_compiler31.types.memberExpression(scopeIdentifier, visitAccessor, true),
-                    import_compiler31.types.stringLiteral(getEventHandlerName(name3)),
-                    value
-                  )
+              break;
+          }
+        }
+        if (spreadExpression) {
+          addHTMLEffectCall(tagSection, tagExtra.referencedBindings);
+          if (skipExpression) {
+            write2`${callRuntime("partialAttrs", spreadExpression, skipExpression, visitAccessor, getScopeIdIdentifier(tagSection), tag.node.name)}`;
+          } else {
+            write2`${callRuntime("attrs", spreadExpression, visitAccessor, getScopeIdIdentifier(tagSection), tag.node.name)}`;
+          }
+        }
+        if (tagDef && tagDef.parseOptions?.openTagOnly) {
+          switch (tagDef.htmlType) {
+            case "svg":
+            case "math":
+              write2`/>`;
+              break;
+            default:
+              write2`>`;
+              break;
+          }
+        } else {
+          write2`>`;
+        }
+        if (tagExtra.tagNameNullable) {
+          tag.insertBefore(
+            import_compiler31.types.ifStatement(tag.node.name, consumeHTML(tag))
+          )[0].skip();
+        }
+        if (writeAtStartOfBody) {
+          write2`${writeAtStartOfBody}`;
+        }
+      },
+      exit(tag) {
+        const tagExtra = tag.node.extra;
+        const nodeBinding = tagExtra[kNativeTagBinding];
+        const openTagOnly = (0, import_babel_utils23.getTagDef)(tag)?.parseOptions?.openTagOnly;
+        const selectArgs = htmlSelectArgs.get(tag.node);
+        const tagName = getTagName(tag);
+        const tagSection = getSection(tag);
+        if (tagExtra.tagNameNullable) {
+          flushInto(tag);
+        }
+        if (selectArgs) {
+          writeTo(tag)`</${tag.node.name}>`;
+          flushInto(tag);
+          tag.insertBefore(
+            import_compiler31.types.expressionStatement(
+              callRuntime(
+                "controllable_select_value",
+                getScopeIdIdentifier(getSection(tag)),
+                getScopeAccessorLiteral(nodeBinding),
+                selectArgs.value,
+                selectArgs.valueChange,
+                import_compiler31.types.arrowFunctionExpression(
+                  [],
+                  import_compiler31.types.blockStatement(tag.node.body.body)
                 )
-              );
-            } else {
-              addStatement(
-                "render",
-                tagSection,
-                valueReferences,
-                import_compiler31.types.expressionStatement(
+              )
+            )
+          );
+        } else {
+          tag.insertBefore(tag.node.body.body).forEach((child) => child.skip());
+        }
+        const markerSerializeReason = nodeBinding && !tagExtra[kSkipMark] && getBindingSerializeReason(tagSection, nodeBinding);
+        if (!openTagOnly && !selectArgs) {
+          writeTo(
+            tag,
+            !markerSerializeReason && (tagName === "html" || tagName === "body")
+          )`</${tag.node.name}>`;
+        }
+        if (tagExtra.tagNameNullable) {
+          tag.insertBefore(
+            import_compiler31.types.ifStatement(tag.node.name, consumeHTML(tag))
+          )[0].skip();
+        }
+        if (markerSerializeReason) {
+          markNode(tag, nodeBinding, markerSerializeReason);
+        }
+        tag.remove();
+      }
+    },
+    dom: {
+      enter(tag) {
+        const tagName = getTagName(tag);
+        const tagExtra = tag.node.extra;
+        const nodeBinding = tagExtra[kNativeTagBinding];
+        const tagDef = (0, import_babel_utils23.getTagDef)(tag);
+        const write2 = writeTo(tag);
+        const tagSection = getSection(tag);
+        if (tag.node.var) {
+          const varName = tag.node.var.name;
+          const varBinding = tag.scope.getBinding(varName);
+          const getterId = tagExtra[kGetterId];
+          let getterFnIdentifier;
+          if (getterId) {
+            getterFnIdentifier = generateUidIdentifier(`get_${varName}`);
+            (0, import_babel_utils23.getProgram)().node.body.push(
+              import_compiler31.types.variableDeclaration("const", [
+                import_compiler31.types.variableDeclarator(
+                  getterFnIdentifier,
                   callRuntime(
-                    "attr",
-                    import_compiler31.types.memberExpression(scopeIdentifier, visitAccessor, true),
-                    import_compiler31.types.stringLiteral(name3),
-                    value
+                    "nodeRef",
+                    import_compiler31.types.stringLiteral(getterId),
+                    import_compiler31.types.stringLiteral(
+                      getAccessorPrefix().Getter + getScopeAccessorLiteral(nodeBinding).value
+                    )
                   )
                 )
-              );
+              ])
+            );
+          }
+          for (const reference of varBinding.referencePaths) {
+            const referenceSection = getSection(reference);
+            if (isSameOrChildSection(tagSection, referenceSection)) {
+              if (isInvokedFunction(reference)) {
+                reference.parentPath.replaceWith(
+                  import_compiler31.types.expressionStatement(
+                    createScopeReadExpression(referenceSection, nodeBinding)
+                  )
+                );
+              } else if (getterFnIdentifier) {
+                reference.replaceWith(
+                  import_compiler31.types.callExpression(getterFnIdentifier, [
+                    getScopeExpression(referenceSection, getSection(tag))
+                  ])
+                );
+              } else {
+                reference.replaceWith(
+                  import_compiler31.types.expressionStatement(
+                    import_compiler31.types.memberExpression(
+                      getScopeExpression(tagSection, referenceSection),
+                      import_compiler31.types.stringLiteral(
+                        getAccessorPrefix().Getter + getScopeAccessorLiteral(nodeBinding).value
+                      ),
+                      true
+                    )
+                  )
+                );
+              }
             }
-            break;
+          }
         }
-      }
-      if (spreadExpression) {
-        if (isHTML) {
-          addHTMLEffectCall(tagSection, tagExtra.referencedBindings);
-          if (skipExpression) {
-            write2`${callRuntime("partialAttrs", spreadExpression, skipExpression, visitAccessor, getScopeIdIdentifier(tagSection), name2.node)}`;
-          } else {
-            write2`${callRuntime("attrs", spreadExpression, visitAccessor, getScopeIdIdentifier(tagSection), name2.node)}`;
+        const visitAccessor = nodeBinding && getScopeAccessorLiteral(nodeBinding);
+        if (visitAccessor) {
+          visit(tag, 32 /* Get */);
+        }
+        write2`<${tag.node.name}`;
+        const usedAttrs = getUsedAttrs(tagName, tag.node);
+        const { staticAttrs, staticControllable, skipExpression } = usedAttrs;
+        const { spreadExpression } = usedAttrs;
+        if (staticControllable) {
+          const { helper, attrs: attrs2 } = staticControllable;
+          const firstAttr = attrs2.find(Boolean);
+          const referencedBindings = firstAttr.value.extra?.referencedBindings;
+          const values = attrs2.map((attr2) => attr2?.value);
+          addStatement(
+            "render",
+            tagSection,
+            referencedBindings,
+            import_compiler31.types.expressionStatement(
+              callRuntime(helper, scopeIdentifier, visitAccessor, ...values)
+            )
+          );
+          addStatement(
+            "effect",
+            tagSection,
+            void 0,
+            import_compiler31.types.expressionStatement(
+              callRuntime(`${helper}_effect`, scopeIdentifier, visitAccessor)
+            )
+          );
+        }
+        for (const attr2 of staticAttrs) {
+          const { name: name2, value } = attr2;
+          const { confident, computed } = value.extra || {};
+          const valueReferences = value.extra?.referencedBindings;
+          switch (name2) {
+            case "class":
+            case "style": {
+              const helper = `${name2}Attr`;
+              if (confident) {
+                write2`${getHTMLRuntime()[helper](computed)}`;
+              } else {
+                const nodeExpr = import_compiler31.types.memberExpression(
+                  scopeIdentifier,
+                  visitAccessor,
+                  true
+                );
+                const meta = {
+                  staticItems: void 0,
+                  dynamicItems: void 0,
+                  dynamicValues: void 0
+                };
+                let stmt;
+                trackDelimitedAttrValue(value, meta);
+                if (meta.dynamicItems) {
+                  stmt = import_compiler31.types.expressionStatement(
+                    callRuntime(helper, nodeExpr, value)
+                  );
+                } else {
+                  if (meta.staticItems) {
+                    write2`${getHTMLRuntime()[helper](computed)}`;
+                  }
+                  if (meta.dynamicValues) {
+                    const keys = Object.keys(meta.dynamicValues);
+                    if (keys.length === 1) {
+                      const [key] = keys;
+                      const value2 = meta.dynamicValues[key];
+                      stmt = import_compiler31.types.expressionStatement(
+                        callRuntime(
+                          `${name2}Item`,
+                          nodeExpr,
+                          import_compiler31.types.stringLiteral(key),
+                          name2 === "style" && css_px_props_default.has(name2) ? callRuntime("styleItemValue", value2) : value2
+                        )
+                      );
+                    } else {
+                      const props = [];
+                      for (const key of keys) {
+                        const value2 = meta.dynamicValues[key];
+                        props.push(
+                          import_compiler31.types.objectProperty(
+                            toPropertyName(key),
+                            name2 === "style" && css_px_props_default.has(name2) ? callRuntime("styleItemValue", value2) : value2
+                          )
+                        );
+                      }
+                      stmt = import_compiler31.types.expressionStatement(
+                        callRuntime(
+                          `${name2}Items`,
+                          nodeExpr,
+                          import_compiler31.types.objectExpression(props)
+                        )
+                      );
+                    }
+                  }
+                }
+                if (stmt) {
+                  addStatement("render", tagSection, valueReferences, stmt);
+                }
+              }
+              break;
+            }
+            default:
+              if (confident) {
+                write2`${getHTMLRuntime().attr(name2, computed)}`;
+              } else if (isEventHandler(name2)) {
+                addStatement(
+                  "effect",
+                  tagSection,
+                  valueReferences,
+                  import_compiler31.types.expressionStatement(
+                    callRuntime(
+                      "on",
+                      import_compiler31.types.memberExpression(scopeIdentifier, visitAccessor, true),
+                      import_compiler31.types.stringLiteral(getEventHandlerName(name2)),
+                      value
+                    )
+                  )
+                );
+              } else {
+                addStatement(
+                  "render",
+                  tagSection,
+                  valueReferences,
+                  import_compiler31.types.expressionStatement(
+                    callRuntime(
+                      "attr",
+                      import_compiler31.types.memberExpression(scopeIdentifier, visitAccessor, true),
+                      import_compiler31.types.stringLiteral(name2),
+                      value
+                    )
+                  )
+                );
+              }
+              break;
           }
-        } else {
+        }
+        if (spreadExpression) {
           if (skipExpression) {
             addStatement(
               "render",
@@ -6134,80 +6267,101 @@ var native_tag_default = {
             false
           );
         }
-      }
-      if (tagDef && tagDef.parseOptions?.openTagOnly) {
-        switch (tagDef.htmlType) {
-          case "svg":
-          case "math":
-            write2`/>`;
-            break;
-          default:
-            write2`>`;
-            break;
+        if (tagDef && tagDef.parseOptions?.openTagOnly) {
+          switch (tagDef.htmlType) {
+            case "svg":
+            case "math":
+              write2`/>`;
+              break;
+            default:
+              write2`>`;
+              break;
+          }
+        } else {
+          write2`>`;
         }
-      } else {
-        write2`>`;
-      }
-      if (isHTML && tagExtra.tagNameNullable) {
-        tag.insertBefore(import_compiler31.types.ifStatement(name2.node, consumeHTML(tag)))[0].skip();
+        enter2(tag);
+      },
+      exit(tag) {
+        const openTagOnly = (0, import_babel_utils23.getTagDef)(tag)?.parseOptions?.openTagOnly;
+        tag.insertBefore(tag.node.body.body).forEach((child) => child.skip());
+        if (!openTagOnly) {
+          writeTo(tag)`</${tag.node.name}>`;
+        }
+        exit2(tag);
+        tag.remove();
       }
-      if (writeAtStartOfBody) {
-        write2`${writeAtStartOfBody}`;
+    }
+  })
+};
+function assertExclusiveControllableGroups(tag, attrs2) {
+  const exclusiveGroups = [
+    attrs2.open || attrs2.openChange,
+    attrs2.checked || attrs2.checkedChange,
+    attrs2.checkedValue || attrs2.checkedValueChange,
+    attrs2.valueChange
+  ].filter(Boolean);
+  if (exclusiveGroups.length > 1) {
+    throw tag.get("name").buildCodeFrameError(
+      `The attributes ${exclusiveGroups.map((attr2) => `"${attr2.name}"`).join(", ")} are mutually exclusive.`
+    );
+  }
+}
+function getRelatedControllable(tagName, attrs2) {
+  switch (tagName) {
+    case "input":
+      if (attrs2.checked || attrs2.checkedChange) {
+        return {
+          special: false,
+          helper: "controllable_input_checked",
+          attrs: [attrs2.checked, attrs2.checkedChange]
+        };
       }
-      enter2(tag);
-    },
-    exit(tag) {
-      const tagExtra = tag.node.extra;
-      const nodeBinding = tagExtra[kNativeTagBinding];
-      const isHTML = isOutputHTML();
-      const openTagOnly = (0, import_babel_utils23.getTagDef)(tag)?.parseOptions?.openTagOnly;
-      const selectArgs = isHTML && htmlSelectArgs.get(tag.node);
-      const tagName = getTagName(tag);
-      const tagSection = getSection(tag);
-      if (isHTML && tagExtra.tagNameNullable) {
-        flushInto(tag);
+      if (attrs2.checkedValue || attrs2.checkedValueChange) {
+        return {
+          special: true,
+          helper: "controllable_input_checkedValue",
+          attrs: [attrs2.checkedValue, attrs2.checkedValueChange, attrs2.value]
+        };
       }
-      if (selectArgs) {
-        writeTo(tag)`</${tag.node.name}>`;
-        flushInto(tag);
-        tag.insertBefore(
-          import_compiler31.types.expressionStatement(
-            callRuntime(
-              "controllable_select_value",
-              getScopeIdIdentifier(getSection(tag)),
-              getScopeAccessorLiteral(nodeBinding),
-              selectArgs.value,
-              selectArgs.valueChange,
-              import_compiler31.types.arrowFunctionExpression(
-                [],
-                import_compiler31.types.blockStatement(tag.node.body.body)
-              )
-            )
-          )
-        );
-      } else {
-        tag.insertBefore(tag.node.body.body).forEach((child) => child.skip());
+      if (attrs2.value || attrs2.valueChange) {
+        return {
+          special: false,
+          helper: "controllable_input_value",
+          attrs: [attrs2.value, attrs2.valueChange]
+        };
       }
-      const markerSerializeReason = nodeBinding && !tagExtra[kSkipMark] && getBindingSerializeReason(tagSection, nodeBinding);
-      if (!openTagOnly && !selectArgs) {
-        writeTo(
-          tag,
-          isHTML && !markerSerializeReason && (tagName === "html" || tagName === "body")
-        )`</${tag.node.name}>`;
+      break;
+    case "select":
+      if (attrs2.value || attrs2.valueChange) {
+        return {
+          special: true,
+          helper: "controllable_select_value",
+          attrs: [attrs2.value, attrs2.valueChange]
+        };
       }
-      if (isHTML && tagExtra.tagNameNullable) {
-        tag.insertBefore(
-          import_compiler31.types.ifStatement(tag.node.name, consumeHTML(tag))
-        )[0].skip();
+      break;
+    case "textarea":
+      if (attrs2.value || attrs2.valueChange) {
+        return {
+          special: true,
+          helper: "controllable_textarea_value",
+          attrs: [attrs2.value, attrs2.valueChange]
+        };
       }
-      if (markerSerializeReason) {
-        markNode(tag, nodeBinding, markerSerializeReason);
+      break;
+    case "details":
+    case "dialog":
+      if (attrs2.open || attrs2.openChange) {
+        return {
+          special: false,
+          helper: "controllable_detailsOrDialog_open",
+          attrs: [attrs2.open, attrs2.openChange]
+        };
       }
-      exit2(tag);
-      tag.remove();
-    }
+      break;
   }
-};
+}
 function getUsedAttrs(tagName, tag) {
   const seen = {};
   const { attributes } = tag;
@@ -6284,6 +6438,86 @@ function getUsedAttrs(tagName, tag) {
     skipExpression
   };
 }
+function trackDelimitedAttrValue(expr, meta) {
+  switch (expr.type) {
+    case "ObjectExpression":
+      trackDelimitedAttrObjectProperties(expr, meta);
+      break;
+    case "ArrayExpression":
+      trackDelimitedAttrArrayItems(expr, meta);
+      break;
+    default:
+      (meta.dynamicItems ||= []).push(expr);
+      break;
+  }
+}
+function trackDelimitedAttrArrayItems(arr, meta) {
+  for (const item of arr.elements) {
+    if (item) {
+      switch (item.type) {
+        case "ArrayExpression": {
+          trackDelimitedAttrArrayItems(item, meta);
+          break;
+        }
+        case "ObjectExpression": {
+          trackDelimitedAttrObjectProperties(item, meta);
+          break;
+        }
+        case "SpreadElement":
+          if (item.argument.type === "ArrayExpression") {
+            trackDelimitedAttrArrayItems(item.argument, meta);
+          } else {
+            (meta.dynamicItems ||= []).push(item);
+          }
+          break;
+        default: {
+          const evalItem = evaluate(item);
+          if (evalItem.confident) {
+            (meta.staticItems ||= []).push(evalItem.computed);
+          } else {
+            (meta.dynamicItems ||= []).push(item);
+          }
+          break;
+        }
+      }
+    }
+  }
+}
+function trackDelimitedAttrObjectProperties(obj, meta) {
+  let staticProps;
+  let dynamicProps;
+  for (const prop of obj.properties) {
+    if (prop.type !== "ObjectProperty" || prop.computed) {
+      (dynamicProps ||= []).push(prop);
+      continue;
+    }
+    let key;
+    if (prop.key.type === "Identifier") {
+      key = prop.key.name;
+    } else {
+      const keyEval = evaluate(prop.key);
+      if (keyEval.confident) {
+        key = keyEval.computed + "";
+      } else {
+        (dynamicProps ||= []).push(prop);
+        continue;
+      }
+    }
+    const value = prop.value;
+    const propEval = evaluate(value);
+    if (propEval.confident) {
+      (staticProps ||= {})[key] = propEval.computed;
+    } else {
+      (meta.dynamicValues ||= {})[key] = value;
+    }
+  }
+  if (staticProps) {
+    (meta.staticItems ||= []).push(staticProps);
+  }
+  if (dynamicProps) {
+    (meta.dynamicItems ||= []).push(import_compiler31.types.objectExpression(dynamicProps));
+  }
+}
 function isChangeHandler(propName) {
   return /^(?:value|checked(?:Value)?|open)Change/.test(propName);
 }