chore: temp commit

Author: baiwusanyu-c

package.json

@@ -120,6 +120,7 @@
     "@vitest/coverage-c8": "^0.31.1",
     "@vitest/ui": "^0.31.1",
     "@vue/compiler-sfc": "^3.3.4",
+    "@vue/compiler-dom": "^3.3.4",
     "bumpp": "^9.1.0",
     "cross-env": "^7.0.3",
     "eslint": "^8.41.0",

packages/core/parser/index.ts

@@ -2,4 +2,5 @@ export * from './parser-variable'
 export * from './parser-import'
 export * from './parser-vbind-m'
 export { parserCompiledSfc } from './parser-compiled-sfc'
+export { analyzeScriptBindings as parseScriptBindings } from './parser-script-bindings'
 export type { IParseSFCRes } from './parser-compiled-sfc'

packages/core/parser/parser-script-bindings.ts

@@ -0,0 +1,142 @@
+import {
+  ArrayExpression,
+  Node,
+  ObjectExpression,
+  Statement
+} from '@babel/types'
+import { BindingMetadata } from '@vue/compiler-dom'
+import { CSSVarsBindingTypes } from "./utils";
+
+/**
+ * Analyze bindings in normal `<script>`
+ * Note that `compileScriptSetup` already analyzes bindings as part of its
+ * compilation process so this should only be used on single `<script>` SFCs.
+ */
+export function analyzeScriptBindings(ast: Statement[]): BindingMetadata {
+  for (const node of ast) {
+    if (
+      node.type === 'ExportDefaultDeclaration' &&
+      node.declaration.type === 'ObjectExpression'
+    ) {
+      return analyzeBindingsFromOptions(node.declaration)
+    }
+  }
+  return {}
+}
+
+function analyzeBindingsFromOptions(node: ObjectExpression): BindingMetadata {
+  const bindings: BindingMetadata = {}
+  // #3270, #3275
+  // mark non-script-setup so we don't resolve components/directives from these
+  Object.defineProperty(bindings, '__isScriptSetup', {
+    enumerable: false,
+    value: false
+  })
+  for (const property of node.properties) {
+    if (
+      property.type === 'ObjectProperty' &&
+      !property.computed &&
+      property.key.type === 'Identifier'
+    ) {
+      // props
+      if (property.key.name === 'props') {
+        // props: ['foo']
+        // props: { foo: ... }
+        for (const key of getObjectOrArrayExpressionKeys(property.value)) {
+          bindings[key] = CSSVarsBindingTypes.PROPS
+        }
+      }
+
+      // inject
+      else if (property.key.name === 'inject') {
+        // inject: ['foo']
+        // inject: { foo: {} }
+        for (const key of getObjectOrArrayExpressionKeys(property.value)) {
+          bindings[key] = CSSVarsBindingTypes.OPTIONS
+        }
+      }
+
+      // computed & methods
+      else if (
+        property.value.type === 'ObjectExpression' &&
+        (property.key.name === 'computed' || property.key.name === 'methods')
+      ) {
+        // methods: { foo() {} }
+        // computed: { foo() {} }
+        for (const key of getObjectExpressionKeys(property.value)) {
+          bindings[key] = CSSVarsBindingTypes.OPTIONS
+        }
+      }
+    }
+
+    // setup & data
+    else if (
+      property.type === 'ObjectMethod' &&
+      property.key.type === 'Identifier' &&
+      (property.key.name === 'setup' || property.key.name === 'data')
+    ) {
+      for (const bodyItem of property.body.body) {
+        // setup() {
+        //   return {
+        //     foo: null
+        //   }
+        // }
+        if (
+          bodyItem.type === 'ReturnStatement' &&
+          bodyItem.argument &&
+          bodyItem.argument.type === 'ObjectExpression'
+        ) {
+          for (const key of getObjectExpressionKeys(bodyItem.argument)) {
+            bindings[key] =
+              property.key.name === 'setup'
+                ? CSSVarsBindingTypes.SETUP_MAYBE_REF
+                : CSSVarsBindingTypes.DATA
+          }
+        }
+      }
+    }
+  }
+
+  return bindings
+}
+
+function getObjectExpressionKeys(node: ObjectExpression): string[] {
+  const keys = []
+  for (const prop of node.properties) {
+    if (prop.type === 'SpreadElement') continue
+    const key = resolveObjectKey(prop.key, prop.computed)
+    if (key) keys.push(String(key))
+  }
+  return keys
+}
+
+function getArrayExpressionKeys(node: ArrayExpression): string[] {
+  const keys = []
+  for (const element of node.elements) {
+    if (element && element.type === 'StringLiteral') {
+      keys.push(element.value)
+    }
+  }
+  return keys
+}
+
+export function getObjectOrArrayExpressionKeys(value: Node): string[] {
+  if (value.type === 'ArrayExpression') {
+    return getArrayExpressionKeys(value)
+  }
+  if (value.type === 'ObjectExpression') {
+    return getObjectExpressionKeys(value)
+  }
+  return []
+}
+
+export function resolveObjectKey(node: Node, computed: boolean) {
+  switch (node.type) {
+    case 'StringLiteral':
+    case 'NumericLiteral':
+      return String(node.value)
+    case 'Identifier':
+      if (!computed) return node.name
+  }
+  return undefined
+}

packages/core/parser/utils.ts

@@ -0,0 +1,48 @@
+// Enums:
+/** This is derived from `@vue/compiler-core` */
+import type { BindingTypes as VueBindingTypes } from '@vue/compiler-dom'
+export const CSSVarsBindingTypes = {
+  /**
+   * returned from data()
+   */
+  DATA: 'data' as VueBindingTypes.DATA,
+  /**
+   * declared as a prop
+   */
+  PROPS: 'props' as VueBindingTypes.PROPS,
+  /**
+   * a local alias of a `<script setup>` destructured prop.
+   * the original is stored in __propsAliases of the bindingMetadata object.
+   */
+  PROPS_ALIASED: 'props-aliased' as VueBindingTypes.PROPS_ALIASED,
+  /**
+   * 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.
+   */
+  SETUP_CONST: 'setup-const' as VueBindingTypes.SETUP_CONST,
+  /**
+   * 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.
+   */
+  SETUP_MAYBE_REF: 'setup-maybe-ref' as VueBindingTypes.SETUP_MAYBE_REF,
+  /**
+   * 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
+   */
+  LITERAL_CONST: 'literal-const' as VueBindingTypes.LITERAL_CONST,
+} as const

packages/core/runtime/handle-variable.ts

@@ -1,5 +1,5 @@
-import { parse } from '@vue/compiler-sfc'
-import { getVariable, matchVariable } from '../parser'
+import { parse, compileScript } from '@vue/compiler-sfc'
+import { getVariable, matchVariable, parseScriptBindings } from '../parser'
 import { getVBindVariableListByPath } from './process-css'
 import type { IVueCSSVarsCtx } from '../types'
 
@@ -10,6 +10,15 @@ export function handleVBindVariable(
 ) {
   debugger
   const { descriptor } = parse(code)
+  const { scriptAst} = compileScript(descriptor,{
+    id,
+    inlineTemplate: true,
+  })
+  const bindings = parseScriptBindings(scriptAst!)
+  console.log(bindings)
+
+
+
   // let lang = 'js'
   // if (descriptor?.scriptSetup?.lang)
   //   lang = descriptor.scriptSetup.lang