chore: updated unit test

Author: baiwusanyu-c

Diff for: packages/core/inject/__test__/inject-cssvars.spec.ts

@@ -4,12 +4,14 @@ import {
   createCSSVarsObjCode,
   createUCVCOptionUnHas,
   createUCVCSetupUnHas,
-  createUseCssVarsCode, injectCSSVars,
+  createUseCssVarsCode,
+  injectCSSVars,
   injectCSSVarsOnServer,
   injectUseCssVarsOption,
   injectUseCssVarsSetup,
 } from '../inject-cssvars'
 import { parserCompiledSfc } from '../../parser'
+import { CSSVarsBindingTypes } from '../../parser/utils'
 
 describe('inject-cssvars', () => {
   describe('createUCVCOptionUnHas', () => {
@@ -370,5 +372,163 @@ describe('inject-cssvars', () => {
         mgcStr)
       expect(res2.mgcStr.toString()).toContain(mockContent)
     })
+
+    test('bindingTypes', () => {
+      const mockContent = `
+      const _sfc_main = /* @__PURE__ */ _defineComponent({
+        __name: "App",
+        props: {
+          pcolor: {
+                   type: String
+          }
+        },
+        setup(__props, { expose }) {
+           const color = ref('red')
+           let foo = ref('foo')
+           const color2 = reactive({ color: 'red' })
+           let foo2 = reactive({ foo: 'foo' })
+           const head2 = new Map()
+           const color3 = 'red'
+           const foo3 = { foo: 'foo' }
+           const bar3 = 100
+           const head3 = [1]
+               
+           let color4 = 'red'
+           let foo4 = { foo: 'foo' }
+           let bar4 = 100
+           let head4 = [1]
+        
+           const fn = () => {}
+           const fn2 = function (){}
+           function fn3(){}
+           let fn4 = () => {}
+           let fn5 = function (){}
+           const fn6 = () => {}
+           const fn7 = fn()
+           let fn8 = () => {}
+           let fn9 = fn4()
+           const a = {foo: 'foo', bar:'bar', head:{heads: 'hh'}}
+           const {foo: fooAlias, bar, head: {heads: hh} } = a
+          return {
+            color,
+            foo,
+            color2,
+            foo2,
+            head2,
+            color3,
+            foo3,
+            bar3,
+            head3,
+            color4,
+            foo4,
+            bar4,
+            head4,
+            fn1,
+            fn2,
+            fn3,
+            fn4,
+            fn5,
+            fn6,
+            fn7,
+            fn8,
+            fn9,
+            a,
+            fooAlias,
+            bar,
+            hh,
+          }
+        }
+      })
+      `
+      const parseRes = parserCompiledSfc(mockContent)
+      const mgcStr = new MagicString(mockContent)
+      const res = injectCSSVars(
+        [
+          { value: 'color', has: true, isRef: true },
+          { value: 'foo', has: true, isRef: true },
+          { value: 'color2', has: true, isRef: false },
+          { value: 'foo2', has: true, isRef: false },
+          { value: 'head2', has: true, isRef: false },
+          { value: 'color3', has: true, isRef: false },
+          { value: 'foo3', has: true, isRef: false },
+          { value: 'bar3', has: true, isRef: false },
+          { value: 'head3', has: true, isRef: false },
+          { value: 'color4', has: true, isRef: false },
+          { value: 'foo4', has: true, isRef: false },
+          { value: 'bar4', has: true, isRef: false },
+          { value: 'head4', has: true, isRef: false },
+          { value: 'fn1', has: true, isRef: false },
+          { value: 'fn2', has: true, isRef: false },
+          { value: 'fn3', has: true, isRef: false },
+          { value: 'fn4', has: true, isRef: false },
+          { value: 'fn5', has: true, isRef: false },
+          { value: 'fn6', has: true, isRef: false },
+          { value: 'fn7', has: true, isRef: false },
+          { value: 'fn8', has: true, isRef: false },
+          { value: 'fn9', has: true, isRef: false },
+          { value: 'a', has: true, isRef: false },
+          { value: 'fooAlias', has: true, isRef: false },
+          { value: 'bar', has: true, isRef: false },
+          { value: 'hh', has: true, isRef: false },
+        ] as any,
+        true,
+        parseRes,
+        mgcStr,
+        {
+          color: CSSVarsBindingTypes.SETUP_REF,
+          foo: CSSVarsBindingTypes.SETUP_LET,
+          color2: CSSVarsBindingTypes.SETUP_REACTIVE_CONST,
+          foo2: CSSVarsBindingTypes.SETUP_LET,
+          head2: CSSVarsBindingTypes.SETUP_MAYBE_REF,
+          color3: CSSVarsBindingTypes.LITERAL_CONST,
+          foo3: CSSVarsBindingTypes.SETUP_CONST,
+          bar3: CSSVarsBindingTypes.LITERAL_CONST,
+          head3: CSSVarsBindingTypes.SETUP_CONST,
+          color4: CSSVarsBindingTypes.SETUP_LET,
+          foo4: CSSVarsBindingTypes.SETUP_LET,
+          bar4: CSSVarsBindingTypes.SETUP_LET,
+          head4: CSSVarsBindingTypes.SETUP_LET,
+          fn: CSSVarsBindingTypes.SETUP_CONST,
+          fn2: CSSVarsBindingTypes.SETUP_CONST,
+          fn3: CSSVarsBindingTypes.SETUP_CONST,
+          fn4: CSSVarsBindingTypes.SETUP_LET,
+          fn5: CSSVarsBindingTypes.SETUP_LET,
+          fn6: CSSVarsBindingTypes.SETUP_CONST,
+          fn7: CSSVarsBindingTypes.SETUP_MAYBE_REF,
+          fn8: CSSVarsBindingTypes.SETUP_LET,
+          fn9: CSSVarsBindingTypes.SETUP_LET,
+          a: CSSVarsBindingTypes.SETUP_CONST,
+          fooAlias:CSSVarsBindingTypes.SETUP_MAYBE_REF,
+          bar: CSSVarsBindingTypes.SETUP_MAYBE_REF,
+          hh: CSSVarsBindingTypes.SETUP_MAYBE_REF,
+        })
+      expect(res.mgcStr.toString()).toContain(' "75f73e04": _unref(hh),\n' +
+        '            "0104392a": _unref(bar),\n' +
+        '            "2bbe40ae": _unref(fooAlias),\n' +
+        '            "770ddb39": a,\n' +
+        '            "33bad66e": _unref(fn9),\n' +
+        '            "33d70570": _unref(fn8),\n' +
+        '            "33f33472": _unref(fn7),\n' +
+        '            "340f6374": fn6,\n' +
+        '            "342b9276": _unref(fn5),\n' +
+        '            "3447c178": _unref(fn4),\n' +
+        '            "3463f07a": fn3,\n' +
+        '            "34801f7c": fn2,\n' +
+        '            "349c4e7e": _ctx.fn1,\n' +
+        '            "e29ebaa8": _unref(head4),\n' +
+        '            "268cecf6": _unref(bar4),\n' +
+        '            "6bb6f0b2": _unref(foo4),\n' +
+        '            "6f79c2b5": _unref(color4),\n' +
+        '            "e2bae9aa": head3,\n' +
+        '            "26a91bf8": bar3,\n' +
+        '            "6ba8d931": foo3,\n' +
+        '            "6f6bab34": color3,\n' +
+        '            "e2d718ac": _unref(head2),\n' +
+        '            "6b9ac1b0": _unref(foo2),\n' +
+        '            "6f5d93b3": color2,\n' +
+        '            "2a5f3ac4": _unref(foo),\n' +
+        '            "1439c43b": color.value,')
+      expect(res.mgcStr.toString()).toContain('_useCssVars')
+    })
   })
 })

Diff for: packages/core/parser/__test__/parser-script-binding.spec.ts

@@ -55,12 +55,12 @@ describe('parse sfc to set bindings type', () => {
       color: 'literal-const',
       foo: 'setup-const',
       bar: 'literal-const',
-      head: "setup-const",
+      head: 'setup-const',
       color1: 'setup-let',
       foo1: 'setup-let',
       bar1: 'setup-let',
       head1: 'setup-let',
-      head2: "setup-maybe-ref",
+      head2: 'setup-maybe-ref',
     })
   })
 
@@ -115,9 +115,9 @@ describe('parse sfc to set bindings type', () => {
     const { descriptor } = parse(mockSFC)
     const bindings = analyzeScriptBindings(descriptor)
     expect(bindings).toMatchObject({
-      "fooAlias": "setup-maybe-ref",
-      "bar": "setup-maybe-ref",
-      "hh": "setup-maybe-ref"
+      fooAlias: 'setup-maybe-ref',
+      bar: 'setup-maybe-ref',
+      hh: 'setup-maybe-ref',
     })
   })
 

Diff for: packages/core/parser/ast-grep-rules.ts

@@ -134,7 +134,7 @@ export const astGrepRules = {
     has:
       {
         kind: 'new_expression',
-        field: 'value'
+        field: 'value',
       },
   },
   OBJ_PATTERN_VAL: {

Diff for: packages/core/parser/utils.ts

@@ -7,7 +7,7 @@ export const CSSVarsBindingTypes = {
    */
   DATA: 'data' as VueBindingTypes.DATA,
   /**
-   * declared as a prop
+   * declared as a prop ✅
    */
   PROPS: 'props' as VueBindingTypes.PROPS,
   /**
@@ -16,33 +16,33 @@ export const CSSVarsBindingTypes = {
    */
   PROPS_ALIASED: 'props-aliased' as VueBindingTypes.PROPS_ALIASED,
   /**
-   * a let binding (may or may not be a ref)
+   * a let binding (may or may not be a ref) ✅
    */
   SETUP_LET: 'setup-let' as VueBindingTypes.SETUP_LET,
   /**
    * a const binding that can never be a ref.
    * these bindings don't need `unref()` calls when processed in inlined
-   * template expressions.
+   * template expressions. ✅
    */
   SETUP_CONST: 'setup-const' as VueBindingTypes.SETUP_CONST,
   /**
-   * a const binding that does not need `unref()`, but may be mutated.
+   * a const binding that does not need `unref()`, but may be mutated. ✅
    */
   SETUP_REACTIVE_CONST: 'setup-reactive-const' as VueBindingTypes.SETUP_REACTIVE_CONST,
   /**
-   * a const binding that may be a ref.
+   * a const binding that may be a ref. ✅
    */
   SETUP_MAYBE_REF: 'setup-maybe-ref' as VueBindingTypes.SETUP_MAYBE_REF,
   /**
-   * bindings that are guaranteed to be refs
+   * bindings that are guaranteed to be refs ✅
    */
   SETUP_REF: 'setup-ref' as VueBindingTypes.SETUP_REF,
   /**
    * declared by other options, e.g. computed, inject
    */
   OPTIONS: 'options' as VueBindingTypes.OPTIONS,
   /**
-   * a literal constant, e.g. 'foo', 1, true
+   * a literal constant, e.g. 'foo', 1, true ✅
    */
   LITERAL_CONST: 'literal-const' as VueBindingTypes.LITERAL_CONST,
 } as const