@vue/compiler-sfc 3.2.44 → 3.2.45

package/dist/compiler-sfc.cjs.js

@@ -4428,7 +4428,27 @@ function compileScript(sfc, options) {
                 allBindings[key] = true;
             }
         }
-        returned = `{ ${Object.keys(allBindings).join(', ')} }`;
+        returned = `{ `;
+        for (const key in allBindings) {
+            if (allBindings[key] === true &&
+                userImports[key].source !== 'vue' &&
+                !userImports[key].source.endsWith('.vue')) {
+                // generate getter for import bindings
+                // skip vue imports since we know they will never change
+                returned += `get ${key}() { return ${key} }, `;
+            }
+            else if (bindingMetadata[key] === "setup-let" /* BindingTypes.SETUP_LET */) {
+                // local let binding, also add setter
+                const setArg = key === 'v' ? `_v` : `v`;
+                returned +=
+                    `get ${key}() { return ${key} }, ` +
+                        `set ${key}(${setArg}) { ${key} = ${setArg} }, `;
+            }
+            else {
+                returned += `${key}, `;
+            }
+        }
+        returned = returned.replace(/, $/, '') + ` }`;
     }
     else {
         // inline mode

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

@@ -518,15 +518,16 @@ const errorMessages = {
     [41 /* ErrorCodes.X_V_MODEL_NO_EXPRESSION */]: `v-model is missing expression.`,
     [42 /* ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION */]: `v-model value must be a valid JavaScript member expression.`,
     [43 /* ErrorCodes.X_V_MODEL_ON_SCOPE_VARIABLE */]: `v-model cannot be used on v-for or v-slot scope variables because they are not writable.`,
-    [44 /* ErrorCodes.X_INVALID_EXPRESSION */]: `Error parsing JavaScript expression: `,
-    [45 /* ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN */]: `<KeepAlive> expects exactly one child component.`,
+    [44 /* ErrorCodes.X_V_MODEL_ON_PROPS */]: `v-model cannot be used on a prop, because local prop bindings are not writable.\nUse a v-bind binding combined with a v-on listener that emits update:x event instead.`,
+    [45 /* ErrorCodes.X_INVALID_EXPRESSION */]: `Error parsing JavaScript expression: `,
+    [46 /* ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN */]: `<KeepAlive> expects exactly one child component.`,
     // generic errors
-    [46 /* ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED */]: `"prefixIdentifiers" option is not supported in this build of compiler.`,
-    [47 /* ErrorCodes.X_MODULE_MODE_NOT_SUPPORTED */]: `ES module mode is not supported in this build of compiler.`,
-    [48 /* ErrorCodes.X_CACHE_HANDLER_NOT_SUPPORTED */]: `"cacheHandlers" option is only supported when the "prefixIdentifiers" option is enabled.`,
-    [49 /* ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED */]: `"scopeId" option is only supported in module mode.`,
+    [47 /* ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED */]: `"prefixIdentifiers" option is not supported in this build of compiler.`,
+    [48 /* ErrorCodes.X_MODULE_MODE_NOT_SUPPORTED */]: `ES module mode is not supported in this build of compiler.`,
+    [49 /* ErrorCodes.X_CACHE_HANDLER_NOT_SUPPORTED */]: `"cacheHandlers" option is only supported when the "prefixIdentifiers" option is enabled.`,
+    [50 /* ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED */]: `"scopeId" option is only supported in module mode.`,
     // just to fulfill types
-    [50 /* ErrorCodes.__EXTEND_POINT__ */]: ``
+    [51 /* ErrorCodes.__EXTEND_POINT__ */]: ``
 };
 
 const FRAGMENT = Symbol(`Fragment` );
@@ -22421,7 +22422,7 @@ asRawStatements = false, localVars = Object.create(context.identifiers)) {
         }).program;
     }
     catch (e) {
-        context.onError(createCompilerError(44 /* ErrorCodes.X_INVALID_EXPRESSION */, node.loc, undefined, e.message));
+        context.onError(createCompilerError(45 /* ErrorCodes.X_INVALID_EXPRESSION */, node.loc, undefined, e.message));
         return node;
     }
     const ids = [];
@@ -23314,7 +23315,7 @@ const transformElement = (node, context) => {
                 // 2. Force keep-alive to always be updated, since it uses raw children.
                 patchFlag |= 1024 /* PatchFlags.DYNAMIC_SLOTS */;
                 if (node.children.length > 1) {
-                    context.onError(createCompilerError(45 /* ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN */, {
+                    context.onError(createCompilerError(46 /* ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN */, {
                         start: node.children[0].loc.start,
                         end: node.children[node.children.length - 1].loc.end,
                         source: ''
@@ -24256,9 +24257,16 @@ const transformModel = (dir, node, context) => {
     // im SFC <script setup> inline mode, the exp may have been transformed into
     // _unref(exp)
     const bindingType = context.bindingMetadata[rawExp];
+    // check props
+    if (bindingType === "props" /* BindingTypes.PROPS */ ||
+        bindingType === "props-aliased" /* BindingTypes.PROPS_ALIASED */) {
+        context.onError(createCompilerError(44 /* ErrorCodes.X_V_MODEL_ON_PROPS */, exp.loc));
+        return createTransformProps();
+    }
     const maybeRef = context.inline &&
-        bindingType &&
-        bindingType !== "setup-const" /* BindingTypes.SETUP_CONST */;
+        (bindingType === "setup-let" /* BindingTypes.SETUP_LET */ ||
+            bindingType === "setup-ref" /* BindingTypes.SETUP_REF */ ||
+            bindingType === "setup-maybe-ref" /* BindingTypes.SETUP_MAYBE_REF */);
     if (!expString.trim() ||
         (!isMemberExpression(expString, context) && !maybeRef)) {
         context.onError(createCompilerError(42 /* ErrorCodes.X_V_MODEL_MALFORMED_EXPRESSION */, exp.loc));
@@ -24397,10 +24405,10 @@ function baseCompile(template, options = {}) {
     const isModuleMode = options.mode === 'module';
     const prefixIdentifiers = (options.prefixIdentifiers === true || isModuleMode);
     if (!prefixIdentifiers && options.cacheHandlers) {
-        onError(createCompilerError(48 /* ErrorCodes.X_CACHE_HANDLER_NOT_SUPPORTED */));
+        onError(createCompilerError(49 /* ErrorCodes.X_CACHE_HANDLER_NOT_SUPPORTED */));
     }
     if (options.scopeId && !isModuleMode) {
-        onError(createCompilerError(49 /* ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED */));
+        onError(createCompilerError(50 /* ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED */));
     }
     const ast = isString(template) ? baseParse(template, options) : template;
     const [nodeTransforms, directiveTransforms] = getBaseTransformPreset(prefixIdentifiers);
@@ -26904,26 +26912,26 @@ function createDOMCompilerError(code, loc) {
     return createCompilerError(code, loc, DOMErrorMessages );
 }
 const DOMErrorMessages = {
-    [50 /* DOMErrorCodes.X_V_HTML_NO_EXPRESSION */]: `v-html is missing expression.`,
-    [51 /* DOMErrorCodes.X_V_HTML_WITH_CHILDREN */]: `v-html will override element children.`,
-    [52 /* DOMErrorCodes.X_V_TEXT_NO_EXPRESSION */]: `v-text is missing expression.`,
-    [53 /* DOMErrorCodes.X_V_TEXT_WITH_CHILDREN */]: `v-text will override element children.`,
-    [54 /* DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT */]: `v-model can only be used on <input>, <textarea> and <select> elements.`,
-    [55 /* DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT */]: `v-model argument is not supported on plain elements.`,
-    [56 /* DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT */]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`,
-    [57 /* DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE */]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,
-    [58 /* DOMErrorCodes.X_V_SHOW_NO_EXPRESSION */]: `v-show is missing expression.`,
-    [59 /* DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN */]: `<Transition> expects exactly one child element or component.`,
-    [60 /* DOMErrorCodes.X_IGNORED_SIDE_EFFECT_TAG */]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`
+    [51 /* DOMErrorCodes.X_V_HTML_NO_EXPRESSION */]: `v-html is missing expression.`,
+    [52 /* DOMErrorCodes.X_V_HTML_WITH_CHILDREN */]: `v-html will override element children.`,
+    [53 /* DOMErrorCodes.X_V_TEXT_NO_EXPRESSION */]: `v-text is missing expression.`,
+    [54 /* DOMErrorCodes.X_V_TEXT_WITH_CHILDREN */]: `v-text will override element children.`,
+    [55 /* DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT */]: `v-model can only be used on <input>, <textarea> and <select> elements.`,
+    [56 /* DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT */]: `v-model argument is not supported on plain elements.`,
+    [57 /* DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT */]: `v-model cannot be used on file inputs since they are read-only. Use a v-on:change listener instead.`,
+    [58 /* DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE */]: `Unnecessary value binding used alongside v-model. It will interfere with v-model's behavior.`,
+    [59 /* DOMErrorCodes.X_V_SHOW_NO_EXPRESSION */]: `v-show is missing expression.`,
+    [60 /* DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN */]: `<Transition> expects exactly one child element or component.`,
+    [61 /* DOMErrorCodes.X_IGNORED_SIDE_EFFECT_TAG */]: `Tags with side effect (<script> and <style>) are ignored in client component templates.`
 };
 
 const transformVHtml = (dir, node, context) => {
     const { exp, loc } = dir;
     if (!exp) {
-        context.onError(createDOMCompilerError(50 /* DOMErrorCodes.X_V_HTML_NO_EXPRESSION */, loc));
+        context.onError(createDOMCompilerError(51 /* DOMErrorCodes.X_V_HTML_NO_EXPRESSION */, loc));
     }
     if (node.children.length) {
-        context.onError(createDOMCompilerError(51 /* DOMErrorCodes.X_V_HTML_WITH_CHILDREN */, loc));
+        context.onError(createDOMCompilerError(52 /* DOMErrorCodes.X_V_HTML_WITH_CHILDREN */, loc));
         node.children.length = 0;
     }
     return {
@@ -26936,10 +26944,10 @@ const transformVHtml = (dir, node, context) => {
 const transformVText = (dir, node, context) => {
     const { exp, loc } = dir;
     if (!exp) {
-        context.onError(createDOMCompilerError(52 /* DOMErrorCodes.X_V_TEXT_NO_EXPRESSION */, loc));
+        context.onError(createDOMCompilerError(53 /* DOMErrorCodes.X_V_TEXT_NO_EXPRESSION */, loc));
     }
     if (node.children.length) {
-        context.onError(createDOMCompilerError(53 /* DOMErrorCodes.X_V_TEXT_WITH_CHILDREN */, loc));
+        context.onError(createDOMCompilerError(54 /* DOMErrorCodes.X_V_TEXT_WITH_CHILDREN */, loc));
         node.children.length = 0;
     }
     return {
@@ -26960,12 +26968,12 @@ const transformModel$1 = (dir, node, context) => {
         return baseResult;
     }
     if (dir.arg) {
-        context.onError(createDOMCompilerError(55 /* DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT */, dir.arg.loc));
+        context.onError(createDOMCompilerError(56 /* DOMErrorCodes.X_V_MODEL_ARG_ON_ELEMENT */, dir.arg.loc));
     }
     function checkDuplicatedValue() {
         const value = findProp(node, 'value');
         if (value) {
-            context.onError(createDOMCompilerError(57 /* DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE */, value.loc));
+            context.onError(createDOMCompilerError(58 /* DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE */, value.loc));
         }
     }
     const { tag } = node;
@@ -26993,7 +27001,7 @@ const transformModel$1 = (dir, node, context) => {
                             break;
                         case 'file':
                             isInvalidType = true;
-                            context.onError(createDOMCompilerError(56 /* DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT */, dir.loc));
+                            context.onError(createDOMCompilerError(57 /* DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT */, dir.loc));
                             break;
                         default:
                             // text type
@@ -27027,7 +27035,7 @@ const transformModel$1 = (dir, node, context) => {
         }
     }
     else {
-        context.onError(createDOMCompilerError(54 /* DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT */, dir.loc));
+        context.onError(createDOMCompilerError(55 /* DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT */, dir.loc));
     }
     // native vmodel doesn't need the `modelValue` props since they are also
     // passed to the runtime as `binding.value`. removing it reduces code size.
@@ -27147,7 +27155,7 @@ const transformOn$1 = (dir, node, context) => {
 const transformShow = (dir, node, context) => {
     const { exp, loc } = dir;
     if (!exp) {
-        context.onError(createDOMCompilerError(58 /* DOMErrorCodes.X_V_SHOW_NO_EXPRESSION */, loc));
+        context.onError(createDOMCompilerError(59 /* DOMErrorCodes.X_V_SHOW_NO_EXPRESSION */, loc));
     }
     return {
         props: [],
@@ -27166,7 +27174,7 @@ const transformTransition = (node, context) => {
                 }
                 // warn multiple transition children
                 if (hasMultipleChildren(node)) {
-                    context.onError(createDOMCompilerError(59 /* DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN */, {
+                    context.onError(createDOMCompilerError(60 /* DOMErrorCodes.X_TRANSITION_INVALID_CHILDREN */, {
                         start: node.children[0].loc.start,
                         end: node.children[node.children.length - 1].loc.end,
                         source: ''
@@ -27501,7 +27509,7 @@ const ignoreSideEffectTags = (node, context) => {
     if (node.type === 1 /* NodeTypes.ELEMENT */ &&
         node.tagType === 0 /* ElementTypes.ELEMENT */ &&
         (node.tag === 'script' || node.tag === 'style')) {
-        context.onError(createDOMCompilerError(60 /* DOMErrorCodes.X_IGNORED_SIDE_EFFECT_TAG */, node.loc));
+        context.onError(createDOMCompilerError(61 /* DOMErrorCodes.X_IGNORED_SIDE_EFFECT_TAG */, node.loc));
         context.removeNode();
     }
 };
@@ -33608,16 +33616,16 @@ function createSSRCompilerError(code, loc) {
     return createCompilerError(code, loc, SSRErrorMessages);
 }
 const SSRErrorMessages = {
-    [61 /* SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME */]: `Unsafe attribute name for SSR.`,
-    [62 /* SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET */]: `Missing the 'to' prop on teleport element.`,
-    [63 /* SSRErrorCodes.X_SSR_INVALID_AST_NODE */]: `Invalid AST node during SSR transform.`
+    [62 /* SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME */]: `Unsafe attribute name for SSR.`,
+    [63 /* SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET */]: `Missing the 'to' prop on teleport element.`,
+    [64 /* SSRErrorCodes.X_SSR_INVALID_AST_NODE */]: `Invalid AST node during SSR transform.`
 };
 
 // Note: this is a 2nd-pass codegen transform.
 function ssrProcessTeleport(node, context) {
     const targetProp = findProp(node, 'to');
     if (!targetProp) {
-        context.onError(createSSRCompilerError(62 /* SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET */, node.loc));
+        context.onError(createSSRCompilerError(63 /* SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET */, node.loc));
         return;
     }
     let target;
@@ -33629,7 +33637,7 @@ function ssrProcessTeleport(node, context) {
         target = targetProp.exp;
     }
     if (!target) {
-        context.onError(createSSRCompilerError(62 /* SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET */, targetProp.loc));
+        context.onError(createSSRCompilerError(63 /* SSRErrorCodes.X_SSR_NO_TELEPORT_TARGET */, targetProp.loc));
         return;
     }
     const disabledProp = findProp(node, 'disabled', false, true /* allow empty */);
@@ -33838,7 +33846,7 @@ const ssrTransformElement = (node, context) => {
                                         ]));
                                     }
                                     else {
-                                        context.onError(createSSRCompilerError(61 /* SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME */, key.loc));
+                                        context.onError(createSSRCompilerError(62 /* SSRErrorCodes.X_SSR_UNSAFE_ATTR_NAME */, key.loc));
                                     }
                                 }
                             }
@@ -34364,7 +34372,7 @@ function processChildren(parent, context, asFragment = false, disableNestedFragm
                         // TODO
                         break;
                     default:
-                        context.onError(createSSRCompilerError(63 /* SSRErrorCodes.X_SSR_INVALID_AST_NODE */, child.loc));
+                        context.onError(createSSRCompilerError(64 /* SSRErrorCodes.X_SSR_INVALID_AST_NODE */, child.loc));
                         // make sure we exhaust all possible types
                         const exhaustiveCheck = child;
                         return exhaustiveCheck;
@@ -34396,7 +34404,7 @@ function processChildren(parent, context, asFragment = false, disableNestedFragm
                 // `transformText` is not used during SSR compile.
                 break;
             default:
-                context.onError(createSSRCompilerError(63 /* SSRErrorCodes.X_SSR_INVALID_AST_NODE */, child.loc));
+                context.onError(createSSRCompilerError(64 /* SSRErrorCodes.X_SSR_INVALID_AST_NODE */, child.loc));
                 // make sure we exhaust all possible types
                 const exhaustiveCheck = child;
                 return exhaustiveCheck;
@@ -34417,7 +34425,7 @@ const ssrTransformModel = (dir, node, context) => {
     function checkDuplicatedValue() {
         const value = findProp(node, 'value');
         if (value) {
-            context.onError(createDOMCompilerError(57 /* DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE */, value.loc));
+            context.onError(createDOMCompilerError(58 /* DOMErrorCodes.X_V_MODEL_UNNECESSARY_VALUE */, value.loc));
         }
     }
     if (node.tagType === 0 /* ElementTypes.ELEMENT */) {
@@ -34474,7 +34482,7 @@ const ssrTransformModel = (dir, node, context) => {
                             }
                             break;
                         case 'file':
-                            context.onError(createDOMCompilerError(56 /* DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT */, dir.loc));
+                            context.onError(createDOMCompilerError(57 /* DOMErrorCodes.X_V_MODEL_ON_FILE_INPUT_ELEMENT */, dir.loc));
                             break;
                         default:
                             checkDuplicatedValue();
@@ -34496,7 +34504,7 @@ const ssrTransformModel = (dir, node, context) => {
         }
         else if (node.tag === 'select') ;
         else {
-            context.onError(createDOMCompilerError(54 /* DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT */, dir.loc));
+            context.onError(createDOMCompilerError(55 /* DOMErrorCodes.X_V_MODEL_ON_INVALID_ELEMENT */, dir.loc));
         }
         return res;
     }
@@ -34516,7 +34524,7 @@ function findValueBinding(node) {
 
 const ssrTransformShow = (dir, node, context) => {
     if (!dir.exp) {
-        context.onError(createDOMCompilerError(58 /* DOMErrorCodes.X_V_SHOW_NO_EXPRESSION */));
+        context.onError(createDOMCompilerError(59 /* DOMErrorCodes.X_V_SHOW_NO_EXPRESSION */));
     }
     return {
         props: [
@@ -36533,7 +36541,27 @@ function compileScript(sfc, options) {
                 allBindings[key] = true;
             }
         }
-        returned = `{ ${Object.keys(allBindings).join(', ')} }`;
+        returned = `{ `;
+        for (const key in allBindings) {
+            if (allBindings[key] === true &&
+                userImports[key].source !== 'vue' &&
+                !userImports[key].source.endsWith('.vue')) {
+                // generate getter for import bindings
+                // skip vue imports since we know they will never change
+                returned += `get ${key}() { return ${key} }, `;
+            }
+            else if (bindingMetadata[key] === "setup-let" /* BindingTypes.SETUP_LET */) {
+                // local let binding, also add setter
+                const setArg = key === 'v' ? `_v` : `v`;
+                returned +=
+                    `get ${key}() { return ${key} }, ` +
+                        `set ${key}(${setArg}) { ${key} = ${setArg} }, `;
+            }
+            else {
+                returned += `${key}, `;
+            }
+        }
+        returned = returned.replace(/, $/, '') + ` }`;
     }
     else {
         // inline mode

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.2.44",
+  "version": "3.2.45",
   "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.16.4",
-    "@vue/compiler-core": "3.2.44",
-    "@vue/compiler-dom": "3.2.44",
-    "@vue/compiler-ssr": "3.2.44",
-    "@vue/reactivity-transform": "3.2.44",
-    "@vue/shared": "3.2.44",
+    "@vue/compiler-core": "3.2.45",
+    "@vue/compiler-dom": "3.2.45",
+    "@vue/compiler-ssr": "3.2.45",
+    "@vue/reactivity-transform": "3.2.45",
+    "@vue/shared": "3.2.45",
     "estree-walker": "^2.0.2",
     "magic-string": "^0.25.7",
     "source-map": "^0.6.1",