create-qwik 1.1.5 → 1.2.0

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.0",
+    "@builder.io/qwik-city": "^1.2.0",
+    "@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.0",
+    "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 (

package/starters/apps/basic/src/components/starter/next-steps/next-steps.tsx

@@ -1,29 +1,31 @@
-import { component$, $, useOnWindow, useSignal } from '@builder.io/qwik';
-import styles from './next-steps.module.css';
+import { component$, $, useOnWindow, useSignal } from "@builder.io/qwik";
+import styles from "./next-steps.module.css";
 
 export const GETTING_STARTED_STEPS = [
   {
-    message: "Press and hold the <b>ALT</b> key to activate 'Click-to-Source' mode",
+    message:
+      "Press and hold the <b>ALT</b> key to activate 'Click-to-Source' mode",
   },
   {
-    message: 'Select the title of this page while keeping the <b>ALT</b> key pressed',
+    message:
+      "Select the title of this page while keeping the <b>ALT</b> key pressed",
     hint: 'Edit the title and save the changes. If your editor does not open, have a look at <a href="https://github.com/yyx990803/launch-editor#supported-editors" target="_blank">this page</a> to set the correct <code>LAUNCH_EDITOR</code> value.',
   },
   {
     message:
-      '<b>Update</b> now the <code>routeLoader$</code> defined in the <code>src/routes//layout.tsx</code> file',
-    hint: 'Instead of returning the current date, you could return any possible string.<br />The output is displayed in the footer.',
+      "<b>Update</b> now the <code>routeLoader$</code> defined in the <code>src/routes//layout.tsx</code> file",
+    hint: "Instead of returning the current date, you could return any possible string.<br />The output is displayed in the footer.",
   },
   {
-    message: 'Create a <b>new Route</b> called <code>/me</code>',
+    message: "Create a <b>new Route</b> called <code>/me</code>",
     hint: 'Create a new directory called <code>me</code> in <code>src/routes</code>. Within this directory create a <code>index.tsx</code> file or copy the <code>src/routes/index.tsx</code> file. Your new route is now accessible <a href="/me" target="_blank">here</a> ✨',
   },
   {
-    message: 'Time to have a look at <b>Forms</b>',
+    message: "Time to have a look at <b>Forms</b>",
     hint: 'Open <a href="/demo/todolist" target="_blank">the TODO list App</a> and add some items to the list. Try the same with disabled JavaScript 🐰',
   },
   {
-    message: '<b>Congratulations!</b> You are now familiar with the basics! 🎉',
+    message: "<b>Congratulations!</b> You are now familiar with the basics! 🎉",
     hint: "If you need further info on how to use qwik, have a look at <a href='https://qwik.builder.io' target='_blank'>qwik.builder.io</a> or join the <a href='https://qwik.builder.io/chat' target='_blank'>Discord channel</a>.",
   },
 ];
@@ -32,9 +34,9 @@ export default component$(() => {
   const gettingStartedStep = useSignal(0);
 
   useOnWindow(
-    'keydown',
+    "keydown",
     $((e) => {
-      if ((e as KeyboardEvent).key === 'Alt') {
+      if ((e as KeyboardEvent).key === "Alt") {
         gettingStartedStep.value = 1;
       }
     })
@@ -50,19 +52,27 @@ export default component$(() => {
       <div class={styles.gettingstarted}>
         <div
           class={styles.intro}
-          dangerouslySetInnerHTML={GETTING_STARTED_STEPS[gettingStartedStep.value].message}
+          dangerouslySetInnerHTML={
+            GETTING_STARTED_STEPS[gettingStartedStep.value].message
+          }
         />
         <span
           class={styles.hint}
-          dangerouslySetInnerHTML={GETTING_STARTED_STEPS[gettingStartedStep.value].hint}
+          dangerouslySetInnerHTML={
+            GETTING_STARTED_STEPS[gettingStartedStep.value].hint
+          }
         />
       </div>
       {gettingStartedStep.value + 1 < GETTING_STARTED_STEPS.length ? (
         <button class="button-dark" onClick$={() => gettingStartedStep.value++}>
-          Continue with Step {gettingStartedStep.value + 2} of {GETTING_STARTED_STEPS.length}
+          Continue with Step {gettingStartedStep.value + 2} of{" "}
+          {GETTING_STARTED_STEPS.length}
         </button>
       ) : (
-        <button class="button-dark" onClick$={() => (gettingStartedStep.value = 0)}>
+        <button
+          class="button-dark"
+          onClick$={() => (gettingStartedStep.value = 0)}
+        >
           Re-Start
         </button>
       )}

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

@@ -22,9 +22,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/basic/src/root.tsx

@@ -1,15 +1,19 @@
-import { component$ } from '@builder.io/qwik';
-import { QwikCityProvider, RouterOutlet, ServiceWorkerRegister } from '@builder.io/qwik-city';
-import { RouterHead } from './components/router-head/router-head';
+import { component$ } from "@builder.io/qwik";
+import {
+  QwikCityProvider,
+  RouterOutlet,
+  ServiceWorkerRegister,
+} from "@builder.io/qwik-city";
+import { RouterHead } from "./components/router-head/router-head";
 
-import './global.css';
+import "./global.css";
 
 export default component$(() => {
   /**
    * The root of a QwikCity site always start with the <QwikCityProvider> component,
    * immediately followed by the document's <head> and <body>.
    *
-   * Dont remove the `<head>` and `<body>` elements.
+   * Don't remove the `<head>` and `<body>` elements.
    */
 
   return (
@@ -18,10 +22,10 @@ export default component$(() => {
         <meta charSet="utf-8" />
         <link rel="manifest" href="/manifest.json" />
         <RouterHead />
+        <ServiceWorkerRegister />
       </head>
       <body lang="en">
         <RouterOutlet />
-        <ServiceWorkerRegister />
       </body>
     </QwikCityProvider>
   );

package/starters/apps/basic/src/routes/demo/flower/flower.css

@@ -31,7 +31,9 @@ h1 {
   display: block;
   width: var(--size);
   height: var(--size);
-  transform: rotateZ(calc(var(--rotation) * var(--state) * (var(--center) - var(--index))));
+  transform: rotateZ(
+    calc(var(--rotation) * var(--state) * (var(--center) - var(--index)))
+  );
   transition-property: transform, border-color;
   transition-duration: 5s;
   transition-timing-function: ease-in-out;

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

@@ -1,6 +1,11 @@
-import { component$, useVisibleTask$, useStore, useStylesScoped$ } from '@builder.io/qwik';
-import { type DocumentHead, useLocation } from '@builder.io/qwik-city';
-import styles from './flower.css?inline';
+import {
+  component$,
+  useVisibleTask$,
+  useStore,
+  useStylesScoped$,
+} from "@builder.io/qwik";
+import { type DocumentHead, useLocation } from "@builder.io/qwik-city";
+import styles from "./flower.css?inline";
 
 export default component$(() => {
   useStylesScoped$(styles);
@@ -37,11 +42,11 @@ export default component$(() => {
       />
       <div
         style={{
-          '--state': `${state.count * 0.1}`,
+          "--state": `${state.count * 0.1}`,
         }}
         class={{
           host: true,
-          pride: loc.url.searchParams.get('pride') === 'true',
+          pride: loc.url.searchParams.get("pride") === "true",
         }}
       >
         {Array.from({ length: state.number }, (_, i) => (
@@ -51,7 +56,7 @@ export default component$(() => {
               square: true,
               odd: i % 2 === 0,
             }}
-            style={{ '--index': `${i + 1}` }}
+            style={{ "--index": `${i + 1}` }}
           />
         )).reverse()}
       </div>
@@ -60,5 +65,5 @@ export default component$(() => {
 });
 
 export const head: DocumentHead = {
-  title: 'Qwik Flower',
+  title: "Qwik Flower",
 };

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

@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from "@builder.io/qwik";
 import {
   type DocumentHead,
   routeLoader$,
@@ -6,8 +6,8 @@ import {
   zod$,
   z,
   Form,
-} from '@builder.io/qwik-city';
-import styles from './todolist.module.css';
+} from "@builder.io/qwik-city";
+import styles from "./todolist.module.css";
 
 interface ListItem {
   text: string;
@@ -46,29 +46,33 @@ export default component$(() => {
       <div role="presentation" class="ellipsis"></div>
 
       <div class="container container-center">
-        {(list.value.length && (
+        {list.value.length === 0 ? (
+          <span class={styles.empty}>No items found</span>
+        ) : (
           <ul class={styles.list}>
             {list.value.map((item, index) => (
               <li key={`items-${index}`}>{item.text}</li>
             ))}
           </ul>
-        )) || <span class={styles.empty}>No items found</span>}
+        )}
       </div>
 
       <div class="container container-center">
         <Form action={action} spaReset>
-          <input type="text" name="text" required class={styles.input} />{' '}
+          <input type="text" name="text" required class={styles.input} />{" "}
           <button type="submit" class="button-dark">
             Add item
           </button>
         </Form>
 
-        <p class={styles.hint}>PS: This little app works even when JavaScript is disabled.</p>
+        <p class={styles.hint}>
+          PS: This little app works even when JavaScript is disabled.
+        </p>
       </div>
     </>
   );
 });
 
 export const head: DocumentHead = {
-  title: 'Qwik Todo List',
+  title: "Qwik Todo List",
 };