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

chore: merge main into v2

.github/workflows/ci.yml

@@ -53,13 +53,15 @@ jobs:
       hash-insights: ${{ steps.cache-insights.outputs.cache-primary-key }}
       hash-unit: ${{ steps.cache-unit.outputs.cache-primary-key }}
       hash-e2e: ${{ steps.cache-e2e.outputs.cache-primary-key }}
+      hash-cli-e2e: ${{ steps.cache-cli-e2e.outputs.cache-primary-key }}
       build-qwik: ${{ steps.cache-qwik.outputs.cache-hit != 'true' }}
       build-rust: ${{ steps.cache-rust.outputs.cache-hit != 'true' }}
       build-others: ${{ steps.cache-others.outputs.cache-hit != 'true' }}
       build-docs: ${{ steps.cache-docs.outputs.cache-hit != 'true' }}
       build-insights: ${{ steps.cache-insights.outputs.cache-hit != 'true' }}
       build-unit: ${{ steps.cache-unit.outputs.cache-hit != 'true' }}
       build-e2e: ${{ steps.cache-e2e.outputs.cache-hit != 'true' }}
+      build-cli-e2e: ${{ steps.cache-cli-e2e.outputs.cache-hit != 'true' }}
       disttag: ${{ steps.set_dist_tag.outputs.disttag }}
 
     steps:
@@ -154,7 +156,7 @@ jobs:
             packages/eslint-plugin-qwik/dist
             packages/create-qwik/dist
           # note that all inputs need to be listed here, including qwik, for correct cache invalidation
-          key: ${{ hashfiles('qwik-key.txt', 'rust-key.txt', 'packages/qwik-router/**/*', 'packages/qwik-react/**/*', 'packages/eslint-plugin-qwik/**/*', 'packages/create-qwik/**/*', '!**/*.unit.*') }}
+          key: ${{ hashfiles('qwik-key.txt', 'rust-key.txt', 'packages/qwik-router/**/*', 'packages/qwik-react/**/*', 'packages/eslint-plugin-qwik/**/*', 'packages/create-qwik/**/*', 'starters/apps/**/*', 'starters/features/**/*', 'starters/adapters/**/*', '!**/*.unit.*') }}
       - run: 'echo ${{ steps.cache-others.outputs.cache-primary-key }} > others-key.txt'
       - name: 'check cache: docs'
         id: cache-docs
@@ -186,6 +188,13 @@ jobs:
           lookup-only: true
           path: e2e-tests-completed.txt
           key: ${{ hashfiles('others-key.txt', 'starters/**/*') }}
+      - name: 'check cache: cli e2e tests'
+        id: cache-cli-e2e
+        uses: actions/cache/restore@v4
+        with:
+          lookup-only: true
+          path: cli-e2e-tests-completed.txt
+          key: ${{ hashfiles('others-key.txt', 'e2e/**/*') }}
 
   ############ BUILD Qwik ############
   build-qwik:
@@ -207,7 +216,6 @@ jobs:
 
       - name: Install NPM Dependencies
         run: |
-          corepack enable
           # Ensure that the qwik binary gets made
           mkdir -p packages/qwik/bindings/
           pnpm install --frozen-lockfile
@@ -272,6 +280,7 @@ jobs:
           node-version: 20.x
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org/
+
       - run: pnpm install
       - if: matrix.settings.wasm
         run: pnpm install wasm-pack
@@ -396,7 +405,7 @@ jobs:
 
       - name: Install NPM Dependencies
         if: needs.changes.outputs.build-others == 'true'
-        run: corepack pnpm install
+        run: pnpm install
 
       - name: 'build: qwik-router & others'
         if: needs.changes.outputs.build-others == 'true'
@@ -507,7 +516,7 @@ jobs:
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org/
 
-      - run: corepack pnpm install --frozen-lockfile
+      - run: pnpm install --frozen-lockfile
       - name: Build Qwik Insights
         run: pnpm run build.packages.insights
 
@@ -558,7 +567,7 @@ jobs:
           mv artifact-eslint-plugin-qwik/* packages/eslint-plugin-qwik/dist/
           mv artifact-qwikreact/lib packages/qwik-react/lib
 
-      - run: corepack pnpm install --frozen-lockfile
+      - run: pnpm install --frozen-lockfile
       - name: Build Qwik Docs
         run: pnpm run build.packages.docs && echo ok > docs-build-completed.txt
 
@@ -601,7 +610,6 @@ jobs:
           node-version: 20.x
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org/
-      - run: corepack enable
 
       - name: Download Build Artifacts
         uses: actions/download-artifact@v4
@@ -665,7 +673,6 @@ jobs:
           node-version: 20.x
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org/
-      - run: corepack enable
 
       - name: Download Build Artifacts
         uses: actions/download-artifact@v4
@@ -696,7 +703,7 @@ jobs:
   ############ E2E CLI TEST ############
   test-cli-e2e:
     name: E2E CLI Tests
-    if: always() && needs.changes.outputs.build-e2e == 'true'
+    if: always() && needs.changes.outputs.build-cli-e2e == 'true'
 
     needs:
       - build-other-packages
@@ -723,7 +730,6 @@ jobs:
           node-version: 20.x
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org/
-      - run: corepack enable
 
       - name: Download Build Artifacts
         uses: actions/download-artifact@v4
@@ -758,7 +764,6 @@ jobs:
           node-version: 20.x
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org/
-      - run: corepack enable
 
       - run: pnpm install --frozen-lockfile
 
@@ -787,6 +792,7 @@ jobs:
       - changes
       - test-unit
       - test-e2e
+      - test-cli-e2e
     # test-unit runs when any packages changes, so we have to release
     # on "upcoming", we always check if we have something to release
     # don't run on forks
@@ -813,6 +819,21 @@ jobs:
           key: ${{ needs.changes.outputs.hash-e2e }}
           path: e2e-tests-completed.txt
 
+      - name: Verify test-cli-e2e
+        if: needs.test-cli-e2e.result != 'skipped'
+        run: |
+          if [ "${{ needs.test-cli-e2e.result }}" != success ] ; then
+            exit 1
+          else
+            echo ok > cli-e2e-tests-completed.txt
+          fi
+      - name: Save cli-e2e tests cache
+        if: needs.test-cli-e2e.result != 'skipped'
+        uses: actions/cache/save@v4
+        with:
+          key: ${{ needs.changes.outputs.hash-cli-e2e }}
+          path: cli-e2e-tests-completed.txt
+
       - name: Checkout
         uses: actions/checkout@v4
 
@@ -823,7 +844,6 @@ jobs:
           node-version: 20.x
           cache: 'pnpm'
           registry-url: https://registry.npmjs.org/
-      - run: corepack enable
 
       - name: Download Build Artifacts
         uses: actions/download-artifact@v4
@@ -910,6 +930,7 @@ jobs:
     needs:
       - test-unit
       - test-e2e
+      - test-cli-e2e
       - lint-package
       - build-docs
       - build-insights
@@ -920,6 +941,7 @@ jobs:
           !(
             (needs.test-unit.result == 'success' || needs.test-unit.result == 'skipped') &&
             (needs.test-e2e.result == 'success' || needs.test-e2e.result == 'skipped') &&
+            (needs.test-cli-e2e.result == 'success' || needs.test-cli-e2e.result == 'skipped') &&
             (needs.lint-package.result == 'success' || needs.lint-package.result == 'skipped') &&
             (needs.build-docs.result == 'success' || needs.build-docs.result == 'skipped') &&
             (needs.build-insights.result == 'success' || needs.build-insights.result == 'skipped')

e2e/qwik-cli-e2e/utils/index.ts

@@ -67,10 +67,10 @@ function replacePackagesWithLocalOnes(tmpDir: string) {
   for (const { name, absolutePath } of tarballConfig) {
     patchPackageJsonForPlugin(tmpDir, name, absolutePath);
   }
-  execSync('npm i', {
+  execSync('pnpm i', {
     cwd: tmpDir,
     // only output errors
-    stdio: ['ignore', 'ignore', 'inherit'],
+    stdio: ['ignore', 'inherit', 'inherit'],
   });
 }
 

e2e/qwik-cli-e2e/vite.config.mts

@@ -1,5 +1,15 @@
 import { defineConfig } from 'vitest/config';
 import tsconfigPaths from 'vite-tsconfig-paths';
+import { resolve } from 'path';
+import { mkdirSync } from 'fs';
+
+// if we're running in github CI
+if (process.env.CI) {
+  // Workaround for npm/pnpm crashing in scaffoldQwikProject because "name is too long"
+  const testPath = resolve(process.cwd(), 'e2e-test-tmp');
+  mkdirSync(testPath);
+  process.env.TEMP_E2E_PATH = testPath;
+}
 
 export default defineConfig({
   plugins: [tsconfigPaths({ ignoreConfigErrors: true, root: '../../' })],

package.json

@@ -10,6 +10,16 @@
   "config": {
     "syncpack": {
       "versionGroups": [
+        {
+          "label": "Allow ESLint 9 types in eslint-plugin-qwik",
+          "dependencies": [
+            "@types/eslint"
+          ],
+          "packages": [
+            "eslint-plugin-qwik"
+          ],
+          "policy": "[email protected]"
+        },
         {
           "label": "Be lenient in vite versions for prod. v4 is broken, v5 is good",
           "dependencyTypes": [
@@ -153,7 +163,7 @@
     "yarn": "please-use-pnpm",
     "pnpm": ">=9.0.5"
   },
-  "packageManager": "pnpm@9.1.2",
+  "packageManager": "pnpm@9.15.5",
   "pnpm": {
     "overrides": {
       "typescript": "5.4.5",
@@ -187,8 +197,8 @@
     "build.wasm": "tsx --require ./scripts/runBefore.ts scripts/index.ts --wasm",
     "build.watch": "tsx --require ./scripts/runBefore.ts scripts/index.ts --build  --qwikrouter --watch --dev --platform-binding",
     "change": "changeset",
-    "cli": "pnpm build.cli && node packages/create-qwik/dist/create-qwik.cjs && tsx --require ./scripts/runBefore.ts scripts/validate-cli.ts --copy-local-qwik-dist",
-    "cli.qwik": "pnpm build.cli && node packages/qwik/dist/qwik-cli.cjs",
+    "cli": "pnpm build.cli && node packages/create-qwik/create-qwik.cjs && tsx --require ./scripts/runBefore.ts scripts/validate-cli.ts --copy-local-qwik-dist",
+    "cli.qwik": "pnpm build.cli && node packages/qwik/qwik-cli.cjs",
     "cli.validate": "tsx --require ./scripts/runBefore.ts scripts/validate-cli.ts",
     "deps": "corepack pnpm upgrade -i -r --latest && syncpack fix-mismatches && corepack pnpm dedupe",
     "docs.dev": "cd packages/docs && pnpm build.repl-sw && pnpm dev",

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

@@ -59,7 +59,7 @@ const _loadDependencies = async (replOptions: ReplInputOptions) => {
     isServer: true,
     isBrowser: false,
     isDev: false,
-  };
+  } as typeof self.qwikBuild;
 
   const cachedCjsCode = `qwikWasmCjs${realQwikVersion}`;
   const cachedWasmRsp = `qwikWasmRsp${realQwikVersion}`;

packages/docs/src/routes/(blog)/blog/(articles)/resumable-react-how-to-use-react-inside-qwik/index.mdx

@@ -31,7 +31,7 @@ Follow the CLI (command line interface) prompts. When you finish, it should look
 
 ## Installing `qwik-react`
 
-Next, we need to add [`qwik-react`](https://qwik.dev/integrations/integration/react/) so we can wrap our React components with the `qwikify$()` method:
+Next, we need to add [`qwik-react`](https://qwik.dev/integrations/react/) so we can wrap our React components with the `qwikify$()` method:
 
 ```bash
 pnpm run qwik add react
@@ -331,7 +331,7 @@ This works. However, notice from the video below, React is loaded, as my React D
   <source src="https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fabac48a50e7f43b198129c1a8429d46b%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&token=abac48a50e7f43b198129c1a8429d46b&alt=media&optimized=true" type="video/mp4"/>
 </video>
 
-In order to get the result we want, we need to use the `host:` attribute, which allows us to [listen to DOM events without hydration](https://qwik.dev/integrations/integration/react/#listen-to-dom-events-without-hydration).
+In order to get the result we want, we need to use the `host:` attribute, which allows us to [listen to DOM events without hydration](https://qwik.dev/integrations/react/#listen-to-dom-events-without-hydration).
 
 Let’s refactor a bit and see what this looks like:
 

packages/docs/src/routes/(ecosystem)/ecosystem.css

@@ -247,3 +247,8 @@
 .add-integration svg {
   margin: auto;
 }
+
+[data-theme='dark'] [alt='GitHub'],
+[data-theme='dark'] [alt='Twitter'] {
+  filter: invert(1);
+}

packages/docs/src/routes/demo/layout.tsx

@@ -30,7 +30,7 @@ function logQSymbols() {
       }
       console.info('QSymbol', symbol);
     });
-  function interceptLogFn(name: 'debug' | 'error' | 'info' | 'log' | 'warn') {
+  for (const name of ['debug', 'error', 'info', 'log', 'warn'] as const) {
     const delegate = console[name];
     console[name] = function (...args: any[]) {
       const li = document.createElement('li');
@@ -53,5 +53,4 @@ function logQSymbols() {
       return delegate.apply(console, args);
     };
   }
-  (['debug', 'error', 'info', 'log', 'warn'] as const).forEach(interceptLogFn);
 }

packages/docs/src/routes/docs/(qwik)/advanced/vite/index.mdx

@@ -50,7 +50,7 @@ To modify the configuration, you can pass an object to the `qwikVite` function.
 
 ```js
 /**
- * Prints verbose Qwik plugin debug logs.
+ * Prints verbose Qwik plugin debug logs and shows chunk file names ouput in preview/production environments.
  * Default `false`
  */
 debug?: boolean;

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

@@ -187,7 +187,7 @@ const shallowStore = useStore(
 > ```tsx
 > delete store.propertyName;
 > ```
-> Be sure to access this property cautiously in the componet by using optional chaining ( ?. ):
+> Be sure to access this property cautiously in the component by using optional chaining ( ?. ):
 > ```tsx
 > const propertyValue = store.propertyName?.value;
 > ```

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

@@ -187,6 +187,7 @@ export const Cmp = component$(() => {
 ## Scoped CSS
 
 To use scoped CSS, you can use the `useStylesScoped$()` hook exported from `@qwik.dev/core`.
+> `useStylesScoped$()` uses an emoji to set a unique name on the selector, to avoid CSS name / selector clashes, and to ensure that the styles are correctly scoped as expected.
 
 ```tsx {4-8} title="src/components/MyComponent/MyComponent.tsx"
 import { component$, useStylesScoped$ } from '@qwik.dev/core';

packages/docs/src/routes/docs/integrations/authjs/index.mdx

@@ -89,7 +89,7 @@ When migrating from `@builder.io/qwik-auth` to `@auth/qwik`, there are a couple
       const session: Session | null = event.sharedMap.get('session');
       if (!session || new Date(session.expires) < new Date()) {
     -    throw event.redirect(302, `/api/auth/signin?redirectTo=${event.url.pathname}`);
-    +    throw event.redirect(302, `/auth/signin?redirectTo=${event.url.pathname}`);
+    +    throw event.redirect(302, `/auth/signin?callbackUrl=${event.url.pathname}`);
       }
     };
     ```
@@ -353,7 +353,7 @@ Session data can be accessed via the route `event.sharedMap`.  So a route can be
 export const onRequest: RequestHandler = (event) => {
   const session: Session | null = event.sharedMap.get('session');
   if (!session || new Date(session.expires) < new Date()) {
-    throw event.redirect(302, `/auth/signin?redirectTo=${event.url.pathname}`);
+    throw event.redirect(302, `/auth/signin?callbackUrl=${event.url.pathname}`);
   }
 };
 ```