feat: add Qwik example

gioboa · gioboa · commit d823c90f6c1e · 2025-10-14T17:40:44.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,7 @@ package-lock.json
 *.iml
 *.lcov
 *.log
+
+# qwik
+/examples/qwik/tmp
+/examples/qwik/server
diff --git a/examples/qwik/package.json b/examples/qwik/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "nitro-vite-qwik",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "build": "qwik build",
+    "build.client": "vite build",
+    "build.preview": "vite build --ssr src/entry.preview.tsx",
+    "build.types": "tsc --incremental --noEmit",
+    "dev": "vite --open --mode ssr",
+    "preview": "qwik build preview && node .output/server/index.mjs",
+    "qwik": "qwik"
+  },
+  "devDependencies": {
+    "@qwik.dev/core": "^2.0.0-beta.11",
+    "@qwik.dev/router": "^2.0.0-beta.11",
+    "nitro": "npm:nitro-nightly",
+    "node-fetch-native": "^1.6.7",
+    "typescript": "5.9.3",
+    "vite": "7.1.10",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}
diff --git a/examples/qwik/public/favicon.svg b/examples/qwik/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 500 500"><g clip-path="url(#a)"><circle cx="250" cy="250" r="250" fill="#fff"/><path fill="#18B6F6" d="m367.87 418.45-61.17-61.18-.94.13v-.67L175.7 227.53l32.05-31.13L188.9 87.73 99.56 199.09c-15.22 15.42-18.03 40.51-7.08 59.03l55.83 93.11a46.82 46.82 0 0 0 40.73 22.81l27.65-.27 151.18 44.68Z"/><path fill="#AC7EF4" d="m401.25 196.94-12.29-22.81-6.41-11.67-2.54-4.56-.26.26-33.66-58.63a47.07 47.07 0 0 0-41.27-23.75l-29.51.8-88.01.28a47.07 47.07 0 0 0-40.33 23.34L93.4 207l95.76-119.54L314.7 226.19l-22.3 22.67 13.35 108.54.13-.26v.26h-.26l.26.27 10.42 10.2 50.62 49.78c2.13 2 5.6-.4 4.13-2.96l-31.25-61.85 54.5-101.3 1.73-2c.67-.81 1.33-1.62 1.87-2.42a46.8 46.8 0 0 0 3.34-50.18Z"/><path fill="#fff" d="M315.1 225.65 189.18 87.6l17.9 108.14L175 227l130.5 130.27-11.75-108.14 21.37-23.48Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h500v500H0z"/></clipPath></defs></svg>
diff --git a/examples/qwik/public/manifest.json b/examples/qwik/public/manifest.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
+  "name": "qwik-project-name",
+  "short_name": "Welcome to Qwik",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#fff",
+  "description": "A Qwik project app."
+}
diff --git a/examples/qwik/src/entry.preview.tsx b/examples/qwik/src/entry.preview.tsx
@@ -0,0 +1,5 @@
+
+import { createQwikRouter } from "@qwik.dev/router/middleware/node";
+import render from "./entry.ssr";
+
+export default createQwikRouter({ render });
diff --git a/examples/qwik/src/entry.ssr.tsx b/examples/qwik/src/entry.ssr.tsx
@@ -0,0 +1,16 @@
+import { createRenderer } from "@qwik.dev/router";
+import Root from "./root";
+
+export default createRenderer((opts) => {
+  return {
+    jsx: <Root />,
+    options: {
+      ...opts,
+      containerAttributes: {
+        lang: "en-us",
+        ...opts.containerAttributes,
+      },
+      serverData: { ...opts.serverData },
+    },
+  };
+});
diff --git a/examples/qwik/src/global.css b/examples/qwik/src/global.css
diff --git a/examples/qwik/src/root.tsx b/examples/qwik/src/root.tsx
@@ -0,0 +1,31 @@
+import {
+  DocumentHeadTags,
+  RouterOutlet,
+  useLocation,
+  useQwikRouter,
+} from "@qwik.dev/router";
+import { component$ } from "@qwik.dev/core";
+
+import "./global.css";
+
+export default component$(() => {
+  useQwikRouter();
+  const { url } = useLocation();
+
+  return (
+    <>
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+        <DocumentHeadTags />
+
+        <link rel="canonical" href={url.href} />
+      </head>
+      <body>
+        <RouterOutlet />
+      </body>
+    </>
+  );
+});
diff --git a/examples/qwik/src/routes/index.tsx b/examples/qwik/src/routes/index.tsx
@@ -0,0 +1,17 @@
+import type { DocumentHead } from "@qwik.dev/router";
+import { component$, useSignal } from "@qwik.dev/core";
+
+export default component$(() => {
+  const counterSig = useSignal(0);
+
+  return (
+    <div>
+      <h1>Hello, Qwik!</h1>
+      <button onClick$={() => (counterSig.value += 1)}>
+        Count: {counterSig.value}
+      </button>
+    </div>
+  );
+});
+
+export const head: DocumentHead = { title: "Vite + Nitro + Qwik", meta: [] };
diff --git a/examples/qwik/tsconfig.json b/examples/qwik/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "target": "ES2020",
+    "module": "ES2022",
+    "lib": ["es2022", "DOM", "WebWorker", "DOM.Iterable"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "@qwik.dev/core",
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "allowImportingTsExtensions": true,
+    "moduleResolution": "Bundler",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "outDir": "tmp",
+    "noEmit": true,
+    "paths": {
+      "~/*": ["./src/*"]
+    },
+    /* if you do not use CSS modules, remove this line and delete the typescript-plugin-css-modules module from package.json */
+    "plugins": [{ "name": "typescript-plugin-css-modules" }]
+  },
+  "include": ["src", "./*.d.ts", "./*.config.ts"]
+}
diff --git a/examples/qwik/vite.config.mts b/examples/qwik/vite.config.mts
@@ -0,0 +1,18 @@
+import { qwikVite } from "@qwik.dev/core/optimizer";
+import { qwikRouter } from "@qwik.dev/router/vite";
+import { defineConfig, type UserConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+import { nitro } from "nitro/vite";
+
+export default defineConfig(() => {
+  return {
+    plugins: [
+      qwikRouter(),
+      qwikVite(),
+      tsconfigPaths({ root: "." }),
+      nitro()
+    ],
+    build: { rollupOptions: { external: [/^node/] } },
+  };
+});
+
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
