refactor(compiler-vapor): remove template ir node

vuejs · Feb 21, 2024 · 66c0e82 · 66c0e82
1 parent ba29b4c
commit 66c0e82
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 192 deletions.
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vModel.spec.ts.snap
@@ -156,81 +156,3 @@ export function render(_ctx) {
   return n0
 }"
 `;
-
-exports[`compiler: vModel transform > should work with input (checkbox) 1`] = `
-"import { children as _children, vModelCheckbox as _vModelCheckbox, withDirectives as _withDirectives, on as _on, template as _template } from 'vue/vapor';
-const t0 = _template("<input type=\\"checkbox\\">")
-
-export function render(_ctx) {
-  const n0 = t0()
-  const n1 = _children(n0, 0)
-  _withDirectives(n1, [[_vModelCheckbox, () => _ctx.model]])
-  _on(n1, "update:modelValue", $event => (_ctx.model = $event))
-  return n0
-}"
-`;
-
-exports[`compiler: vModel transform > should work with input (dynamic type) 1`] = `
-"import { children as _children, vModelDynamic as _vModelDynamic, withDirectives as _withDirectives, on as _on, template as _template } from 'vue/vapor';
-const t0 = _template("<input>")
-
-export function render(_ctx) {
-  const n0 = t0()
-  const n1 = _children(n0, 0)
-  _withDirectives(n1, [[_vModelDynamic, () => _ctx.model]])
-  _on(n1, "update:modelValue", $event => (_ctx.model = $event))
-  return n0
-}"
-`;
-
-exports[`compiler: vModel transform > should work with input (radio) 1`] = `
-"import { children as _children, vModelRadio as _vModelRadio, withDirectives as _withDirectives, on as _on, template as _template } from 'vue/vapor';
-const t0 = _template("<input type=\\"radio\\">")
-
-export function render(_ctx) {
-  const n0 = t0()
-  const n1 = _children(n0, 0)
-  _withDirectives(n1, [[_vModelRadio, () => _ctx.model]])
-  _on(n1, "update:modelValue", $event => (_ctx.model = $event))
-  return n0
-}"
-`;
-
-exports[`compiler: vModel transform > should work with input (text) 1`] = `
-"import { children as _children, vModelText as _vModelText, withDirectives as _withDirectives, on as _on, template as _template } from 'vue/vapor';
-const t0 = _template("<input type=\\"text\\">")
-
-export function render(_ctx) {
-  const n0 = t0()
-  const n1 = _children(n0, 0)
-  _withDirectives(n1, [[_vModelText, () => _ctx.model]])
-  _on(n1, "update:modelValue", $event => (_ctx.model = $event))
-  return n0
-}"
-`;
-
-exports[`compiler: vModel transform > should work with select 1`] = `
-"import { children as _children, vModelSelect as _vModelSelect, withDirectives as _withDirectives, on as _on, template as _template } from 'vue/vapor';
-const t0 = _template("<select></select>")
-
-export function render(_ctx) {
-  const n0 = t0()
-  const n1 = _children(n0, 0)
-  _withDirectives(n1, [[_vModelSelect, () => _ctx.model]])
-  _on(n1, "update:modelValue", $event => (_ctx.model = $event))
-  return n0
-}"
-`;
-
-exports[`compiler: vModel transform > should work with simple expression 1`] = `
-"import { children as _children, vModelText as _vModelText, withDirectives as _withDirectives, on as _on, template as _template } from 'vue/vapor';
-const t0 = _template("<input>")
-
-export function render(_ctx) {
-  const n0 = t0()
-  const n1 = _children(n0, 0)
-  _withDirectives(n1, [[_vModelText, () => _ctx.model]])
-  _on(n1, "update:modelValue", $event => (_ctx.model = $event))
-  return n0
-}"
-`;
diff --git a/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts b/packages/compiler-vapor/__tests__/transforms/vBind.spec.ts
@@ -22,10 +22,7 @@ describe('compiler v-bind', () => {
       id: 1,
       flags: DynamicFlag.REFERENCED,
     })
-    expect(ir.template[0]).toMatchObject({
-      type: IRNodeTypes.TEMPLATE_FACTORY,
-      template: '<div></div>',
-    })
+    expect(ir.template).toEqual(['<div></div>'])
     expect(ir.effect).lengthOf(1)
     expect(ir.effect[0].expressions).lengthOf(1)
     expect(ir.effect[0].operations).lengthOf(1)
@@ -243,10 +240,7 @@ describe('compiler v-bind', () => {
         end: { line: 1, column: 19 },
       },
     })
-    expect(ir.template[0]).toMatchObject({
-      type: IRNodeTypes.TEMPLATE_FACTORY,
-      template: '<div arg></div>',
-    })
+    expect(ir.template).toEqual(['<div arg></div>'])
 
     expect(code).matchSnapshot()
     expect(code).contains(JSON.stringify('<div arg></div>'))

diff --git a/packages/compiler-vapor/__tests__/transforms/vFor.spec.ts b/packages/compiler-vapor/__tests__/transforms/vFor.spec.ts
@@ -27,13 +27,7 @@ describe('compiler: v-for', () => {
     expect(code).matchSnapshot()
     expect(vaporHelpers).contains('createFor')
     expect(helpers.size).toBe(0)
-    expect(ir.template).lengthOf(1)
-    expect(ir.template).toMatchObject([
-      {
-        template: '<div></div>',
-        type: IRNodeTypes.TEMPLATE_FACTORY,
-      },
-    ])
+    expect(ir.template).toEqual(['<div></div>'])
     expect(ir.operation).toMatchObject([
       {
         type: IRNodeTypes.FOR,

diff --git a/packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts b/packages/compiler-vapor/__tests__/transforms/vHtml.spec.ts
@@ -63,7 +63,7 @@ describe('v-html', () => {
     expect(helpers.size).toBe(0)
 
     // children should have been removed
-    expect(ir.template).toMatchObject([{ template: '<div></div>' }])
+    expect(ir.template).toEqual(['<div></div>'])
 
     expect(ir.operation).toEqual([])
     expect(ir.effect).toMatchObject([

diff --git a/packages/compiler-vapor/__tests__/transforms/vIf.spec.ts b/packages/compiler-vapor/__tests__/transforms/vIf.spec.ts
@@ -31,13 +31,7 @@ describe('compiler: v-if', () => {
     expect(vaporHelpers).contains('createIf')
     expect(helpers.size).toBe(0)
 
-    expect(ir.template).lengthOf(1)
-    expect(ir.template).toMatchObject([
-      {
-        template: '<div></div>',
-        type: IRNodeTypes.TEMPLATE_FACTORY,
-      },
-    ])
+    expect(ir.template).toEqual(['<div></div>'])
     expect(ir.operation).toMatchObject([
       {
         type: IRNodeTypes.IF,
@@ -72,13 +66,7 @@ describe('compiler: v-if', () => {
     )
     expect(code).matchSnapshot()
 
-    expect(ir.template).lengthOf(1)
-    expect(ir.template).toMatchObject([
-      {
-        template: '<div></div>hello<p></p>',
-        type: IRNodeTypes.TEMPLATE_FACTORY,
-      },
-    ])
+    expect(ir.template).toEqual(['<div></div>hello<p></p>'])
 
     expect(ir.effect).toEqual([])
     expect((ir.operation[0] as IfIRNode).positive.effect).toMatchObject([
@@ -109,13 +97,7 @@ describe('compiler: v-if', () => {
       `<div v-if="ok">hello</div><div v-if="ok">hello</div>`,
     )
     expect(code).matchSnapshot()
-    expect(ir.template).lengthOf(1)
-    expect(ir.template).toMatchObject([
-      {
-        template: '<div>hello</div>',
-        type: 2,
-      },
-    ])
+    expect(ir.template).toEqual(['<div>hello</div>'])
     expect(ir.returns).toEqual([1, 3])
   })
 
@@ -127,17 +109,7 @@ describe('compiler: v-if', () => {
       `<div v-if="ok"/><p v-else/>`,
     )
     expect(code).matchSnapshot()
-    expect(ir.template).lengthOf(2)
-    expect(ir.template).toMatchObject([
-      {
-        template: '<div></div>',
-        type: IRNodeTypes.TEMPLATE_FACTORY,
-      },
-      {
-        template: '<p></p>',
-        type: IRNodeTypes.TEMPLATE_FACTORY,
-      },
-    ])
+    expect(ir.template).toEqual(['<div></div>', '<p></p>'])
 
     expect(vaporHelpers).contains('createIf')
     expect(ir.effect).lengthOf(0)
@@ -169,17 +141,7 @@ describe('compiler: v-if', () => {
       `<div v-if="ok"/><p v-else-if="orNot"/>`,
     )
     expect(code).matchSnapshot()
-    expect(ir.template).lengthOf(2)
-    expect(ir.template).toMatchObject([
-      {
-        template: '<div></div>',
-        type: IRNodeTypes.TEMPLATE_FACTORY,
-      },
-      {
-        template: '<p></p>',
-        type: IRNodeTypes.TEMPLATE_FACTORY,
-      },
-    ])
+    expect(ir.template).toEqual(['<div></div>', '<p></p>'])
 
     expect(ir.operation).toMatchObject([
       {
@@ -216,21 +178,7 @@ describe('compiler: v-if', () => {
       `<div v-if="ok"/><p v-else-if="orNot"/><template v-else>fine</template>`,
     )
     expect(code).matchSnapshot()
-    expect(ir.template).lengthOf(3)
-    expect(ir.template).toMatchObject([
-      {
-        template: '<div></div>',
-        type: IRNodeTypes.TEMPLATE_FACTORY,
-      },
-      {
-        template: '<p></p>',
-        type: IRNodeTypes.TEMPLATE_FACTORY,
-      },
-      {
-        template: 'fine',
-        type: IRNodeTypes.TEMPLATE_FACTORY,
-      },
-    ])
+    expect(ir.template).toEqual(['<div></div>', '<p></p>', 'fine'])
 
     expect(ir.returns).toEqual([1])
     expect(ir.operation).toMatchObject([
@@ -266,24 +214,12 @@ describe('compiler: v-if', () => {
       <input v-text="text" />
     `)
     expect(code).matchSnapshot()
-    expect(ir.template).lengthOf(4)
-    expect(ir.template).toMatchObject([
-      {
-        template: '<div></div>',
-        type: IRNodeTypes.TEMPLATE_FACTORY,
-      },
-      {
-        template: '<!--foo--><p></p>',
-        type: IRNodeTypes.TEMPLATE_FACTORY,
-      },
-      {
-        template: '<!--bar-->fine',
-        type: IRNodeTypes.TEMPLATE_FACTORY,
-      },
-      {
-        type: IRNodeTypes.TEMPLATE_FACTORY,
-        template: '<input>',
-      },
+    expect(ir.template).toEqual([
+      '<div></div>',
+      '<!--foo--><p></p>',
+      '<!--bar-->fine',
+
+      '<input>',
     ])
   })
 

diff --git a/packages/compiler-vapor/__tests__/transforms/vText.spec.ts b/packages/compiler-vapor/__tests__/transforms/vText.spec.ts
@@ -63,7 +63,7 @@ describe('v-text', () => {
     ])
 
     // children should have been removed
-    expect(ir.template).toMatchObject([{ template: '<div></div>' }])
+    expect(ir.template).toEqual(['<div></div>'])
 
     expect(ir.effect).toMatchObject([
       {

diff --git a/packages/compiler-vapor/src/generators/template.ts b/packages/compiler-vapor/src/generators/template.ts
@@ -1,19 +1,15 @@
 import type { CodegenContext } from '../generate'
-import {
-  DynamicFlag,
-  type IRDynamicInfo,
-  type TemplateFactoryIRNode,
-} from '../ir'
+import { DynamicFlag, type IRDynamicInfo } from '../ir'
 import { NEWLINE, buildCodeFragment, genCall } from './utils'
 
 export function genTemplates(
-  templates: TemplateFactoryIRNode[],
+  templates: string[],
   { vaporHelper }: CodegenContext,
 ) {
   return templates
     .map(
       (template, i) =>
-        `const t${i} = ${vaporHelper('template')}(${JSON.stringify(template.template)})\n`,
+        `const t${i} = ${vaporHelper('template')}(${JSON.stringify(template)})\n`,
     )
     .join('')
 }

diff --git a/packages/compiler-vapor/src/ir.ts b/packages/compiler-vapor/src/ir.ts
@@ -17,8 +17,6 @@ export enum IRNodeTypes {
   ROOT,
   BLOCK_FUNCTION,
 
-  TEMPLATE_FACTORY,
-
   SET_PROP,
   SET_DYNAMIC_PROPS,
   SET_TEXT,
@@ -58,7 +56,7 @@ export interface RootIRNode extends Omit<BlockFunctionIRNode, 'type'> {
   type: IRNodeTypes.ROOT
   node: RootNode
   source: string
-  template: Array<TemplateFactoryIRNode>
+  template: string[]
 }
 
 export interface IfIRNode extends BaseIRNode {
@@ -80,11 +78,6 @@ export interface ForIRNode extends BaseIRNode {
   render: BlockFunctionIRNode
 }
 
-export interface TemplateFactoryIRNode extends BaseIRNode {
-  type: IRNodeTypes.TEMPLATE_FACTORY
-  template: string
-}
-
 export interface IRProp extends Omit<DirectiveTransformResult, 'value'> {
   values: SimpleExpressionNode[]
 }
@@ -177,7 +170,7 @@ export interface WithDirectiveIRNode extends BaseIRNode {
   builtin?: VaporHelper
 }
 
-export type IRNode = OperationNode | RootIRNode | TemplateFactoryIRNode
+export type IRNode = OperationNode | RootIRNode
 export type OperationNode =
   | SetPropIRNode
   | SetDynamicPropsIRNode

diff --git a/packages/compiler-vapor/src/transform.ts b/packages/compiler-vapor/src/transform.ts
@@ -178,16 +178,13 @@ function createRootContext(
       }
 
       const existing = root.template.findIndex(
-        t => t.template === this.template,
+        template => template === this.template,
       )
       if (existing !== -1) {
         return (this.block.templateIndex = existing)
       }
 
-      root.template.push({
-        type: IRNodeTypes.TEMPLATE_FACTORY,
-        template: this.template,
-      })
+      root.template.push(this.template)
       return (this.block.templateIndex = root.template.length - 1)
     },
     registerOperation(...node) {