Remove babel and use typescript for processing expressions (#312)

vuedx · Nov 8, 2022 · 000a6e6 · 000a6e6
1 parent dffab27
commit 000a6e6
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 306 deletions.
diff --git a/packages/compiler-tsx/src/template/compile.ts b/packages/compiler-tsx/src/template/compile.ts
@@ -52,7 +52,7 @@ export function compileFromAST(
   source: RootNode,
   options: Options & TransformOptionsResolved,
 ): Output {
-  const root = withScope(clone(source))
+  const root = withScope(clone(source), options.typescript)
   const ast = clone(source)
   ast.scope = root.scope
   const context: NodeTransformContext = {

diff --git a/packages/compiler-tsx/src/template/scope/Scope.spec.ts b/packages/compiler-tsx/src/template/scope/Scope.spec.ts
@@ -1,13 +1,15 @@
 import { baseParse } from '@vue/compiler-core'
 import { withScope } from './Scope'
+import * as ts from 'typescript/lib/tsserverlibrary'
+import { first } from '@vuedx/shared'
 
 describe('scope', () => {
   test('should set scope', () => {
     const ast = baseParse(
       '<div v-for="(foo, index) of foos">{{ foo * 2 }}</div>',
     )
 
-    withScope(ast)
+    withScope(ast, ts)
 
     expect(ast.scope.identifiers).toEqual(['foos'])
   })
@@ -17,24 +19,64 @@ describe('scope', () => {
       '<div v-for="(foo, index) of foos">{{ foo * 2 }}<input v-model="bar" /></div>',
     )
 
-    withScope(ast)
+    withScope(ast, ts)
 
     expect(ast.scope.identifiers).toEqual(['foos', 'bar'])
   })
 
   test('inline object as prop', () => {
     const ast = baseParse(`<div :data-example="{ foo: 'bar', id: 1 }" />`)
 
-    withScope(ast)
+    withScope(ast, ts)
 
     expect(ast.scope.identifiers).toEqual([])
   })
 
   test('incomplete expression', () => {
     const ast = baseParse(`{{ foo. }}`)
+    withScope(ast, ts)
+    expect(ast.scope.identifiers).toEqual(['foo'])
+  })
 
-    withScope(ast)
+  test('expressions', () => {
+    const expressions = {
+      'foo.bar': ['foo'],
+      'foo.bar.baz': ['foo'],
+      'foo.bar.baz()': ['foo'],
+      'foo.bar.baz().qux': ['foo'],
+      'foo[bar]': ['foo', 'bar'],
+      'foo[bar.baz]': ['foo', 'bar'],
+      'foo[bar + baz]': ['foo', 'bar', 'baz'],
+      'foo[bar + baz()]': ['foo', 'bar', 'baz'],
+      'foo[bar + baz(qux)]': ['foo', 'bar', 'baz', 'qux'],
+      '{ foo, bar: baz }': ['foo', 'baz'],
+      '{ foo, [bar]: baz }': ['foo', 'bar', 'baz'],
+      '{ foo: { bar: { baz } } }': ['baz'],
+      '(foo, {bar}, [baz]) => {}': [],
+      '(foo, {key: bar}, [baz]) => {}': [],
+      '(foo, {key: [bar]}, [baz]) => {}': [],
+      '(foo, { key: { bar } }, [baz]) => {}': [],
+    }
 
-    expect(ast.scope.identifiers).toEqual(['foo'])
+    for (const [expression, identifiers] of Object.entries(expressions)) {
+      const ast = baseParse(`{{ ${expression} }}`)
+      withScope(ast, ts)
+      expect(ast.scope.identifiers).toEqual(identifiers)
+    }
+  })
+
+  test('expressions', () => {
+    const expressions = {
+      'foo, {bar}, [baz]': ['foo', 'bar', 'baz'],
+      'foo, {key: bar}, [baz]': ['foo', 'bar', 'baz'],
+      'foo, {key: [bar]}, [baz]': ['foo', 'bar', 'baz'],
+      'foo, { key: { bar } }, [baz]': ['foo', 'bar', 'baz'],
+    }
+
+    for (const [expression, identifiers] of Object.entries(expressions)) {
+      const ast = baseParse(`<F v-slot="${expression}" />`)
+      withScope(ast, ts)
+      expect(first(ast.children).scope.identifiers).toEqual(identifiers)
+    }
   })
 })