zitejs 0.10.0-start.7 → 0.10.0-start.8

package/dist/esm/vite/index.js

@@ -69,11 +69,12 @@ export function ziteId() {
         name: "vite-plugin-zite-id",
         enforce: "pre",
         async transform(code, id) {
-            if (!validExtensions.has(path.extname(id)) ||
-                id.includes("node_modules")) {
+            // TanStack's route code splitting moves a route's component into its own module, `route.tsx?tsr-split=…`.
+            const file = id.split("?")[0];
+            if (!validExtensions.has(path.extname(file)) || file.includes("node_modules")) {
                 return null;
             }
-            const relativePath = path.relative(cwd, id);
+            const relativePath = path.relative(cwd, file);
             try {
                 const ast = parse(code, {
                     sourceType: "module",
@@ -128,6 +129,10 @@ export function ziteId() {
                             if (!isTagged) {
                                 return;
                             }
+                            // A module split from one already tagged keeps its tags.
+                            if (openingElement.attributes?.some((attr) => attr.type === "JSXAttribute" && attr.name?.name === "data-zite-id")) {
+                                return;
+                            }
                             const line = openingElement.loc?.start?.line ?? 0;
                             const col = openingElement.loc?.start?.column ?? 0;
                             const dataComponentId = `${relativePath}|${line}|${col}`;

package/dist/esm/vite/index.test.js

@@ -1,16 +1,24 @@
 import path from 'path';
 import { describe, expect, it } from 'vitest';
 import { ziteId } from './index.js';
-async function transform(code) {
+async function transform(code, file = 'src/App.tsx') {
     const plugin = ziteId();
     const handler = plugin.transform;
-    const result = await handler(code, path.join(process.cwd(), 'src/App.tsx'));
+    const result = await handler(code, path.join(process.cwd(), file));
     if (!result) {
         throw new Error('transform returned null');
     }
     return result.code;
 }
 describe('ziteId', () => {
+    it("tags a route's component that TanStack split into its own module, by the source file", async () => {
+        const code = await transform('const a = <p>Hi</p>;', 'src/routes/index.tsx?tsr-split=component');
+        expect(code).toContain('<p data-zite-id="src/routes/index.tsx|1|10" data-zite-editable="true">');
+    });
+    it('leaves an element that already has its tag', async () => {
+        const code = await transform('const a = <p data-zite-id="src/routes/index.tsx|1|10">Hi</p>;');
+        expect(code.match(/data-zite-id/g)).toHaveLength(1);
+    });
     it('tags html and svg elements without a component name', async () => {
         const code = await transform('const a = <div><svg><path d="M0" /></svg><p>Hello</p></div>;');
         expect(code).toContain('<div data-zite-id="src/App.tsx|1|10">');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zitejs",
-  "version": "0.10.0-start.7",
+  "version": "0.10.0-start.8",
   "description": "The Zite framework — build apps on Zite Database",
   "type": "module",
   "sideEffects": false,