diff --git a/packages/docs/src/components/repl/repl-version.ts b/packages/docs/src/components/repl/repl-version.ts index a606c10477a..468e883a800 100644 --- a/packages/docs/src/components/repl/repl-version.ts +++ b/packages/docs/src/components/repl/repl-version.ts @@ -21,7 +21,7 @@ export const getReplVersion = async (version: string | undefined) => { if (v === version) { return true; } - if ((npmData?.tags.latest === v || npmData?.tags.next) === v) { + if (npmData?.tags.latest === v || npmData?.tags.next === v) { return true; } if (v.includes('-')) { diff --git a/packages/docs/src/components/repl/repl.tsx b/packages/docs/src/components/repl/repl.tsx index 2f5914cddfd..9d06a7f62ba 100644 --- a/packages/docs/src/components/repl/repl.tsx +++ b/packages/docs/src/components/repl/repl.tsx @@ -80,16 +80,9 @@ export const Repl = component$(async (props: ReplProps) => { const v = await getReplVersion(input.version); if (v.version) { - let serverUrl = `/repl/repl-server`; - - if (location.hostname === 'localhost') { - serverUrl += `.html`; - } - serverUrl += `#${store.clientId}`; - store.versions = v.versions; input.version = v.version; - store.serverUrl = serverUrl; + store.serverUrl = `/repl/repl-server.html#${store.clientId}`; window.addEventListener('message', (ev) => receiveMessageFromReplServer(ev, store)); } diff --git a/packages/docs/src/components/repl/worker/repl-server.ts b/packages/docs/src/components/repl/worker/repl-server.ts new file mode 100644 index 00000000000..f6d78ded04f --- /dev/null +++ b/packages/docs/src/components/repl/worker/repl-server.ts @@ -0,0 +1,5 @@ +/** + * Generated at build time. + */ +const replServerHtml = ''; +export default replServerHtml; diff --git a/packages/docs/src/entry.cloudflare.tsx b/packages/docs/src/entry.cloudflare.tsx index 4edca0ba6ce..95c58424eb3 100644 --- a/packages/docs/src/entry.cloudflare.tsx +++ b/packages/docs/src/entry.cloudflare.tsx @@ -1,4 +1,5 @@ import { render } from './entry.ssr'; +import replServerHtml from '@repl-server-html'; export const onRequestGet: PagesFunction = async ({ request, next, waitUntil }) => { try { @@ -24,8 +25,16 @@ export const onRequestGet: PagesFunction = async ({ request, next, waitUntil }) return Response.redirect('https://discord.gg/bNVSQmPzqy'); } + if (url.pathname.endsWith('/repl-server.html')) { + return new Response(replServerHtml, { + headers: { + 'Content-Type': 'text/html; charset=utf-8', + }, + }); + } + // Handle static assets - if (/\.\w+$/.test(url.pathname) || url.pathname.endsWith('/repl-server')) { + if (/\.\w+$/.test(url.pathname)) { return next(request); } diff --git a/packages/docs/src/layouts/examples/examples-data.ts b/packages/docs/src/layouts/examples/examples-data.ts index d93f8ae5fcb..27d2b766f4b 100644 --- a/packages/docs/src/layouts/examples/examples-data.ts +++ b/packages/docs/src/layouts/examples/examples-data.ts @@ -14,7 +14,9 @@ export interface ExampleApp { inputs: ReplModuleInput[]; } -// generated at build-time -// see /docs/pages/examples/examples-menu.json +/** + * Generated at build-time. + * See /docs/pages/examples/examples-menu.json + */ const exampleSections: ExampleSection[] = []; export default exampleSections; diff --git a/packages/docs/src/layouts/playground/playground-data.ts b/packages/docs/src/layouts/playground/playground-data.ts index 4677195366e..31163cf6d86 100644 --- a/packages/docs/src/layouts/playground/playground-data.ts +++ b/packages/docs/src/layouts/playground/playground-data.ts @@ -4,6 +4,9 @@ export interface PlaygroundApp { inputs: ReplModuleInput[]; } -// generated at build-time +/** + * Generated at build-time. + * See packages/docs/pages/playground/app + */ const playgroundApp: PlaygroundApp = {} as any; export default playgroundApp; diff --git a/packages/docs/src/layouts/tutorial/tutorial-data.ts b/packages/docs/src/layouts/tutorial/tutorial-data.ts index 662ad63897c..b28633d3a82 100644 --- a/packages/docs/src/layouts/tutorial/tutorial-data.ts +++ b/packages/docs/src/layouts/tutorial/tutorial-data.ts @@ -16,7 +16,9 @@ export interface TutorialApp { enableSsrOutput?: boolean; } -// generated at build-time -// see /docs/pages/tutorial/tutorial-menu.json +/** + * Generated at build-time. + * See /docs/pages/tutorial/tutorial-menu.json + */ const tutorialSections: TutorialSection[] = []; export default tutorialSections; diff --git a/packages/docs/vite.config.ts b/packages/docs/vite.config.ts index e2fac314b65..05b9e7e2565 100644 --- a/packages/docs/vite.config.ts +++ b/packages/docs/vite.config.ts @@ -4,7 +4,7 @@ import { resolve } from 'path'; import { qwikCity } from '@builder.io/qwik-city/vite'; import { partytownVite } from '@builder.io/partytown/utils'; import { examplesData, playgroundData, tutorialData } from './vite.repl-apps'; -import { replServiceWorker } from './vite.repl-worker'; +import { replServerHtml, replServiceWorker } from './vite.repl-worker'; export default defineConfig(() => { const pagesDir = resolve('pages'); @@ -36,6 +36,7 @@ export default defineConfig(() => { partytownVite({ dest: resolve('dist', '~partytown'), }), + replServerHtml(), examplesData(pagesDir), playgroundData(pagesDir), tutorialData(pagesDir), diff --git a/packages/docs/vite.repl-worker.ts b/packages/docs/vite.repl-worker.ts index 36c07c1956a..dd64771341a 100644 --- a/packages/docs/vite.repl-worker.ts +++ b/packages/docs/vite.repl-worker.ts @@ -72,3 +72,27 @@ export function replServiceWorker(): Plugin { }, }; } + +export function replServerHtml(): Plugin { + return { + name: 'replServiceWorker', + + resolveId(id) { + if (id === '@repl-server-html') { + return '\0@repl-server-html'; + } + return null; + }, + + load(id) { + if (id === '\0@repl-server-html') { + const srcReplServerHtml = resolve('public', 'repl', 'repl-server.html'); + const replServerHtml = readFileSync(srcReplServerHtml, 'utf-8'); + return `const replServerHtml = ${JSON.stringify( + replServerHtml + )}; export default replServerHtml;`; + } + return null; + }, + }; +} diff --git a/tsconfig.json b/tsconfig.json index e62e55d8426..ce2a148c100 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -29,6 +29,7 @@ "@playground-data": ["packages/docs/src/layouts/playground/playground-data.ts"], "@qwik-client-manifest": ["packages/qwik/src/server/server-modules.d.ts"], "@tutorial-data": ["packages/docs/src/layouts/tutorial/tutorial-data.ts"], + "@repl-server-html": ["packages/docs/src/components/repl/worker/repl-server.ts"], "create-qwik": ["packages/create-qwik/api/index.ts"] }, "types": ["jest", "node", "vite/client", "@cloudflare/workers-types"],