feat: add qwik example

.gitignore

@@ -26,3 +26,7 @@ package-lock.json
 *.iml
 *.lcov
 *.log
+
+# qwik
+/examples/qwik/tmp
+/examples/qwik/server

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",
+    "build.types": "tsc --incremental --noEmit",
+    "dev": "vite --open --mode ssr",
+    "preview": "qwik build preview && cp -r ./dist/* ./.output/public/ && vite preview --open",
+    "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"
+  }
+}

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."
+}

examples/qwik/src/entry.preview.tsx

@@ -0,0 +1,4 @@
+import { createQwikRouter } from "@qwik.dev/router/middleware/node";
+import render from "./entry.ssr";
+
+export default createQwikRouter({ render });

examples/qwik/src/entry.server.ts

@@ -0,0 +1,17 @@
+import { createQwikRouter } from "./qwik-fetch-adapter";
+import render from "./entry.ssr";
+
+const { router, notFound } = createQwikRouter({ render });
+
+export default {
+  fetch: async (req: Request) => {
+    console.log(`[${req.method}] ${req.url}`);
+    const qwikRouterResponse = await router(req);
+    if (qwikRouterResponse) {
+      return qwikRouterResponse;
+    }
+
+    // Path not found
+    return notFound(req);
+  },
+};

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 },
+    },
+  };
+});

examples/qwik/src/global.css

@@ -0,0 +1,3 @@
+.pt-2 {
+  padding-top: 2rem;
+}

examples/qwik/src/qwik-fetch-adapter.ts

@@ -0,0 +1,126 @@
+import { setServerPlatform } from "@qwik.dev/core/server";
+import type {
+  ClientConn,
+  ServerRenderOptions,
+  ServerRequestEvent,
+} from "@qwik.dev/router/middleware/request-handler";
+import {
+  getNotFound,
+  isStaticPath,
+  mergeHeadersCookies,
+  requestHandler,
+} from "@qwik.dev/router/middleware/request-handler";
+
+/** @public */
+export interface NetAddr {
+  transport: "tcp" | "udp";
+  hostname: string;
+  port: number;
+}
+
+/** @public */
+export function createQwikRouter(opts: QwikRouterFetchOptions) {
+  if (opts.manifest) {
+    setServerPlatform(opts.manifest);
+  }
+  async function router(request: Request) {
+    try {
+      const url = new URL(request.url);
+
+      const serverRequestEv: ServerRequestEvent<Response> = {
+        mode: "server",
+        locale: undefined,
+        url,
+        env: { get: (p: string) => process.env[p] },
+        request,
+        getWritableStream: (status, headers, cookies, resolve) => {
+          const { readable, writable } = new TransformStream<Uint8Array>();
+          const response = new Response(readable, {
+            status,
+            headers: mergeHeadersCookies(headers, cookies),
+          });
+          resolve(response);
+          return writable;
+        },
+        platform: {
+          ssr: true,
+        },
+        getClientConn: () => {
+          return opts.getClientConn ? opts.getClientConn(request) : {};
+        },
+      };
+
+      // send request to qwik router request handler
+      const handledResponse = await requestHandler(serverRequestEv, opts);
+      if (handledResponse) {
+        handledResponse.completion.then((v) => {
+          if (v) {
+            console.error(v);
+          }
+        });
+        const response = await handledResponse.response;
+        if (response) {
+          return response;
+        }
+      }
+
+      // qwik router did not have a route for this request
+      return null;
+    } catch (e: any) {
+      console.error(e);
+      return new Response(String(e || "Error"), {
+        status: 500,
+        headers: {
+          "Content-Type": "text/plain; charset=utf-8",
+        },
+      });
+    }
+  }
+
+  const notFound = async (request: Request) => {
+    try {
+      const url = new URL(request.url);
+
+      // In the development server, we replace the getNotFound function
+      // For static paths, we assign a static "Not Found" message.
+      // This ensures consistency between development and production environments for specific URLs.
+      const notFoundHtml =
+        !request.headers.get("accept")?.includes("text/html") ||
+        isStaticPath(request.method || "GET", url)
+          ? "Not Found"
+          : getNotFound(url.pathname);
+      return new Response(notFoundHtml, {
+        status: 404,
+        headers: {
+          "Content-Type": "text/html; charset=utf-8",
+          "X-Not-Found": url.pathname,
+        },
+      });
+    } catch (e) {
+      console.error(e);
+      return new Response(String(e || "Error"), {
+        status: 500,
+        headers: {
+          "Content-Type": "text/plain; charset=utf-8",
+        },
+      });
+    }
+  };
+
+  return {
+    router,
+    notFound,
+  };
+}
+
+/**
+ * @deprecated Use `createQwikRouter` instead. Will be removed in V3
+ * @public
+ */
+export const createQwikCity = createQwikRouter;
+
+/** @public */
+export interface QwikRouterFetchOptions
+  extends Omit<ServerRenderOptions, "qwikCityPlan"> {
+  getClientConn?: (request: Request) => ClientConn;
+}

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>
+    </>
+  );
+});

examples/qwik/src/routes/index.tsx

@@ -0,0 +1,64 @@
+import {
+  Form,
+  routeAction$,
+  routeLoader$,
+  server$,
+  type DocumentHead,
+} from "@qwik.dev/router";
+import { component$, useSignal } from "@qwik.dev/core";
+
+export const useLoader = routeLoader$(() => {
+  return "data from routeLoader$";
+});
+
+export const useAction = routeAction$(async (data) => {
+  return {
+    success: true,
+    firstName: data.firstName.toString(),
+    lastName: data.lastName.toString(),
+  };
+});
+
+const serverFunction = server$(() => {
+  console.log("server function");
+  return "data from server$, look at the server console!";
+});
+
+export default component$(() => {
+  const action = useAction();
+  const loaderData = useLoader();
+  const counterSig = useSignal(0);
+
+  return (
+    <div>
+      <h1>Hello, Qwik!</h1>
+      <h2>{loaderData.value}</h2>
+      <button onClick$={() => (counterSig.value += 1)}>
+        Count: {counterSig.value}
+      </button>
+      <br></br>
+      <br></br>
+      <button
+        onClick$={async () => {
+          const res = await serverFunction();
+          alert(res);
+        }}
+      >
+        server$ function
+      </button>
+      <Form class="pt-2" action={action}>
+        <input name="firstName" />
+        <input name="lastName" />
+        <button type="submit">Add user</button>
+      </Form>
+      {action.value?.success && (
+        <p class="pt-2">
+          User {action.value.firstName} {action.value.lastName} added
+          successfully
+        </p>
+      )}
+    </div>
+  );
+});
+
+export const head: DocumentHead = { title: "Vite + Nitro + Qwik", meta: [] };

examples/qwik/src/routes/layout.tsx

@@ -0,0 +1,13 @@
+import { component$, Slot } from "@qwik.dev/core";
+
+export default component$(() => {
+  return (
+    <>
+      <header>Layout Header</header>
+      <main>
+        <Slot />
+      </main>
+      <footer>Layout Footer</footer>
+    </>
+  );
+});

examples/qwik/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "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/*"]
+    }
+  },
+  "include": ["src", "./*.d.ts", "./*.config.ts"]
+}

examples/qwik/vite.config.mts

@@ -0,0 +1,17 @@
+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({ devSsrServer: false }),
+      qwikVite({ ssr: { input: "src/entry.server" } }),
+      tsconfigPaths({ root: "." }),
+      nitro(),
+    ],
+    build: { rollupOptions: { external: [/^node/] } },
+  };
+});