create-qwik 1.1.5 → 1.2.1

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

@@ -1,96 +1,78 @@
 {
-	"Qwik component (simple)": {
-		"scope": "javascriptreact,typescriptreact",
-		"prefix": "qcomponent$",
-		"description": "Simple Qwik component",
-		"body": [
-			"export const ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}} = component$(() => {",
-			"  return <${2:div}>$4</$2>",
-			"});"
-		]
-	},
-	"Qwik component (props)": {
-		"scope": "typescriptreact",
-		"prefix": "qcomponent$ + props",
-		"description": "Qwik component w/ props",
-		"body": [
-			"export interface ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Props {",
-			"  $2",
-			"}",
-			"",
-			"export const $1 = component$<$1Props>((props) => {",
-			"  const ${2:count} = useSignal(0);",
-			"  return (",
-			"    <${3:div} on${4:Click}$={(ev) => {$5}}>",
-			"      $6",
-			"    </${3}>",
-			"  );",
-			"});"
-		]
-	},
-	"Qwik signal": {
-		"scope": "javascriptreact,typescriptreact",
-		"prefix": "quseSignal",
-		"description": "useSignal() declaration",
-		"body": [
-			"const ${1:foo} = useSignal($2);",
-			"$0"
-		]
-	},
-	"Qwik store": {
-		"scope": "javascriptreact,typescriptreact",
-		"prefix": "quseStore",
-		"description": "useStore() declaration",
-		"body": [
-			"const ${1:state} = useStore({",
-			"  $2",
-			"});",
-			"$0"
-		]
-	},
-	"$ hook": {
-		"scope": "javascriptreact,typescriptreact",
-		"prefix": "q$",
-		"description": "$() function hook",
-		"body": [
-			"$(() => {",
-			"  $0",
-			"});",
-			""
-		]
-	},
-	"useVisibleTask": {
-		"scope": "javascriptreact,typescriptreact",
-		"prefix": "quseVisibleTask",
-		"description": "useVisibleTask$() function hook",
-		"body": [
-			"useVisibleTask$(({ track }) => {",
-			"  $0",
-			"});",
-			""
-		]
-	},
-	"useTask": {
-		"scope": "javascriptreact,typescriptreact",
-		"prefix": "quseTask$",
-		"description": "useTask$() function hook",
-		"body": [
-			"useTask$(({ track }) => {",
-			"  track(() => $1);",
-			"  $0",
-			"});",
-			""
-		]
-	},
-	"useResource": {
-		"scope": "javascriptreact,typescriptreact",
-		"prefix": "quseResource$",
-		"description": "useResource$() declaration",
-		"body": [
-			"const $1 = useResource$(({ track, cleanup }) => {",
-			"  $0",
-			"});",
-			""
-		]
-	}
-}
+  "Qwik component (simple)": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "qcomponent$",
+    "description": "Simple Qwik component",
+    "body": [
+      "export const ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}} = component$(() => {",
+      "  return <${2:div}>$4</$2>",
+      "});"
+    ]
+  },
+  "Qwik component (props)": {
+    "scope": "typescriptreact",
+    "prefix": "qcomponent$ + props",
+    "description": "Qwik component w/ props",
+    "body": [
+      "export interface ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Props {",
+      "  $2",
+      "}",
+      "",
+      "export const $1 = component$<$1Props>((props) => {",
+      "  const ${2:count} = useSignal(0);",
+      "  return (",
+      "    <${3:div} on${4:Click}$={(ev) => {$5}}>",
+      "      $6",
+      "    </${3}>",
+      "  );",
+      "});"
+    ]
+  },
+  "Qwik signal": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "quseSignal",
+    "description": "useSignal() declaration",
+    "body": ["const ${1:foo} = useSignal($2);", "$0"]
+  },
+  "Qwik store": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "quseStore",
+    "description": "useStore() declaration",
+    "body": ["const ${1:state} = useStore({", "  $2", "});", "$0"]
+  },
+  "$ hook": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "q$",
+    "description": "$() function hook",
+    "body": ["$(() => {", "  $0", "});", ""]
+  },
+  "useVisibleTask": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "quseVisibleTask",
+    "description": "useVisibleTask$() function hook",
+    "body": ["useVisibleTask$(({ track }) => {", "  $0", "});", ""]
+  },
+  "useTask": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "quseTask$",
+    "description": "useTask$() function hook",
+    "body": [
+      "useTask$(({ track }) => {",
+      "  track(() => $1);",
+      "  $0",
+      "});",
+      ""
+    ]
+  },
+  "useResource": {
+    "scope": "javascriptreact,typescriptreact",
+    "prefix": "quseResource$",
+    "description": "useResource$() declaration",
+    "body": [
+      "const $1 = useResource$(({ track, cleanup }) => {",
+      "  $0",
+      "});",
+      ""
+    ]
+  }
+}

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

@@ -0,0 +1,3 @@
+{
+  "material-icon-theme.activeIconPack": "qwik"
+}

package/starters/apps/base/README.md

@@ -24,7 +24,7 @@ Inside your project, you'll see the following directory structure:
         └── ...
 ```
 
-- `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/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.
 
@@ -32,7 +32,7 @@ Inside your project, you'll see the following directory structure:
 
 ## Add Integrations and deployment
 
-Use the `npm run qwik add` command to add additional integrations. Some examples of integrations include: Cloudflare, Netlify or Express server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/guides/static-site-generation/).
+Use the `npm run qwik add` command to add additional integrations. Some examples of integrations includes: Cloudflare, Netlify or Express Server, and the [Static Site Generator (SSG)](https://qwik.builder.io/qwikcity/guides/static-site-generation/).
 
 ```shell
 npm run qwik add # or `yarn qwik add`
@@ -40,7 +40,7 @@ npm run qwik add # or `yarn qwik add`
 
 ## Development
 
-Development mode uses [Vite's development server](https://vitejs.dev/). During development, the `dev` command will server-side render (SSR) the output.
+Development mode uses [Vite's development server](https://vitejs.dev/). The `dev` command will server-side render (SSR) the output during development.
 
 ```shell
 npm start # or `yarn start`
@@ -50,7 +50,7 @@ npm start # or `yarn start`
 
 ## Preview
 
-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.
+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 preview a production build locally and should not be used as a production server.
 
 ```shell
 npm run preview # or `yarn preview`
@@ -58,7 +58,7 @@ npm run preview # or `yarn preview`
 
 ## Production
 
-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.
+The production build will generate client and server modules by running both client and server build commands. The build command will use Typescript to run a type check on the source code.
 
 ```shell
 npm run build # or `yarn build`

package/starters/apps/base/gitignore

@@ -25,7 +25,9 @@ lerna-debug.log*
 
 # Editor
 .vscode/*
-!.vscode/extensions.json
+!.vscode/launch.json
+!.vscode/*.code-snippets
+
 .idea
 .DS_Store
 *.suo

package/starters/apps/base/package.json

@@ -16,17 +16,17 @@
     "qwik": "qwik"
   },
   "devDependencies": {
-    "@builder.io/qwik": "^1.1.5",
-    "@builder.io/qwik-city": "^1.1.5",
-    "@types/eslint": "8.40.0",
-    "@types/node": "^20.2.5",
-    "@typescript-eslint/eslint-plugin": "5.59.8",
-    "@typescript-eslint/parser": "5.59.8",
-    "eslint-plugin-qwik": "^1.1.5",
-    "eslint": "8.41.0",
+    "@builder.io/qwik": "^1.2.1",
+    "@builder.io/qwik-city": "^1.2.1",
+    "@types/eslint": "8.40.2",
+    "@types/node": "^20.3.1",
+    "@typescript-eslint/eslint-plugin": "5.60.0",
+    "@typescript-eslint/parser": "5.60.0",
+    "eslint-plugin-qwik": "^1.2.1",
+    "eslint": "8.43.0",
     "undici": "5.22.1",
     "prettier": "2.8.8",
-    "typescript": "5.0.4",
+    "typescript": "5.1.3",
     "vite": "4.3.9",
     "vite-tsconfig-paths": "4.2.0"
   },

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

@@ -9,8 +9,8 @@
  * - More code is transferred to the browser than in SSR mode.
  * - Optimizer/Serialization/Deserialization code is not exercised!
  */
-import { render, type RenderOptions } from '@builder.io/qwik';
-import Root from './root';
+import { render, type RenderOptions } from "@builder.io/qwik";
+import Root from "./root";
 
 export default function (opts: RenderOptions) {
   return render(document, <Root />, opts);

package/starters/apps/base/src/entry.preview.tsx

@@ -10,9 +10,9 @@
  * - https://vitejs.dev/config/preview-options.html#preview-options
  *
  */
-import { createQwikCity } from '@builder.io/qwik-city/middleware/node';
-import qwikCityPlan from '@qwik-city-plan';
-import render from './entry.ssr';
+import { createQwikCity } from "@builder.io/qwik-city/middleware/node";
+import qwikCityPlan from "@qwik-city-plan";
+import render from "./entry.ssr";
 
 /**
  * The default export is the QwikCity adapter used by Vite preview.

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

@@ -10,9 +10,12 @@
  * - npm run build
  *
  */
-import { renderToStream, type RenderToStreamOptions } from '@builder.io/qwik/server';
-import { manifest } from '@qwik-client-manifest';
-import Root from './root';
+import {
+  renderToStream,
+  type RenderToStreamOptions,
+} from "@builder.io/qwik/server";
+import { manifest } from "@qwik-client-manifest";
+import Root from "./root";
 
 export default function (opts: RenderToStreamOptions) {
   return renderToStream(<Root />, {
@@ -20,7 +23,7 @@ export default function (opts: RenderToStreamOptions) {
     ...opts,
     // Use container attributes to set attributes on the html tag.
     containerAttributes: {
-      lang: 'en-us',
+      lang: "en-us",
       ...opts.containerAttributes,
     },
   });

package/starters/apps/base/src/global.css

@@ -10,9 +10,9 @@ html {
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 body {

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

@@ -7,12 +7,11 @@
  * 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';
+import { setupServiceWorker } from "@builder.io/qwik-city/service-worker";
 
 setupServiceWorker();
 
-addEventListener('install', () => self.skipWaiting());
-
-addEventListener('activate', () => self.clients.claim());
+self.addEventListener("install", () => self.skipWaiting());
+self.addEventListener("activate", (ev) => ev.waitUntil(self.clients.claim()));
 
 declare const self: ServiceWorkerGlobalScope;

package/starters/apps/base/tsconfig.json

@@ -22,5 +22,5 @@
     }
   },
   "files": ["./.eslintrc.cjs"],
-  "include": ["src", "./*.d.ts"]
+  "include": ["src", "./*.d.ts", "./*.config.ts"]
 }

package/starters/apps/base/vite.config.ts

@@ -1,14 +1,14 @@
-import { defineConfig } from 'vite';
-import { qwikVite } from '@builder.io/qwik/optimizer';
-import { qwikCity } from '@builder.io/qwik-city/vite';
-import tsconfigPaths from 'vite-tsconfig-paths';
+import { defineConfig } from "vite";
+import { qwikVite } from "@builder.io/qwik/optimizer";
+import { qwikCity } from "@builder.io/qwik-city/vite";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig(() => {
   return {
     plugins: [qwikCity(), qwikVite(), tsconfigPaths()],
     preview: {
       headers: {
-        'Cache-Control': 'public, max-age=600',
+        "Cache-Control": "public, max-age=600",
       },
     },
   };

package/starters/apps/basic/src/components/router-head/router-head.tsx

@@ -1,5 +1,5 @@
-import { component$ } from '@builder.io/qwik';
-import { useDocumentHead, useLocation } from '@builder.io/qwik-city';
+import { component$ } from "@builder.io/qwik";
+import { useDocumentHead, useLocation } from "@builder.io/qwik-city";
 
 /**
  * The RouterHead component is placed inside of the document `<head>` element.

package/starters/apps/basic/src/components/starter/counter/counter.tsx

@@ -1,6 +1,6 @@
-import { component$, useSignal, $ } from '@builder.io/qwik';
-import styles from './counter.module.css';
-import Gauge from '../gauge';
+import { component$, useSignal, $ } from "@builder.io/qwik";
+import styles from "./counter.module.css";
+import Gauge from "../gauge";
 
 export default component$(() => {
   const count = useSignal(70);
@@ -13,12 +13,18 @@ export default component$(() => {
   });
 
   return (
-    <div class={styles['counter-wrapper']}>
-      <button class="button-dark button-small" onClick$={() => setCount(count.value - 1)}>
+    <div class={styles["counter-wrapper"]}>
+      <button
+        class="button-dark button-small"
+        onClick$={() => setCount(count.value - 1)}
+      >
         -
       </button>
       <Gauge value={count.value} />
-      <button class="button-dark button-small" onClick$={() => setCount(count.value + 1)}>
+      <button
+        class="button-dark button-small"
+        onClick$={() => setCount(count.value + 1)}
+      >
         +
       </button>
     </div>

package/starters/apps/basic/src/components/starter/footer/footer.tsx

@@ -1,6 +1,6 @@
-import { component$ } from '@builder.io/qwik';
-import { useServerTimeLoader } from '~/routes/layout';
-import styles from './footer.module.css';
+import { component$ } from "@builder.io/qwik";
+import { useServerTimeLoader } from "~/routes/layout";
+import styles from "./footer.module.css";
 
 export default component$(() => {
   const serverTime = useServerTimeLoader();

package/starters/apps/basic/src/components/starter/gauge/index.tsx

@@ -1,5 +1,5 @@
-import { component$ } from '@builder.io/qwik';
-import styles from './gauge.module.css';
+import { component$ } from "@builder.io/qwik";
+import styles from "./gauge.module.css";
 
 export default component$(({ value = 50 }: { value?: number }) => {
   const safeValue = value < 0 || value > 100 ? 50 : value;
@@ -14,7 +14,13 @@ export default component$(({ value = 50 }: { value?: number }) => {
           </linearGradient>
         </defs>
 
-        <circle r="56" cx="60" cy="60" stroke-width="8" style="fill: #000; stroke: #0000"></circle>
+        <circle
+          r="56"
+          cx="60"
+          cy="60"
+          stroke-width="8"
+          style="fill: #000; stroke: #0000"
+        ></circle>
 
         <circle
           r="56"

package/starters/apps/basic/src/components/starter/header/header.tsx

@@ -1,11 +1,11 @@
-import { component$ } from '@builder.io/qwik';
-import { QwikLogo } from '../icons/qwik';
-import styles from './header.module.css';
+import { component$ } from "@builder.io/qwik";
+import { QwikLogo } from "../icons/qwik";
+import styles from "./header.module.css";
 
 export default component$(() => {
   return (
     <header class={styles.header}>
-      <div class={['container', styles.wrapper]}>
+      <div class={["container", styles.wrapper]}>
         <div class={styles.logo}>
           <a href="/" title="qwik">
             <QwikLogo height={50} width={143} />
@@ -13,17 +13,26 @@ export default component$(() => {
         </div>
         <ul>
           <li>
-            <a href="https://qwik.builder.io/docs/components/overview/" target="_blank">
+            <a
+              href="https://qwik.builder.io/docs/components/overview/"
+              target="_blank"
+            >
               Docs
             </a>
           </li>
           <li>
-            <a href="https://qwik.builder.io/examples/introduction/hello-world/" target="_blank">
+            <a
+              href="https://qwik.builder.io/examples/introduction/hello-world/"
+              target="_blank"
+            >
               Examples
             </a>
           </li>
           <li>
-            <a href="https://qwik.builder.io/tutorial/welcome/overview/" target="_blank">
+            <a
+              href="https://qwik.builder.io/tutorial/welcome/overview/"
+              target="_blank"
+            >
               Tutorials
             </a>
           </li>

package/starters/apps/basic/src/components/starter/hero/hero.module.css

@@ -9,6 +9,16 @@
   gap: 40px;
 }
 
+.hero-image {
+  width: 100%;
+  position: absolute;
+  height: auto;
+  object-fit: cover;
+  z-index: -1;
+  opacity: 0.2;
+  pointer-events: none;
+}
+
 .hero p {
   color: white;
   margin: 0;

package/starters/apps/basic/src/components/starter/hero/hero.tsx

@@ -1,16 +1,18 @@
-import { component$ } from '@builder.io/qwik';
-import styles from './hero.module.css';
+import { component$ } from "@builder.io/qwik";
+import styles from "./hero.module.css";
+import ImgThunder from "~/media/thunder.png?jsx";
 
 export default component$(() => {
   return (
-    <div class={['container', styles.hero]}>
+    <div class={["container", styles.hero]}>
+      <ImgThunder class={styles["hero-image"]} />
       <h1>
         So <span class="highlight">fantastic</span>
         <br />
         to have <span class="highlight">you</span> here
       </h1>
       <p>Have fun building your App with Qwik.</p>
-      <div class={styles['button-group']}>
+      <div class={styles["button-group"]}>
         <button
           onClick$={async () => {
             const defaults = {
@@ -19,7 +21,7 @@ export default component$(() => {
               gravity: 0,
               decay: 0.95,
               startVelocity: 30,
-              colors: ['006ce9', 'ac7ff4', '18b6f6', '713fc2', 'ffffff'],
+              colors: ["006ce9", "ac7ff4", "18b6f6", "713fc2", "ffffff"],
               origin: {
                 x: 0.5,
                 y: 0.35,
@@ -31,10 +33,11 @@ export default component$(() => {
                 if ((globalThis as any).confetti) {
                   return resolve((globalThis as any).confetti as any);
                 }
-                const script = document.createElement('script');
+                const script = document.createElement("script");
                 script.src =
-                  'https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js';
-                script.onload = () => resolve((globalThis as any).confetti as any);
+                  "https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js";
+                script.onload = () =>
+                  resolve((globalThis as any).confetti as any);
                 script.onerror = reject;
                 document.head.appendChild(script);
                 script.remove();
@@ -66,7 +69,11 @@ export default component$(() => {
         >
           Time to celebrate
         </button>
-        <a href="https://qwik.builder.io/docs" target="_blank" class="button button-dark">
+        <a
+          href="https://qwik.builder.io/docs"
+          target="_blank"
+          class="button button-dark"
+        >
           Explore the docs
         </a>
       </div>

package/starters/apps/basic/src/components/starter/icons/qwik.tsx

@@ -1,4 +1,10 @@
-export const QwikLogo = ({ width = 100, height = 35 }: { width?: number; height?: number }) => (
+export const QwikLogo = ({
+  width = 100,
+  height = 35,
+}: {
+  width?: number;
+  height?: number;
+}) => (
   <svg
     width={width}
     height={height}

package/starters/apps/basic/src/components/starter/infobox/infobox.tsx

@@ -1,5 +1,5 @@
-import { Slot, component$ } from '@builder.io/qwik';
-import styles from './infobox.module.css';
+import { Slot, component$ } from "@builder.io/qwik";
+import styles from "./infobox.module.css";
 
 export default component$(() => {
   return (