Skip to content

Commit 2bb29e3

Browse files
gioboagioboa
committed
feat: add Qwik example
1 parent d97ad9b commit 2bb29e3

File tree

13 files changed

+3410
-161
lines changed

13 files changed

+3410
-161
lines changed

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,7 @@ package-lock.json
2626
*.iml
2727
*.lcov
2828
*.log
29+
30+
# qwik
31+
/examples/qwik/tmp
32+
/examples/qwik/server

‎examples/qwik/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "nitro-vite-qwik",
3+
"version": "0.0.0",
4+
"type": "module",
5+
"scripts": {
6+
"build": "qwik build",
7+
"build.client": "vite build",
8+
"build.preview": "vite build --ssr src/entry.preview.tsx",
9+
"build.types": "tsc --incremental --noEmit",
10+
"dev": "vite --open --mode ssr",
11+
"preview": "qwik build preview && cp -r ./dist/* ./.output/public/ && vite preview --open",
12+
"qwik": "qwik"
13+
},
14+
"devDependencies": {
15+
"@qwik.dev/core": "^2.0.0-beta.11",
16+
"@qwik.dev/router": "^2.0.0-beta.11",
17+
"nitro": "npm:nitro-nightly",
18+
"node-fetch-native": "^1.6.7",
19+
"typescript": "5.9.3",
20+
"vite": "7.1.10",
21+
"vite-tsconfig-paths": "^5.1.4"
22+
}
23+
}

‎examples/qwik/public/favicon.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎examples/qwik/public/manifest.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"$schema": "https://json.schemastore.org/web-manifest-combined.json",
3+
"name": "qwik-project-name",
4+
"short_name": "Welcome to Qwik",
5+
"start_url": ".",
6+
"display": "standalone",
7+
"background_color": "#fff",
8+
"description": "A Qwik project app."
9+
}

‎examples/qwik/src/entry.preview.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createQwikRouter } from "@qwik.dev/router/middleware/node";
2+
import render from "./entry.ssr";
3+
4+
export default createQwikRouter({ render });

‎examples/qwik/src/entry.ssr.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { createRenderer } from "@qwik.dev/router";
2+
import Root from "./root";
3+
4+
export default createRenderer((opts) => {
5+
return {
6+
jsx: <Root />,
7+
options: {
8+
...opts,
9+
containerAttributes: {
10+
lang: "en-us",
11+
...opts.containerAttributes,
12+
},
13+
serverData: { ...opts.serverData },
14+
},
15+
};
16+
});

‎examples/qwik/src/global.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.pt-2 {
2+
padding-top: 2rem;
3+
}

‎examples/qwik/src/root.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import {
2+
DocumentHeadTags,
3+
RouterOutlet,
4+
useLocation,
5+
useQwikRouter,
6+
} from "@qwik.dev/router";
7+
import { component$ } from "@qwik.dev/core";
8+
9+
import "./global.css";
10+
11+
export default component$(() => {
12+
useQwikRouter();
13+
const { url } = useLocation();
14+
15+
return (
16+
<>
17+
<head>
18+
<meta charset="utf-8" />
19+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
20+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
21+
22+
<DocumentHeadTags />
23+
24+
<link rel="canonical" href={url.href} />
25+
</head>
26+
<body>
27+
<RouterOutlet />
28+
</body>
29+
</>
30+
);
31+
});

‎examples/qwik/src/routes/index.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import {
2+
Form,
3+
routeAction$,
4+
routeLoader$,
5+
server$,
6+
type DocumentHead,
7+
} from "@qwik.dev/router";
8+
import { component$, useSignal } from "@qwik.dev/core";
9+
10+
export const useLoader = routeLoader$(() => {
11+
return "data from routeLoader$";
12+
});
13+
14+
export const useAction = routeAction$(async (data) => {
15+
return {
16+
success: true,
17+
firstName: data.firstName.toString(),
18+
lastName: data.lastName.toString(),
19+
};
20+
});
21+
22+
const serverFunction = server$(() => {
23+
console.log("server function");
24+
return "data from server$, look at the server console!";
25+
});
26+
27+
export default component$(() => {
28+
const action = useAction();
29+
const loaderData = useLoader();
30+
const counterSig = useSignal(0);
31+
32+
return (
33+
<div>
34+
<h1>Hello, Qwik!</h1>
35+
<h2>{loaderData.value}</h2>
36+
<button onClick$={() => (counterSig.value += 1)}>
37+
Count: {counterSig.value}
38+
</button>
39+
<br></br>
40+
<br></br>
41+
<button
42+
onClick$={async () => {
43+
const res = await serverFunction();
44+
alert(res);
45+
}}
46+
>
47+
server$ function
48+
</button>
49+
<Form class="pt-2" action={action}>
50+
<input name="firstName" />
51+
<input name="lastName" />
52+
<button type="submit">Add user</button>
53+
</Form>
54+
{action.value?.success && (
55+
<p class="pt-2">
56+
User {action.value.firstName} {action.value.lastName} added
57+
successfully
58+
</p>
59+
)}
60+
</div>
61+
);
62+
});
63+
64+
export const head: DocumentHead = { title: "Vite + Nitro + Qwik", meta: [] };

‎examples/qwik/src/routes/layout.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { component$, Slot } from "@qwik.dev/core";
2+
3+
export default component$(() => {
4+
return (
5+
<>
6+
<header>Layout Header</header>
7+
<main>
8+
<Slot />
9+
</main>
10+
<footer>Layout Footer</footer>
11+
</>
12+
);
13+
});

0 commit comments

Comments
 (0)