Merge pull request #8025 from QwikDev/v2-merge-main

chore: merge main into v2

Author: wmertens

.github/workflows/ci.yml

@@ -258,7 +258,8 @@ jobs:
           - host: macos-latest
             target: aarch64-apple-darwin
 
-          - host: windows-latest
+          # Note: 2025 image breaks rollup
+          - host: windows-2022
             target: x86_64-pc-windows-msvc
 
     name: Build optimizer ${{ matrix.settings.target }}
@@ -665,8 +666,9 @@ jobs:
           #   browser: firefox
           - host: macos-latest
             browser: webkit
-          - host: windows-latest
-            browser: chromium
+          # flaky. Updating node version or sharp/sqlite3 related deps might help.
+          # - host: windows-2022
+          #   browser: chromium
 
     runs-on: ${{ matrix.settings.host }}
 
@@ -712,7 +714,7 @@ jobs:
         run: pnpm run test.e2e.qwik-react.${{ matrix.settings.browser }} --timeout 60000 --retries 7 --workers 1
 
       - name: Validate Create Qwik Cli
-        if: matrix.settings.host != 'windows-latest'
+        if: matrix.settings.host != 'windows-2022'
         run: pnpm cli.validate
 
   ############ E2E CLI TEST ############
@@ -730,7 +732,7 @@ jobs:
         settings:
           - host: ubuntu-latest
           - host: macos-latest
-          - host: windows-latest
+          - host: windows-2022
 
     runs-on: ${{ matrix.settings.host }}
 

package.json

@@ -143,7 +143,7 @@
     "prettier-plugin-tailwindcss": "0.6.14",
     "pretty-quick": "4.2.2",
     "prompts": "2.4.2",
-    "rollup": ">= 4.52.0",
+    "rollup": "4.52.3",
     "semver": "7.7.2",
     "simple-git-hooks": "2.13.1",
     "snoop": "1.0.4",

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

@@ -42,7 +42,7 @@ export const replResolver = (
     }
     return {
       // Make sure this matches the regexes in manifest.ts
-      id: `/node_modules/@qwik.dev/core${id}`,
+      id: `/qwik${id}`,
       sideEffects: false,
       // It would be nice to load qwik as external, but
       // we import core and core/build so we need processing
@@ -59,15 +59,16 @@ export const replResolver = (
       if (id.startsWith('http')) {
         return { id, external: true };
       }
-      if (id.startsWith('/node_modules/@qwik.dev/core/')) {
+      // re-resolve
+      if (id.startsWith('/qwik/')) {
         return id;
       }
       const match = id.match(/(@builder\.io\/qwik|@qwik\.dev\/core)(.*)/);
       if (match) {
         const pkgName = match[2];
 
         if (pkgName === '/build') {
-          return `/node_modules/@qwik.dev/core/build`;
+          return `/qwik/build`;
         }
         if (
           !pkgName ||
@@ -113,8 +114,8 @@ export const replResolver = (
       if (input && typeof input.code === 'string') {
         return input.code;
       }
-      if (id.startsWith('/node_modules/@qwik.dev/core/')) {
-        const path = id.slice('/node_modules/@qwik.dev/core'.length);
+      if (id.startsWith('/qwik/')) {
+        const path = id.slice('/qwik'.length);
         if (path === '/build') {
           // Virtual module for Qwik build
           const isDev = options.buildMode === 'development';

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

@@ -3,6 +3,10 @@ import { CodeBlock } from '../../components/code-block/code-block';
 import { $, component$, useSignal } from '@qwik.dev/core';
 const FILE_MODULE_DIV_ID = 'file-modules-symbol';
 
+type TransformModuleV2 = TransformModule & {
+  segment?: { canonicalFilename: string; paramNames: string[]; captureNames: string[] };
+};
+
 export const ReplOutputSymbols = component$(({ outputs }: ReplOutputSymbolsProps) => {
   const selectedPath = useSignal(outputs.length ? outputs[0].path : '');
   const pathInView$ = $((path: string) => {
@@ -38,7 +42,7 @@ export const ReplOutputSymbols = component$(({ outputs }: ReplOutputSymbolsProps
         </div>
       </div>
       <div class="file-modules" id={FILE_MODULE_DIV_ID}>
-        {segments.map((o, i) => (
+        {(segments as TransformModuleV2[]).map((o, i) => (
           <div class="file-item" data-symbol-item={i} key={o.path}>
             <div class="file-info">
               <span>{o.segment?.canonicalFilename}</span>

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

@@ -151,8 +151,8 @@
           "id": "qwikloaderoptions"
         }
       ],
-      "kind": "Interface",
-      "content": "```typescript\nexport interface QwikLoaderOptions \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[include?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n'always' \\| 'never' \\| 'auto'\n\n\n</td><td>\n\n_(Optional)_ Whether to include the qwikloader script in the document. Normally you don't need to worry about this, but in case of multi-container apps using different Qwik versions, you might want to only enable it on one of the containers.\n\nDefaults to `'auto'`<!-- -->.\n\n\n</td></tr>\n<tr><td>\n\n[position?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n'top' \\| 'bottom'\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>",
+      "kind": "TypeAlias",
+      "content": "```typescript\nexport type QwikLoaderOptions = 'module' | 'inline' | 'never' | {\n    include?: 'always' | 'never' | 'auto';\n    position?: 'top' | 'bottom';\n};\n```",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/server/types.ts",
       "mdFile": "core.qwikloaderoptions.md"
     },
@@ -180,7 +180,7 @@
         }
       ],
       "kind": "Interface",
-      "content": "```typescript\nexport interface RenderOptions extends SerializeDocumentOptions \n```\n**Extends:** [SerializeDocumentOptions](#serializedocumentoptions)\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[base?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring \\| ((options: [RenderOptions](#renderoptions)<!-- -->) =&gt; string)\n\n\n</td><td>\n\n_(Optional)_ Specifies the root of the JS files of the client build. Setting a base, will cause the render of the `q:base` attribute in the `q:container` element.\n\n\n</td></tr>\n<tr><td>\n\n[containerAttributes?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nRecord&lt;string, string&gt;\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[containerTagName?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n_(Optional)_ When set, the app is serialized into a fragment. And the returned html is not a complete document. Defaults to `html`\n\n\n</td></tr>\n<tr><td>\n\n[locale?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring \\| ((options: [RenderOptions](#renderoptions)<!-- -->) =&gt; string)\n\n\n</td><td>\n\n_(Optional)_ Language to use when rendering the document.\n\n\n</td></tr>\n<tr><td>\n\n[prefetchStrategy?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[PrefetchStrategy](#prefetchstrategy) \\| null\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[preloader?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[PreloaderOptions](#preloaderoptions) \\| false\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[qwikLoader?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[QwikLoaderOptions](#qwikloaderoptions)\n\n\n</td><td>\n\n_(Optional)_ Specifies if the Qwik Loader script is added to the document or not.\n\nDefaults to `{ include: true }`<!-- -->.\n\n\n</td></tr>\n<tr><td>\n\n[serverData?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nRecord&lt;string, any&gt;\n\n\n</td><td>\n\n_(Optional)_ Metadata that can be retrieved during SSR with `useServerData()`<!-- -->.\n\n\n</td></tr>\n<tr><td>\n\n[snapshot?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nboolean\n\n\n</td><td>\n\n_(Optional)_ Defaults to `true`\n\n\n</td></tr>\n</tbody></table>",
+      "content": "```typescript\nexport interface RenderOptions extends SerializeDocumentOptions \n```\n**Extends:** [SerializeDocumentOptions](#serializedocumentoptions)\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[base?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring \\| ((options: [RenderOptions](#renderoptions)<!-- -->) =&gt; string)\n\n\n</td><td>\n\n_(Optional)_ Specifies the root of the JS files of the client build. Setting a base, will cause the render of the `q:base` attribute in the `q:container` element.\n\n\n</td></tr>\n<tr><td>\n\n[containerAttributes?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nRecord&lt;string, string&gt;\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[containerTagName?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring\n\n\n</td><td>\n\n_(Optional)_ When set, the app is serialized into a fragment. And the returned html is not a complete document. Defaults to `html`\n\n\n</td></tr>\n<tr><td>\n\n[locale?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nstring \\| ((options: [RenderOptions](#renderoptions)<!-- -->) =&gt; string)\n\n\n</td><td>\n\n_(Optional)_ Language to use when rendering the document.\n\n\n</td></tr>\n<tr><td>\n\n[prefetchStrategy?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[PrefetchStrategy](#prefetchstrategy) \\| null\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n<tr><td>\n\n[preloader?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[PreloaderOptions](#preloaderoptions) \\| false\n\n\n</td><td>\n\n_(Optional)_ Specifies how preloading is handled. This ensures that code is instantly available when needed.\n\n\n</td></tr>\n<tr><td>\n\n[qwikLoader?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n[QwikLoaderOptions](#qwikloaderoptions)\n\n\n</td><td>\n\n_(Optional)_ Specifies how the Qwik Loader is included in the document. This enables interactivity and lazy loading.\n\n`module`<!-- -->: Use a `<script>` tag to load the Qwik Loader. Subsequent page loads will have the script cached and instantly running.\n\n`inline`<!-- -->: This embeds the Qwik Loader script directly in the document. This adds about 3kB before compression, which typically is reduced to about 1.6kB with gzip.\n\n`never`<!-- -->: Do not include the Qwik Loader script. This is mostly useful when embedding multiple containers on the same page.\n\nDefaults to `module`<!-- -->.\n\nNote that the Qwik Loader is absolutely required for Qwik to work. There must be an instance of it loaded for any interactivity to happen.\n\n\n</td></tr>\n<tr><td>\n\n[serverData?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nRecord&lt;string, any&gt;\n\n\n</td><td>\n\n_(Optional)_ Metadata that can be retrieved during SSR with `useServerData()`<!-- -->.\n\n\n</td></tr>\n<tr><td>\n\n[snapshot?](#)\n\n\n</td><td>\n\n\n</td><td>\n\nboolean\n\n\n</td><td>\n\n_(Optional)_ Defaults to `true`\n\n\n</td></tr>\n</tbody></table>",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/server/types.ts",
       "mdFile": "core.renderoptions.md"
     },

packages/docs/src/routes/api/qwik-server/index.mdx

@@ -589,60 +589,16 @@ Defaults to `5`
 ## QwikLoaderOptions
 
 ```typescript
-export interface QwikLoaderOptions
+export type QwikLoaderOptions =
+  | "module"
+  | "inline"
+  | "never"
+  | {
+      include?: "always" | "never" | "auto";
+      position?: "top" | "bottom";
+    };
 ```
 
-<table><thead><tr><th>
-
-Property
-
-</th><th>
-
-Modifiers
-
-</th><th>
-
-Type
-
-</th><th>
-
-Description
-
-</th></tr></thead>
-<tbody><tr><td>
-
-[include?](#)
-
-</td><td>
-
-</td><td>
-
-'always' \| 'never' \| 'auto'
-
-</td><td>
-
-_(Optional)_ Whether to include the qwikloader script in the document. Normally you don't need to worry about this, but in case of multi-container apps using different Qwik versions, you might want to only enable it on one of the containers.
-
-Defaults to `'auto'`.
-
-</td></tr>
-<tr><td>
-
-[position?](#)
-
-</td><td>
-
-</td><td>
-
-'top' \| 'bottom'
-
-</td><td>
-
-_(Optional)_
-
-</td></tr>
-</tbody></table>
-
 [Edit this section](https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/server/types.ts)
 
 ## Render
@@ -767,7 +723,7 @@ _(Optional)_
 
 </td><td>
 
-_(Optional)_
+_(Optional)_ Specifies how preloading is handled. This ensures that code is instantly available when needed.
 
 </td></tr>
 <tr><td>
@@ -782,9 +738,17 @@ _(Optional)_
 
 </td><td>
 
-_(Optional)_ Specifies if the Qwik Loader script is added to the document or not.
+_(Optional)_ Specifies how the Qwik Loader is included in the document. This enables interactivity and lazy loading.
+
+`module`: Use a `<script>` tag to load the Qwik Loader. Subsequent page loads will have the script cached and instantly running.
+
+`inline`: This embeds the Qwik Loader script directly in the document. This adds about 3kB before compression, which typically is reduced to about 1.6kB with gzip.
+
+`never`: Do not include the Qwik Loader script. This is mostly useful when embedding multiple containers on the same page.
+
+Defaults to `module`.
 
-Defaults to `{ include: true }`.
+Note that the Qwik Loader is absolutely required for Qwik to work. There must be an instance of it loaded for any interactivity to happen.
 
 </td></tr>
 <tr><td>

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

@@ -178,7 +178,7 @@
         }
       ],
       "kind": "Function",
-      "content": "```typescript\nexport declare function ssrRenderToDom(jsx: JSXOutput, opts?: {\n    debug?: boolean;\n    raw?: boolean;\n}): Promise<{\n    container: _DomContainer;\n    document: Document;\n    vNode: _VNode | null;\n    getStyles: () => Record<string, string | string[]>;\n}>;\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\njsx\n\n\n</td><td>\n\nJSXOutput\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nopts\n\n\n</td><td>\n\n{ debug?: boolean; raw?: boolean; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nPromise&lt;{ container: \\_DomContainer; document: Document; vNode: \\_VNode \\| null; getStyles: () =&gt; Record&lt;string, string \\| string\\[\\]&gt;; }&gt;",
+      "content": "```typescript\nexport declare function ssrRenderToDom(jsx: JSXOutput, opts?: {\n    debug?: boolean;\n    raw?: boolean;\n    qwikLoader?: boolean;\n}): Promise<{\n    container: _DomContainer;\n    document: Document;\n    vNode: _VNode | null;\n    getStyles: () => Record<string, string | string[]>;\n}>;\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\njsx\n\n\n</td><td>\n\nJSXOutput\n\n\n</td><td>\n\n\n</td></tr>\n<tr><td>\n\nopts\n\n\n</td><td>\n\n{ debug?: boolean; raw?: boolean; qwikLoader?: boolean; }\n\n\n</td><td>\n\n_(Optional)_\n\n\n</td></tr>\n</tbody></table>\n\n**Returns:**\n\nPromise&lt;{ container: \\_DomContainer; document: Document; vNode: \\_VNode \\| null; getStyles: () =&gt; Record&lt;string, string \\| string\\[\\]&gt;; }&gt;",
       "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/testing/rendering.unit-util.tsx",
       "mdFile": "core.ssrrendertodom.md"
     },

packages/docs/src/routes/api/qwik-testing/index.mdx

@@ -435,6 +435,7 @@ export declare function ssrRenderToDom(
   opts?: {
     debug?: boolean;
     raw?: boolean;
+    qwikLoader?: boolean;
   },
 ): Promise<{
   container: _DomContainer;
@@ -474,7 +475,7 @@ opts
 
 </td><td>
 
-\{ debug?: boolean; raw?: boolean; }
+\{ debug?: boolean; raw?: boolean; qwikLoader?: boolean; }
 
 </td><td>
 

packages/docs/src/routes/docs/labs/insights/index.mdx

@@ -5,7 +5,8 @@ contributors:
   - gioboa
   - mrhoodz
   - thejackshelton
-updated_at: '2023-10-11T22:12:12Z'
+  - maiieul
+updated_at: '2025-09-29T22:12:12Z'
 created_at: '2023-06-22T22:13:24Z'
 ---
 
@@ -19,16 +20,12 @@ Insights allow your application to collect real user usage information to optimi
 ## Architecture
 
 The optimization consists of these parts:
-- A `<Insights>` component which collects real user usage data.
+- A `<Insights>` component which collects time based bundle execution data.
+- A `qwikInsights` Vite Plugin to apply the usage data during the build process.
 - A registered application inside the builder.io database.
-- A `qwikInsights` Vite Plugin to load and save real user usage data during the build process.
 
-> NOTE:
-> To try this new feature please drop a message inside the [Qwik Discord server](https://qwik.dev/chat)
 > Currently Insights info is hosted in the Builder database. This information is about the execution of symbols/chunks in the application.
 > The implementation of the service is open-source and you have the choice to use ours or host your own.
-> (Please note, that this may become a paid service in the future.)
-
 
 ## `<Insights>` component
 
@@ -87,9 +84,10 @@ The `<Insights>` component collects this data:
 - The `pathname` part of the URL.
 - Random sessionID which identifies which symbol loads came from the same browser session.
 
-NOTE: The `<Insights>` component does not collect any user-identifiable information.
+> The `<Insights>` component does not collect any user-identifiable information.
+
+The data collected being based on the frequency bundles are being grouped together at the same time, it is **not** advised to share the same API key between your preview and production environments. During preview, developers might use the application in 3G throttling and click around, which can put unrelated bundles together. After that the import graph would be wrong, leading to over-preloading, and Insights would then base its future data collection based on those corrupted bundles. If that happened to you, we recommend creating a new API key for your production environment. In normal usage, you will release a new version of your application and there will be a long enough window for Insights to collect the data. In case you face over-preloading in your app, you can always re-create a new API key. Drop us a message in the [Qwik Discord server](https://qwik.dev/chat) if this becomes a recurrent issue for you.
 
-The information collected is sent to builder.io database for storage.
 
 ## Vite integration
 

packages/docs/vite.config.ts

@@ -254,7 +254,7 @@ export default defineConfig(() => {
       },
     },
     worker: {
-      format: 'es',
+      format: 'es' as const,
     },
     clearScreen: false,
     server: {