diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap index 8f977a9f7..3c4810096 100644 --- a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap +++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap @@ -2,7 +2,7 @@ exports[`comile > bindings 1`] = ` "import { watchEffect } from 'vue'; -import { template, children, insert, setText } from 'vue/vapor'; +import { template, children, createTextNode, insert, setText } from 'vue/vapor'; const t0 = template(\`
Count:
Double:
once:
{{ count }}
\`) import { ref, computed } from 'vue' @@ -21,11 +21,11 @@ const increment = () => count.value++ return (() => { const n0 = t0() const { 1: [n1], 2: [n3], 3: [n5], 4: [n6], 6: [n7],} = children(root) -const n2 = document.createTextNode(count.value) +const n2 = createTextNode(count.value) insert(n2, n1) -const n4 = document.createTextNode(double.value) +const n4 = createTextNode(double.value) insert(n4, n3) -const n8 = document.createTextNode(count.value) +const n8 = createTextNode(count.value) insert(n8, n7) setText(n8, undefined, count.value) watchEffect(() => { diff --git a/packages/compiler-vapor/src/generate.ts b/packages/compiler-vapor/src/generate.ts index dd155025d..c8e2f9e62 100644 --- a/packages/compiler-vapor/src/generate.ts +++ b/packages/compiler-vapor/src/generate.ts @@ -104,9 +104,9 @@ export function generate( break } - case IRNodeTypes.TEXT_NODE: { - // TODO handle by runtime: document.createTextNode - code = `const n${operation.id} = document.createTextNode(${operation.value})\n` + case IRNodeTypes.CREATE_TEXT_NODE: { + code = `const n${operation.id} = createTextNode(${operation.value})\n` + vaporHelpers.add('createTextNode') break } diff --git a/packages/compiler-vapor/src/ir.ts b/packages/compiler-vapor/src/ir.ts index dd399773f..ef426e0fa 100644 --- a/packages/compiler-vapor/src/ir.ts +++ b/packages/compiler-vapor/src/ir.ts @@ -9,7 +9,7 @@ export const enum IRNodeTypes { SET_HTML, INSERT_NODE, - TEXT_NODE, + CREATE_TEXT_NODE, } export interface IRNode { @@ -59,8 +59,8 @@ export interface SetHtmlIRNode extends IRNode { value: string } -export interface TextNodeIRNode extends IRNode { - type: IRNodeTypes.TEXT_NODE +export interface CreateTextNodeIRNode extends IRNode { + type: IRNodeTypes.CREATE_TEXT_NODE id: number value: string } @@ -77,7 +77,7 @@ export type OperationNode = | SetTextIRNode | SetEventIRNode | SetHtmlIRNode - | TextNodeIRNode + | CreateTextNodeIRNode | InsertNodeIRNode export interface DynamicChild { diff --git a/packages/compiler-vapor/src/transform.ts b/packages/compiler-vapor/src/transform.ts index c122d6994..965b7221e 100644 --- a/packages/compiler-vapor/src/transform.ts +++ b/packages/compiler-vapor/src/transform.ts @@ -275,7 +275,7 @@ function transformInterpolation( ctx.registerOpration( { - type: IRNodeTypes.TEXT_NODE, + type: IRNodeTypes.CREATE_TEXT_NODE, loc: node.loc, id, value: expr, diff --git a/packages/runtime-vapor/src/render.ts b/packages/runtime-vapor/src/render.ts index add59f46b..43ce1ad93 100644 --- a/packages/runtime-vapor/src/render.ts +++ b/packages/runtime-vapor/src/render.ts @@ -123,3 +123,7 @@ type Children = Record