Merge pull request #7488 from wmertens/fixes

chore: some small fixes

Author: wmertens

packages/docs/src/entry.ssr.tsx

@@ -1,7 +1,37 @@
 import { renderToStream, type RenderToStreamOptions } from '@builder.io/qwik/server';
 import Root from './root';
 
+// You can pass these as query parameters, as well as `preloadDebug`
+const preloaderSettings = [
+  'maxPreloads',
+  'minProbability',
+  'maxSimultaneousPreloads',
+  'minPreloadProbability',
+] as const;
+
 export default function (opts: RenderToStreamOptions) {
+  const { serverData } = opts;
+  const urlStr = serverData?.url;
+  if (urlStr) {
+    const { searchParams } = new URL(urlStr);
+    if (searchParams.size) {
+      opts = {
+        ...opts,
+        prefetchStrategy: {
+          ...opts.prefetchStrategy,
+          implementation: { ...opts.prefetchStrategy?.implementation },
+        },
+      };
+      if (searchParams.has('preloadDebug')) {
+        opts.prefetchStrategy!.implementation!.debug = true;
+      }
+      for (const type of preloaderSettings) {
+        if (searchParams.has(type)) {
+          opts.prefetchStrategy!.implementation![type] = Number(searchParams.get(type));
+        }
+      }
+    }
+  }
   return renderToStream(<Root />, {
     qwikLoader: {
       // The docs can be long so make sure to intercept events before the end of the document.

packages/qwik/package.json

@@ -25,7 +25,8 @@
     }
   ],
   "dependencies": {
-    "csstype": "^3.1"
+    "csstype": "^3.1",
+    "rollup": ">= 4.39.0"
   },
   "devDependencies": {
     "@builder.io/qwik": "workspace:^",

packages/qwik/src/core/preloader/bundle-graph.ts

@@ -7,7 +7,7 @@ import {
 } from './constants';
 import { adjustProbabilities, bundles, log, trigger } from './queue';
 import type { BundleGraph, BundleImport, ImportProbability } from './types';
-import { BundleImportState } from './types';
+import { BundleImportState_None, BundleImportState_Alias } from './types';
 
 export let base: string | undefined;
 export let graph: BundleGraph;
@@ -21,7 +21,7 @@ const makeBundle = (name: string, deps?: ImportProbability[]) => {
   return {
     $name$: name,
     $url$: url,
-    $state$: url ? BundleImportState.None : BundleImportState.Alias,
+    $state$: url ? BundleImportState_None : BundleImportState_Alias,
     $deps$: deps,
     $inverseProbability$: 1,
     $createdTs$: Date.now(),

packages/qwik/src/core/preloader/queue.ts

@@ -9,7 +9,12 @@ import {
   rel,
 } from './constants';
 import type { BundleImport, BundleImports } from './types';
-import { BundleImportState } from './types';
+import {
+  BundleImportState_None,
+  BundleImportState_Queued,
+  BundleImportState_Preload,
+  BundleImportState_Loaded,
+} from './types';
 
 export const bundles: BundleImports = new Map();
 let queueDirty: boolean;
@@ -81,7 +86,8 @@ export const trigger = () => {
         Math.max(1, config[maxSimultaneousPreloadsStr] * probability)
       : // While the graph is not available, we limit to 2 preloads
         2;
-    if (preloadCount < allowedPreloads) {
+    // When we're 100% sure, everything needs to be queued
+    if (probability === 1 || preloadCount < allowedPreloads) {
       queue.shift();
       preloadOne(bundle);
     } else {
@@ -93,7 +99,7 @@ export const trigger = () => {
    * for other resources, so we cycle between 4 and 10 outstanding modulepreloads.
    */
   if (config.DEBUG && !queue.length) {
-    const loaded = [...bundles.values()].filter((b) => b.$state$ > BundleImportState.None);
+    const loaded = [...bundles.values()].filter((b) => b.$state$ > BundleImportState_None);
     const waitTime = loaded.reduce((acc, b) => acc + b.$waitedMs$, 0);
     const loadTime = loaded.reduce((acc, b) => acc + b.$loadedMs$, 0);
     log(
@@ -103,16 +109,20 @@ export const trigger = () => {
 };
 
 const preloadOne = (bundle: BundleImport) => {
-  if (bundle.$state$ >= BundleImportState.Preload) {
+  if (bundle.$state$ >= BundleImportState_Preload) {
     return;
   }
   preloadCount++;
 
   const start = Date.now();
   bundle.$waitedMs$ = start - bundle.$createdTs$;
-  bundle.$state$ = BundleImportState.Preload;
+  bundle.$state$ = BundleImportState_Preload;
 
-  config.DEBUG && log(`<< load after ${`${bundle.$waitedMs$}ms`}`, bundle.$name$);
+  config.DEBUG &&
+    log(
+      `<< load ${Math.round((1 - bundle.$inverseProbability$) * 100)}% after ${`${bundle.$waitedMs$}ms`}`,
+      bundle.$name$
+    );
 
   const link = doc.createElement('link');
   link.href = bundle.$url$!;
@@ -124,7 +134,7 @@ const preloadOne = (bundle: BundleImport) => {
     preloadCount--;
     const end = Date.now();
     bundle.$loadedMs$ = end - start;
-    bundle.$state$ = BundleImportState.Loaded;
+    bundle.$state$ = BundleImportState_Loaded;
     config.DEBUG && log(`>> done after ${bundle.$loadedMs$}ms`, bundle.$name$);
     // Keep the <head> clean
     link.remove();
@@ -151,11 +161,11 @@ export const adjustProbabilities = (
   }
 
   if (
-    bundle.$state$ < BundleImportState.Preload &&
+    bundle.$state$ < BundleImportState_Preload &&
     bundle.$inverseProbability$ < config[maxSignificantInverseProbabilityStr]
   ) {
-    if (bundle.$state$ === BundleImportState.None) {
-      bundle.$state$ = BundleImportState.Queued;
+    if (bundle.$state$ === BundleImportState_None) {
+      bundle.$state$ = BundleImportState_Queued;
       queue.push(bundle);
       config.DEBUG &&
         log(`queued ${Math.round((1 - bundle.$inverseProbability$) * 100)}%`, bundle.$name$);

packages/qwik/src/core/preloader/types.ts

@@ -1,10 +1,8 @@
-export const enum BundleImportState {
-  None,
-  Queued,
-  Preload,
-  Alias,
-  Loaded,
-}
+export const BundleImportState_None = 0;
+export const BundleImportState_Queued = 1;
+export const BundleImportState_Preload = 2;
+export const BundleImportState_Alias = 3;
+export const BundleImportState_Loaded = 4;
 
 export type BundleInfo = {
   $inverseProbability$: number;
@@ -15,7 +13,7 @@ export type BundleInfo = {
 export type BundleImport = BundleInfo & {
   $name$: string;
   $url$: string | null;
-  $state$: BundleImportState;
+  $state$: number;
   $createdTs$: number;
   $waitedMs$: number;
   $loadedMs$: number;

packages/qwik/src/server/prefetch-strategy.ts

@@ -48,9 +48,14 @@ export function getPreloadPaths(
   }
 
   // If we have a bundle graph, all we need is the symbols
-  return (snapshotResult?.qrls as QRLInternal[])
-    ?.map((qrl) => getSymbolHash(qrl.$refSymbol$ || qrl.$symbol$))
-    .filter(Boolean) as string[];
+  const symbols = new Set<string>();
+  for (const qrl of (snapshotResult?.qrls || []) as QRLInternal[]) {
+    const symbol = getSymbolHash(qrl.$refSymbol$ || qrl.$symbol$);
+    if (symbol && symbol.length >= 10) {
+      symbols.add(symbol);
+    }
+  }
+  return [...symbols];
 }
 
 export const expandBundles = (names: string[], resolvedManifest?: ResolvedManifest) => {

pnpm-lock.yaml

@@ -1,6 +1,47 @@
 import { join } from 'node:path';
 import { build } from 'vite';
 import { fileSize, type BuildConfig } from './util';
+import { minify } from 'terser';
+import type { Plugin } from 'vite';
+
+/**
+ * Custom plugin to apply terser during the bundle generation. Vite doesn't minify library ES
+ * modules.
+ */
+function customTerserPlugin(): Plugin {
+  return {
+    name: 'custom-terser',
+    async renderChunk(code, chunk) {
+      // Only process JavaScript chunks
+      if (!chunk.fileName.endsWith('.mjs') && !chunk.fileName.endsWith('.js')) {
+        return null;
+      }
+
+      // Keep the result readable for debugging
+      const result = await minify(code, {
+        compress: {
+          defaults: false,
+          module: true,
+          hoist_props: true,
+          unused: true,
+          booleans_as_integers: true,
+        },
+        mangle: {
+          toplevel: false,
+          properties: {
+            // use short attribute names for internal properties
+            regex: '^\\$.+\\$$|^[A-Z][a-zA-Z]+$',
+          },
+        },
+        format: {
+          comments: true,
+        },
+      });
+
+      return result.code || null;
+    },
+  };
+}
 
 /**
  * Builds the qwikloader javascript files using Vite. These files can be used by other tooling, and
@@ -18,24 +59,10 @@ export async function submodulePreloader(config: BuildConfig) {
       rollupOptions: {
         external: ['@builder.io/qwik/build'],
       },
-      minify: 'terser',
-      terserOptions: {
-        compress: {
-          dead_code: true,
-          unused: true,
-          conditionals: true,
-        },
-        mangle: {
-          toplevel: false,
-          module: false,
-          keep_fnames: true,
-          properties: {
-            regex: '^\\$.+\\$$',
-          },
-        },
-      },
+      minify: false, // This is the default, just to be explicit
       outDir: config.distQwikPkgDir,
     },
+    plugins: [customTerserPlugin()],
   });
 
   const preloaderSize = await fileSize(join(config.distQwikPkgDir, 'preloader.mjs'));