chore(compiler): support normalScript

baiwusanyu-c · Nov 2, 2023 · 6ecb49c · 6ecb49c
1 parent 47d3900
commit 6ecb49c
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 63 deletions.
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
@@ -53,7 +53,7 @@ import {
 import { analyzeScriptBindings } from './script/analyzeScriptBindings'
 import { isImportUsed } from './script/importUsageCheck'
 import { processAwait } from './script/topLevelAwait'
-import {CE_STYLE_ATTRS_HELPER, genCEStyleAttrs} from "./style/compileStyleAttrs";
+import {CE_STYLE_ATTRS_HELPER, genCEStyleAttrs} from "./style/ceStyleAttrs";
 
 export interface SFCScriptCompileOptions {
   /**
@@ -781,7 +781,7 @@ export function compileScript(
     )
   }
 
-  debugger
+
   if (
     ctx.descriptor.ceStyleAttrs.length &&
     // no need to do this when targeting SSR
@@ -791,7 +791,7 @@ export function compileScript(
     ctx.helperImports.add('unref')
     ctx.s.prependLeft(
       startOffset,
-      `\n${genCEStyleAttrs(ctx)}\n`
+      `\n${genCEStyleAttrs(ctx.descriptor.ceStyleAttrs, ctx.bindingMetadata)}\n`
     )
   }
 

diff --git a/packages/compiler-sfc/src/script/normalScript.ts b/packages/compiler-sfc/src/script/normalScript.ts
@@ -4,7 +4,8 @@ import { ScriptCompileContext } from './context'
 import MagicString from 'magic-string'
 import { RawSourceMap } from 'source-map-js'
 import { rewriteDefaultAST } from '../rewriteDefault'
-import { genNormalScriptCssVarsCode } from '../style/cssVars'
+import { CSS_VARS_HELPER, genCssVarsCode } from '../style/cssVars'
+import { CE_STYLE_ATTRS_HELPER, genCEStyleAttrs } from "../style/ceStyleAttrs";
 
 export const normalScriptDefaultVar = `__default__`
 
@@ -22,7 +23,7 @@ export function processNormalScript(
     let map = script.map
     const scriptAst = ctx.scriptAst!
     const bindings = analyzeScriptBindings(scriptAst.body)
-    const { source, filename, cssVars } = ctx.descriptor
+    const { source, filename, cssVars, ceStyleAttrs } = ctx.descriptor
     const { sourceMap, genDefaultAs, isProd } = ctx.options
 
     // TODO remove in 3.4
@@ -50,20 +51,35 @@ export function processNormalScript(
       }
     }
 
-    if (cssVars.length || genDefaultAs) {
+    if (cssVars.length || ceStyleAttrs.length ||genDefaultAs) {
       const defaultVar = genDefaultAs || normalScriptDefaultVar
       const s = new MagicString(content)
       rewriteDefaultAST(scriptAst.body, s, defaultVar)
       content = s.toString()
+      let injectCode = ''
+      let injectImporter = []
       if (cssVars.length && !ctx.options.templateOptions?.ssr) {
-        content += genNormalScriptCssVarsCode(
+        injectCode += genCssVarsCode(
           cssVars,
           bindings,
           scopeId,
           !!isProd,
-          defaultVar
+        ) + '\n'
+        injectImporter.push(CSS_VARS_HELPER)
+      }
+
+      if (ceStyleAttrs.length && !ctx.options.templateOptions?.ssr) {
+        injectCode += genCEStyleAttrs(
+          ceStyleAttrs,
+          bindings,
         )
+        injectImporter.push(CE_STYLE_ATTRS_HELPER)
+      }
+
+      if(injectCode){
+        content += genInjectCode(injectCode, defaultVar, injectImporter)
       }
+
       if (!genDefaultAs) {
         content += `\nexport default ${defaultVar}`
       }
@@ -81,3 +97,17 @@ export function processNormalScript(
     return script
   }
 }
+
+// <script setup> already gets the calls injected as part of the transform
+// this is only for single normal <script>
+function genInjectCode(content: string, defaultVar: string, importer: string[]){
+  const importerContent = importer.map(v => ` ${v} as _${v} `).join(',')
+  return (
+    `\nimport { ${importerContent} } from 'vue'\n` +
+    `const __injectCSSVars__ = () => {\n${content}}\n` +
+    `const __setup__ = ${defaultVar}.setup\n` +
+    `${defaultVar}.setup = __setup__\n` +
+    `  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }\n` +
+    `  : __injectCSSVars__\n`
+  )
+}
diff --git a/packages/compiler-sfc/src/style/ceStyleAttrs.ts b/packages/compiler-sfc/src/style/ceStyleAttrs.ts
@@ -9,17 +9,17 @@ import {
   processExpression,
   SimpleExpressionNode
 } from "@vue/compiler-core";
-import {ScriptCompileContext} from "../script/context";
-import { genCssVarsCode} from "./cssVars";
 
 export const CE_STYLE_ATTRS_HELPER = `useCEStyleAttrs`
 
-export function genCEStyleAttrs( ctx: ScriptCompileContext){
-  const ceStyleAttrs = ctx.descriptor.ceStyleAttrs
+export function genCEStyleAttrs(
+  ceStyleAttrs: Array<AttributeNode | DirectiveNode>[],
+  bindings: BindingMetadata
+){
   let code = ''
   for (let i = 0; i < ceStyleAttrs.length; i++) {
     const ceStyleAttr = ceStyleAttrs[i]
-    code = `${code}${doGenStyleAttrsCode(ceStyleAttr, ctx.bindingMetadata)},\n`
+    code = `${code}${doGenStyleAttrsCode(ceStyleAttr, bindings)},\n`
   }
   return `_${CE_STYLE_ATTRS_HELPER}(_ctx => ([\n${code}]))`
 }
@@ -71,32 +71,6 @@ function genAttrsFromList(attrs: Array<AttributeNode | DirectiveNode>,){
   return code
 }
 
-
-export function genNormalScriptCEStyleAttrsCode(
-  cssVars: string[],
-  bindings: BindingMetadata,
-  id: string,
-  isProd: boolean,
-  defaultVar: string
-): string {
-  return (
-    `\nimport { ${CE_STYLE_ATTRS_HELPER} as _${CE_STYLE_ATTRS_HELPER} } from 'vue'\n` +
-    `const __injectCEStyleAttrs__ = () => {\n${genCssVarsCode(
-      cssVars,
-      bindings,
-      id,
-      isProd
-    )}}\n` +
-    `const __setup__ = ${defaultVar}.setup\n` +
-    `${defaultVar}.setup = __setup__\n` +
-    `  ? (props, ctx) => { __injectCEStyleAttrs__();return __setup__(props, ctx) }\n` +
-    `  : __injectCEStyleAttrs__\n`
-  )
-}
-
-
-// TODO normal script
-// TODO 兼容 useCSSvars
 // TODO unit test
 
 /*

diff --git a/packages/compiler-sfc/src/style/cssVars.ts b/packages/compiler-sfc/src/style/cssVars.ts
@@ -176,27 +176,3 @@ export function genCssVarsCode(
 
   return `_${CSS_VARS_HELPER}(_ctx => (${transformedString}))`
 }
-
-// <script setup> already gets the calls injected as part of the transform
-// this is only for single normal <script>
-export function genNormalScriptCssVarsCode(
-  cssVars: string[],
-  bindings: BindingMetadata,
-  id: string,
-  isProd: boolean,
-  defaultVar: string
-): string {
-  return (
-    `\nimport { ${CSS_VARS_HELPER} as _${CSS_VARS_HELPER} } from 'vue'\n` +
-    `const __injectCSSVars__ = () => {\n${genCssVarsCode(
-      cssVars,
-      bindings,
-      id,
-      isProd
-    )}}\n` +
-    `const __setup__ = ${defaultVar}.setup\n` +
-    `${defaultVar}.setup = __setup__\n` +
-    `  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }\n` +
-    `  : __injectCSSVars__\n`
-  )
-}