refactor(compiler-vapor): remove template ir node

This commit is contained in:
三咲智子 Kevin Deng 2024-02-21 17:41:23 +08:00
parent ba29b4c89a
commit 66c0e82d4b
No known key found for this signature in database
GPG Key ID: 69992F2250DFD93E
9 changed files with 24 additions and 192 deletions

View File

@ -156,81 +156,3 @@ export function render(_ctx) {
return n0 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
}"
`;

View File

@ -22,10 +22,7 @@ describe('compiler v-bind', () => {
id: 1, id: 1,
flags: DynamicFlag.REFERENCED, flags: DynamicFlag.REFERENCED,
}) })
expect(ir.template[0]).toMatchObject({ expect(ir.template).toEqual(['<div></div>'])
type: IRNodeTypes.TEMPLATE_FACTORY,
template: '<div></div>',
})
expect(ir.effect).lengthOf(1) expect(ir.effect).lengthOf(1)
expect(ir.effect[0].expressions).lengthOf(1) expect(ir.effect[0].expressions).lengthOf(1)
expect(ir.effect[0].operations).lengthOf(1) expect(ir.effect[0].operations).lengthOf(1)
@ -243,10 +240,7 @@ describe('compiler v-bind', () => {
end: { line: 1, column: 19 }, end: { line: 1, column: 19 },
}, },
}) })
expect(ir.template[0]).toMatchObject({ expect(ir.template).toEqual(['<div arg></div>'])
type: IRNodeTypes.TEMPLATE_FACTORY,
template: '<div arg></div>',
})
expect(code).matchSnapshot() expect(code).matchSnapshot()
expect(code).contains(JSON.stringify('<div arg></div>')) expect(code).contains(JSON.stringify('<div arg></div>'))

View File

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

View File

@ -63,7 +63,7 @@ describe('v-html', () => {
expect(helpers.size).toBe(0) expect(helpers.size).toBe(0)
// children should have been removed // children should have been removed
expect(ir.template).toMatchObject([{ template: '<div></div>' }]) expect(ir.template).toEqual(['<div></div>'])
expect(ir.operation).toEqual([]) expect(ir.operation).toEqual([])
expect(ir.effect).toMatchObject([ expect(ir.effect).toMatchObject([

View File

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

View File

@ -63,7 +63,7 @@ describe('v-text', () => {
]) ])
// children should have been removed // children should have been removed
expect(ir.template).toMatchObject([{ template: '<div></div>' }]) expect(ir.template).toEqual(['<div></div>'])
expect(ir.effect).toMatchObject([ expect(ir.effect).toMatchObject([
{ {

View File

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

View File

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

View File

@ -178,16 +178,13 @@ function createRootContext(
} }
const existing = root.template.findIndex( const existing = root.template.findIndex(
t => t.template === this.template, template => template === this.template,
) )
if (existing !== -1) { if (existing !== -1) {
return (this.block.templateIndex = existing) return (this.block.templateIndex = existing)
} }
root.template.push({ root.template.push(this.template)
type: IRNodeTypes.TEMPLATE_FACTORY,
template: this.template,
})
return (this.block.templateIndex = root.template.length - 1) return (this.block.templateIndex = root.template.length - 1)
}, },
registerOperation(...node) { registerOperation(...node) {