@qds.dev/tools 0.6.2 → 0.7.5

package/lib/{vite → rolldown}/as-child.qwik.mjs

@@ -1,14 +1,15 @@
 import { extractFromElement, getLineNumber, isJSXElement, isJSXExpressionContainer, isJSXText } from "../utils/icons/ast/jsx.qwik.mjs";
 import { handleExpression } from "../utils/icons/ast/expressions.qwik.mjs";
+import { anyOf, createRegExp, exactly } from "magic-regexp";
 import MagicString from "magic-string";
 import { parseSync } from "oxc-parser";
 import { walk } from "oxc-walker";
 
-//#region vite/as-child.ts
+//#region rolldown/as-child.ts
 /**
-* Vite plugin that transforms JSX elements with asChild prop by moving child element props to the parent
+* Rolldown plugin that transforms JSX elements with asChild prop by moving child element props to the parent
 * @param options - Plugin configuration options
-* @returns Vite plugin object
+* @returns Rolldown-compatible plugin object
 */ const asChild = (options = {}) => {
 	const { debug: isDebugMode = false } = options;
 	/**
@@ -21,21 +22,23 @@ import { walk } from "oxc-walker";
 	return {
 		name: "vite-plugin-as-child",
 		enforce: "pre",
-		transform(code, id) {
-			if (!(id.endsWith(".tsx") || id.endsWith(".jsx"))) return null;
-			debug(`🔧 asChild plugin processing: ${id}`);
-			const parsed = parseSync(id, code);
-			if (parsed.errors.length > 0) return null;
-			const ast = parsed.program;
-			const s = new MagicString(code);
-			walk(ast, { enter(node) {
-				if (isJSXElement(node) && hasAsChild(node.openingElement)) processAsChild(node, s, code);
-			} });
-			if (s.hasChanged()) return {
-				code: s.toString(),
-				map: s.generateMap({ hires: true })
-			};
-			return null;
+		transform: {
+			filter: { id: createRegExp(exactly(".").and(anyOf("tsx", "jsx")).at.lineEnd()) },
+			handler(code, id) {
+				debug(`🔧 asChild plugin processing: ${id}`);
+				const parsed = parseSync(id, code);
+				if (parsed.errors.length > 0) return null;
+				const ast = parsed.program;
+				const s = new MagicString(code);
+				walk(ast, { enter(node) {
+					if (isJSXElement(node) && hasAsChild(node.openingElement)) processAsChild(node, s, code);
+				} });
+				if (s.hasChanged()) return {
+					code: s.toString(),
+					map: s.generateMap({ hires: true })
+				};
+				return null;
+			}
 		}
 	};
 	/**

package/lib/{vite → rolldown}/icons.qwik.mjs

@@ -2,13 +2,14 @@ import { CollectionLoader } from "../utils/icons/collections/loader.qwik.mjs";
 import { resolveImportAliases } from "../utils/icons/import-resolver.qwik.mjs";
 import { transformMDXFile } from "../utils/icons/transform/mdx.qwik.mjs";
 import { transformTSXFile } from "../utils/icons/transform/tsx.qwik.mjs";
+import { anyOf, createRegExp, exactly } from "magic-regexp";
 import { parseSync } from "oxc-parser";
 
-//#region vite/icons.ts
+//#region rolldown/icons.ts
 /**
-* Vite plugin that transforms icon JSX elements to direct <svg /> calls
+* Rolldown plugin that transforms icon JSX elements to direct <svg /> calls
 * @param options - Plugin configuration options
-* @returns Vite plugin object
+* @returns Rolldown-compatible plugin object
 */ const icons = (options = {}) => {
 	const importSources = options.importSources ?? ["@qds.dev/ui"];
 	const isDebugMode = !!options.debug;
@@ -36,6 +37,9 @@ import { parseSync } from "oxc-parser";
 			return null;
 		}
 	}
+	const isTSXJSXOrMDX = createRegExp(exactly(".").and(anyOf("tsx", "jsx", "mdx")).at.lineEnd());
+	const isVirtualIconsImport = createRegExp(exactly("virtual:icons/").at.lineStart());
+	const isVirtualIconsModule = createRegExp(exactly(String.fromCharCode(0)).and("virtual:icons/"));
 	return {
 		name: "vite-plugin-qds-icons",
 		enforce: "pre",
@@ -44,54 +48,61 @@ import { parseSync } from "oxc-parser";
 			collectionLoader.discoverCollections();
 			debug(`Plugin ready - ${collectionLoader.getAvailableCollections().size} collections available on-demand`);
 		},
-		transform(code, id) {
-			if (!id.endsWith(".tsx") && !id.endsWith(".jsx") && !id.endsWith(".mdx")) return null;
-			if (collectionLoader.getAvailableCollections().size === 0) collectionLoader.discoverCollections();
-			if (id.endsWith(".mdx")) return transformMDXFile(code, id, importSources, collectionLoader.getAvailableCollections(), collectionNames, options.packs, debug);
-			debug(`[TRANSFORM] Starting transformation for ${id}`);
-			try {
-				const ast = parseAndValidateFile(code, id);
-				if (!ast) {
-					debug(`[TRANSFORM] Failed to parse ${id}`);
-					return null;
-				}
-				const aliasToPack = resolveImportAliases(ast, importSources, collectionLoader.getAvailableCollections(), collectionNames, options.packs, debug);
-				if (aliasToPack.size === 0) {
-					debug(`[TRANSFORM] No icon imports found in ${id}`);
+		transform: {
+			filter: { id: isTSXJSXOrMDX },
+			handler(code, id) {
+				if (collectionLoader.getAvailableCollections().size === 0) collectionLoader.discoverCollections();
+				if (id.endsWith(".mdx")) return transformMDXFile(code, id, importSources, collectionLoader.getAvailableCollections(), collectionNames, options.packs, debug);
+				debug(`[TRANSFORM] Starting transformation for ${id}`);
+				try {
+					const ast = parseAndValidateFile(code, id);
+					if (!ast) {
+						debug(`[TRANSFORM] Failed to parse ${id}`);
+						return null;
+					}
+					const aliasToPack = resolveImportAliases(ast, importSources, collectionLoader.getAvailableCollections(), collectionNames, options.packs, debug);
+					if (aliasToPack.size === 0) {
+						debug(`[TRANSFORM] No icon imports found in ${id}`);
+						return null;
+					}
+					return transformTSXFile(code, id, ast, aliasToPack, collectionNames, collectionLoader.getAvailableCollections(), options.packs, debug);
+				} catch (error) {
+					debug(`[TRANSFORM] Error during transformation of ${id}:`, error);
 					return null;
 				}
-				return transformTSXFile(code, id, ast, aliasToPack, collectionNames, collectionLoader.getAvailableCollections(), options.packs, debug);
-			} catch (error) {
-				debug(`[TRANSFORM] Error during transformation of ${id}:`, error);
-				return null;
 			}
 		},
-		resolveId(source) {
-			if (source.startsWith("virtual:icons/")) return `\0${source}`;
-			return null;
-		},
-		async load(id) {
-			if (!id.startsWith("\0virtual:icons/")) return null;
-			const virtualPath = id.slice(1);
-			const parts = virtualPath.split("/");
-			const prefix = parts[1];
-			const name = parts[2];
-			if (!prefix || !name) {
-				debug(`Invalid virtual icon path: ${virtualPath}`);
+		resolveId: {
+			filter: { id: isVirtualIconsImport },
+			handler(source) {
+				if (source.startsWith("virtual:icons/")) return `\0${source}`;
 				return null;
 			}
-			try {
-				const iconData = await collectionLoader.loadIconDataLazy(prefix, name);
-				if (!iconData) {
-					debug(`Failed to load icon data for ${prefix}:${name}`);
-					return { code: `export default '<path d="M12 2L2 7l10 5 10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/>';\n` };
+		},
+		load: {
+			filter: { id: isVirtualIconsModule },
+			async handler(id) {
+				const virtualPath = id.slice(1);
+				const parts = virtualPath.split("/");
+				const prefix = parts[1];
+				const name = parts[2];
+				if (!prefix || !name) {
+					debug(`Invalid virtual icon path: ${virtualPath}`);
+					return null;
+				}
+				try {
+					const iconData = await collectionLoader.loadIconDataLazy(prefix, name);
+					if (!iconData) {
+						debug(`Failed to load icon data for ${prefix}:${name}`);
+						return { code: `export default '<path d="M12 2L2 7l10 5 10-5z"/><path d="M2 17l10 5 10-5M2 12l10 5 10-5"/>';\n` };
+					}
+					const code = `export default \`${iconData.body}\`;`;
+					debug(`Generated virtual module for ${prefix}:${name}`);
+					return { code };
+				} catch (error) {
+					debug(`Error loading virtual module ${virtualPath}:`, error);
+					return { code: `export default '<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>';\n` };
 				}
-				const code = `export default \`${iconData.body}\`;`;
-				debug(`Generated virtual module for ${prefix}:${name}`);
-				return { code };
-			} catch (error) {
-				debug(`Error loading virtual module ${virtualPath}:`, error);
-				return { code: `export default '<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>';\n` };
 			}
 		},
 		async handleHotUpdate(ctx) {

package/lib/rolldown/index.qwik.mjs

@@ -1,5 +1,6 @@
+import { asChild } from "./as-child.qwik.mjs";
+import { icons } from "./icons.qwik.mjs";
 import { inlineCssPlugin } from "./inline-css.qwik.mjs";
-import { qdsTransformPlugin } from "./qds-transform.qwik.mjs";
 import { qwikRolldown } from "./qwik-rolldown.qwik.mjs";
 
-export { inlineCssPlugin, qdsTransformPlugin, qwikRolldown };
+export { asChild, icons, inlineCssPlugin, qwikRolldown };

package/lib/rolldown/inline-css.qwik.mjs

@@ -1,29 +1,37 @@
+import { anyOf, charNotIn, createRegExp, exactly, oneOrMore } from "magic-regexp";
 import { readFileSync } from "node:fs";
 
 //#region rolldown/inline-css.ts
 function inlineCssPlugin() {
+	const isCSSFile = createRegExp(exactly(".").and("css").and(anyOf(exactly("").at.lineEnd(), exactly("?").and(oneOrMore(charNotIn("\n"))))));
 	return {
 		name: "rolldown-plugin-inline-css",
-		resolveId(source, _importer, _options) {
-			if (typeof source === "string" && source.includes("?inline") && /\.css(\?|$)/.test(source)) return null;
-			return null;
+		resolveId: {
+			filter: { id: isCSSFile },
+			handler(source, _importer, _options) {
+				if (typeof source === "string" && source.includes("?inline")) return null;
+				return null;
+			}
 		},
-		load(id) {
-			if (typeof id === "string" && id.includes("?inline") && /\.css(\?|$)/.test(id)) {
-				const filePath = id.split("?")[0];
-				if (!filePath) return null;
-				try {
-					const cssContent = readFileSync(filePath, "utf-8");
-					return {
-						code: `export default ${JSON.stringify(cssContent)};`,
-						map: null
-					};
-				} catch (error) {
-					this.error(`Failed to read CSS file: ${filePath}\n${String(error)}`);
-					return null;
+		load: {
+			filter: { id: isCSSFile },
+			handler(id) {
+				if (typeof id === "string" && id.includes("?inline")) {
+					const filePath = id.split("?")[0];
+					if (!filePath) return null;
+					try {
+						const cssContent = readFileSync(filePath, "utf-8");
+						return {
+							code: `export default ${JSON.stringify(cssContent)};`,
+							map: null
+						};
+					} catch (error) {
+						this.error(`Failed to read CSS file: ${filePath}\n${String(error)}`);
+						return null;
+					}
 				}
+				return null;
 			}
-			return null;
 		}
 	};
 }

package/lib/vite/index.qwik.mjs

@@ -1,4 +1,6 @@
-import { asChild } from "./as-child.qwik.mjs";
-import { icons } from "./icons.qwik.mjs";
+import { asChild } from "../rolldown/as-child.qwik.mjs";
+import { icons } from "../rolldown/icons.qwik.mjs";
+import "../rolldown/index.qwik.mjs";
+import { minifyContentPlugin } from "./minify-content.qwik.mjs";
 
-export { asChild, icons };
+export { asChild, icons, minifyContentPlugin };

package/lib/vite/minify-content.qwik.mjs

@@ -0,0 +1,57 @@
+import { char, createRegExp, exactly, oneOrMore } from "magic-regexp";
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { resolve, sep } from "node:path";
+import { minifySync } from "oxc-minify";
+import { transform } from "oxc-transform";
+
+//#region vite/minify-content.ts
+/**
+* This plugin strips types, then minifies the contents of files with the ".script." extension. We watch the components library files and update the injected scripts when the contents change. Useful for dynamic client-only code without waking up the Qwik runtime.
+*/ function minifyContentPlugin(options) {
+	const scriptsMap = {};
+	const outputFileName = options?.outputFileName || "injected-scripts.ts";
+	const outputTsPath = resolve(options?.outputDir || process.cwd(), outputFileName);
+	const partString = `.${options?.part || "script"}.`;
+	const scriptExtension = createRegExp(exactly(partString).and(oneOrMore(char)).at.lineEnd());
+	const processMap = async (id, code) => {
+		const basename = id.split(sep).join("/").split("/").pop() || "";
+		if (!scriptExtension.test(basename)) return false;
+		const [name] = basename.split(partString);
+		if (!name) return false;
+		try {
+			scriptsMap[name] = minifySync(id, (await transform(id, code, { typescript: { onlyRemoveTypeImports: false } })).code, {
+				compress: true,
+				mangle: { toplevel: true }
+			}).code;
+			const newFileContent = `export const INJECTED_SCRIPTS = ${JSON.stringify(scriptsMap, null, 2)} as const;`;
+			let shouldWrite = true;
+			if (existsSync(outputTsPath)) {
+				if (readFileSync(outputTsPath, "utf-8") === newFileContent) shouldWrite = false;
+			}
+			if (shouldWrite) writeFileSync(outputTsPath, newFileContent, "utf-8");
+			return true;
+		} catch (err) {
+			console.error(`[script-injector] Error processing ${id}:`, err);
+			return false;
+		}
+	};
+	if (!existsSync(outputTsPath)) writeFileSync(outputTsPath, "export const INJECTED_SCRIPTS = {} as const;", "utf-8");
+	return {
+		name: "vite-plugin-script-injector",
+		enforce: "pre",
+		async transform(code, id) {
+			if (!id.includes(partString)) return null;
+			if (await processMap(id, code)) return {
+				code: "export default null;",
+				map: null
+			};
+			return null;
+		},
+		async handleHotUpdate({ file, read }) {
+			if (file.includes(partString)) await processMap(file, await read());
+		}
+	};
+}
+
+//#endregion
+export { minifyContentPlugin };

package/lib-types/tools/rolldown/as-child.d.ts

@@ -0,0 +1,24 @@
+export type AsChildTypes = {
+    asChild?: true;
+};
+export type AsChildPluginOptions = {
+    debug?: boolean;
+};
+/**
+ * Rolldown plugin that transforms JSX elements with asChild prop by moving child element props to the parent
+ * @param options - Plugin configuration options
+ * @returns Rolldown-compatible plugin object
+ */
+export declare const asChild: (options?: AsChildPluginOptions) => {
+    name: string;
+    enforce: "pre";
+    transform: {
+        filter: {
+            id: import("magic-regexp").MagicRegExp<"/\\.(?:tsx|jsx)$/", never, [], never>;
+        };
+        handler(code: string, id: string): {
+            code: string;
+            map: import("magic-string").SourceMap;
+        } | null;
+    };
+};

package/lib-types/tools/rolldown/icons.d.ts

@@ -0,0 +1,47 @@
+import type { HmrContext } from "vite";
+export type PacksMap = Record<string, {
+    iconifyPrefix: string;
+    sanitizeIcon?: (pascal: string) => string;
+}>;
+export type IconsPluginOptions = {
+    debug?: boolean;
+    /**
+     * The sources to scan for imports. By default this includes QDS, you can also add your own when creating library wrappers.
+     */
+    importSources?: string[];
+    packs?: PacksMap;
+};
+/**
+ * Rolldown plugin that transforms icon JSX elements to direct <svg /> calls
+ * @param options - Plugin configuration options
+ * @returns Rolldown-compatible plugin object
+ */
+export declare const icons: (options?: IconsPluginOptions) => {
+    name: string;
+    enforce: "pre";
+    configResolved(): void;
+    transform: {
+        filter: {
+            id: import("magic-regexp").MagicRegExp<"/\\.(?:tsx|jsx|mdx)$/", never, [], never>;
+        };
+        handler(code: string, id: string): {
+            code: string;
+            map: import("magic-string").SourceMap;
+        } | null;
+    };
+    resolveId: {
+        filter: {
+            id: import("magic-regexp").MagicRegExp<"/^virtual:icons\\//", never, [], never>;
+        };
+        handler(source: string): string | null;
+    };
+    load: {
+        filter: {
+            id: import("magic-regexp").MagicRegExp<`/${string}virtual:icons\\//`, never, [], never>;
+        };
+        handler(id: string): Promise<{
+            code: string;
+        } | null>;
+    };
+    handleHotUpdate(ctx: HmrContext): Promise<never[] | undefined>;
+};

package/lib-types/tools/rolldown/index.d.ts

@@ -1,3 +1,6 @@
+export type { AsChildPluginOptions, AsChildTypes } from "./as-child";
+export { asChild } from "./as-child";
+export type { IconsPluginOptions, PacksMap } from "./icons";
+export { icons } from "./icons";
 export { inlineCssPlugin } from "./inline-css";
-export { qdsTransformPlugin } from "./qds-transform";
 export { qwikRolldown } from "./qwik-rolldown";

package/lib-types/tools/rolldown/inline-css.d.ts

@@ -7,10 +7,20 @@ interface PluginContext {
 }
 export declare function inlineCssPlugin(): {
     name: string;
-    resolveId(source: string, _importer?: string, _options?: unknown): null;
-    load(this: PluginContext, id: string): {
-        code: string;
-        map: null;
-    } | null;
+    resolveId: {
+        filter: {
+            id: import("magic-regexp").MagicRegExp<"/\\.css(?:$|\\?(?:[^\n])+)/", never, any[], never>;
+        };
+        handler(source: string, _importer?: string, _options?: unknown): null;
+    };
+    load: {
+        filter: {
+            id: import("magic-regexp").MagicRegExp<"/\\.css(?:$|\\?(?:[^\n])+)/", never, any[], never>;
+        };
+        handler(this: PluginContext, id: string): {
+            code: string;
+            map: null;
+        } | null;
+    };
 };
 export {};

package/lib-types/tools/utils/icons/import-resolver.d.ts

@@ -1,5 +1,5 @@
 import type { Program } from "@oxc-project/types";
-import type { PacksMap } from "../../vite/icons";
+import type { PacksMap } from "../../rolldown/icons";
 /**
  * Map an imported name to a pack and collection name
  * @param importedName - The imported name from the import specifier

package/lib-types/tools/utils/icons/transform/mdx.d.ts

@@ -1,5 +1,5 @@
 import MagicString from "magic-string";
-import type { PacksMap } from "../../../vite/icons";
+import type { PacksMap } from "../../../rolldown/icons";
 import type { MDXJSXElement } from "../types/mdx-ast";
 /**
  * Extract attributes from MDX JSX node, handling title and description specially

package/lib-types/tools/utils/icons/transform/shared.d.ts

@@ -1,4 +1,4 @@
-import type { PacksMap } from "../../../vite/icons";
+import type { PacksMap } from "../../../rolldown/icons";
 /**
  * Shared transformation context for both TSX/JSX and MDX files
  */

package/lib-types/tools/utils/icons/transform/tsx.d.ts

@@ -1,6 +1,6 @@
 import type { JSXElement, Program } from "@oxc-project/types";
 import MagicString from "magic-string";
-import type { PacksMap } from "../../../vite/icons";
+import type { PacksMap } from "../../../rolldown/icons";
 import { type TransformContext } from "./shared";
 /**
  * Check if a JSX element is an icon element based on its structure

package/lib-types/tools/vite/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./as-child";
-export * from "./icons";
-export type { AsChildTypes } from "./as-child";
+export type { AsChildPluginOptions, AsChildTypes, IconsPluginOptions, PacksMap } from "../rolldown";
+export { asChild, icons } from "../rolldown";
+export { minifyContentPlugin } from "./minify-content";

package/lib-types/tools/vite/minify-content.d.ts

@@ -0,0 +1,9 @@
+import type { Plugin } from "vite";
+/**
+ * This plugin strips types, then minifies the contents of files with the ".script." extension. We watch the components library files and update the injected scripts when the contents change. Useful for dynamic client-only code without waking up the Qwik runtime.
+ */
+export declare function minifyContentPlugin(options?: {
+    outputDir?: string;
+    part?: string;
+    outputFileName?: string;
+}): Plugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qds.dev/tools",
-  "version": "0.6.2",
+  "version": "0.7.5",
   "private": false,
   "description": "Tools and utilities for Qwik Design System",
   "type": "module",
@@ -34,14 +34,17 @@
     "@iconify/types": "^2",
     "magic-string": "^0.30.17",
     "rolldown": "1.0.0-beta.45",
-    "vite": "^7.0.6",
-    "typescript": "5.4.5"
+    "typescript": "5.4.5",
+    "vite": "^7.0.6"
   },
   "dependencies": {
-    "@iconify/utils": "^3.0.1",
     "@iconify/json": "^2.2.382",
-    "@oxc-project/types": "^0.87.0",
-    "oxc-parser": "^0.94.0",
+    "@iconify/utils": "^3.0.1",
+    "@oxc-project/types": "^0.102.0",
+    "magic-regexp": "^0.10.0",
+    "oxc-minify": "^0.102.0",
+    "oxc-parser": "^0.102.0",
+    "oxc-transform": "^0.102.0",
     "oxc-walker": "^0.5.2",
     "remark": "^15.0.1",
     "remark-mdx": "^3.1.1"