Skip to content

Commit ed2c161

Browse files
authored
Merge branch 'main' into fix/RouteLocation-type
2 parents d27021e + 3e6ae16 commit ed2c161

File tree

24 files changed

+1854
-1691
lines changed

24 files changed

+1854
-1691
lines changed

.changeset/heavy-mammals-drop.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@builder.io/qwik': minor
3+
---
4+
5+
feat: the qwikloader can now be inlined again if required (for testing or specific network conditions). Pass `qwikLoader: 'inline'` to the render options.

package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@
149149
"prettier-plugin-tailwindcss": "0.6.14",
150150
"pretty-quick": "4.2.2",
151151
"prompts": "2.4.2",
152-
"rollup": ">= 4.52.0",
152+
"rollup": "4.52.3",
153153
"semver": "7.7.2",
154154
"simple-git-hooks": "2.13.1",
155155
"snoop": "1.0.4",
@@ -164,8 +164,8 @@
164164
"typescript-eslint": "8.38.0",
165165
"undici": "*",
166166
"vfile": "6.0.3",
167-
"vite": "7.1.5",
168-
"vite-imagetools": "7.1.0",
167+
"vite": "7.1.7",
168+
"vite-imagetools": "8.0.0",
169169
"vite-plugin-dts": "3.9.1",
170170
"vite-tsconfig-paths": "5.1.4",
171171
"vitest": "3.2.4",

packages/docs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
"typescript": "5.4.5",
5656
"undici": "*",
5757
"valibot": "0.33.3",
58-
"vite": "7.1.5",
58+
"vite": "7.1.7",
5959
"vite-plugin-inspect": "11.3.2",
6060
"vite-tsconfig-paths": "5.1.4",
6161
"wrangler": "3.65.1"

packages/docs/src/repl/bundler/rollup-plugins.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const replResolver = (
4242
}
4343
return {
4444
// Make sure this matches the regexes in manifest.ts
45-
id: `/node_modules/@qwik.dev/core${id}`,
45+
id: `/qwik${id}`,
4646
sideEffects: false,
4747
// It would be nice to load qwik as external, but
4848
// we import core and core/build so we need processing
@@ -59,15 +59,16 @@ export const replResolver = (
5959
if (id.startsWith('http')) {
6060
return { id, external: true };
6161
}
62-
if (id.startsWith('/node_modules/@qwik.dev/core/')) {
62+
// re-resolve
63+
if (id.startsWith('/qwik/')) {
6364
return id;
6465
}
6566
const match = id.match(/(@builder\.io\/qwik|@qwik\.dev\/core)(.*)/);
6667
if (match) {
6768
const pkgName = match[2];
6869

6970
if (pkgName === '/build') {
70-
return `/node_modules/@qwik.dev/core/build`;
71+
return `/qwik/build`;
7172
}
7273
if (!pkgName || pkgName === '/jsx-runtime' || pkgName === '/jsx-dev-runtime') {
7374
return resolveQwik('/dist/core.mjs');
@@ -108,8 +109,8 @@ export const replResolver = (
108109
if (input && typeof input.code === 'string') {
109110
return input.code;
110111
}
111-
if (id.startsWith('/node_modules/@qwik.dev/core/')) {
112-
const path = id.slice('/node_modules/@qwik.dev/core'.length);
112+
if (id.startsWith('/qwik/')) {
113+
const path = id.slice('/qwik'.length);
113114
if (path === '/build') {
114115
// Virtual module for Qwik build
115116
const isDev = options.buildMode === 'development';
Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,2 @@
11
export const QWIK_PKG_NAME_V1 = '@builder.io/qwik';
22
export const QWIK_PKG_NAME_V2 = '@qwik.dev/core';
3-
4-
export const QWIK_REPL_DEPS_CACHE = 'QwikReplDeps';
5-
export const QWIK_REPL_RESULT_CACHE = 'QwikReplResults';

packages/docs/src/repl/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export interface SSRErrorMessage {
125125
export type OutputPanel =
126126
| 'app'
127127
| 'html'
128-
| 'symbols'
128+
| 'segments'
129129
| 'clientBundles'
130130
| 'serverModules'
131131
| 'diagnostics';

packages/docs/src/repl/ui/repl-output-panel.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { component$ } from '@builder.io/qwik';
22
import { CodeBlock } from '../../components/code-block/code-block';
33
import type { ReplAppInput, ReplStore } from '../types';
44
import { ReplOutputModules } from './repl-output-modules';
5-
import { ReplOutputSymbols } from './repl-output-symbols';
5+
import { ReplOutputSymbols } from './repl-output-segments';
66
import { ReplTabButton } from './repl-tab-button';
77
import { ReplTabButtons } from './repl-tab-buttons';
88

@@ -32,10 +32,10 @@ export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProp
3232

3333
{store.enableClientOutput ? (
3434
<ReplTabButton
35-
text="Symbols"
36-
isActive={store.selectedOutputPanel === 'symbols'}
35+
text="Segments"
36+
isActive={store.selectedOutputPanel === 'segments'}
3737
onClick$={async () => {
38-
store.selectedOutputPanel = 'symbols';
38+
store.selectedOutputPanel = 'segments';
3939
}}
4040
/>
4141
) : null}
@@ -115,7 +115,7 @@ export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProp
115115
</div>
116116
) : null}
117117

118-
{store.selectedOutputPanel === 'symbols' ? (
118+
{store.selectedOutputPanel === 'segments' ? (
119119
<ReplOutputSymbols outputs={store.transformedModules} />
120120
) : null}
121121

packages/docs/src/repl/ui/repl-output-symbols.tsx renamed to packages/docs/src/repl/ui/repl-output-segments.tsx

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import { CodeBlock } from '../../components/code-block/code-block';
33
import { $, component$, useSignal } from '@builder.io/qwik';
44
const FILE_MODULE_DIV_ID = 'file-modules-symbol';
55

6+
type TransformModuleV2 = TransformModule & {
7+
segment?: { canonicalFilename: string; paramNames: string[]; captureNames: string[] };
8+
};
9+
610
export const ReplOutputSymbols = component$(({ outputs }: ReplOutputSymbolsProps) => {
711
const selectedPath = useSignal(outputs.length ? outputs[0].path : '');
812
const pathInView$ = $((path: string) => {
@@ -14,7 +18,7 @@ export const ReplOutputSymbols = component$(({ outputs }: ReplOutputSymbolsProps
1418
return (
1519
<div class="output-result output-modules">
1620
<div class="file-tree">
17-
<div class="file-tree-header">Symbols</div>
21+
<div class="file-tree-header">Segments</div>
1822
<div class="file-tree-items">
1923
{segments.map((o, i) => (
2024
<div key={o.path}>
@@ -38,10 +42,20 @@ export const ReplOutputSymbols = component$(({ outputs }: ReplOutputSymbolsProps
3842
</div>
3943
</div>
4044
<div class="file-modules" id={FILE_MODULE_DIV_ID}>
41-
{segments.map((o, i) => (
45+
{(segments as TransformModuleV2[]).map((o, i) => (
4246
<div class="file-item" data-symbol-item={i} key={o.path}>
4347
<div class="file-info">
4448
<span>{o.segment?.canonicalFilename}</span>
49+
{o.segment!.paramNames && (
50+
<div>
51+
Params: <code>{o.segment!.paramNames.join(', ')}</code>
52+
</div>
53+
)}
54+
{o.segment!.captureNames && (
55+
<div>
56+
Captures: <code>{o.segment!.captureNames.join(', ')}</code>
57+
</div>
58+
)}
4559
</div>
4660
<div class="file-text">
4761
<CodeBlock

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,10 @@ export const strToFiles = (str: string) => {
8585
// You can add new entries to the beginning though.
8686
export const dictionary = strToU8(
8787
filesToStr([
88+
{
89+
path: '/app.tsx',
90+
code: `import { component$ } from '@qwik.dev/core';\n\nexport default component$(() => {\n return (\n <div>\n <h1>Hello from Qwik!</h1>\n </div>\n );\n`,
91+
},
8892
{
8993
path: '',
9094
// Extra words to help with compression
@@ -98,7 +102,7 @@ export const dictionary = strToU8(
98102
// You need to add a new section like this before this section instead
99103
code: `<div> </div> </button> props: class return ( story component$( store string state export const span type href={ page strong count useSignal< useStore< qwik import { } from searchInput console.log( searchResults builder useTask$( stories style={ news export default data </article> track onClick$= new nav map link debounced controller user useStyles$( useStylesScoped$( url title timeoutId time_ago second response Date.now() minute main item interface hour disabled aria any State update transform the target suggestion setTimeout selectedValue rotate render people number list label https:// header deg debouncedGetPeople debounce component comments_count comments clock background await new Promise args SuggestionsListComponent IStory IState IComment GrandChild Clock Child AutoComplete 360 yellow with view useVisibleTask$( true tmrId timer then swapi styles signal section search results resolve rel prev points parsedResponse null noreferrer name more length json job items isServer index github getPeople function fetch example domain dev delay css container com click clearTimeout async api _blank Star Wars API This The StoryPreview Stories ReturnType Qwik App Page Nav HackerNewsCSS AbortController server$( routeAction$( routeLoader$( useContent( useDocumentHead( useLocation( useNavigate( validator$( zod$( noSerialize( </Slot> useComputed$( useOnDocument( useOnWindow( useResource$( useContext( useContextProvider( createContextId<`,
100104
},
101-
// The default hello world app + supporting files
105+
// The old default hello world app + supporting files
102106
{
103107
path: '/app.tsx',
104108
code: `import { component$ } from '@builder.io/qwik';\n\nexport default component$(() => {\n return <p>Hello Qwik</p>;\n});\n`,
@@ -168,6 +172,7 @@ export function parseCompressedFiles(filesBase64: string) {
168172
const filesBuf = inflateSync(compressedUint8Array, { dictionary });
169173
filesStr = strFromU8(filesBuf);
170174
} catch (error) {
175+
console.error('Could not decode URL, falling back to uncompressed');
171176
// Treat string as not compressed
172177
filesStr = decodeURIComponent(encoded);
173178
}

packages/docs/src/repl/ui/repl-share-url.unit.ts

Lines changed: 88 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
import { assert, test } from 'vitest';
1+
import { strFromU8 } from 'fflate';
2+
import { assert, expect, test } from 'vitest';
23
import {
3-
filesToStr,
4-
strToFiles,
5-
createPlaygroundShareUrl,
64
compressFiles,
7-
parseCompressedFiles,
5+
createPlaygroundShareUrl,
86
dictionary,
7+
filesToStr,
8+
parseCompressedFiles,
9+
parsePlaygroundShareUrl,
10+
strToFiles,
911
} from './repl-share-url';
10-
import { strFromU8 } from 'fflate';
1112

1213
const data = {
1314
version: '1.2.3',
@@ -64,8 +65,86 @@ test('createPlaygroundShareUrl 2', () => {
6465
});
6566

6667
test('dictionary is unchanged', () => {
67-
assert.equal(
68-
strFromU8(dictionary),
69-
"0||1448|<div> </div> </button> props: class return ( story component$( store string state export const span type href={ page strong count useSignal< useStore< qwik import { } from searchInput console.log( searchResults builder useTask$( stories style={ news export default data </article> track onClick$= new nav map link debounced controller user useStyles$( useStylesScoped$( url title timeoutId time_ago second response Date.now() minute main item interface hour disabled aria any State update transform the target suggestion setTimeout selectedValue rotate render people number list label https:// header deg debouncedGetPeople debounce component comments_count comments clock background await new Promise args SuggestionsListComponent IStory IState IComment GrandChild Clock Child AutoComplete 360 yellow with view useVisibleTask$( true tmrId timer then swapi styles signal section search results resolve rel prev points parsedResponse null noreferrer name more length json job items isServer index github getPeople function fetch example domain dev delay css container com click clearTimeout async api _blank Star Wars API This The StoryPreview Stories ReturnType Qwik App Page Nav HackerNewsCSS AbortController server$( routeAction$( routeLoader$( useContent( useDocumentHead( useLocation( useNavigate( validator$( zod$( noSerialize( </Slot> useComputed$( useOnDocument( useOnWindow( useResource$( useContext( useContextProvider( createContextId<|8|/app.tsx|114|import { component$ } from '@builder.io/qwik';\n\nexport default component$(() => {\n return <p>Hello Qwik</p>;\n});\n|17|/entry.server.tsx|201|import { renderToString, type RenderOptions } from '@builder.io/qwik/server';\nimport { Root } from './root';\n\nexport default function (opts: RenderOptions) {\n return renderToString(<Root />, opts);\n}\n|9|/root.tsx|192|import App from './app';\n\nexport const Root = () => {\n return (\n <>\n <head>\n <title>Hello Qwik</title>\n </head>\n <body>\n <App />\n </body>\n </>\n );\n};\n"
68+
const dictionaryAsString = strFromU8(dictionary);
69+
// !!! THIS DICTIONARY MUST NEVER CHANGE - ONLY ALLOW PREPENDING !!!
70+
expect(dictionaryAsString).toMatchInlineSnapshot(`
71+
"8|/app.tsx|149|import { component$ } from '@qwik.dev/core';
72+
73+
export default component$(() => {
74+
return (
75+
<div>
76+
<h1>Hello from Qwik!</h1>
77+
</div>
78+
);
79+
|0||1448|<div> </div> </button> props: class return ( story component$( store string state export const span type href={ page strong count useSignal< useStore< qwik import { } from searchInput console.log( searchResults builder useTask$( stories style={ news export default data </article> track onClick$= new nav map link debounced controller user useStyles$( useStylesScoped$( url title timeoutId time_ago second response Date.now() minute main item interface hour disabled aria any State update transform the target suggestion setTimeout selectedValue rotate render people number list label https:// header deg debouncedGetPeople debounce component comments_count comments clock background await new Promise args SuggestionsListComponent IStory IState IComment GrandChild Clock Child AutoComplete 360 yellow with view useVisibleTask$( true tmrId timer then swapi styles signal section search results resolve rel prev points parsedResponse null noreferrer name more length json job items isServer index github getPeople function fetch example domain dev delay css container com click clearTimeout async api _blank Star Wars API This The StoryPreview Stories ReturnType Qwik App Page Nav HackerNewsCSS AbortController server$( routeAction$( routeLoader$( useContent( useDocumentHead( useLocation( useNavigate( validator$( zod$( noSerialize( </Slot> useComputed$( useOnDocument( useOnWindow( useResource$( useContext( useContextProvider( createContextId<|8|/app.tsx|114|import { component$ } from '@builder.io/qwik';
80+
81+
export default component$(() => {
82+
return <p>Hello Qwik</p>;
83+
});
84+
|17|/entry.server.tsx|201|import { renderToString, type RenderOptions } from '@builder.io/qwik/server';
85+
import { Root } from './root';
86+
87+
export default function (opts: RenderOptions) {
88+
return renderToString(<Root />, opts);
89+
}
90+
|9|/root.tsx|192|import App from './app';
91+
92+
export const Root = () => {
93+
return (
94+
<>
95+
<head>
96+
<title>Hello Qwik</title>
97+
</head>
98+
<body>
99+
<App />
100+
</body>
101+
</>
102+
);
103+
};
104+
"
105+
`);
106+
});
107+
108+
test('previous URLs still work', () => {
109+
expect(parsePlaygroundShareUrl('f=G000o4mG5EQDAA')).toHaveProperty(
110+
'files',
111+
// DO NOT UPDATE THIS TEST - all these URLs must work forever
112+
expect.arrayContaining([
113+
expect.objectContaining({
114+
path: '/app.tsx',
115+
code: "import { component$ } from '@builder.io/qwik';\n\nexport default component$(() => {\n return <p>Hello Qwik</p>;\n});\n",
116+
}),
117+
])
118+
);
119+
expect(
120+
parsePlaygroundShareUrl(
121+
'f=Q0o0xgaW2BKNDrDkqNCB15QUpyFIgKTl51uBeGA%2BKO%2BBIwaW0W1A6SI%2FDWQzyKm1wKBDVwyU0lAqUNJRqE4GFc3AqLNSCnENDlGq1QTpAGJ43a5RDa6oa0FOgBsDbxkAXQIMCqAWMIktXqqBSvRgNoNMRg7C0XQ%2FJNM9AA'
122+
)
123+
).toHaveProperty(
124+
'files',
125+
// DO NOT UPDATE THIS TEST - all these URLs must work forever
126+
expect.arrayContaining([
127+
expect.objectContaining({
128+
path: '/app.tsx',
129+
code: `import { component$, jsx, useTask$ } from '@builder.io/qwik';
130+
131+
export default component$(() => {
132+
const foo:{
133+
contents: ReturnType<typeof jsx>
134+
} = {
135+
contents: jsx("p", {children:"TEST"})
136+
}
137+
useTask$(({track}) =>{
138+
console.log(foo);
139+
});
140+
return (
141+
<>
142+
{foo.contents}
143+
</>
144+
);
145+
});
146+
`,
147+
}),
148+
])
70149
);
71150
});

0 commit comments

Comments
 (0)