create-qwik 0.0.113 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-qwik",
-  "version": "0.0.113",
+  "version": "0.10.0",
   "description": "Interactive CLI for create Qwik projects and adding features.",
   "bin": "./create-qwik.cjs",
   "main": "./index.cjs",
@@ -34,7 +34,7 @@
     "prompts": "2.4.2"
   },
   "engines": {
-    "node": ">=14.18",
+    "node": ">=16",
     "npm": ">=6.0.0"
   }
 }

package/starters/apps/base/.eslintignore

@@ -12,6 +12,7 @@ bazel-testlogs
 dist
 dist-dev
 lib
+lib-types
 etc
 external
 node_modules

package/starters/apps/base/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "unifiedjs.vscode-mdx"],
+  "unwantedRecommendations": []
+}

package/starters/apps/base/.vscode/qwik-city.code-snippets

@@ -0,0 +1,32 @@
+{
+  "onGet": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "q:onGet",
+    "description": "onGet function for a route index",
+    "body": [
+      "export const onGet: RequestHandler = (request) => {",
+      "  $0",
+      "};"
+    ]
+  },
+  "onGet (typed)": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "q:onGet typed",
+    "description": "onGet function for a route index",
+    "body": [
+      "export interface ${1:PageData} {",
+      "  $2",
+      "};",
+      "",
+      "export const onGet: RequestHandler<$1> = (request) => {",
+      "  $4",
+      "};"
+    ]
+  },
+  "useEndpoint": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "q:useEndpoint",
+    "description": "useEndpoint declaration",
+    "body": "const $1 = useEndpoint<typeof onGet>();"
+  }
+}

package/starters/apps/base/.vscode/qwik.code-snippets

@@ -1,47 +1,35 @@
 {
 	"Qwik component": {
 		"scope": "typescriptreact",
-		"prefix": "component$",
-		"description": "Qwik counter component",
+		"prefix": "q:component w/props",
+		"description": "Qwik component w/ props",
 		"body": [
-			"export interface ${1:MyCmp}Props {",
-			"  step: number;",
+			"export interface ${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}}Props {",
+			"  $2",
 			"}",
 			"",
-			"export const ${1:MyCmp} = component$((props: ${1:MyCmp}Props) => {",
+			"export const $1 = component$((props: $1Props) => {",
 			"  const state = useStore({",
-			"    count: 0",
+			"    $3",
 			"  });",
-			"  $0",
-			"  return (",
-			"    <div>",
-			"      <button onClick$={() => state.count += props.step}>",
-			"        {state.count}",
-			"      </button>",
-			"    </div>",
-			"  );",
+			"  ",
+			"  return <${4:button} on${5:Click}$={(${6:e}) => {$7}}>$8</${4}>",
 			"});"
 		]
 	},
-	"Qwik component (basic)": {
+	"Qwik component (simple)": {
 		"scope": "javascriptreact,typescriptreact",
-		"prefix": "component$basic",
-		"description": "Basic Qwik component",
+		"prefix": "q:component simple",
+		"description": "Simple Qwik component",
 		"body": [
-			"export const ${1:MyCmp} = component$(() => {",
-			"  return (",
-			"    <div>",
-			"      <div>",
-			"        ${1:MyCmp}",
-			"      </div>",
-			"    </div>",
-			"  );",
+			"export const ${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}} = component$(() => {",
+			"  return <${2:button}>$4</$2>",
 			"});"
 		]
 	},
 	"Qwik state": {
 		"scope": "javascriptreact,typescriptreact",
-		"prefix": "useStore$",
+		"prefix": "q:useStore$",
 		"description": "useStore() declaration",
 		"body": [
 			"const ${1:state} = useStore({",
@@ -52,7 +40,7 @@
 	},
 	"$ hook": {
 		"scope": "javascriptreact,typescriptreact",
-		"prefix": "$",
+		"prefix": "q:$",
 		"description": "$() function hook",
 		"body": [
 			"$(() => {",
@@ -63,7 +51,7 @@
 	},
 	"useClientEffect": {
 		"scope": "javascriptreact,typescriptreact",
-		"prefix": "useClientEffect",
+		"prefix": "q:useClientEffect",
 		"description": "useClientEffect$() function hook",
 		"body": [
 			"useClientEffect$(({ track }) => {",
@@ -74,7 +62,7 @@
 	},
 	"useWatch": {
 		"scope": "javascriptreact,typescriptreact",
-		"prefix": "useWatch",
+		"prefix": "q:useWatch",
 		"description": "useWatch$() function hook",
 		"body": [
 			"useWatch$(({ track }) => {",
@@ -84,9 +72,20 @@
 			""
 		]
 	},
+	"useResource": {
+		"scope": "javascriptreact,typescriptreact",
+		"prefix": "q:useResource$",
+		"description": "useResource$() declaration",
+		"body": [
+			"const $1 = useResource$(({ track, previous, cleanup }) => {",
+			"  $0",
+			"});",
+			""
+		]
+	},
 	"useServerMount": {
 		"scope": "javascriptreact,typescriptreact",
-		"prefix": "useServerMount",
+		"prefix": "q:useServerMount",
 		"description": "useServerMount$() function hook",
 		"body": [
 			"useServerMount$(() => {",

package/starters/apps/base/README.md

@@ -2,7 +2,7 @@
 
 - [Qwik Docs](https://qwik.builder.io/)
 - [Discord](https://qwik.builder.io/chat)
-- [Qwik Github](https://github.com/BuilderIO/qwik)
+- [Qwik GitHub](https://github.com/BuilderIO/qwik)
 - [@QwikDev](https://twitter.com/QwikDev)
 - [Vite](https://vitejs.dev/)
 - [Partytown](https://partytown.builder.io/)
@@ -13,7 +13,7 @@
 
 ## Project Structure
 
-Inside of you project, you'll see the following directories and files:
+Inside your project, you'll see the following directory structure:
 
 ```
 ├── public/
@@ -25,7 +25,7 @@ Inside of you project, you'll see the following directories and files:
         └── ...
 ```
 
-- `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.
+- `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.
 
 - `src/components`: Recommended directory for components.
 
@@ -33,34 +33,34 @@ Inside of you project, you'll see the following directories and files:
 
 ## Add Integrations
 
-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).
+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/).
 
-```
-npm run qwik add
+```shell
+npm run qwik add # or `yarn qwik add`
 ```
 
 ## Development
 
-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.
+Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output.
 
-```
-npm run dev
+```shell
+npm run dev # or `yarn dev`
 ```
 
-> Note: during dev mode, Vite will request many JS files, which does not represent a Qwik production build.
+> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build.
 
 ## Preview
 
-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.
+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.
 
-```
-npm run preview
+```shell
+npm run preview # or `yarn preview`
 ```
 
 ## Production
 
-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.
+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.
 
-```
-npm run build
+```shell
+npm run build # or `yarn build`
 ```

package/starters/apps/base/gitignore

@@ -1,6 +1,7 @@
 # Build
 /dist
 /lib
+/lib-types
 /server
 
 # Development

package/starters/apps/base/package.json

@@ -4,6 +4,7 @@
     "build": "qwik build",
     "build.client": "vite build",
     "build.preview": "vite build --ssr src/entry.preview.tsx",
+    "build.types": "tsc --incremental --noEmit",
     "dev": "vite --mode ssr",
     "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
     "fmt": "prettier --write .",
@@ -11,17 +12,16 @@
     "lint": "eslint \"src/**/*.ts*\"",
     "preview": "qwik build preview && vite preview --open",
     "start": "vite --open --mode ssr",
-    "typecheck": "tsc --incremental --noEmit",
     "qwik": "qwik"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.113",
+    "@builder.io/qwik": "0.10.0",
     "@builder.io/qwik-city": "0.0.111",
     "@types/eslint": "8.4.6",
     "@types/node": "latest",
     "@typescript-eslint/eslint-plugin": "5.37.0",
     "@typescript-eslint/parser": "5.37.0",
-    "eslint-plugin-qwik": "0.0.113",
+    "eslint-plugin-qwik": "0.10.0",
     "eslint": "8.23.1",
     "node-fetch": "3.2.10",
     "prettier": "2.7.1",

package/starters/apps/base/src/routes/service-worker.ts

@@ -2,9 +2,9 @@
  * WHAT IS THIS FILE?
  *
  * The service-worker.ts file is used to have state of the art prefetching.
- * https://qwik.builder.io/docs/advanced/prefetching/#prefetching
+ * https://qwik.builder.io/qwikcity/prefetching/overview/
  *
- * Qwik uses service worker to speed up your site and reduce latency, ie, not used in the tradicional way of offiline.
+ * Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline.
  * You can also use this file to add more functionality that runs in the service worker.
  */
 import { setupServiceWorker } from '@builder.io/qwik-city/service-worker';

package/starters/apps/base/tsconfig.json

@@ -3,7 +3,7 @@
     "allowJs": true,
     "target": "ES2017",
     "module": "ES2020",
-    "lib": ["es2020", "DOM", "WebWorker"],
+    "lib": ["es2020", "DOM", "WebWorker", "DOM.Iterable"],
     "jsx": "react-jsx",
     "jsxImportSource": "@builder.io/qwik",
     "strict": true,

package/starters/apps/basic/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qwik-basic-starter",
-  "description": "Recommended for your first Qwik app",
+  "description": "Recommended for your first Qwik app (comes with Qwik City)",
   "type": "module",
   "__qwik__": {
     "priority": 1,

package/starters/apps/basic/src/components/header/header.css

@@ -1,6 +1,3 @@
-header {
-  background: var(--qwik-purple);
-}
 header {
   display: flex;
   background: white;

package/starters/apps/basic/src/routes/index.tsx

@@ -120,6 +120,12 @@ export default component$(() => {
             Github
           </a>
         </li>
+        <li>
+          <span>Watch </span>
+          <a href="https://qwik.builder.io/media/" target="_blank">
+            Presentations, Podcasts, Videos, etc.
+          </a>
+        </li>
       </ul>
       <Link class="mindblow" href="/flower">
         Blow my mind 🤯

package/starters/apps/documentation-site/src/components/menu/menu.tsx

@@ -1,4 +1,4 @@
-import { component$, mutable, useStyles$ } from '@builder.io/qwik';
+import { component$, useStyles$ } from '@builder.io/qwik';
 import { useContent, Link, useLocation } from '@builder.io/qwik-city';
 import styles from './menu.css?inline';
 
@@ -18,10 +18,10 @@ export default component$(() => {
                 {item.items?.map((item) => (
                   <li>
                     <Link
-                      href={mutable(item.href)}
-                      class={mutable({
+                      href={item.href}
+                      class={{
                         'is-active': loc.pathname === item.href,
-                      })}
+                      }}
                     >
                       {item.text}
                     </Link>

package/starters/apps/documentation-site/src/routes/about-us/index.md

@@ -11,5 +11,5 @@ This page is at the root level, so it only uses the `/src/routes/layout.tsx` lay
 - [Layouts](https://qwik.builder.io/qwikcity/layout/overview/)
 - [Routing](https://qwik.builder.io/qwikcity/routing/overview/)
 - [Authoring Content](https://qwik.builder.io/qwikcity/content/component/)
-- [Server Middleware](https://qwik.builder.io/qwikcity/middleware/overview/)
+- [Server Adaptors and Middleware](https://qwik.builder.io/qwikcity/adaptors/overview/)
 - [Static Site Generation (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/overview/)

package/starters/apps/documentation-site/src/routes/docs/index.md

@@ -18,5 +18,5 @@ The left menu ordering is created with the `src/routes/docs/menu.md` markdown fi
 - [Layouts](https://qwik.builder.io/qwikcity/layout/overview/)
 - [Routing](https://qwik.builder.io/qwikcity/routing/overview/)
 - [Authoring Content](https://qwik.builder.io/qwikcity/content/component/)
-- [Server Middleware](https://qwik.builder.io/qwikcity/middleware/overview/)
+- [Server Adaptors and Middleware](https://qwik.builder.io/qwikcity/adaptors/overview/)
 - [Static Site Generation (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/overview/)

package/starters/apps/documentation-site/src/routes/index.tsx

@@ -127,6 +127,12 @@ export default component$(() => {
             Github
           </a>
         </li>
+        <li>
+          <span>Watch </span>
+          <a href="https://qwik.builder.io/media/" target="_blank">
+            Presentations, Podcasts, Videos, etc.
+          </a>
+        </li>
       </ul>
     </>
   );

package/starters/apps/library/.eslintignore

@@ -0,0 +1,31 @@
+**/*.log
+**/.DS_Store
+*.
+.vscode/settings.json
+.history
+.yarn
+bazel-*
+bazel-bin
+bazel-out
+bazel-qwik
+bazel-testlogs
+dist
+dist-dev
+lib
+lib-types
+etc
+external
+node_modules
+temp
+tsc-out
+tsdoc-metadata.json
+target
+output
+rollup.config.js
+build
+.cache
+.vscode
+.rollup.cache
+dist
+tsconfig.tsbuildinfo
+vite.config.ts

package/starters/apps/library/.eslintrc.cjs

@@ -0,0 +1,40 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:qwik/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+    ecmaVersion: 2021,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ['@typescript-eslint'],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-inferrable-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/no-namespace': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-this-alias': 'off',
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    'prefer-spread': 'off',
+    'no-case-declarations': 'off',
+    'no-console': 'off',
+    '@typescript-eslint/no-unused-vars': ['error'],
+  },
+};

package/starters/apps/library/.prettierignore

@@ -0,0 +1,6 @@
+# Files Prettier should not format
+**/*.log
+**/.DS_Store
+*.
+dist
+node_modules

package/starters/apps/library/README.md

@@ -0,0 +1,47 @@
+# Qwik Library ⚡️
+
+- [Qwik Docs](https://qwik.builder.io/)
+- [Discord](https://qwik.builder.io/chat)
+- [Qwik Github](https://github.com/BuilderIO/qwik)
+- [@QwikDev](https://twitter.com/QwikDev)
+- [Vite](https://vitejs.dev/)
+- [Partytown](https://partytown.builder.io/)
+- [Mitosis](https://github.com/BuilderIO/mitosis)
+- [Builder.io](https://www.builder.io/)
+
+---
+
+## Project Structure
+
+Inside of you project, you'll see the following directories and files:
+
+```
+├── public/
+│   └── ...
+└── src/
+    ├── components/
+    │   └── ...
+    └── index.ts
+```
+
+- `src/components`: Recommended directory for components.
+
+- `index.ts`: This is the entry point of your component library, make sure all the public components are exported from this file.
+
+## Development
+
+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.
+
+```
+npm run dev
+```
+
+> Note: during dev mode, Vite will request many JS files, which does not represent a Qwik production build.
+
+## Production
+
+The production build should generate the production build of your component library in (./lib) and the typescript type definitions in (./lib-types).
+
+```
+npm run build
+```

package/starters/apps/library/gitignore

@@ -0,0 +1,38 @@
+# Build
+/dist
+/lib
+/lib-types
+/server
+
+# Development
+node_modules
+
+# Cache
+.cache
+.mf
+.vscode
+.rollup.cache
+tsconfig.tsbuildinfo
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Yarn
+.yarn/*
+!.yarn/releases

package/starters/apps/library/package.json

@@ -1,12 +1,12 @@
 {
-  "name": "qwik-library-starter",
+  "name": "qwik-library-name",
   "description": "Create a component library",
   "version": "0.0.1",
   "private": false,
   "main": "./lib/index.qwik.cjs",
   "qwik": "./lib/index.qwik.mjs",
   "module": "./lib/index.qwik.mjs",
-  "types": "./lib/types/index.d.ts",
+  "types": "./lib-types/index.d.ts",
   "type": "module",
   "exports": {
     ".": {
@@ -15,16 +15,35 @@
     }
   },
   "files": [
-    "lib"
+    "lib",
+    "lib-types"
   ],
   "scripts": {
-    "build": "npm run build.lib && npm run build.types",
+    "build": "qwik build",
     "build.lib": "vite build --mode lib",
     "build.types": "tsc --emitDeclarationOnly",
+    "dev": "vite --mode ssr",
+    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
+    "fmt": "prettier --write .",
+    "fmt.check": "prettier --check .",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "start": "vite --open --mode ssr",
+    "qwik": "qwik",
     "release": "np"
   },
   "devDependencies": {
-    "np": "7.6.1"
+    "@builder.io/qwik": "0.10.0",
+    "@types/eslint": "8.4.6",
+    "@types/node": "latest",
+    "@typescript-eslint/eslint-plugin": "5.37.0",
+    "@typescript-eslint/parser": "5.37.0",
+    "eslint-plugin-qwik": "latest",
+    "eslint": "8.23.1",
+    "node-fetch": "3.2.10",
+    "np": "7.6.1",
+    "prettier": "2.7.1",
+    "typescript": "4.8.3",
+    "vite": "3.1.1"
   },
   "__qwik__": {
     "priority": -1

package/starters/apps/library/src/entry.dev.tsx

@@ -0,0 +1,17 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * Development entry point using only client-side modules:
+ * - Do not use this mode in production!
+ * - No SSR
+ * - No portion of the application is pre-rendered on the server.
+ * - All of the application is running eagerly in the browser.
+ * - More code is transferred to the browser than in SSR mode.
+ * - Optimizer/Serialization/Deserialization code is not exercised!
+ */
+import { render, RenderOptions } from '@builder.io/qwik';
+import Root from './root';
+
+export default function (opts: RenderOptions) {
+  return render(document, <Root />, opts);
+}

package/starters/apps/library/src/entry.ssr.tsx

@@ -0,0 +1,29 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is render outside the browser, this
+ * entry point will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - npm run start
+ * - npm run preview
+ * - npm run build
+ *
+ */
+import { renderToStream, RenderToStreamOptions } from '@builder.io/qwik/server';
+import { manifest } from '@qwik-client-manifest';
+import Root from './root';
+
+export default function (opts: RenderToStreamOptions) {
+  return renderToStream(<Root />, {
+    manifest,
+    ...opts,
+    prefetchStrategy: {
+      implementation: {
+        linkInsert: null,
+        workerFetchInsert: null,
+        prefetchEvent: 'always',
+      },
+    },
+  });
+}