feat: add api for document.createTextNode

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);

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(() => {

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
       }
 

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 {

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,

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)
+}