Merge pull request #7584 from QwikDev/v2-fixes

fix(v2): repl and some small fixes

Author: wmertens

.github/workflows/ci.yml

@@ -272,6 +272,8 @@ jobs:
 
       - name: Install Rust toolchain
         uses: actions-rust-lang/setup-rust-toolchain@v1
+        with:
+          components: clippy,rustfmt
 
       - uses: pnpm/action-setup@v4
       - name: Setup Node

.vscode/launch.json

@@ -40,6 +40,18 @@
       "program": "${workspaceFolder}/packages/docs/node_modules/vite/bin/vite.js",
       "args": ["build", "-c", "adapters/cloudflare-pages/vite.config.mts"]
     },
+    {
+      "type": "node",
+      "name": "preloader-test build.client",
+      "request": "launch",
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": [
+        "run",
+        "build.client"
+      ],
+      "skipFiles": ["<node_internals>/**"],
+      "cwd": "${workspaceFolder}/starters/apps/preloader-test"
+    },
     {
       "type": "node",
       "name": "e2e.test",

package.json

@@ -110,7 +110,7 @@
     "cross-spawn": "7.0.3",
     "csstype": "3.1.3",
     "dotenv": "16.4.5",
-    "esbuild": "0.24.0",
+    "esbuild": "0.25.4",
     "eslint": "9.25.1",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-no-only-tests": "3.3.0",
@@ -227,10 +227,10 @@
     "test.e2e.chromium.debug": "PWDEBUG=1 playwright test starters --browser=chromium --config starters/playwright.config.ts",
     "test.e2e.cli": "pnpm --filter qwik-cli-e2e e2e",
     "test.e2e.firefox": "playwright test starters --browser=firefox --config starters/playwright.config.ts",
-    "test.e2e.router": "playwright test starters/e2e/qwikrouter --browser=chromium --config starters/playwright.config.ts",
-    "test.e2e.run": "tsm scripts/e2e-cli.ts",
     "test.e2e.integrations.chromium": "playwright test e2e/adapters-e2e/tests --project=chromium --config e2e/adapters-e2e/playwright.config.ts",
     "test.e2e.integrations.webkit": "playwright test e2e/adapters-e2e/tests --project=webkit --config e2e/adapters-e2e/playwright.config.ts",
+    "test.e2e.router": "playwright test starters/e2e/qwikrouter --browser=chromium --config starters/playwright.config.ts",
+    "test.e2e.run": "tsm scripts/e2e-cli.ts",
     "test.e2e.webkit": "playwright test starters --browser=webkit --config starters/playwright.config.ts",
     "test.rust": "make test",
     "test.rust.bench": "make benchmark",

packages/create-qwik/src/helpers/logAppCreated.ts

@@ -40,7 +40,11 @@ export function logAppCreated(pkgManager: string, result: CreateAppResult, ranIn
   if (!ranInstall) {
     outString.push(`   ${pkgManager} install`);
   }
-  outString.push(`   ${pkgManager} start`);
+  if (pkgManager === 'deno') {
+    outString.push(`   deno task start`);
+  } else {
+    outString.push(`   ${pkgManager} start`);
+  }
   outString.push(``);
 
   note(outString.join('\n'), 'Result');

packages/docs/package.json

@@ -8,9 +8,6 @@
     "@algolia/autocomplete-core": "1.7.4",
     "@algolia/client-search": "4.14.3",
     "@builder.io/partytown": "0.10.2",
-    "@builder.io/qwik": "../qwik",
-    "@builder.io/qwik-city": "../qwik-router",
-    "@builder.io/sdk-qwik": "0.14.31",
     "@emotion/react": "11.13.0",
     "@emotion/styled": "11.13.0",
     "@modular-forms/qwik": "0.23.1",

packages/docs/src/components/sidebar/sidebar.tsx

@@ -1,24 +1,11 @@
-import {
-  component$,
-  sync$,
-  useComputed$,
-  useContext,
-  useOnDocument,
-  useStyles$,
-} from '@qwik.dev/core';
-import { type ContentMenu, server$, useContent, useLocation } from '@qwik.dev/router';
+import { component$, sync$, useContext, useOnDocument, useStyles$ } from '@qwik.dev/core';
+import { routeLoader$, useContent, useLocation, type ContentMenu } from '@qwik.dev/router';
 import { GlobalStore } from '../../context';
 import { CloseIcon } from '../svgs/close-icon';
 import styles from './sidebar.css?inline';
 
-let markdownItems: MarkdownItems | undefined;
-let markdownItemsPromise: Promise<MarkdownItems> | undefined;
-export const getMarkdownItems = server$(() => {
-  if (markdownItems) {
-    return markdownItems;
-  }
-
-  markdownItemsPromise ||= Promise.all(
+export const useMarkdownItems = routeLoader$(async () => {
+  const rawData = await Promise.all(
     Object.entries(import.meta.glob<{ frontmatter?: MDX }>('../../routes/**/*.{md,mdx}')).map(
       async ([k, v]) => {
         return [
@@ -33,22 +20,20 @@ export const getMarkdownItems = server$(() => {
         ] as const;
       }
     )
-  ).then((rawData) => {
-    markdownItems = {};
-    rawData.map(([k, v]) => {
-      if (v.frontmatter?.updated_at) {
-        markdownItems![k] = {
-          title: v.frontmatter.title,
-          contributors: v.frontmatter.contributors,
-          created_at: v.frontmatter.created_at,
-          updated_at: v.frontmatter.updated_at,
-        };
-      }
-    });
-
-    return markdownItems;
+  );
+  const markdownItems: MarkdownItems = {};
+  rawData.map(([k, v]) => {
+    if (v.frontmatter?.updated_at) {
+      markdownItems[k] = {
+        title: v.frontmatter.title,
+        contributors: v.frontmatter.contributors,
+        created_at: v.frontmatter.created_at,
+        updated_at: v.frontmatter.updated_at,
+      };
+    }
   });
-  return markdownItemsPromise;
+
+  return markdownItems;
 });
 
 type MarkdownItems = Record<string, MDX>;
@@ -79,7 +64,7 @@ export const SideBar = component$((props: { allOpen?: boolean }) => {
   const globalStore = useContext(GlobalStore);
   const { menu } = useContent();
   const { url } = useLocation();
-  const markdownItems = useComputed$(() => getMarkdownItems());
+  const markdownItems = useMarkdownItems();
   const allOpen = url.pathname.startsWith('/qwikrouter/') || props.allOpen;
 
   useOnDocument(
@@ -93,7 +78,7 @@ export const SideBar = component$((props: { allOpen?: boolean }) => {
           el.scrollTop = savedScroll;
           el.style.visibility = 'visible';
         }
-      } catch {
+      } catch (err) {
         //
       }
     })
@@ -118,7 +103,7 @@ export const SideBar = component$((props: { allOpen?: boolean }) => {
             try {
               const scrollTop = document.getElementById('qwik-sidebar')!.scrollTop;
               sessionStorage.setItem('qwik-sidebar', String(scrollTop));
-            } catch {
+            } catch (err) {
               //
             }
           })}

packages/docs/src/components/svgs/bluesky-logo.tsx

@@ -1,9 +1,11 @@
+import { component$ } from '@qwik.dev/core';
+
 interface Props {
   width: number;
   height: number;
 }
 
-export const BlueskyLogo = ({ width, height }: Props) => (
+export const BlueskyLogo = component$(({ width, height }: Props) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={width}
@@ -17,4 +19,4 @@ export const BlueskyLogo = ({ width, height }: Props) => (
       d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805zm36.254 0C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745z"
     />
   </svg>
-);
+));

packages/docs/src/components/svgs/discord-logo.tsx

@@ -1,11 +1,12 @@
 import type { PropsOf } from '@qwik.dev/core';
+import { component$ } from '@qwik.dev/core';
 
 type DiscordLogoProps = {
   width: number;
   height: number;
 } & PropsOf<'svg'>;
 
-export const DiscordLogo = ({ width, height }: DiscordLogoProps) => (
+export const DiscordLogo = component$(({ width, height }: DiscordLogoProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={width}
@@ -18,4 +19,4 @@ export const DiscordLogo = ({ width, height }: DiscordLogoProps) => (
     <path d="M464 66.52A50 50 0 00414.12 17L97.64 16A49.65 49.65 0 0048 65.52V392c0 27.3 22.28 48 49.64 48H368l-13-44 109 100zM324.65 329.81s-8.72-10.39-16-19.32C340.39 301.55 352.5 282 352.5 282a139 139 0 01-27.85 14.25 173.31 173.31 0 01-35.11 10.39 170.05 170.05 0 01-62.72-.24 184.45 184.45 0 01-35.59-10.4 141.46 141.46 0 01-17.68-8.21c-.73-.48-1.45-.72-2.18-1.21-.49-.24-.73-.48-1-.48-4.36-2.42-6.78-4.11-6.78-4.11s11.62 19.09 42.38 28.26c-7.27 9.18-16.23 19.81-16.23 19.81-53.51-1.69-73.85-36.47-73.85-36.47 0-77.06 34.87-139.62 34.87-139.62 34.87-25.85 67.8-25.12 67.8-25.12l2.42 2.9c-43.59 12.32-63.44 31.4-63.44 31.4s5.32-2.9 14.28-6.77c25.91-11.35 46.5-14.25 55-15.21a24 24 0 014.12-.49 205.62 205.62 0 0148.91-.48 201.62 201.62 0 0172.89 22.95s-19.13-18.15-60.3-30.45l3.39-3.86s33.17-.73 67.81 25.16c0 0 34.87 62.56 34.87 139.62 0-.28-20.35 34.5-73.86 36.19z" />
     <path d="M212.05 218c-13.8 0-24.7 11.84-24.7 26.57s11.14 26.57 24.7 26.57c13.8 0 24.7-11.83 24.7-26.57.25-14.76-10.9-26.57-24.7-26.57zM300.43 218c-13.8 0-24.7 11.84-24.7 26.57s11.14 26.57 24.7 26.57c13.81 0 24.7-11.83 24.7-26.57S314 218 300.43 218z" />
   </svg>
-);
+));

packages/docs/src/components/svgs/github-logo.tsx

@@ -1,9 +1,11 @@
+import { component$ } from '@qwik.dev/core';
+
 interface GithubLogoProps {
   width: number;
   height: number;
 }
 
-export const GithubLogo = ({ width, height }: GithubLogoProps) => (
+export const GithubLogo = component$(({ width, height }: GithubLogoProps) => (
   <svg
     viewBox="0 0 16 16"
     width={width}
@@ -14,4 +16,4 @@ export const GithubLogo = ({ width, height }: GithubLogoProps) => (
   >
     <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
   </svg>
-);
+));

packages/docs/src/components/svgs/twitter-logo.tsx

@@ -1,9 +1,11 @@
+import { component$ } from '@qwik.dev/core';
+
 interface TwitterLogoProps {
   width: number;
   height: number;
 }
 
-export const TwitterLogo = ({ width, height }: TwitterLogoProps) => (
+export const TwitterLogo = component$(({ width, height }: TwitterLogoProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width={width}
@@ -15,4 +17,4 @@ export const TwitterLogo = ({ width, height }: TwitterLogoProps) => (
   >
     <path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
   </svg>
-);
+));