From a5a0973c1066ab9d1fc8e8274258346458214dfd Mon Sep 17 00:00:00 2001 From: Brenley Dueck Date: Sat, 9 May 2026 07:43:50 -0500 Subject: [PATCH 1/2] support solid v2 in repl Co-authored-by: Cursor --- packages/playground/package.json | 2 + .../playground/src/components/setupSolid.ts | 71 ++++++++++++++-- packages/playground/src/pages/edit.tsx | 59 +++++++++++++- packages/playground/src/pages/home.tsx | 2 + packages/playground/src/types.d.ts | 3 + packages/solid-repl/repl/compiler.ts | 51 ++++++++++-- packages/solid-repl/src/components/repl.tsx | 80 +++++++++++++++---- .../solid-repl/src/components/ui/Menu.tsx | 2 +- packages/solid-repl/src/types.d.ts | 6 ++ pnpm-lock.yaml | 32 ++++++++ 10 files changed, 274 insertions(+), 34 deletions(-) create mode 100644 packages/playground/src/types.d.ts diff --git a/packages/playground/package.json b/packages/playground/package.json index 09e87f9..2e8b047 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -24,6 +24,7 @@ "@babel/preset-typescript": "^7.28.5", "@babel/types": "^7.29.0", "@solidjs/router": "^0.16.1", + "@solidjs/web": "2.0.0-beta.10", "@types/babel__standalone": "^7.1.9", "@types/dedent": "^0.7.2", "assert": "^2.1.0", @@ -31,6 +32,7 @@ "jszip": "^3.10.1", "monaco-editor": "^0.55.1", "register-service-worker": "^1.7.2", + "solid-js-v2": "npm:solid-js@2.0.0-beta.10", "typescript": "^6.0.3", "unocss": "^66.6.8", "vite": "^8.0.10", diff --git a/packages/playground/src/components/setupSolid.ts b/packages/playground/src/components/setupSolid.ts index 531b497..b55de47 100644 --- a/packages/playground/src/components/setupSolid.ts +++ b/packages/playground/src/components/setupSolid.ts @@ -1,15 +1,72 @@ import { typescript } from 'monaco-editor'; +import { createEffect } from 'solid-js'; +import type { SolidVersion } from 'solid-repl'; +import type { Repl as ReplProps } from 'solid-repl/dist/repl'; +import repl from 'solid-repl/src/repl'; -const solidTypes: Record = import.meta.glob('/node_modules/{solid-js,csstype}/**/*.{d.ts,json}', { +const commonTypes: Record = import.meta.glob('/node_modules/csstype/**/*.{d.ts,json}', { eager: true, query: '?raw', import: 'default', }); +const solidV1Types: Record = import.meta.glob('/node_modules/solid-js/**/*.{d.ts,json}', { + eager: true, + query: '?raw', + import: 'default', +}); +const solidV2Types: Record = import.meta.glob( + '/node_modules/{solid-js-v2,@solidjs\\/signals,@solidjs\\/web}/**/*.{d.ts,json}', + { + eager: true, + query: '?raw', + import: 'default', + }, +); -for (const path in solidTypes) { - typescript.typescriptDefaults.addExtraLib(solidTypes[path], `file://${path}`); - typescript.javascriptDefaults.addExtraLib(solidTypes[path], `file://${path}`); -} +let currentVersion: SolidVersion | undefined; +let disposables: { dispose: () => void }[] = []; -import repl from 'solid-repl/src/repl'; -export default repl; +const addLib = (path: string, source: string) => { + disposables.push(typescript.typescriptDefaults.addExtraLib(source, `file://${path}`)); + disposables.push(typescript.javascriptDefaults.addExtraLib(source, `file://${path}`)); +}; + +const setCompilerOptions = (version: SolidVersion) => { + const compilerOptions: typescript.CompilerOptions = { + strict: true, + target: typescript.ScriptTarget.ESNext, + module: typescript.ModuleKind.ESNext, + moduleResolution: typescript.ModuleResolutionKind.NodeJs, + jsx: typescript.JsxEmit.Preserve, + jsxImportSource: version === 'v2' ? '@solidjs/web' : 'solid-js', + allowNonTsExtensions: true, + }; + + typescript.typescriptDefaults.setCompilerOptions(compilerOptions); + typescript.javascriptDefaults.setCompilerOptions(compilerOptions); +}; + +const setSolidTypes = (version: SolidVersion) => { + if (version === currentVersion) return; + + currentVersion = version; + setCompilerOptions(version); + for (const disposable of disposables) disposable.dispose(); + disposables = []; + + for (const path in commonTypes) { + addLib(path, commonTypes[path]); + } + + const solidTypes = version === 'v2' ? solidV2Types : solidV1Types; + for (const path in solidTypes) { + addLib(path.replace('/solid-js-v2/', '/solid-js/'), solidTypes[path]); + } +}; + +const Repl: ReplProps = (props) => { + createEffect(() => setSolidTypes(props.solidVersion)); + return repl(props); +}; + +export default Repl; diff --git a/packages/playground/src/pages/edit.tsx b/packages/playground/src/pages/edit.tsx index 510fa30..34a1518 100644 --- a/packages/playground/src/pages/edit.tsx +++ b/packages/playground/src/pages/edit.tsx @@ -11,7 +11,7 @@ import { API, useAppContext } from '../context'; import { debounce } from '@solid-primitives/scheduled'; import { decompressFromURL } from '@amoutonbrady/lz-string'; import { defaultTabs } from 'solid-repl/src'; -import type { Tab } from 'solid-repl'; +import type { SolidVersion, Tab } from 'solid-repl'; import type { APIRepl } from './home'; import { Header } from '../components/header'; import { Button } from 'solid-repl/src/components/ui/Button'; @@ -24,6 +24,18 @@ function parseHash(hash: string, fallback: T): T { } } +const normalizeSolidVersion = (version: unknown): SolidVersion => (version === 'v2' ? 'v2' : 'v1'); + +const solidWebImport = { + v1: 'solid-js/web', + v2: '@solidjs/web', +} as const; + +const updateSolidWebImport = (source: string, version: SolidVersion) => + source.replace(/from\s+(['"])(solid-js\/web|@solidjs\/web)\1/g, (_match, quote) => { + return `from ${quote}${solidWebImport[version]}${quote}`; + }); + const Repl = lazy(() => import('../components/setupSolid')); window.MonacoEnvironment = { @@ -71,6 +83,7 @@ export const Edit = () => { localStorage.setItem( 'scratchpad', JSON.stringify({ + solidVersion: 'v1', files: initialTabs.map((x) => ({ name: x.name, content: x.source })), }), ); @@ -106,6 +119,8 @@ export const Edit = () => { context.setTabs(tabs); onCleanup(() => context.setTabs(undefined)); + const [solidVersion, trueSetSolidVersion] = createSignal('v1'); + const [current, setCurrent] = createSignal(undefined, { equals: false }); const [resource, { mutate }] = createResource( () => ({ repl: params.repl, scratchpad: !!scratchpad() }), @@ -120,6 +135,7 @@ export const Edit = () => { const myScratchpad = localStorage.getItem('scratchpad'); if (!myScratchpad) { output = { + solidVersion: 'v1', files: defaultTabs.map((x) => ({ name: x.name, content: x.source, @@ -136,6 +152,7 @@ export const Edit = () => { } batch(() => { + trueSetSolidVersion(normalizeSolidVersion(output.solidVersion)); setTabs( output.files.map((x) => { return { name: x.name, source: x.content }; @@ -150,7 +167,14 @@ export const Edit = () => { const reset = () => { batch(() => { - setTabs(mapTabs(defaultTabs)); + setTabs( + mapTabs( + defaultTabs.map((tab) => ({ + ...tab, + source: updateSolidWebImport(tab.source, solidVersion()), + })), + ), + ); setCurrent(defaultTabs[0].name); }); }; @@ -161,6 +185,7 @@ export const Edit = () => { public: true, labels: [] as string[], version: '1.0', + solidVersion: solidVersion(), files: tabs().map((x) => ({ name: x.name, content: x.source })), }; const response = await fetch(`${API}/repl`, { @@ -190,6 +215,7 @@ export const Edit = () => { labels: newRepl.labels, files: newRepl.files, version: newRepl.version, + solidVersion: newRepl.solidVersion, public: newRepl.public, size: 0, created_at: '', @@ -216,7 +242,7 @@ export const Edit = () => { const files = tabs().map((x) => ({ name: x.name, content: x.source })); if (scratchpad()) { - localStorage.setItem('scratchpad', JSON.stringify({ files })); + localStorage.setItem('scratchpad', JSON.stringify({ solidVersion: solidVersion(), files })); } const repl = resource.latest; @@ -235,6 +261,7 @@ export const Edit = () => { ...(localStorage.getItem(params.repl) ? { write_token: localStorage.getItem(params.repl) } : {}), title: repl.title, version: repl.version, + solidVersion: solidVersion(), public: repl.public, labels: repl.labels, files, @@ -245,6 +272,19 @@ export const Edit = () => { !!scratchpad() ? 10 : 1000, ); + const setSolidVersion = (version: SolidVersion) => { + batch(() => { + trueSetSolidVersion(version); + setTabs( + tabs().map((tab) => ({ + name: tab.name, + source: tab.name === 'import_map.json' ? tab.source : updateSolidWebImport(tab.source, version), + })), + ); + }); + updateRepl(); + }; + return ( <>
{ } }} > + { tabs={tabs()} setTabs={setTabs} reset={reset} + solidVersion={solidVersion()} + setSolidVersion={setSolidVersion} current={current()} setCurrent={setCurrent} onUserEdit={onUserEdit} diff --git a/packages/playground/src/pages/home.tsx b/packages/playground/src/pages/home.tsx index cb301b4..6e2a966 100644 --- a/packages/playground/src/pages/home.tsx +++ b/packages/playground/src/pages/home.tsx @@ -7,6 +7,7 @@ import { API, useAppContext } from '../context'; import { Header } from '../components/header'; import { timeAgo } from '../utils/date'; import { Button } from 'solid-repl/src/components/ui/Button'; +import type { SolidVersion } from 'solid-repl'; interface ReplFile { name: string; @@ -18,6 +19,7 @@ export interface APIRepl { labels: string[]; files: ReplFile[]; version: string; + solidVersion?: SolidVersion; public: boolean; size: number; created_at: string; diff --git a/packages/playground/src/types.d.ts b/packages/playground/src/types.d.ts new file mode 100644 index 0000000..b2dada5 --- /dev/null +++ b/packages/playground/src/types.d.ts @@ -0,0 +1,3 @@ +declare module '@amoutonbrady/lz-string' { + export function decompressFromURL(value: string): string | null; +} diff --git a/packages/solid-repl/repl/compiler.ts b/packages/solid-repl/repl/compiler.ts index a40fc69..041add4 100644 --- a/packages/solid-repl/repl/compiler.ts +++ b/packages/solid-repl/repl/compiler.ts @@ -6,20 +6,55 @@ import babelPresetSolid from 'babel-preset-solid'; import dd from 'dedent'; +type SolidVersion = 'v1' | 'v2'; + +const solidPackages = { + v1: { + solid: 'solid-js@1.9.12', + web: 'solid-js@1.9.12/web', + }, + v2: { + solid: 'solid-js@2.0.0-beta.10', + web: '@solidjs/web@2.0.0-beta.10?deps=solid-js@2.0.0-beta.10', + }, +} as const; + +const appendSolidPeer = (url: string, version: SolidVersion) => { + const solid = solidPackages[version].solid; + return `${url}${url.includes('?') ? '&' : '?'}deps=${solid}`; +}; + +const resolveExternal = (importee: string, version: SolidVersion) => { + const packages = solidPackages[version]; + + if (importee === 'solid-js') return `https://esm.sh/${packages.solid}`; + if (importee === 'solid-js/web' || importee === '@solidjs/web') return `https://esm.sh/${packages.web}`; + + if (importee.startsWith('solid-js/')) { + return `https://esm.sh/${packages.solid}/${importee.slice('solid-js/'.length)}`; + } + + if (importee.startsWith('@solidjs/web/')) { + return appendSolidPeer(`https://esm.sh/@solidjs/web@2.0.0-beta.10/${importee.slice('@solidjs/web/'.length)}`, version); + } + + return appendSolidPeer(`https://esm.sh/${importee}`, version); +}; + function uid(str: string) { return Array.from(str) .reduce((s, c) => (Math.imul(31, s) + c.charCodeAt(0)) | 0, 0) .toString(); } -function babelTransform(filename: string, code: string, externals: Record) { +function babelTransform(filename: string, code: string, externals: Record, solidVersion: SolidVersion) { const handleImportee = (node: { value: string } | null | undefined) => { if (!node || typeof node.value !== 'string') return; const importee = node.value; if (importee.startsWith('.')) { node.value = 'solidrepl:' + importee; } else if (!importee.includes('://')) { - if (!(importee in externals)) externals[importee] = `https://esm.sh/${importee}`; + if (!(importee in externals)) externals[importee] = resolveExternal(importee, solidVersion); } }; @@ -54,7 +89,7 @@ function babelTransform(filename: string, code: string, externals: Record): string { +function transformTab(tab: Tab, externals: Record, solidVersion: SolidVersion): string { if (tab.name.endsWith('.css')) { const id = uid(tab.name); return dd` @@ -71,15 +106,15 @@ function transformTab(tab: Tab, externals: Record): string { })() `; } - return babelTransform(tab.name, tab.source, externals); + return babelTransform(tab.name, tab.source, externals, solidVersion); } -function compile(tabs: Tab[], event: string) { +function compile(tabs: Tab[], event: string, solidVersion: SolidVersion) { const externals: Record = {}; const compiled: Record = {}; for (const tab of tabs) { const key = `./${tab.name.replace(/\.(tsx|jsx)$/, '')}`; - compiled[key] = transformTab(tab, externals); + compiled[key] = transformTab(tab, externals, solidVersion); } return { event, compiled, externals }; } @@ -96,13 +131,13 @@ function babel(tab: Tab, compileOpts: any) { } self.addEventListener('message', ({ data }) => { - const { event, tabs, tab, compileOpts } = data; + const { event, tabs, tab, compileOpts, solidVersion = 'v1' } = data; try { if (event === 'BABEL') { self.postMessage(babel(tab, compileOpts)); } else if (event === 'ROLLUP') { - self.postMessage(compile(tabs, event)); + self.postMessage(compile(tabs, event, solidVersion)); } } catch (e) { self.postMessage({ event: 'ERROR', error: e }); diff --git a/packages/solid-repl/src/components/repl.tsx b/packages/solid-repl/src/components/repl.tsx index 626ca5f..f684486 100644 --- a/packages/solid-repl/src/components/repl.tsx +++ b/packages/solid-repl/src/components/repl.tsx @@ -11,7 +11,7 @@ import { IconButton } from './ui/IconButton'; import Editor from './editor'; import type { Repl as ReplProps } from 'solid-repl/dist/repl'; -import type { Tab } from 'solid-repl'; +import type { SolidVersion, Tab } from 'solid-repl'; import { DockviewComponent, Orientation, GroupPanelPartInitParameters, themeAbyssSpaced } from 'dockview-core'; import { insert } from 'solid-js/web'; import { Icon } from 'solid-heroicons'; @@ -29,6 +29,35 @@ const getImportMap = (tabs: Tab[]): Record => { } }; +const solidPackages = { + v1: { + solid: 'solid-js@1.9.12', + web: 'solid-js@1.9.12/web', + }, + v2: { + solid: 'solid-js@2.0.0-beta.10', + web: '@solidjs/web@2.0.0-beta.10?deps=solid-js@2.0.0-beta.10', + }, +} as const; + +const solidCoreImportMap = (version: SolidVersion): Record => { + const packages = solidPackages[version]; + return { + 'solid-js': `https://esm.sh/${packages.solid}`, + 'solid-js/': `https://esm.sh/${packages.solid}/`, + 'solid-js/web': `https://esm.sh/${packages.web}`, + '@solidjs/web': `https://esm.sh/${packages.web}`, + }; +}; + +const withSolidCoreImportMap = (map: Record, version: SolidVersion) => { + const next = { ...map }; + for (const key of ['solid-js', 'solid-js/', 'solid-js/web', '@solidjs/web']) { + delete next[key]; + } + return { ...next, ...solidCoreImportMap(version) }; +}; + export const Repl: ReplProps = (props) => { const { compiler, formatter, linter } = props; let now: number; @@ -62,7 +91,7 @@ export const Repl: ReplProps = (props) => { } if (event === 'ROLLUP') { - const currentMap = { ...importMap() }; + const currentMap = withSolidCoreImportMap(importMap(), props.solidVersion); for (const file in currentMap) { // Catch any `jspm.dev` URLs and migrate them to `esm.sh` if (currentMap[file] === `https://jspm.dev/${file}`) { @@ -80,19 +109,7 @@ export const Repl: ReplProps = (props) => { console.log(`Compilation took: ${performance.now() - now}ms`); batch(() => { - let tab = props.tabs.find((tab) => tab.name === 'import_map.json'); - if (!tab) { - tab = { - name: 'import_map.json', - source: JSON.stringify(currentMap, null, 2), - }; - props.setTabs(props.tabs.concat(tab)); - } else { - tab.source = JSON.stringify(currentMap, null, 2); - const { model } = monacoTabs().get(`file:///${props.id}/import_map.json`)!; - model.setValue(tab.source); - } - + syncImportMapTab(currentMap); setOutput(compiled); setImportMap(currentMap); }); @@ -119,6 +136,7 @@ export const Repl: ReplProps = (props) => { applyRollupCompilation({ event: 'ROLLUP', tabs: unwrap(userTabs()), + solidVersion: props.solidVersion, }); } if (outputVisible() && props.current?.endsWith('.tsx')) { @@ -134,6 +152,7 @@ export const Repl: ReplProps = (props) => { event: 'BABEL', tab: unwrap(props.tabs.find((tab) => tab.name == props.current)), compileOpts, + solidVersion: props.solidVersion, }); } }; @@ -150,6 +169,37 @@ export const Repl: ReplProps = (props) => { const monacoTabs = createMonacoTabs(props.id, () => props.tabs); const currentModel = createMemo(() => monacoTabs().get(`file:///${props.id}/${props.current}`)!.model); + const syncImportMapTab = (map: Record) => { + const source = JSON.stringify(map, null, 2); + let tab = props.tabs.find((tab) => tab.name === 'import_map.json'); + if (!tab) { + tab = { + name: 'import_map.json', + source, + }; + props.setTabs(props.tabs.concat(tab)); + return; + } + + tab.source = source; + const model = monacoTabs().get(`file:///${props.id}/import_map.json`)?.model; + model?.setValue(source); + }; + + let lastSolidVersion = props.solidVersion; + createEffect(() => { + const version = props.solidVersion; + if (version === lastSolidVersion) return; + + lastSolidVersion = version; + const nextImportMap = withSolidCoreImportMap(importMap(), version); + batch(() => { + syncImportMapTab(nextImportMap); + setImportMap(nextImportMap); + }); + compile(); + }); + let ref!: HTMLDivElement; const [reloadSignal] = createSignal(false, { equals: false }); diff --git a/packages/solid-repl/src/components/ui/Menu.tsx b/packages/solid-repl/src/components/ui/Menu.tsx index ddbd507..60d31b0 100644 --- a/packages/solid-repl/src/components/ui/Menu.tsx +++ b/packages/solid-repl/src/components/ui/Menu.tsx @@ -1,4 +1,4 @@ -import { ParentComponent, Component, Show } from 'solid-js'; +import { ParentComponent, Component, Show, type JSX } from 'solid-js'; import { Icon } from 'solid-heroicons'; export interface MenuProps { diff --git a/packages/solid-repl/src/types.d.ts b/packages/solid-repl/src/types.d.ts index 0bc2384..95d9b8f 100644 --- a/packages/solid-repl/src/types.d.ts +++ b/packages/solid-repl/src/types.d.ts @@ -1,4 +1,6 @@ declare module 'solid-repl' { + export type SolidVersion = 'v1' | 'v2'; + export interface Tab { name: string; source: string; @@ -19,6 +21,8 @@ declare module 'solid-repl/dist/repl' { hideDevtools?: boolean; setTabs: (tab: Tab[]) => void; reset: () => void; + solidVersion: import('solid-repl').SolidVersion; + setSolidVersion: (version: import('solid-repl').SolidVersion) => void; current: string | undefined; setCurrent: (tabId: string) => void; onUserEdit?: () => void; @@ -34,6 +38,8 @@ declare module 'solid-repl/dist/repl' { export default Repl; } +declare module '*.css'; + interface Window { MonacoEnvironment: { getWorker: (_moduleId: unknown, label: string) => Worker; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 132819f..573e7fb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -77,6 +77,9 @@ importers: '@babel/types': specifier: ^7.29.0 version: 7.29.0 + '@solidjs/web': + specifier: 2.0.0-beta.10 + version: 2.0.0-beta.10(solid-js@1.9.12) '@types/babel__standalone': specifier: ^7.1.9 version: 7.1.9 @@ -98,6 +101,9 @@ importers: register-service-worker: specifier: ^1.7.2 version: 1.7.2 + solid-js-v2: + specifier: npm:solid-js@2.0.0-beta.10 + version: solid-js@2.0.0-beta.10 typescript: specifier: ^6.0.3 version: 6.0.3 @@ -1367,6 +1373,14 @@ packages: peerDependencies: solid-js: ^1.8.6 + '@solidjs/signals@2.0.0-beta.10': + resolution: {integrity: sha512-McdmbLNiSlz616zcykS8Rb1t9QTOTKdNAoaWd4/OjXEbcAUrPqRX1CWgR+caiWUk4qn0a+LesTTV4jZhFFPaSg==} + + '@solidjs/web@2.0.0-beta.10': + resolution: {integrity: sha512-Ox7MBv19kuxHoHhWoLCCcc6aykSgaqzWvWT7RB66VqlFnQ8Lid2ncd30g5L4XC0GB+MN/WZVb68tiYrAFUDIAg==} + peerDependencies: + solid-js: ^2.0.0-beta.10 + '@tybys/wasm-util@0.10.1': resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==} @@ -2395,6 +2409,9 @@ packages: solid-js@1.9.12: resolution: {integrity: sha512-QzKaSJq2/iDrWR1As6MHZQ8fQkdOBf8GReYb7L5iKwMGceg7HxDcaOHk0at66tNgn9U2U7dXo8ZZpLIAmGMzgw==} + solid-js@2.0.0-beta.10: + resolution: {integrity: sha512-EAfV6b1SC4c3wEBAoX4dMy063uTb4nfL5uXnN8yse4InH7RTw1LoB0I9HAy+pj3/GHqQE2tYZurlZtqU4pGyog==} + solid-refresh@0.6.3: resolution: {integrity: sha512-F3aPsX6hVw9ttm5LYlth8Q15x6MlI/J3Dn+o3EQyRTtTxidepSTwAYdozt01/YA+7ObcciagGEyXIopGZzQtbA==} peerDependencies: @@ -3576,6 +3593,14 @@ snapshots: dependencies: solid-js: 1.9.12 + '@solidjs/signals@2.0.0-beta.10': {} + + '@solidjs/web@2.0.0-beta.10(solid-js@1.9.12)': + dependencies: + seroval: 1.5.2 + seroval-plugins: 1.5.2(seroval@1.5.2) + solid-js: 1.9.12 + '@tybys/wasm-util@0.10.1': dependencies: tslib: 2.8.1 @@ -4750,6 +4775,13 @@ snapshots: seroval: 1.5.2 seroval-plugins: 1.5.2(seroval@1.5.2) + solid-js@2.0.0-beta.10: + dependencies: + '@solidjs/signals': 2.0.0-beta.10 + csstype: 3.2.3 + seroval: 1.5.2 + seroval-plugins: 1.5.2(seroval@1.5.2) + solid-refresh@0.6.3(solid-js@1.9.12): dependencies: '@babel/generator': 7.29.1 From 9126b758b769af6ef3625b3a487143bd348f46f3 Mon Sep 17 00:00:00 2001 From: Brenley Dueck Date: Sat, 9 May 2026 08:03:53 -0500 Subject: [PATCH 2/2] update v2 export config Co-authored-by: Cursor --- packages/playground/src/components/header.tsx | 4 +- packages/playground/src/pages/edit.tsx | 1 + packages/playground/src/utils/exportFiles.tsx | 62 +++++++++++-------- 3 files changed, 40 insertions(+), 27 deletions(-) diff --git a/packages/playground/src/components/header.tsx b/packages/playground/src/components/header.tsx index 0ec2a3b..34fecc8 100644 --- a/packages/playground/src/components/header.tsx +++ b/packages/playground/src/components/header.tsx @@ -8,6 +8,7 @@ import { exportToZip } from '../utils/exportFiles'; import { ZoomDropdown } from './zoomDropdown'; import { API, useAppContext } from '../context'; import { Button, LinkButton } from 'solid-repl/src/components/ui/Button'; +import type { SolidVersion } from 'solid-repl'; import logo from '../assets/logo.svg?url'; @@ -15,6 +16,7 @@ export const Header: ParentComponent<{ compiler?: Worker; fork?: () => void; share: () => Promise; + solidVersion?: SolidVersion; }> = (props) => { const [copy, setCopy] = createSignal(false); const context = useAppContext()!; @@ -79,7 +81,7 @@ export const Header: ParentComponent<{