@vue/compiler-sfc 3.2.27 → 3.2.31

package/dist/compiler-sfc.cjs.js

@@ -109,7 +109,8 @@ function sum (o) {
 var hashSum = sum;
 
 const CSS_VARS_HELPER = `useCssVars`;
-const cssVarRE = /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g;
+// match v-bind() with max 2-levels of nested parens.
+const cssVarRE = /v-bind\s*\(((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*)\)/g;
 function genCssVarsFromList(vars, id, isProd) {
     return `{\n  ${vars
         .map(key => `"${genVarName(id, key, isProd)}": (${key})`)
@@ -123,6 +124,14 @@ function genVarName(id, raw, isProd) {
         return `${id}-${raw.replace(/([^\w-])/g, '_')}`;
     }
 }
+function noramlizeExpression(exp) {
+    exp = exp.trim();
+    if ((exp[0] === `'` && exp[exp.length - 1] === `'`) ||
+        (exp[0] === `"` && exp[exp.length - 1] === `"`)) {
+        return exp.slice(1, -1);
+    }
+    return exp;
+}
 function parseCssVars(sfc) {
     const vars = [];
     sfc.styles.forEach(style => {
@@ -130,7 +139,7 @@ function parseCssVars(sfc) {
         // ignore v-bind() in comments /* ... */
         const content = style.content.replace(/\/\*([\s\S]*?)\*\//g, '');
         while ((match = cssVarRE.exec(content))) {
-            const variable = match[1] || match[2] || match[3];
+            const variable = noramlizeExpression(match[1]);
             if (!vars.includes(variable)) {
                 vars.push(variable);
             }
@@ -145,8 +154,8 @@ const cssVarsPlugin = opts => {
         Declaration(decl) {
             // rewrite CSS variables
             if (cssVarRE.test(decl.value)) {
-                decl.value = decl.value.replace(cssVarRE, (_, $1, $2, $3) => {
-                    return `var(--${genVarName(id, $1 || $2 || $3, isProd)})`;
+                decl.value = decl.value.replace(cssVarRE, (_, $1) => {
+                    return `var(--${genVarName(id, noramlizeExpression($1), isProd)})`;
                 });
             }
         }
@@ -3288,7 +3297,7 @@ function compileScript(sfc, options) {
     let { script, scriptSetup, source, filename } = sfc;
     // feature flags
     // TODO remove support for deprecated options when out of experimental
-    const enableRefTransform = !!options.reactivityTransform ||
+    const enableReactivityTransform = !!options.reactivityTransform ||
         !!options.refSugar ||
         !!options.refTransform;
     const enablePropsTransform = !!options.reactivityTransform || !!options.propsDestructureTransform;
@@ -3308,6 +3317,7 @@ function compileScript(sfc, options) {
         scriptLang === 'tsx' ||
         scriptSetupLang === 'ts' ||
         scriptSetupLang === 'tsx';
+    // resolve parser plugins
     const plugins = [];
     if (!isTS || scriptLang === 'tsx' || scriptSetupLang === 'tsx') {
         plugins.push('jsx');
@@ -3332,7 +3342,7 @@ function compileScript(sfc, options) {
                 sourceType: 'module'
             }).program;
             const bindings = analyzeScriptBindings(scriptAst.body);
-            if (enableRefTransform && reactivityTransform.shouldTransform(content)) {
+            if (enableReactivityTransform && reactivityTransform.shouldTransform(content)) {
                 const s = new MagicString__default(source);
                 const startOffset = script.loc.start.offset;
                 const endOffset = script.loc.end.offset;
@@ -3799,10 +3809,10 @@ function compileScript(sfc, options) {
                 walkDeclaration(node, scriptBindings, userImportAlias);
             }
         }
-        // apply ref transform
-        if (enableRefTransform && reactivityTransform.shouldTransform(script.content)) {
-            const { rootRefs: rootVars, importedHelpers } = reactivityTransform.transformAST(scriptAst, s, scriptStartOffset);
-            refBindings = rootVars;
+        // apply reactivity transform
+        if (enableReactivityTransform && reactivityTransform.shouldTransform(script.content)) {
+            const { rootRefs, importedHelpers } = reactivityTransform.transformAST(scriptAst, s, scriptStartOffset);
+            refBindings = rootRefs;
             for (const h of importedHelpers) {
                 helperImports.add(h);
             }
@@ -3987,8 +3997,10 @@ function compileScript(sfc, options) {
             }
         }
     }
-    // 3. Apply ref sugar transform
-    if ((enableRefTransform && reactivityTransform.shouldTransform(scriptSetup.content)) ||
+    // 3. Apply reactivity transform
+    if ((enableReactivityTransform &&
+        // normal <script> had ref bindings that maybe used in <script setup>
+        (refBindings || reactivityTransform.shouldTransform(scriptSetup.content))) ||
         propsDestructureDecl) {
         const { rootRefs, importedHelpers } = reactivityTransform.transformAST(scriptSetupAst, s, startOffset, refBindings, propsDestructuredBindings);
         refBindings = refBindings ? [...refBindings, ...rootRefs] : rootRefs;

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

@@ -302,8 +302,20 @@ const SVG_TAGS = 'svg,animate,animateMotion,animateTransform,circle,clipPath,col
     'polygon,polyline,radialGradient,rect,set,solidcolor,stop,switch,symbol,' +
     'text,textPath,title,tspan,unknown,use,view';
 const VOID_TAGS = 'area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr';
+/**
+ * Compiler only.
+ * Do NOT use in runtime code paths unless behind `true` flag.
+ */
 const isHTMLTag = /*#__PURE__*/ makeMap(HTML_TAGS);
+/**
+ * Compiler only.
+ * Do NOT use in runtime code paths unless behind `true` flag.
+ */
 const isSVGTag = /*#__PURE__*/ makeMap(SVG_TAGS);
+/**
+ * Compiler only.
+ * Do NOT use in runtime code paths unless behind `true` flag.
+ */
 const isVoidTag = /*#__PURE__*/ makeMap(VOID_TAGS);
 
 const escapeRE = /["'&<>]/;
@@ -351,13 +363,15 @@ function escapeHtml(string) {
  * @private
  */
 const toDisplayString = (val) => {
-    return val == null
-        ? ''
-        : isArray(val) ||
-            (isObject(val) &&
-                (val.toString === objectToString || !isFunction(val.toString)))
-            ? JSON.stringify(val, replacer, 2)
-            : String(val);
+    return isString(val)
+        ? val
+        : val == null
+            ? ''
+            : isArray(val) ||
+                (isObject(val) &&
+                    (val.toString === objectToString || !isFunction(val.toString)))
+                ? JSON.stringify(val, replacer, 2)
+                : String(val);
 };
 const replacer = (_key, val) => {
     // can't use isRef here since @vue/shared has no deps
@@ -412,6 +426,7 @@ const isReservedProp = /*#__PURE__*/ makeMap(
     'onVnodeBeforeMount,onVnodeMounted,' +
     'onVnodeBeforeUpdate,onVnodeUpdated,' +
     'onVnodeBeforeUnmount,onVnodeUnmounted');
+const isBuiltInDirective = /*#__PURE__*/ makeMap('bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo');
 const cacheStringFunction = (fn) => {
     const cache = Object.create(null);
     return ((str) => {
@@ -16320,13 +16335,13 @@ const deprecationData = {
         message: `Platform-native elements with "is" prop will no longer be ` +
             `treated as components in Vue 3 unless the "is" value is explicitly ` +
             `prefixed with "vue:".`,
-        link: `https://v3.vuejs.org/guide/migration/custom-elements-interop.html`
+        link: `https://v3-migration.vuejs.org/breaking-changes/custom-elements-interop.html`
     },
     ["COMPILER_V_BIND_SYNC" /* COMPILER_V_BIND_SYNC */]: {
         message: key => `.sync modifier for v-bind has been removed. Use v-model with ` +
             `argument instead. \`v-bind:${key}.sync\` should be changed to ` +
             `\`v-model:${key}\`.`,
-        link: `https://v3.vuejs.org/guide/migration/v-model.html`
+        link: `https://v3-migration.vuejs.org/breaking-changes/v-model.html`
     },
     ["COMPILER_V_BIND_PROP" /* COMPILER_V_BIND_PROP */]: {
         message: `.prop modifier for v-bind has been removed and no longer necessary. ` +
@@ -16338,11 +16353,11 @@ const deprecationData = {
             `that appears before v-bind in the case of conflict. ` +
             `To retain 2.x behavior, move v-bind to make it the first attribute. ` +
             `You can also suppress this warning if the usage is intended.`,
-        link: `https://v3.vuejs.org/guide/migration/v-bind.html`
+        link: `https://v3-migration.vuejs.org/breaking-changes/v-bind.html`
     },
     ["COMPILER_V_ON_NATIVE" /* COMPILER_V_ON_NATIVE */]: {
         message: `.native modifier for v-on has been removed as is no longer necessary.`,
-        link: `https://v3.vuejs.org/guide/migration/v-on-native-modifier-removed.html`
+        link: `https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html`
     },
     ["COMPILER_V_IF_V_FOR_PRECEDENCE" /* COMPILER_V_IF_V_FOR_PRECEDENCE */]: {
         message: `v-if / v-for precedence when used on the same element has changed ` +
@@ -16350,7 +16365,7 @@ const deprecationData = {
             `access to v-for scope variables. It is best to avoid the ambiguity ` +
             `with <template> tags or use a computed property that filters v-for ` +
             `data source.`,
-        link: `https://v3.vuejs.org/guide/migration/v-if-v-for.html`
+        link: `https://v3-migration.vuejs.org/breaking-changes/v-if-v-for.html`
     },
     ["COMPILER_NATIVE_TEMPLATE" /* COMPILER_NATIVE_TEMPLATE */]: {
         message: `<template> with no special directives will render as a native template ` +
@@ -16358,13 +16373,13 @@ const deprecationData = {
     },
     ["COMPILER_INLINE_TEMPLATE" /* COMPILER_INLINE_TEMPLATE */]: {
         message: `"inline-template" has been removed in Vue 3.`,
-        link: `https://v3.vuejs.org/guide/migration/inline-template-attribute.html`
+        link: `https://v3-migration.vuejs.org/breaking-changes/inline-template-attribute.html`
     },
     ["COMPILER_FILTER" /* COMPILER_FILTERS */]: {
         message: `filters have been removed in Vue 3. ` +
             `The "|" symbol will be treated as native JavaScript bitwise OR operator. ` +
             `Use method calls or computed properties instead.`,
-        link: `https://v3.vuejs.org/guide/migration/filters.html`
+        link: `https://v3-migration.vuejs.org/breaking-changes/filters.html`
     }
 };
 function getCompatValue(key, context) {
@@ -16849,7 +16864,7 @@ function parseAttributes(context, type) {
         }
         const attr = parseAttribute(context, attributeNames);
         // Trim whitespace between class
-        // https://github.com/vuejs/vue-next/issues/4251
+        // https://github.com/vuejs/core/issues/4251
         if (attr.type === 6 /* ATTRIBUTE */ &&
             attr.value &&
             attr.name === 'class') {
@@ -17074,7 +17089,7 @@ function parseTextData(context, length, mode) {
     advanceBy(context, length);
     if (mode === 2 /* RAWTEXT */ ||
         mode === 3 /* CDATA */ ||
-        rawText.indexOf('&') === -1) {
+        !rawText.includes('&')) {
         return rawText;
     }
     else {
@@ -22201,7 +22216,7 @@ function isReferenced(node, parent, grandparent) {
         // no: NODE.target
         case 'MetaProperty':
             return false;
-        // yes: type X = { somePropert: NODE }
+        // yes: type X = { someProperty: NODE }
         // no: type X = { NODE: OtherType }
         case 'ObjectTypeProperty':
             return parent.key !== node;
@@ -22708,6 +22723,7 @@ const transformFor = createStructuralDirectiveTransform('for', (node, dir, conte
         const renderExp = createCallExpression(helper(RENDER_LIST), [
             forNode.source
         ]);
+        const isTemplate = isTemplateNode(node);
         const memo = findDir(node, 'memo');
         const keyProp = findProp(node, `key`);
         const keyExp = keyProp &&
@@ -22715,15 +22731,17 @@ const transformFor = createStructuralDirectiveTransform('for', (node, dir, conte
                 ? createSimpleExpression(keyProp.value.content, true)
                 : keyProp.exp);
         const keyProperty = keyProp ? createObjectProperty(`key`, keyExp) : null;
-        if (context.prefixIdentifiers &&
-            keyProperty &&
-            keyProp.type !== 6 /* ATTRIBUTE */) {
-            // #2085 process :key expression needs to be processed in order for it
-            // to behave consistently for <template v-for> and <div v-for>.
-            // In the case of `<template v-for>`, the node is discarded and never
-            // traversed so its key expression won't be processed by the normal
-            // transforms.
-            keyProperty.value = processExpression(keyProperty.value, context);
+        if (isTemplate) {
+            // #2085 / #5288 process :key and v-memo expressions need to be
+            // processed on `<template v-for>`. In this case the node is discarded
+            // and never traversed so its binding expressions won't be processed
+            // by the normal transforms.
+            if (memo) {
+                memo.exp = processExpression(memo.exp, context);
+            }
+            if (keyProperty && keyProp.type !== 6 /* ATTRIBUTE */) {
+                keyProperty.value = processExpression(keyProperty.value, context);
+            }
         }
         const isStableFragment = forNode.source.type === 4 /* SIMPLE_EXPRESSION */ &&
             forNode.source.constType > 0 /* NOT_CONSTANT */;
@@ -22737,7 +22755,6 @@ const transformFor = createStructuralDirectiveTransform('for', (node, dir, conte
         return () => {
             // finish the codegen now that all children have been traversed
             let childBlock;
-            const isTemplate = isTemplateNode(node);
             const { children } = forNode;
             // check <template v-for> key placement
             if (isTemplate) {
@@ -23622,7 +23639,7 @@ function buildProps(node, context, props = node.props, ssr = false) {
                     }
                 }
             }
-            else {
+            else if (!isBuiltInDirective(name)) {
                 // no built-in transform, this is a user custom directive.
                 runtimeDirectives.push(prop);
                 // custom dirs may use beforeUpdate so they need to force blocks
@@ -27478,6 +27495,7 @@ var CompilerDOM = /*#__PURE__*/Object.freeze({
   transformElement: transformElement,
   resolveComponentType: resolveComponentType,
   buildProps: buildProps,
+  buildDirectiveArgs: buildDirectiveArgs,
   processSlotOutlet: processSlotOutlet,
   generateCodeFrame: generateCodeFrame,
   checkCompatEnabled: checkCompatEnabled,
@@ -27648,7 +27666,8 @@ function sum (o) {
 var hashSum = sum;
 
 const CSS_VARS_HELPER = `useCssVars`;
-const cssVarRE = /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g;
+// match v-bind() with max 2-levels of nested parens.
+const cssVarRE = /v-bind\s*\(((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*)\)/g;
 function genCssVarsFromList(vars, id, isProd) {
     return `{\n  ${vars
         .map(key => `"${genVarName(id, key, isProd)}": (${key})`)
@@ -27662,6 +27681,14 @@ function genVarName(id, raw, isProd) {
         return `${id}-${raw.replace(/([^\w-])/g, '_')}`;
     }
 }
+function noramlizeExpression(exp) {
+    exp = exp.trim();
+    if ((exp[0] === `'` && exp[exp.length - 1] === `'`) ||
+        (exp[0] === `"` && exp[exp.length - 1] === `"`)) {
+        return exp.slice(1, -1);
+    }
+    return exp;
+}
 function parseCssVars(sfc) {
     const vars = [];
     sfc.styles.forEach(style => {
@@ -27669,7 +27696,7 @@ function parseCssVars(sfc) {
         // ignore v-bind() in comments /* ... */
         const content = style.content.replace(/\/\*([\s\S]*?)\*\//g, '');
         while ((match = cssVarRE.exec(content))) {
-            const variable = match[1] || match[2] || match[3];
+            const variable = noramlizeExpression(match[1]);
             if (!vars.includes(variable)) {
                 vars.push(variable);
             }
@@ -27684,8 +27711,8 @@ const cssVarsPlugin = opts => {
         Declaration(decl) {
             // rewrite CSS variables
             if (cssVarRE.test(decl.value)) {
-                decl.value = decl.value.replace(cssVarRE, (_, $1, $2, $3) => {
-                    return `var(--${genVarName(id, $1 || $2 || $3, isProd)})`;
+                decl.value = decl.value.replace(cssVarRE, (_, $1) => {
+                    return `var(--${genVarName(id, noramlizeExpression($1), isProd)})`;
                 });
             }
         }
@@ -33281,6 +33308,7 @@ const SSR_RENDER_DYNAMIC_MODEL = Symbol(`ssrRenderDynamicModel`);
 const SSR_GET_DYNAMIC_MODEL_PROPS = Symbol(`ssrGetDynamicModelProps`);
 const SSR_RENDER_TELEPORT = Symbol(`ssrRenderTeleport`);
 const SSR_RENDER_SUSPENSE = Symbol(`ssrRenderSuspense`);
+const SSR_GET_DIRECTIVE_PROPS = Symbol(`ssrGetDirectiveProps`);
 const ssrHelpers = {
     [SSR_INTERPOLATE]: `ssrInterpolate`,
     [SSR_RENDER_VNODE]: `ssrRenderVNode`,
@@ -33298,7 +33326,8 @@ const ssrHelpers = {
     [SSR_RENDER_DYNAMIC_MODEL]: `ssrRenderDynamicModel`,
     [SSR_GET_DYNAMIC_MODEL_PROPS]: `ssrGetDynamicModelProps`,
     [SSR_RENDER_TELEPORT]: `ssrRenderTeleport`,
-    [SSR_RENDER_SUSPENSE]: `ssrRenderSuspense`
+    [SSR_RENDER_SUSPENSE]: `ssrRenderSuspense`,
+    [SSR_GET_DIRECTIVE_PROPS]: `ssrGetDirectiveProps`
 };
 // Note: these are helpers imported from @vue/server-renderer
 // make sure the names match!
@@ -33524,224 +33553,6 @@ function ssrProcessTransitionGroup(node, context) {
     }
 }
 
-// We need to construct the slot functions in the 1st pass to ensure proper
-// scope tracking, but the children of each slot cannot be processed until
-// the 2nd pass, so we store the WIP slot functions in a weakmap during the 1st
-// pass and complete them in the 2nd pass.
-const wipMap$1 = new WeakMap();
-const componentTypeMap = new WeakMap();
-// ssr component transform is done in two phases:
-// In phase 1. we use `buildSlot` to analyze the children of the component into
-// WIP slot functions (it must be done in phase 1 because `buildSlot` relies on
-// the core transform context).
-// In phase 2. we convert the WIP slots from phase 1 into ssr-specific codegen
-// nodes.
-const ssrTransformComponent = (node, context) => {
-    if (node.type !== 1 /* ELEMENT */ ||
-        node.tagType !== 1 /* COMPONENT */) {
-        return;
-    }
-    const component = resolveComponentType(node, context, true /* ssr */);
-    componentTypeMap.set(node, component);
-    if (isSymbol(component)) {
-        if (component === SUSPENSE) {
-            return ssrTransformSuspense(node, context);
-        }
-        return; // built-in component: fallthrough
-    }
-    // Build the fallback vnode-based branch for the component's slots.
-    // We need to clone the node into a fresh copy and use the buildSlots' logic
-    // to get access to the children of each slot. We then compile them with
-    // a child transform pipeline using vnode-based transforms (instead of ssr-
-    // based ones), and save the result branch (a ReturnStatement) in an array.
-    // The branch is retrieved when processing slots again in ssr mode.
-    const vnodeBranches = [];
-    const clonedNode = clone(node);
-    return function ssrPostTransformComponent() {
-        // Using the cloned node, build the normal VNode-based branches (for
-        // fallback in case the child is render-fn based). Store them in an array
-        // for later use.
-        if (clonedNode.children.length) {
-            buildSlots(clonedNode, context, (props, children) => {
-                vnodeBranches.push(createVNodeSlotBranch(props, children, context));
-                return createFunctionExpression(undefined);
-            });
-        }
-        const props = node.props.length > 0
-            ? // note we are not passing ssr: true here because for components, v-on
-                // handlers should still be passed
-                buildProps(node, context).props || `null`
-            : `null`;
-        const wipEntries = [];
-        wipMap$1.set(node, wipEntries);
-        const buildSSRSlotFn = (props, children, loc) => {
-            const fn = createFunctionExpression([props || `_`, `_push`, `_parent`, `_scopeId`], undefined, // no return, assign body later
-            true, // newline
-            true, // isSlot
-            loc);
-            wipEntries.push({
-                fn,
-                children,
-                // also collect the corresponding vnode branch built earlier
-                vnodeBranch: vnodeBranches[wipEntries.length]
-            });
-            return fn;
-        };
-        const slots = node.children.length
-            ? buildSlots(node, context, buildSSRSlotFn).slots
-            : `null`;
-        if (typeof component !== 'string') {
-            // dynamic component that resolved to a `resolveDynamicComponent` call
-            // expression - since the resolved result may be a plain element (string)
-            // or a VNode, handle it with `renderVNode`.
-            node.ssrCodegenNode = createCallExpression(context.helper(SSR_RENDER_VNODE), [
-                `_push`,
-                createCallExpression(context.helper(CREATE_VNODE), [
-                    component,
-                    props,
-                    slots
-                ]),
-                `_parent`
-            ]);
-        }
-        else {
-            node.ssrCodegenNode = createCallExpression(context.helper(SSR_RENDER_COMPONENT), [component, props, slots, `_parent`]);
-        }
-    };
-};
-function ssrProcessComponent(node, context) {
-    const component = componentTypeMap.get(node);
-    if (!node.ssrCodegenNode) {
-        // this is a built-in component that fell-through.
-        if (component === TELEPORT) {
-            return ssrProcessTeleport(node, context);
-        }
-        else if (component === SUSPENSE) {
-            return ssrProcessSuspense(node, context);
-        }
-        else if (component === TRANSITION_GROUP) {
-            return ssrProcessTransitionGroup(node, context);
-        }
-        else {
-            // real fall-through: Transition / KeepAlive
-            // just render its children.
-            processChildren(node.children, context);
-        }
-    }
-    else {
-        // finish up slot function expressions from the 1st pass.
-        const wipEntries = wipMap$1.get(node) || [];
-        for (let i = 0; i < wipEntries.length; i++) {
-            const { fn, children, vnodeBranch } = wipEntries[i];
-            // For each slot, we generate two branches: one SSR-optimized branch and
-            // one normal vnode-based branch. The branches are taken based on the
-            // presence of the 2nd `_push` argument (which is only present if the slot
-            // is called by `_ssrRenderSlot`.
-            fn.body = createIfStatement(createSimpleExpression(`_push`, false), processChildrenAsStatement(children, context, false, true /* withSlotScopeId */), vnodeBranch);
-        }
-        // component is inside a slot, inherit slot scope Id
-        if (context.withSlotScopeId) {
-            node.ssrCodegenNode.arguments.push(`_scopeId`);
-        }
-        if (typeof component === 'string') {
-            // static component
-            context.pushStatement(createCallExpression(`_push`, [node.ssrCodegenNode]));
-        }
-        else {
-            // dynamic component (`resolveDynamicComponent` call)
-            // the codegen node is a `renderVNode` call
-            context.pushStatement(node.ssrCodegenNode);
-        }
-    }
-}
-const rawOptionsMap = new WeakMap();
-const [baseNodeTransforms, baseDirectiveTransforms] = getBaseTransformPreset(true);
-const vnodeNodeTransforms = [...baseNodeTransforms, ...DOMNodeTransforms];
-const vnodeDirectiveTransforms = Object.assign(Object.assign({}, baseDirectiveTransforms), DOMDirectiveTransforms);
-function createVNodeSlotBranch(props, children, parentContext) {
-    // apply a sub-transform using vnode-based transforms.
-    const rawOptions = rawOptionsMap.get(parentContext.root);
-    const subOptions = Object.assign(Object.assign({}, rawOptions), { 
-        // overwrite with vnode-based transforms
-        nodeTransforms: [
-            ...vnodeNodeTransforms,
-            ...(rawOptions.nodeTransforms || [])
-        ], directiveTransforms: Object.assign(Object.assign({}, vnodeDirectiveTransforms), (rawOptions.directiveTransforms || {})) });
-    // wrap the children with a wrapper template for proper children treatment.
-    const wrapperNode = {
-        type: 1 /* ELEMENT */,
-        ns: 0 /* HTML */,
-        tag: 'template',
-        tagType: 3 /* TEMPLATE */,
-        isSelfClosing: false,
-        // important: provide v-slot="props" on the wrapper for proper
-        // scope analysis
-        props: [
-            {
-                type: 7 /* DIRECTIVE */,
-                name: 'slot',
-                exp: props,
-                arg: undefined,
-                modifiers: [],
-                loc: locStub
-            }
-        ],
-        children,
-        loc: locStub,
-        codegenNode: undefined
-    };
-    subTransform(wrapperNode, subOptions, parentContext);
-    return createReturnStatement(children);
-}
-function subTransform(node, options, parentContext) {
-    const childRoot = createRoot([node]);
-    const childContext = createTransformContext(childRoot, options);
-    // this sub transform is for vnode fallback branch so it should be handled
-    // like normal render functions
-    childContext.ssr = false;
-    // inherit parent scope analysis state
-    childContext.scopes = Object.assign({}, parentContext.scopes);
-    childContext.identifiers = Object.assign({}, parentContext.identifiers);
-    childContext.imports = parentContext.imports;
-    // traverse
-    traverseNode(childRoot, childContext);
-    ['helpers', 'components', 'directives'].forEach(key => {
-        childContext[key].forEach((value, helperKey) => {
-            if (key === 'helpers') {
-                const parentCount = parentContext.helpers.get(helperKey);
-                if (parentCount === undefined) {
-                    parentContext.helpers.set(helperKey, value);
-                }
-                else {
-                    parentContext.helpers.set(helperKey, value + parentCount);
-                }
-            }
-            else {
-                parentContext[key].add(value);
-            }
-        });
-    });
-    // imports/hoists are not merged because:
-    // - imports are only used for asset urls and should be consistent between
-    //   node/client branches
-    // - hoists are not enabled for the client branch here
-}
-function clone(v) {
-    if (isArray(v)) {
-        return v.map(clone);
-    }
-    else if (isObject(v)) {
-        const res = {};
-        for (const key in v) {
-            res[key] = clone(v[key]);
-        }
-        return res;
-    }
-    else {
-        return v;
-    }
-}
-
 // for directives with children overwrite (e.g. v-html & v-text), we need to
 // store the raw children so that they can be added in the 2nd pass.
 const rawChildrenMap = new WeakMap();
@@ -33756,14 +33567,17 @@ const ssrTransformElement = (node, context) => {
         const openTag = [`<${node.tag}`];
         // some tags need to be passed to runtime for special checks
         const needTagForRuntime = node.tag === 'textarea' || node.tag.indexOf('-') > 0;
-        // v-bind="obj" or v-bind:[key] can potentially overwrite other static
-        // attrs and can affect final rendering result, so when they are present
-        // we need to bail out to full `renderAttrs`
+        // v-bind="obj", v-bind:[key] and custom directives can potentially
+        // overwrite other static attrs and can affect final rendering result,
+        // so when they are present we need to bail out to full `renderAttrs`
         const hasDynamicVBind = hasDynamicKeyVBind(node);
-        if (hasDynamicVBind) {
-            const { props } = buildProps(node, context, node.props, true /* ssr */);
-            if (props) {
-                const propsExp = createCallExpression(context.helper(SSR_RENDER_ATTRS), [props]);
+        const hasCustomDir = node.props.some(p => p.type === 7 /* DIRECTIVE */ && !isBuiltInDirective(p.name));
+        const needMergeProps = hasDynamicVBind || hasCustomDir;
+        if (needMergeProps) {
+            const { props, directives } = buildProps(node, context, node.props, true /* ssr */);
+            if (props || directives.length) {
+                const mergedProps = buildSSRProps(props, directives, context);
+                const propsExp = createCallExpression(context.helper(SSR_RENDER_ATTRS), [mergedProps]);
                 if (node.tag === 'textarea') {
                     const existingText = node.children[0];
                     // If interpolation, this is dynamic <textarea> content, potentially
@@ -33775,7 +33589,7 @@ const ssrTransformElement = (node, context) => {
                         // it contains value (if yes, render is as children).
                         const tempId = `_temp${context.temps++}`;
                         propsExp.arguments = [
-                            createAssignmentExpression(createSimpleExpression(tempId, false), props)
+                            createAssignmentExpression(createSimpleExpression(tempId, false), mergedProps)
                         ];
                         rawChildrenMap.set(node, createCallExpression(context.helper(SSR_INTERPOLATE), [
                             createConditionalExpression(createSimpleExpression(`"value" in ${tempId}`, false), createSimpleExpression(`${tempId}.value`, false), createSimpleExpression(existingText ? existingText.content : ``, true), false)
@@ -33793,7 +33607,7 @@ const ssrTransformElement = (node, context) => {
                         const tempExp = createSimpleExpression(tempId, false);
                         propsExp.arguments = [
                             createSequenceExpression([
-                                createAssignmentExpression(tempExp, props),
+                                createAssignmentExpression(tempExp, mergedProps),
                                 createCallExpression(context.helper(MERGE_PROPS), [
                                     tempExp,
                                     createCallExpression(context.helper(SSR_GET_DYNAMIC_MODEL_PROPS), [
@@ -33835,11 +33649,11 @@ const ssrTransformElement = (node, context) => {
                     context.onError(createCompilerError(40 /* X_V_SLOT_MISPLACED */, prop.loc));
                 }
                 else if (isTextareaWithValue(node, prop) && prop.exp) {
-                    if (!hasDynamicVBind) {
+                    if (!needMergeProps) {
                         node.children = [createInterpolation(prop.exp, prop.loc)];
                     }
                 }
-                else if (!hasDynamicVBind) {
+                else if (!needMergeProps) {
                     // Directive transforms.
                     const directiveTransform = context.directiveTransforms[prop.name];
                     if (directiveTransform) {
@@ -33905,7 +33719,7 @@ const ssrTransformElement = (node, context) => {
                 if (node.tag === 'textarea' && prop.name === 'value' && prop.value) {
                     rawChildrenMap.set(node, escapeHtml(prop.value.content));
                 }
-                else if (!hasDynamicVBind) {
+                else if (!needMergeProps) {
                     if (prop.name === 'key' || prop.name === 'ref') {
                         continue;
                     }
@@ -33929,6 +33743,29 @@ const ssrTransformElement = (node, context) => {
         node.ssrCodegenNode = createTemplateLiteral(openTag);
     };
 };
+function buildSSRProps(props, directives, context) {
+    let mergePropsArgs = [];
+    if (props) {
+        if (props.type === 14 /* JS_CALL_EXPRESSION */) {
+            // already a mergeProps call
+            mergePropsArgs = props.arguments;
+        }
+        else {
+            mergePropsArgs.push(props);
+        }
+    }
+    if (directives.length) {
+        for (const dir of directives) {
+            mergePropsArgs.push(createCallExpression(context.helper(SSR_GET_DIRECTIVE_PROPS), [
+                `_ctx`,
+                ...buildDirectiveArgs(dir, context).elements
+            ]));
+        }
+    }
+    return mergePropsArgs.length > 1
+        ? createCallExpression(context.helper(MERGE_PROPS), mergePropsArgs)
+        : mergePropsArgs[0];
+}
 function isTrueFalseValue(prop) {
     if (prop.type === 7 /* DIRECTIVE */) {
         return (prop.name === 'bind' &&
@@ -33989,6 +33826,228 @@ function ssrProcessElement(node, context) {
     }
 }
 
+// We need to construct the slot functions in the 1st pass to ensure proper
+// scope tracking, but the children of each slot cannot be processed until
+// the 2nd pass, so we store the WIP slot functions in a weakMap during the 1st
+// pass and complete them in the 2nd pass.
+const wipMap$1 = new WeakMap();
+const componentTypeMap = new WeakMap();
+// ssr component transform is done in two phases:
+// In phase 1. we use `buildSlot` to analyze the children of the component into
+// WIP slot functions (it must be done in phase 1 because `buildSlot` relies on
+// the core transform context).
+// In phase 2. we convert the WIP slots from phase 1 into ssr-specific codegen
+// nodes.
+const ssrTransformComponent = (node, context) => {
+    if (node.type !== 1 /* ELEMENT */ ||
+        node.tagType !== 1 /* COMPONENT */) {
+        return;
+    }
+    const component = resolveComponentType(node, context, true /* ssr */);
+    componentTypeMap.set(node, component);
+    if (isSymbol(component)) {
+        if (component === SUSPENSE) {
+            return ssrTransformSuspense(node, context);
+        }
+        return; // built-in component: fallthrough
+    }
+    // Build the fallback vnode-based branch for the component's slots.
+    // We need to clone the node into a fresh copy and use the buildSlots' logic
+    // to get access to the children of each slot. We then compile them with
+    // a child transform pipeline using vnode-based transforms (instead of ssr-
+    // based ones), and save the result branch (a ReturnStatement) in an array.
+    // The branch is retrieved when processing slots again in ssr mode.
+    const vnodeBranches = [];
+    const clonedNode = clone(node);
+    return function ssrPostTransformComponent() {
+        // Using the cloned node, build the normal VNode-based branches (for
+        // fallback in case the child is render-fn based). Store them in an array
+        // for later use.
+        if (clonedNode.children.length) {
+            buildSlots(clonedNode, context, (props, children) => {
+                vnodeBranches.push(createVNodeSlotBranch(props, children, context));
+                return createFunctionExpression(undefined);
+            });
+        }
+        let propsExp = `null`;
+        if (node.props.length) {
+            // note we are not passing ssr: true here because for components, v-on
+            // handlers should still be passed
+            const { props, directives } = buildProps(node, context);
+            if (props || directives.length) {
+                propsExp = buildSSRProps(props, directives, context);
+            }
+        }
+        const wipEntries = [];
+        wipMap$1.set(node, wipEntries);
+        const buildSSRSlotFn = (props, children, loc) => {
+            const fn = createFunctionExpression([props || `_`, `_push`, `_parent`, `_scopeId`], undefined, // no return, assign body later
+            true, // newline
+            true, // isSlot
+            loc);
+            wipEntries.push({
+                fn,
+                children,
+                // also collect the corresponding vnode branch built earlier
+                vnodeBranch: vnodeBranches[wipEntries.length]
+            });
+            return fn;
+        };
+        const slots = node.children.length
+            ? buildSlots(node, context, buildSSRSlotFn).slots
+            : `null`;
+        if (typeof component !== 'string') {
+            // dynamic component that resolved to a `resolveDynamicComponent` call
+            // expression - since the resolved result may be a plain element (string)
+            // or a VNode, handle it with `renderVNode`.
+            node.ssrCodegenNode = createCallExpression(context.helper(SSR_RENDER_VNODE), [
+                `_push`,
+                createCallExpression(context.helper(CREATE_VNODE), [
+                    component,
+                    propsExp,
+                    slots
+                ]),
+                `_parent`
+            ]);
+        }
+        else {
+            node.ssrCodegenNode = createCallExpression(context.helper(SSR_RENDER_COMPONENT), [component, propsExp, slots, `_parent`]);
+        }
+    };
+};
+function ssrProcessComponent(node, context) {
+    const component = componentTypeMap.get(node);
+    if (!node.ssrCodegenNode) {
+        // this is a built-in component that fell-through.
+        if (component === TELEPORT) {
+            return ssrProcessTeleport(node, context);
+        }
+        else if (component === SUSPENSE) {
+            return ssrProcessSuspense(node, context);
+        }
+        else if (component === TRANSITION_GROUP) {
+            return ssrProcessTransitionGroup(node, context);
+        }
+        else {
+            // real fall-through: Transition / KeepAlive
+            // just render its children.
+            processChildren(node.children, context);
+        }
+    }
+    else {
+        // finish up slot function expressions from the 1st pass.
+        const wipEntries = wipMap$1.get(node) || [];
+        for (let i = 0; i < wipEntries.length; i++) {
+            const { fn, children, vnodeBranch } = wipEntries[i];
+            // For each slot, we generate two branches: one SSR-optimized branch and
+            // one normal vnode-based branch. The branches are taken based on the
+            // presence of the 2nd `_push` argument (which is only present if the slot
+            // is called by `_ssrRenderSlot`.
+            fn.body = createIfStatement(createSimpleExpression(`_push`, false), processChildrenAsStatement(children, context, false, true /* withSlotScopeId */), vnodeBranch);
+        }
+        // component is inside a slot, inherit slot scope Id
+        if (context.withSlotScopeId) {
+            node.ssrCodegenNode.arguments.push(`_scopeId`);
+        }
+        if (typeof component === 'string') {
+            // static component
+            context.pushStatement(createCallExpression(`_push`, [node.ssrCodegenNode]));
+        }
+        else {
+            // dynamic component (`resolveDynamicComponent` call)
+            // the codegen node is a `renderVNode` call
+            context.pushStatement(node.ssrCodegenNode);
+        }
+    }
+}
+const rawOptionsMap = new WeakMap();
+const [baseNodeTransforms, baseDirectiveTransforms] = getBaseTransformPreset(true);
+const vnodeNodeTransforms = [...baseNodeTransforms, ...DOMNodeTransforms];
+const vnodeDirectiveTransforms = Object.assign(Object.assign({}, baseDirectiveTransforms), DOMDirectiveTransforms);
+function createVNodeSlotBranch(props, children, parentContext) {
+    // apply a sub-transform using vnode-based transforms.
+    const rawOptions = rawOptionsMap.get(parentContext.root);
+    const subOptions = Object.assign(Object.assign({}, rawOptions), { 
+        // overwrite with vnode-based transforms
+        nodeTransforms: [
+            ...vnodeNodeTransforms,
+            ...(rawOptions.nodeTransforms || [])
+        ], directiveTransforms: Object.assign(Object.assign({}, vnodeDirectiveTransforms), (rawOptions.directiveTransforms || {})) });
+    // wrap the children with a wrapper template for proper children treatment.
+    const wrapperNode = {
+        type: 1 /* ELEMENT */,
+        ns: 0 /* HTML */,
+        tag: 'template',
+        tagType: 3 /* TEMPLATE */,
+        isSelfClosing: false,
+        // important: provide v-slot="props" on the wrapper for proper
+        // scope analysis
+        props: [
+            {
+                type: 7 /* DIRECTIVE */,
+                name: 'slot',
+                exp: props,
+                arg: undefined,
+                modifiers: [],
+                loc: locStub
+            }
+        ],
+        children,
+        loc: locStub,
+        codegenNode: undefined
+    };
+    subTransform(wrapperNode, subOptions, parentContext);
+    return createReturnStatement(children);
+}
+function subTransform(node, options, parentContext) {
+    const childRoot = createRoot([node]);
+    const childContext = createTransformContext(childRoot, options);
+    // this sub transform is for vnode fallback branch so it should be handled
+    // like normal render functions
+    childContext.ssr = false;
+    // inherit parent scope analysis state
+    childContext.scopes = Object.assign({}, parentContext.scopes);
+    childContext.identifiers = Object.assign({}, parentContext.identifiers);
+    childContext.imports = parentContext.imports;
+    // traverse
+    traverseNode(childRoot, childContext);
+    ['helpers', 'components', 'directives'].forEach(key => {
+        childContext[key].forEach((value, helperKey) => {
+            if (key === 'helpers') {
+                const parentCount = parentContext.helpers.get(helperKey);
+                if (parentCount === undefined) {
+                    parentContext.helpers.set(helperKey, value);
+                }
+                else {
+                    parentContext.helpers.set(helperKey, value + parentCount);
+                }
+            }
+            else {
+                parentContext[key].add(value);
+            }
+        });
+    });
+    // imports/hoists are not merged because:
+    // - imports are only used for asset urls and should be consistent between
+    //   node/client branches
+    // - hoists are not enabled for the client branch here
+}
+function clone(v) {
+    if (isArray(v)) {
+        return v.map(clone);
+    }
+    else if (isObject(v)) {
+        const res = {};
+        for (const key in v) {
+            res[key] = clone(v[key]);
+        }
+        return res;
+    }
+    else {
+        return v;
+    }
+}
+
 // Because SSR codegen output is completely different from client-side output
 // (e.g. multiple elements can be concatenated into a single template literal
 // instead of each getting a corresponding call), we need to apply an extra
@@ -34764,6 +34823,15 @@ function transformAST(ast, s, offset = 0, knownRefs, knownProps) {
                 stmt.left.type === 'VariableDeclaration') {
                 walkVariableDeclaration(stmt.left);
             }
+            else if (stmt.type === 'ExportNamedDeclaration' &&
+                stmt.declaration &&
+                stmt.declaration.type === 'VariableDeclaration') {
+                walkVariableDeclaration(stmt.declaration, isRoot);
+            }
+            else if (stmt.type === 'LabeledStatement' &&
+                stmt.body.type === 'VariableDeclaration') {
+                walkVariableDeclaration(stmt.body, isRoot);
+            }
         }
     }
     function walkVariableDeclaration(stmt, isRoot = false) {
@@ -35042,6 +35110,7 @@ function transformAST(ast, s, offset = 0, knownRefs, knownProps) {
                 walkScope(node);
                 return;
             }
+            // skip type nodes
             if (parent &&
                 parent.type.startsWith('TS') &&
                 parent.type !== 'TSAsExpression' &&
@@ -35141,7 +35210,7 @@ function compileScript(sfc, options) {
     let { script, scriptSetup, source, filename } = sfc;
     // feature flags
     // TODO remove support for deprecated options when out of experimental
-    const enableRefTransform = !!options.reactivityTransform ||
+    const enableReactivityTransform = !!options.reactivityTransform ||
         !!options.refSugar ||
         !!options.refTransform;
     const enablePropsTransform = !!options.reactivityTransform || !!options.propsDestructureTransform;
@@ -35161,6 +35230,7 @@ function compileScript(sfc, options) {
         scriptLang === 'tsx' ||
         scriptSetupLang === 'ts' ||
         scriptSetupLang === 'tsx';
+    // resolve parser plugins
     const plugins = [];
     if (!isTS || scriptLang === 'tsx' || scriptSetupLang === 'tsx') {
         plugins.push('jsx');
@@ -35185,7 +35255,7 @@ function compileScript(sfc, options) {
                 sourceType: 'module'
             }).program;
             const bindings = analyzeScriptBindings(scriptAst.body);
-            if (enableRefTransform && shouldTransform(content)) {
+            if (enableReactivityTransform && shouldTransform(content)) {
                 const s = new MagicString(source);
                 const startOffset = script.loc.start.offset;
                 const endOffset = script.loc.end.offset;
@@ -35652,10 +35722,10 @@ function compileScript(sfc, options) {
                 walkDeclaration(node, scriptBindings, userImportAlias);
             }
         }
-        // apply ref transform
-        if (enableRefTransform && shouldTransform(script.content)) {
-            const { rootRefs: rootVars, importedHelpers } = transformAST(scriptAst, s, scriptStartOffset);
-            refBindings = rootVars;
+        // apply reactivity transform
+        if (enableReactivityTransform && shouldTransform(script.content)) {
+            const { rootRefs, importedHelpers } = transformAST(scriptAst, s, scriptStartOffset);
+            refBindings = rootRefs;
             for (const h of importedHelpers) {
                 helperImports.add(h);
             }
@@ -35840,8 +35910,10 @@ function compileScript(sfc, options) {
             }
         }
     }
-    // 3. Apply ref sugar transform
-    if ((enableRefTransform && shouldTransform(scriptSetup.content)) ||
+    // 3. Apply reactivity transform
+    if ((enableReactivityTransform &&
+        // normal <script> had ref bindings that maybe used in <script setup>
+        (refBindings || shouldTransform(scriptSetup.content))) ||
         propsDestructureDecl) {
         const { rootRefs, importedHelpers } = transformAST(scriptSetupAst, s, startOffset, refBindings, propsDestructuredBindings);
         refBindings = refBindings ? [...refBindings, ...rootRefs] : rootRefs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/compiler-sfc",
-  "version": "3.2.27",
+  "version": "3.2.31",
   "description": "@vue/compiler-sfc",
   "main": "dist/compiler-sfc.cjs.js",
   "module": "dist/compiler-sfc.esm-browser.js",
@@ -19,7 +19,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vuejs/vue-next.git",
+    "url": "git+https://github.com/vuejs/core.git",
     "directory": "packages/compiler-sfc"
   },
   "keywords": [
@@ -28,16 +28,16 @@
   "author": "Evan You",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/vuejs/vue-next/issues"
+    "url": "https://github.com/vuejs/core/issues"
   },
-  "homepage": "https://github.com/vuejs/vue-next/tree/master/packages/compiler-sfc#readme",
+  "homepage": "https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme",
   "dependencies": {
     "@babel/parser": "^7.16.4",
-    "@vue/compiler-core": "3.2.27",
-    "@vue/compiler-dom": "3.2.27",
-    "@vue/compiler-ssr": "3.2.27",
-    "@vue/reactivity-transform": "3.2.27",
-    "@vue/shared": "3.2.27",
+    "@vue/compiler-core": "3.2.31",
+    "@vue/compiler-dom": "3.2.31",
+    "@vue/compiler-ssr": "3.2.31",
+    "@vue/reactivity-transform": "3.2.31",
+    "@vue/shared": "3.2.31",
     "estree-walker": "^2.0.2",
     "magic-string": "^0.25.7",
     "source-map": "^0.6.1",