diff --git a/docs-site/pages/playground/+Page.tsx b/docs-site/pages/playground/+Page.tsx index cb1435b..9bfa144 100644 --- a/docs-site/pages/playground/+Page.tsx +++ b/docs-site/pages/playground/+Page.tsx @@ -86,7 +86,9 @@ function initFilesDefault(): FileEntry[] { } function firstCodeFile(files: FileEntry[]): string { - return files.find((f) => isCodeFile(f.path))?.path ?? files[0]?.path ?? 'cli.ts'; + return ( + files.find((f) => isCodeFile(f.path))?.path ?? files[0]?.path ?? 'cli.ts' + ); } export default function PlaygroundPage() { @@ -100,18 +102,26 @@ export default function PlaygroundPage() { const loadedExample = urlExampleId ? examples[urlExampleId] : null; - const initFiles = loadedExample ? initFilesFromExample(loadedExample) : initFilesDefault(); + const initFiles = loadedExample + ? initFilesFromExample(loadedExample) + : initFilesDefault(); const [files, setFiles] = useState(initFiles); - const [activeFile, setActiveFile] = useState(() => firstCodeFile(initFiles)); + const [activeFile, setActiveFile] = useState(() => + firstCodeFile(initFiles) + ); const [args, setArgs] = useState( loadedExample?.commands[0]?.args ?? '--help' ); const [output, setOutput] = useState([]); const [error, setError] = useState(null); const [running, setRunning] = useState(false); - const [activeExample, setActiveExample] = useState(loadedExample); + const [activeExample, setActiveExample] = useState( + loadedExample + ); const [Editor, setEditor] = useState(null); - const [runTargetOverride, setRunTargetOverride] = useState(null); + const [runTargetOverride, setRunTargetOverride] = useState( + null + ); const [showRunMenu, setShowRunMenu] = useState(false); useEffect(() => { @@ -133,14 +143,21 @@ export default function PlaygroundPage() { const runTarget = useMemo(() => { // Explicit override takes priority (if file still exists and is an entry) - if (runTargetOverride && entryFiles.some((f) => f.path === runTargetOverride)) { + if ( + runTargetOverride && + entryFiles.some((f) => f.path === runTargetOverride) + ) { return runTargetOverride; } // If the active editor tab is an entry file, run it const activeEntry = entryFiles.find((f) => f.path === activeFile); if (activeEntry) return activeEntry.path; // Fall back to first entry file, then first code file - return entryFiles[0]?.path ?? files.find((f) => isCodeFile(f.path))?.path ?? 'cli.ts'; + return ( + entryFiles[0]?.path ?? + files.find((f) => isCodeFile(f.path))?.path ?? + 'cli.ts' + ); }, [runTargetOverride, entryFiles, activeFile, files]); const run = useCallback(async () => { @@ -153,12 +170,16 @@ export default function PlaygroundPage() { const origError = console.error; const origWarn = console.warn; - const capture = (prefix: string) => (...args: unknown[]) => { - const line = args - .map((a) => (typeof a === 'string' ? a : JSON.stringify(a, null, 2) ?? String(a))) - .join(' '); - logs.push(prefix ? `${prefix} ${line}` : line); - }; + const capture = + (prefix: string) => + (...args: unknown[]) => { + const line = args + .map((a) => + typeof a === 'string' ? a : JSON.stringify(a, null, 2) ?? String(a) + ) + .join(' '); + logs.push(prefix ? `${prefix} ${line}` : line); + }; console.log = capture(''); console.error = capture('[stderr]'); console.warn = capture('[warn]'); @@ -191,9 +212,13 @@ export default function PlaygroundPage() { pkg: string ): { defaultAlias: string | null; named: [string, string][] } => { const defaultAlias = - src.match(new RegExp(`import\\s+(\\w+)\\s+from\\s+['"]${pkg}['"]`))?.[1] ?? null; + src.match( + new RegExp(`import\\s+(\\w+)\\s+from\\s+['"]${pkg}['"]`) + )?.[1] ?? null; const namedStr = - src.match(new RegExp(`import\\s+\\{([^}]+)\\}\\s+from\\s+['"]${pkg}['"]`))?.[1] ?? ''; + src.match( + new RegExp(`import\\s+\\{([^}]+)\\}\\s+from\\s+['"]${pkg}['"]`) + )?.[1] ?? ''; const named: [string, string][] = namedStr .split(',') .map((s) => s.trim()) @@ -257,11 +282,20 @@ export default function PlaygroundPage() { // export keywords on declarations, re-exports). const stripped = transpiled .replace(/^\s*import\s+.*?from\s+['"][^'"]*['"];?\s*$/gm, '') - .replace(/^\s*export\s+default\s+(?!function\b|class\b|async\b)\S[^\n]*;?\s*$/gm, '') - .replace(/export\s+default\s+(?=(?:async\s+)?(?:function|class)\b)/g, '') + .replace( + /^\s*export\s+default\s+(?!function\b|class\b|async\b)\S[^\n]*;?\s*$/gm, + '' + ) + .replace( + /export\s+default\s+(?=(?:async\s+)?(?:function|class)\b)/g, + '' + ) .replace(/export\s*\{[^}]*\}\s*(?:from\s*['"][^'"]*['"])?\s*;?/g, '') .replace(/export\s+\*\s+(?:as\s+\w+\s+)?from\s+['"][^'"]*['"];\s*/g, '') - .replace(/\bexport\s+(?=(?:async\s+)?(?:const|let|var|function|class)\b)/g, ''); + .replace( + /\bexport\s+(?=(?:async\s+)?(?:const|let|var|function|class)\b)/g, + '' + ); const cliForge = await import('cli-forge'); const parserPkg = await import('@cli-forge/parser'); @@ -269,7 +303,9 @@ export default function PlaygroundPage() { parserPkg.setEnvironmentProvider( new parserPkg.MemoryEnvironmentProvider({ env: envRecord, cwd: '/' }) ); - parserPkg.setFileSystemProvider(new parserPkg.MemoryFileSystemProvider(filesRecord)); + parserPkg.setFileSystemProvider( + new parserPkg.MemoryFileSystemProvider(filesRecord) + ); // Build preamble: shim + re-inject import bindings as var declarations. // Using `var` (not const/let) so they can be legally shadowed by the @@ -284,7 +320,8 @@ export default function PlaygroundPage() { : []), // cli-forge named imports (e.g. `import { cli, ConfigurationProviders } from 'cli-forge'`) ...cliForgeImports.named.map( - ([orig, alias]) => `var ${alias} = __cliForge__[${JSON.stringify(orig)}];` + ([orig, alias]) => + `var ${alias} = __cliForge__[${JSON.stringify(orig)}];` ), // @cli-forge/parser default import ...(parserImports.defaultAlias @@ -292,12 +329,20 @@ export default function PlaygroundPage() { : []), // @cli-forge/parser named imports ...parserImports.named.map( - ([orig, alias]) => `var ${alias} = __parser__[${JSON.stringify(orig)}];` + ([orig, alias]) => + `var ${alias} = __parser__[${JSON.stringify(orig)}];` ), ].join('\n'); - const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor; - const fn = new AsyncFunction('__cliForge__', '__parser__', '__argv__', preamble + '\n' + stripped); + const AsyncFunction = Object.getPrototypeOf( + async function () {} + ).constructor; + const fn = new AsyncFunction( + '__cliForge__', + '__parser__', + '__argv__', + preamble + '\n' + stripped + ); await fn(cliForge, parserPkg, argv); } catch (e: unknown) { const msg = e instanceof Error ? e.message : String(e); @@ -308,8 +353,12 @@ export default function PlaygroundPage() { console.warn = origWarn; try { const parserPkg = await import('@cli-forge/parser'); - parserPkg.setEnvironmentProvider(new parserPkg.MemoryEnvironmentProvider()); - parserPkg.setFileSystemProvider(new parserPkg.MemoryFileSystemProvider()); + parserPkg.setEnvironmentProvider( + new parserPkg.MemoryEnvironmentProvider() + ); + parserPkg.setFileSystemProvider( + new parserPkg.MemoryFileSystemProvider() + ); } catch { /* ignore */ } @@ -318,26 +367,46 @@ export default function PlaygroundPage() { } }, [files, args, runTarget]); - const applyExample = useCallback((ex: PlaygroundExample) => { - const nextFiles = initFilesFromExample(ex); - setFiles(nextFiles); - const firstCode = firstCodeFile(nextFiles); - setActiveFile(firstCode); - setArgs(ex.commands[0]?.args ?? '--help'); - setOutput([]); - setError(null); - setActiveExample(ex); - setRunTargetOverride(null); - // Trigger ATA for the new example's entry file - const entry = nextFiles.find((f) => f.path === firstCode); - if (entry && isCodeFile(entry.path)) triggerAta(entry.content); - }, [triggerAta]); - - const updateFileContent = useCallback((path: string, content: string) => { - setFiles((prev) => prev.map((f) => (f.path === path ? { ...f, content } : f))); - // Trigger ATA for third-party type acquisition on code files - if (isCodeFile(path)) triggerAta(content); - }, [triggerAta]); + // ATA: acquire types for third-party imports on content changes + const ataRef = useRef<((code: string) => void) | null>(null); + const ataTimerRef = useRef | null>(null); + + const triggerAta = useCallback((code: string) => { + // Debounce ATA calls to avoid hammering the CDN on every keystroke + if (ataTimerRef.current) clearTimeout(ataTimerRef.current); + ataTimerRef.current = setTimeout(() => { + ataRef.current?.(code); + }, 800); + }, []); + + const applyExample = useCallback( + (ex: PlaygroundExample) => { + const nextFiles = initFilesFromExample(ex); + setFiles(nextFiles); + const firstCode = firstCodeFile(nextFiles); + setActiveFile(firstCode); + setArgs(ex.commands[0]?.args ?? '--help'); + setOutput([]); + setError(null); + setActiveExample(ex); + setRunTargetOverride(null); + // Trigger ATA for the new example's entry file + const entry = nextFiles.find((f) => f.path === firstCode); + if (entry && isCodeFile(entry.path)) triggerAta(entry.content); + }, + [triggerAta] + ); + + const updateFileContent = useCallback( + (path: string, content: string) => { + setFiles((prev) => + prev.map((f) => (f.path === path ? { ...f, content } : f)) + ); + // Trigger ATA for third-party type acquisition on code files + if (isCodeFile(path)) triggerAta(content); + }, + [triggerAta] + ); const handleEditorMount: OnMount = useCallback( (_editor, monaco) => { @@ -377,7 +446,9 @@ export default function PlaygroundPage() { monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ // ModuleResolutionKind.Bundler = 99 in newer Monaco versions // Bundler = 99 in Monaco's numeric enum; the named value may not exist in older type versions - moduleResolution: (monaco.languages.typescript.ModuleResolutionKind as any).Bundler ?? 99, + moduleResolution: + (monaco.languages.typescript.ModuleResolutionKind as any).Bundler ?? + 99, module: monaco.languages.typescript.ModuleKind.ESNext, target: monaco.languages.typescript.ScriptTarget.ESNext, allowSyntheticDefaultImports: true, @@ -425,7 +496,8 @@ export default function PlaygroundPage() { [typeDeclarations] ); - const activeFileContent = files.find((f) => f.path === activeFile)?.content ?? ''; + const activeFileContent = + files.find((f) => f.path === activeFile)?.content ?? ''; // Derive the CLI root command name from the entry file source so we can // show it as a baked-in prefix in the terminal prompt (e.g. "basic-cli _"). @@ -441,10 +513,15 @@ export default function PlaygroundPage() { // const { cli } = require('cli-forge') const callerNames: string[] = []; - const namedMatch = src.match(/import\s+\{([^}]+)\}\s+from\s+['"]cli-forge['"]/); + const namedMatch = src.match( + /import\s+\{([^}]+)\}\s+from\s+['"]cli-forge['"]/ + ); if (namedMatch) { for (const part of namedMatch[1].split(',')) { - const [orig, alias] = part.trim().split(/\s+as\s+/).map((s) => s.trim()); + const [orig, alias] = part + .trim() + .split(/\s+as\s+/) + .map((s) => s.trim()); if (orig === 'cli' || orig === 'CLI') callerNames.push(alias || orig); } } @@ -452,10 +529,15 @@ export default function PlaygroundPage() { const defaultMatch = src.match(/import\s+(\w+)\s+from\s+['"]cli-forge['"]/); if (defaultMatch) callerNames.push(defaultMatch[1]); - const cjsMatch = src.match(/(?:const|let|var)\s+\{([^}]+)\}\s*=\s*require\s*\(\s*['"]cli-forge['"]/); + const cjsMatch = src.match( + /(?:const|let|var)\s+\{([^}]+)\}\s*=\s*require\s*\(\s*['"]cli-forge['"]/ + ); if (cjsMatch) { for (const part of cjsMatch[1].split(',')) { - const [orig, alias] = part.trim().split(/\s+as\s+/).map((s) => s.trim()); + const [orig, alias] = part + .trim() + .split(/\s+as\s+/) + .map((s) => s.trim()); if (orig === 'cli' || orig === 'CLI') callerNames.push(alias || orig); } } @@ -464,7 +546,9 @@ export default function PlaygroundPage() { // function or constructor: name('my-cli') or new name('my-cli') for (const name of callerNames) { const esc = name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); - const m = src.match(new RegExp(`(?:new\\s+)?\\b${esc}\\s*\\(\\s*['"\`]([^'"\`]+)['"\`]`)); + const m = src.match( + new RegExp(`(?:new\\s+)?\\b${esc}\\s*\\(\\s*['"\`]([^'"\`]+)['"\`]`) + ); if (m) return m[1]; } @@ -473,18 +557,6 @@ export default function PlaygroundPage() { // Start with 'Ctrl' to match SSR output, then update on the client. // A direct navigator check here causes a hydration mismatch. - // ATA: acquire types for third-party imports on content changes - const ataRef = useRef<((code: string) => void) | null>(null); - const ataTimerRef = useRef | null>(null); - - const triggerAta = useCallback((code: string) => { - // Debounce ATA calls to avoid hammering the CDN on every keystroke - if (ataTimerRef.current) clearTimeout(ataTimerRef.current); - ataTimerRef.current = setTimeout(() => { - ataRef.current?.(code); - }, 800); - }, []); - const [modKey, setModKey] = useState('Ctrl'); useEffect(() => { setModKey(/Mac|iPhone|iPad/.test(navigator.userAgent) ? '⌘' : 'Ctrl'); @@ -506,11 +578,14 @@ export default function PlaygroundPage() { {activeExample ? (

) : (

- Write CLI Forge code and see how it responds to different arguments and environment variables. + Write CLI Forge code and see how it responds to different + arguments and environment variables.

)}

@@ -566,9 +641,15 @@ export default function PlaygroundPage() { {showRunMenu && ( -

{entryFiles.map((f) => ( ))} @@ -658,7 +742,10 @@ export default function PlaygroundPage() { padding: { top: 12, bottom: 12 }, overviewRulerLanes: 0, hideCursorInOverviewRuler: true, - scrollbar: { verticalScrollbarSize: 6, horizontalScrollbarSize: 6 }, + scrollbar: { + verticalScrollbarSize: 6, + horizontalScrollbarSize: 6, + }, }} /> ) : ( @@ -668,10 +755,15 @@ export default function PlaygroundPage() {

{/* Bottom terminal panel */} -

{/* Args input row */}

- $ + + $ + {cliName && ( {cliName} diff --git a/examples/tsconfig.lib.json b/examples/tsconfig.lib.json index 0e769c8..a1081b3 100644 --- a/examples/tsconfig.lib.json +++ b/examples/tsconfig.lib.json @@ -4,5 +4,6 @@ "rootDir": ".", "noEmit": true }, - "include": ["**/*.ts"] + "include": ["**/*.ts"], + "exclude": ["framework-comparison"] }