Skip to content

Commit f72fda5

Browse files
wmertenswmertens
authored
Merge pull request #7037 from QwikDev/fix-dev
fix(dev): let vite do all dev url handling
2 parents da725e9 + 546d3b0 commit f72fda5

File tree

15 files changed

+190
-147
lines changed

15 files changed

+190
-147
lines changed

‎.changeset/late-bugs-visit.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@builder.io/qwik': patch
3+
---
4+
5+
FIX: dev-mode QRL paths are now handled by Vite so they are the same as the parent paths. You can see this in the Sources section of the browser devtools, where the segments are now always next to their parents (when the parent is loaded).

‎packages/docs/src/routes/api/qwik-optimizer/api.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -796,7 +796,7 @@
796796
}
797797
],
798798
"kind": "Interface",
799-
"content": "```typescript\nexport interface TransformModuleInput \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[code](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[path](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>",
799+
"content": "```typescript\nexport interface TransformModuleInput \n```\n\n\n<table><thead><tr><th>\n\nProperty\n\n\n</th><th>\n\nModifiers\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\n[code](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\n[devPath?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[path](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>",
800800
"editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts",
801801
"mdFile": "qwik.transformmoduleinput.md"
802802
},

‎packages/docs/src/routes/api/qwik-optimizer/index.md

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3149,6 +3149,21 @@ string
31493149
</td></tr>
31503150
<tr><td>
31513151

3152+
[devPath?](#)
3153+
3154+
</td><td>
3155+
3156+
</td><td>
3157+
3158+
string
3159+
3160+
</td><td>
3161+
3162+
_(Optional)_
3163+
3164+
</td></tr>
3165+
<tr><td>
3166+
31523167
[path](#)
31533168

31543169
</td><td>

‎packages/docs/src/routes/api/qwik/api.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1760,7 +1760,7 @@
17601760
}
17611761
],
17621762
"kind": "Function",
1763-
"content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\nLoad the prefetch graph for the container.\n\nEach Qwik container needs to include its own prefetch graph.\n\n\n```typescript\nPrefetchGraph: (opts?: {\n base?: string;\n manifestHash?: string;\n manifestURL?: string;\n nonce?: string;\n}) => JSXNode<\"script\">\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nopts\n\n\n</td><td>\n\n{ base?: string; manifestHash?: string; manifestURL?: string; nonce?: string; }\n\n\n</td><td>\n\n_(Optional)_ Options for the loading prefetch graph.\n\n- `base` - Base of the graph. For a default installation this will default to the q:base value `/build/`<!-- -->. But if more than one MFE is installed on the page, then each MFE needs to have its own base. - `manifestHash` - Hash of the manifest file to load. If not provided the hash will be extracted from the container attribute `q:manifest-hash` and assume the default build file `${base}/q-bundle-graph-${manifestHash}.json`<!-- -->. - `manifestURL` - URL of the manifest file to load if non-standard bundle graph location name.\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\n[JSXNode](#jsxnode)<!-- -->&lt;\"script\"&gt;",
1763+
"content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\nLoad the prefetch graph for the container.\n\nEach Qwik container needs to include its own prefetch graph.\n\n\n```typescript\nPrefetchGraph: (opts?: {\n base?: string;\n manifestHash?: string;\n manifestURL?: string;\n nonce?: string;\n}) => JSXNode<\"script\">\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nopts\n\n\n</td><td>\n\n{ base?: string; manifestHash?: string; manifestURL?: string; nonce?: string; }\n\n\n</td><td>\n\n_(Optional)_ Options for the loading prefetch graph.\n\n- `base` - Base of the graph. For a default installation this will default to the q:base value `/build/`<!-- -->. But if more than one MFE is installed on the page, then each MFE needs to have its own base. - `manifestHash` - Hash of the manifest file to load. If not provided the hash will be extracted from the container attribute `q:manifest-hash` and assume the default build file `${base}/q-bundle-graph-${manifestHash}.json`<!-- -->. - `manifestURL` - URL of the manifest file to load if non-standard bundle graph location name.\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\nJSXNode&lt;\"script\"&gt;",
17641764
"editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts",
17651765
"mdFile": "qwik.prefetchgraph.md"
17661766
},
@@ -1774,7 +1774,7 @@
17741774
}
17751775
],
17761776
"kind": "Function",
1777-
"content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\nInstall a service worker which will prefetch the bundles.\n\nThere can only be one service worker per page. Because there can be many separate Qwik Containers on the page each container needs to load its prefetch graph using `PrefetchGraph` component.\n\n\n```typescript\nPrefetchServiceWorker: (opts: {\n base?: string;\n scope?: string;\n path?: string;\n verbose?: boolean;\n fetchBundleGraph?: boolean;\n nonce?: string;\n}) => JSXNode<'script'>\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nopts\n\n\n</td><td>\n\n{ base?: string; scope?: string; path?: string; verbose?: boolean; fetchBundleGraph?: boolean; nonce?: string; }\n\n\n</td><td>\n\nOptions for the prefetch service worker.\n\n- `base` - Base URL for the service worker `import.meta.env.BASE_URL` or `/`<!-- -->. Default is `import.meta.env.BASE_URL` - `scope` - Base URL for when the service-worker will activate. Default is `/` - `path` - Path to the service worker. Default is `qwik-prefetch-service-worker.js` unless you pass a path that starts with a `/` then the base is ignored. Default is `qwik-prefetch-service-worker.js` - `verbose` - Verbose logging for the service worker installation. Default is `false` - `nonce` - Optional nonce value for security purposes, defaults to `undefined`<!-- -->.\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\n[JSXNode](#jsxnode)<!-- -->&lt;'script'&gt;",
1777+
"content": "> This API is provided as an alpha preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.\n> \n\nInstall a service worker which will prefetch the bundles.\n\nThere can only be one service worker per page. Because there can be many separate Qwik Containers on the page each container needs to load its prefetch graph using `PrefetchGraph` component.\n\n\n```typescript\nPrefetchServiceWorker: (opts: {\n base?: string;\n scope?: string;\n path?: string;\n verbose?: boolean;\n fetchBundleGraph?: boolean;\n nonce?: string;\n}) => JSXNode<'script'>\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nopts\n\n\n</td><td>\n\n{ base?: string; scope?: string; path?: string; verbose?: boolean; fetchBundleGraph?: boolean; nonce?: string; }\n\n\n</td><td>\n\nOptions for the prefetch service worker.\n\n- `base` - Base URL for the service worker `import.meta.env.BASE_URL` or `/`<!-- -->. Default is `import.meta.env.BASE_URL` - `scope` - Base URL for when the service-worker will activate. Default is `/` - `path` - Path to the service worker. Default is `qwik-prefetch-service-worker.js` unless you pass a path that starts with a `/` then the base is ignored. Default is `qwik-prefetch-service-worker.js` - `verbose` - Verbose logging for the service worker installation. Default is `false` - `nonce` - Optional nonce value for security purposes, defaults to `undefined`<!-- -->.\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\nJSXNode&lt;'script'&gt;",
17781778
"editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts",
17791779
"mdFile": "qwik.prefetchserviceworker.md"
17801780
},
@@ -3034,7 +3034,7 @@
30343034
}
30353035
],
30363036
"kind": "Function",
3037-
"content": "Hook that returns a read-only signal that updates when signals used in the `ComputedFn` change.\n\n\n```typescript\nuseComputed$: <T>(qrl: ComputedFn<T>) => Signal<Awaited<T>>\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nqrl\n\n\n</td><td>\n\n[ComputedFn](#computedfn)<!-- -->&lt;T&gt;\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\n[Signal](#signal)<!-- -->&lt;Awaited&lt;T&gt;&gt;",
3037+
"content": "Returns a computed signal which is calculated from the given function. A computed signal is a signal which is calculated from other signals. When the signals change, the computed signal is recalculated, and if the result changed, all tasks which are tracking the signal will be re-run and all components that read the signal will be re-rendered.\n\nThe function must be synchronous and must not have any side effects.\n\nAsync functions are deprecated because:\n\n- When calculating the first time, it will see it's a promise and it will restart the render function. - Qwik can't track used signals after the first await, which leads to subtle bugs. - Both `useTask$` and `useResource$` are available, without these problems.\n\nIn v2, async functions won't work.\n\n\n```typescript\nuseComputed$: <T>(qrl: ComputedFn<T>) => Signal<Awaited<T>>\n```\n\n\n<table><thead><tr><th>\n\nParameter\n\n\n</th><th>\n\nType\n\n\n</th><th>\n\nDescription\n\n\n</th></tr></thead>\n<tbody><tr><td>\n\nqrl\n\n\n</td><td>\n\n[ComputedFn](#computedfn)<!-- -->&lt;T&gt;\n\n\n</td><td>\n\n\n</td></tr>\n</tbody></table>\n**Returns:**\n\n[Signal](#signal)<!-- -->&lt;Awaited&lt;T&gt;&gt;",
30383038
"editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts",
30393039
"mdFile": "qwik.usecomputed_.md"
30403040
},

‎packages/docs/src/routes/api/qwik/index.md

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3625,7 +3625,7 @@ _(Optional)_ Options for the loading prefetch graph.
36253625
</tbody></table>
36263626
**Returns:**
36273627
3628-
[JSXNode](#jsxnode)&lt;"script"&gt;
3628+
JSXNode&lt;"script"&gt;
36293629
36303630
[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts)
36313631
@@ -3679,7 +3679,7 @@ Options for the prefetch service worker.
36793679
</tbody></table>
36803680
**Returns:**
36813681
3682-
[JSXNode](#jsxnode)&lt;'script'&gt;
3682+
JSXNode&lt;'script'&gt;
36833683
36843684
[Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts)
36853685
@@ -10160,7 +10160,15 @@ T
1016010160
1016110161
## useComputed$
1016210162
10163-
Hook that returns a read-only signal that updates when signals used in the `ComputedFn` change.
10163+
Returns a computed signal which is calculated from the given function. A computed signal is a signal which is calculated from other signals. When the signals change, the computed signal is recalculated, and if the result changed, all tasks which are tracking the signal will be re-run and all components that read the signal will be re-rendered.
10164+
10165+
The function must be synchronous and must not have any side effects.
10166+
10167+
Async functions are deprecated because:
10168+
10169+
- When calculating the first time, it will see it's a promise and it will restart the render function. - Qwik can't track used signals after the first await, which leads to subtle bugs. - Both `useTask$` and `useResource$` are available, without these problems.
10170+
10171+
In v2, async functions won't work.
1016410172
1016510173
```typescript
1016610174
useComputed$: <T>(qrl: ComputedFn<T>) => Signal<Awaited<T>>;

‎packages/qwik/src/optimizer/core/src/lib.rs

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@ pub struct TransformFsOptions {
8282
#[serde(rename_all = "camelCase")]
8383
pub struct TransformModuleInput {
8484
pub path: String,
85+
pub dev_path: Option<String>,
8586
pub code: String,
8687
}
8788

@@ -137,6 +138,7 @@ pub fn transform_fs(config: TransformFsOptions) -> Result<TransformOutput, Error
137138
src_dir,
138139
root_dir,
139140
relative_path: relative_path.to_str().unwrap(),
141+
dev_path: None,
140142
minify: config.minify,
141143
code: &code,
142144
explicit_extensions: config.explicit_extensions,
@@ -172,17 +174,19 @@ pub fn transform_modules(config: TransformModulesOptions) -> Result<TransformOut
172174
let root_dir = config.root_dir.as_ref().map(Path::new);
173175

174176
let entry_policy = &*parse_entry_strategy(&config.entry_strategy, config.manual_chunks);
177+
175178
#[cfg(feature = "parallel")]
176179
let iterator = config.input.par_iter();
177-
178180
#[cfg(not(feature = "parallel"))]
179181
let iterator = config.input.iter();
180-
let iterator = iterator.map(|path| -> Result<TransformOutput, Error> {
182+
183+
let iterator = iterator.map(|input| -> Result<TransformOutput, Error> {
181184
transform_code(TransformCodeOptions {
182185
src_dir,
183186
root_dir,
184-
relative_path: &path.path,
185-
code: &path.code,
187+
relative_path: &input.path,
188+
dev_path: input.dev_path.as_deref(),
189+
code: &input.code,
186190
minify: config.minify,
187191
source_maps: config.source_maps,
188192
transpile_ts: config.transpile_ts,

‎packages/qwik/src/optimizer/core/src/parse.rs

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ pub enum EmitMode {
7373

7474
pub struct TransformCodeOptions<'a> {
7575
pub relative_path: &'a str,
76+
pub dev_path: Option<&'a str>,
7677
pub src_dir: &'a Path,
7778
pub root_dir: Option<&'a Path>,
7879
pub source_maps: bool,
@@ -227,7 +228,7 @@ pub fn transform_code(config: TransformCodeOptions) -> Result<TransformOutput, a
227228
let transpile_jsx = config.transpile_jsx;
228229
let transpile_ts = config.transpile_ts;
229230

230-
let origin: JsWord = path_data.rel_path.to_slash_lossy().into();
231+
let origin: JsWord = JsWord::from(path_data.rel_path.to_string_lossy());
231232

232233
match result {
233234
Ok((program, comments, is_type_script, is_jsx)) => {
@@ -321,6 +322,7 @@ pub fn transform_code(config: TransformCodeOptions) -> Result<TransformOutput, a
321322
// split into segments
322323
let mut qwik_transform = QwikTransform::new(QwikTransformOptions {
323324
path_data: &path_data,
325+
dev_path: config.dev_path,
324326
entry_policy: config.entry_policy,
325327
explicit_extensions: config.explicit_extensions,
326328
extension: extension.clone(),

‎packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_noop_dev_mode.snap

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
source: packages/qwik/src/optimizer/core/src/test.rs
3-
assertion_line: 3503
3+
assertion_line: 3510
44
expression: output
55
---
66
==INPUT==
@@ -35,7 +35,7 @@ export const App = component$(() => {
3535
import { componentQrl } from "@builder.io/qwik";
3636
import { qrlDEV } from "@builder.io/qwik";
3737
export const App = /*#__PURE__*/ componentQrl(/*#__PURE__*/ qrlDEV(()=>import("./test.tsx_App_component_ckEPmXZlub0"), "App_component_ckEPmXZlub0", {
38-
file: "/user/qwik/src/test.tsx",
38+
file: "/hello/from/dev/test.tsx",
3939
lo: 107,
4040
hi: 569,
4141
displayName: "test.tsx_App_component"
@@ -53,15 +53,15 @@ import { useStore } from "@builder.io/qwik";
5353
export const App_component_ckEPmXZlub0 = ()=>{
5454
const stuff = useStore();
5555
serverStuffQrl(/*#__PURE__*/ _noopQrlDEV("App_component_serverStuff_ebyHaP15ytQ", {
56-
file: "/user/qwik/src/test.tsx",
56+
file: "/hello/from/dev/test.tsx",
5757
lo: 0,
5858
hi: 0,
5959
displayName: "test.tsx_App_component_serverStuff"
6060
}, [
6161
stuff
6262
]));
6363
serverStuffQrl(/*#__PURE__*/ _noopQrlDEV("App_component_serverStuff_1_PQCqO0ANabY", {
64-
file: "/user/qwik/src/test.tsx",
64+
file: "/hello/from/dev/test.tsx",
6565
lo: 0,
6666
hi: 0,
6767
displayName: "test.tsx_App_component_serverStuff_1"
@@ -70,26 +70,26 @@ export const App_component_ckEPmXZlub0 = ()=>{
7070
children: /*#__PURE__*/ _jsxQ("p", null, {
7171
class: "stuff",
7272
shouldRemove$: /*#__PURE__*/ _noopQrlDEV("App_component_Cmp_p_shouldRemove_uU0MG0jvQD4", {
73-
file: "/user/qwik/src/test.tsx",
73+
file: "/hello/from/dev/test.tsx",
7474
lo: 0,
7575
hi: 0,
7676
displayName: "test.tsx_App_component_Cmp_p_shouldRemove"
7777
}, [
7878
stuff
7979
]),
8080
onClick$: /*#__PURE__*/ _noopQrlDEV("App_component_Cmp_p_onClick_vuXzfUTkpto", {
81-
file: "/user/qwik/src/test.tsx",
81+
file: "/hello/from/dev/test.tsx",
8282
lo: 0,
8383
hi: 0,
8484
displayName: "test.tsx_App_component_Cmp_p_onClick"
8585
})
8686
}, "Hello Qwik", 3, null, {
87-
fileName: "test.tsx",
87+
fileName: "/hello/from/dev/test.tsx",
8888
lineNumber: 16,
8989
columnNumber: 13
9090
})
9191
}, 3, "u6_0", {
92-
fileName: "test.tsx",
92+
fileName: "/hello/from/dev/test.tsx",
9393
lineNumber: 15,
9494
columnNumber: 9
9595
});

‎packages/qwik/src/optimizer/core/src/test.rs

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ fn test_input_fn(input: TestInput) -> Result<TransformOutput, anyhow::Error> {
6565
input: vec![TransformModuleInput {
6666
code: input.code.clone(),
6767
path: input.filename,
68+
dev_path: input.dev_path,
6869
}],
6970
source_maps: true,
7071
minify: input.minify,
@@ -3276,10 +3277,12 @@ export const Local = component$(() => {
32763277
TransformModuleInput {
32773278
code: dep.into(),
32783279
path: "../../node_modules/dep/dist/lib.mjs".into(),
3280+
dev_path: None,
32793281
},
32803282
TransformModuleInput {
32813283
code: code.into(),
32823284
path: "components/main.tsx".into(),
3285+
dev_path: None,
32833286
},
32843287
],
32853288
source_maps: true,
@@ -3355,10 +3358,12 @@ export const Greeter = component$(() => {
33553358
TransformModuleInput {
33563359
code: code.into(),
33573360
path: "main.tsx".into(),
3361+
dev_path: None,
33583362
},
33593363
TransformModuleInput {
33603364
code: code.into(),
33613365
path: "components/main.tsx".into(),
3366+
dev_path: None,
33623367
},
33633368
],
33643369
source_maps: true,
@@ -3393,10 +3398,12 @@ export const Greeter = component$(() => {
33933398
TransformModuleInput {
33943399
code: code.into(),
33953400
path: "main.tsx".into(),
3401+
dev_path: None,
33963402
},
33973403
TransformModuleInput {
33983404
code: code.into(),
33993405
path: "components/main.tsx".into(),
3406+
dev_path: None,
34003407
},
34013408
],
34023409
root_dir: None,
@@ -3528,6 +3535,7 @@ export const App = component$(() => {
35283535
"#
35293536
.to_string(),
35303537
mode: EmitMode::Dev,
3538+
dev_path: Some("/hello/from/dev/test.tsx".into()),
35313539
transpile_ts: true,
35323540
transpile_jsx: true,
35333541
strip_event_handlers: true,
@@ -3621,6 +3629,7 @@ fn get_hash(name: &str) -> String {
36213629
struct TestInput {
36223630
pub code: String,
36233631
pub filename: String,
3632+
pub dev_path: Option<String>,
36243633
pub src_dir: String,
36253634
pub root_dir: Option<String>,
36263635
pub manual_chunks: Option<HashMap<String, JsWord>>,
@@ -3645,6 +3654,7 @@ impl TestInput {
36453654
pub fn default() -> Self {
36463655
Self {
36473656
filename: "test.tsx".to_string(),
3657+
dev_path: None,
36483658
src_dir: "/user/qwik/src/".to_string(),
36493659
root_dir: None,
36503660
code: "/user/qwik/src/".to_string(),

0 commit comments

Comments
 (0)