@qds.dev/tools 0.7.5 → 0.8.2

package/lib/playground/prop-extraction.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 playground/prop-extraction.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 propExtraction = (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(createRegExp(whitespace.times.any().at.lineStart(), maybe("*"), maybe(whitespace)), "").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 { propExtraction };

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

@@ -0,0 +1,68 @@
+import { createRegExp, exactly, not } from "magic-regexp";
+import MagicString from "magic-string";
+import { walk } from "oxc-walker";
+import { existsSync, readdirSync, statSync } from "node:fs";
+import { basename, dirname, extname, join } from "node:path";
+import { remark } from "remark";
+import remarkMdx from "remark-mdx";
+
+//#region playground/scenario-injection.ts
+const scenarioInjection = () => {
+	const isMDX = createRegExp(exactly(".").and("mdx").at.lineEnd());
+	const sanitizePattern = createRegExp(not.wordChar, ["g"]);
+	return {
+		name: "vite-plugin-qds-playground-scenarios",
+		enforce: "pre",
+		transform(code, id) {
+			if (!isMDX.test(id)) return;
+			try {
+				const mdast = remark().use(remarkMdx).parse(code);
+				const s = new MagicString(code);
+				let hasPlayground = false;
+				const scenariosDir = join(dirname(id), "scenarios");
+				if (!existsSync(scenariosDir) || !statSync(scenariosDir).isDirectory()) return null;
+				const scenarioFiles = readdirSync(scenariosDir).filter((file) => file.endsWith(".tsx") || file.endsWith(".ts")).map((file) => {
+					const name = basename(file, extname(file));
+					return {
+						name,
+						file,
+						componentVar: `Scenario_${name.replace(sanitizePattern, "_")}`,
+						sourceVar: `Source_${name.replace(sanitizePattern, "_")}`
+					};
+				});
+				if (scenarioFiles.length === 0) return null;
+				walk(mdast, { enter(node) {
+					const mdxNode = node;
+					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}}`);
+								hasPlayground = true;
+							}
+						}
+					}
+				} });
+				if (!hasPlayground) return null;
+				const imports = scenarioFiles.map((file) => `import ${file.componentVar} from "./scenarios/${file.file}";\nimport ${file.sourceVar} from "./scenarios/${file.file}?raw";`).join("\n");
+				let insertPos = 0;
+				if (code.startsWith("---")) {
+					const secondDelimiter = code.indexOf("---", 3);
+					if (secondDelimiter !== -1) insertPos = secondDelimiter + 3;
+				}
+				s.appendLeft(insertPos, `\n${imports}\n`);
+				return {
+					code: s.toString(),
+					map: s.generateMap({ hires: true })
+				};
+			} catch (error) {
+				console.error(`Error transforming Playground in ${id}:`, error);
+				return null;
+			}
+		}
+	};
+};
+
+//#endregion
+export { scenarioInjection };

package/lib/repl/bundler/bundled.qwik.mjs

@@ -0,0 +1,38 @@
+import { QWIK_PKG_NAME } from "../repl-constants.qwik.mjs";
+import { version } from "@qwik.dev/core";
+import qWasmMjs from "@qwik.dev/core/bindings/qwik.wasm.mjs?raw-source";
+import qWasmBinUrl from "@qwik.dev/core/bindings/qwik_wasm_bg.wasm?raw-source";
+import qBuild from "@qwik.dev/core/dist/build/index.d.ts?raw-source";
+import qCoreMinMjs from "@qwik.dev/core/dist/core.min.mjs?raw-source";
+import qCoreMjs from "@qwik.dev/core/dist/core.mjs?raw-source";
+import qCoreDts from "@qwik.dev/core/dist/core-internal.d.ts?raw-source";
+import qOptimizerMjs from "@qwik.dev/core/dist/optimizer.mjs?raw-source";
+import qPreloaderMjs from "@qwik.dev/core/dist/preloader.mjs?raw-source";
+import qQwikLoaderJs from "@qwik.dev/core/dist/qwikloader.debug.js?raw-source";
+import qServerDts from "@qwik.dev/core/dist/server.d.ts?raw-source";
+import qServerMjs from "@qwik.dev/core/dist/server.mjs?raw-source";
+import qHandlersMjs from "@qwik.dev/core/handlers.mjs?raw-source";
+
+//#region repl/bundler/bundled.ts
+const qwikUrls = {
+	version,
+	"/dist/build/index.d.ts": qBuild,
+	"/dist/core.d.ts": qCoreDts,
+	"/dist/core.min.mjs": qCoreMinMjs,
+	"/dist/core.mjs": qCoreMjs,
+	"/dist/optimizer.mjs": qOptimizerMjs,
+	"/dist/server.mjs": qServerMjs,
+	"/dist/server.d.ts": qServerDts,
+	"/dist/preloader.mjs": qPreloaderMjs,
+	"/dist/qwikloader.js": qQwikLoaderJs,
+	"/bindings/qwik.wasm.mjs": qWasmMjs,
+	"/bindings/qwik_wasm_bg.wasm": qWasmBinUrl,
+	"/handlers.mjs": qHandlersMjs
+};
+const bundled = { [QWIK_PKG_NAME]: qwikUrls };
+const getDeps = () => {
+	return bundled;
+};
+
+//#endregion
+export { getDeps };