create-qwik 0.9.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-qwik",
3
- "version": "0.9.0",
3
+ "version": "0.11.0",
4
4
  "description": "Interactive CLI for create Qwik projects and adding features.",
5
5
  "bin": "./create-qwik.cjs",
6
6
  "main": "./index.cjs",
@@ -34,7 +34,7 @@
34
34
  "prompts": "2.4.2"
35
35
  },
36
36
  "engines": {
37
- "node": ">=14.18",
37
+ "node": ">=16",
38
38
  "npm": ">=6.0.0"
39
39
  }
40
40
  }
@@ -0,0 +1,4 @@
1
+ {
2
+ "recommendations": ["dbaeumer.vscode-eslint", "unifiedjs.vscode-mdx"],
3
+ "unwantedRecommendations": []
4
+ }
@@ -0,0 +1,32 @@
1
+ {
2
+ "onGet": {
3
+ "scope": "javascriptreact,typescriptreact",
4
+ "prefix": "q:onGet",
5
+ "description": "onGet function for a route index",
6
+ "body": [
7
+ "export const onGet: RequestHandler = (request) => {",
8
+ " $0",
9
+ "};"
10
+ ]
11
+ },
12
+ "onGet (typed)": {
13
+ "scope": "javascriptreact,typescriptreact",
14
+ "prefix": "q:onGet typed",
15
+ "description": "onGet function for a route index",
16
+ "body": [
17
+ "export interface ${1:PageData} {",
18
+ " $2",
19
+ "};",
20
+ "",
21
+ "export const onGet: RequestHandler<$1> = (request) => {",
22
+ " $4",
23
+ "};"
24
+ ]
25
+ },
26
+ "useEndpoint": {
27
+ "scope": "javascriptreact,typescriptreact",
28
+ "prefix": "q:useEndpoint",
29
+ "description": "useEndpoint declaration",
30
+ "body": "const $1 = useEndpoint<typeof onGet>();"
31
+ }
32
+ }
@@ -1,47 +1,45 @@
1
1
  {
2
- "Qwik component": {
2
+ "Qwik component (simple)": {
3
+ "scope": "javascriptreact,typescriptreact",
4
+ "prefix": "q:component",
5
+ "description": "Simple Qwik component",
6
+ "body": [
7
+ "export const ${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}} = component$(() => {",
8
+ " return <${2:div}>$4</$2>",
9
+ "});"
10
+ ]
11
+ },
12
+ "Qwik component (props)": {
3
13
  "scope": "typescriptreact",
4
- "prefix": "component$",
5
- "description": "Qwik counter component",
14
+ "prefix": "q:component w/props",
15
+ "description": "Qwik component w/ props",
6
16
  "body": [
7
- "export interface ${1:MyCmp}Props {",
8
- " step: number;",
17
+ "export interface ${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}}Props {",
18
+ " $2",
9
19
  "}",
10
20
  "",
11
- "export const ${1:MyCmp} = component$((props: ${1:MyCmp}Props) => {",
12
- " const state = useStore({",
13
- " count: 0",
14
- " });",
15
- " $0",
21
+ "export const $1 = component$<$1Props>((props) => {",
22
+ " const ${2:count} = useSignal(0);",
16
23
  " return (",
17
- " <div>",
18
- " <button onClick$={() => state.count += props.step}>",
19
- " {state.count}",
20
- " </button>",
21
- " </div>",
24
+ " <${3:div} on${4:Click}$={(ev) => {$5}}>",
25
+ " $6",
26
+ " </${3}>",
22
27
  " );",
23
28
  "});"
24
29
  ]
25
30
  },
26
- "Qwik component (basic)": {
31
+ "Qwik signal": {
27
32
  "scope": "javascriptreact,typescriptreact",
28
- "prefix": "component$basic",
29
- "description": "Basic Qwik component",
33
+ "prefix": "q:useSignal",
34
+ "description": "useSignal() declaration",
30
35
  "body": [
31
- "export const ${1:MyCmp} = component$(() => {",
32
- " return (",
33
- " <div>",
34
- " <div>",
35
- " ${1:MyCmp}",
36
- " </div>",
37
- " </div>",
38
- " );",
39
- "});"
36
+ "const ${1:foo} = useSignal($2);",
37
+ "$0"
40
38
  ]
41
39
  },
42
- "Qwik state": {
40
+ "Qwik store": {
43
41
  "scope": "javascriptreact,typescriptreact",
44
- "prefix": "useStore$",
42
+ "prefix": "q:useStore",
45
43
  "description": "useStore() declaration",
46
44
  "body": [
47
45
  "const ${1:state} = useStore({",
@@ -52,7 +50,7 @@
52
50
  },
53
51
  "$ hook": {
54
52
  "scope": "javascriptreact,typescriptreact",
55
- "prefix": "$",
53
+ "prefix": "q:$",
56
54
  "description": "$() function hook",
57
55
  "body": [
58
56
  "$(() => {",
@@ -63,7 +61,7 @@
63
61
  },
64
62
  "useClientEffect": {
65
63
  "scope": "javascriptreact,typescriptreact",
66
- "prefix": "useClientEffect",
64
+ "prefix": "q:useClientEffect",
67
65
  "description": "useClientEffect$() function hook",
68
66
  "body": [
69
67
  "useClientEffect$(({ track }) => {",
@@ -74,11 +72,22 @@
74
72
  },
75
73
  "useWatch": {
76
74
  "scope": "javascriptreact,typescriptreact",
77
- "prefix": "useWatch",
75
+ "prefix": "q:useWatch",
78
76
  "description": "useWatch$() function hook",
79
77
  "body": [
80
78
  "useWatch$(({ track }) => {",
81
- " track($1);",
79
+ " track(() => $1);",
80
+ " $0",
81
+ "});",
82
+ ""
83
+ ]
84
+ },
85
+ "useResource": {
86
+ "scope": "javascriptreact,typescriptreact",
87
+ "prefix": "q:useResource",
88
+ "description": "useResource$() declaration",
89
+ "body": [
90
+ "const $1 = useResource$(({ track, cleanup }) => {",
82
91
  " $0",
83
92
  "});",
84
93
  ""
@@ -86,7 +95,7 @@
86
95
  },
87
96
  "useServerMount": {
88
97
  "scope": "javascriptreact,typescriptreact",
89
- "prefix": "useServerMount",
98
+ "prefix": "q:useServerMount",
90
99
  "description": "useServerMount$() function hook",
91
100
  "body": [
92
101
  "useServerMount$(() => {",
@@ -2,7 +2,7 @@
2
2
 
3
3
  - [Qwik Docs](https://qwik.builder.io/)
4
4
  - [Discord](https://qwik.builder.io/chat)
5
- - [Qwik Github](https://github.com/BuilderIO/qwik)
5
+ - [Qwik GitHub](https://github.com/BuilderIO/qwik)
6
6
  - [@QwikDev](https://twitter.com/QwikDev)
7
7
  - [Vite](https://vitejs.dev/)
8
8
  - [Partytown](https://partytown.builder.io/)
@@ -13,7 +13,7 @@
13
13
 
14
14
  ## Project Structure
15
15
 
16
- Inside of you project, you'll see the following directories and files:
16
+ Inside your project, you'll see the following directory structure:
17
17
 
18
18
  ```
19
19
  ├── public/
@@ -25,7 +25,7 @@ Inside of you project, you'll see the following directories and files:
25
25
  └── ...
26
26
  ```
27
27
 
28
- - `src/routes`: Provides the directory based routing, which can include a hierarchy of `layout.tsx` layout files, and `index.tsx` files as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.builder.io/qwikcity/routing/overview/) for more info.
28
+ - `src/routes`: Provides the directory based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.builder.io/qwikcity/routing/overview/) for more info.
29
29
 
30
30
  - `src/components`: Recommended directory for components.
31
31
 
@@ -33,34 +33,34 @@ Inside of you project, you'll see the following directories and files:
33
33
 
34
34
  ## Add Integrations
35
35
 
36
- Use the `npm run qwik add` command to add other integrations. Some examples of integrations include as a Cloudflare, Netlify or Vercel server, and the Static Site Generator (SSG).
36
+ Use the `npm run qwik add` command to add additional integrations. Some examples of integrations include: Cloudflare, Netlify or Vercel server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/static-site-config/).
37
37
 
38
- ```
39
- npm run qwik add
38
+ ```shell
39
+ npm run qwik add # or `yarn qwik add`
40
40
  ```
41
41
 
42
42
  ## Development
43
43
 
44
- Development mode uses [Vite's development server](https://vitejs.dev/). For Qwik during development, the `dev` command will also server-side render (SSR) the output. The client-side development modules loaded by the browser.
44
+ Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output.
45
45
 
46
- ```
47
- npm run dev
46
+ ```shell
47
+ npm run dev # or `yarn dev`
48
48
  ```
49
49
 
50
- > Note: during dev mode, Vite will request many JS files, which does not represent a Qwik production build.
50
+ > Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.
51
51
 
52
52
  ## Preview
53
53
 
54
- The preview command will create a production build of the client modules, production build of `src/entry.preview.tsx`, and create a local server. The preview server is only for convenience to locally preview a production build, but it should not be used as a production server.
54
+ The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to locally preview a production build, and it should not be used as a production server.
55
55
 
56
- ```
57
- npm run preview
56
+ ```shell
57
+ npm run preview # or `yarn preview`
58
58
  ```
59
59
 
60
60
  ## Production
61
61
 
62
- The production build should generate the client and server modules by running both client and server build commands. Additionally, the build command will use Typescript run a type check on the source.
62
+ The production build will generate client and server modules by running both client and server build commands. Additionally, the build command will use Typescript to run a type check on the source code.
63
63
 
64
- ```
65
- npm run build
64
+ ```shell
65
+ npm run build # or `yarn build`
66
66
  ```
@@ -15,18 +15,18 @@
15
15
  "qwik": "qwik"
16
16
  },
17
17
  "devDependencies": {
18
- "@builder.io/qwik": "0.9.0",
19
- "@builder.io/qwik-city": "0.0.111",
18
+ "@builder.io/qwik": "0.11.0",
19
+ "@builder.io/qwik-city": "0.0.112",
20
20
  "@types/eslint": "8.4.6",
21
21
  "@types/node": "latest",
22
- "@typescript-eslint/eslint-plugin": "5.37.0",
23
- "@typescript-eslint/parser": "5.37.0",
24
- "eslint-plugin-qwik": "0.9.0",
25
- "eslint": "8.23.1",
22
+ "@typescript-eslint/eslint-plugin": "5.40.0",
23
+ "@typescript-eslint/parser": "5.40.0",
24
+ "eslint-plugin-qwik": "0.11.0",
25
+ "eslint": "8.25.0",
26
26
  "node-fetch": "3.2.10",
27
27
  "prettier": "2.7.1",
28
- "typescript": "4.8.3",
29
- "vite": "3.1.1",
28
+ "typescript": "4.8.4",
29
+ "vite": "3.1.7",
30
30
  "vite-tsconfig-paths": "3.5.0"
31
31
  },
32
32
  "private": true
@@ -2,9 +2,9 @@
2
2
  * WHAT IS THIS FILE?
3
3
  *
4
4
  * The service-worker.ts file is used to have state of the art prefetching.
5
- * https://qwik.builder.io/docs/advanced/prefetching/#prefetching
5
+ * https://qwik.builder.io/qwikcity/prefetching/overview/
6
6
  *
7
- * Qwik uses service worker to speed up your site and reduce latency, ie, not used in the tradicional way of offiline.
7
+ * Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline.
8
8
  * You can also use this file to add more functionality that runs in the service worker.
9
9
  */
10
10
  import { setupServiceWorker } from '@builder.io/qwik-city/service-worker';
@@ -3,7 +3,7 @@
3
3
  "allowJs": true,
4
4
  "target": "ES2017",
5
5
  "module": "ES2020",
6
- "lib": ["es2020", "DOM", "WebWorker"],
6
+ "lib": ["es2020", "DOM", "WebWorker", "DOM.Iterable"],
7
7
  "jsx": "react-jsx",
8
8
  "jsxImportSource": "@builder.io/qwik",
9
9
  "strict": true,
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qwik-basic-starter",
3
- "description": "Recommended for your first Qwik app",
3
+ "description": "Recommended for your first Qwik app (comes with Qwik City)",
4
4
  "type": "module",
5
5
  "__qwik__": {
6
6
  "priority": 1,
@@ -1,6 +1,3 @@
1
- header {
2
- background: var(--qwik-purple);
3
- }
4
1
  header {
5
2
  display: flex;
6
3
  background: white;
@@ -23,10 +23,6 @@ export const RouterHead = component$(() => {
23
23
  rel="stylesheet"
24
24
  />
25
25
 
26
- <meta property="og:site_name" content="Qwik" />
27
- <meta name="twitter:site" content="@QwikDev" />
28
- <meta name="twitter:title" content="Qwik" />
29
-
30
26
  {head.meta.map((m) => (
31
27
  <meta {...m} />
32
28
  ))}
@@ -120,6 +120,12 @@ export default component$(() => {
120
120
  Github
121
121
  </a>
122
122
  </li>
123
+ <li>
124
+ <span>Watch </span>
125
+ <a href="https://qwik.builder.io/media/" target="_blank">
126
+ Presentations, Podcasts, Videos, etc.
127
+ </a>
128
+ </li>
123
129
  </ul>
124
130
  <Link class="mindblow" href="/flower">
125
131
  Blow my mind 🤯
@@ -1,4 +1,4 @@
1
- import { component$, mutable, useStyles$ } from '@builder.io/qwik';
1
+ import { component$, useStyles$ } from '@builder.io/qwik';
2
2
  import { useContent, Link, useLocation } from '@builder.io/qwik-city';
3
3
  import styles from './menu.css?inline';
4
4
 
@@ -18,10 +18,10 @@ export default component$(() => {
18
18
  {item.items?.map((item) => (
19
19
  <li>
20
20
  <Link
21
- href={mutable(item.href)}
22
- class={mutable({
21
+ href={item.href}
22
+ class={{
23
23
  'is-active': loc.pathname === item.href,
24
- })}
24
+ }}
25
25
  >
26
26
  {item.text}
27
27
  </Link>
@@ -23,10 +23,6 @@ export const RouterHead = component$(() => {
23
23
  rel="stylesheet"
24
24
  />
25
25
 
26
- <meta property="og:site_name" content="Qwik" />
27
- <meta name="twitter:site" content="@QwikDev" />
28
- <meta name="twitter:title" content="Qwik" />
29
-
30
26
  {head.meta.map((m) => (
31
27
  <meta {...m} />
32
28
  ))}
@@ -11,5 +11,5 @@ This page is at the root level, so it only uses the `/src/routes/layout.tsx` lay
11
11
  - [Layouts](https://qwik.builder.io/qwikcity/layout/overview/)
12
12
  - [Routing](https://qwik.builder.io/qwikcity/routing/overview/)
13
13
  - [Authoring Content](https://qwik.builder.io/qwikcity/content/component/)
14
- - [Server Middleware](https://qwik.builder.io/qwikcity/middleware/overview/)
14
+ - [Server Adaptors and Middleware](https://qwik.builder.io/qwikcity/adaptors/overview/)
15
15
  - [Static Site Generation (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/overview/)
@@ -18,5 +18,5 @@ The left menu ordering is created with the `src/routes/docs/menu.md` markdown fi
18
18
  - [Layouts](https://qwik.builder.io/qwikcity/layout/overview/)
19
19
  - [Routing](https://qwik.builder.io/qwikcity/routing/overview/)
20
20
  - [Authoring Content](https://qwik.builder.io/qwikcity/content/component/)
21
- - [Server Middleware](https://qwik.builder.io/qwikcity/middleware/overview/)
21
+ - [Server Adaptors and Middleware](https://qwik.builder.io/qwikcity/adaptors/overview/)
22
22
  - [Static Site Generation (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/overview/)
@@ -127,6 +127,12 @@ export default component$(() => {
127
127
  Github
128
128
  </a>
129
129
  </li>
130
+ <li>
131
+ <span>Watch </span>
132
+ <a href="https://qwik.builder.io/media/" target="_blank">
133
+ Presentations, Podcasts, Videos, etc.
134
+ </a>
135
+ </li>
130
136
  </ul>
131
137
  </>
132
138
  );
@@ -32,18 +32,18 @@
32
32
  "release": "np"
33
33
  },
34
34
  "devDependencies": {
35
- "@builder.io/qwik": "0.9.0",
35
+ "@builder.io/qwik": "0.11.0",
36
36
  "@types/eslint": "8.4.6",
37
37
  "@types/node": "latest",
38
- "@typescript-eslint/eslint-plugin": "5.37.0",
39
- "@typescript-eslint/parser": "5.37.0",
38
+ "@typescript-eslint/eslint-plugin": "5.40.0",
39
+ "@typescript-eslint/parser": "5.40.0",
40
40
  "eslint-plugin-qwik": "latest",
41
- "eslint": "8.23.1",
41
+ "eslint": "8.25.0",
42
42
  "node-fetch": "3.2.10",
43
43
  "np": "7.6.1",
44
44
  "prettier": "2.7.1",
45
- "typescript": "4.8.3",
46
- "vite": "3.1.1"
45
+ "typescript": "4.8.4",
46
+ "vite": "3.1.7"
47
47
  },
48
48
  "__qwik__": {
49
49
  "priority": -1