create-qwik 1.1.5 → 1.2.1

package/starters/apps/site-with-visual-cms/src/components/builder-registry.ts

@@ -1,14 +1,24 @@
-import type { RegisteredComponent } from '@builder.io/sdk-qwik';
-import Counter from './counter/counter';
+import type { RegisteredComponent } from "@builder.io/sdk-qwik";
+import Counter from "./counter/counter";
 
+/**
+ * This array is used to integrate custom components within Builder.
+ * https://www.builder.io/c/docs/custom-components-intro
+ *
+ * These components will be found the "Custom Components"
+ * section of Builder's visual editor.
+ * You can also turn on "components only mode" to limit
+ * editing to only these components.
+ * https://www.builder.io/c/docs/guides/components-only-mode
+ */
 export const CUSTOM_COMPONENTS: RegisteredComponent[] = [
   {
     component: Counter,
-    name: 'Counter',
+    name: "Counter",
     inputs: [
       {
-        name: 'initialValue',
-        type: 'number',
+        name: "initialValue",
+        type: "number",
       },
     ],
   },

package/starters/apps/site-with-visual-cms/src/components/counter/counter.module.css

@@ -5,7 +5,6 @@
   gap: 20px;
 }
 
-/* BUTTONS -------------------------------------- */
 .button {
   background: var(--qwik-dirty-black);
   border: none;

package/starters/apps/site-with-visual-cms/src/components/counter/counter.tsx

@@ -1,9 +1,9 @@
-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$((props: { initialValue: number }) => {
-  const count = useSignal(props.initialValue);
+  const count = useSignal(props.initialValue || 99);
 
   const setCount = $((newValue: number) => {
     if (newValue >= 0 && newValue <= 100) {
@@ -35,7 +35,7 @@ export const celebrate = $(async () => {
     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,
@@ -47,9 +47,9 @@ export const celebrate = $(async () => {
       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';
+        "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);

package/starters/apps/site-with-visual-cms/src/components/footer/footer.tsx

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

package/starters/apps/site-with-visual-cms/src/components/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;
@@ -13,7 +13,13 @@ export default component$(({ value = 50 }: { value?: number }) => {
             <stop offset="1000%" stop-color="#AC7FF4" />
           </linearGradient>
         </defs>
-        <circle r="56" cx="60" cy="60" stroke-width="8" style="fill: #000; stroke: #0000" />
+        <circle
+          r="56"
+          cx="60"
+          cy="60"
+          stroke-width="8"
+          style="fill: #000; stroke: #0000"
+        />
         <circle
           r="56"
           cx="60"

package/starters/apps/site-with-visual-cms/src/components/header/header.tsx

@@ -1,6 +1,6 @@
-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 (
@@ -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/site-with-visual-cms/src/components/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/site-with-visual-cms/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/site-with-visual-cms/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/site-with-visual-cms/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/site-with-visual-cms/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/site-with-visual-cms/src/global.css

@@ -21,9 +21,9 @@
 
 /* SHELL ---------------------------------------- */
 html {
-  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";
   background: var(--footer-background);
 }
 

package/starters/apps/site-with-visual-cms/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/site-with-visual-cms/src/routes/[...index]/index.tsx

@@ -1,7 +1,11 @@
-import { component$ } from '@builder.io/qwik';
-import { DocumentHead, routeLoader$ } from '@builder.io/qwik-city';
-import { getContent, RenderContent, getBuilderSearchParams } from '@builder.io/sdk-qwik';
-import { CUSTOM_COMPONENTS } from '../../components/builder-registry';
+import { component$ } from "@builder.io/qwik";
+import { DocumentHead, routeLoader$ } from "@builder.io/qwik-city";
+import {
+  getContent,
+  RenderContent,
+  getBuilderSearchParams,
+} from "@builder.io/sdk-qwik";
+import { CUSTOM_COMPONENTS } from "../../components/builder-registry";
 
 // This page is a catch-all for all routes that don't have a pre-defined route.
 // Using a catch-all route allows you to dynamically create enw pages in Builder.
@@ -10,13 +14,13 @@ import { CUSTOM_COMPONENTS } from '../../components/builder-registry';
 // `routeLoader$()` takes an async function to fetch content
 // from Builder with using `getContent()`.
 export const useBuilderContent = routeLoader$(async ({ url, error }) => {
-  const isPreviewing = url.searchParams.has('builder.preview');
+  const isPreviewing = url.searchParams.has("builder.preview");
 
   // Fetch Builder.io Visual CMS content using the Qwik SDK.
   // The public API key is set in the .env file at the root
   // https://www.builder.io/c/docs/using-your-api-key
   const builderContent = await getContent({
-    model: 'page',
+    model: "page",
     apiKey: import.meta.env.PUBLIC_BUILDER_API_KEY,
     options: getBuilderSearchParams(url.searchParams),
     userAttributes: {
@@ -27,7 +31,7 @@ export const useBuilderContent = routeLoader$(async ({ url, error }) => {
   // If there's no content, throw a 404.
   // You can use your own 404 component here
   if (!builderContent && !isPreviewing) {
-    throw error(404, 'Page not found');
+    throw error(404, "Page not found");
   }
 
   // return content fetched from Builder, which is JSON

package/starters/apps/site-with-visual-cms/src/routes/layout.tsx

@@ -1,6 +1,6 @@
-import { component$, Slot } from '@builder.io/qwik';
-import Header from '../components/header/header';
-import Footer from '../components/footer/footer';
+import { component$, Slot } from "@builder.io/qwik";
+import Header from "../components/header/header";
+import Footer from "../components/footer/footer";
 
 export default component$(() => {
   return (

package/starters/apps/site-with-visual-cms/src/routes/service-worker.ts

@@ -7,12 +7,12 @@
  * 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("install", () => self.skipWaiting());
 
-addEventListener('activate', () => self.clients.claim());
+addEventListener("activate", () => self.clients.claim());
 
 declare const self: ServiceWorkerGlobalScope;

package/starters/apps/site-with-visual-cms/vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite';
-import { qwikVite } from '@builder.io/qwik/optimizer';
-import { qwikCity } from '@builder.io/qwik-city/vite';
-import { builderDevTools } from '@builder.io/dev-tools/vite';
+import { defineConfig } from "vite";
+import { qwikVite } from "@builder.io/qwik/optimizer";
+import { qwikCity } from "@builder.io/qwik-city/vite";
+import { builderDevTools } from "@builder.io/dev-tools/vite";
 
 export default defineConfig(() => {
   return {