zitejs 0.9.120 → 0.9.122

package/dist/esm/vite/domTagNames.js

@@ -0,0 +1,254 @@
+export const domTagNames = new Set([
+    "a",
+    "abbr",
+    "acronym",
+    "address",
+    "altGlyph",
+    "altGlyphDef",
+    "altGlyphItem",
+    "animate",
+    "animateColor",
+    "animateMotion",
+    "animateTransform",
+    "annotation",
+    "annotation-xml",
+    "applet",
+    "area",
+    "article",
+    "aside",
+    "audio",
+    "b",
+    "base",
+    "basefont",
+    "bdi",
+    "bdo",
+    "bgsound",
+    "big",
+    "blink",
+    "blockquote",
+    "body",
+    "br",
+    "button",
+    "canvas",
+    "caption",
+    "center",
+    "circle",
+    "cite",
+    "clipPath",
+    "code",
+    "col",
+    "colgroup",
+    "color-profile",
+    "command",
+    "content",
+    "cursor",
+    "data",
+    "datalist",
+    "dd",
+    "defs",
+    "del",
+    "desc",
+    "details",
+    "dfn",
+    "dialog",
+    "dir",
+    "discard",
+    "div",
+    "dl",
+    "dt",
+    "ellipse",
+    "em",
+    "embed",
+    "feBlend",
+    "feColorMatrix",
+    "feComponentTransfer",
+    "feComposite",
+    "feConvolveMatrix",
+    "feDiffuseLighting",
+    "feDisplacementMap",
+    "feDistantLight",
+    "feDropShadow",
+    "feFlood",
+    "feFuncA",
+    "feFuncB",
+    "feFuncG",
+    "feFuncR",
+    "feGaussianBlur",
+    "feImage",
+    "feMerge",
+    "feMergeNode",
+    "feMorphology",
+    "feOffset",
+    "fePointLight",
+    "feSpecularLighting",
+    "feSpotLight",
+    "feTile",
+    "feTurbulence",
+    "fieldset",
+    "figcaption",
+    "figure",
+    "filter",
+    "font",
+    "font-face",
+    "font-face-format",
+    "font-face-name",
+    "font-face-src",
+    "font-face-uri",
+    "footer",
+    "foreignObject",
+    "form",
+    "frame",
+    "frameset",
+    "g",
+    "glyph",
+    "glyphRef",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "head",
+    "header",
+    "hgroup",
+    "hkern",
+    "hr",
+    "html",
+    "i",
+    "iframe",
+    "image",
+    "img",
+    "input",
+    "ins",
+    "isindex",
+    "kbd",
+    "keygen",
+    "label",
+    "legend",
+    "li",
+    "line",
+    "linearGradient",
+    "link",
+    "listing",
+    "maction",
+    "main",
+    "map",
+    "mark",
+    "marker",
+    "marquee",
+    "mask",
+    "math",
+    "menu",
+    "menuitem",
+    "merror",
+    "meta",
+    "metadata",
+    "meter",
+    "mfrac",
+    "mi",
+    "missing-glyph",
+    "mmultiscripts",
+    "mn",
+    "mo",
+    "mover",
+    "mpadded",
+    "mpath",
+    "mphantom",
+    "mprescripts",
+    "mroot",
+    "mrow",
+    "ms",
+    "mspace",
+    "msqrt",
+    "mstyle",
+    "msub",
+    "msubsup",
+    "msup",
+    "mtable",
+    "mtd",
+    "mtext",
+    "mtr",
+    "multicol",
+    "munder",
+    "munderover",
+    "nav",
+    "nextid",
+    "nobr",
+    "noembed",
+    "noframes",
+    "noscript",
+    "object",
+    "ol",
+    "optgroup",
+    "option",
+    "output",
+    "p",
+    "param",
+    "path",
+    "pattern",
+    "picture",
+    "plaintext",
+    "polygon",
+    "polyline",
+    "pre",
+    "progress",
+    "q",
+    "radialGradient",
+    "rb",
+    "rbc",
+    "rect",
+    "rp",
+    "rt",
+    "rtc",
+    "ruby",
+    "s",
+    "samp",
+    "script",
+    "search",
+    "section",
+    "select",
+    "semantics",
+    "set",
+    "shadow",
+    "slot",
+    "small",
+    "source",
+    "spacer",
+    "span",
+    "stop",
+    "strike",
+    "strong",
+    "style",
+    "sub",
+    "summary",
+    "sup",
+    "svg",
+    "switch",
+    "symbol",
+    "table",
+    "tbody",
+    "td",
+    "template",
+    "text",
+    "textPath",
+    "textarea",
+    "tfoot",
+    "th",
+    "thead",
+    "time",
+    "title",
+    "tr",
+    "track",
+    "tref",
+    "tspan",
+    "tt",
+    "u",
+    "ul",
+    "use",
+    "var",
+    "video",
+    "view",
+    "vkern",
+    "wbr",
+    "xmp",
+]);

package/dist/esm/vite/index.js

@@ -2,7 +2,9 @@ import { parse } from "@babel/parser";
 import MagicString from "magic-string";
 import path from "path";
 import { walk } from "estree-walker";
+import { domTagNames } from "./domTagNames.js";
 const validExtensions = new Set([".jsx", ".tsx"]);
+const fragmentNames = new Set(["Fragment", "React.Fragment"]);
 function getComponentName(elementName) {
     if (elementName.type === "JSXIdentifier") {
         return elementName.name;
@@ -14,8 +16,17 @@ function getComponentName(elementName) {
     }
     return null;
 }
-function isNativeElement(name) {
-    return /^[a-z]/.test(name) && !name.includes(".");
+function classifyElement(name) {
+    if (fragmentNames.has(name)) {
+        return null;
+    }
+    if (!/^[a-z]/.test(name) || name.includes(".")) {
+        return "component";
+    }
+    if (domTagNames.has(name) || name.includes("-")) {
+        return "dom";
+    }
+    return null;
 }
 export function ziteId() {
     const cwd = process.cwd();
@@ -40,21 +51,19 @@ export function ziteId() {
                         if (node.type === "JSXElement") {
                             const openingElement = node.openingElement;
                             const children = node.children;
-                            const elementName = openingElement.name;
-                            const isFragment = (elementName.type === "JSXMemberExpression" &&
-                                elementName.object.name === "React" &&
-                                elementName.property.name === "Fragment") ||
-                                (elementName.type === "JSXIdentifier" &&
-                                    elementName.name === "Fragment");
-                            if (isFragment) {
+                            const componentName = getComponentName(openingElement.name);
+                            if (!componentName) {
+                                return;
+                            }
+                            const kind = classifyElement(componentName);
+                            if (!kind) {
                                 return;
                             }
                             const line = openingElement.loc?.start?.line ?? 0;
                             const col = openingElement.loc?.start?.column ?? 0;
                             const dataComponentId = `${relativePath}|${line}|${col}`;
                             let attributes = ` data-zite-id="${dataComponentId}"`;
-                            const componentName = getComponentName(openingElement.name);
-                            if (componentName && !isNativeElement(componentName)) {
+                            if (kind === "component") {
                                 attributes += ` data-zite-component="${componentName}"`;
                             }
                             if (children.length === 1 &&

package/dist/esm/vite/index.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,48 @@
+import path from 'path';
+import { describe, expect, it } from 'vitest';
+import { ziteId } from './index.js';
+async function transform(code) {
+    const plugin = ziteId();
+    const handler = plugin.transform;
+    const result = await handler(code, path.join(process.cwd(), 'src/App.tsx'));
+    if (!result) {
+        throw new Error('transform returned null');
+    }
+    return result.code;
+}
+describe('ziteId', () => {
+    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">');
+        expect(code).toContain('<svg data-zite-id="src/App.tsx|1|15">');
+        expect(code).toContain('<path data-zite-id="src/App.tsx|1|20" d="M0" />');
+        expect(code).toContain('<p data-zite-id="src/App.tsx|1|41" data-zite-editable="true">');
+        expect(code).not.toContain('data-zite-component');
+    });
+    it('tags components with their name', async () => {
+        const code = await transform('const a = <><Card /><motion.div /><_Private /></>;');
+        expect(code).toContain('<Card data-zite-id="src/App.tsx|1|12" data-zite-component="Card" />');
+        expect(code).toContain('<motion.div data-zite-id="src/App.tsx|1|20" data-zite-component="motion.div" />');
+        expect(code).toContain('<_Private data-zite-id="src/App.tsx|1|34" data-zite-component="_Private" />');
+    });
+    it('tags MathML elements', async () => {
+        const code = await transform('const a = <math><mi>x</mi></math>;');
+        expect(code).toBe('const a = <math data-zite-id="src/App.tsx|1|10"><mi data-zite-id="src/App.tsx|1|16" data-zite-editable="true">x</mi></math>;');
+    });
+    it('tags custom elements', async () => {
+        const code = await transform('const a = <my-widget />;');
+        expect(code).toBe('const a = <my-widget data-zite-id="src/App.tsx|1|10" />;');
+    });
+    it('leaves non-DOM intrinsic elements untouched', async () => {
+        const source = 'const a = <group><mesh position-x={1} /><ambientLight intensity={0.5} /></group>;';
+        expect(await transform(source)).toBe(source);
+    });
+    it('tags DOM elements nested inside non-DOM intrinsics', async () => {
+        const code = await transform('const a = <group><Html><div /></Html></group>;');
+        expect(code).toBe('const a = <group><Html data-zite-id="src/App.tsx|1|17" data-zite-component="Html"><div data-zite-id="src/App.tsx|1|23" /></Html></group>;');
+    });
+    it('leaves fragments untouched', async () => {
+        const source = 'const a = <Fragment><React.Fragment key="a" /></Fragment>;';
+        expect(await transform(source)).toBe(source);
+    });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zitejs",
-  "version": "0.9.120",
+  "version": "0.9.122",
   "description": "The Zite framework — build apps on Zite Database",
   "type": "module",
   "main": "./dist/cjs/index.js",