From 9602cd2011eb15c42e74e3730f3c0d95376f4048 Mon Sep 17 00:00:00 2001 From: =?utf8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?= Date: Sun, 26 Nov 2023 03:12:02 +0800 Subject: [PATCH] feat: add api for document.createTextNode --- .../__tests__/__snapshots__/compile.test.ts.snap | 14 +++++++------- .../__tests__/__snapshots__/fixtures.test.ts.snap | 8 ++++---- packages/compiler-vapor/src/generate.ts | 6 +++--- packages/compiler-vapor/src/ir.ts | 8 ++++---- packages/compiler-vapor/src/transform.ts | 2 +- packages/runtime-vapor/src/render.ts | 4 ++++ 6 files changed, 23 insertions(+), 19 deletions(-) diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap index 8f977a9f77..3c48100962 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 is .
\`); export function render() { const n0 = t0(); @@ -14,7 +14,7 @@ export function render() { }, ], } = children(root); - const n2 = document.createTextNode(count.value); + const n2 = createTextNode(count.value); insert(n2, n1, n3); watchEffect(() => { setText(n2, undefined, count.value); @@ -110,7 +110,7 @@ export function render() { `; exports[`comile > directives > v-once > basic 1`] = ` -"import { template, children, insert, setText, setAttr } from 'vue/vapor'; +"import { template, children, createTextNode, insert, setText, setAttr } from 'vue/vapor'; const t0 = template(\`
\`); export function render() { const n0 = t0(); @@ -122,7 +122,7 @@ export function render() { }, ], } = children(root); - const n2 = document.createTextNode(msg.value); + const n2 = createTextNode(msg.value); insert(n2, n1, 0 /* InsertPosition.FIRST */); setText(n2, undefined, msg.value); setAttr(n3, 'class', undefined, clz.value); @@ -177,13 +177,13 @@ export function render() { exports[`comile > static + dynamic root 1`] = ` "import { watchEffect } from 'vue'; -import { template, insert, setText } from 'vue/vapor'; +import { template, createTextNode, insert, setText } from 'vue/vapor'; const t0 = template(\`2\`); export function render() { const n0 = t0(); - const n1 = document.createTextNode(1); + const n1 = createTextNode(1); insert(n1, n0, 0 /* InsertPosition.FIRST */); - const n2 = document.createTextNode(3); + const n2 = createTextNode(3); insert(n2, n0); watchEffect(() => { setText(n1, undefined, 1); diff --git a/packages/compiler-vapor/__tests__/__snapshots__/fixtures.test.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/fixtures.test.ts.snap index c7d549c6c2..b60215ff8a 100644 --- a/packages/compiler-vapor/__tests__/__snapshots__/fixtures.test.ts.snap +++ b/packages/compiler-vapor/__tests__/__snapshots__/fixtures.test.ts.snap @@ -3,7 +3,7 @@ exports[`fixtures 1`] = ` "import { defineComponent as _defineComponent } from 'vue' import { watchEffect } from 'vue' -import { template, children, insert, setText, on, setHtml } from 'vue/vapor' +import { template, children, createTextNode, insert, setText, on, setHtml } from 'vue/vapor' const t0 = template(\`

Counter

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 dd155025dd..c8e2f9e625 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 dd399773f9..ef426e0fa7 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 c122d69943..965b7221e5 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 add59f46b6..43ce1ad932 100644 --- a/packages/runtime-vapor/src/render.ts +++ b/packages/runtime-vapor/src/render.ts @@ -123,3 +123,7 @@ type Children = Record export function children(n: ChildNode): Children { return { ...Array.from(n.childNodes).map(n => [n, children(n)]) } } + +export function createTextNode(data: string): Text { + return document.createTextNode(data) +} -- 2.47.2