@qds.dev/tools 0.9.1 → 0.10.0

package/README.md

@@ -26,13 +26,11 @@ npm install @qds.dev/tools
 
 ```typescript
 // vite.config.ts
-import { icons } from '@qds.dev/tools/vite';
-import { defineConfig } from 'vite';
+import { icons } from "@qds.dev/tools/vite";
+import { defineConfig } from "vite";
 
 export default defineConfig({
-  plugins: [
-    icons()
-  ]
+  plugins: [icons()]
 });
 ```
 
@@ -40,14 +38,11 @@ export default defineConfig({
 
 ```typescript
 // rolldown.config.ts
-import { icons, asChild } from '@qds.dev/tools/vite';
-import { defineConfig } from 'rolldown';
+import { icons, asChild } from "@qds.dev/tools/vite";
+import { defineConfig } from "rolldown";
 
 export default defineConfig({
-  plugins: [
-    icons(),
-    asChild(),
-  ]
+  plugins: [icons(), asChild()]
 });
 ```
 
@@ -59,11 +54,11 @@ When you edit a QDS component, several build plugins transform your code before
 
 ### Quick Reference
 
-| Pattern You See | Plugin | What Happens |
-|-----------------|--------|--------------|
-| `<Lucide.Check />`, `<Heroicons.Star />` | Icons | Becomes inline `<svg>` at build time |
-| `<Button asChild><a href="...">` | AsChild | Child props hoisted to parent |
-| `component$()` | Qwik Optimizer | Not in @qds.dev/tools (built into Qwik) |
+| Pattern You See                          | Plugin         | What Happens                            |
+| ---------------------------------------- | -------------- | --------------------------------------- |
+| `<Lucide.Check />`, `<Heroicons.Star />` | Icons          | Becomes inline `<svg>` at build time    |
+| `<Button asChild><a href="...">`         | AsChild        | Child props hoisted to parent           |
+| `component$()`                           | Qwik Optimizer | Not in @qds.dev/tools (built into Qwik) |
 
 ### When to Read More
 
@@ -89,12 +84,17 @@ File changed: libs/components/checkbox/checkbox-indicator.tsx
 ```tsx
 // Your code:
 import { Lucide } from "@qds.dev/ui";
-<Lucide.Check width={20} class="text-green-500" />
+<Lucide.Check width={20} class="text-green-500" />;
 
 // After icons plugin:
-import __qds_i_lucide_check from 'virtual:icons/lucide/check';
-<svg width={20} class="text-green-500" height="1em" viewBox="0 0 24 24"
-     dangerouslySetInnerHTML={__qds_i_lucide_check} />
+import __qds_i_lucide_check from "virtual:icons/lucide/check";
+<svg
+  width={20}
+  class="text-green-500"
+  height="1em"
+  viewBox="0 0 24 24"
+  dangerouslySetInnerHTML={__qds_i_lucide_check}
+/>;
 ```
 
 **Why this matters:** The icon component you write doesn't exist at runtime. It's replaced with an actual `<svg>` element. If you're debugging icon issues, check the transformed output in browser devtools.
@@ -127,13 +127,13 @@ What you wrote is NOT what runs in the browser. The transformations above happen
 
 ### Common Debugging Scenarios
 
-| Issue | Likely Cause | Solution |
-|-------|--------------|----------|
-| Icon doesn't render | Icon name not in collection | Check [Iconify](https://icon-sets.iconify.design/) for valid names |
-| Icon has wrong viewBox | Icon collection uses different dimensions | Specify explicit `viewBox` prop |
-| asChild throws error | More than one child element | Ensure exactly one JSX child (whitespace is ignored) |
-| asChild props missing | Props not on direct child | Move props to the immediate child element |
-| Build error: "asChild elements must have exactly one child" | Multiple children or JSX expression | Use single element child, not `{condition && <el>}` patterns |
+| Issue                                                       | Likely Cause                              | Solution                                                           |
+| ----------------------------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------ |
+| Icon doesn't render                                         | Icon name not in collection               | Check [Iconify](https://icon-sets.iconify.design/) for valid names |
+| Icon has wrong viewBox                                      | Icon collection uses different dimensions | Specify explicit `viewBox` prop                                    |
+| asChild throws error                                        | More than one child element               | Ensure exactly one JSX child (whitespace is ignored)               |
+| asChild props missing                                       | Props not on direct child                 | Move props to the immediate child element                          |
+| Build error: "asChild elements must have exactly one child" | Multiple children or JSX expression       | Use single element child, not `{condition && <el>}` patterns       |
 
 ## How Plugins Transform Your Code
 
@@ -144,6 +144,7 @@ All transformations happen at build time. Your source code uses clean JSX patter
 Transforms icon JSX elements (`<Lucide.Check />`) into inline SVG at build time with virtual imports.
 
 **Before transformation (your code):**
+
 ```typescript
 import { Lucide } from "@qds.dev/ui";
 
@@ -153,6 +154,7 @@ export default component$(() => {
 ```
 
 **After transformation (build output):**
+
 ```typescript
 import __qds_i_lucide_check from 'virtual:icons/lucide/check';
 
@@ -162,6 +164,7 @@ export default component$(() => {
 ```
 
 **What this does:**
+
 - Transforms icon JSX into inline SVG elements
 - Generates virtual imports for icon data
 - Adds default dimensions (1em) if not specified
@@ -173,9 +176,10 @@ export default component$(() => {
 Hoists child element props to parent component when using asChild pattern for polymorphic rendering.
 
 **Before transformation (your code):**
+
 ```typescript
 export const Link = component$(() => {
-  // Gives styles of button, but renders as the link child. 
+  // Gives styles of button, but renders as the link child.
   // Useful when sharing styles OR existing logic inside of button that needs to be shared.
   return (
     <Button asChild>
@@ -186,6 +190,7 @@ export const Link = component$(() => {
 ```
 
 **After transformation (build output):**
+
 ```typescript
 export const Link = component$(() => {
   return (
@@ -197,6 +202,7 @@ export const Link = component$(() => {
 ```
 
 **What this does:**
+
 - Removes child element wrapper
 - Hoists child props to `movedProps` object
 - Adds `jsxType` to identify element type
@@ -205,20 +211,22 @@ export const Link = component$(() => {
 
 ## API
 
-| Export | Description |
-|--------|-------------|
-| Main export (`@qds.dev/tools`) | Core type utilities (AsChildTypes) |
-| `/vite` | Mostly re-exported from rolldown to stay modular: `icons`, `asChild`, `inlineAsset`, `minifyContentPlugin` |
-| `/rolldown` | Rolldown plugins: `icons`, `asChild`, `inlineAsset`, `inlineCssPlugin`, `qwikRolldown` |
-| `/playground` | Prop extraction and scenario injection plugins for component playgrounds |
-| `/utils` | General utility functions for code transformation |
+| Export                         | Description                                                                                                |
+| ------------------------------ | ---------------------------------------------------------------------------------------------------------- |
+| Main export (`@qds.dev/tools`) | Core type utilities (AsChildTypes)                                                                         |
+| `/vite`                        | Mostly re-exported from rolldown to stay modular: `icons`, `asChild`, `inlineAsset`, `minifyContentPlugin` |
+| `/rolldown`                    | Rolldown plugins: `icons`, `asChild`, `inlineAsset`, `inlineCssPlugin`, `qwikRolldown`                     |
+| `/playground`                  | Prop extraction and scenario injection plugins for component playgrounds                                   |
+| `/utils`                       | General utility functions for code transformation                                                          |
 
 **Key plugins:**
 
 ### `icons(options?)`
+
 Transforms icon JSX elements into inline SVG with virtual imports.
 
 **Options:**
+
 - `packs?: Record<string, { iconifyPrefix: string }>` - Custom icon pack configuration
 - `importSources?: string[]` - Additional import sources to scan (default: `["@qds.dev/ui"]`)
 - `debug?: boolean` - Enable debug logging
@@ -226,24 +234,29 @@ Transforms icon JSX elements into inline SVG with virtual imports.
 **Default icon packs:** Lucide, Heroicons, Tabler, Hugeicons, MaterialSymbols, AkarIcons
 
 ### `asChild(options?)`
+
 Hoists child element props to parent component for polymorphic rendering.
 
 **Options:**
+
 - `debug?: boolean` - Enable debug logging
 
 **Use case:** Implement polymorphic "as" pattern where components can render as different elements while preserving parent component logic.
 
 ### `playground(options)`
+
 Factory function returning two plugins for interactive component playgrounds.
 
 **Returns:** `[propExtraction(options), scenarioInjection()]`
 
 **Options:**
+
 - `componentsDir: string` - Directory containing component files
 - `outputDir: string` - Directory for generated metadata JSON
 - `debug?: boolean` - Enable debug logging
 
 **What it does:**
+
 - Extracts TypeScript prop types from component files → JSON metadata
 - Injects scenario imports into MDX playground files
 - Enables interactive component demos with prop controls
@@ -256,14 +269,14 @@ The `/playground` export provides specialized plugins for building interactive c
 
 ```typescript
 // vite.config.ts
-import { playground } from '@qds.dev/tools/playground';
-import { defineConfig } from 'vite';
+import { playground } from "@qds.dev/tools/playground";
+import { defineConfig } from "vite";
 
 export default defineConfig({
   plugins: [
     playground({
-      componentsDir: 'libs/components/src',
-      outputDir: '.playground-metadata'
+      componentsDir: "libs/components/src",
+      outputDir: ".playground-metadata"
     })
   ]
 });
@@ -274,12 +287,14 @@ export default defineConfig({
 Extracts TypeScript prop types from component files and generates JSON metadata.
 
 **Process:**
+
 1. Reads component `.tsx` files from `componentsDir`
 2. Parses TypeScript prop interfaces and types
 3. Extracts JSDoc comments for prop descriptions
 4. Generates JSON files in `outputDir`
 
 **Output type:**
+
 ```typescript
 interface ComponentMetadata {
   componentName: string;
@@ -305,6 +320,7 @@ interface PropType {
 Transforms MDX files containing `<Playground />` components by auto-injecting scenario imports.
 
 **Process:**
+
 1. Scans for `<Playground />` in MDX files
 2. Looks for adjacent `scenarios/` directory
 3. Auto-imports scenario components and source code
@@ -313,6 +329,7 @@ Transforms MDX files containing `<Playground />` components by auto-injecting sc
 **Example MDX transformation:**
 
 Before:
+
 ```mdx
 # Button Component
 
@@ -320,15 +337,14 @@ Before:
 ```
 
 After (build time):
+
 ```mdx
-import * as Scenario1 from './scenarios/basic.tsx';
-import Scenario1Code from './scenarios/basic.tsx?raw';
+import * as Scenario1 from "./scenarios/basic.tsx";
+import Scenario1Code from "./scenarios/basic.tsx?raw";
 
 <Playground
   component={Button}
-  scenarios={[
-    { component: Scenario1, code: Scenario1Code }
-  ]}
+  scenarios={[{ component: Scenario1, code: Scenario1Code }]}
 />
 ```
 
@@ -347,14 +363,17 @@ For package internals, dependency relationships, and design decisions, see [ARCH
 ## Related Packages
 
 **Used by:**
+
 - [`create-qds`](https://www.npmjs.com/package/create-qds) - CLI that scaffolds projects with these tools preconfigured
 - All QDS packages - Internal build tooling for @qds.dev/ui, @qds.dev/motion, @qds.dev/code
 
 **Complements:**
+
 - [@qds.dev/ui](https://www.npmjs.com/package/@qds.dev/ui) - Uses these build tools for icon transformations
 - [@qds.dev/base](https://www.npmjs.com/package/@qds.dev/base) - Uses these build tools for component patterns
 
 **Build dependencies:**
+
 - `vite` - Vite plugin compatibility
 - `rolldown` - Rolldown plugin compatibility
 - `oxc-*` - Fast JavaScript/TypeScript parsing and transformation

package/lib/playground/scenario-injection.qwik.mjs

@@ -36,9 +36,9 @@ const scenarioInjection = () => {
 					if ((mdxNode.type === "mdxJsxFlowElement" || mdxNode.type === "mdxJsxTextElement") && mdxNode.name === "Playground") {
 						if (mdxNode.position?.start?.offset !== void 0 && mdxNode.position?.end?.offset !== void 0) {
 							if (!mdxNode.attributes.some((attr) => attr.name === "scenarios")) {
-								const scenariosArrayString = `[${scenarioFiles.map((s$1) => `{name: "${s$1.name}", component: ${s$1.componentVar}, source: ${s$1.sourceVar}}`).join(", ")}]`;
-								const insertPos$1 = mdxNode.position.start.offset + 11;
-								s.appendLeft(insertPos$1, ` scenarios={${scenariosArrayString}}`);
+								const scenariosArrayString = `[${scenarioFiles.map((s) => `{name: "${s.name}", component: ${s.componentVar}, source: ${s.sourceVar}}`).join(", ")}]`;
+								const insertPos = mdxNode.position.start.offset + 11;
+								s.appendLeft(insertPos, ` scenarios={${scenariosArrayString}}`);
 								hasPlayground = true;
 							}
 						}

package/lib/rolldown/as-child.qwik.mjs

@@ -56,7 +56,7 @@ import { walk } from "oxc-walker";
 	* @param s - MagicString instance for code transformation
 	* @param source - Original source code
 	*/ function processAsChild(elem, s, source) {
-		const children = elem.children.filter((child$1) => !isJSXText(child$1) || child$1.value.trim() !== "");
+		const children = elem.children.filter((child) => !isJSXText(child) || child.value.trim() !== "");
 		if (children.length === 0) return;
 		if (children.length > 1) throw new Error(`asChild elements must have exactly one child at ${elem.start}`);
 		const child = children[0];

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

@@ -42,7 +42,7 @@ const nodeRequire = createRequire(import.meta.url);
 		resolveId: {
 			order: "pre",
 			filter: { id: combinedQuery },
-			async handler(id, importer, options$1) {
+			async handler(id, importer, options) {
 				const isInlineAsset = inlineAssetQuery.test(id);
 				const isNoTransform = noTransformQuery.test(id);
 				if (!isInlineAsset && !isNoTransform) return;
@@ -57,7 +57,7 @@ const nodeRequire = createRequire(import.meta.url);
 				let resolvedPath = null;
 				try {
 					const resolved = await this.resolve(basePath, importer, {
-						...options$1,
+						...options,
 						skipSelf: true
 					});
 					if (resolved) resolvedPath = resolved.id.split("?")[0];
@@ -75,8 +75,8 @@ const nodeRequire = createRequire(import.meta.url);
 						}
 						const subpath = parts.slice(subpathStartIndex).join("/");
 						try {
-							const basePath$1 = importer ? dirname(importer) : process.cwd();
-							resolvedPath = join(dirname(nodeRequire.resolve(`${packageName}/package.json`, { paths: [basePath$1] })), subpath);
+							const basePath = importer ? dirname(importer) : process.cwd();
+							resolvedPath = join(dirname(nodeRequire.resolve(`${packageName}/package.json`, { paths: [basePath] })), subpath);
 							debugInlineAsset("Manually resolved package import:", resolvedPath);
 						} catch (err) {
 							debugInlineAsset("Failed to manually resolve:", err);

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

@@ -15,9 +15,9 @@ import { transform } from "oxc-transform";
 	const partString = `.${options?.part || "script"}.`;
 	const scriptExtension = createRegExp(exactly(partString).and(oneOrMore(char)).at.lineEnd());
 	const processMap = async (id, code) => {
-		const basename$1 = id.split(sep).join("/").split("/").pop() || "";
-		if (!scriptExtension.test(basename$1)) return false;
-		const [name] = basename$1.split(partString);
+		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, {

package/package.json

@@ -1,63 +1,67 @@
 {
   "name": "@qds.dev/tools",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "private": false,
   "description": "Tools and utilities for Qwik Design System",
-  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kunai-consulting/qwik-design-system"
+  },
   "files": [
     "lib",
     "lib-types"
   ],
+  "type": "module",
+  "sideEffects": false,
   "main": "./lib/src/index.qwik.mjs",
-  "qwik": "./lib/src/index.qwik.mjs",
   "types": "./lib-types/tools/src/index.d.ts",
   "exports": {
     ".": {
-      "import": "./lib/src/index.qwik.mjs",
-      "types": "./lib-types/tools/src/index.d.ts"
+      "types": "./lib-types/tools/src/index.d.ts",
+      "import": "./lib/src/index.qwik.mjs"
     },
     "./package.json": "./package.json",
     "./vite": {
-      "import": "./lib/vite/index.qwik.mjs",
-      "types": "./lib-types/tools/vite/index.d.ts"
+      "types": "./lib-types/tools/vite/index.d.ts",
+      "import": "./lib/vite/index.qwik.mjs"
     },
     "./utils": {
-      "import": "./lib/utils/index.qwik.mjs",
-      "types": "./lib-types/tools/utils/index.d.ts"
+      "types": "./lib-types/tools/utils/index.d.ts",
+      "import": "./lib/utils/index.qwik.mjs"
     },
     "./rolldown": {
-      "import": "./lib/rolldown/index.qwik.mjs",
-      "types": "./lib-types/tools/rolldown/index.d.ts"
+      "types": "./lib-types/tools/rolldown/index.d.ts",
+      "import": "./lib/rolldown/index.qwik.mjs"
     },
     "./playground": {
-      "import": "./lib/playground/index.qwik.mjs",
-      "types": "./lib-types/tools/playground/index.d.ts"
+      "types": "./lib-types/tools/playground/index.d.ts",
+      "import": "./lib/playground/index.qwik.mjs"
     }
   },
-  "devDependencies": {
-    "@iconify/types": "^2",
-    "magic-string": "^0.30.17",
-    "rolldown": "1.0.0-beta.45",
-    "typescript": "5.4.5",
-    "vite": "^7.3.1"
+  "scripts": {
+    "build": "pnpm run build.lib & pnpm run build.types && pnpm generate.icon.types",
+    "build.lib": "rolldown -c rolldown.config.ts",
+    "build.types": "tsc --emitDeclarationOnly --outDir ./lib-types",
+    "generate.icon.types": "node src/generate/icon-types.ts"
   },
   "dependencies": {
     "@iconify/json": "^2.2.382",
     "@iconify/utils": "^3.0.1",
-    "@oxc-project/types": "^0.102.0",
+    "@oxc-project/types": "^0.111.0",
     "magic-regexp": "^0.10.0",
-    "oxc-minify": "^0.102.0",
-    "oxc-parser": "^0.102.0",
-    "oxc-transform": "^0.102.0",
+    "oxc-minify": "^0.111.0",
+    "oxc-parser": "^0.111.0",
+    "oxc-transform": "^0.111.0",
     "oxc-walker": "^0.5.2",
     "remark": "^15.0.1",
     "remark-mdx": "^3.1.1"
   },
-  "sideEffects": false,
-  "scripts": {
-    "build": "pnpm run build.lib & pnpm run build.types && pnpm generate.icon.types",
-    "build.lib": "rolldown -c rolldown.config.ts",
-    "build.types": "tsc --emitDeclarationOnly --outDir ./lib-types",
-    "generate.icon.types": "node src/generate/icon-types.ts"
-  }
-}
+  "devDependencies": {
+    "@iconify/types": "^2",
+    "magic-string": "^0.30.17",
+    "rolldown": "1.0.0-rc.4",
+    "typescript": "5.4.5",
+    "vite": "^7.3.1"
+  },
+  "qwik": "./lib/src/index.qwik.mjs"
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Kunai Consulting
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.