Merge branch 'QwikDev:main' into upgrade-eslint

Author: better-salmon

Diff for: .changeset/cyan-deers-glow.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik': patch
+---
+
+FIX: When csr is true, it causes a crash because resolve cannot be null as the second parameter

Diff for: .changeset/wicked-dolphins-boil.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-qwik': patch
+---
+
+FIX: Enhance lexical scope and skip variables declared by Qwik's internal hooks.

Diff for: package.json

@@ -194,7 +194,7 @@
     "api.update": "tsx --require ./scripts/runBefore.ts scripts/index.ts --tsc --api --dev",
     "build": "tsx --require ./scripts/runBefore.ts scripts/index.ts",
     "build.changelog-formatter": "tsc .changeset/changelog-github-custom.ts && mv .changeset/changelog-github-custom.js .changeset/changelog-github-custom.cjs",
-    "build.clean": "rm -rf packages/qwik/dist/ && rm -rf packages/qwik-city/lib/ && rm -rf packages/docs/dist/ && rm -rf packages/insights/dist/ && rm -rf packages/qwik-labs/lib/ && rm -rf packages/qwik-labs/vite/",
+    "build.clean": "tsx ./scripts/build-clean.ts",
     "build.cli": "tsx --require ./scripts/runBefore.ts scripts/index.ts --cli --dev",
     "build.cli.prod": "tsx --require ./scripts/runBefore.ts scripts/index.ts --cli",
     "build.core": "tsxs --require ./scripts/runBefore.ts scripts/index.ts --tsc --build --qwikcity --api --platform-binding",
@@ -217,7 +217,7 @@
     "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": "pnpm -C packages/docs build.repl-sw && pnpm -C packages/docs dev",
-    "docs.preview": "cd packages/docs && pnpm preview",
+    "docs.preview": "pnpm -C packages/docs preview",
     "docs.sync": "tsx --require ./scripts/runBefore.ts scripts/docs_sync/index.ts && pnpm fmt",
     "eslint.update": "tsx --require ./scripts/runBefore.ts scripts/eslint-docs.ts",
     "fmt": "pnpm prettier.fix && pnpm syncpack format",

Diff for: packages/docs/package.json

@@ -43,8 +43,6 @@
     "qwik-image": "0.0.10",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "rehype-pretty-code": "0.14.0",
-    "shiki": "1.29.1",
     "snarkdown": "2.0.0",
     "tailwindcss": "3.4.6",
     "terser": "5.31.3",
@@ -54,6 +52,11 @@
     "valibot": "0.33.3",
     "vite": "5.3.5",
     "vite-plugin-inspect": "0.8.5",
+    "shiki": "3.1.0",
+    "@shikijs/rehype": "3.1.0",
+    "@shikijs/transformers": "3.1.0",
+    "@shikijs/colorized-brackets": "3.1.0",
+    "@shikijs/types": "3.1.0",
     "wrangler": "3.65.1"
   },
   "engines": {

Diff for: packages/docs/src/components/code-sandbox/index.tsx

@@ -30,12 +30,7 @@ export default component$<{
           ))}
         </div>
       )}
-      <div
-        class="overflow-auto slot-container mb-4"
-        style={{
-          '--pretty-code-fragment-max-height': maxHeight ? maxHeight + 'px' : 'none',
-        }}
-      >
+      <div class="overflow-auto slot-container mb-4">
         <Slot name={tabs ? String(activeTab.value) : ''} />
       </div>
       <div class="browser shadow-xl">

Diff for: packages/docs/src/routes/docs/docs.css

@@ -185,29 +185,25 @@ h6 a:hover .icon {
   font-weight: 800;
 }
 
-[data-rehype-pretty-code-fragment] {
-  overflow: auto;
-  color: white;
-  background-color: rgb(1 31 51);
-  border-radius: 8px;
-  margin: 20px 0;
+.highlighted-word {
+  background: #4199d3;
+  color: #111 !important;
 }
 
-[data-rehype-pretty-code-fragment] pre {
-  overflow: auto;
-  border-radius: 8px;
-  max-height: var(--pretty-code-fragment-max-height);
+.highlighted {
+  background-color: #7b8d9f33 !important;
 }
 
-[data-rehype-pretty-code-title] {
-  padding: 5px 15px;
+.shiki-title {
   background: #4199d3;
-  font-family: monospace;
-  font-weight: bold;
+  color: #111;
+  display: block;
+  padding: 0.5rem;
+  border-radius: 8px 8px 0px 0px;
 }
 
-[data-highlighted-chars] {
-  background: #ac7ef4;
+pre {
+  border-radius: 8px;
 }
 
 .docs article pre {

Diff for: packages/docs/vite.config.mts

@@ -8,6 +8,10 @@ import { defineConfig, loadEnv, type Plugin } from 'vite';
 import Inspect from 'vite-plugin-inspect';
 import { examplesData, playgroundData, rawSource, tutorialData } from './vite.repl-apps';
 import { sourceResolver } from './vite.source-resolver';
+import shikiRehype from '@shikijs/rehype';
+import { transformerMetaHighlight, transformerMetaWordHighlight } from '@shikijs/transformers';
+import { transformerColorizedBrackets } from '@shikijs/colorized-brackets';
+import type { ShikiTransformer } from '@shikijs/types';
 
 const PUBLIC_QWIK_INSIGHTS_KEY = loadEnv('', '.', 'PUBLIC').PUBLIC_QWIK_INSIGHTS_KEY;
 const docsDir = new URL(import.meta.url).pathname;
@@ -52,9 +56,45 @@ const muteWarningsPlugin = (warningsToIgnore: string[][]): Plugin => {
   };
 };
 
-export default defineConfig(async () => {
-  const { default: rehypePrettyCode } = await import('rehype-pretty-code');
+function transformerShowEmptyLines(): ShikiTransformer {
+  return {
+    line(node) {
+      if (node.children.length === 0) {
+        node.children = [{ type: 'text', value: ' ' }];
+        return node;
+      }
+    },
+  };
+}
+
+function transformerMetaShowTitle(): ShikiTransformer {
+  return {
+    root(node) {
+      const meta = this.options.meta?.__raw;
+      if (!meta) {
+        return;
+      }
+      const titleMatch = meta.match(/title="([^"]*)"/);
+      if (!titleMatch) {
+        return;
+      }
+      const title = titleMatch[1] ?? '';
+      if (title.length > 0) {
+        node.children.unshift({
+          type: 'element',
+          tagName: 'div',
+          properties: {
+            class: 'shiki-title',
+          },
+          children: [{ type: 'text', value: title }],
+        });
+      }
+      meta.replace(titleMatch[0], '');
+    },
+  };
+}
 
+export default defineConfig(async () => {
   const routesDir = resolve('src', 'routes');
   return {
     dev: {
@@ -113,46 +153,16 @@ export default defineConfig(async () => {
         mdx: {
           rehypePlugins: [
             [
-              rehypePrettyCode as any,
+              shikiRehype,
               {
                 theme: 'dark-plus',
-                onVisitLine(node: any) {
-                  // Prevent lines from collapsing in `display: grid` mode, and
-                  // allow empty lines to be copy/pasted
-                  if (node.children.length === 0) {
-                    node.children = [{ type: 'text', value: ' ' }];
-                  }
-                },
-                onVisitHighlightedLine(node: any) {
-                  // Each line node by default has `class="line"`.
-                  if (node.properties.className) {
-                    node.properties.className.push('line--highlighted');
-                  }
-                },
-                onVisitHighlightedWord(node: any, id: string) {
-                  // Each word node has no className by default.
-                  node.properties.className = ['word'];
-                  if (id) {
-                    const backgroundColor = {
-                      a: 'rgb(196 42 94 / 59%)',
-                      b: 'rgb(0 103 163 / 56%)',
-                      c: 'rgb(100 50 255 / 35%)',
-                    }[id];
-
-                    const color = {
-                      a: 'rgb(255 225 225 / 100%)',
-                      b: 'rgb(175 255 255 / 100%)',
-                      c: 'rgb(225 200 255 / 100%)',
-                    }[id];
-                    if (node.properties['data-rehype-pretty-code-wrapper']) {
-                      node.children.forEach((childNode: any) => {
-                        childNode.properties.style = ``;
-                        childNode.properties.className = '';
-                      });
-                    }
-                    node.properties.style = `background-color: ${backgroundColor}; color: ${color};`;
-                  }
-                },
+                transformers: [
+                  transformerMetaHighlight(),
+                  transformerMetaWordHighlight(),
+                  transformerColorizedBrackets(),
+                  transformerShowEmptyLines(),
+                  transformerMetaShowTitle(),
+                ],
               },
             ],
           ],

Diff for: packages/eslint-plugin-qwik/src/validLexicalScope.ts

@@ -74,6 +74,11 @@ export const validLexicalScope = createRule({
           if (variableType === 'ImportBinding') {
             return;
           }
+
+          if (isQwikHook(declaredVariable, context)) {
+            return;
+          }
+
           let dollarScope: Scope.Scope | null = ref.from;
           let dollarIdentifier: string | undefined;
           while (dollarScope) {
@@ -477,6 +482,41 @@ function getContent(symbol: ts.Symbol, sourceCode: string) {
   return '';
 }
 
+function isQwikHook(variable, context) {
+  const def = variable.defs[0];
+  if (!def || def.type !== 'Variable') {
+    return false;
+  }
+
+  const init = def.node.init;
+  if (
+    init?.type === 'CallExpression' &&
+    init.callee.type === 'Identifier' &&
+    /^use[A-Z]/.test(init.callee.name)
+  ) {
+    const hookName = init.callee.name;
+    const scope = context.sourceCode.getScope(def.node);
+    const ref = scope.references.find((r) => r.identifier.name === hookName);
+
+    return ref?.resolved && isFromQwikModule(ref.resolved, context);
+  }
+  return false;
+}
+
+function isFromQwikModule(resolvedVar) {
+  return resolvedVar.defs.some((def) => {
+    if (def.type !== 'ImportBinding') {
+      return false;
+    }
+    const importSource = def.parent.source.value;
+
+    return (
+      importSource.startsWith('@builder.io/qwik') ||
+      importSource.startsWith('@builder.io/qwik-city')
+    );
+  });
+}
+
 const ALLOWED_CLASSES = {
   Promise: true,
   URL: true,

Diff for: packages/eslint-plugin-qwik/tests/valid-lexical-scope/valid-use-doc.tsx

@@ -0,0 +1,18 @@
+import { component$, useComputed$ } from '@builder.io/qwik';
+import { useDocumentHead } from '@builder.io/qwik-city';
+import { useLocation as exampleTest } from '@builder.io/qwik-city';
+const loc = exampleTest();
+
+export default component$(() => {
+  const head = useDocumentHead();
+  const authorId = useComputed$(() => {
+    return head.meta; // <--- EESLint was not happy here, but now it is
+  });
+  return (
+    <>
+      {authorId.value}
+      <p>pathname: {loc.url.pathname}</p>
+      <p>skuId: {loc.params.skuId}</p>
+    </>
+  );
+});

Diff for: packages/qwik/src/optimizer/src/plugins/plugin.ts

@@ -77,7 +77,7 @@ export interface QwikPackages {
   path: string;
 }
 
-export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
+export function createQwikPlugin(optimizerOptions: OptimizerOptions = {}) {
   const id = `${Math.round(Math.random() * 899) + 100}`;
 
   const clientResults = new Map<string, TransformOutput>();
@@ -102,7 +102,7 @@ export function createPlugin(optimizerOptions: OptimizerOptions = {}) {
     rootDir: null as any,
     tsconfigFileNames: ['./tsconfig.json'],
     input: null as any,
-    outDir: null as any,
+    outDir: '',
     assetsDir: null as any,
     resolveQwikBuild: true,
     entryStrategy: null as any,
@@ -1051,6 +1051,8 @@ export interface NormalizedQwikPluginOptions
   experimental?: Record<keyof typeof ExperimentalFeatures, boolean>;
 }
 
+export type QwikPlugin = ReturnType<typeof createQwikPlugin>;
+
 /** @public */
 export type QwikBuildTarget = 'client' | 'ssr' | 'lib' | 'test';
 

Diff for: packages/qwik/src/optimizer/src/plugins/plugin.unit.ts

@@ -1,7 +1,7 @@
 import path, { resolve } from 'node:path';
 import { assert, describe, expect, test } from 'vitest';
 import type { QwikManifest } from '../types';
-import { ExperimentalFeatures, createPlugin } from './plugin';
+import { ExperimentalFeatures, createQwikPlugin } from './plugin';
 import { normalizePath } from '../../../testing/util';
 import { qwikVite } from './vite';
 
@@ -90,6 +90,12 @@ test('debug true', async () => {
   assert.deepEqual(opts.debug, true);
 });
 
+test('csr', async () => {
+  const plugin = await mockPlugin();
+  const opts = plugin.normalizeOptions({ csr: true });
+  assert.deepEqual(opts.outDir, '');
+});
+
 test('override entryStrategy', async () => {
   const plugin = await mockPlugin();
   const opts = plugin.normalizeOptions({
@@ -291,7 +297,7 @@ describe('resolveId', () => {
 });
 
 async function mockPlugin(os = process.platform) {
-  const plugin = createPlugin({
+  const plugin = createQwikPlugin({
     sys: {
       cwd: () => process.cwd(),
       env: 'node',