Skip to content

Commit 7d45737

Browse files
wmertenswmertens
committed
feat(repl): use bundled qwik and prettier versions
1 parent 44c15a8 commit 7d45737

12 files changed

+257
-172
lines changed

‎packages/docs/src/repl/bundled.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { version as qwikVersion } from '../../../qwik';
2+
import buildIndexDts from '../../../qwik/dist/build/index.d.ts?url';
3+
import coreCjs from '../../../qwik/dist/core.cjs?url';
4+
import coreDts from '../../../qwik/dist/core.d.ts?url';
5+
import coreMinMjs from '../../../qwik/dist/core.min.mjs?url';
6+
import coreMjs from '../../../qwik/dist/core.mjs?url';
7+
import jsxRuntimeDts from '../../../qwik/dist/jsx-runtime.d.ts?url';
8+
import optimizerCjs from '../../../qwik/dist/optimizer.cjs?url';
9+
import serverCjs from '../../../qwik/dist/server.cjs?url';
10+
import serverDts from '../../../qwik/dist/server.d.ts?url';
11+
12+
import prettierPkgJson from 'prettier/package.json';
13+
import prettierParserHtml from 'prettier/plugins/html.js?url';
14+
import prettierStandaloneJs from 'prettier/standalone.js?url';
15+
import type { BundledFiles } from './types';
16+
17+
export const bundled: BundledFiles = {
18+
'@builder.io/qwik': {
19+
version: qwikVersion,
20+
'/build/index.d.ts': buildIndexDts,
21+
'/core.cjs': coreCjs,
22+
'/core.d.ts': coreDts,
23+
'/core.min.mjs': coreMinMjs,
24+
'/core.mjs': coreMjs,
25+
'/jsx-runtime.d.ts': jsxRuntimeDts,
26+
'/optimizer.cjs': optimizerCjs,
27+
'/server.cjs': serverCjs,
28+
'/server.d.ts': serverDts,
29+
},
30+
prettier: {
31+
version: prettierPkgJson.version,
32+
'/plugins/html.js': prettierParserHtml,
33+
'/standalone.js': prettierStandaloneJs,
34+
},
35+
};
36+
37+
export const getNpmCdnUrl = (
38+
bundled: BundledFiles,
39+
pkgName: string,
40+
pkgVersion: string,
41+
pkgPath: string
42+
) => {
43+
if (pkgVersion === 'bundled') {
44+
const files = bundled[pkgName];
45+
if (files) {
46+
pkgVersion = files.version;
47+
const url = files[pkgPath];
48+
if (url) {
49+
return url;
50+
}
51+
} else {
52+
// fall back to latest
53+
pkgVersion = '';
54+
}
55+
}
56+
return `https://cdn.jsdelivr.net/npm/${pkgName}${pkgVersion ? '@' + pkgVersion : ''}${pkgPath}`;
57+
};

‎packages/docs/src/repl/editor.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -52,11 +52,11 @@ export const Editor = component$((props: EditorProps) => {
5252
});
5353

5454
useTask$(async ({ track }) => {
55-
track(() => props.input.version);
55+
const v = track(() => props.input.version);
5656
track(() => store.editor);
5757

58-
if (props.input.version && store.editor) {
59-
await addQwikLibs(props.input.version);
58+
if (v && store.editor) {
59+
await addQwikLibs(v);
6060
}
6161
});
6262

‎packages/docs/src/repl/monaco.tsx

+6-15
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import type MonacoTypes from 'monaco-editor';
44
import type { EditorProps, EditorStore } from './editor';
55
import type { ReplStore } from './types';
66
import { getColorPreference } from '../components/theme-toggle/theme-toggle';
7+
import { bundled, getNpmCdnUrl } from './bundled';
78

89
export const initMonacoEditor = async (
910
containerElm: any,
@@ -26,7 +27,6 @@ export const initMonacoEditor = async (
2627
noEmit: true,
2728
skipLibCheck: true,
2829
target: ts.ScriptTarget.Latest,
29-
typeRoots: ['node_modules/@types'],
3030
});
3131

3232
ts.javascriptDefaults.setDiagnosticsOptions({
@@ -199,9 +199,10 @@ export const addQwikLibs = async (version: string) => {
199199

200200
const deps = await loadDeps(version);
201201
deps.forEach((dep) => {
202-
if (dep && typeof dep.code === 'string' && typeof dep.path === 'string') {
202+
if (dep && typeof dep.code === 'string') {
203203
typescriptDefaults.addExtraLib(
204-
`declare module '${dep.pkgName}${dep.import}' { ${dep.code} }`
204+
`declare module '${dep.pkgName}${dep.import}' { ${dep.code} }`,
205+
`/node_modules/${dep.pkgName}${dep.pkgPath}`
205206
);
206207
}
207208
});
@@ -217,31 +218,27 @@ const loadDeps = async (qwikVersion: string) => {
217218
pkgVersion: qwikVersion,
218219
pkgPath: '/core.d.ts',
219220
import: '',
220-
path: '/node_modules/@types/builder.io__qwik/index.d.ts',
221221
},
222222
// JSX runtime
223223
{
224224
pkgName: '@builder.io/qwik',
225225
pkgVersion: qwikVersion,
226226
pkgPath: '/jsx-runtime.d.ts',
227227
import: '/jsx-runtime',
228-
path: '/node_modules/@types/builder.io__qwik/jsx-runtime.d.ts',
229228
},
230229
// server API
231230
{
232231
pkgName: '@builder.io/qwik',
233232
pkgVersion: qwikVersion,
234233
pkgPath: '/server.d.ts',
235234
import: '/server',
236-
path: '/node_modules/@types/builder.io__qwik/server.d.ts',
237235
},
238236
// build constants
239237
{
240238
pkgName: '@builder.io/qwik',
241239
pkgVersion: qwikVersion,
242240
pkgPath: '/build/index.d.ts',
243241
import: '/build',
244-
path: '/node_modules/@types/builder.io__qwik/build/index.d.ts',
245242
},
246243
];
247244

@@ -258,7 +255,6 @@ const loadDeps = async (qwikVersion: string) => {
258255
pkgName: dep.pkgName,
259256
pkgVersion: dep.pkgVersion,
260257
pkgPath: dep.pkgPath,
261-
path: dep.path,
262258
import: dep.import,
263259
};
264260
monacoCtx.deps.push(storedDep);
@@ -278,7 +274,7 @@ const loadDeps = async (qwikVersion: string) => {
278274
};
279275

280276
const fetchDep = async (cache: Cache, dep: NodeModuleDep) => {
281-
const url = getCdnUrl(dep.pkgName, dep.pkgVersion, dep.pkgPath);
277+
const url = getNpmCdnUrl(bundled, dep.pkgName, dep.pkgVersion, dep.pkgPath);
282278
const req = new Request(url);
283279
const cachedRes = await cache.match(req);
284280
if (cachedRes) {
@@ -336,12 +332,8 @@ const monacoCtx: MonacoContext = {
336332
tsWorker: null,
337333
};
338334

339-
const getCdnUrl = (pkgName: string, pkgVersion: string, pkgPath: string) => {
340-
return `https://cdn.jsdelivr.net/npm/${pkgName}@${pkgVersion}${pkgPath}`;
341-
};
342-
343335
const MONACO_VERSION = '0.45.0';
344-
const MONACO_VS_URL = getCdnUrl('monaco-editor', MONACO_VERSION, '/min/vs');
336+
const MONACO_VS_URL = getNpmCdnUrl(bundled, 'monaco-editor', MONACO_VERSION, '/min/vs');
345337
const MONACO_LOADER_URL = `${MONACO_VS_URL}/loader.js`;
346338

347339
const CLIENT_LIB = `
@@ -373,7 +365,6 @@ interface NodeModuleDep {
373365
pkgPath: string;
374366
import: string;
375367
pkgVersion: string;
376-
path: string;
377368
code?: string;
378369
promise?: Promise<void>;
379370
}

‎packages/docs/src/repl/repl-detail-panel.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { bundled } from './bundled';
12
import { ReplConsole } from './repl-console';
23
import { ReplOptions } from './repl-options';
34
import { ReplTabButton } from './repl-tab-button';
@@ -27,7 +28,11 @@ export const ReplDetailPanel = ({ input, store }: ReplDetailPanelProps) => {
2728
<div class="repl-tab">
2829
{store.selectedOutputDetail === 'console' ? <ReplConsole store={store} /> : null}
2930
{store.selectedOutputDetail === 'options' ? (
30-
<ReplOptions input={input} versions={store.versions} />
31+
<ReplOptions
32+
input={input}
33+
versions={store.versions}
34+
qwikVersion={bundled['@builder.io/qwik'].version}
35+
/>
3136
) : null}
3237
</div>
3338
</div>

‎packages/docs/src/repl/repl-options.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { ReplAppInput } from './types';
22

3-
export const ReplOptions = ({ input, versions }: ReplOptionsProps) => {
3+
export const ReplOptions = ({ input, versions, qwikVersion }: ReplOptionsProps) => {
44
return (
55
<div class="output-detail detail-options">
66
<StoreOption
@@ -16,6 +16,7 @@ export const ReplOptions = ({ input, versions }: ReplOptionsProps) => {
1616
label="Version"
1717
inputProp="version"
1818
options={versions}
19+
labels={{ bundled: qwikVersion }}
1920
input={input}
2021
isLoading={versions.length === 0}
2122
/>
@@ -58,7 +59,7 @@ const StoreOption = (props: StoreOptionProps) => {
5859
selected={value === props.input[props.inputProp] ? true : undefined}
5960
key={value}
6061
>
61-
{value}
62+
{props.labels?.[value] || value}
6263
</option>
6364
))}
6465
{props.isLoading ? <option>Loading...</option> : null}
@@ -74,6 +75,7 @@ export const ENTRY_STRATEGY_OPTIONS = ['component', 'hook', 'single', 'smart', '
7475
interface StoreOptionProps {
7576
label: string;
7677
options: string[];
78+
labels?: { [value: string]: string };
7779
input: ReplAppInput;
7880
inputProp: keyof ReplAppInput;
7981
isLoading?: boolean;
@@ -88,4 +90,5 @@ interface StoreBooleanProps {
8890
interface ReplOptionsProps {
8991
input: ReplAppInput;
9092
versions: string[];
93+
qwikVersion: string;
9194
}

‎packages/docs/src/repl/repl-share-url.ts

+5-4
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,8 @@ export const parsePlaygroundShareUrl = (shareable: string) => {
1515
const data = { ...dataDefaults };
1616

1717
const version = params.get('v')! || params.get('version')!;
18-
if (typeof version === 'string' && version.split('.').length > 2) {
19-
data.version = version;
20-
}
18+
data.version =
19+
typeof version === 'string' && version.split('.').length > 2 ? version : 'bundled';
2120

2221
const buildMode = params.get('buildMode')!;
2322
if (BUILD_MODE_OPTIONS.includes(buildMode)) {
@@ -117,7 +116,9 @@ export const dictionary = strToU8(
117116

118117
export const createPlaygroundShareUrl = (data: PlaygroundShareUrl, pathname = '/playground/') => {
119118
const params = new URLSearchParams();
120-
params.set('v', data.version);
119+
if (data.version !== 'bundled') {
120+
params.set('v', data.version);
121+
}
121122
if (data.buildMode !== dataDefaults.buildMode) {
122123
params.set('buildMode', data.buildMode);
123124
}

0 commit comments

Comments
 (0)