Merge pull request #7037 from QwikDev/fix-dev

fix(dev): let vite do all dev url handling

.changeset/late-bugs-visit.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik': patch
+---
+
+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

@@ -796,7 +796,7 @@
         }
       ],
       "kind": "Interface",
-      "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>",
+      "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>",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/optimizer/src/types.ts",
       "mdFile": "qwik.transformmoduleinput.md"
     },

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

@@ -3149,6 +3149,21 @@ string
 </td></tr>
 <tr><td>
 
+[devPath?](#)
+
+</td><td>
+
+</td><td>
+
+string
+
+</td><td>
+
+_(Optional)_
+
+</td></tr>
+<tr><td>
+
 [path](#)
 
 </td><td>

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

@@ -1760,7 +1760,7 @@
         }
       ],
       "kind": "Function",
-      "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;",
+      "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;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts",
       "mdFile": "qwik.prefetchgraph.md"
     },
@@ -1774,7 +1774,7 @@
         }
       ],
       "kind": "Function",
-      "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;",
+      "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;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts",
       "mdFile": "qwik.prefetchserviceworker.md"
     },
@@ -3034,7 +3034,7 @@
         }
       ],
       "kind": "Function",
-      "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;",
+      "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;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/use/use-task.ts",
       "mdFile": "qwik.usecomputed_.md"
     },

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

@@ -3625,7 +3625,7 @@ _(Optional)_ Options for the loading prefetch graph.
 </tbody></table>
 **Returns:**
 
-[JSXNode](#jsxnode)&lt;"script"&gt;
+JSXNode&lt;"script"&gt;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts)
 
@@ -3679,7 +3679,7 @@ Options for the prefetch service worker.
 </tbody></table>
 **Returns:**
 
-[JSXNode](#jsxnode)&lt;'script'&gt;
+JSXNode&lt;'script'&gt;
 
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/core/components/prefetch.ts)
 
@@ -10160,7 +10160,15 @@ T
 
 ## useComputed$
 
-Hook that returns a read-only signal that updates when signals used in the `ComputedFn` change.
+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.
+
+The function must be synchronous and must not have any side effects.
+
+Async functions are deprecated because:
+
+- 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.
+
+In v2, async functions won't work.
 
 ```typescript
 useComputed$: <T>(qrl: ComputedFn<T>) => Signal<Awaited<T>>;

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

@@ -82,6 +82,7 @@ pub struct TransformFsOptions {
 #[serde(rename_all = "camelCase")]
 pub struct TransformModuleInput {
 	pub path: String,
+	pub dev_path: Option<String>,
 	pub code: String,
 }
 
@@ -137,6 +138,7 @@ pub fn transform_fs(config: TransformFsOptions) -> Result<TransformOutput, Error
 				src_dir,
 				root_dir,
 				relative_path: relative_path.to_str().unwrap(),
+				dev_path: None,
 				minify: config.minify,
 				code: &code,
 				explicit_extensions: config.explicit_extensions,
@@ -172,17 +174,19 @@ pub fn transform_modules(config: TransformModulesOptions) -> Result<TransformOut
 	let root_dir = config.root_dir.as_ref().map(Path::new);
 
 	let entry_policy = &*parse_entry_strategy(&config.entry_strategy, config.manual_chunks);
+
 	#[cfg(feature = "parallel")]
 	let iterator = config.input.par_iter();
-
 	#[cfg(not(feature = "parallel"))]
 	let iterator = config.input.iter();
-	let iterator = iterator.map(|path| -> Result<TransformOutput, Error> {
+
+	let iterator = iterator.map(|input| -> Result<TransformOutput, Error> {
 		transform_code(TransformCodeOptions {
 			src_dir,
 			root_dir,
-			relative_path: &path.path,
-			code: &path.code,
+			relative_path: &input.path,
+			dev_path: input.dev_path.as_deref(),
+			code: &input.code,
 			minify: config.minify,
 			source_maps: config.source_maps,
 			transpile_ts: config.transpile_ts,

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

@@ -73,6 +73,7 @@ pub enum EmitMode {
 
 pub struct TransformCodeOptions<'a> {
 	pub relative_path: &'a str,
+	pub dev_path: Option<&'a str>,
 	pub src_dir: &'a Path,
 	pub root_dir: Option<&'a Path>,
 	pub source_maps: bool,
@@ -227,7 +228,7 @@ pub fn transform_code(config: TransformCodeOptions) -> Result<TransformOutput, a
 	let transpile_jsx = config.transpile_jsx;
 	let transpile_ts = config.transpile_ts;
 
-	let origin: JsWord = path_data.rel_path.to_slash_lossy().into();
+	let origin: JsWord = JsWord::from(path_data.rel_path.to_string_lossy());
 
 	match result {
 		Ok((program, comments, is_type_script, is_jsx)) => {
@@ -321,6 +322,7 @@ pub fn transform_code(config: TransformCodeOptions) -> Result<TransformOutput, a
 						// split into segments
 						let mut qwik_transform = QwikTransform::new(QwikTransformOptions {
 							path_data: &path_data,
+							dev_path: config.dev_path,
 							entry_policy: config.entry_policy,
 							explicit_extensions: config.explicit_extensions,
 							extension: extension.clone(),

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

@@ -1,6 +1,6 @@
 ---
 source: packages/qwik/src/optimizer/core/src/test.rs
-assertion_line: 3503
+assertion_line: 3510
 expression: output
 ---
 ==INPUT==
@@ -35,7 +35,7 @@ export const App = component$(() => {
 import { componentQrl } from "@builder.io/qwik";
 import { qrlDEV } from "@builder.io/qwik";
 export const App = /*#__PURE__*/ componentQrl(/*#__PURE__*/ qrlDEV(()=>import("./test.tsx_App_component_ckEPmXZlub0"), "App_component_ckEPmXZlub0", {
-    file: "/user/qwik/src/test.tsx",
+    file: "/hello/from/dev/test.tsx",
     lo: 107,
     hi: 569,
     displayName: "test.tsx_App_component"
@@ -53,15 +53,15 @@ import { useStore } from "@builder.io/qwik";
 export const App_component_ckEPmXZlub0 = ()=>{
     const stuff = useStore();
     serverStuffQrl(/*#__PURE__*/ _noopQrlDEV("App_component_serverStuff_ebyHaP15ytQ", {
-        file: "/user/qwik/src/test.tsx",
+        file: "/hello/from/dev/test.tsx",
         lo: 0,
         hi: 0,
         displayName: "test.tsx_App_component_serverStuff"
     }, [
         stuff
     ]));
     serverStuffQrl(/*#__PURE__*/ _noopQrlDEV("App_component_serverStuff_1_PQCqO0ANabY", {
-        file: "/user/qwik/src/test.tsx",
+        file: "/hello/from/dev/test.tsx",
         lo: 0,
         hi: 0,
         displayName: "test.tsx_App_component_serverStuff_1"
@@ -70,26 +70,26 @@ export const App_component_ckEPmXZlub0 = ()=>{
         children: /*#__PURE__*/ _jsxQ("p", null, {
             class: "stuff",
             shouldRemove$: /*#__PURE__*/ _noopQrlDEV("App_component_Cmp_p_shouldRemove_uU0MG0jvQD4", {
-                file: "/user/qwik/src/test.tsx",
+                file: "/hello/from/dev/test.tsx",
                 lo: 0,
                 hi: 0,
                 displayName: "test.tsx_App_component_Cmp_p_shouldRemove"
             }, [
                 stuff
             ]),
             onClick$: /*#__PURE__*/ _noopQrlDEV("App_component_Cmp_p_onClick_vuXzfUTkpto", {
-                file: "/user/qwik/src/test.tsx",
+                file: "/hello/from/dev/test.tsx",
                 lo: 0,
                 hi: 0,
                 displayName: "test.tsx_App_component_Cmp_p_onClick"
             })
         }, "Hello Qwik", 3, null, {
-            fileName: "test.tsx",
+            fileName: "/hello/from/dev/test.tsx",
             lineNumber: 16,
             columnNumber: 13
         })
     }, 3, "u6_0", {
-        fileName: "test.tsx",
+        fileName: "/hello/from/dev/test.tsx",
         lineNumber: 15,
         columnNumber: 9
     });

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

@@ -65,6 +65,7 @@ fn test_input_fn(input: TestInput) -> Result<TransformOutput, anyhow::Error> {
 		input: vec![TransformModuleInput {
 			code: input.code.clone(),
 			path: input.filename,
+			dev_path: input.dev_path,
 		}],
 		source_maps: true,
 		minify: input.minify,
@@ -3276,10 +3277,12 @@ export const Local = component$(() => {
 			TransformModuleInput {
 				code: dep.into(),
 				path: "../../node_modules/dep/dist/lib.mjs".into(),
+				dev_path: None,
 			},
 			TransformModuleInput {
 				code: code.into(),
 				path: "components/main.tsx".into(),
+				dev_path: None,
 			},
 		],
 		source_maps: true,
@@ -3355,10 +3358,12 @@ export const Greeter = component$(() => {
 			TransformModuleInput {
 				code: code.into(),
 				path: "main.tsx".into(),
+				dev_path: None,
 			},
 			TransformModuleInput {
 				code: code.into(),
 				path: "components/main.tsx".into(),
+				dev_path: None,
 			},
 		],
 		source_maps: true,
@@ -3393,10 +3398,12 @@ export const Greeter = component$(() => {
 				TransformModuleInput {
 					code: code.into(),
 					path: "main.tsx".into(),
+					dev_path: None,
 				},
 				TransformModuleInput {
 					code: code.into(),
 					path: "components/main.tsx".into(),
+					dev_path: None,
 				},
 			],
 			root_dir: None,
@@ -3528,6 +3535,7 @@ export const App = component$(() => {
 "#
 		.to_string(),
 		mode: EmitMode::Dev,
+		dev_path: Some("/hello/from/dev/test.tsx".into()),
 		transpile_ts: true,
 		transpile_jsx: true,
 		strip_event_handlers: true,
@@ -3621,6 +3629,7 @@ fn get_hash(name: &str) -> String {
 struct TestInput {
 	pub code: String,
 	pub filename: String,
+	pub dev_path: Option<String>,
 	pub src_dir: String,
 	pub root_dir: Option<String>,
 	pub manual_chunks: Option<HashMap<String, JsWord>>,
@@ -3645,6 +3654,7 @@ impl TestInput {
 	pub fn default() -> Self {
 		Self {
 			filename: "test.tsx".to_string(),
+			dev_path: None,
 			src_dir: "/user/qwik/src/".to_string(),
 			root_dir: None,
 			code: "/user/qwik/src/".to_string(),