npm - @vue/compiler-vapor - Versions diffs - 0.0.0 → 3.6.0-alpha.2 - Mend

@vue/compiler-vapor 0.0.0 → 3.6.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/compiler-vapor.cjs.js +929 -833
package/dist/compiler-vapor.d.ts +32 -17
package/dist/compiler-vapor.esm-browser.js +23564 -11265
package/package.json +7 -5

package/dist/compiler-vapor.cjs.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /**
-* @vue/compiler-vapor v3.5.13
+* @vue/compiler-vapor v3.6.0-alpha.2
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -10,8 +10,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var compilerDom = require('@vue/compiler-dom');
 var shared = require('@vue/shared');
 var sourceMapJs = require('source-map-js');
-var estreeWalker = require('estree-walker');
 var parser = require('@babel/parser');
+var types = require('@babel/types');
+var estreeWalker = require('estree-walker');
 const newDynamic = () => ({
   flags: 1,
@@ -24,7 +25,7 @@ const newBlock = (node) => ({
   effect: [],
   operation: [],
   returns: [],
-  expressions: []
+  tempId: 0
 });
 function wrapTemplate(node, dirs) {
   if (node.tagType === 3) {
@@ -60,6 +61,15 @@ function propToExpression(prop) {
 function isConstantExpression(exp) {
   return compilerDom.isLiteralWhitelisted(exp.content) || shared.isGloballyAllowed(exp.content) || getLiteralExpressionValue(exp) !== null;
 }
+function isStaticExpression(node, bindings) {
+  if (node.ast) {
+    return compilerDom.isConstantNode(node.ast, bindings);
+  } else if (node.ast === null) {
+    const type = bindings[node.content];
+    return type === "literal-const";
+  }
+  return false;
+}
 function resolveExpression(exp) {
   if (!exp.isStatic) {
     const value = getLiteralExpressionValue(exp);
@@ -84,6 +94,7 @@ class TransformContext {
   constructor(ir, node, options = {}) {
     this.ir = ir;
     this.node = node;
+    this.selfName = null;
     this.parent = null;
     this.index = 0;
     this.block = this.ir.block;
@@ -100,6 +111,7 @@ class TransformContext {
     this.increaseId = () => this.globalId++;
     this.options = shared.extend({}, defaultOptions, options);
     this.root = this;
+    if (options.filename) this.selfName = compilerDom.getSelfName(options.filename);
   }
   enterBlock(ir, isVFor = false) {
     const { block, template, dynamic, childrenTemplate, slots } = this;
@@ -120,7 +132,7 @@ class TransformContext {
     };
   }
   reference() {
-    if (this.dynamic.id !== undefined) return this.dynamic.id;
+    if (this.dynamic.id !== void 0) return this.dynamic.id;
     this.dynamic.flags |= 1;
     return this.dynamic.id = this.increaseId();
   }
@@ -137,27 +149,18 @@ class TransformContext {
     const id = this.pushTemplate(this.template);
     return this.dynamic.template = id;
   }
-  registerEffect(expressions, ...operations) {
+  registerEffect(expressions, operation, getIndex = () => this.block.effect.length) {
+    const operations = [operation].flat();
     expressions = expressions.filter((exp) => !isConstantExpression(exp));
-    if (this.inVOnce || expressions.length === 0 || isStaticExpression(this.root, expressions)) {
+    if (this.inVOnce || expressions.length === 0 || expressions.every(
+      (e) => isStaticExpression(e, this.root.options.bindingMetadata)
+    )) {
       return this.registerOperation(...operations);
     }
-    this.block.expressions.push(...expressions);
-    const existing = this.block.effect.find(
-      (e) => isSameExpression(e.expressions, expressions)
-    );
-    if (existing) {
-      existing.operations.push(...operations);
-    } else {
-      this.block.effect.push({
-        expressions,
-        operations
-      });
-    }
-    function isSameExpression(a, b) {
-      if (a.length !== b.length) return false;
-      return a.every((exp, i) => exp.content === b[i].content);
-    }
+    this.block.effect.splice(getIndex(), 0, {
+      expressions,
+      operations
+    });
   }
   registerOperation(...node) {
     this.block.operation.push(...node);
@@ -262,19 +265,6 @@ function createStructuralDirectiveTransform(name, fn) {
     }
   };
 }
-function isStaticExpression(context, expressions) {
-  const {
-    options: { bindingMetadata }
-  } = context;
-  const isLiteralConst = (name) => bindingMetadata[name] === "literal-const";
-  return expressions.every((node) => {
-    if (node.ast) {
-      return compilerDom.isConstantNode(node.ast, isLiteralConst);
-    } else if (node.ast === null) {
-      return isLiteralConst(node.content);
-    }
-  });
-}
 const NEWLINE = Symbol(`newline` );
 const LF = Symbol(`line feed` );
@@ -395,6 +385,78 @@ ${`  `.repeat(indentLevel)}`, 0];
   }
 }
+const IRDynamicPropsKind = {
+  "EXPRESSION": 0,
+  "0": "EXPRESSION",
+  "ATTRIBUTE": 1,
+  "1": "ATTRIBUTE"
+};
+const IRSlotType = {
+  "STATIC": 0,
+  "0": "STATIC",
+  "DYNAMIC": 1,
+  "1": "DYNAMIC",
+  "LOOP": 2,
+  "2": "LOOP",
+  "CONDITIONAL": 3,
+  "3": "CONDITIONAL",
+  "EXPRESSION": 4,
+  "4": "EXPRESSION"
+};
+const IRNodeTypes = {
+  "ROOT": 0,
+  "0": "ROOT",
+  "BLOCK": 1,
+  "1": "BLOCK",
+  "SET_PROP": 2,
+  "2": "SET_PROP",
+  "SET_DYNAMIC_PROPS": 3,
+  "3": "SET_DYNAMIC_PROPS",
+  "SET_TEXT": 4,
+  "4": "SET_TEXT",
+  "SET_EVENT": 5,
+  "5": "SET_EVENT",
+  "SET_DYNAMIC_EVENTS": 6,
+  "6": "SET_DYNAMIC_EVENTS",
+  "SET_HTML": 7,
+  "7": "SET_HTML",
+  "SET_TEMPLATE_REF": 8,
+  "8": "SET_TEMPLATE_REF",
+  "INSERT_NODE": 9,
+  "9": "INSERT_NODE",
+  "PREPEND_NODE": 10,
+  "10": "PREPEND_NODE",
+  "CREATE_COMPONENT_NODE": 11,
+  "11": "CREATE_COMPONENT_NODE",
+  "SLOT_OUTLET_NODE": 12,
+  "12": "SLOT_OUTLET_NODE",
+  "DIRECTIVE": 13,
+  "13": "DIRECTIVE",
+  "DECLARE_OLD_REF": 14,
+  "14": "DECLARE_OLD_REF",
+  "IF": 15,
+  "15": "IF",
+  "FOR": 16,
+  "16": "FOR",
+  "GET_TEXT_CHILD": 17,
+  "17": "GET_TEXT_CHILD"
+};
+const DynamicFlag = {
+  "NONE": 0,
+  "0": "NONE",
+  "REFERENCED": 1,
+  "1": "REFERENCED",
+  "NON_TEMPLATE": 2,
+  "2": "NON_TEMPLATE",
+  "INSERT": 4,
+  "4": "INSERT"
+};
+function isBlockOperation(op) {
+  const type = op.type;
+  return type === 11 || type === 12 || type === 15 || type === 16;
+}
 function genInsertNode({ parent, elements, anchor }, { helper }) {
   let element = elements.map((el) => `n${el}`).join(", ");
   if (elements.length > 1) element = `[${element}]`;
@@ -404,7 +466,7 @@ function genInsertNode({ parent, elements, anchor }, { helper }) {
       helper("insert"),
       element,
       `n${parent}`,
-      anchor === undefined ? undefined : `n${anchor}`
+      anchor === void 0 ? void 0 : `n${anchor}`
     )
   ];
 }
@@ -446,12 +508,15 @@ function genExpression(node, context, assignment) {
   let hasMemberExpression = false;
   if (ids.length) {
     const [frag, push] = buildCodeFragment();
+    const isTSNode = ast && compilerDom.TS_NODE_TYPES.includes(ast.type);
     ids.sort((a, b) => a.start - b.start).forEach((id, i) => {
       const start = id.start - 1;
       const end = id.end - 1;
       const last = ids[i - 1];
-      const leadingText = content.slice(last ? last.end - 1 : 0, start);
-      if (leadingText.length) push([leadingText, -3]);
+      if (!(isTSNode && i === 0)) {
+        const leadingText = content.slice(last ? last.end - 1 : 0, start);
+        if (leadingText.length) push([leadingText, -3]);
+      }
       const source = content.slice(start, end);
       const parentStack2 = parentStackMap.get(id);
       const parent = parentStack2[parentStack2.length - 1];
@@ -465,13 +530,13 @@ function genExpression(node, context, assignment) {
             end: compilerDom.advancePositionWithClone(node.loc.start, source, end),
             source
           },
-          hasMemberExpression ? undefined : assignment,
+          hasMemberExpression ? void 0 : assignment,
           id,
           parent,
           parentStack2
         )
       );
-      if (i === ids.length - 1 && end < content.length) {
+      if (i === ids.length - 1 && end < content.length && !isTSNode) {
         push([content.slice(end), -3]);
       }
     });
@@ -491,7 +556,11 @@ function genIdentifier(raw, context, loc, assignment, id, parent, parentStack) {
   if (idMap && idMap.length) {
     const replacement = idMap[0];
     if (shared.isString(replacement)) {
-      return [[replacement, -2, loc]];
+      if (parent && parent.type === "ObjectProperty" && parent.shorthand) {
+        return [[`${name}: ${replacement}`, -2, loc]];
+      } else {
+        return [[replacement, -2, loc]];
+      }
     } else {
       return genExpression(replacement, context, assignment);
     }
@@ -553,72 +622,118 @@ function canPrefix(name) {
     return false;
   return true;
 }
-function processExpressions(context, expressions) {
-  const { seenVariable, variableToExpMap, expToVariableMap, seenIdentifier } = analyzeExpressions(expressions);
+function processExpressions(context, expressions, shouldDeclare) {
+  const {
+    seenVariable,
+    variableToExpMap,
+    expToVariableMap,
+    seenIdentifier,
+    updatedVariable
+  } = analyzeExpressions(expressions);
   const varDeclarations = processRepeatedVariables(
     context,
     seenVariable,
     variableToExpMap,
     expToVariableMap,
-    seenIdentifier
+    seenIdentifier,
+    updatedVariable
   );
   const expDeclarations = processRepeatedExpressions(
     context,
     expressions,
-    varDeclarations
+    varDeclarations,
+    updatedVariable,
+    expToVariableMap
+  );
+  return genDeclarations(
+    [...varDeclarations, ...expDeclarations],
+    context,
+    shouldDeclare
   );
-  return genDeclarations([...varDeclarations, ...expDeclarations], context);
 }
 function analyzeExpressions(expressions) {
   const seenVariable = /* @__PURE__ */ Object.create(null);
   const variableToExpMap = /* @__PURE__ */ new Map();
   const expToVariableMap = /* @__PURE__ */ new Map();
   const seenIdentifier = /* @__PURE__ */ new Set();
-  const registerVariable = (name, exp, isIdentifier) => {
+  const updatedVariable = /* @__PURE__ */ new Set();
+  const registerVariable = (name, exp, isIdentifier, loc, parentStack = []) => {
     if (isIdentifier) seenIdentifier.add(name);
     seenVariable[name] = (seenVariable[name] || 0) + 1;
     variableToExpMap.set(
       name,
       (variableToExpMap.get(name) || /* @__PURE__ */ new Set()).add(exp)
     );
-    expToVariableMap.set(exp, (expToVariableMap.get(exp) || []).concat(name));
+    const variables = expToVariableMap.get(exp) || [];
+    variables.push({ name, loc });
+    expToVariableMap.set(exp, variables);
+    if (parentStack.some(
+      (p) => p.type === "UpdateExpression" || p.type === "AssignmentExpression"
+    )) {
+      updatedVariable.add(name);
+    }
   };
   for (const exp of expressions) {
     if (!exp.ast) {
       exp.ast === null && registerVariable(exp.content, exp, true);
       continue;
     }
-    estreeWalker.walk(exp.ast, {
-      enter(currentNode) {
-        if (currentNode.type === "MemberExpression") {
-          const memberExp = extractMemberExpression(
-            currentNode,
-            (name) => {
-              registerVariable(name, exp, true);
-            }
-          );
-          registerVariable(memberExp, exp, false);
-          return this.skip();
-        }
-        if (currentNode.type === "Identifier") {
-          registerVariable(currentNode.name, exp, true);
-        }
+    compilerDom.walkIdentifiers(exp.ast, (currentNode, parent, parentStack) => {
+      if (parent && isMemberExpression(parent)) {
+        const memberExp = extractMemberExpression(parent, (id) => {
+          registerVariable(id.name, exp, true, {
+            start: id.start,
+            end: id.end
+          });
+        });
+        registerVariable(
+          memberExp,
+          exp,
+          false,
+          { start: parent.start, end: parent.end },
+          parentStack
+        );
+      } else if (!parentStack.some(isMemberExpression)) {
+        registerVariable(
+          currentNode.name,
+          exp,
+          true,
+          { start: currentNode.start, end: currentNode.end },
+          parentStack
+        );
       }
     });
   }
-  return { seenVariable, seenIdentifier, variableToExpMap, expToVariableMap };
+  return {
+    seenVariable,
+    seenIdentifier,
+    variableToExpMap,
+    expToVariableMap,
+    updatedVariable
+  };
 }
-function processRepeatedVariables(context, seenVariable, variableToExpMap, expToVariableMap, seenIdentifier) {
+function processRepeatedVariables(context, seenVariable, variableToExpMap, expToVariableMap, seenIdentifier, updatedVariable) {
   const declarations = [];
+  const expToReplacementMap = /* @__PURE__ */ new Map();
   for (const [name, exps] of variableToExpMap) {
+    if (updatedVariable.has(name)) continue;
     if (seenVariable[name] > 1 && exps.size > 0) {
       const isIdentifier = seenIdentifier.has(name);
       const varName = isIdentifier ? name : genVarName(name);
-      const replaceRE = new RegExp(escapeRegExp(name), "g");
       exps.forEach((node) => {
-        if (node.ast) {
-          node.content = node.content.replace(replaceRE, varName);
-          node.ast = parseExp(context, node.content);
+        if (node.ast && varName !== name) {
+          const replacements = expToReplacementMap.get(node) || [];
+          replacements.push({
+            name: varName,
+            locs: expToVariableMap.get(node).reduce(
+              (locs, v) => {
+                if (v.name === name && v.loc) locs.push(v.loc);
+                return locs;
+              },
+              []
+            )
+          });
+          expToReplacementMap.set(node, replacements);
         }
       });
       if (!declarations.some((d) => d.name === varName) && (!isIdentifier || shouldDeclareVariable(name, expToVariableMap, exps))) {
@@ -636,10 +751,21 @@ function processRepeatedVariables(context, seenVariable, variableToExpMap, expTo
       }
     }
   }
+  for (const [exp, replacements] of expToReplacementMap) {
+    replacements.flatMap(
+      ({ name, locs }) => locs.map(({ start, end }) => ({ start, end, name }))
+    ).sort((a, b) => b.end - a.end).forEach(({ start, end, name }) => {
+      exp.content = exp.content.slice(0, start - 1) + name + exp.content.slice(end - 1);
+    });
+    exp.ast = parseExp(context, exp.content);
+  }
   return declarations;
 }
 function shouldDeclareVariable(name, expToVariableMap, exps) {
-  const vars = Array.from(exps, (exp) => expToVariableMap.get(exp));
+  const vars = Array.from(
+    exps,
+    (exp) => expToVariableMap.get(exp).map((v) => v.name)
+  );
   if (vars.every((v) => v.length === 1)) {
     return true;
   }
@@ -660,11 +786,12 @@ function shouldDeclareVariable(name, expToVariableMap, exps) {
   }
   return true;
 }
-function processRepeatedExpressions(context, expressions, varDeclarations) {
+function processRepeatedExpressions(context, expressions, varDeclarations, updatedVariable, expToVariableMap) {
   const declarations = [];
   const seenExp = expressions.reduce(
     (acc, exp) => {
-      if (exp.ast && exp.ast.type !== "Identifier") {
+      const variables = expToVariableMap.get(exp).map((v) => v.name);
+      if (exp.ast && exp.ast.type !== "Identifier" && !(variables && variables.some((v) => updatedVariable.has(v)))) {
         acc[exp.content] = (acc[exp.content] || 0) + 1;
       }
       return acc;
@@ -716,26 +843,35 @@ function processRepeatedExpressions(context, expressions, varDeclarations) {
   });
   return declarations;
 }
-function genDeclarations(declarations, context) {
+function genDeclarations(declarations, context, shouldDeclare) {
   const [frag, push] = buildCodeFragment();
   const ids = /* @__PURE__ */ Object.create(null);
+  const varNames = /* @__PURE__ */ new Set();
   declarations.forEach(({ name, isIdentifier, value }) => {
     if (isIdentifier) {
       const varName = ids[name] = `_${name}`;
-      push(`const ${varName} = `, ...genExpression(value, context), NEWLINE);
+      varNames.add(varName);
+      if (shouldDeclare) {
+        push(`const `);
+      }
+      push(`${varName} = `, ...genExpression(value, context), NEWLINE);
     }
   });
   declarations.forEach(({ name, isIdentifier, value }) => {
     if (!isIdentifier) {
       const varName = ids[name] = `_${name}`;
+      varNames.add(varName);
+      if (shouldDeclare) {
+        push(`const `);
+      }
       push(
-        `const ${varName} = `,
+        `${varName} = `,
         ...context.withId(() => genExpression(value, context), ids),
         NEWLINE
       );
     }
   });
-  return { ids, frag };
+  return { ids, frag, varNames: [...varNames] };
 }
 function escapeRegExp(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -754,7 +890,7 @@ function extractMemberExpression(exp, onIdentifier) {
   if (!exp) return "";
   switch (exp.type) {
     case "Identifier":
-      onIdentifier(exp.name);
+      onIdentifier(exp);
       return exp.name;
     case "StringLiteral":
       return exp.extra ? exp.extra.raw : exp.value;
@@ -765,6 +901,8 @@ function extractMemberExpression(exp, onIdentifier) {
     case "CallExpression":
       return `${extractMemberExpression(exp.callee, onIdentifier)}(${exp.arguments.map((arg) => extractMemberExpression(arg, onIdentifier)).join(", ")})`;
     case "MemberExpression":
+    // foo[bar.baz]
+    case "OptionalMemberExpression":
       const object = extractMemberExpression(exp.object, onIdentifier);
       const prop = exp.computed ? `[${extractMemberExpression(exp.property, onIdentifier)}]` : `.${extractMemberExpression(exp.property, shared.NOOP)}`;
       return `${object}${prop}`;
@@ -772,6 +910,9 @@ function extractMemberExpression(exp, onIdentifier) {
       return "";
   }
 }
+const isMemberExpression = (node) => {
+  return node.type === "MemberExpression" || node.type === "OptionalMemberExpression";
+};
 function genSetEvent(oper, context) {
   const { helper } = context;
@@ -781,6 +922,9 @@ function genSetEvent(oper, context) {
   const eventOptions = genEventOptions();
   if (delegate) {
     context.delegates.add(key.content);
+    if (!context.block.operation.some(isSameDelegateEvent)) {
+      return [NEWLINE, `n${element}.$evt${key.content} = `, ...handler];
+    }
   }
   return [
     NEWLINE,
@@ -812,6 +956,11 @@ function genSetEvent(oper, context) {
       ...options.map((option) => [`${option}: true`])
     );
   }
+  function isSameDelegateEvent(op) {
+    if (op.type === 5 && op !== oper && op.delegate && op.element === oper.element && op.key.content === key.content) {
+      return true;
+    }
+  }
 }
 function genSetDynamicEvents(oper, context) {
   const { helper } = context;
@@ -824,31 +973,35 @@ function genSetDynamicEvents(oper, context) {
     )
   ];
 }
-function genEventHandler(context, value, modifiers = { nonKeys: [], keys: [] }, needWrap = true) {
+function genEventHandler(context, value, modifiers = { nonKeys: [], keys: [] }, extraWrap = false) {
   let handlerExp = [`() => {}`];
   if (value && value.content.trim()) {
-    const isMemberExp = compilerDom.isMemberExpression(value, context.options);
-    const isInlineStatement = !(isMemberExp || compilerDom.isFnExpression(value, context.options));
-    if (isInlineStatement) {
-      const expr = context.withId(() => genExpression(value, context), {
-        $event: null
-      });
+    if (compilerDom.isMemberExpression(value, context.options)) {
+      handlerExp = genExpression(value, context);
+      if (!isConstantBinding(value, context) && !extraWrap) {
+        handlerExp = [`e => `, ...handlerExp, `(e)`];
+      }
+    } else if (compilerDom.isFnExpression(value, context.options)) {
+      handlerExp = genExpression(value, context);
+    } else {
+      const referencesEvent = value.content.includes("$event");
       const hasMultipleStatements = value.content.includes(`;`);
+      const expr = referencesEvent ? context.withId(() => genExpression(value, context), {
+        $event: null
+      }) : genExpression(value, context);
       handlerExp = [
-        "$event => ",
+        referencesEvent ? "$event => " : "() => ",
         hasMultipleStatements ? "{" : "(",
         ...expr,
         hasMultipleStatements ? "}" : ")"
       ];
-    } else {
-      handlerExp = [...genExpression(value, context)];
     }
   }
   const { keys, nonKeys } = modifiers;
   if (nonKeys.length)
     handlerExp = genWithModifiers(context, handlerExp, nonKeys);
   if (keys.length) handlerExp = genWithKeys(context, handlerExp, keys);
-  if (needWrap) handlerExp.unshift(`() => `);
+  if (extraWrap) handlerExp.unshift(`() => `);
   return handlerExp;
 }
 function genWithModifiers(context, handler, nonKeys) {
@@ -861,10 +1014,29 @@ function genWithModifiers(context, handler, nonKeys) {
 function genWithKeys(context, handler, keys) {
   return genCall(context.helper("withKeys"), handler, JSON.stringify(keys));
 }
+function isConstantBinding(value, context) {
+  if (value.ast === null) {
+    const bindingType = context.options.bindingMetadata[value.content];
+    if (bindingType === "setup-const") {
+      return true;
+    }
+  }
+}
 function genFor(oper, context) {
   const { helper } = context;
-  const { source, value, key, index, render, keyProp, once, id, component } = oper;
+  const {
+    source,
+    value,
+    key,
+    index,
+    render,
+    keyProp,
+    once,
+    id,
+    component,
+    onlyChild
+  } = oper;
   let rawValue = null;
   const rawKey = key && key.content;
   const rawIndex = index && index.content;
@@ -907,18 +1079,87 @@ function genFor(oper, context) {
     idMap[rawIndex] = `${indexVar}.value`;
     idMap[indexVar] = null;
   }
-  const blockFn = context.withId(() => genBlock(render, context, args), idMap);
+  const { selectorPatterns, keyOnlyBindingPatterns } = matchPatterns(
+    render,
+    keyProp,
+    idMap
+  );
+  const selectorDeclarations = [];
+  const selectorSetup = [];
+  for (let i = 0; i < selectorPatterns.length; i++) {
+    const { selector } = selectorPatterns[i];
+    const selectorName = `_selector${id}_${i}`;
+    selectorDeclarations.push(`let ${selectorName}`, NEWLINE);
+    if (i === 0) {
+      selectorSetup.push(`({ createSelector }) => {`, INDENT_START);
+    }
+    selectorSetup.push(
+      NEWLINE,
+      `${selectorName} = `,
+      ...genCall(`createSelector`, [
+        `() => `,
+        ...genExpression(selector, context)
+      ])
+    );
+    if (i === selectorPatterns.length - 1) {
+      selectorSetup.push(INDENT_END, NEWLINE, "}");
+    }
+  }
+  const blockFn = context.withId(() => {
+    const frag = [];
+    frag.push("(", ...args, ") => {", INDENT_START);
+    if (selectorPatterns.length || keyOnlyBindingPatterns.length) {
+      frag.push(
+        ...genBlockContent(render, context, false, () => {
+          const patternFrag = [];
+          for (let i = 0; i < selectorPatterns.length; i++) {
+            const { effect } = selectorPatterns[i];
+            patternFrag.push(
+              NEWLINE,
+              `_selector${id}_${i}(() => {`,
+              INDENT_START
+            );
+            for (const oper2 of effect.operations) {
+              patternFrag.push(...genOperation(oper2, context));
+            }
+            patternFrag.push(INDENT_END, NEWLINE, `})`);
+          }
+          for (const { effect } of keyOnlyBindingPatterns) {
+            for (const oper2 of effect.operations) {
+              patternFrag.push(...genOperation(oper2, context));
+            }
+          }
+          return patternFrag;
+        })
+      );
+    } else {
+      frag.push(...genBlockContent(render, context));
+    }
+    frag.push(INDENT_END, NEWLINE, "}");
+    return frag;
+  }, idMap);
   exitScope();
+  let flags = 0;
+  if (onlyChild) {
+    flags |= 1;
+  }
+  if (component) {
+    flags |= 2;
+  }
+  if (once) {
+    flags |= 4;
+  }
   return [
     NEWLINE,
+    ...selectorDeclarations,
     `const n${id} = `,
     ...genCall(
-      helper("createFor"),
+      [helper("createFor"), "undefined"],
       sourceExpr,
       blockFn,
       genCallback(keyProp),
-      component && "true",
-      once && "true"
+      flags ? String(flags) : void 0,
+      selectorSetup.length ? selectorSetup : void 0
       // todo: hydrationNode
     )
   ];
@@ -1002,8 +1243,8 @@ function genFor(oper, context) {
     return [
       ...genMulti(
         ["(", ")", ", "],
-        rawValue ? rawValue : rawKey || rawIndex ? "_" : undefined,
-        rawKey ? rawKey : rawIndex ? "__" : undefined,
+        rawValue ? rawValue : rawKey || rawIndex ? "_" : void 0,
+        rawKey ? rawKey : rawIndex ? "__" : void 0,
         rawIndex
       ),
       " => (",
@@ -1019,6 +1260,166 @@ function genFor(oper, context) {
     return idMap2;
   }
 }
+function matchPatterns(render, keyProp, idMap) {
+  const selectorPatterns = [];
+  const keyOnlyBindingPatterns = [];
+  render.effect = render.effect.filter((effect) => {
+    if (keyProp !== void 0) {
+      const selector = matchSelectorPattern(effect, keyProp.ast, idMap);
+      if (selector) {
+        selectorPatterns.push(selector);
+        return false;
+      }
+      const keyOnly = matchKeyOnlyBindingPattern(effect, keyProp.ast);
+      if (keyOnly) {
+        keyOnlyBindingPatterns.push(keyOnly);
+        return false;
+      }
+    }
+    return true;
+  });
+  return {
+    keyOnlyBindingPatterns,
+    selectorPatterns
+  };
+}
+function matchKeyOnlyBindingPattern(effect, keyAst) {
+  if (effect.expressions.length === 1) {
+    const ast = effect.expressions[0].ast;
+    if (typeof ast === "object" && ast !== null) {
+      if (isKeyOnlyBinding(ast, keyAst)) {
+        return { effect };
+      }
+    }
+  }
+}
+function matchSelectorPattern(effect, keyAst, idMap) {
+  if (effect.expressions.length === 1) {
+    const ast = effect.expressions[0].ast;
+    if (typeof ast === "object" && ast) {
+      const matcheds = [];
+      estreeWalker.walk(ast, {
+        enter(node) {
+          if (typeof node === "object" && node && node.type === "BinaryExpression" && node.operator === "===" && node.left.type !== "PrivateName") {
+            const { left, right } = node;
+            for (const [a, b] of [
+              [left, right],
+              [right, left]
+            ]) {
+              const aIsKey = isKeyOnlyBinding(a, keyAst);
+              const bIsKey = isKeyOnlyBinding(b, keyAst);
+              const bVars = analyzeVariableScopes(b, idMap);
+              if (aIsKey && !bIsKey && !bVars.locals.length) {
+                matcheds.push([a, b]);
+              }
+            }
+          }
+        }
+      });
+      if (matcheds.length === 1) {
+        const [key, selector] = matcheds[0];
+        const content2 = effect.expressions[0].content;
+        let hasExtraId = false;
+        const parentStackMap = /* @__PURE__ */ new Map();
+        const parentStack = [];
+        compilerDom.walkIdentifiers(
+          ast,
+          (id) => {
+            if (id.start !== key.start && id.start !== selector.start) {
+              hasExtraId = true;
+            }
+            parentStackMap.set(id, parentStack.slice());
+          },
+          false,
+          parentStack
+        );
+        if (!hasExtraId) {
+          const name = content2.slice(selector.start - 1, selector.end - 1);
+          return {
+            effect,
+            // @ts-expect-error
+            selector: {
+              content: name,
+              ast: shared.extend({}, selector, {
+                start: 1,
+                end: name.length + 1
+              }),
+              loc: selector.loc,
+              isStatic: false
+            }
+          };
+        }
+      }
+    }
+    const content = effect.expressions[0].content;
+    if (typeof ast === "object" && ast && ast.type === "ConditionalExpression" && ast.test.type === "BinaryExpression" && ast.test.operator === "===" && ast.test.left.type !== "PrivateName" && compilerDom.isStaticNode(ast.consequent) && compilerDom.isStaticNode(ast.alternate)) {
+      const left = ast.test.left;
+      const right = ast.test.right;
+      for (const [a, b] of [
+        [left, right],
+        [right, left]
+      ]) {
+        const aIsKey = isKeyOnlyBinding(a, keyAst);
+        const bIsKey = isKeyOnlyBinding(b, keyAst);
+        const bVars = analyzeVariableScopes(b, idMap);
+        if (aIsKey && !bIsKey && !bVars.locals.length) {
+          return {
+            effect,
+            // @ts-expect-error
+            selector: {
+              content: content.slice(b.start - 1, b.end - 1),
+              ast: b,
+              loc: b.loc,
+              isStatic: false
+            }
+          };
+        }
+      }
+    }
+  }
+}
+function analyzeVariableScopes(ast, idMap) {
+  let globals = [];
+  let locals = [];
+  const ids = [];
+  const parentStackMap = /* @__PURE__ */ new Map();
+  const parentStack = [];
+  compilerDom.walkIdentifiers(
+    ast,
+    (id) => {
+      ids.push(id);
+      parentStackMap.set(id, parentStack.slice());
+    },
+    false,
+    parentStack
+  );
+  for (const id of ids) {
+    if (shared.isGloballyAllowed(id.name)) {
+      continue;
+    }
+    if (idMap[id.name]) {
+      locals.push(id.name);
+    } else {
+      globals.push(id.name);
+    }
+  }
+  return { globals, locals };
+}
+function isKeyOnlyBinding(expr, keyAst) {
+  let only = true;
+  estreeWalker.walk(expr, {
+    enter(node) {
+      if (types.isNodesEquivalent(node, keyAst)) {
+        this.skip();
+        return;
+      }
+      if (node.type === "Identifier") {
+        only = false;
+      }
+    }
+  });
+  return only;
+}
 function genSetHtml(oper, context) {
   const { helper } = context;
@@ -1048,474 +1449,16 @@ function genIf(oper, context, isNested = false) {
     }
   }
   if (!isNested) push(NEWLINE, `const n${oper.id} = `);
-  push(
-    ...genCall(
-      helper("createIf"),
-      conditionExpr,
-      positiveArg,
-      negativeArg,
-      once && "true"
-    )
-  );
-  return frag;
-}
-const locStub = {
-  start: { line: 1, column: 1, offset: 0 },
-  end: { line: 1, column: 1, offset: 0 },
-  source: ""
-};
-function createSimpleExpression(content, isStatic = false, loc = locStub, constType = 0) {
-  return {
-    type: 4,
-    loc,
-    content,
-    isStatic,
-    constType: isStatic ? 3 : constType
-  };
-}
-function createCompilerError(code, loc, messages, additionalMessage) {
-  const msg = (errorMessages)[code] + (``) ;
-  const error = new SyntaxError(String(msg));
-  error.code = code;
-  error.loc = loc;
-  return error;
-}
-const errorMessages = {
-  // parse errors
-  [0]: "Illegal comment.",
-  [1]: "CDATA section is allowed only in XML context.",
-  [2]: "Duplicate attribute.",
-  [3]: "End tag cannot have attributes.",
-  [4]: "Illegal '/' in tags.",
-  [5]: "Unexpected EOF in tag.",
-  [6]: "Unexpected EOF in CDATA section.",
-  [7]: "Unexpected EOF in comment.",
-  [8]: "Unexpected EOF in script.",
-  [9]: "Unexpected EOF in tag.",
-  [10]: "Incorrectly closed comment.",
-  [11]: "Incorrectly opened comment.",
-  [12]: "Illegal tag name. Use '&lt;' to print '<'.",
-  [13]: "Attribute value was expected.",
-  [14]: "End tag name was expected.",
-  [15]: "Whitespace was expected.",
-  [16]: "Unexpected '<!--' in comment.",
-  [17]: `Attribute name cannot contain U+0022 ("), U+0027 ('), and U+003C (<).`,
-  [18]: "Unquoted attribute value cannot contain U+0022 (\"), U+0027 ('), U+003C (<), U+003D (=), and U+0060 (`).",
-  [19]: "Attribute name cannot start with '='.",
-  [21]: "'<?' is allowed only in XML context.",
-  [20]: `Unexpected null character.`,
-  [22]: "Illegal '/' in tags.",
-  // Vue-specific parse errors
-  [23]: "Invalid end tag.",
-  [24]: "Element is missing end tag.",
-  [25]: "Interpolation end sign was not found.",
-  [27]: "End bracket for dynamic directive argument was not found. Note that dynamic directive argument cannot contain spaces.",
-  [26]: "Legal directive name was expected.",
-  // transform errors
-  [28]: `v-if/v-else-if is missing expression.`,
-  [29]: `v-if/else branches must use unique keys.`,
-  [30]: `v-else/v-else-if has no adjacent v-if or v-else-if.`,
-  [31]: `v-for is missing expression.`,
-  [32]: `v-for has invalid expression.`,
-  [33]: `<template v-for> key should be placed on the <template> tag.`,
-  [34]: `v-bind is missing expression.`,
-  [52]: `v-bind with same-name shorthand only allows static argument.`,
-  [35]: `v-on is missing expression.`,
-  [36]: `Unexpected custom directive on <slot> outlet.`,
-  [37]: `Mixed v-slot usage on both the component and nested <template>. When there are multiple named slots, all slots should use <template> syntax to avoid scope ambiguity.`,
-  [38]: `Duplicate slot names found. `,
-  [39]: `Extraneous children found when component already has explicitly named default slot. These children will be ignored.`,
-  [40]: `v-slot can only be used on components or <template> tags.`,
-  [41]: `v-model is missing expression.`,
-  [42]: `v-model value must be a valid JavaScript member expression.`,
-  [43]: `v-model cannot be used on v-for or v-slot scope variables because they are not writable.`,
-  [44]: `v-model cannot be used on a prop, because local prop bindings are not writable.
-Use a v-bind binding combined with a v-on listener that emits update:x event instead.`,
-  [45]: `Error parsing JavaScript expression: `,
-  [46]: `<KeepAlive> expects exactly one child component.`,
-  [51]: `@vnode-* hooks in templates are no longer supported. Use the vue: prefix instead. For example, @vnode-mounted should be changed to @vue:mounted. @vnode-* hooks support has been removed in 3.4.`,
-  // generic errors
-  [47]: `"prefixIdentifiers" option is not supported in this build of compiler.`,
-  [48]: `ES module mode is not supported in this build of compiler.`,
-  [49]: `"cacheHandlers" option is only supported when the "prefixIdentifiers" option is enabled.`,
-  [50]: `"scopeId" option is only supported in module mode.`,
-  // just to fulfill types
-  [53]: ``
-};
-function walkIdentifiers(root, onIdentifier, includeAll = false, parentStack = [], knownIds = /* @__PURE__ */ Object.create(null)) {
-  const rootExp = root.type === "Program" ? root.body[0].type === "ExpressionStatement" && root.body[0].expression : root;
-  estreeWalker.walk(root, {
-    enter(node, parent) {
-      parent && parentStack.push(parent);
-      if (parent && parent.type.startsWith("TS") && !TS_NODE_TYPES.includes(parent.type)) {
-        return this.skip();
-      }
-      if (node.type === "Identifier") {
-        const isLocal = !!knownIds[node.name];
-        const isRefed = isReferencedIdentifier(node, parent, parentStack);
-        if (includeAll || isRefed && !isLocal) {
-          onIdentifier(node, parent, parentStack, isRefed, isLocal);
-        }
-      } else if (node.type === "ObjectProperty" && // eslint-disable-next-line no-restricted-syntax
-      (parent == null ? undefined : parent.type) === "ObjectPattern") {
-        node.inPattern = true;
-      } else if (isFunctionType(node)) {
-        if (node.scopeIds) {
-          node.scopeIds.forEach((id) => markKnownIds(id, knownIds));
-        } else {
-          walkFunctionParams(
-            node,
-            (id) => markScopeIdentifier(node, id, knownIds)
-          );
-        }
-      } else if (node.type === "BlockStatement") {
-        if (node.scopeIds) {
-          node.scopeIds.forEach((id) => markKnownIds(id, knownIds));
-        } else {
-          walkBlockDeclarations(
-            node,
-            (id) => markScopeIdentifier(node, id, knownIds)
-          );
-        }
-      } else if (node.type === "CatchClause" && node.param) {
-        for (const id of extractIdentifiers(node.param)) {
-          markScopeIdentifier(node, id, knownIds);
-        }
-      } else if (isForStatement(node)) {
-        walkForStatement(
-          node,
-          false,
-          (id) => markScopeIdentifier(node, id, knownIds)
-        );
-      }
-    },
-    leave(node, parent) {
-      parent && parentStack.pop();
-      if (node !== rootExp && node.scopeIds) {
-        for (const id of node.scopeIds) {
-          knownIds[id]--;
-          if (knownIds[id] === 0) {
-            delete knownIds[id];
-          }
-        }
-      }
-    }
-  });
-}
-function isReferencedIdentifier(id, parent, parentStack) {
-  if (!parent) {
-    return true;
-  }
-  if (id.name === "arguments") {
-    return false;
-  }
-  if (isReferenced(id, parent)) {
-    return true;
-  }
-  switch (parent.type) {
-    case "AssignmentExpression":
-    case "AssignmentPattern":
-      return true;
-    case "ObjectPattern":
-    case "ArrayPattern":
-      return isInDestructureAssignment(parent, parentStack);
-  }
-  return false;
-}
-function isInDestructureAssignment(parent, parentStack) {
-  if (parent && (parent.type === "ObjectProperty" || parent.type === "ArrayPattern")) {
-    let i = parentStack.length;
-    while (i--) {
-      const p = parentStack[i];
-      if (p.type === "AssignmentExpression") {
-        return true;
-      } else if (p.type !== "ObjectProperty" && !p.type.endsWith("Pattern")) {
-        break;
-      }
-    }
-  }
-  return false;
-}
-function walkFunctionParams(node, onIdent) {
-  for (const p of node.params) {
-    for (const id of extractIdentifiers(p)) {
-      onIdent(id);
-    }
-  }
-}
-function walkBlockDeclarations(block, onIdent) {
-  for (const stmt of block.body) {
-    if (stmt.type === "VariableDeclaration") {
-      if (stmt.declare) continue;
-      for (const decl of stmt.declarations) {
-        for (const id of extractIdentifiers(decl.id)) {
-          onIdent(id);
-        }
-      }
-    } else if (stmt.type === "FunctionDeclaration" || stmt.type === "ClassDeclaration") {
-      if (stmt.declare || !stmt.id) continue;
-      onIdent(stmt.id);
-    } else if (isForStatement(stmt)) {
-      walkForStatement(stmt, true, onIdent);
-    }
-  }
-}
-function isForStatement(stmt) {
-  return stmt.type === "ForOfStatement" || stmt.type === "ForInStatement" || stmt.type === "ForStatement";
-}
-function walkForStatement(stmt, isVar, onIdent) {
-  const variable = stmt.type === "ForStatement" ? stmt.init : stmt.left;
-  if (variable && variable.type === "VariableDeclaration" && (variable.kind === "var" ? isVar : !isVar)) {
-    for (const decl of variable.declarations) {
-      for (const id of extractIdentifiers(decl.id)) {
-        onIdent(id);
-      }
-    }
-  }
-}
-function extractIdentifiers(param, nodes = []) {
-  switch (param.type) {
-    case "Identifier":
-      nodes.push(param);
-      break;
-    case "MemberExpression":
-      let object = param;
-      while (object.type === "MemberExpression") {
-        object = object.object;
-      }
-      nodes.push(object);
-      break;
-    case "ObjectPattern":
-      for (const prop of param.properties) {
-        if (prop.type === "RestElement") {
-          extractIdentifiers(prop.argument, nodes);
-        } else {
-          extractIdentifiers(prop.value, nodes);
-        }
-      }
-      break;
-    case "ArrayPattern":
-      param.elements.forEach((element) => {
-        if (element) extractIdentifiers(element, nodes);
-      });
-      break;
-    case "RestElement":
-      extractIdentifiers(param.argument, nodes);
-      break;
-    case "AssignmentPattern":
-      extractIdentifiers(param.left, nodes);
-      break;
-  }
-  return nodes;
-}
-function markKnownIds(name, knownIds) {
-  if (name in knownIds) {
-    knownIds[name]++;
-  } else {
-    knownIds[name] = 1;
-  }
-}
-function markScopeIdentifier(node, child, knownIds) {
-  const { name } = child;
-  if (node.scopeIds && node.scopeIds.has(name)) {
-    return;
-  }
-  markKnownIds(name, knownIds);
-  (node.scopeIds || (node.scopeIds = /* @__PURE__ */ new Set())).add(name);
-}
-const isFunctionType = (node) => {
-  return /Function(?:Expression|Declaration)$|Method$/.test(node.type);
-};
-function isReferenced(node, parent, grandparent) {
-  switch (parent.type) {
-    // yes: PARENT[NODE]
-    // yes: NODE.child
-    // no: parent.NODE
-    case "MemberExpression":
-    case "OptionalMemberExpression":
-      if (parent.property === node) {
-        return !!parent.computed;
-      }
-      return parent.object === node;
-    case "JSXMemberExpression":
-      return parent.object === node;
-    // no: let NODE = init;
-    // yes: let id = NODE;
-    case "VariableDeclarator":
-      return parent.init === node;
-    // yes: () => NODE
-    // no: (NODE) => {}
-    case "ArrowFunctionExpression":
-      return parent.body === node;
-    // no: class { #NODE; }
-    // no: class { get #NODE() {} }
-    // no: class { #NODE() {} }
-    // no: class { fn() { return this.#NODE; } }
-    case "PrivateName":
-      return false;
-    // no: class { NODE() {} }
-    // yes: class { [NODE]() {} }
-    // no: class { foo(NODE) {} }
-    case "ClassMethod":
-    case "ClassPrivateMethod":
-    case "ObjectMethod":
-      if (parent.key === node) {
-        return !!parent.computed;
-      }
-      return false;
-    // yes: { [NODE]: "" }
-    // no: { NODE: "" }
-    // depends: { NODE }
-    // depends: { key: NODE }
-    case "ObjectProperty":
-      if (parent.key === node) {
-        return !!parent.computed;
-      }
-      return true;
-    // no: class { NODE = value; }
-    // yes: class { [NODE] = value; }
-    // yes: class { key = NODE; }
-    case "ClassProperty":
-      if (parent.key === node) {
-        return !!parent.computed;
-      }
-      return true;
-    case "ClassPrivateProperty":
-      return parent.key !== node;
-    // no: class NODE {}
-    // yes: class Foo extends NODE {}
-    case "ClassDeclaration":
-    case "ClassExpression":
-      return parent.superClass === node;
-    // yes: left = NODE;
-    // no: NODE = right;
-    case "AssignmentExpression":
-      return parent.right === node;
-    // no: [NODE = foo] = [];
-    // yes: [foo = NODE] = [];
-    case "AssignmentPattern":
-      return parent.right === node;
-    // no: NODE: for (;;) {}
-    case "LabeledStatement":
-      return false;
-    // no: try {} catch (NODE) {}
-    case "CatchClause":
-      return false;
-    // no: function foo(...NODE) {}
-    case "RestElement":
-      return false;
-    case "BreakStatement":
-    case "ContinueStatement":
-      return false;
-    // no: function NODE() {}
-    // no: function foo(NODE) {}
-    case "FunctionDeclaration":
-    case "FunctionExpression":
-      return false;
-    // no: export NODE from "foo";
-    // no: export * as NODE from "foo";
-    case "ExportNamespaceSpecifier":
-    case "ExportDefaultSpecifier":
-      return false;
-    // no: export { foo as NODE };
-    // yes: export { NODE as foo };
-    // no: export { NODE as foo } from "foo";
-    case "ExportSpecifier":
-      return parent.local === node;
-    // no: import NODE from "foo";
-    // no: import * as NODE from "foo";
-    // no: import { NODE as foo } from "foo";
-    // no: import { foo as NODE } from "foo";
-    // no: import NODE from "bar";
-    case "ImportDefaultSpecifier":
-    case "ImportNamespaceSpecifier":
-    case "ImportSpecifier":
-      return false;
-    // no: import "foo" assert { NODE: "json" }
-    case "ImportAttribute":
-      return false;
-    // no: <div NODE="foo" />
-    case "JSXAttribute":
-      return false;
-    // no: [NODE] = [];
-    // no: ({ NODE }) = [];
-    case "ObjectPattern":
-    case "ArrayPattern":
-      return false;
-    // no: new.NODE
-    // no: NODE.target
-    case "MetaProperty":
-      return false;
-    // yes: type X = { someProperty: NODE }
-    // no: type X = { NODE: OtherType }
-    case "ObjectTypeProperty":
-      return parent.key !== node;
-    // yes: enum X { Foo = NODE }
-    // no: enum X { NODE }
-    case "TSEnumMember":
-      return parent.id !== node;
-    // yes: { [NODE]: value }
-    // no: { NODE: value }
-    case "TSPropertySignature":
-      if (parent.key === node) {
-        return !!parent.computed;
-      }
-      return true;
-  }
-  return true;
-}
-const TS_NODE_TYPES = [
-  "TSAsExpression",
-  // foo as number
-  "TSTypeAssertion",
-  // (<number>foo)
-  "TSNonNullExpression",
-  // foo!
-  "TSInstantiationExpression",
-  // foo<string>
-  "TSSatisfiesExpression"
-  // foo satisfies T
-];
-function unwrapTSNode(node) {
-  if (TS_NODE_TYPES.includes(node.type)) {
-    return unwrapTSNode(node.expression);
-  } else {
-    return node;
-  }
-}
-const isStaticExp = (p) => p.type === 4 && p.isStatic;
-const nonIdentifierRE = /^\d|[^\$\w\xA0-\uFFFF]/;
-const isSimpleIdentifier = (name) => !nonIdentifierRE.test(name);
-const getExpSource = (exp) => exp.type === 4 ? exp.content : exp.loc.source;
-const isMemberExpressionNode = (exp, context) => {
-  try {
-    let ret = exp.ast || parser.parseExpression(getExpSource(exp), {
-      plugins: context.expressionPlugins ? [...context.expressionPlugins, "typescript"] : ["typescript"]
-    });
-    ret = unwrapTSNode(ret);
-    return ret.type === "MemberExpression" || ret.type === "OptionalMemberExpression" || ret.type === "Identifier" && ret.name !== "undefined";
-  } catch (e) {
-    return false;
-  }
-};
-const isMemberExpression = isMemberExpressionNode;
-function isStaticArgOf(arg, name) {
-  return !!(arg && isStaticExp(arg) && arg.content === name);
-}
-function isVSlot(p) {
-  return p.type === 7 && p.name === "slot";
-}
-function isTemplateNode(node) {
-  return node.type === 1 && node.tagType === 3;
-}
-function toValidAssetId(name, type) {
-  return `_${type}_${name.replace(/[^\w]/g, (searchValue, replaceValue) => {
-    return searchValue === "-" ? "_" : name.charCodeAt(replaceValue).toString();
-  })}`;
+  push(
+    ...genCall(
+      helper("createIf"),
+      conditionExpr,
+      positiveArg,
+      negativeArg,
+      once && "true"
+    )
+  );
+  return frag;
 }
 const helpers = {
@@ -1526,9 +1469,7 @@ const helpers = {
   setValue: { name: "setValue" },
   setAttr: { name: "setAttr", needKey: true },
   setProp: { name: "setProp", needKey: true },
-  setDOMProp: { name: "setDOMProp", needKey: true },
-  setDynamicProps: { name: "setDynamicProps" }
-};
+  setDOMProp: { name: "setDOMProp", needKey: true }};
 function genSetProp(oper, context) {
   const { helper } = context;
   const {
@@ -1579,7 +1520,7 @@ function genPropKey({ key: node, modifier, runtimeCamelize, handler, handlerModi
     const keyName = (handler ? shared.toHandlerKey(node.content) : node.content) + handlerModifierPostfix;
     return [
       [
-        isSimpleIdentifier(keyName) ? keyName : JSON.stringify(keyName),
+        compilerDom.isSimpleIdentifier(keyName) ? keyName : JSON.stringify(keyName),
         -2,
         node.loc
       ]
@@ -1596,7 +1537,7 @@ function genPropKey({ key: node, modifier, runtimeCamelize, handler, handlerModi
     "[",
     modifier && `${JSON.stringify(modifier)} + `,
     ...key,
-    handlerModifierPostfix ? ` + ${JSON.stringify(handlerModifierPostfix)}` : undefined,
+    handlerModifierPostfix ? ` + ${JSON.stringify(handlerModifierPostfix)}` : void 0,
     "]"
   ];
 }
@@ -1656,8 +1597,8 @@ function genSetTemplateRef(oper, context) {
       setTemplateRefIdent,
       // will be generated in root scope
       `n${oper.element}`,
-      genExpression(oper.value, context),
-      oper.effect ? `r${oper.element}` : oper.refFor ? "void 0" : undefined,
+      genRefValue(oper.value, context),
+      oper.effect ? `r${oper.element}` : oper.refFor ? "void 0" : void 0,
       oper.refFor && "true"
     )
   ];
@@ -1665,26 +1606,41 @@ function genSetTemplateRef(oper, context) {
 function genDeclareOldRef(oper) {
   return [NEWLINE, `let r${oper.id}`];
 }
+function genRefValue(value, context) {
+  if (value && context.options.inline) {
+    const binding = context.options.bindingMetadata[value.content];
+    if (binding === "setup-let" || binding === "setup-ref" || binding === "setup-maybe-ref") {
+      return [value.content];
+    }
+  }
+  return genExpression(value, context);
+}
 function genSetText(oper, context) {
   const { helper } = context;
-  const { element, values } = oper;
-  const texts = values.map((value) => genExpression(value, context));
-  return [NEWLINE, ...genCall(helper("setText"), `n${element}`, ...texts)];
+  const { element, values, generated, jsx } = oper;
+  const texts = combineValues(values, context, jsx);
+  return [
+    NEWLINE,
+    ...genCall(helper("setText"), `${generated ? "x" : "n"}${element}`, texts)
+  ];
 }
-function genCreateTextNode(oper, context) {
-  const { helper } = context;
-  const { id, values, effect } = oper;
+function combineValues(values, context, jsx) {
+  return values.flatMap((value, i) => {
+    let exp = genExpression(value, context);
+    if (!jsx && getLiteralExpressionValue(value) == null) {
+      exp = genCall(context.helper("toDisplayString"), exp);
+    }
+    if (i > 0) {
+      exp.unshift(jsx ? ", " : " + ");
+    }
+    return exp;
+  });
+}
+function genGetTextChild(oper, context) {
   return [
     NEWLINE,
-    `const n${id} = `,
-    ...genCall(helper("createTextNode"), [
-      effect && "() => ",
-      ...genMulti(
-        DELIMITERS_ARRAY,
-        ...values.map((value) => genExpression(value, context))
-      )
-    ])
+    `const x${oper.parent} = ${context.helper("child")}(n${oper.parent})`
   ];
 }
@@ -1722,7 +1678,7 @@ function genVModel(oper, context) {
       // setter
       genModelHandler(exp, context),
       // modifiers
-      modifiers.length ? `{ ${modifiers.map((e) => e.content + ": true").join(",")} }` : undefined
+      modifiers.length ? `{ ${modifiers.map((e) => e.content + ": true").join(",")} }` : void 0
     )
   ];
 }
@@ -1755,7 +1711,6 @@ function genCustomDirectives(opers, context) {
   const directives = genMulti(DELIMITERS_ARRAY, ...directiveItems);
   return [
     NEWLINE,
-    // @ts-expect-error
     ...genCall(helper("withVaporDirectives"), element, directives)
   ];
   function genDirectiveItem({
@@ -1790,7 +1745,7 @@ function genDirectiveModifiers(modifiers) {
 }
 function filterCustomDirectives(id, operations) {
   return operations.filter(
-    (oper) => oper.type === 14 && oper.element === id && !oper.builtin
+    (oper) => oper.type === 13 && oper.element === id && !oper.builtin
   );
 }
@@ -1803,7 +1758,7 @@ function genCreateComponent(operation, context) {
   const rawProps = context.withId(() => genRawProps(props, context), ids);
   const inlineHandlers = handlers.reduce(
     (acc, { name, value }) => {
-      const handler = genEventHandler(context, value, undefined, false);
+      const handler = genEventHandler(context, value, void 0, false);
       return [...acc, `const ${name} = `, ...handler, NEWLINE];
     },
     []
@@ -1833,10 +1788,10 @@ function genCreateComponent(operation, context) {
         return ["() => (", ...genExpression(operation.dynamic, context), ")"];
       }
     } else if (operation.asset) {
-      return toValidAssetId(operation.tag, "component");
+      return compilerDom.toValidAssetId(operation.tag, "component");
     } else {
       return genExpression(
-        shared.extend(createSimpleExpression(operation.tag, false), { ast: null }),
+        shared.extend(compilerDom.createSimpleExpression(operation.tag, false), { ast: null }),
         context
       );
     }
@@ -1844,6 +1799,7 @@ function genCreateComponent(operation, context) {
 }
 function getUniqueHandlerName(context, name) {
   const { seenInlineHandlerNames } = context;
+  name = genVarName(name);
   const count = seenInlineHandlerNames[name] || 0;
   seenInlineHandlerNames[name] = count + 1;
   return count === 0 ? name : `${name}${count}`;
@@ -1857,12 +1813,12 @@ function processInlineHandlers(props, context) {
       const prop = staticProps[i];
       if (!prop.handler) continue;
       prop.values.forEach((value, i2) => {
-        const isMemberExp = isMemberExpression(value, context.options);
+        const isMemberExp = compilerDom.isMemberExpression(value, context.options);
         if (!isMemberExp) {
           const name = getUniqueHandlerName(context, `_on_${prop.key.content}`);
           handlers.push({ name, value });
           ids[name] = null;
-          prop.values[i2] = shared.extend({ ast: null }, createSimpleExpression(name));
+          prop.values[i2] = shared.extend({ ast: null }, compilerDom.createSimpleExpression(name));
         }
       });
     }
@@ -1923,7 +1879,12 @@ function genProp(prop, context, isStatic) {
   return [
     ...genPropKey(prop, context),
     ": ",
-    ...prop.handler ? genEventHandler(context, prop.values[0]) : isStatic ? ["() => (", ...values, ")"] : values,
+    ...prop.handler ? genEventHandler(
+      context,
+      prop.values[0],
+      void 0,
+      true
+    ) : isStatic ? ["() => (", ...values, ")"] : values,
     ...prop.model ? [...genModelEvent(prop, context), ...genModelModifiers(prop, context)] : []
   ];
 }
@@ -1946,11 +1907,11 @@ function genRawSlots(slots, context) {
     return genStaticSlots(
       staticSlots,
       context,
-      slots.length > 1 ? slots.slice(1) : undefined
+      slots.length > 1 ? slots.slice(1) : void 0
     );
   } else {
     return genStaticSlots(
-      { slotType: 0, slots: {} },
+      { slots: {} },
       context,
       slots
     );
@@ -2022,8 +1983,8 @@ function genLoopSlot(slot, context) {
       [
         ...genMulti(
           ["(", ")", ", "],
-          rawValue ? rawValue : rawKey || rawIndex ? "_" : undefined,
-          rawKey ? rawKey : rawIndex ? "__" : undefined,
+          rawValue ? rawValue : rawKey || rawIndex ? "_" : void 0,
+          rawKey ? rawKey : rawIndex ? "__" : void 0,
           rawIndex
         ),
         " => (",
@@ -2060,7 +2021,7 @@ function genSlotBlockWithProps(oper, context) {
     if (isDestructureAssignment = !!props.ast) {
       [depth, exitScope] = context.enterScope();
       propsName = `_slotProps${depth}`;
-      walkIdentifiers(
+      compilerDom.walkIdentifiers(
         props.ast,
         (id, _, __, ___, isLocal) => {
           if (isLocal) idsOfProps.add(id.name);
@@ -2108,8 +2069,16 @@ function genSlotOutlet(oper, context) {
 function genOperations(opers, context) {
   const [frag, push] = buildCodeFragment();
   for (const operation of opers) {
-    push(...genOperation(operation, context));
+    push(...genOperationWithInsertionState(operation, context));
+  }
+  return frag;
+}
+function genOperationWithInsertionState(oper, context) {
+  const [frag, push] = buildCodeFragment();
+  if (isBlockOperation(oper) && oper.parent) {
+    push(...genInsertionState(oper, context));
   }
+  push(...genOperation(oper, context));
   return frag;
 }
 function genOperation(oper, context) {
@@ -2128,24 +2097,24 @@ function genOperation(oper, context) {
       return genSetHtml(oper, context);
     case 8:
       return genSetTemplateRef(oper, context);
-    case 11:
-      return genCreateTextNode(oper, context);
     case 9:
       return genInsertNode(oper, context);
     case 10:
       return genPrependNode(oper, context);
-    case 16:
+    case 15:
       return genIf(oper, context);
-    case 17:
+    case 16:
       return genFor(oper, context);
-    case 12:
+    case 11:
       return genCreateComponent(oper, context);
-    case 15:
+    case 14:
       return genDeclareOldRef(oper);
-    case 13:
+    case 12:
       return genSlotOutlet(oper, context);
-    case 14:
+    case 13:
       return genBuiltinDirective(oper, context);
+    case 17:
+      return genGetTextChild(oper, context);
     default:
       const exhaustiveCheck = oper;
       throw new Error(
@@ -2153,17 +2122,17 @@ function genOperation(oper, context) {
       );
   }
 }
-function genEffects(effects, context) {
-  const {
-    helper,
-    block: { expressions }
-  } = context;
+function genEffects(effects, context, genExtraFrag) {
+  const { helper } = context;
+  const expressions = effects.flatMap((effect) => effect.expressions);
   const [frag, push, unshift] = buildCodeFragment();
+  const shouldDeclare = genExtraFrag === void 0;
   let operationsCount = 0;
-  const { ids, frag: declarationFrags } = processExpressions(
-    context,
-    expressions
-  );
+  const {
+    ids,
+    frag: declarationFrags,
+    varNames
+  } = processExpressions(context, expressions, shouldDeclare);
   push(...declarationFrags);
   for (let i = 0; i < effects.length; i++) {
     const effect = effects[i];
@@ -2179,11 +2148,20 @@ function genEffects(effects, context) {
   if (newLineCount > 1 || operationsCount > 1 || declarationFrags.length > 0) {
     unshift(`{`, INDENT_START, NEWLINE);
     push(INDENT_END, NEWLINE, "}");
+    if (!effects.length) {
+      unshift(NEWLINE);
+    }
   }
   if (effects.length) {
     unshift(NEWLINE, `${helper("renderEffect")}(() => `);
     push(`)`);
   }
+  if (!shouldDeclare && varNames.length) {
+    unshift(NEWLINE, `let `, varNames.join(", "));
+  }
+  if (genExtraFrag) {
+    push(...context.withId(genExtraFrag, ids));
+  }
   return frag;
 }
 function genEffect({ operations }, context) {
@@ -2197,6 +2175,16 @@ function genEffect({ operations }, context) {
   }
   return frag;
 }
+function genInsertionState(operation, context) {
+  return [
+    NEWLINE,
+    ...genCall(
+      context.helper("setInsertionState"),
+      `n${operation.parent}`,
+      operation.anchor == null ? void 0 : operation.anchor === -1 ? `0` : `n${operation.anchor}`
+    )
+  ];
+}
 function genTemplates(templates, rootIndex, { helper }) {
   return templates.map(
@@ -2206,52 +2194,74 @@ function genTemplates(templates, rootIndex, { helper }) {
 `
   ).join("");
 }
-function genChildren(dynamic, context, from, paths = []) {
-  const { helper } = context;
+function genSelf(dynamic, context) {
   const [frag, push] = buildCodeFragment();
-  let offset = 0;
-  const { children, id, template } = dynamic;
-  if (id !== undefined && template !== undefined) {
+  const { id, template, operation } = dynamic;
+  if (id !== void 0 && template !== void 0) {
     push(NEWLINE, `const n${id} = t${template}()`);
     push(...genDirectivesForElement(id, context));
   }
+  if (operation) {
+    push(...genOperationWithInsertionState(operation, context));
+  }
+  return frag;
+}
+function genChildren(dynamic, context, pushBlock, from = `n${dynamic.id}`) {
+  const { helper } = context;
+  const [frag, push] = buildCodeFragment();
+  const { children } = dynamic;
+  let offset = 0;
   let prev;
+  const childrenToGen = [];
   for (const [index, child] of children.entries()) {
     if (child.flags & 2) {
       offset--;
     }
-    const id2 = child.flags & 1 ? child.flags & 4 ? child.anchor : child.id : undefined;
-    const elementIndex = Number(index) + offset;
-    const newPaths = [...paths, elementIndex];
-    if (id2 === undefined) {
-      push(...genChildren(child, context, from, newPaths));
+    const id = child.flags & 1 ? child.flags & 4 ? child.anchor : child.id : void 0;
+    if (id === void 0 && !child.hasDynamicChild) {
+      push(...genSelf(child, context));
       continue;
     }
-    push(NEWLINE, `const n${id2} = `);
+    const elementIndex = Number(index) + offset;
+    const variable = id === void 0 ? `p${context.block.tempId++}` : `n${id}`;
+    pushBlock(NEWLINE, `const ${variable} = `);
     if (prev) {
-      const offset2 = elementIndex - prev[1];
-      if (offset2 === 1) {
-        push(`n${prev[0]}.nextSibling`);
+      if (elementIndex - prev[1] === 1) {
+        pushBlock(...genCall(helper("next"), prev[0]));
       } else {
-        push(...genCall(helper("next"), `n${prev[0]}`, String(offset2)));
+        pushBlock(...genCall(helper("nthChild"), from, String(elementIndex)));
       }
     } else {
-      if (newPaths.length === 1 && newPaths[0] === 0) {
-        push(`n${from}.firstChild`);
+      if (elementIndex === 0) {
+        pushBlock(...genCall(helper("child"), from));
       } else {
-        push(
-          ...genCall(helper("children"), `n${from}`, ...newPaths.map(String))
-        );
+        let init = genCall(helper("child"), from);
+        if (elementIndex === 1) {
+          init = genCall(helper("next"), init);
+        } else if (elementIndex > 1) {
+          init = genCall(helper("nthChild"), from, String(elementIndex));
+        }
+        pushBlock(...init);
       }
     }
-    push(...genDirectivesForElement(id2, context));
-    prev = [id2, elementIndex];
-    push(...genChildren(child, context, id2, []));
+    if (id === child.anchor) {
+      push(...genSelf(child, context));
+    }
+    if (id !== void 0) {
+      push(...genDirectivesForElement(id, context));
+    }
+    prev = [variable, elementIndex];
+    childrenToGen.push([child, variable]);
+  }
+  if (childrenToGen.length) {
+    for (const [child, from2] of childrenToGen) {
+      push(...genChildren(child, context, pushBlock, from2));
+    }
   }
   return frag;
 }
-function genBlock(oper, context, args = [], root, customReturns) {
+function genBlock(oper, context, args = [], root) {
   return [
     "(",
     ...args,
@@ -2263,19 +2273,36 @@ function genBlock(oper, context, args = [], root, customReturns) {
     "}"
   ];
 }
-function genBlockContent(block, context, root, customReturns) {
+function genBlockContent(block, context, root, genEffectsExtraFrag) {
   const [frag, push] = buildCodeFragment();
   const { dynamic, effect, operation, returns } = block;
   const resetBlock = context.enterBlock(block);
   if (root) {
-    genResolveAssets("component", "resolveComponent");
+    for (let name of context.ir.component) {
+      const id = compilerDom.toValidAssetId(name, "component");
+      const maybeSelfReference = name.endsWith("__self");
+      if (maybeSelfReference) name = name.slice(0, -6);
+      push(
+        NEWLINE,
+        `const ${id} = `,
+        ...genCall(
+          context.helper("resolveComponent"),
+          JSON.stringify(name),
+          // pass additional `maybeSelfReference` flag
+          maybeSelfReference ? "true" : void 0
+        )
+      );
+    }
     genResolveAssets("directive", "resolveDirective");
   }
   for (const child of dynamic.children) {
-    push(...genChildren(child, context, child.id));
+    push(...genSelf(child, context));
+  }
+  for (const child of dynamic.children) {
+    push(...genChildren(child, context, push, `n${child.id}`));
   }
   push(...genOperations(operation, context));
-  push(...genEffects(effect, context));
+  push(...genEffects(effect, context, genEffectsExtraFrag));
   push(NEWLINE, `return `);
   const returnNodes = returns.map((n) => `n${n}`);
   const returnsCode = returnNodes.length > 1 ? genMulti(DELIMITERS_ARRAY, ...returnNodes) : [returnNodes[0] || "null"];
@@ -2413,16 +2440,20 @@ const transformChildren = (node, context) => {
   for (const [i, child] of node.children.entries()) {
     const childContext = context.create(child, i);
     transformNode(childContext);
+    const childDynamic = childContext.dynamic;
     if (isFragment) {
       childContext.reference();
       childContext.registerTemplate();
-      if (!(childContext.dynamic.flags & 2) || childContext.dynamic.flags & 4) {
+      if (!(childDynamic.flags & 2) || childDynamic.flags & 4) {
         context.block.returns.push(childContext.dynamic.id);
       }
     } else {
       context.childrenTemplate.push(childContext.template);
     }
-    context.dynamic.children[i] = childContext.dynamic;
+    if (childDynamic.hasDynamicChild || childDynamic.id !== void 0 || childDynamic.flags & 2 || childDynamic.flags & 4) {
+      context.dynamic.hasDynamicChild = true;
+    }
+    context.dynamic.children[i] = childDynamic;
   }
   if (!isFragment) {
     processDynamicChildren(context);
@@ -2442,18 +2473,14 @@ function processDynamicChildren(context) {
           context.childrenTemplate[index - prevDynamics.length] = `<!>`;
           prevDynamics[0].flags -= 2;
           const anchor = prevDynamics[0].anchor = context.increaseId();
-          context.registerOperation({
-            type: 9,
-            elements: prevDynamics.map((child2) => child2.id),
-            parent: context.reference(),
-            anchor
-          });
+          registerInsertion(prevDynamics, context, anchor);
         } else {
-          context.registerOperation({
-            type: 10,
-            elements: prevDynamics.map((child2) => child2.id),
-            parent: context.reference()
-          });
+          registerInsertion(
+            prevDynamics,
+            context,
+            -1
+            /* prepend */
+          );
         }
         prevDynamics = [];
       }
@@ -2461,11 +2488,22 @@ function processDynamicChildren(context) {
     }
   }
   if (prevDynamics.length) {
-    context.registerOperation({
-      type: 9,
-      elements: prevDynamics.map((child) => child.id),
-      parent: context.reference()
-    });
+    registerInsertion(prevDynamics, context);
+  }
+}
+function registerInsertion(dynamics, context, anchor) {
+  for (const child of dynamics) {
+    if (child.template != null) {
+      context.registerOperation({
+        type: 9,
+        elements: dynamics.map((child2) => child2.id),
+        parent: context.reference(),
+        anchor
+      });
+    } else if (child.operation && isBlockOperation(child.operation)) {
+      child.operation.parent = context.reference();
+      child.operation.anchor = anchor;
+    }
   }
 }
@@ -2483,6 +2521,8 @@ const isReservedProp = /* @__PURE__ */ shared.makeMap(
   ",key,ref,ref_for,ref_key,"
 );
 const transformElement = (node, context) => {
+  let effectIndex = context.block.effect.length;
+  const getEffectIndex = () => effectIndex++;
   return function postTransformElement() {
     ({ node } = context);
     if (!(node.type === 1 && (node.tagType === 0 || node.tagType === 1)))
@@ -2493,24 +2533,35 @@ const transformElement = (node, context) => {
       node,
       context,
       isComponent,
-      isDynamicComponent
+      isDynamicComponent,
+      getEffectIndex
     );
     let { parent } = context;
     while (parent && parent.parent && parent.node.type === 1 && parent.node.tagType === 3) {
       parent = parent.parent;
     }
     const singleRoot = context.root === parent && parent.node.children.filter((child) => child.type !== 3).length === 1;
-    (isComponent ? transformComponentElement : transformNativeElement)(
-      node,
-      propsResult,
-      singleRoot,
-      context,
-      isDynamicComponent
-    );
+    if (isComponent) {
+      transformComponentElement(
+        node,
+        propsResult,
+        singleRoot,
+        context,
+        isDynamicComponent
+      );
+    } else {
+      transformNativeElement(
+        node,
+        propsResult,
+        singleRoot,
+        context,
+        getEffectIndex
+      );
+    }
   };
 };
 function transformComponentElement(node, propsResult, singleRoot, context, isDynamicComponent) {
-  const dynamicComponent = isDynamicComponent ? resolveDynamicComponent(node) : undefined;
+  const dynamicComponent = isDynamicComponent ? resolveDynamicComponent(node) : void 0;
   let { tag } = node;
   let asset = true;
   if (!dynamicComponent) {
@@ -2528,21 +2579,24 @@ function transformComponentElement(node, propsResult, singleRoot, context, isDyn
       }
     }
     if (asset) {
+      if (context.selfName && shared.capitalize(shared.camelize(tag)) === context.selfName) {
+        tag += `__self`;
+      }
       context.component.add(tag);
     }
   }
   context.dynamic.flags |= 2 | 4;
-  context.registerOperation({
-    type: 12,
+  context.dynamic.operation = {
+    type: 11,
     id: context.reference(),
     tag,
     props: propsResult[0] ? propsResult[1] : [propsResult[1]],
     asset,
-    root: singleRoot,
+    root: singleRoot && !context.inVFor,
     slots: [...context.slots],
     once: context.inVOnce,
     dynamic: dynamicComponent
-  });
+  };
   context.slots = [];
 }
 function resolveDynamicComponent(node) {
@@ -2570,9 +2624,9 @@ function resolveSetupReference(name, context) {
   }
   const camelName = shared.camelize(name);
   const PascalName = shared.capitalize(camelName);
-  return bindings[name] ? name : bindings[camelName] ? camelName : bindings[PascalName] ? PascalName : undefined;
+  return bindings[name] ? name : bindings[camelName] ? camelName : bindings[PascalName] ? PascalName : void 0;
 }
-function transformNativeElement(node, propsResult, singleRoot, context) {
+function transformNativeElement(node, propsResult, singleRoot, context, getEffectIndex) {
   const { tag } = node;
   const { scopeId } = context.options;
   let template = "";
@@ -2581,12 +2635,16 @@ function transformNativeElement(node, propsResult, singleRoot, context) {
   const dynamicProps = [];
   if (propsResult[0]) {
     const [, dynamicArgs, expressions] = propsResult;
-    context.registerEffect(expressions, {
-      type: 3,
-      element: context.reference(),
-      props: dynamicArgs,
-      root: singleRoot
-    });
+    context.registerEffect(
+      expressions,
+      {
+        type: 3,
+        element: context.reference(),
+        props: dynamicArgs,
+        root: singleRoot
+      },
+      getEffectIndex
+    );
   } else {
     for (const prop of propsResult[1]) {
       const { key, values } = prop;
@@ -2595,13 +2653,17 @@ function transformNativeElement(node, propsResult, singleRoot, context) {
         if (values[0].content) template += `="${values[0].content}"`;
       } else {
         dynamicProps.push(key.content);
-        context.registerEffect(values, {
-          type: 2,
-          element: context.reference(),
-          prop,
-          root: singleRoot,
-          tag
-        });
+        context.registerEffect(
+          values,
+          {
+            type: 2,
+            element: context.reference(),
+            prop,
+            root: singleRoot,
+            tag
+          },
+          getEffectIndex
+        );
       }
     }
   }
@@ -2620,7 +2682,7 @@ function transformNativeElement(node, propsResult, singleRoot, context) {
     context.template += template;
   }
 }
-function buildProps(node, context, isComponent, isDynamicComponent) {
+function buildProps(node, context, isComponent, isDynamicComponent, getEffectIndex) {
   const props = node.props;
   if (props.length === 0) return [false, []];
   const dynamicArgs = [];
@@ -2665,7 +2727,8 @@ function buildProps(node, context, isComponent, isDynamicComponent) {
                 type: 6,
                 element: context.reference(),
                 event: prop.exp
-              }
+              },
+              getEffectIndex
             );
           }
         } else {
@@ -2722,7 +2785,7 @@ function transformProp(prop, node, context) {
       context.directive.add(name);
     }
     context.registerOperation({
-      type: 14,
+      type: 13,
       element: context.reference(),
       dir: prop,
       name,
@@ -2754,7 +2817,7 @@ function dedupeProperties(results) {
 }
 function resolveDirectiveResult(prop) {
   return shared.extend({}, prop, {
-    value: undefined,
+    value: void 0,
     values: [prop.value]
   });
 }
@@ -2787,6 +2850,17 @@ const transformVHtml = (dir, node, context) => {
   });
 };
+/*! #__NO_SIDE_EFFECTS__ */
+// @__NO_SIDE_EFFECTS__
+function makeMap(str) {
+  const map = /* @__PURE__ */ Object.create(null);
+  for (const key of str.split(",")) map[key] = 1;
+  return (val) => val in map;
+}
+const VOID_TAGS = "area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr";
+const isVoidTag = /* @__PURE__ */ makeMap(VOID_TAGS);
 const transformVText = (dir, node, context) => {
   let { exp, loc } = dir;
   if (!exp) {
@@ -2801,14 +2875,23 @@ const transformVText = (dir, node, context) => {
     );
     context.childrenTemplate.length = 0;
   }
+  if (isVoidTag(context.node.tag)) {
+    return;
+  }
   const literal = getLiteralExpressionValue(exp);
   if (literal != null) {
     context.childrenTemplate = [String(literal)];
   } else {
+    context.childrenTemplate = [" "];
+    context.registerOperation({
+      type: 17,
+      parent: context.reference()
+    });
     context.registerEffect([exp], {
       type: 4,
       element: context.reference(),
-      values: [exp]
+      values: [exp],
+      generated: true
     });
   }
 };
@@ -2856,7 +2939,7 @@ const transformVBind = (dir, node, context) => {
     value: exp,
     loc,
     runtimeCamelize: camel,
-    modifier: modifiersString.includes("prop") ? "." : modifiersString.includes("attr") ? "^" : undefined
+    modifier: modifiersString.includes("prop") ? "." : modifiersString.includes("attr") ? "^" : void 0
   };
 };
@@ -2881,7 +2964,6 @@ const transformVOn = (dir, node, context) => {
   );
   let keyOverride;
   const isStaticClick = arg.isStatic && arg.content.toLowerCase() === "click";
-  const delegate = arg.isStatic && !eventOptionModifiers.length && delegatedEvents(arg.content);
   if (nonKeyModifiers.includes("middle")) {
     if (isStaticClick) {
       arg = shared.extend({}, arg, { content: "mouseup" });
@@ -2905,6 +2987,7 @@ const transformVOn = (dir, node, context) => {
       handlerModifiers: eventOptionModifiers
     };
   }
+  const delegate = arg.isStatic && !eventOptionModifiers.length && delegatedEvents(arg.content);
   const operation = {
     type: 5,
     element: context.reference(),
@@ -2940,7 +3023,7 @@ const transformVShow = (dir, node, context) => {
     return;
   }
   context.registerOperation({
-    type: 14,
+    type: 13,
     element: context.reference(),
     dir,
     name: "show",
@@ -2963,7 +3046,7 @@ const transformTemplateRef = (node, context) => {
     const id = context.reference();
     const effect = !isConstantExpression(value);
     effect && context.registerOperation({
-      type: 15,
+      type: 14,
       id
     });
     context.registerEffect([value], {
@@ -2977,61 +3060,116 @@ const transformTemplateRef = (node, context) => {
 };
 const seen = /* @__PURE__ */ new WeakMap();
+function markNonTemplate(node, context) {
+  seen.get(context.root).add(node);
+}
 const transformText = (node, context) => {
   if (!seen.has(context.root)) seen.set(context.root, /* @__PURE__ */ new WeakSet());
   if (seen.get(context.root).has(node)) {
     context.dynamic.flags |= 2;
     return;
   }
-  if (node.type === 1 && node.tagType === 0 && isAllTextLike(node.children)) {
-    processTextLikeContainer(
-      node.children,
-      context
-    );
+  const isFragment = node.type === 0 || node.type === 1 && (node.tagType === 3 || node.tagType === 1);
+  if ((isFragment || node.type === 1 && node.tagType === 0) && node.children.length) {
+    let hasInterp = false;
+    let isAllTextLike = true;
+    for (const c of node.children) {
+      if (c.type === 5) {
+        hasInterp = true;
+      } else if (c.type !== 2) {
+        isAllTextLike = false;
+      }
+    }
+    if (!isFragment && isAllTextLike && hasInterp) {
+      processTextContainer(
+        node.children,
+        context
+      );
+    } else if (hasInterp) {
+      for (let i = 0; i < node.children.length; i++) {
+        const c = node.children[i];
+        const prev = node.children[i - 1];
+        if (c.type === 5 && prev && prev.type === 2) {
+          markNonTemplate(prev, context);
+        }
+      }
+    }
   } else if (node.type === 5) {
-    processTextLike(context);
+    processInterpolation(context);
   } else if (node.type === 2) {
     context.template += node.content;
   }
 };
-function processTextLike(context) {
-  const nexts = context.parent.node.children.slice(context.index);
+function processInterpolation(context) {
+  const parentNode = context.parent.node;
+  const children = parentNode.children;
+  const nexts = children.slice(context.index);
   const idx = nexts.findIndex((n) => !isTextLike(n));
   const nodes = idx > -1 ? nexts.slice(0, idx) : nexts;
+  const prev = children[context.index - 1];
+  if (prev && prev.type === 2) {
+    nodes.unshift(prev);
+  }
+  const values = processTextLikeChildren(nodes, context);
+  if (values.length === 0 && parentNode.type !== 0) {
+    return;
+  }
+  context.template += " ";
   const id = context.reference();
-  const values = nodes.map((node) => createTextLikeExpression(node, context));
-  context.dynamic.flags |= 4 | 2;
-  context.registerOperation({
-    type: 11,
-    id,
-    values,
-    effect: !values.every(isConstantExpression) && !context.inVOnce
-  });
+  if (values.length === 0) {
+    return;
+  }
+  const nonConstantExps = values.filter((v) => !isConstantExpression(v));
+  const isStatic = !nonConstantExps.length || nonConstantExps.every(
+    (e) => isStaticExpression(e, context.options.bindingMetadata)
+  ) || context.inVOnce;
+  if (isStatic) {
+    context.registerOperation({
+      type: 4,
+      element: id,
+      values
+    });
+  } else {
+    context.registerEffect(values, {
+      type: 4,
+      element: id,
+      values
+    });
+  }
 }
-function processTextLikeContainer(children, context) {
-  const values = children.map((child) => createTextLikeExpression(child, context));
+function processTextContainer(children, context) {
+  const values = processTextLikeChildren(children, context);
   const literals = values.map(getLiteralExpressionValue);
   if (literals.every((l) => l != null)) {
     context.childrenTemplate = literals.map((l) => String(l));
   } else {
+    context.childrenTemplate = [" "];
+    context.registerOperation({
+      type: 17,
+      parent: context.reference()
+    });
     context.registerEffect(values, {
       type: 4,
       element: context.reference(),
-      values
+      values,
+      // indicates this node is generated, so prefix should be "x" instead of "n"
+      generated: true
     });
   }
 }
-function createTextLikeExpression(node, context) {
-  seen.get(context.root).add(node);
-  if (node.type === 2) {
-    return compilerDom.createSimpleExpression(node.content, true, node.loc);
-  } else {
-    return node.content;
+function processTextLikeChildren(nodes, context) {
+  const exps = [];
+  for (const node of nodes) {
+    let exp;
+    markNonTemplate(node, context);
+    if (node.type === 2) {
+      exp = compilerDom.createSimpleExpression(node.content, true, node.loc);
+    } else {
+      exp = node.content;
+    }
+    if (exp.content) exps.push(exp);
   }
-}
-function isAllTextLike(children) {
-  return !!children.length && children.every(isTextLike) && // at least one an interpolation
-  children.some((n) => n.type === 5);
+  return exps;
 }
 function isTextLike(node) {
   return node.type === 5 || node.type === 2;
@@ -3095,7 +3233,7 @@ const transformVModel = (dir, node, context) => {
               modelType = "checkbox";
               break;
             case "file":
-              modelType = undefined;
+              modelType = void 0;
               context.options.onError(
                 compilerDom.createDOMCompilerError(
                   59,
@@ -3128,7 +3266,7 @@ const transformVModel = (dir, node, context) => {
   }
   if (modelType)
     context.registerOperation({
-      type: 14,
+      type: 13,
       element: context.reference(),
       dir,
       name: "model",
@@ -3198,29 +3336,38 @@ function processIf(node, dir, context) {
     const [branch, onExit] = createIfBranch(node, context);
     return () => {
       onExit();
-      context.registerOperation({
-        type: 16,
+      context.dynamic.operation = {
+        type: 15,
         id,
         condition: dir.exp,
         positive: branch,
-        once: context.inVOnce
-      });
+        once: context.inVOnce || isStaticExpression(dir.exp, context.options.bindingMetadata)
+      };
     };
   } else {
     const siblingIf = getSiblingIf(context, true);
-    const { operation } = context.block;
-    let lastIfNode = operation[operation.length - 1];
+    const siblings = context.parent && context.parent.dynamic.children;
+    let lastIfNode;
+    if (siblings) {
+      let i = siblings.length;
+      while (i--) {
+        if (siblings[i].operation && siblings[i].operation.type === 15) {
+          lastIfNode = siblings[i].operation;
+          break;
+        }
+      }
+    }
     if (
       // check if v-if is the sibling node
       !siblingIf || // check if IfNode is the last operation and get the root IfNode
-      !lastIfNode || lastIfNode.type !== 16
+      !lastIfNode || lastIfNode.type !== 15
     ) {
       context.options.onError(
         compilerDom.createCompilerError(30, node.loc)
       );
       return;
     }
-    while (lastIfNode.negative && lastIfNode.negative.type === 16) {
+    while (lastIfNode.negative && lastIfNode.negative.type === 15) {
       lastIfNode = lastIfNode.negative;
     }
     if (dir.name === "else-if" && lastIfNode.negative) {
@@ -3240,7 +3387,7 @@ function processIf(node, dir, context) {
       lastIfNode.negative = branch;
     } else {
       lastIfNode.negative = {
-        type: 16,
+        type: 15,
         id: -1,
         condition: dir.exp,
         positive: branch,
@@ -3288,8 +3435,10 @@ function processFor(node, dir, context) {
   context.reference();
   return () => {
     exitBlock();
-    context.registerOperation({
-      type: 17,
+    const { parent } = context;
+    const isOnlyChild = parent && parent.block.node !== parent.node && parent.node.children.length === 1;
+    context.dynamic.operation = {
+      type: 16,
       id,
       source,
       value,
@@ -3297,9 +3446,13 @@ function processFor(node, dir, context) {
       index,
       keyProp: keyProperty,
       render,
-      once: context.inVOnce,
-      component: isComponent
-    });
+      once: context.inVOnce || isStaticExpression(
+        source,
+        context.options.bindingMetadata
+      ),
+      component: isComponent,
+      onlyChild: !!isOnlyChild
+    };
   };
 }
@@ -3319,16 +3472,16 @@ const transformSlotOutlet = (node, context) => {
     if (prop.type === 6) {
       if (prop.value) {
         if (prop.name === "name") {
-          slotName = createSimpleExpression(prop.value.content, true, prop.loc);
+          slotName = compilerDom.createSimpleExpression(prop.value.content, true, prop.loc);
         } else {
           slotProps.push(shared.extend({}, prop, { name: shared.camelize(prop.name) }));
         }
       }
-    } else if (prop.name === "bind" && isStaticArgOf(prop.arg, "name")) {
+    } else if (prop.name === "bind" && compilerDom.isStaticArgOf(prop.arg, "name")) {
       if (prop.exp) {
         slotName = prop.exp;
       } else {
-        slotName = createSimpleExpression(
+        slotName = compilerDom.createSimpleExpression(
           shared.camelize(prop.arg.content),
           false,
           prop.arg.loc
@@ -3337,7 +3490,7 @@ const transformSlotOutlet = (node, context) => {
       }
     } else {
       let slotProp = prop;
-      if (slotProp.name === "bind" && slotProp.arg && isStaticExp(slotProp.arg)) {
+      if (slotProp.name === "bind" && slotProp.arg && compilerDom.isStaticExp(slotProp.arg)) {
         slotProp = shared.extend({}, prop, {
           arg: shared.extend({}, slotProp.arg, {
             content: shared.camelize(slotProp.arg.content)
@@ -3347,7 +3500,7 @@ const transformSlotOutlet = (node, context) => {
       slotProps.push(slotProp);
     }
   }
-  slotName || (slotName = createSimpleExpression("default", true));
+  slotName || (slotName = compilerDom.createSimpleExpression("default", true));
   let irProps = [];
   if (slotProps.length) {
     const [isDynamic, props] = buildProps(
@@ -3357,11 +3510,11 @@ const transformSlotOutlet = (node, context) => {
     );
     irProps = isDynamic ? props : [props];
     const runtimeDirective = context.block.operation.find(
-      (oper) => oper.type === 14 && oper.element === id
+      (oper) => oper.type === 13 && oper.element === id
     );
     if (runtimeDirective) {
       context.options.onError(
-        createCompilerError(
+        compilerDom.createCompilerError(
           36,
           runtimeDirective.dir.loc
         )
@@ -3370,13 +3523,13 @@ const transformSlotOutlet = (node, context) => {
   }
   return () => {
     exitBlock && exitBlock();
-    context.registerOperation({
-      type: 13,
+    context.dynamic.operation = {
+      type: 12,
       id,
       name: slotName,
       props: irProps,
       fallback
-    });
+    };
   };
 };
 function createFallback(node, context) {
@@ -3402,7 +3555,7 @@ const transformVSlot = (node, context) => {
   const { tagType, children } = node;
   const { parent } = context;
   const isComponent = tagType === 1;
-  const isSlotTemplate = isTemplateNode(node) && parent && parent.node.type === 1 && parent.node.tagType === 1;
+  const isSlotTemplate = compilerDom.isTemplateNode(node) && parent && parent.node.type === 1 && parent.node.tagType === 1;
   if (isComponent && children.length) {
     return transformComponentSlot(
       node,
@@ -3417,16 +3570,26 @@ const transformVSlot = (node, context) => {
     );
   } else if (!isComponent && dir) {
     context.options.onError(
-      createCompilerError(40, dir.loc)
+      compilerDom.createCompilerError(40, dir.loc)
     );
   }
 };
 function transformComponentSlot(node, dir, context) {
   const { children } = node;
   const arg = dir && dir.arg;
-  const nonSlotTemplateChildren = children.filter(
-    (n) => isNonWhitespaceContent(node) && !(n.type === 1 && n.props.some(isVSlot))
-  );
+  const emptyTextNodes = [];
+  const nonSlotTemplateChildren = children.filter((n) => {
+    if (isNonWhitespaceContent(n)) {
+      return !(n.type === 1 && n.props.some(compilerDom.isVSlot));
+    } else {
+      emptyTextNodes.push(n);
+    }
+  });
+  if (!nonSlotTemplateChildren.length) {
+    emptyTextNodes.forEach((n) => {
+      markNonTemplate(n, context);
+    });
+  }
   const [block, onExit] = createSlotBlock(node, dir, context);
   const { slots } = context;
   return () => {
@@ -3434,14 +3597,14 @@ function transformComponentSlot(node, dir, context) {
     const hasOtherSlots = !!slots.length;
     if (dir && hasOtherSlots) {
       context.options.onError(
-        createCompilerError(37, dir.loc)
+        compilerDom.createCompilerError(37, dir.loc)
       );
       return;
     }
     if (nonSlotTemplateChildren.length) {
       if (hasStaticSlot(slots, "default")) {
         context.options.onError(
-          createCompilerError(
+          compilerDom.createCompilerError(
             39,
             nonSlotTemplateChildren[0].loc
           )
@@ -3472,7 +3635,7 @@ function transformTemplateSlot(node, dir, context) {
     const slotName = arg ? arg.isStatic && arg.content : "default";
     if (slotName && hasStaticSlot(slots, slotName)) {
       context.options.onError(
-        createCompilerError(38, dir.loc)
+        compilerDom.createCompilerError(38, dir.loc)
       );
     } else {
       registerSlot(slots, arg, block);
@@ -3509,7 +3672,7 @@ function transformTemplateSlot(node, dir, context) {
       ifNode.negative = negative;
     } else {
       context.options.onError(
-        createCompilerError(30, vElse.loc)
+        compilerDom.createCompilerError(30, vElse.loc)
       );
     }
   } else if (vFor) {
@@ -3522,7 +3685,7 @@ function transformTemplateSlot(node, dir, context) {
       });
     } else {
       context.options.onError(
-        createCompilerError(32, vFor.loc)
+        compilerDom.createCompilerError(32, vFor.loc)
       );
     }
   }
@@ -3611,8 +3774,8 @@ function getBaseTransformPreset() {
       transformVFor,
       transformSlotOutlet,
       transformTemplateRef,
-      transformText,
       transformElement,
+      transformText,
       transformVSlot,
       transformComment,
       transformChildren
@@ -3628,74 +3791,6 @@ function getBaseTransformPreset() {
   ];
 }
-const IRDynamicPropsKind = {
-  "EXPRESSION": 0,
-  "0": "EXPRESSION",
-  "ATTRIBUTE": 1,
-  "1": "ATTRIBUTE"
-};
-const IRSlotType = {
-  "STATIC": 0,
-  "0": "STATIC",
-  "DYNAMIC": 1,
-  "1": "DYNAMIC",
-  "LOOP": 2,
-  "2": "LOOP",
-  "CONDITIONAL": 3,
-  "3": "CONDITIONAL",
-  "EXPRESSION": 4,
-  "4": "EXPRESSION"
-};
-const IRNodeTypes = {
-  "ROOT": 0,
-  "0": "ROOT",
-  "BLOCK": 1,
-  "1": "BLOCK",
-  "SET_PROP": 2,
-  "2": "SET_PROP",
-  "SET_DYNAMIC_PROPS": 3,
-  "3": "SET_DYNAMIC_PROPS",
-  "SET_TEXT": 4,
-  "4": "SET_TEXT",
-  "SET_EVENT": 5,
-  "5": "SET_EVENT",
-  "SET_DYNAMIC_EVENTS": 6,
-  "6": "SET_DYNAMIC_EVENTS",
-  "SET_HTML": 7,
-  "7": "SET_HTML",
-  "SET_TEMPLATE_REF": 8,
-  "8": "SET_TEMPLATE_REF",
-  "INSERT_NODE": 9,
-  "9": "INSERT_NODE",
-  "PREPEND_NODE": 10,
-  "10": "PREPEND_NODE",
-  "CREATE_TEXT_NODE": 11,
-  "11": "CREATE_TEXT_NODE",
-  "CREATE_COMPONENT_NODE": 12,
-  "12": "CREATE_COMPONENT_NODE",
-  "SLOT_OUTLET_NODE": 13,
-  "13": "SLOT_OUTLET_NODE",
-  "DIRECTIVE": 14,
-  "14": "DIRECTIVE",
-  "DECLARE_OLD_REF": 15,
-  "15": "DECLARE_OLD_REF",
-  "IF": 16,
-  "16": "IF",
-  "FOR": 17,
-  "17": "FOR"
-};
-const DynamicFlag = {
-  "NONE": 0,
-  "0": "NONE",
-  "REFERENCED": 1,
-  "1": "REFERENCED",
-  "NON_TEMPLATE": 2,
-  "2": "NON_TEMPLATE",
-  "INSERT": 4,
-  "4": "INSERT"
-};
 function createVaporCompilerError(code, loc) {
   return compilerDom.createCompilerError(
     code,
@@ -3731,6 +3826,7 @@ exports.createVaporCompilerError = createVaporCompilerError;
 exports.genCall = genCall;
 exports.genMulti = genMulti;
 exports.generate = generate;
+exports.isBlockOperation = isBlockOperation;
 exports.transform = transform;
 exports.transformChildren = transformChildren;
 exports.transformComment = transformComment;