@qds.dev/tools 0.7.5 → 0.8.2

package/lib/docs/component-props.qwik.mjs

@@ -0,0 +1,500 @@
+import { charIn, charNotIn, createRegExp, exactly, maybe, oneOrMore, whitespace } from "magic-regexp";
+import { parseSync } from "oxc-parser";
+import { walk } from "oxc-walker";
+import { existsSync, statSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+import { mkdir, readFile, readdir, writeFile } from "node:fs/promises";
+
+//#region docs/component-props.ts
+const JSDOC_START_PATTERN = createRegExp(exactly("/**"));
+const JSDOC_END_PATTERN = createRegExp(exactly("*/"));
+const JSDOC_PATTERN = createRegExp(exactly("/**"), charNotIn("*").or(exactly("*").notAfter(exactly("/"))).times.any(), exactly("*/"));
+const componentProps = (options) => {
+	const { componentsDir, outputDir, debug: isDebugMode = false } = options;
+	const debug = (message, ...data) => {
+		if (!isDebugMode) return;
+		console.log(`[component-props] ${message}`, ...data);
+	};
+	return {
+		name: "vite-plugin-qds-component-props",
+		enforce: "pre",
+		configResolved() {
+			debug("Component props plugin initialized");
+			generateAllComponentMetadata(componentsDir, outputDir, debug).catch((error) => {
+				console.error("[component-props] Error generating metadata:", error);
+			});
+		},
+		async handleHotUpdate(ctx) {
+			if (!ctx.file.includes(componentsDir) || !ctx.file.endsWith(".tsx")) return;
+			const componentName = extractComponentName(ctx.file, componentsDir);
+			if (!componentName) return;
+			await generateComponentMetadata(componentName, componentsDir, outputDir, debug);
+		}
+	};
+};
+async function generateAllComponentMetadata(componentsDir, outputDir, debug) {
+	const componentDirs = await findComponentDirs(componentsDir);
+	await Promise.all(componentDirs.map(async (componentName) => generateComponentMetadata(componentName, componentsDir, outputDir, debug)));
+}
+async function generateComponentMetadata(componentName, componentsDir, outputDir, debug) {
+	try {
+		debug(`Generating metadata for component: ${componentName}`);
+		const pieces = await parseComponentPieces(componentName, componentsDir, debug);
+		debug(`Found ${pieces.length} pieces for ${componentName}:`, pieces.map((p) => p.name));
+		const metadata = {
+			componentName,
+			pieces
+		};
+		const outputPath = join(outputDir, `${componentName}.json`);
+		await mkdir(dirname(outputPath), { recursive: true });
+		await writeFile(outputPath, JSON.stringify(metadata, null, 2), "utf-8");
+		debug(`Wrote metadata to ${outputPath}`);
+	} catch (error) {
+		debug(`Error generating metadata for ${componentName}:`, error);
+		console.error(`[component-props] Error generating metadata for ${componentName}:`, error);
+	}
+}
+async function parseComponentPieces(componentName, componentsDir, debug) {
+	const componentPath = join(componentsDir, componentName);
+	debug(`Parsing pieces for ${componentName}`);
+	if (!existsSync(componentPath)) {
+		debug(`Component path does not exist: ${componentPath}`);
+		return [];
+	}
+	const files = await readdir(componentPath);
+	debug(`Found ${files.length} files in directory:`, files);
+	const pieceFiles = files.filter((file) => isPieceFile(file, debug));
+	debug(`Filtered to ${pieceFiles.length} piece files:`, pieceFiles);
+	const piecePromises = pieceFiles.map(async (file) => {
+		const filePath = join(componentPath, file);
+		if (!statSync(filePath).isFile()) {
+			debug(`Skipping ${filePath} (not a file)`);
+			return null;
+		}
+		const pieceName = extractPieceName(file, componentName);
+		debug(`Parsing piece file: ${file} -> piece name: ${pieceName}`);
+		const props = await parseComponentFile(filePath, pieceName, debug);
+		if (props.length === 0) {
+			debug(`Skipping ${pieceName} (no props)`);
+			return null;
+		}
+		debug(`Found ${props.length} props in ${pieceName}`);
+		return {
+			name: pieceName,
+			props
+		};
+	});
+	const pieces = (await Promise.all(piecePromises)).filter((piece) => piece !== null);
+	pieces.sort((a, b) => {
+		if (a.name === "Root") return -1;
+		if (b.name === "Root") return 1;
+		return a.name.localeCompare(b.name);
+	});
+	debug(`Final pieces for ${componentName}:`, pieces.map((p) => p.name));
+	return pieces;
+}
+function isPieceFile(file, debug) {
+	if (!file.endsWith(".tsx")) {
+		debug(`Skipping ${file} (not .tsx)`);
+		return false;
+	}
+	if (file.endsWith("-context.tsx")) {
+		debug(`Skipping ${file} (is -context.tsx)`);
+		return false;
+	}
+	if (file.includes(".browser.")) {
+		debug(`Skipping ${file} (contains .browser.)`);
+		return false;
+	}
+	debug(`Including ${file} as piece file`);
+	return true;
+}
+function extractPieceName(file, componentName) {
+	return file.replace(`${componentName}-`, "").replace(".tsx", "").split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+async function parseComponentFile(filePath, pieceName, debug) {
+	debug(`parseComponentFile: ${filePath} (piece: ${pieceName})`);
+	const source = await readFile(filePath, "utf-8");
+	const ast = parseSync(filePath, source);
+	if (ast.errors.length > 0) {
+		debug(`Parse errors in ${filePath}:`, ast.errors);
+		return [];
+	}
+	const typeAliasCache = buildTypeAliasCache(ast.program);
+	const analysisResult = analyzeProgram(ast.program, debug, typeAliasCache);
+	if (!analysisResult.propsType) {
+		debug(`No props type found in ${filePath}`);
+		return [];
+	}
+	debug(`Bindable props:`, Array.from(analysisResult.bindableProps));
+	const typeLiterals = /* @__PURE__ */ new Set();
+	const bindableInlineTypes = /* @__PURE__ */ new Set();
+	collectTypeLiterals(analysisResult.propsType, typeAliasCache, typeLiterals);
+	collectBindableInlineTypes(analysisResult.propsType, bindableInlineTypes);
+	for (const bindableType of bindableInlineTypes) typeLiterals.add(bindableType);
+	for (const bindableType of analysisResult.aliasBindableTypes) {
+		bindableInlineTypes.add(bindableType);
+		typeLiterals.add(bindableType);
+	}
+	const propsMap = /* @__PURE__ */ new Map();
+	for (const typeLiteral of typeLiterals) {
+		const isFromBindable = bindableInlineTypes.has(typeLiteral);
+		extractPropsFromType(typeLiteral, source, analysisResult.bindableProps, propsMap, typeAliasCache, isFromBindable);
+	}
+	if (analysisResult.bindableTypeName) {
+		const bindableTypeAlias = typeAliasCache.get(analysisResult.bindableTypeName);
+		if (bindableTypeAlias) {
+			const typeAnnotation = "typeAnnotation" in bindableTypeAlias ? bindableTypeAlias.typeAnnotation : null;
+			if (typeAnnotation?.type === "TSTypeLiteral") extractPropsFromType(typeAnnotation, source, analysisResult.bindableProps, propsMap, typeAliasCache, true);
+			else if (typeAnnotation?.type === "TSTypeReference") {
+				const resolvedType = resolveTypeAliasCached(typeAnnotation, typeAliasCache);
+				if (resolvedType?.type === "TSTypeLiteral") extractPropsFromType(resolvedType, source, analysisResult.bindableProps, propsMap, typeAliasCache, true);
+			}
+		}
+	}
+	const finalProps = Array.from(propsMap.values());
+	debug(`Extracted ${finalProps.length} props from ${filePath}`);
+	return finalProps;
+}
+function buildTypeAliasCache(program) {
+	const cache = /* @__PURE__ */ new Map();
+	walk(program, { enter(node) {
+		if (node.type === "TSTypeAliasDeclaration") {
+			const typeName = getTypeName(node);
+			if (typeName) cache.set(typeName, node);
+		}
+	} });
+	return cache;
+}
+function analyzeProgram(program, debug, typeAliasCache) {
+	let propsType = null;
+	const bindableProps = /* @__PURE__ */ new Set();
+	let bindableTypeName = null;
+	const aliasBindableTypes = [];
+	let foundComponentCall = false;
+	walk(program, { enter(node) {
+		if (!foundComponentCall && node.type === "CallExpression") {
+			const callee = "callee" in node ? node.callee : null;
+			if (callee) {
+				if (callee.type === "Identifier" && "name" in callee && callee.name === "component$" || callee.type === "MemberExpression" && "property" in callee && callee.property && typeof callee.property === "object" && "name" in callee.property && callee.property.name === "component$") {
+					foundComponentCall = true;
+					const firstArg = ("arguments" in node ? node.arguments : [])[0];
+					if (firstArg && typeof firstArg === "object" && firstArg.type === "ArrowFunctionExpression") {
+						if ("typeArguments" in node && node.typeArguments) {
+							const typeArgs = node.typeArguments;
+							if (Array.isArray(typeArgs.params) && typeArgs.params.length > 0) {
+								const firstTypeArg = typeArgs.params[0];
+								if (firstTypeArg && typeof firstTypeArg === "object" && "type" in firstTypeArg) {
+									debug(`Found component$ call with generic type parameter`);
+									propsType = firstTypeArg;
+									return;
+								}
+							}
+						}
+						const firstParam = ("params" in firstArg ? firstArg.params : [])[0];
+						if (firstParam && typeof firstParam === "object") {
+							const typeAnnotation = "typeAnnotation" in firstParam ? firstParam.typeAnnotation : null;
+							if (typeAnnotation && typeof typeAnnotation === "object") {
+								const paramType = "typeAnnotation" in typeAnnotation ? typeAnnotation.typeAnnotation : null;
+								if (paramType && typeof paramType === "object") {
+									debug(`Found component$ call with props type`);
+									propsType = paramType;
+									return;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+		if (node.type === "TSTypeAliasDeclaration") {
+			const typeName = getTypeName(node);
+			if (!typeName) return;
+			const typeAnnotation = "typeAnnotation" in node ? node.typeAnnotation : null;
+			if (!typeAnnotation) return;
+			if (!propsType && typeName.endsWith("Props")) {
+				debug(`Found *Props type: ${typeName}`);
+				if ("type" in typeAnnotation) propsType = typeAnnotation;
+			}
+			if (typeName.endsWith("Props") && typeAnnotation.type === "TSIntersectionType") {
+				const types = "types" in typeAnnotation ? typeAnnotation.types : [];
+				for (const type of types) {
+					if (type.type !== "TSTypeReference") continue;
+					const typeNameNode = "typeName" in type ? type.typeName : null;
+					if (!typeNameNode || !("name" in typeNameNode) || typeNameNode.name !== "BindableProps") continue;
+					const firstParam = getTypeParameters(type)[0];
+					if (firstParam && typeof firstParam === "object" && firstParam !== null && "type" in firstParam) {
+						if (firstParam.type === "TSTypeReference") {
+							const refTypeName = firstParam.typeName?.name;
+							if (typeof refTypeName === "string") bindableTypeName = refTypeName;
+						} else if (firstParam.type === "TSTypeLiteral") aliasBindableTypes.push(firstParam);
+					}
+				}
+			}
+			if (bindableTypeName && typeName === bindableTypeName) {
+				if (typeAnnotation.type === "TSTypeLiteral") extractPropNames(typeAnnotation, bindableProps);
+				else if (typeAnnotation.type === "TSTypeReference") {
+					const resolvedType = resolveTypeAliasCached(typeAnnotation, typeAliasCache);
+					if (resolvedType?.type === "TSTypeLiteral") extractPropNames(resolvedType, bindableProps);
+				}
+			}
+		}
+	} });
+	return {
+		propsType,
+		bindableProps,
+		bindableTypeName,
+		aliasBindableTypes
+	};
+}
+function resolveTypeAliasCached(type, typeAliasCache) {
+	if (type.type !== "TSTypeReference") return null;
+	const typeName = getTypeReferenceName(type);
+	if (!typeName) return null;
+	const aliasNode = typeAliasCache.get(typeName);
+	if (!aliasNode) return null;
+	const typeAnnotation = "typeAnnotation" in aliasNode ? aliasNode.typeAnnotation : null;
+	if (typeAnnotation && "type" in typeAnnotation && typeAnnotation.type !== "TSTypeAnnotation") return typeAnnotation;
+	return null;
+}
+function collectTypeLiterals(type, typeAliasCache, collected) {
+	if (!type) return;
+	if (type.type === "TSTypeLiteral") {
+		collected.add(type);
+		return;
+	}
+	if (type.type === "TSIntersectionType" && "types" in type) {
+		for (const intersectionType of type.types) collectTypeLiterals(intersectionType, typeAliasCache, collected);
+		return;
+	}
+	if (type.type === "TSTypeReference") {
+		const resolved = resolveTypeAliasCached(type, typeAliasCache);
+		if (resolved) collectTypeLiterals(resolved, typeAliasCache, collected);
+	}
+}
+function collectBindableInlineTypes(type, collected) {
+	if (!type) return;
+	if (type.type === "TSIntersectionType" && "types" in type) for (const intersectionType of type.types) {
+		if (intersectionType.type === "TSTypeReference") {
+			if (getTypeReferenceName(intersectionType) === "BindableProps") {
+				const firstParam = getTypeParameters(intersectionType)[0];
+				if (firstParam && typeof firstParam === "object" && firstParam !== null && "type" in firstParam && firstParam.type === "TSTypeLiteral") collected.add(firstParam);
+			}
+		}
+		collectBindableInlineTypes(intersectionType, collected);
+	}
+}
+function getTypeName(node) {
+	if (node.type !== "TSTypeAliasDeclaration") return "";
+	if (!("id" in node) || !("name" in node.id)) return "";
+	return node.id.name;
+}
+function getTypeReferenceName(type) {
+	if (type.type !== "TSTypeReference") return "";
+	if (!("typeName" in type)) return "";
+	const typeName = type.typeName;
+	if (!typeName || !("name" in typeName) || typeof typeName.name !== "string") return "";
+	return typeName.name;
+}
+function getTypeParameters(type) {
+	if (type.type === "TSTypeReference") {
+		if ("typeArguments" in type && type.typeArguments) {
+			const typeArgs = type.typeArguments;
+			if (Array.isArray(typeArgs.params)) return typeArgs.params;
+		}
+		return [];
+	}
+	if (!("typeParameters" in type) || !type.typeParameters || typeof type.typeParameters !== "object" || !("params" in type.typeParameters) || !Array.isArray(type.typeParameters.params)) return [];
+	return type.typeParameters.params;
+}
+function extractPropNames(typeLiteral, props) {
+	if (!("members" in typeLiteral)) return;
+	for (const member of typeLiteral.members) {
+		if (member.type !== "TSPropertySignature") continue;
+		const key = getPropertyKey(member);
+		if (key) props.add(key);
+	}
+}
+function extractPropsFromType(typeLiteral, source, bindableProps, propsMap, typeAliasCache, forceBindable = false) {
+	if (!("members" in typeLiteral)) return;
+	for (const member of typeLiteral.members) {
+		if (member.type !== "TSPropertySignature") continue;
+		const prop = extractPropFromSignature(member, source, bindableProps, typeAliasCache, forceBindable);
+		if (prop) {
+			const existing = propsMap.get(prop.name);
+			if (existing) {
+				if (prop.isBindable) existing.isBindable = true;
+				if (prop.comment && !existing.comment) existing.comment = prop.comment;
+				if (prop.type !== "unknown" && existing.type === "unknown") {
+					existing.type = prop.type;
+					existing.unionValues = prop.unionValues;
+					existing.isFunction = prop.isFunction;
+					existing.initialValue = prop.initialValue;
+				}
+			} else propsMap.set(prop.name, prop);
+		}
+	}
+}
+function extractPropFromSignature(signature, source, bindableProps, typeAliasCache, forceBindable = false) {
+	const key = getPropertyKey(signature);
+	if (!key || key.startsWith("_")) return null;
+	const typeAnnotation = "typeAnnotation" in signature ? signature.typeAnnotation : null;
+	if (!typeAnnotation) return null;
+	const type = typeAnnotation.typeAnnotation;
+	const jsdoc = extractJSDoc(signature, source, key);
+	const propType = parseType(type, source, typeAliasCache);
+	return {
+		name: key,
+		type: propType.type,
+		unionValues: propType.unionValues,
+		isBindable: forceBindable || bindableProps.has(key),
+		isFunction: propType.isFunction,
+		initialValue: propType.initialValue,
+		comment: jsdoc.comment,
+		scenario: jsdoc.scenario
+	};
+}
+function getPropertyKey(signature) {
+	const keyNode = "key" in signature ? signature.key : null;
+	if (!keyNode || !("name" in keyNode)) return null;
+	if (typeof keyNode.name === "string") return keyNode.name;
+	return keyNode.name.name;
+}
+function extractJSDoc(node, source, propName) {
+	let commentValue = null;
+	if ("leadingComments" in node && node.leadingComments && Array.isArray(node.leadingComments)) for (const comment of node.leadingComments) {
+		if (typeof comment !== "object" || comment === null || !("type" in comment) || !("value" in comment)) continue;
+		const commentTyped = comment;
+		if (commentTyped.type !== "CommentBlock") continue;
+		const value = commentTyped.value;
+		if (typeof value === "string" && value.startsWith("*")) {
+			commentValue = value;
+			break;
+		}
+	}
+	if (!commentValue && propName) {
+		const propPattern = createRegExp(maybe(whitespace), exactly(propName), maybe(whitespace.times.any()), charIn("?:"));
+		const propPatternGlobal = new RegExp(propPattern.source, "g");
+		let match;
+		while ((match = propPatternGlobal.exec(source)) !== null) {
+			const propStart = match.index;
+			const beforeProp = source.slice(Math.max(0, propStart - 500), propStart);
+			const matches = Array.from(beforeProp.matchAll(new RegExp(JSDOC_PATTERN.source, "g")));
+			if (matches.length > 0) {
+				const lastMatch = matches[matches.length - 1];
+				if (beforeProp.slice(lastMatch.index + lastMatch[0].length).trim() === "") {
+					commentValue = lastMatch[0].replace(JSDOC_START_PATTERN, "").replace(JSDOC_END_PATTERN, "");
+					break;
+				}
+			}
+		}
+	}
+	if (!commentValue) return {};
+	const lines = commentValue.split("\n").map((line) => {
+		return line.replace(/^\s*\*?\s?/, "").trim();
+	}).filter((line) => line !== "" && line !== "*");
+	const scenario = lines.find((line) => line.startsWith("@scenario"))?.replace("@scenario", "").trim();
+	return {
+		comment: lines.filter((line) => line && !line.startsWith("@")).join(" ").trim() || void 0,
+		scenario: scenario || void 0
+	};
+}
+function parseType(type, _source, typeAliasCache) {
+	if (type.type === "TSUnionType") return parseUnionType(type, typeAliasCache);
+	if (type.type === "TSBooleanKeyword") return {
+		type: "boolean",
+		initialValue: false
+	};
+	if (type.type === "TSStringKeyword") return {
+		type: "string",
+		initialValue: ""
+	};
+	if (type.type === "TSNumberKeyword") return {
+		type: "number",
+		initialValue: 0
+	};
+	if (type.type === "TSLiteralType") return parseLiteralType(type);
+	if (type.type === "TSFunctionType") return {
+		type: "function",
+		isFunction: true
+	};
+	if (type.type === "TSTypeReference") {
+		if (getTypeReferenceName(type) === "QRL") return {
+			type: "function",
+			isFunction: true
+		};
+		const resolvedType = resolveTypeAliasCached(type, typeAliasCache);
+		if (resolvedType) return parseType(resolvedType, _source, typeAliasCache);
+	}
+	return { type: "unknown" };
+}
+function parseUnionType(type, typeAliasCache) {
+	if (type.type !== "TSUnionType" || !("types" in type)) return { type: "unknown" };
+	const unionTypes = type.types;
+	const stringLiterals = [];
+	for (let i = 0; i < unionTypes.length; i++) {
+		let unionType = unionTypes[i];
+		if (unionType.type === "TSTypeReference") {
+			const resolvedType = resolveTypeAliasCached(unionType, typeAliasCache);
+			if (resolvedType) {
+				if (resolvedType.type === "TSUnionType") {
+					const nestedResult = parseUnionType(resolvedType, typeAliasCache);
+					if (nestedResult.type === "union" && nestedResult.unionValues) stringLiterals.push(...nestedResult.unionValues);
+					continue;
+				}
+				unionType = resolvedType;
+			}
+		}
+		if (unionType.type === "TSLiteralType" && "literal" in unionType) {
+			const literal = unionType.literal;
+			if (literal && typeof literal === "object" && "type" in literal && "value" in literal) {
+				const literalValue = literal.value;
+				if (typeof literalValue === "string") stringLiterals.push(literalValue);
+			}
+		}
+	}
+	const hasBoolean = unionTypes.some((t) => {
+		if (t.type === "TSBooleanKeyword") return true;
+		if (t.type === "TSLiteralType" && "literal" in t) {
+			const literal = t.literal;
+			if (literal && typeof literal === "object" && "value" in literal) return typeof literal.value === "boolean";
+		}
+		return false;
+	});
+	const unionValues = [];
+	if (hasBoolean) unionValues.push("false", "true");
+	if (stringLiterals.length > 0) unionValues.push(...stringLiterals);
+	if (unionValues.length > 0) return {
+		type: "union",
+		unionValues
+	};
+	return { type: "unknown" };
+}
+function parseLiteralType(type) {
+	if (type.type !== "TSLiteralType" || !("literal" in type)) return { type: "unknown" };
+	const literal = type.literal;
+	if (!literal || typeof literal !== "object" || !("type" in literal) || !("value" in literal)) return { type: "unknown" };
+	const literalValue = literal.value;
+	if (typeof literalValue === "string") return {
+		type: "union",
+		unionValues: [literalValue]
+	};
+	if (typeof literalValue === "boolean") return {
+		type: "boolean",
+		initialValue: literalValue
+	};
+	return { type: "unknown" };
+}
+function extractComponentName(filePath, componentsDir) {
+	const relativePath = relative(componentsDir, filePath);
+	const componentNamePattern = createRegExp(oneOrMore(charNotIn("/")).groupedAs("componentName"), exactly("/"));
+	return relativePath.match(componentNamePattern)?.groups?.componentName ?? null;
+}
+async function findComponentDirs(componentsDir) {
+	const components = (await readdir(componentsDir, { withFileTypes: true })).filter((entry) => entry.isDirectory()).map((entry) => entry.name);
+	if (components.length === 0) throw new Error(`No component directories found in ${componentsDir}`);
+	return components;
+}
+
+//#endregion
+export { componentProps, extractJSDoc, generateAllComponentMetadata, generateComponentMetadata };

package/lib/docs/index.qwik.mjs

@@ -0,0 +1,3 @@
+import { componentProps, extractJSDoc, generateAllComponentMetadata, generateComponentMetadata } from "./component-props.qwik.mjs";
+
+export { componentProps, extractJSDoc, generateAllComponentMetadata, generateComponentMetadata };

package/lib/playground/generate-jsx.qwik.mjs

@@ -0,0 +1,153 @@
+import MagicString from "magic-string";
+import { parseSync } from "oxc-parser";
+import { walk } from "oxc-walker";
+
+//#region playground/generate-jsx.ts
+function generateJsx({ metadata, selectedPieceName, propValues, isBindProps, baseSource }) {
+	const componentName = metadata.componentName.charAt(0).toUpperCase() + metadata.componentName.slice(1);
+	const getPieceTagName = (pieceName) => pieceName === "Root" ? `${componentName}.Root` : `${componentName}.${pieceName}`;
+	if (!baseSource) {
+		const piece = metadata.pieces.find((p) => p.name === selectedPieceName) || metadata.pieces[0];
+		if (!piece) return "No piece found";
+		const pieceTagName = getPieceTagName(piece.name);
+		const values = propValues[piece.name] || {};
+		const props = [];
+		for (const prop of piece.props) {
+			const value = values[prop.name];
+			if (value === prop.initialValue) continue;
+			if ((prop.type === "boolean" || prop.type === "union") && (value === false || value === "false") && prop.initialValue === void 0) continue;
+			if (prop.type === "string" && value === "" && prop.initialValue === void 0) continue;
+			if (prop.type === "number" && value === 0 && prop.initialValue === void 0) continue;
+			if (prop.isBindable && isBindProps) props.push(`bind:${prop.name}={signal}`);
+			else if (value === "true" || value === true) props.push(prop.name);
+			else if (value === "false" || value === false) props.push(`${prop.name}={false}`);
+			else if (typeof value === "string") props.push(`${prop.name}="${value}"`);
+			else if (typeof value === "number") props.push(`${prop.name}={${value}}`);
+			else if (value !== void 0) props.push(`${prop.name}={${JSON.stringify(value)}}`);
+		}
+		const propsString = props.length > 0 ? ` ${props.join(" ")}` : "";
+		if (piece.name === "Root") return `<${pieceTagName}${propsString}>Click me</${pieceTagName}>`;
+		return `<${pieceTagName}${propsString} />`;
+	}
+	const s = new MagicString(baseSource);
+	let ast;
+	try {
+		ast = parseSync("source.tsx", baseSource);
+	} catch (e) {
+		console.warn("generateJsx: Failed to parse", e);
+		return baseSource;
+	}
+	if (ast.errors.length > 0) return baseSource;
+	let componentBodyStart = -1;
+	let importsEnd = 0;
+	let qwikImportEnd = -1;
+	let existingUseSignal = false;
+	walk(ast.program, { enter(node) {
+		if (node.type === "ImportDeclaration") {
+			if (node.end > importsEnd) importsEnd = node.end;
+			const source = node.source.value;
+			if (source.includes("props-playground") || source.includes("ContextId")) s.remove(node.start, node.end);
+			if (source === "@qwik.dev/core") {
+				qwikImportEnd = node.end;
+				if (node.specifiers) {
+					node.specifiers.forEach((spec) => {
+						if (spec.local.name === "useSignal") existingUseSignal = true;
+					});
+					if (node.specifiers.length > 0) qwikImportEnd = node.specifiers[node.specifiers.length - 1].end;
+				}
+			}
+		}
+		if (node.type === "JSXElement") {
+			const opening = node.openingElement;
+			let tagName = "";
+			if (opening.name.type === "JSXIdentifier") tagName = opening.name.name;
+			if (tagName === "PlaygroundState") s.remove(node.start, node.end);
+		}
+		if (node.type === "ExportDefaultDeclaration") {
+			if (node.declaration.type === "CallExpression" && node.declaration.callee.type === "Identifier" && node.declaration.callee.name === "component$") {
+				const arg = node.declaration.arguments[0];
+				if (arg && arg.type === "ArrowFunctionExpression" && (arg.body.type === "FunctionBody" || arg.body.type === "BlockStatement")) componentBodyStart = arg.body.start + 1;
+			}
+		}
+		if (node.type === "ExportNamedDeclaration" && node.declaration && node.declaration.type === "VariableDeclaration") {
+			const decl = node.declaration;
+			if (decl.declarations[0].id.type === "Identifier" && decl.declarations[0].id.name === "PlaygroundState") s.remove(node.start, node.end);
+		}
+	} });
+	for (const piece of metadata.pieces) {
+		const pieceTagName = getPieceTagName(piece.name);
+		const values = propValues[piece.name] || {};
+		const openTags = [];
+		walk(ast.program, { enter(node) {
+			if (node.type === "JSXOpeningElement") {
+				let name = "";
+				if (node.name.type === "JSXIdentifier") name = node.name.name;
+				else if (node.name.type === "JSXMemberExpression") name = `${node.name.object.name}.${node.name.property.name}`;
+				if (name === pieceTagName) openTags.push(node);
+			}
+		} });
+		for (const openTag of openTags) {
+			const definedProps = /* @__PURE__ */ new Set();
+			openTag.attributes.forEach((attr) => {
+				if (attr.type === "JSXAttribute" && attr.name.type === "JSXIdentifier") definedProps.add(attr.name.name);
+			});
+			const propsToInject = [];
+			for (const prop of piece.props) {
+				const value = values[prop.name];
+				if (prop.type === "function") {
+					const isEnabled = value === true || value === "true";
+					const signalName = prop.name.replace(/\$$/, "").replace(/^on/, "").toLowerCase() + "Count";
+					if (isEnabled) {
+						if (!definedProps.has(prop.name)) {
+							if (!existingUseSignal) {
+								if (qwikImportEnd !== -1) s.appendLeft(qwikImportEnd, ", useSignal");
+								else s.prepend("import { useSignal } from \"@qwik.dev/core\";\n");
+								existingUseSignal = true;
+							}
+							if (componentBodyStart !== -1) {
+								if (!baseSource.includes(`const ${signalName} = useSignal`)) s.appendRight(componentBodyStart, `\n  const ${signalName} = useSignal(0);`);
+							}
+							propsToInject.push(`${prop.name}={${"() => " + signalName + ".value++"}}`);
+							if (openTag.selfClosing) {
+								s.overwrite(openTag.end - 2, openTag.end, ">");
+								s.appendLeft(openTag.end, `\n    <div><p class="text-sm">Change count: {${signalName}.value}</p></div>\n  </${pieceTagName}>`);
+							} else {
+								let closingStart = -1;
+								walk(ast.program, { enter(n) {
+									if (n.type === "JSXElement" && n.openingElement === openTag && n.closingElement) closingStart = n.closingElement.start;
+								} });
+								if (closingStart !== -1) s.appendLeft(closingStart, `\n    <div><p class="text-sm">Change count: {${signalName}.value}</p></div>\n  `);
+							}
+						}
+					} else if (definedProps.has(prop.name)) {
+						const attr = openTag.attributes.find((a) => a.name?.name === prop.name);
+						if (attr) s.remove(attr.start, attr.end);
+					}
+					continue;
+				}
+				if (value === prop.initialValue) continue;
+				if ((prop.type === "boolean" || prop.type === "union") && (value === false || value === "false") && prop.initialValue === void 0) continue;
+				if (prop.type === "string" && value === "" && prop.initialValue === void 0) continue;
+				if (prop.type === "number" && value === 0 && prop.initialValue === void 0) continue;
+				if (definedProps.has(prop.name)) {
+					const attr = openTag.attributes.find((a) => a.name?.name === prop.name);
+					if (attr) s.remove(attr.start, attr.end);
+				}
+				if (prop.isBindable && isBindProps) propsToInject.push(`bind:${prop.name}={signal}`);
+				else if (value === "true" || value === true) propsToInject.push(prop.name);
+				else if (value === "false" || value === false) propsToInject.push(`${prop.name}={false}`);
+				else if (typeof value === "string") propsToInject.push(`${prop.name}="${value}"`);
+				else if (typeof value === "number") propsToInject.push(`${prop.name}={${value}}`);
+				else if (value !== void 0) propsToInject.push(`${prop.name}={${JSON.stringify(value)}}`);
+			}
+			if (propsToInject.length > 0) {
+				const insertPos = openTag.end - (openTag.selfClosing ? 2 : 1);
+				s.appendLeft(insertPos, " " + propsToInject.join(" "));
+			}
+		}
+	}
+	return s.toString().replace(/^\s*[\r\n]/gm, "");
+}
+
+//#endregion
+export { generateJsx };

package/lib/playground/index.qwik.mjs

@@ -0,0 +1,10 @@
+import { propExtraction } from "./prop-extraction.qwik.mjs";
+import { scenarioInjection } from "./scenario-injection.qwik.mjs";
+
+//#region playground/index.ts
+const playground = (options) => {
+	return [propExtraction(options), scenarioInjection()];
+};
+
+//#endregion
+export { playground };