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

chore(v2): merge main into build/v2

.changeset/ninety-planets-search.md

@@ -0,0 +1,6 @@
+---
+'@builder.io/qwik-city': patch
+'@builder.io/qwik': patch
+---
+
+FIX: `vite` is now a peer dependency of `qwik` and `qwik-city`, so that there can be no duplicate imports. This should not have consequences, since all apps also directly depend on `vite`.

.changeset/unlucky-experts-check.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik': patch
+---
+
+Allow setting `linkFetchPriority` for modulepreload links in the prefetch strategy. Also fix the links in dev mode

package.json

@@ -54,7 +54,7 @@
  "dependencies": [
  "@playwright/test"
  ],
- "pinVersion": "1.40.0"
+ "pinVersion": "1.47.0"
  },
  {
  "label": "use exact version numbers for devDependencies",

packages/docs/src/components/footer/footer.tsx

@@ -22,6 +22,7 @@ const linkColumns = [
  { title: 'Tutorial', href: `${baseUrl}/ecosystem/#courses` },
  { title: 'Presentations', href: `${baseUrl}/ecosystem/#presentations` },
  { title: 'Community', href: `${baseUrl}/ecosystem/#community` },
+ { title: 'Press', href: `${baseUrl}/press` },
  ],
 ];
 

packages/docs/src/repl/repl-output-modules.tsx

@@ -26,6 +26,7 @@ export const ReplOutputModules = component$(({ outputs, headerText }: ReplOutput
  class={{ 'in-view': selectedPath.value === o.path }}
  preventdefault:click
  key={o.path}
+ title={o.path}
  >
  {o.path}
  </a>

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

@@ -10,6 +10,10 @@ export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProp
  const diagnosticsLen = useComputed$(
  () => store.diagnostics.length + store.monacoDiagnostics.length
  );
+ const clientBundlesNoCore = useComputed$(() =>
+ // Qwik Core is not interesting and is large, slowing down the UI
+ store.clientBundles.filter((b) => !b.path.endsWith('qwikCore.js'))
+ );
 
  return (
  <div class="repl-panel repl-output-panel">
@@ -113,7 +117,7 @@ export const ReplOutputPanel = component$(({ input, store }: ReplOutputPanelProp
  ) : null}
 
  {store.selectedOutputPanel === 'clientBundles' ? (
- <ReplOutputModules headerText="/build/" outputs={store.clientBundles} />
+ <ReplOutputModules headerText="/build/" outputs={clientBundlesNoCore.value} />
  ) : null}
 
  {store.selectedOutputPanel === 'serverModules' ? (

packages/docs/src/repl/repl-output-symbols.tsx

@@ -27,6 +27,7 @@ export const ReplOutputSymbols = component$(({ outputs }: ReplOutputSymbolsProps
  }}
  class={{ 'in-view': selectedPath.value === o.path }}
  preventdefault:click
+ title={o.segment?.canonicalFilename}
  >
  {o.segment?.canonicalFilename}
  </a>

packages/docs/src/repl/repl-output-update.ts

@@ -28,7 +28,12 @@ export const updateReplOutput = async (store: ReplStore, result: ReplResult) =>
  deepUpdate(store.transformedModules, result.transformedModules);
  deepUpdate(store.clientBundles, result.clientBundles);
  deepUpdate(store.ssrModules, result.ssrModules);
- deepUpdate(store.events, result.events);
+ if (
+ result.events.length !== store.events.length ||
+ result.events.some((ev, i) => ev?.start !== store.events[i]?.start)
+ ) {
+ store.events = result.events;
+ }
 
  if (store.selectedOutputPanel === 'diagnostics' && store.monacoDiagnostics.length === 0) {
  store.selectedOutputPanel = 'app';

packages/docs/src/repl/worker/app-bundle-client.ts

@@ -36,7 +36,6 @@ export const appBundleClient = async (
 
  const rollupInputOpts: InputOptions = {
  input: entry.path,
- cache: self.rollupCache,
  plugins: [
  replCss(options),
  self.qwikOptimizer?.qwikRollup(qwikRollupClientOpts),
@@ -71,8 +70,6 @@ export const appBundleClient = async (
 
  const bundle = await self.rollup?.rollup(rollupInputOpts);
  if (bundle) {
- self.rollupCache = bundle.cache;
-
  const generated = await bundle.generate({
  sourcemap: false,
  });
@@ -96,7 +93,7 @@ export const appBundleClient = async (
  })
  );
 
- // clear out old cache
+ // clear out old results cache
  // no need to wait
  cache.keys().then((keys) => {
  if (keys.length > 500) {

packages/docs/src/repl/worker/repl-plugins.ts

@@ -15,6 +15,7 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's
  name: 'repl-resolver',
 
  resolveId(id, importer) {
+ // Entry point
  if (!importer) {
  return id;
  }
@@ -25,12 +26,10 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's
  ) {
  return '\0qwikCore';
  }
- if (id === '@builder.io/qwik/build') {
- return '\0qwikBuild';
- }
  if (id === '@builder.io/qwik/server') {
  return '\0qwikServer';
  }
+ // Simple relative file resolution
  if (id.startsWith('./')) {
  const extensions = ['', '.tsx', '.ts'];
  id = id.slice(1);
@@ -41,10 +40,6 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's
  }
  }
  }
- return {
- id,
- external: true,
- };
  },
 
  async load(id) {
@@ -59,20 +54,6 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's
  if (id === '\0qwikServer') {
  return getRuntimeBundle('qwikServer');
  }
- if (id === '\0qwikBuild') {
- return `
- export const isServer = true;
- export const isBrowser = false;
- export const isDev = false;
- `;
- }
- }
- if (id === '\0qwikBuild') {
- return `
- export const isServer = false;
- export const isBrowser = true;
- export const isDev = false;
- `;
  }
  if (id === '\0qwikCore') {
  if (options.buildMode === 'production') {
@@ -88,7 +69,11 @@ export const replResolver = (options: ReplInputOptions, buildMode: 'client' | 's
  }
  throw new Error(`Unable to load Qwik core`);
  }
- return null;
+
+ // We're the fallback, we know all the files
+ if (/\.[jt]sx?$/.test(id)) {
+ throw new Error(`load: unknown module ${id}`);
+ }
  },
  };
 };

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

@@ -82,7 +82,7 @@
  }
  ],
  "kind": "Interface",
- "content": "```typescript\nexport interface PrefetchImplementation \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[linkInsert?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n'js-append' \\| 'html-append' \\| null\n\n\n</td><td>\n\n_(Optional)_ `js-append`<!-- -->: Use JS runtime to create each `<link>` and append to the body.\n\n`html-append`<!-- -->: Render each `<link>` within html, appended at the end of the body.\n\n\n</td></tr>\n<tr><td>\n\n[linkRel?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n'prefetch' \\| 'preload' \\| 'modulepreload' \\| null\n\n\n</td><td>\n\n_(Optional)_ Value of the `<link rel=\"...\">` attribute when link is used. Defaults to `prefetch` if links are inserted.\n\n\n</td></tr>\n<tr><td>\n\n[prefetchEvent?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n'always' \\| null\n\n\n</td><td>\n\n_(Optional)_ Dispatch a `qprefetch` event with detail data containing the bundles that should be prefetched. The event dispatch script will be inlined into the document's HTML so any listeners of this event should already be ready to handle the event.\n\nThis implementation will inject a script similar to:\n\n```\n<script type=\"module\">\n document.dispatchEvent(new CustomEvent(\"qprefetch\", { detail:{ \"bundles\": [...] } }))\n</script>\n```\nBy default, the `prefetchEvent` implementation will be set to `always`<!-- -->.\n\n\n</td></tr>\n<tr><td>\n\n[workerFetchInsert?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n'always' \\| 'no-link-support' \\| null\n\n\n</td><td>\n\n_(Optional)_ `always`<!-- -->: Always include the worker fetch JS runtime.\n\n`no-link-support`<!-- -->: Only include the worker fetch JS runtime when the browser doesn't support `<link>` prefetch/preload/modulepreload.\n\n\n</td></tr>\n</tbody></table>",
+ "content": "```typescript\nexport interface PrefetchImplementation \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[linkFetchPriority?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n'auto' \\| 'low' \\| 'high' \\| null\n\n\n</td><td>\n\n_(Optional)_ Value of the `<link fetchpriority=\"...\">` attribute when link is used. Defaults to `null` if links are inserted.\n\n\n</td></tr>\n<tr><td>\n\n[linkInsert?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n'js-append' \\| 'html-append' \\| null\n\n\n</td><td>\n\n_(Optional)_ `js-append`<!-- -->: Use JS runtime to create each `<link>` and append to the body.\n\n`html-append`<!-- -->: Render each `<link>` within html, appended at the end of the body.\n\n\n</td></tr>\n<tr><td>\n\n[linkRel?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n'prefetch' \\| 'preload' \\| 'modulepreload' \\| null\n\n\n</td><td>\n\n_(Optional)_ Value of the `<link rel=\"...\">` attribute when link is used. Defaults to `prefetch` if links are inserted.\n\n\n</td></tr>\n<tr><td>\n\n[prefetchEvent?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n'always' \\| null\n\n\n</td><td>\n\n_(Optional)_ Dispatch a `qprefetch` event with detail data containing the bundles that should be prefetched. The event dispatch script will be inlined into the document's HTML so any listeners of this event should already be ready to handle the event.\n\nThis implementation will inject a script similar to:\n\n```\n<script type=\"module\">\n document.dispatchEvent(new CustomEvent(\"qprefetch\", { detail:{ \"bundles\": [...] } }))\n</script>\n```\nBy default, the `prefetchEvent` implementation will be set to `always`<!-- -->.\n\n\n</td></tr>\n<tr><td>\n\n[workerFetchInsert?](#)\n\n\n</td><td>\n\n\n</td><td>\n\n'always' \\| 'no-link-support' \\| null\n\n\n</td><td>\n\n_(Optional)_ `always`<!-- -->: Always include the worker fetch JS runtime.\n\n`no-link-support`<!-- -->: Only include the worker fetch JS runtime when the browser doesn't support `<link>` prefetch/preload/modulepreload.\n\n\n</td></tr>\n</tbody></table>",
  "editUrl": "https://github.com/QwikDev/qwik/tree/main/packages/qwik/src/server/types.ts",
  "mdFile": "qwik.prefetchimplementation.md"
  },

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

@@ -233,6 +233,21 @@ Description
 </th></tr></thead>
 <tbody><tr><td>
 
+[linkFetchPriority?](#)
+
+</td><td>
+
+</td><td>
+
+'auto' \| 'low' \| 'high' \| null
+
+</td><td>
+
+_(Optional)_ Value of the `<link fetchpriority="...">` attribute when link is used. Defaults to `null` if links are inserted.
+
+</td></tr>
+<tr><td>
+
 [linkInsert?](#)
 
 </td><td>

packages/docs/src/routes/docs/(qwik)/advanced/modules-prefetching/index.mdx

@@ -78,6 +78,7 @@ export default function (opts: RenderToStreamOptions) {
 | `prefetchEvent` | Dispatch a `qprefetch` event with `detail` data containing the urls that should be prefetched. The event dispatch script will be inlined into the document's HTML. By default, the `prefetchEvent` implementation will be set to `always`. |
 | `linkInsert` | Insert the `<link>` element into the document. When using `html-append`, it will render each `<link>` directly within the html, appended at the end of the body. Using the `js-append` option, it will instead insert some JavaScript, which creates the elements at runtime and appends them at the end of the body. |
 | `linkRel` | This option is used to define the [`rel` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) of the `<link>` element. When the `linkInsert` option is used, the default is `prefetch`. Other options include `preload` and `modulepreload`. |
+| `linkFetchPriority` | This option is used to define the [`fetchpriority` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#fetchpriority) of the `<link>` element. When the `linkInsert` option is used, the default is `null`. Other options include `low`, `high` and `auto`.
 | `workerFetchInsert` | Prefetch urls by calling a `fetch()` for each module, with the goal of populating the network cache. |
 
 #### Dispatched Prefetch Event

packages/docs/src/routes/docs/(qwik)/components/overview/index.mdx

@@ -61,7 +61,7 @@ export default component$(() => {
 </CodeSandbox>
 
 > The `component$` function, marked by the trailing `$`, enables the Optimizer to split components into separate chunks.
-This allows each chunk to be loaded independently as needed, rather than loading all components whenever the parent component is loaded. 
+This allows each chunk to be loaded independently as needed, rather than loading all components whenever the parent component is loaded.
 > Note: index.tsx, layout.tsx in routes folder, root.tsx and all entry files need **export default**. For other components you can use export const and export function.
 
 ### Composing Components
@@ -113,13 +113,13 @@ export default component$(() => {
 
 ## Props
 
-Props are used to pass data from the parent into the component. Data passed via props is accessible via the `props` argument to the `component$` function. 
+Props are used to pass data from the parent into the component. Data passed via props is accessible via the `props` argument to the `component$` function.
 
 Props are shallowly immutable, meaning primitive data types (strings, numbers, booleans) cannot be changed once passed. However, internal elements of reference types (objects, arrays, functions) can be changed despite the reference itself being immutable.
 
 To change primitive props data in the parent component from the child component, use signals. When updating data locally within the child component a signal is not necessary, destructure the props and use the values to define new local variables.
 
-The two examples below show a component `Item` that declares optional `name`, `quantity`, `description`, and `price` props. 
+The two examples below show a component `Item` that declares optional `name`, `quantity`, `description`, and `price` props.
 
 In the first example, primitive data types are passed via props. The `price` prop is passed as a signal and can be changed from the parent component. `quantity` is passed as a number value that is used to define a new signal in `Item` that can be reactively updated locally. Alternatively, if quantity did not need to be reactive it could be defined as a normal variable instead of a signal.
 
@@ -500,14 +500,14 @@ Note the `string extends C`, this is only true when TypeScript cannot infer the
 - [`$()`](../../advanced/qrl/index.mdx) - creates a QRL
 - [`noSerialize()`](/docs/components/state/#noserialize)
 - `useErrorBoundary()`
+- [`qwikVite()`](../../advanced/vite/index.mdx#qwikvite) - entry point for qwik with vite
 
 ### Components
 
 - [`<Slot>`](../slots/index.mdx) - declares a content projection slot
 - `<SSRStreamBlock>` - declares a stream block
 - `<SSRStream>` - declares a stream
 - `<Fragment>` - declares a JSX fragment
-
 ## See Also
 
 - [Inline components](../overview/index.mdx#inline-components)

packages/docs/src/routes/docs/(qwikcity)/qwikcity/index.mdx

@@ -35,8 +35,9 @@ While Qwik focuses on the Component API, Qwik City provides APIs that support co
 - [middleware](/docs/middleware/): A centralized way to perform cross-cutting concerns such as authentication, security, caching, redirects, and logging.
 - [server$](/docs/server$/): A simple way to execute logic on the server.
 - [cache](/docs/caching/): Control caching of your content.
-- [env variables](/docs/env-variables/): API to manage reading environment variables, commonly used for keys, in a platform independent way.
+- [env variables](/docs/guides/env-variables/): API to manage reading environment variables, commonly used for keys, in a platform independent way.
 - Supports both Server Side Rendering (SSR) for fully dynamic sites as well as Static Site Generation (SSG) to be hosted on static web servers and CDNs.
+- [`vite`](/docs/(qwik)/advanced/vite/index.mdx#qwikcity) - entry point & configuration for Qwik City.
 
 > Qwik¹ City²
 >