Merge branch 'main' into feat/add-vapor-errors

README.md

@@ -36,7 +36,7 @@ See the To-do list below or `// TODO` comments in code (`compiler-vapor` and `ru
 - [ ] Fragment
   - [x] multiple root nodes
   - [x] all dynamic children
-  - [ ] return `Node[]` for all dynamic children, instead of using `fragment` API
+  - [x] return `Node[]` for all dynamic children, instead of using `fragment` API
 - [ ] Built-in Components
   - [ ] Transition
   - [ ] TransitionGroup

package.json

@@ -9,7 +9,7 @@
     "build-dts": "tsc -p tsconfig.build.json && rollup -c rollup.dts.config.js",
     "clean": "rimraf packages/*/dist temp .eslintcache",
     "size": "run-s \"size-*\" && tsx scripts/usage-size.ts",
-    "size-global": "node scripts/build.js vue runtime-dom -f global -p --size",
+    "size-global": "node scripts/build.js vue runtime-dom compiler-dom compiler-vapor -f global -p --size",
     "size-esm-runtime": "node scripts/build.js vue -f esm-bundler-runtime",
     "size-esm": "node scripts/build.js runtime-dom runtime-vapor runtime-core reactivity shared -f esm-bundler",
     "check": "tsc --incremental --noEmit",

packages/compiler-vapor/__tests__/__snapshots__/compile.test.ts.snap

@@ -8,16 +8,16 @@ export function render() {
   const n0 = t0();
   const {
     0: [
-      n1,
+      n3,
       {
-        1: [n3],
+        1: [n2],
       },
     ],
   } = children(n0);
-  const n2 = createTextNode(count.value);
-  insert(n2, n1, n3);
+  const n1 = createTextNode(count.value);
+  insert(n1, n3, n2);
   watchEffect(() => {
-    setText(n2, undefined, count.value);
+    setText(n1, undefined, count.value);
   });
   return n0;
 }
@@ -110,22 +110,22 @@ export function render() {
 `;
 
 exports[`comile > directives > v-once > basic 1`] = `
-"import { template, children, createTextNode, insert, setText, setAttr } from 'vue/vapor';
+"import { template, children, createTextNode, setText, setAttr, prepend } from 'vue/vapor';
 const t0 = template('<div> <span></span></div>');
 export function render() {
   const n0 = t0();
   const {
     0: [
-      n1,
+      n3,
       {
-        1: [n3],
+        1: [n2],
       },
     ],
   } = children(n0);
-  const n2 = createTextNode(msg.value);
-  insert(n2, n1, 0 /* InsertPosition.FIRST */);
-  setText(n2, undefined, msg.value);
-  setAttr(n3, 'class', undefined, clz.value);
+  const n1 = createTextNode(msg.value);
+  setText(n1, undefined, msg.value);
+  setAttr(n2, 'class', undefined, clz.value);
+  prepend(n3, n1);
   return n0;
 }
 "
@@ -167,14 +167,13 @@ export function render() {
 
 exports[`comile > dynamic root 1`] = `
 "import { watchEffect } from 'vue';
-import { fragment, createTextNode, insert, setText } from 'vue/vapor';
+import { fragment, createTextNode, append, setText } from 'vue/vapor';
 export function render() {
   const t0 = fragment();
   const n0 = t0();
   const n1 = createTextNode(1);
-  insert(n1, n0, 0 /* InsertPosition.FIRST */);
   const n2 = createTextNode(2);
-  insert(n2, n0);
+  append(n0, n1, n2);
   watchEffect(() => {
     setText(n1, undefined, 1);
   });
@@ -198,19 +197,49 @@ export function render() {
 
 exports[`comile > static + dynamic root 1`] = `
 "import { watchEffect } from 'vue';
-import { template, createTextNode, insert, setText } from 'vue/vapor';
-const t0 = template('2');
+import { template, children, createTextNode, prepend, insert, append, setText } from 'vue/vapor';
+const t0 = template('3<!>6<!>9');
 export function render() {
   const n0 = t0();
+  const {
+    1: [n9],
+    3: [n10],
+  } = children(n0);
   const n1 = createTextNode(1);
-  insert(n1, n0, 0 /* InsertPosition.FIRST */);
-  const n2 = createTextNode(3);
-  insert(n2, n0);
+  const n2 = createTextNode(2);
+  const n3 = createTextNode(4);
+  const n4 = createTextNode(5);
+  const n5 = createTextNode(7);
+  const n6 = createTextNode(8);
+  const n7 = createTextNode('A');
+  const n8 = createTextNode('B');
+  prepend(n0, n1, n2);
+  insert([n3, n4], n0, n9);
+  insert([n5, n6], n0, n10);
+  append(n0, n7, n8);
   watchEffect(() => {
     setText(n1, undefined, 1);
   });
   watchEffect(() => {
-    setText(n2, undefined, 3);
+    setText(n2, undefined, 2);
+  });
+  watchEffect(() => {
+    setText(n3, undefined, 4);
+  });
+  watchEffect(() => {
+    setText(n4, undefined, 5);
+  });
+  watchEffect(() => {
+    setText(n5, undefined, 7);
+  });
+  watchEffect(() => {
+    setText(n6, undefined, 8);
+  });
+  watchEffect(() => {
+    setText(n7, undefined, 'A');
+  });
+  watchEffect(() => {
+    setText(n8, undefined, 'B');
   });
   return n0;
 }

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, createTextNode, insert, setText, on, setHtml } from 'vue/vapor'
+import { template, children, createTextNode, append, 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'
 
@@ -20,19 +20,19 @@ const increment = () => count.value++
 
 return (() => {
 const n0 = t0()
-const { 1: [n1], 2: [n3], 3: [n5], 4: [n6], 6: [n7],} = children(n0)
-const n2 = createTextNode(count.value)
-insert(n2, n1)
-const n4 = createTextNode(double.value)
-insert(n4, n3)
-const n8 = createTextNode(count.value)
-insert(n8, n7)
-setText(n8, undefined, count.value)
+const { 1: [n2], 2: [n4], 3: [n5], 4: [n6], 6: [n8],} = children(n0)
+const n1 = createTextNode(count.value)
+append(n2, n1)
+const n3 = createTextNode(double.value)
+append(n4, n3)
+const n7 = createTextNode(count.value)
+setText(n7, undefined, count.value)
+append(n8, n7)
 watchEffect(() => {
-setText(n2, undefined, count.value)
+setText(n1, undefined, count.value)
 })
 watchEffect(() => {
-setText(n4, undefined, double.value)
+setText(n3, undefined, double.value)
 })
 watchEffect(() => {
 on(n5, \\"click\\", increment)

packages/compiler-vapor/__tests__/compile.test.ts

@@ -35,7 +35,9 @@ describe('comile', () => {
   })
 
   test('static + dynamic root', async () => {
-    const code = await compile(`{{ 1 }}2{{ 3 }}`)
+    const code = await compile(
+      `{{ 1 }}{{ 2 }}3{{ 4 }}{{ 5 }}6{{ 7 }}{{ 8 }}9{{ 'A' }}{{ 'B' }}`,
+    )
     expect(code).matchSnapshot()
   })
 

packages/compiler-vapor/index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/compiler-vapor.cjs.prod.js')
+} else {
+  module.exports = require('./dist/compiler-vapor.cjs.js')
+}

packages/compiler-vapor/package.json

@@ -2,17 +2,26 @@
   "name": "@vue/compiler-vapor",
   "version": "0.0.0",
   "description": "@vue/compiler-vapor",
-  "main": "dist/compiler-vapor.cjs.js",
+  "main": "index.js",
+  "module": "dist/compiler-vapor.esm-bundler.js",
+  "types": "dist/compiler-vapor.d.ts",
+  "unpkg": "dist/compiler-vapor.global.js",
+  "jsdelivr": "dist/compiler-vapor.global.js",
   "files": [
+    "index.js",
     "dist"
   ],
+  "sideEffects": false,
   "buildOptions": {
+    "name": "VueCompilerVapor",
+    "compat": true,
     "formats": [
-      "cjs"
-    ],
-    "prod": false
+      "esm-bundler",
+      "esm-browser",
+      "cjs",
+      "global"
+    ]
   },
-  "types": "dist/compiler-vapor.d.ts",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuejs/core-vapor.git",
@@ -26,13 +35,9 @@
   "bugs": {
     "url": "https://github.com/vuejs/core-vapor/issues"
   },
-  "homepage": "https://github.com/vuejs/core-vapor/tree/dev/packages/compiler-vapor#readme",
+  "homepage": "https://github.com/vuejs/core-vapor/tree/main/packages/compiler-vapor#readme",
   "dependencies": {
     "@vue/shared": "3.3.8",
-    "@vue/compiler-dom": "3.3.8",
-    "ast-kit": "^0.11.2"
-  },
-  "devDependencies": {
-    "@babel/types": "^7.23.0"
+    "@vue/compiler-dom": "3.3.8"
   }
 }