Skip to content

Commit ef4602b

Browse files
leifermendezmanucorporat
leifermendez
and
manucorporat
authored
feat(create-vite): add qwik templates (vitejs#13620)
Co-authored-by: Manu MA <[email protected]>
1 parent 6d5be5c commit ef4602b

27 files changed

+543
-0
lines changed

‎packages/create-vite/src/index.ts

+24
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
blue,
99
cyan,
1010
green,
11+
lightBlue,
1112
lightGreen,
1213
lightRed,
1314
magenta,
@@ -186,6 +187,29 @@ const FRAMEWORKS: Framework[] = [
186187
},
187188
],
188189
},
190+
{
191+
name: 'qwik',
192+
display: 'Qwik',
193+
color: lightBlue,
194+
variants: [
195+
{
196+
name: 'qwik-ts',
197+
display: 'TypeScript',
198+
color: lightBlue,
199+
},
200+
{
201+
name: 'qwik',
202+
display: 'JavaScript',
203+
color: yellow,
204+
},
205+
{
206+
name: 'custom-qwik-city',
207+
display: 'QwikCity ↗',
208+
color: lightBlue,
209+
customCommand: 'npm create qwik@latest basic TARGET_DIR',
210+
},
211+
],
212+
},
189213
{
190214
name: 'others',
191215
display: 'Others',

‎packages/create-vite/template-qwik-ts/README.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Qwik + Vite
2+
3+
## Qwik in CSR mode
4+
5+
This starter is using a pure CSR (Client Side Rendering) mode. This means, that the application is fully bootstrapped in the browser. Most of Qwik innovations however take advantage of SSR (Server Side Rendering) mode.
6+
7+
```ts
8+
export default defineConfig({
9+
plugins: [
10+
qwikVite({
11+
csr: true,
12+
}),
13+
],
14+
})
15+
```
16+
17+
Use `npm create qwik@latest` to create a full production ready Qwik application, using SSR and [QwikCity](https://qwik.builder.io/docs/qwikcity/), our server-side metaframwork.
18+
19+
## Usage
20+
21+
```bash
22+
$ npm install # or pnpm install or yarn install
23+
```
24+
25+
Learn more on the [Qwik Website](https://qwik.builder.io) and join our community on our [Discord](https://qwik.builder.io/chat)
26+
27+
## Available Scripts
28+
29+
In the project directory, you can run:
30+
31+
### `npm run dev`
32+
33+
Runs the app in the development mode.<br>
34+
Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
35+
36+
### `npm run build`
37+
38+
Builds the app for production to the `dist` folder.<br>

‎packages/create-vite/template-qwik-ts/_gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎packages/create-vite/template-qwik-ts/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Qwik + TS</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎packages/create-vite/template-qwik-ts/package.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "vite-qwik",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview"
10+
},
11+
"devDependencies": {
12+
"typescript": "^5.0.2",
13+
"vite": "^4.3.9"
14+
},
15+
"dependencies": {
16+
"@builder.io/qwik": "^1.2.5"
17+
}
18+
}

‎packages/create-vite/template-qwik-ts/public/vite.svg

+1
Loading

‎packages/create-vite/template-qwik-ts/src/app.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
#app {
2+
max-width: 1280px;
3+
margin: 0 auto;
4+
padding: 2rem;
5+
text-align: center;
6+
}
7+
8+
.logo {
9+
height: 6em;
10+
padding: 1.5em;
11+
}
12+
.logo:hover {
13+
filter: drop-shadow(0 0 2em #646cffaa);
14+
}
15+
.logo.qwik:hover {
16+
filter: drop-shadow(0 0 2em #673ab8aa);
17+
}
18+
.card {
19+
padding: 2em;
20+
}
21+
22+
.read-the-docs {
23+
color: #888;
24+
}

‎packages/create-vite/template-qwik-ts/src/app.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { component$, useSignal } from '@builder.io/qwik'
2+
3+
import qwikLogo from './assets/qwik.svg'
4+
import viteLogo from '/vite.svg'
5+
import './app.css'
6+
7+
export const App = component$(() => {
8+
const count = useSignal(0)
9+
10+
return (
11+
<>
12+
<div>
13+
<a href="https://vitejs.dev" target="_blank">
14+
<img src={viteLogo} class="logo" alt="Vite logo" />
15+
</a>
16+
<a href="https://qwik.builder.io" target="_blank">
17+
<img src={qwikLogo} class="logo qwik" alt="Qwik logo" />
18+
</a>
19+
</div>
20+
<h1>Vite + Qwik</h1>
21+
<div class="card">
22+
<button onClick$={() => count.value++}>count is {count.value}</button>
23+
</div>
24+
<p class="read-the-docs">
25+
Click on the Vite and Qwik logos to learn more
26+
</p>
27+
</>
28+
)
29+
})

‎packages/create-vite/template-qwik-ts/src/assets/qwik.svg

+5
Loading

‎packages/create-vite/template-qwik-ts/src/index.css

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
:root {
2+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
5+
6+
color-scheme: light dark;
7+
color: rgba(255, 255, 255, 0.87);
8+
background-color: #242424;
9+
10+
font-synthesis: none;
11+
text-rendering: optimizeLegibility;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
-webkit-text-size-adjust: 100%;
15+
}
16+
17+
a {
18+
font-weight: 500;
19+
color: #646cff;
20+
text-decoration: inherit;
21+
}
22+
a:hover {
23+
color: #535bf2;
24+
}
25+
26+
body {
27+
margin: 0;
28+
display: flex;
29+
place-items: center;
30+
min-width: 320px;
31+
min-height: 100vh;
32+
}
33+
34+
h1 {
35+
font-size: 3.2em;
36+
line-height: 1.1;
37+
}
38+
39+
button {
40+
border-radius: 8px;
41+
border: 1px solid transparent;
42+
padding: 0.6em 1.2em;
43+
font-size: 1em;
44+
font-weight: 500;
45+
font-family: inherit;
46+
background-color: #1a1a1a;
47+
cursor: pointer;
48+
transition: border-color 0.25s;
49+
}
50+
button:hover {
51+
border-color: #646cff;
52+
}
53+
button:focus,
54+
button:focus-visible {
55+
outline: 4px auto -webkit-focus-ring-color;
56+
}
57+
58+
@media (prefers-color-scheme: light) {
59+
:root {
60+
color: #213547;
61+
background-color: #ffffff;
62+
}
63+
a:hover {
64+
color: #747bff;
65+
}
66+
button {
67+
background-color: #f9f9f9;
68+
}
69+
}

‎packages/create-vite/template-qwik-ts/src/main.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import '@builder.io/qwik/qwikloader.js'
2+
3+
import { render } from '@builder.io/qwik'
4+
import { App } from './app.tsx'
5+
import './index.css'
6+
7+
render(document.getElementById('app') as HTMLElement, <App />)

‎packages/create-vite/template-qwik-ts/src/vite-env.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎packages/create-vite/template-qwik-ts/tsconfig.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"compilerOptions": {
3+
"target": "ES2020",
4+
"useDefineForClassFields": true,
5+
"module": "ESNext",
6+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
7+
"skipLibCheck": true,
8+
9+
/* Bundler mode */
10+
"moduleResolution": "bundler",
11+
"allowImportingTsExtensions": true,
12+
"resolveJsonModule": true,
13+
"isolatedModules": true,
14+
"noEmit": true,
15+
"jsx": "react-jsx",
16+
"jsxImportSource": "@builder.io/qwik",
17+
18+
/* Linting */
19+
"strict": true,
20+
"noUnusedLocals": true,
21+
"noUnusedParameters": true,
22+
"noFallthroughCasesInSwitch": true
23+
},
24+
"include": ["src"],
25+
"references": [{ "path": "./tsconfig.node.json" }]
26+
}

‎packages/create-vite/template-qwik-ts/tsconfig.node.json

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"composite": true,
4+
"skipLibCheck": true,
5+
"module": "ESNext",
6+
"moduleResolution": "bundler",
7+
"allowSyntheticDefaultImports": true
8+
},
9+
"include": ["vite.config.ts"]
10+
}

‎packages/create-vite/template-qwik-ts/vite.config.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { defineConfig } from 'vite'
2+
import { qwikVite } from '@builder.io/qwik/optimizer'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [
7+
qwikVite({
8+
csr: true,
9+
}),
10+
],
11+
})

‎packages/create-vite/template-qwik/README.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Qwik + Vite
2+
3+
## Qwik in CSR mode
4+
5+
This starter is using a pure CSR (Client Side Rendering) mode. This means, that the application is fully bootstrapped in the browser. Most of Qwik innovations however take advantage of SSR (Server Side Rendering) mode.
6+
7+
```ts
8+
export default defineConfig({
9+
plugins: [
10+
qwikVite({
11+
csr: true,
12+
}),
13+
],
14+
})
15+
```
16+
17+
Use `npm create qwik@latest` to create a full production ready Qwik application, using SSR and [QwikCity](https://qwik.builder.io/docs/qwikcity/), our server-side metaframwork.
18+
19+
## Usage
20+
21+
```bash
22+
$ npm install # or pnpm install or yarn install
23+
```
24+
25+
Learn more on the [Qwik Website](https://qwik.builder.io) and join our community on our [Discord](https://qwik.builder.io/chat)
26+
27+
## Available Scripts
28+
29+
In the project directory, you can run:
30+
31+
### `npm run dev`
32+
33+
Runs the app in the development mode.<br>
34+
Open [http://localhost:5173](http://localhost:5173) to view it in the browser.
35+
36+
### `npm run build`
37+
38+
Builds the app for production to the `dist` folder.<br>

‎packages/create-vite/template-qwik/_gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

0 commit comments

Comments
 (0)