@vue/compiler-sfc 3.3.0-alpha.7 → 3.3.0-alpha.9

package/dist/compiler-sfc.cjs.js

@@ -3396,6 +3396,13 @@ function transformDestructuredProps(ast, s, offset = 0, knownProps, error, vueIm
     rootScope[local] = true;
     propsLocalToPublicMap[local] = key;
   }
+  function pushScope() {
+    scopeStack.push(currentScope = Object.create(currentScope));
+  }
+  function popScope() {
+    scopeStack.pop();
+    currentScope = scopeStack[scopeStack.length - 1] || null;
+  }
   function registerLocalBinding(id) {
     excludedIds.add(id);
     if (currentScope) {
@@ -3439,36 +3446,29 @@ function transformDestructuredProps(ast, s, offset = 0, knownProps, error, vueIm
       }
     }
   }
-  function rewriteId(scope, id, parent, parentStack2) {
-    if (shared.hasOwn(scope, id.name)) {
-      const binding = scope[id.name];
-      if (binding) {
-        if (parent.type === "AssignmentExpression" && id === parent.left || parent.type === "UpdateExpression") {
-          error(`Cannot assign to destructured props as they are readonly.`, id);
-        }
-        if (compilerCore.isStaticProperty(parent) && parent.shorthand) {
-          if (!parent.inPattern || compilerCore.isInDestructureAssignment(parent, parentStack2)) {
-            s.appendLeft(
-              id.end + offset,
-              `: ${shared.genPropsAccessExp(propsLocalToPublicMap[id.name])}`
-            );
-          }
-        } else {
-          s.overwrite(
-            id.start + offset,
-            id.end + offset,
-            shared.genPropsAccessExp(propsLocalToPublicMap[id.name])
-          );
-        }
+  function rewriteId(id, parent, parentStack2) {
+    if (parent.type === "AssignmentExpression" && id === parent.left || parent.type === "UpdateExpression") {
+      error(`Cannot assign to destructured props as they are readonly.`, id);
+    }
+    if (compilerCore.isStaticProperty(parent) && parent.shorthand) {
+      if (!parent.inPattern || compilerCore.isInDestructureAssignment(parent, parentStack2)) {
+        s.appendLeft(
+          id.end + offset,
+          `: ${shared.genPropsAccessExp(propsLocalToPublicMap[id.name])}`
+        );
       }
-      return true;
+    } else {
+      s.overwrite(
+        id.start + offset,
+        id.end + offset,
+        shared.genPropsAccessExp(propsLocalToPublicMap[id.name])
+      );
     }
-    return false;
   }
   function checkUsage(node, method, alias = method) {
     if (compilerCore.isCallOf(node, alias)) {
       const arg = compilerCore.unwrapTSNode(node.arguments[0]);
-      if (arg.type === "Identifier") {
+      if (arg.type === "Identifier" && currentScope[arg.name]) {
         error(
           `"${arg.name}" is a destructured prop and should not be passed directly to ${method}(). Pass a getter () => ${arg.name} instead.`,
           arg
@@ -3486,7 +3486,7 @@ function transformDestructuredProps(ast, s, offset = 0, knownProps, error, vueIm
       checkUsage(node, "watch", vueImportAliases.watch);
       checkUsage(node, "toRef", vueImportAliases.toRef);
       if (compilerCore.isFunctionType(node)) {
-        scopeStack.push(currentScope = {});
+        pushScope();
         compilerCore.walkFunctionParams(node, registerLocalBinding);
         if (node.body.type === "BlockStatement") {
           walkScope(node.body);
@@ -3494,7 +3494,7 @@ function transformDestructuredProps(ast, s, offset = 0, knownProps, error, vueIm
         return;
       }
       if (node.type === "CatchClause") {
-        scopeStack.push(currentScope = {});
+        pushScope();
         if (node.param && node.param.type === "Identifier") {
           registerLocalBinding(node.param);
         }
@@ -3502,17 +3502,14 @@ function transformDestructuredProps(ast, s, offset = 0, knownProps, error, vueIm
         return;
       }
       if (node.type === "BlockStatement" && !compilerCore.isFunctionType(parent)) {
-        scopeStack.push(currentScope = {});
+        pushScope();
         walkScope(node);
         return;
       }
       if (node.type === "Identifier") {
         if (compilerCore.isReferencedIdentifier(node, parent, parentStack) && !excludedIds.has(node)) {
-          let i = scopeStack.length;
-          while (i--) {
-            if (rewriteId(scopeStack[i], node, parent, parentStack)) {
-              return;
-            }
+          if (currentScope[node.name]) {
+            rewriteId(node, parent, parentStack);
           }
         }
       }
@@ -3520,8 +3517,7 @@ function transformDestructuredProps(ast, s, offset = 0, knownProps, error, vueIm
     leave(node, parent) {
       parent && parentStack.pop();
       if (node.type === "BlockStatement" && !compilerCore.isFunctionType(parent) || compilerCore.isFunctionType(node)) {
-        scopeStack.pop();
-        currentScope = scopeStack[scopeStack.length - 1] || null;
+        popScope();
       }
     }
   });
@@ -3533,6 +3529,7 @@ const DEFINE_EXPOSE = "defineExpose";
 const WITH_DEFAULTS = "withDefaults";
 const DEFINE_OPTIONS = "defineOptions";
 const DEFINE_SLOTS = "defineSlots";
+const DEFINE_MODEL = "defineModel";
 const isBuiltInDir = shared.makeMap(
   `once,memo,if,for,else,else-if,slot,text,html,on,bind,model,show,cloak,is`
 );
@@ -3540,6 +3537,7 @@ function compileScript(sfc, options) {
   var _a;
   let { script, scriptSetup, source, filename } = sfc;
   const enableReactivityTransform = !!options.reactivityTransform;
+  const enableDefineModel = !!options.defineModel;
   const isProd = !!options.isProd;
   const genSourceMap = options.sourceMap !== false;
   const hoistStatic = options.hoistStatic !== false && !script;
@@ -3663,6 +3661,7 @@ export default ${defaultVar}`;
   let hasDefaultExportRender = false;
   let hasDefineOptionsCall = false;
   let hasDefineSlotsCall = false;
+  let hasDefineModelCall = false;
   let propsRuntimeDecl;
   let propsRuntimeDefaults;
   let propsDestructureDecl;
@@ -3674,6 +3673,7 @@ export default ${defaultVar}`;
   let emitsTypeDecl;
   let emitIdentifier;
   let optionsRuntimeDecl;
+  let modelDecls = {};
   let hasAwait = false;
   let hasInlinedSsrRenderFn = false;
   const typeDeclaredProps = {};
@@ -3896,6 +3896,61 @@ Prefer using destructure default values, e.g. const { foo = 1 } = defineProps(..
     }
     return true;
   }
+  function processDefineModel(node, declId) {
+    if (!enableDefineModel || !CompilerDOM.isCallOf(node, DEFINE_MODEL)) {
+      return false;
+    }
+    hasDefineModelCall = true;
+    const type = node.typeParameters && node.typeParameters.params[0] || void 0;
+    let modelName;
+    let options2;
+    const arg0 = node.arguments[0] && CompilerDOM.unwrapTSNode(node.arguments[0]);
+    if (arg0 && arg0.type === "StringLiteral") {
+      modelName = arg0.value;
+      options2 = node.arguments[1];
+    } else {
+      modelName = "modelValue";
+      options2 = arg0;
+    }
+    if (modelDecls[modelName]) {
+      error(`duplicate model name ${JSON.stringify(modelName)}`, node);
+    }
+    const optionsString = options2 ? s.slice(startOffset + options2.start, startOffset + options2.end) : void 0;
+    modelDecls[modelName] = {
+      type,
+      options: optionsString,
+      identifier: declId && declId.type === "Identifier" ? declId.name : void 0
+    };
+    let runtimeOptions2 = "";
+    if (options2) {
+      if (options2.type === "ObjectExpression") {
+        const local = options2.properties.find(
+          (p) => p.type === "ObjectProperty" && (p.key.type === "Identifier" && p.key.name === "local" || p.key.type === "StringLiteral" && p.key.value === "local")
+        );
+        if (local) {
+          runtimeOptions2 = `{ ${s.slice(
+            startOffset + local.start,
+            startOffset + local.end
+          )} }`;
+        } else {
+          for (const p of options2.properties) {
+            if (p.type === "SpreadElement" || p.computed) {
+              runtimeOptions2 = optionsString;
+              break;
+            }
+          }
+        }
+      } else {
+        runtimeOptions2 = optionsString;
+      }
+    }
+    s.overwrite(
+      startOffset + node.start,
+      startOffset + node.end,
+      `${helper("useModel")}(__props, ${JSON.stringify(modelName)}${runtimeOptions2 ? `, ${runtimeOptions2}` : ``})`
+    );
+    return true;
+  }
   function getAstBody() {
     return scriptAst ? [...scriptSetupAst.body, ...scriptAst.body] : scriptSetupAst.body;
   }
@@ -3955,8 +4010,10 @@ Prefer using destructure default values, e.g. const { foo = 1 } = defineProps(..
     if (node.typeParameters) {
       error(`${DEFINE_OPTIONS}() cannot accept type arguments`, node);
     }
+    if (!node.arguments[0])
+      return true;
     hasDefineOptionsCall = true;
-    optionsRuntimeDecl = node.arguments[0];
+    optionsRuntimeDecl = CompilerDOM.unwrapTSNode(node.arguments[0]);
     let propsOption = void 0;
     let emitsOption = void 0;
     let exposeOption = void 0;
@@ -4043,7 +4100,7 @@ Prefer using destructure default values, e.g. const { foo = 1 } = defineProps(..
       return;
     CompilerDOM.walkIdentifiers(node, (id) => {
       const binding = setupBindings[id.name];
-      if (binding && (binding !== "literal-const" || !hoistStatic)) {
+      if (binding && binding !== "literal-const") {
         error(
           `\`${method}()\` in <script setup> cannot reference locally declared variables because it will be hoisted outside of the setup() function. If your component options require initialization in the module scope, use a separate normal <script> to export the options instead.`,
           id
@@ -4080,61 +4137,135 @@ Prefer using destructure default values, e.g. const { foo = 1 } = defineProps(..
       (node) => node.type !== "SpreadElement" && (!node.computed || node.key.type.endsWith("Literal"))
     );
   }
-  function genRuntimeProps(props) {
-    const keys = Object.keys(props);
-    if (!keys.length) {
-      return ``;
-    }
-    const hasStaticDefaults = hasStaticWithDefaults();
-    const scriptSetupSource = scriptSetup.content;
-    let propsDecls = `{
+  function concatStrings(strs) {
+    return strs.filter((s2) => !!s2).join(", ");
+  }
+  function genRuntimeProps() {
+    function genPropsFromTS() {
+      const keys = Object.keys(typeDeclaredProps);
+      if (!keys.length)
+        return;
+      const hasStaticDefaults = hasStaticWithDefaults();
+      const scriptSetupSource = scriptSetup.content;
+      let propsDecls2 = `{
     ${keys.map((key) => {
-      let defaultString;
-      const destructured = genDestructuredDefaultValue(key, props[key].type);
-      if (destructured) {
-        defaultString = `default: ${destructured.valueString}${destructured.needSkipFactory ? `, skipFactory: true` : ``}`;
-      } else if (hasStaticDefaults) {
-        const prop = propsRuntimeDefaults.properties.find((node) => {
-          if (node.type === "SpreadElement")
-            return false;
-          return resolveObjectKey(node.key, node.computed) === key;
-        });
-        if (prop) {
-          if (prop.type === "ObjectProperty") {
-            defaultString = `default: ${scriptSetupSource.slice(
-              prop.value.start,
-              prop.value.end
-            )}`;
-          } else {
-            defaultString = `${prop.async ? "async " : ""}${prop.kind !== "method" ? `${prop.kind} ` : ""}default() ${scriptSetupSource.slice(
-              prop.body.start,
-              prop.body.end
-            )}`;
+        let defaultString;
+        const destructured = genDestructuredDefaultValue(
+          key,
+          typeDeclaredProps[key].type
+        );
+        if (destructured) {
+          defaultString = `default: ${destructured.valueString}${destructured.needSkipFactory ? `, skipFactory: true` : ``}`;
+        } else if (hasStaticDefaults) {
+          const prop = propsRuntimeDefaults.properties.find((node) => {
+            if (node.type === "SpreadElement")
+              return false;
+            return resolveObjectKey(node.key, node.computed) === key;
+          });
+          if (prop) {
+            if (prop.type === "ObjectProperty") {
+              defaultString = `default: ${scriptSetupSource.slice(
+                prop.value.start,
+                prop.value.end
+              )}`;
+            } else {
+              defaultString = `${prop.async ? "async " : ""}${prop.kind !== "method" ? `${prop.kind} ` : ""}default() ${scriptSetupSource.slice(
+                prop.body.start,
+                prop.body.end
+              )}`;
+            }
           }
         }
+        const { type, required, skipCheck } = typeDeclaredProps[key];
+        if (!isProd) {
+          return `${key}: { ${concatStrings([
+            `type: ${toRuntimeTypeString(type)}`,
+            `required: ${required}`,
+            skipCheck && "skipCheck: true",
+            defaultString
+          ])} }`;
+        } else if (type.some(
+          (el) => el === "Boolean" || (!hasStaticDefaults || defaultString) && el === "Function"
+        )) {
+          return `${key}: { ${concatStrings([
+            `type: ${toRuntimeTypeString(type)}`,
+            defaultString
+          ])} }`;
+        } else {
+          return `${key}: ${defaultString ? `{ ${defaultString} }` : `{}`}`;
+        }
+      }).join(",\n    ")}
+  }`;
+      if (propsRuntimeDefaults && !hasStaticDefaults) {
+        propsDecls2 = `${helper("mergeDefaults")}(${propsDecls2}, ${source.slice(
+          propsRuntimeDefaults.start + startOffset,
+          propsRuntimeDefaults.end + startOffset
+        )})`;
       }
-      const { type, required, skipCheck } = props[key];
-      if (!isProd) {
-        return `${key}: { type: ${toRuntimeTypeString(
-          type
-        )}, required: ${required}${skipCheck ? ", skipCheck: true" : ""}${defaultString ? `, ${defaultString}` : ``} }`;
-      } else if (type.some(
-        (el) => el === "Boolean" || (!hasStaticDefaults || defaultString) && el === "Function"
-      )) {
-        return `${key}: { type: ${toRuntimeTypeString(type)}${defaultString ? `, ${defaultString}` : ``} }`;
-      } else {
-        return `${key}: ${defaultString ? `{ ${defaultString} }` : "null"}`;
+      return propsDecls2;
+    }
+    function genModels() {
+      if (!hasDefineModelCall)
+        return;
+      let modelPropsDecl = "";
+      for (const [name, { type, options: options2 }] of Object.entries(modelDecls)) {
+        let skipCheck = false;
+        let runtimeTypes = type && inferRuntimeType(type, declaredTypes);
+        if (runtimeTypes) {
+          const hasUnknownType = runtimeTypes.includes(UNKNOWN_TYPE);
+          runtimeTypes = runtimeTypes.filter((el) => {
+            if (el === UNKNOWN_TYPE)
+              return false;
+            return isProd ? el === "Boolean" || el === "Function" && options2 : true;
+          });
+          skipCheck = !isProd && hasUnknownType && runtimeTypes.length > 0;
+        }
+        let runtimeType = runtimeTypes && runtimeTypes.length > 0 && toRuntimeTypeString(runtimeTypes) || void 0;
+        const codegenOptions = concatStrings([
+          runtimeType && `type: ${runtimeType}`,
+          skipCheck && "skipCheck: true"
+        ]);
+        let decl;
+        if (runtimeType && options2) {
+          decl = isTS ? `{ ${codegenOptions}, ...${options2} }` : `Object.assign({ ${codegenOptions} }, ${options2})`;
+        } else {
+          decl = options2 || (runtimeType ? `{ ${codegenOptions} }` : "{}");
+        }
+        modelPropsDecl += `
+    ${JSON.stringify(name)}: ${decl},`;
       }
-    }).join(",\n    ")}
+      return `{${modelPropsDecl}
   }`;
-    if (propsRuntimeDefaults && !hasStaticDefaults) {
-      propsDecls = `${helper("mergeDefaults")}(${propsDecls}, ${source.slice(
-        propsRuntimeDefaults.start + startOffset,
-        propsRuntimeDefaults.end + startOffset
-      )})`;
     }
-    return `
-  props: ${propsDecls},`;
+    let propsDecls;
+    if (propsRuntimeDecl) {
+      propsDecls = scriptSetup.content.slice(propsRuntimeDecl.start, propsRuntimeDecl.end).trim();
+      if (propsDestructureDecl) {
+        const defaults = [];
+        for (const key in propsDestructuredBindings) {
+          const d = genDestructuredDefaultValue(key);
+          if (d)
+            defaults.push(
+              `${key}: ${d.valueString}${d.needSkipFactory ? `, __skip_${key}: true` : ``}`
+            );
+        }
+        if (defaults.length) {
+          propsDecls = `${helper(
+            `mergeDefaults`
+          )}(${propsDecls}, {
+  ${defaults.join(",\n  ")}
+})`;
+        }
+      }
+    } else if (propsTypeDecl) {
+      propsDecls = genPropsFromTS();
+    }
+    const modelsDecls = genModels();
+    if (propsDecls && modelsDecls) {
+      return `${helper("mergeModels")}(${propsDecls}, ${modelsDecls})`;
+    } else {
+      return modelsDecls || propsDecls;
+    }
   }
   function genDestructuredDefaultValue(key, inferredType) {
     const destructured = propsDestructuredBindings[key];
@@ -4188,6 +4319,22 @@ Prefer using destructure default values, e.g. const { foo = 1 } = defineProps(..
       return scriptSource.slice(node.start, node.end);
     }
   }
+  function genRuntimeEmits() {
+    function genEmitsFromTS() {
+      return typeDeclaredEmits.size ? `[${Array.from(typeDeclaredEmits).map((k) => JSON.stringify(k)).join(", ")}]` : ``;
+    }
+    let emitsDecl2 = "";
+    if (emitsRuntimeDecl) {
+      emitsDecl2 = scriptSetup.content.slice(emitsRuntimeDecl.start, emitsRuntimeDecl.end).trim();
+    } else if (emitsTypeDecl) {
+      emitsDecl2 = genEmitsFromTS();
+    }
+    if (hasDefineModelCall) {
+      let modelEmitsDecl = `[${Object.keys(modelDecls).map((n) => JSON.stringify(`update:${n}`)).join(", ")}]`;
+      emitsDecl2 = emitsDecl2 ? `${helper("mergeModels")}(${emitsDecl2}, ${modelEmitsDecl})` : modelEmitsDecl;
+    }
+    return emitsDecl2;
+  }
   const scriptAst = script && parse(
     script.content,
     {
@@ -4333,10 +4480,22 @@ const ${normalScriptDefaultVar} = ${defaultSpecifier.local.name}
           }
         }
         if (node.declaration) {
-          walkDeclaration(node.declaration, scriptBindings, vueImportAliases);
+          walkDeclaration(
+            "script",
+            node.declaration,
+            scriptBindings,
+            vueImportAliases,
+            hoistStatic
+          );
         }
       } else if ((node.type === "VariableDeclaration" || node.type === "FunctionDeclaration" || node.type === "ClassDeclaration" || node.type === "TSEnumDeclaration") && !node.declare) {
-        walkDeclaration(node, scriptBindings, vueImportAliases);
+        walkDeclaration(
+          "script",
+          node,
+          scriptBindings,
+          vueImportAliases,
+          hoistStatic
+        );
       }
     }
     if (enableReactivityTransform && reactivityTransform.shouldTransform(script.content)) {
@@ -4376,6 +4535,8 @@ const ${normalScriptDefaultVar} = ${defaultSpecifier.local.name}
           callee.end + startOffset,
           "__expose"
         );
+      } else {
+        processDefineModel(expr);
       }
     }
     if (node.type === "VariableDeclaration" && !node.declare) {
@@ -4394,7 +4555,7 @@ const ${normalScriptDefaultVar} = ${defaultSpecifier.local.name}
           }
           const isDefineProps = processDefineProps(init, decl.id) || processWithDefaults(init, decl.id);
           const isDefineEmits = !isDefineProps && processDefineEmits(init, decl.id);
-          !isDefineEmits && processDefineSlots(init, decl.id);
+          !isDefineEmits && (processDefineSlots(init, decl.id) || processDefineModel(init, decl.id));
           if (isDefineProps || isDefineEmits) {
             if (left === 1) {
               s.remove(node.start + startOffset, node.end + startOffset);
@@ -4417,7 +4578,13 @@ const ${normalScriptDefaultVar} = ${defaultSpecifier.local.name}
     }
     let isAllLiteral = false;
     if ((node.type === "VariableDeclaration" || node.type === "FunctionDeclaration" || node.type === "ClassDeclaration" || node.type === "TSEnumDeclaration") && !node.declare) {
-      isAllLiteral = walkDeclaration(node, setupBindings, vueImportAliases);
+      isAllLiteral = walkDeclaration(
+        "scriptSetup",
+        node,
+        setupBindings,
+        vueImportAliases,
+        hoistStatic
+      );
     }
     if (hoistStatic && isAllLiteral) {
       hoistNode(node);
@@ -4525,6 +4692,9 @@ const ${normalScriptDefaultVar} = ${defaultSpecifier.local.name}
   for (const key in typeDeclaredProps) {
     bindingMetadata[key] = "props";
   }
+  for (const key in modelDecls) {
+    bindingMetadata[key] = "props";
+  }
   if (propsDestructureDecl) {
     if (propsDestructureRestId) {
       bindingMetadata[propsDestructureRestId] = "setup-reactive-const";
@@ -4707,36 +4877,14 @@ return ${returned}
     runtimeOptions += `
   __ssrInlineRender: true,`;
   }
-  if (propsRuntimeDecl) {
-    let declCode = scriptSetup.content.slice(propsRuntimeDecl.start, propsRuntimeDecl.end).trim();
-    if (propsDestructureDecl) {
-      const defaults = [];
-      for (const key in propsDestructuredBindings) {
-        const d = genDestructuredDefaultValue(key);
-        if (d)
-          defaults.push(
-            `${key}: ${d.valueString}${d.needSkipFactory ? `, __skip_${key}: true` : ``}`
-          );
-      }
-      if (defaults.length) {
-        declCode = `${helper(
-          `mergeDefaults`
-        )}(${declCode}, {
-  ${defaults.join(",\n  ")}
-})`;
-      }
-    }
+  const propsDecl = genRuntimeProps();
+  if (propsDecl)
     runtimeOptions += `
-  props: ${declCode},`;
-  } else if (propsTypeDecl) {
-    runtimeOptions += genRuntimeProps(typeDeclaredProps);
-  }
-  if (emitsRuntimeDecl) {
+  props: ${propsDecl},`;
+  const emitsDecl = genRuntimeEmits();
+  if (emitsDecl)
     runtimeOptions += `
-  emits: ${scriptSetup.content.slice(emitsRuntimeDecl.start, emitsRuntimeDecl.end).trim()},`;
-  } else if (emitsTypeDecl) {
-    runtimeOptions += genRuntimeEmits(typeDeclaredEmits);
-  }
+  emits: ${emitsDecl},`;
   let definedOptions = "";
   if (optionsRuntimeDecl) {
     definedOptions = scriptSetup.content.slice(optionsRuntimeDecl.start, optionsRuntimeDecl.end).trim();
@@ -4802,7 +4950,7 @@ ${exposeCall}`
 function registerBinding(bindings, node, type) {
   bindings[node.name] = type;
 }
-function walkDeclaration(node, bindings, userImportAliases) {
+function walkDeclaration(from, node, bindings, userImportAliases, hoistStatic) {
   let isAllLiteral = false;
   if (node.type === "VariableDeclaration") {
     const isConst = node.kind === "const";
@@ -4818,7 +4966,7 @@ function walkDeclaration(node, bindings, userImportAliases) {
       if (id.type === "Identifier") {
         let bindingType;
         const userReactiveBinding = userImportAliases["reactive"];
-        if (isAllLiteral || isConst && isStaticNode(init)) {
+        if ((hoistStatic || from === "script") && (isAllLiteral || isConst && isStaticNode(init))) {
           bindingType = "literal-const";
         } else if (CompilerDOM.isCallOf(init, userReactiveBinding)) {
           bindingType = isConst ? "setup-reactive-const" : "setup-let";
@@ -4829,7 +4977,7 @@ function walkDeclaration(node, bindings, userImportAliases) {
         ) {
           bindingType = CompilerDOM.isCallOf(init, DEFINE_PROPS) ? "setup-reactive-const" : "setup-const";
         } else if (isConst) {
-          if (CompilerDOM.isCallOf(init, userImportAliases["ref"])) {
+          if (CompilerDOM.isCallOf(init, userImportAliases["ref"]) || CompilerDOM.isCallOf(init, DEFINE_MODEL)) {
             bindingType = "setup-ref";
           } else {
             bindingType = "setup-maybe-ref";
@@ -5113,11 +5261,15 @@ function extractRuntimeEmits(node, emits, error) {
         hasCallSignature = true;
       }
       if (t.type === "TSPropertySignature") {
-        if (t.key.type !== "Identifier" || t.computed) {
+        if (t.key.type === "Identifier" && !t.computed) {
+          emits.add(t.key.name);
+          hasProperty = true;
+        } else if (t.key.type === "StringLiteral" && !t.computed) {
+          emits.add(t.key.value);
+          hasProperty = true;
+        } else {
           error(`defineEmits() type cannot use computed keys.`, t.key);
         }
-        emits.add(t.key.name);
-        hasProperty = true;
       }
     }
     if (hasCallSignature && hasProperty) {
@@ -5147,10 +5299,6 @@ function extractEventNames(eventName, emits) {
     }
   }
 }
-function genRuntimeEmits(emits) {
-  return emits.size ? `
-  emits: [${Array.from(emits).map((p) => JSON.stringify(p)).join(", ")}],` : ``;
-}
 function canNeverBeRef(node, userReactiveImport) {
   if (CompilerDOM.isCallOf(node, userReactiveImport)) {
     return true;
@@ -14318,7 +14466,7 @@ function preprocess(options, preprocessor) {
   );
 }
 
-const version = "3.3.0-alpha.7";
+const version = "3.3.0-alpha.9";
 const walk = estreeWalker.walk;
 
 exports.MagicString = MagicString;

package/dist/compiler-sfc.d.ts

@@ -119,6 +119,10 @@ export interface SFCScriptCompileOptions {
      * @default true
      */
     hoistStatic?: boolean;
+    /**
+     * (**Experimental**) Enable macro `defineModel`
+     */
+    defineModel?: boolean;
 }
 interface ImportBinding {
     isType: boolean;

package/dist/compiler-sfc.esm-browser.js

@@ -22874,7 +22874,7 @@ const transformText = (node, context) => {
 const seen$1 = /* @__PURE__ */ new WeakSet();
 const transformOnce = (node, context) => {
   if (node.type === 1 && findDir(node, "once", true)) {
-    if (seen$1.has(node) || context.inVOnce) {
+    if (seen$1.has(node) || context.inVOnce || context.inSSR) {
       return;
     }
     seen$1.add(node);
@@ -34501,6 +34501,13 @@ function transformDestructuredProps(ast, s, offset = 0, knownProps, error, vueIm
     rootScope[local] = true;
     propsLocalToPublicMap[local] = key;
   }
+  function pushScope() {
+    scopeStack.push(currentScope = Object.create(currentScope));
+  }
+  function popScope() {
+    scopeStack.pop();
+    currentScope = scopeStack[scopeStack.length - 1] || null;
+  }
   function registerLocalBinding(id) {
     excludedIds.add(id);
     if (currentScope) {
@@ -34544,36 +34551,29 @@ function transformDestructuredProps(ast, s, offset = 0, knownProps, error, vueIm
       }
     }
   }
-  function rewriteId(scope, id, parent, parentStack2) {
-    if (hasOwn(scope, id.name)) {
-      const binding = scope[id.name];
-      if (binding) {
-        if (parent.type === "AssignmentExpression" && id === parent.left || parent.type === "UpdateExpression") {
-          error(`Cannot assign to destructured props as they are readonly.`, id);
-        }
-        if (isStaticProperty(parent) && parent.shorthand) {
-          if (!parent.inPattern || isInDestructureAssignment(parent, parentStack2)) {
-            s.appendLeft(
-              id.end + offset,
-              `: ${genPropsAccessExp(propsLocalToPublicMap[id.name])}`
-            );
-          }
-        } else {
-          s.overwrite(
-            id.start + offset,
-            id.end + offset,
-            genPropsAccessExp(propsLocalToPublicMap[id.name])
-          );
-        }
+  function rewriteId(id, parent, parentStack2) {
+    if (parent.type === "AssignmentExpression" && id === parent.left || parent.type === "UpdateExpression") {
+      error(`Cannot assign to destructured props as they are readonly.`, id);
+    }
+    if (isStaticProperty(parent) && parent.shorthand) {
+      if (!parent.inPattern || isInDestructureAssignment(parent, parentStack2)) {
+        s.appendLeft(
+          id.end + offset,
+          `: ${genPropsAccessExp(propsLocalToPublicMap[id.name])}`
+        );
       }
-      return true;
+    } else {
+      s.overwrite(
+        id.start + offset,
+        id.end + offset,
+        genPropsAccessExp(propsLocalToPublicMap[id.name])
+      );
     }
-    return false;
   }
   function checkUsage(node, method, alias = method) {
     if (isCallOf(node, alias)) {
       const arg = unwrapTSNode(node.arguments[0]);
-      if (arg.type === "Identifier") {
+      if (arg.type === "Identifier" && currentScope[arg.name]) {
         error(
           `"${arg.name}" is a destructured prop and should not be passed directly to ${method}(). Pass a getter () => ${arg.name} instead.`,
           arg
@@ -34591,7 +34591,7 @@ function transformDestructuredProps(ast, s, offset = 0, knownProps, error, vueIm
       checkUsage(node, "watch", vueImportAliases.watch);
       checkUsage(node, "toRef", vueImportAliases.toRef);
       if (isFunctionType(node)) {
-        scopeStack.push(currentScope = {});
+        pushScope();
         walkFunctionParams(node, registerLocalBinding);
         if (node.body.type === "BlockStatement") {
           walkScope(node.body);
@@ -34599,7 +34599,7 @@ function transformDestructuredProps(ast, s, offset = 0, knownProps, error, vueIm
         return;
       }
       if (node.type === "CatchClause") {
-        scopeStack.push(currentScope = {});
+        pushScope();
         if (node.param && node.param.type === "Identifier") {
           registerLocalBinding(node.param);
         }
@@ -34607,17 +34607,14 @@ function transformDestructuredProps(ast, s, offset = 0, knownProps, error, vueIm
         return;
       }
       if (node.type === "BlockStatement" && !isFunctionType(parent)) {
-        scopeStack.push(currentScope = {});
+        pushScope();
         walkScope(node);
         return;
       }
       if (node.type === "Identifier") {
         if (isReferencedIdentifier(node, parent, parentStack) && !excludedIds.has(node)) {
-          let i = scopeStack.length;
-          while (i--) {
-            if (rewriteId(scopeStack[i], node, parent, parentStack)) {
-              return;
-            }
+          if (currentScope[node.name]) {
+            rewriteId(node, parent, parentStack);
           }
         }
       }
@@ -34625,8 +34622,7 @@ function transformDestructuredProps(ast, s, offset = 0, knownProps, error, vueIm
     leave(node, parent) {
       parent && parentStack.pop();
       if (node.type === "BlockStatement" && !isFunctionType(parent) || isFunctionType(node)) {
-        scopeStack.pop();
-        currentScope = scopeStack[scopeStack.length - 1] || null;
+        popScope();
       }
     }
   });
@@ -34657,6 +34653,7 @@ const DEFINE_EXPOSE = "defineExpose";
 const WITH_DEFAULTS = "withDefaults";
 const DEFINE_OPTIONS = "defineOptions";
 const DEFINE_SLOTS = "defineSlots";
+const DEFINE_MODEL = "defineModel";
 const isBuiltInDir = makeMap(
   `once,memo,if,for,else,else-if,slot,text,html,on,bind,model,show,cloak,is`
 );
@@ -34664,6 +34661,7 @@ function compileScript(sfc, options) {
   var _a;
   let { script, scriptSetup, source, filename } = sfc;
   const enableReactivityTransform = !!options.reactivityTransform;
+  const enableDefineModel = !!options.defineModel;
   const isProd = !!options.isProd;
   const genSourceMap = options.sourceMap !== false;
   const hoistStatic = options.hoistStatic !== false && !script;
@@ -34786,6 +34784,7 @@ export default ${defaultVar}`;
   let hasDefaultExportRender = false;
   let hasDefineOptionsCall = false;
   let hasDefineSlotsCall = false;
+  let hasDefineModelCall = false;
   let propsRuntimeDecl;
   let propsRuntimeDefaults;
   let propsDestructureDecl;
@@ -34797,6 +34796,7 @@ export default ${defaultVar}`;
   let emitsTypeDecl;
   let emitIdentifier;
   let optionsRuntimeDecl;
+  let modelDecls = {};
   let hasAwait = false;
   let hasInlinedSsrRenderFn = false;
   const typeDeclaredProps = {};
@@ -35019,6 +35019,61 @@ Prefer using destructure default values, e.g. const { foo = 1 } = defineProps(..
     }
     return true;
   }
+  function processDefineModel(node, declId) {
+    if (!enableDefineModel || !isCallOf(node, DEFINE_MODEL)) {
+      return false;
+    }
+    hasDefineModelCall = true;
+    const type = node.typeParameters && node.typeParameters.params[0] || void 0;
+    let modelName;
+    let options2;
+    const arg0 = node.arguments[0] && unwrapTSNode(node.arguments[0]);
+    if (arg0 && arg0.type === "StringLiteral") {
+      modelName = arg0.value;
+      options2 = node.arguments[1];
+    } else {
+      modelName = "modelValue";
+      options2 = arg0;
+    }
+    if (modelDecls[modelName]) {
+      error(`duplicate model name ${JSON.stringify(modelName)}`, node);
+    }
+    const optionsString = options2 ? s.slice(startOffset + options2.start, startOffset + options2.end) : void 0;
+    modelDecls[modelName] = {
+      type,
+      options: optionsString,
+      identifier: declId && declId.type === "Identifier" ? declId.name : void 0
+    };
+    let runtimeOptions2 = "";
+    if (options2) {
+      if (options2.type === "ObjectExpression") {
+        const local = options2.properties.find(
+          (p) => p.type === "ObjectProperty" && (p.key.type === "Identifier" && p.key.name === "local" || p.key.type === "StringLiteral" && p.key.value === "local")
+        );
+        if (local) {
+          runtimeOptions2 = `{ ${s.slice(
+            startOffset + local.start,
+            startOffset + local.end
+          )} }`;
+        } else {
+          for (const p of options2.properties) {
+            if (p.type === "SpreadElement" || p.computed) {
+              runtimeOptions2 = optionsString;
+              break;
+            }
+          }
+        }
+      } else {
+        runtimeOptions2 = optionsString;
+      }
+    }
+    s.overwrite(
+      startOffset + node.start,
+      startOffset + node.end,
+      `${helper("useModel")}(__props, ${JSON.stringify(modelName)}${runtimeOptions2 ? `, ${runtimeOptions2}` : ``})`
+    );
+    return true;
+  }
   function getAstBody() {
     return scriptAst ? [...scriptSetupAst.body, ...scriptAst.body] : scriptSetupAst.body;
   }
@@ -35078,8 +35133,10 @@ Prefer using destructure default values, e.g. const { foo = 1 } = defineProps(..
     if (node.typeParameters) {
       error(`${DEFINE_OPTIONS}() cannot accept type arguments`, node);
     }
+    if (!node.arguments[0])
+      return true;
     hasDefineOptionsCall = true;
-    optionsRuntimeDecl = node.arguments[0];
+    optionsRuntimeDecl = unwrapTSNode(node.arguments[0]);
     let propsOption = void 0;
     let emitsOption = void 0;
     let exposeOption = void 0;
@@ -35166,7 +35223,7 @@ Prefer using destructure default values, e.g. const { foo = 1 } = defineProps(..
       return;
     walkIdentifiers(node, (id) => {
       const binding = setupBindings[id.name];
-      if (binding && (binding !== "literal-const" || !hoistStatic)) {
+      if (binding && binding !== "literal-const") {
         error(
           `\`${method}()\` in <script setup> cannot reference locally declared variables because it will be hoisted outside of the setup() function. If your component options require initialization in the module scope, use a separate normal <script> to export the options instead.`,
           id
@@ -35203,61 +35260,135 @@ Prefer using destructure default values, e.g. const { foo = 1 } = defineProps(..
       (node) => node.type !== "SpreadElement" && (!node.computed || node.key.type.endsWith("Literal"))
     );
   }
-  function genRuntimeProps(props) {
-    const keys = Object.keys(props);
-    if (!keys.length) {
-      return ``;
-    }
-    const hasStaticDefaults = hasStaticWithDefaults();
-    const scriptSetupSource = scriptSetup.content;
-    let propsDecls = `{
+  function concatStrings(strs) {
+    return strs.filter((s2) => !!s2).join(", ");
+  }
+  function genRuntimeProps() {
+    function genPropsFromTS() {
+      const keys = Object.keys(typeDeclaredProps);
+      if (!keys.length)
+        return;
+      const hasStaticDefaults = hasStaticWithDefaults();
+      const scriptSetupSource = scriptSetup.content;
+      let propsDecls2 = `{
     ${keys.map((key) => {
-      let defaultString;
-      const destructured = genDestructuredDefaultValue(key, props[key].type);
-      if (destructured) {
-        defaultString = `default: ${destructured.valueString}${destructured.needSkipFactory ? `, skipFactory: true` : ``}`;
-      } else if (hasStaticDefaults) {
-        const prop = propsRuntimeDefaults.properties.find((node) => {
-          if (node.type === "SpreadElement")
-            return false;
-          return resolveObjectKey(node.key, node.computed) === key;
-        });
-        if (prop) {
-          if (prop.type === "ObjectProperty") {
-            defaultString = `default: ${scriptSetupSource.slice(
-              prop.value.start,
-              prop.value.end
-            )}`;
-          } else {
-            defaultString = `${prop.async ? "async " : ""}${prop.kind !== "method" ? `${prop.kind} ` : ""}default() ${scriptSetupSource.slice(
-              prop.body.start,
-              prop.body.end
-            )}`;
+        let defaultString;
+        const destructured = genDestructuredDefaultValue(
+          key,
+          typeDeclaredProps[key].type
+        );
+        if (destructured) {
+          defaultString = `default: ${destructured.valueString}${destructured.needSkipFactory ? `, skipFactory: true` : ``}`;
+        } else if (hasStaticDefaults) {
+          const prop = propsRuntimeDefaults.properties.find((node) => {
+            if (node.type === "SpreadElement")
+              return false;
+            return resolveObjectKey(node.key, node.computed) === key;
+          });
+          if (prop) {
+            if (prop.type === "ObjectProperty") {
+              defaultString = `default: ${scriptSetupSource.slice(
+                prop.value.start,
+                prop.value.end
+              )}`;
+            } else {
+              defaultString = `${prop.async ? "async " : ""}${prop.kind !== "method" ? `${prop.kind} ` : ""}default() ${scriptSetupSource.slice(
+                prop.body.start,
+                prop.body.end
+              )}`;
+            }
           }
         }
+        const { type, required, skipCheck } = typeDeclaredProps[key];
+        if (!isProd) {
+          return `${key}: { ${concatStrings([
+            `type: ${toRuntimeTypeString(type)}`,
+            `required: ${required}`,
+            skipCheck && "skipCheck: true",
+            defaultString
+          ])} }`;
+        } else if (type.some(
+          (el) => el === "Boolean" || (!hasStaticDefaults || defaultString) && el === "Function"
+        )) {
+          return `${key}: { ${concatStrings([
+            `type: ${toRuntimeTypeString(type)}`,
+            defaultString
+          ])} }`;
+        } else {
+          return `${key}: ${defaultString ? `{ ${defaultString} }` : `{}`}`;
+        }
+      }).join(",\n    ")}
+  }`;
+      if (propsRuntimeDefaults && !hasStaticDefaults) {
+        propsDecls2 = `${helper("mergeDefaults")}(${propsDecls2}, ${source.slice(
+          propsRuntimeDefaults.start + startOffset,
+          propsRuntimeDefaults.end + startOffset
+        )})`;
       }
-      const { type, required, skipCheck } = props[key];
-      if (!isProd) {
-        return `${key}: { type: ${toRuntimeTypeString(
-          type
-        )}, required: ${required}${skipCheck ? ", skipCheck: true" : ""}${defaultString ? `, ${defaultString}` : ``} }`;
-      } else if (type.some(
-        (el) => el === "Boolean" || (!hasStaticDefaults || defaultString) && el === "Function"
-      )) {
-        return `${key}: { type: ${toRuntimeTypeString(type)}${defaultString ? `, ${defaultString}` : ``} }`;
-      } else {
-        return `${key}: ${defaultString ? `{ ${defaultString} }` : "null"}`;
+      return propsDecls2;
+    }
+    function genModels() {
+      if (!hasDefineModelCall)
+        return;
+      let modelPropsDecl = "";
+      for (const [name, { type, options: options2 }] of Object.entries(modelDecls)) {
+        let skipCheck = false;
+        let runtimeTypes = type && inferRuntimeType(type, declaredTypes);
+        if (runtimeTypes) {
+          const hasUnknownType = runtimeTypes.includes(UNKNOWN_TYPE);
+          runtimeTypes = runtimeTypes.filter((el) => {
+            if (el === UNKNOWN_TYPE)
+              return false;
+            return isProd ? el === "Boolean" || el === "Function" && options2 : true;
+          });
+          skipCheck = !isProd && hasUnknownType && runtimeTypes.length > 0;
+        }
+        let runtimeType = runtimeTypes && runtimeTypes.length > 0 && toRuntimeTypeString(runtimeTypes) || void 0;
+        const codegenOptions = concatStrings([
+          runtimeType && `type: ${runtimeType}`,
+          skipCheck && "skipCheck: true"
+        ]);
+        let decl;
+        if (runtimeType && options2) {
+          decl = isTS ? `{ ${codegenOptions}, ...${options2} }` : `Object.assign({ ${codegenOptions} }, ${options2})`;
+        } else {
+          decl = options2 || (runtimeType ? `{ ${codegenOptions} }` : "{}");
+        }
+        modelPropsDecl += `
+    ${JSON.stringify(name)}: ${decl},`;
       }
-    }).join(",\n    ")}
+      return `{${modelPropsDecl}
   }`;
-    if (propsRuntimeDefaults && !hasStaticDefaults) {
-      propsDecls = `${helper("mergeDefaults")}(${propsDecls}, ${source.slice(
-        propsRuntimeDefaults.start + startOffset,
-        propsRuntimeDefaults.end + startOffset
-      )})`;
     }
-    return `
-  props: ${propsDecls},`;
+    let propsDecls;
+    if (propsRuntimeDecl) {
+      propsDecls = scriptSetup.content.slice(propsRuntimeDecl.start, propsRuntimeDecl.end).trim();
+      if (propsDestructureDecl) {
+        const defaults = [];
+        for (const key in propsDestructuredBindings) {
+          const d = genDestructuredDefaultValue(key);
+          if (d)
+            defaults.push(
+              `${key}: ${d.valueString}${d.needSkipFactory ? `, __skip_${key}: true` : ``}`
+            );
+        }
+        if (defaults.length) {
+          propsDecls = `${helper(
+            `mergeDefaults`
+          )}(${propsDecls}, {
+  ${defaults.join(",\n  ")}
+})`;
+        }
+      }
+    } else if (propsTypeDecl) {
+      propsDecls = genPropsFromTS();
+    }
+    const modelsDecls = genModels();
+    if (propsDecls && modelsDecls) {
+      return `${helper("mergeModels")}(${propsDecls}, ${modelsDecls})`;
+    } else {
+      return modelsDecls || propsDecls;
+    }
   }
   function genDestructuredDefaultValue(key, inferredType) {
     const destructured = propsDestructuredBindings[key];
@@ -35311,6 +35442,22 @@ Prefer using destructure default values, e.g. const { foo = 1 } = defineProps(..
       return scriptSource.slice(node.start, node.end);
     }
   }
+  function genRuntimeEmits() {
+    function genEmitsFromTS() {
+      return typeDeclaredEmits.size ? `[${Array.from(typeDeclaredEmits).map((k) => JSON.stringify(k)).join(", ")}]` : ``;
+    }
+    let emitsDecl2 = "";
+    if (emitsRuntimeDecl) {
+      emitsDecl2 = scriptSetup.content.slice(emitsRuntimeDecl.start, emitsRuntimeDecl.end).trim();
+    } else if (emitsTypeDecl) {
+      emitsDecl2 = genEmitsFromTS();
+    }
+    if (hasDefineModelCall) {
+      let modelEmitsDecl = `[${Object.keys(modelDecls).map((n) => JSON.stringify(`update:${n}`)).join(", ")}]`;
+      emitsDecl2 = emitsDecl2 ? `${helper("mergeModels")}(${emitsDecl2}, ${modelEmitsDecl})` : modelEmitsDecl;
+    }
+    return emitsDecl2;
+  }
   const scriptAst = script && parse(
     script.content,
     {
@@ -35456,10 +35603,22 @@ const ${normalScriptDefaultVar} = ${defaultSpecifier.local.name}
           }
         }
         if (node.declaration) {
-          walkDeclaration(node.declaration, scriptBindings, vueImportAliases);
+          walkDeclaration(
+            "script",
+            node.declaration,
+            scriptBindings,
+            vueImportAliases,
+            hoistStatic
+          );
         }
       } else if ((node.type === "VariableDeclaration" || node.type === "FunctionDeclaration" || node.type === "ClassDeclaration" || node.type === "TSEnumDeclaration") && !node.declare) {
-        walkDeclaration(node, scriptBindings, vueImportAliases);
+        walkDeclaration(
+          "script",
+          node,
+          scriptBindings,
+          vueImportAliases,
+          hoistStatic
+        );
       }
     }
     if (enableReactivityTransform && shouldTransform(script.content)) {
@@ -35499,6 +35658,8 @@ const ${normalScriptDefaultVar} = ${defaultSpecifier.local.name}
           callee.end + startOffset,
           "__expose"
         );
+      } else {
+        processDefineModel(expr);
       }
     }
     if (node.type === "VariableDeclaration" && !node.declare) {
@@ -35517,7 +35678,7 @@ const ${normalScriptDefaultVar} = ${defaultSpecifier.local.name}
           }
           const isDefineProps = processDefineProps(init, decl.id) || processWithDefaults(init, decl.id);
           const isDefineEmits = !isDefineProps && processDefineEmits(init, decl.id);
-          !isDefineEmits && processDefineSlots(init, decl.id);
+          !isDefineEmits && (processDefineSlots(init, decl.id) || processDefineModel(init, decl.id));
           if (isDefineProps || isDefineEmits) {
             if (left === 1) {
               s.remove(node.start + startOffset, node.end + startOffset);
@@ -35540,7 +35701,13 @@ const ${normalScriptDefaultVar} = ${defaultSpecifier.local.name}
     }
     let isAllLiteral = false;
     if ((node.type === "VariableDeclaration" || node.type === "FunctionDeclaration" || node.type === "ClassDeclaration" || node.type === "TSEnumDeclaration") && !node.declare) {
-      isAllLiteral = walkDeclaration(node, setupBindings, vueImportAliases);
+      isAllLiteral = walkDeclaration(
+        "scriptSetup",
+        node,
+        setupBindings,
+        vueImportAliases,
+        hoistStatic
+      );
     }
     if (hoistStatic && isAllLiteral) {
       hoistNode(node);
@@ -35648,6 +35815,9 @@ const ${normalScriptDefaultVar} = ${defaultSpecifier.local.name}
   for (const key in typeDeclaredProps) {
     bindingMetadata[key] = "props";
   }
+  for (const key in modelDecls) {
+    bindingMetadata[key] = "props";
+  }
   if (propsDestructureDecl) {
     if (propsDestructureRestId) {
       bindingMetadata[propsDestructureRestId] = "setup-reactive-const";
@@ -35826,36 +35996,14 @@ return ${returned}
     runtimeOptions += `
   __ssrInlineRender: true,`;
   }
-  if (propsRuntimeDecl) {
-    let declCode = scriptSetup.content.slice(propsRuntimeDecl.start, propsRuntimeDecl.end).trim();
-    if (propsDestructureDecl) {
-      const defaults = [];
-      for (const key in propsDestructuredBindings) {
-        const d = genDestructuredDefaultValue(key);
-        if (d)
-          defaults.push(
-            `${key}: ${d.valueString}${d.needSkipFactory ? `, __skip_${key}: true` : ``}`
-          );
-      }
-      if (defaults.length) {
-        declCode = `${helper(
-          `mergeDefaults`
-        )}(${declCode}, {
-  ${defaults.join(",\n  ")}
-})`;
-      }
-    }
+  const propsDecl = genRuntimeProps();
+  if (propsDecl)
     runtimeOptions += `
-  props: ${declCode},`;
-  } else if (propsTypeDecl) {
-    runtimeOptions += genRuntimeProps(typeDeclaredProps);
-  }
-  if (emitsRuntimeDecl) {
+  props: ${propsDecl},`;
+  const emitsDecl = genRuntimeEmits();
+  if (emitsDecl)
     runtimeOptions += `
-  emits: ${scriptSetup.content.slice(emitsRuntimeDecl.start, emitsRuntimeDecl.end).trim()},`;
-  } else if (emitsTypeDecl) {
-    runtimeOptions += genRuntimeEmits(typeDeclaredEmits);
-  }
+  emits: ${emitsDecl},`;
   let definedOptions = "";
   if (optionsRuntimeDecl) {
     definedOptions = scriptSetup.content.slice(optionsRuntimeDecl.start, optionsRuntimeDecl.end).trim();
@@ -35920,7 +36068,7 @@ ${exposeCall}`
 function registerBinding(bindings, node, type) {
   bindings[node.name] = type;
 }
-function walkDeclaration(node, bindings, userImportAliases) {
+function walkDeclaration(from, node, bindings, userImportAliases, hoistStatic) {
   let isAllLiteral = false;
   if (node.type === "VariableDeclaration") {
     const isConst = node.kind === "const";
@@ -35936,7 +36084,7 @@ function walkDeclaration(node, bindings, userImportAliases) {
       if (id.type === "Identifier") {
         let bindingType;
         const userReactiveBinding = userImportAliases["reactive"];
-        if (isAllLiteral || isConst && isStaticNode(init)) {
+        if ((hoistStatic || from === "script") && (isAllLiteral || isConst && isStaticNode(init))) {
           bindingType = "literal-const";
         } else if (isCallOf(init, userReactiveBinding)) {
           bindingType = isConst ? "setup-reactive-const" : "setup-let";
@@ -35947,7 +36095,7 @@ function walkDeclaration(node, bindings, userImportAliases) {
         ) {
           bindingType = isCallOf(init, DEFINE_PROPS) ? "setup-reactive-const" : "setup-const";
         } else if (isConst) {
-          if (isCallOf(init, userImportAliases["ref"])) {
+          if (isCallOf(init, userImportAliases["ref"]) || isCallOf(init, DEFINE_MODEL)) {
             bindingType = "setup-ref";
           } else {
             bindingType = "setup-maybe-ref";
@@ -36231,11 +36379,15 @@ function extractRuntimeEmits(node, emits, error) {
         hasCallSignature = true;
       }
       if (t.type === "TSPropertySignature") {
-        if (t.key.type !== "Identifier" || t.computed) {
+        if (t.key.type === "Identifier" && !t.computed) {
+          emits.add(t.key.name);
+          hasProperty = true;
+        } else if (t.key.type === "StringLiteral" && !t.computed) {
+          emits.add(t.key.value);
+          hasProperty = true;
+        } else {
           error(`defineEmits() type cannot use computed keys.`, t.key);
         }
-        emits.add(t.key.name);
-        hasProperty = true;
       }
     }
     if (hasCallSignature && hasProperty) {
@@ -36265,10 +36417,6 @@ function extractEventNames(eventName, emits) {
     }
   }
 }
-function genRuntimeEmits(emits) {
-  return emits.size ? `
-  emits: [${Array.from(emits).map((p) => JSON.stringify(p)).join(", ")}],` : ``;
-}
 function canNeverBeRef(node, userReactiveImport) {
   if (isCallOf(node, userReactiveImport)) {
     return true;
@@ -49228,7 +49376,7 @@ function preprocess(options, preprocessor) {
   );
 }
 
-const version = "3.3.0-alpha.7";
+const version = "3.3.0-alpha.9";
 const walk = walk$1;
 
 export { MagicString, parse_1$1 as babelParse, compileScript, compileStyle, compileStyleAsync, compileTemplate, extractIdentifiers, generateCodeFrame, isInDestructureAssignment, isStaticProperty, parse$5 as parse, rewriteDefault, rewriteDefaultAST, shouldTransform as shouldTransformRef, transform as transformRef, transformAST as transformRefAST, version, walk, walkIdentifiers };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.3.0-alpha.7",
+  "version": "3.3.0-alpha.9",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "module": "dist/compiler-sfc.esm-browser.js",
@@ -33,11 +33,11 @@
   "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme",
   "dependencies": {
     "@babel/parser": "^7.20.15",
-    "@vue/compiler-core": "3.3.0-alpha.7",
-    "@vue/compiler-dom": "3.3.0-alpha.7",
-    "@vue/compiler-ssr": "3.3.0-alpha.7",
-    "@vue/reactivity-transform": "3.3.0-alpha.7",
-    "@vue/shared": "3.3.0-alpha.7",
+    "@vue/compiler-core": "3.3.0-alpha.9",
+    "@vue/compiler-dom": "3.3.0-alpha.9",
+    "@vue/compiler-ssr": "3.3.0-alpha.9",
+    "@vue/reactivity-transform": "3.3.0-alpha.9",
+    "@vue/shared": "3.3.0-alpha.9",
     "estree-walker": "^2.0.2",
     "magic-string": "^0.30.0",
     "postcss": "^8.1.10",