feat: add api for document.createTextNode

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap
index 8f977a9f7796ae2d0ead750c18b2a53e4780a206..3c48100962c36fbf073528a72f2a8f9dc021c8d4 100644 (file)
--- 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(\`<div>count is <!>.</div>\`);
 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(\`<div> <span></span></div>\`);
 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 c7d549c6c21678625aec58c133c9ac780dcf4f8b..b60215ff8a88f64ffb8886d3b9ed3b5143f8ff10 100644 (file)
--- 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(\`<h1 id=\\"title\\">Counter</h1><p>Count: </p><p>Double: </p><button>Increment</button><div></div><input type=\\"text\\"><p>once: </p><p>{{ count }}</p>\`)
 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 dd155025ddae99c8698de089e57eae9823429217..c8e2f9e625e7934e7e827634b935278918b33490 100644 (file)
--- 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 dd399773f92f61e51c4d75e5ed648f472382e1c0..ef426e0fa725dc6043e1fcc5b37ff040375f7e83 100644 (file)
--- 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 c122d699430ee53b484f39a381d0a3f9b2ddce68..965b7221e5a987dfdb764ee5fba032c79e3ca4c0 100644 (file)
--- 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 add59f46b6c4f8cb2206cb32533f368822b47a28..43ce1ad932404734738766942ef3f5f39b713bf4 100644 (file)
--- a/packages/runtime-vapor/src/render.ts
+++ b/packages/runtime-vapor/src/render.ts
@@ -123,3 +123,7 @@ type Children = Record<number, [ChildNode, Children]>
 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)
+}