Merge branch 'zhiyuanzmj-vue-jsx-vapor-core'

Author: krausest

broken-frameworks/non-keyed/vue-jsx-vapor/package-lock.json

@@ -1,22 +1,22 @@
 {
   "name": "js-framework-benchmark-vue-jsx-vapor",
-  "version": "1.0.0",
+  "version": "2.0.1",
   "private": true,
   "type": "module",
   "js-framework-benchmark": {
     "frameworkVersionFromPackage": "vue",
-    "frameworkHomeURL": "https://vue.js.org/"
+    "frameworkHomeURL": "https://github.com/vuejs/vue-jsx-vapor"
   },
   "scripts": {
     "dev": "vite --force",
     "build-prod": "vite build",
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "npm:@vue-vapor/vue@latest"
+    "vue": "https://pkg.pr.new/vue@eeab9c4"
   },
   "devDependencies": {
-    "unplugin-vue-jsx-vapor": "^1.0.6",
-    "vite": "^5.2.9"
+    "vue-jsx-vapor": "^2.1.5",
+    "vite": "^6.2.1"
   }
 }

frameworks/keyed/vue-jsx-vapor/package-lock.json

@@ -1,50 +1,46 @@
-import { defineComponent, ref, shallowRef } from "vue/vapor";
+import { defineComponent, ref, shallowRef, triggerRef } from "vue";
 import { buildData } from "./data";
 export default defineComponent({
   setup() {
     const selected = ref();
     const rows = shallowRef([]);
 
-    function setRows(update = rows.value.slice()) {
-      rows.value = update;
-    }
-
     function add() {
-      rows.value = rows.value.concat(buildData(1000));
+      rows.value.push(...buildData(1000));
+      triggerRef(rows);
     }
 
     function remove(id) {
       rows.value.splice(
         rows.value.findIndex((d) => d.id === id),
         1
       );
-      setRows();
+      triggerRef(rows);
     }
 
     function select(id) {
       selected.value = id;
     }
 
     function run() {
-      setRows(buildData());
+      rows.value = buildData();
       selected.value = undefined;
     }
 
     function update() {
       const _rows = rows.value;
       for (let i = 0; i < _rows.length; i += 10) {
-        _rows[i].label += " !!!";
+        _rows[i].label.value += " !!!";
       }
-      setRows();
     }
 
     function runLots() {
-      setRows(buildData(10000));
+      rows.value=buildData(10000);
       selected.value = undefined;
     }
 
     function clear() {
-      setRows([]);
+      rows.value= [];
       selected.value = undefined;
     }
 
@@ -55,7 +51,7 @@ export default defineComponent({
         const d998 = _rows[998];
         _rows[1] = d998;
         _rows[998] = d1;
-        setRows();
+        triggerRef(rows);
       }
     }
 
@@ -64,7 +60,7 @@ export default defineComponent({
         <div class="jumbotron">
           <div class="row">
             <div class="col-md-6">
-              <h1>Vue.js JSX Vapor (keyed)</h1>
+              <h1>Vue JSX Vapor (keyed)</h1>
             </div>
 
             <div class="col-md-6">
@@ -110,22 +106,18 @@ export default defineComponent({
 
         <table class="table table-hover table-striped test-data">
           <tbody>
-            {rows.value.map((ctx) => {
-              return (
-                <tr key={ctx.id} class={{ danger: ctx.id === selected.value }} data-label={ctx.label}>
-                  <td class="col-md-1">{ctx.id}</td>
-                  <td class="col-md-4">
-                    <a onClick={() => select(ctx.id)}>{ctx.label}</a>
-                  </td>
-                  <td class="col-md-1">
-                    <a onClick={() => remove(ctx.id)}>
-                      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
-                    </a>
-                  </td>
-                  <td class="col-md-6"></td>
-                </tr>
-              );
-            })}
+            <tr v-for={ctx in rows.value} key={ctx.id} class={{ danger: ctx.id === selected.value }} data-label={ctx.label.value}>
+              <td class="col-md-1">{ctx.id}</td>
+              <td class="col-md-4">
+                <a onClick={() => select(ctx.id)} v-text={ctx.label.value}></a>
+              </td>
+              <td class="col-md-1">
+                <a onClick={() => remove(ctx.id)}>
+                  <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+                </a>
+              </td>
+              <td class="col-md-6"></td>
+            </tr>
           </tbody>
         </table>
         <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>

frameworks/keyed/vue-jsx-vapor/package.json

@@ -1,3 +1,4 @@
+import { shallowRef } from "vue";
 let ID = 1;
 
 function _random(max) {
@@ -64,12 +65,13 @@ export function buildData(count = 1000) {
   for (let i = 0; i < count; i++)
     data.push({
       id: ID++,
-      label:
+      label: shallowRef(
         adjectives[_random(adjectives.length)] +
         " " +
         colours[_random(colours.length)] +
         " " +
-        nouns[_random(nouns.length)],
+        nouns[_random(nouns.length)]
+      ),
     });
   return data;
 }

frameworks/keyed/vue-jsx-vapor/src/App.jsx

@@ -1,4 +1,4 @@
-import { createVaporApp } from "vue/vapor";
+import { createVaporApp } from "vue";
 import App from "./App";
 
 createVaporApp(App).mount("#app");

frameworks/keyed/vue-jsx-vapor/src/data.js

@@ -1,12 +1,10 @@
 import { defineConfig } from "vite";
-import vueJsxVapor from "unplugin-vue-jsx-vapor/vite";
+import vueJsxVapor from "vue-jsx-vapor/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    vueJsxVapor({
-      restructure: true,
-    }),
+    vueJsxVapor(),
   ],
   build: {
     rollupOptions: {

frameworks/keyed/vue-jsx-vapor/src/main.js

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="/css/currentStyle.css" rel="stylesheet" />
-    <title>Vue Vapor</title>
+    <title>Vue JSX Vapor</title>
   </head>
   <body>
     <div class="container" id="app"></div>

frameworks/keyed/vue-jsx-vapor/vite.config.js

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link href="/css/currentStyle.css" rel="stylesheet" />
-    <title>Vite App</title>
+    <title>Vue JSX Vapor</title>
   </head>
   <body>
     <div id="app"></div>