Fix SPA buffering

.changeset/proud-adults-collect.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik-city': patch
+---
+
+FEAT: added `verbose` logger to QwikCity Service Worker

e2e/buffering/.gitignore

@@ -0,0 +1,5 @@
+playwright-report
+dist
+logs
+server
+tmp

e2e/buffering/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "qwik-buffering-test-app",
+  "description": "Qwik buffering test app",
+  "engines": {
+    "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+  },
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "qwik build",
+    "build.client": "vite build",
+    "build.preview": "vite build --ssr src/entry.preview.tsx",
+    "build.types": "tsc --incremental --noEmit",
+    "deploy": "vercel deploy",
+    "dev": "vite --mode ssr",
+    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
+    "fmt": "prettier --write .",
+    "fmt.check": "prettier --check .",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "preview": "qwik build preview && vite preview --open",
+    "start": "vite --open --mode ssr",
+    "qwik": "qwik",
+    "test": "playwright test",
+    "test.ui": "playwright test --ui",
+    "test.debug": "playwright test --debug"
+  }
+}

e2e/buffering/playwright.config.ts

@@ -0,0 +1,45 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/** See https://playwright.dev/docs/test-configuration. */
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+
+  use: {
+    baseURL: 'http://localhost:4173',
+    // trace: 'on-first-retry',
+    // screenshot: 'only-on-failure',
+
+    // Increase timeouts for service worker operations
+    actionTimeout: 10000,
+    navigationTimeout: 10000,
+  },
+
+  // Increase global timeout for service worker tests
+  timeout: 30000,
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+  ],
+
+  webServer: {
+    command: 'npm run preview',
+    port: 4173,
+    reuseExistingServer: !process.env.CI,
+  },
+});

e2e/buffering/src/components/click-me/click-me.tsx

@@ -0,0 +1,18 @@
+import { component$, useSignal } from '@builder.io/qwik';
+
+// We need to extract the component to see the bug on 1.5.7
+export default component$(() => {
+  const isOpenSig = useSignal(false);
+  return (
+    <>
+      <button
+        onClick$={() => {
+          return (isOpenSig.value = !isOpenSig.value);
+        }}
+      >
+        click me
+      </button>
+      {isOpenSig.value && <div data-testid="hi">Hi 👋</div>}
+    </>
+  );
+});

e2e/buffering/src/components/router-head/router-head.tsx

@@ -0,0 +1,24 @@
+import { component$ } from '@builder.io/qwik';
+import { useDocumentHead, useLocation } from '@builder.io/qwik-city';
+
+export const RouterHead = component$(() => {
+  const head = useDocumentHead();
+  const loc = useLocation();
+
+  return (
+    <>
+      <title>{head.title}</title>
+
+      <link rel="canonical" href={loc.url.href} />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+      {head.meta.map((m) => (
+        <meta key={m.key} {...m} />
+      ))}
+
+      {head.links.map((l) => (
+        <link key={l.key} {...l} />
+      ))}
+    </>
+  );
+});

e2e/buffering/src/entry.dev.tsx

@@ -0,0 +1,17 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * Development entry point using only client-side modules:
+ * - Do not use this mode in production!
+ * - No SSR
+ * - No portion of the application is pre-rendered on the server.
+ * - All of the application is running eagerly in the browser.
+ * - More code is transferred to the browser than in SSR mode.
+ * - Optimizer/Serialization/Deserialization code is not exercised!
+ */
+import { render, type RenderOptions } from '@builder.io/qwik';
+import Root from './root';
+
+export default function (opts: RenderOptions) {
+  return render(document, <Root />, opts);
+}

e2e/buffering/src/entry.preview.tsx

@@ -0,0 +1,19 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * It's the bundle entry point for `npm run preview`.
+ * That is, serving your app built in production mode.
+ *
+ * Feel free to modify this file, but don't remove it!
+ *
+ * Learn more about Vite's preview command:
+ * - https://vitejs.dev/config/preview-options.html#preview-options
+ *
+ */
+import { createQwikCity } from '@builder.io/qwik-city/middleware/node';
+import qwikCityPlan from '@qwik-city-plan';
+// make sure qwikCityPlan is imported before entry
+import render from './entry.ssr';
+
+/** The default export is the QwikCity adapter used by Vite preview. */
+export default createQwikCity({ render, qwikCityPlan });

e2e/buffering/src/entry.ssr.tsx

@@ -0,0 +1,35 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is rendered outside the browser, this entry point
+ * will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - Npm run start
+ * - Npm run preview
+ * - Npm run build
+ */
+import { renderToStream, type RenderToStreamOptions } from '@builder.io/qwik/server';
+import { manifest } from '@qwik-client-manifest';
+import Root from './root';
+
+export default function (opts: RenderToStreamOptions) {
+  return renderToStream(<Root />, {
+    manifest,
+    ...opts,
+    // Use container attributes to set attributes on the html tag.
+    containerAttributes: {
+      lang: 'en-us',
+      ...opts.containerAttributes,
+    },
+    // prefetchStrategy: {
+    //   implementation: {
+    //     linkInsert: "html-append",
+    //     linkRel: "modulepreload",
+    //   },
+    // },
+    serverData: {
+      ...opts.serverData,
+    },
+  });
+}

e2e/buffering/src/root.tsx

@@ -0,0 +1,27 @@
+import { component$ } from '@builder.io/qwik';
+import { QwikCityProvider, RouterOutlet, ServiceWorkerRegister } from '@builder.io/qwik-city';
+import { RouterHead } from './components/router-head/router-head';
+
+export default component$(() => {
+  /**
+   * The root of a QwikCity site always start with the <QwikCityProvider> component, immediately
+   * followed by the document's <head> and <body>.
+   *
+   * Don't remove the `<head>` and `<body>` elements.
+   */
+
+  return (
+    <QwikCityProvider>
+      <head>
+        <meta charSet="utf-8" />
+        <RouterHead />
+        {/* <PrefetchGraph />
+        <PrefetchServiceWorker /> */}
+      </head>
+      <body lang="en">
+        <RouterOutlet />
+        <ServiceWorkerRegister verbose={true} />
+      </body>
+    </QwikCityProvider>
+  );
+});

e2e/buffering/src/routes/index.tsx

@@ -0,0 +1,26 @@
+import { component$ } from '@builder.io/qwik';
+import { type DocumentHead } from '@builder.io/qwik-city';
+import ClickMe from '~/components/click-me/click-me';
+
+export default component$(() => {
+  return (
+    <>
+      <a href="/profile">go to profile</a>
+      <br />
+      <h1>Home page</h1>
+      <br />
+      {/* We need to extract the component to see the bug on 1.5.7 */}
+      <ClickMe />
+    </>
+  );
+});
+
+export const head: DocumentHead = {
+  title: 'Welcome to Qwik',
+  meta: [
+    {
+      name: 'description',
+      content: 'Qwik site description',
+    },
+  ],
+};

e2e/buffering/src/routes/layout.tsx

@@ -0,0 +1,5 @@
+import { component$, Slot } from '@builder.io/qwik';
+
+export default component$(() => {
+  return <Slot />;
+});

e2e/buffering/src/routes/profile/index.tsx

@@ -0,0 +1,11 @@
+import { component$ } from '@builder.io/qwik';
+
+export default component$(() => {
+  return (
+    <>
+      <a href="/">go to home</a>
+      <br />
+      <h1>Profile page 🙂</h1>
+    </>
+  );
+});

e2e/buffering/src/routes/service-worker.ts

@@ -0,0 +1,18 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * The service-worker.ts file is used to have state of the art prefetching.
+ * https://qwik.dev/qwikcity/prefetching/overview/
+ *
+ * Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline.
+ * You can also use this file to add more functionality that runs in the service worker.
+ */
+import { setupServiceWorker } from '@builder.io/qwik-city/service-worker';
+
+setupServiceWorker();
+
+addEventListener('install', () => self.skipWaiting());
+
+addEventListener('activate', () => self.clients.claim());
+
+declare const self: ServiceWorkerGlobalScope;

e2e/buffering/tests/basic.spec.ts

@@ -0,0 +1,46 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Bufferring', () => {
+  test.beforeEach(async ({ page }) => {
+    // Clear cache before each test
+    await page.goto('/');
+    await page.evaluate(async () => {
+      const cacheNames = await caches.keys();
+      await Promise.all(cacheNames.map((name) => caches.delete(name)));
+    });
+  });
+
+  test('should buffer all the bundles', async ({ page }) => {
+    await page.goto('/');
+
+    await page.waitForFunction(() => navigator.serviceWorker?.controller);
+
+    const requests = new Set<string>();
+
+    page.route('**/*.js', (route) => {
+      requests.add(route.request().url());
+      console.log('route', route.request().url());
+      route.continue();
+    });
+
+    // Interact with the page
+    const button = page.getByRole('button', { name: /click me/i });
+    await button.click();
+
+    console.log('requests', requests);
+    const jsBundles = Array.from(requests).filter((url) => url.includes('.js'));
+    console.log(jsBundles);
+
+    const cachedBundles = await page.evaluate(async (bundles) => {
+      const cache = await caches.open('QwikBuild');
+      const keys = await cache.keys();
+      console.log('keys', keys);
+      const cachedBundles = keys.map((key) => key.url);
+      console.log('cachedBundles', cachedBundles);
+      return cachedBundles;
+    }, jsBundles);
+
+    await expect(page.getByTestId('hi')).toBeVisible();
+    expect(cachedBundles).toEqual(jsBundles);
+  });
+});

e2e/buffering/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "allowJs": true,
+    "target": "ES2017",
+    "module": "ES2022",
+    "lib": ["es2022", "DOM", "WebWorker", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "@builder.io/qwik",
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "outDir": "tmp",
+    "noEmit": true,
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+
+  "include": ["src", "./*.d.ts", "./*.config.ts"]
+}