From: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
Date: Sat, 25 Nov 2023 19:12:02 +0000 (+0800)
Subject: feat: add api for document.createTextNode
X-Git-Tag: v3.6.0-alpha.1~16^2~812
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=9602cd2011eb15c42e74e3730f3c0d95376f4048;p=thirdparty%2Fvuejs%2Fcore.git

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 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(\`<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 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(\`<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 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<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)
+}