create-qwik 1.1.5 → 1.2.0

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

@@ -1,10 +1,10 @@
-import { component$ } from '@builder.io/qwik';
-import type { DocumentHead } from '@builder.io/qwik-city';
+import { component$ } from "@builder.io/qwik";
+import type { DocumentHead } from "@builder.io/qwik-city";
 
-import Counter from '~/components/starter/counter/counter';
-import Hero from '~/components/starter/hero/hero';
-import Infobox from '~/components/starter/infobox/infobox';
-import Starter from '~/components/starter/next-steps/next-steps';
+import Counter from "~/components/starter/counter/counter";
+import Hero from "~/components/starter/hero/hero";
+import Infobox from "~/components/starter/infobox/infobox";
+import Starter from "~/components/starter/next-steps/next-steps";
 
 export default component$(() => {
   return (
@@ -58,7 +58,7 @@ export default component$(() => {
               Example Apps
             </div>
             <p>
-              Have a look at the <a href="/demo/flower">Flower App</a> or the{' '}
+              Have a look at the <a href="/demo/flower">Flower App</a> or the{" "}
               <a href="/demo/todolist">Todo App</a>.
             </p>
           </Infobox>
@@ -102,11 +102,11 @@ export default component$(() => {
 });
 
 export const head: DocumentHead = {
-  title: 'Welcome to Qwik',
+  title: "Welcome to Qwik",
   meta: [
     {
-      name: 'description',
-      content: 'Qwik site description',
+      name: "description",
+      content: "Qwik site description",
     },
   ],
 };

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

@@ -1,11 +1,11 @@
-import { component$, Slot, useStyles$ } from '@builder.io/qwik';
-import { routeLoader$ } from '@builder.io/qwik-city';
-import type { RequestHandler } from '@builder.io/qwik-city';
+import { component$, Slot, useStyles$ } from "@builder.io/qwik";
+import { routeLoader$ } from "@builder.io/qwik-city";
+import type { RequestHandler } from "@builder.io/qwik-city";
 
-import Header from '~/components/starter/header/header';
-import Footer from '~/components/starter/footer/footer';
+import Header from "~/components/starter/header/header";
+import Footer from "~/components/starter/footer/footer";
 
-import styles from './styles.css?inline';
+import styles from "./styles.css?inline";
 
 export const onGet: RequestHandler = async ({ cacheControl }) => {
   // Control caching for this request for best performance and to reduce hosting costs:

package/starters/apps/basic/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/basic/src/routes/styles.css

@@ -2,9 +2,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";
 }
 
 body {
@@ -182,7 +182,7 @@ button.button-small {
 .icon:before {
   width: 18px;
   height: 18px;
-  content: '';
+  content: "";
   display: inline-block;
   margin-right: 20px;
   position: relative;

package/starters/apps/empty/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/empty/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 (

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

@@ -1,5 +1,5 @@
-import { component$ } from '@builder.io/qwik';
-import type { DocumentHead } from '@builder.io/qwik-city';
+import { component$ } from "@builder.io/qwik";
+import type { DocumentHead } from "@builder.io/qwik-city";
 
 export default component$(() => {
   return (
@@ -15,11 +15,11 @@ export default component$(() => {
 });
 
 export const head: DocumentHead = {
-  title: 'Welcome to Qwik',
+  title: "Welcome to Qwik",
   meta: [
     {
-      name: 'description',
-      content: 'Qwik site description',
+      name: "description",
+      content: "Qwik site description",
     },
   ],
 };

package/starters/apps/empty/src/routes/layout.tsx

@@ -1,5 +1,5 @@
-import { component$, Slot } from '@builder.io/qwik';
-import type { RequestHandler } from '@builder.io/qwik-city';
+import { component$, Slot } from "@builder.io/qwik";
+import type { RequestHandler } from "@builder.io/qwik-city";
 
 export const onGet: RequestHandler = async ({ cacheControl }) => {
   // Control caching for this request for best performance and to reduce hosting costs:

package/starters/apps/empty/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/library/.eslintrc.cjs

@@ -6,35 +6,35 @@ module.exports = {
     node: true,
   },
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:qwik/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:qwik/recommended",
   ],
-  parser: '@typescript-eslint/parser',
+  parser: "@typescript-eslint/parser",
   parserOptions: {
     tsconfigRootDir: __dirname,
-    project: ['./tsconfig.json'],
+    project: ["./tsconfig.json"],
     ecmaVersion: 2021,
-    sourceType: 'module',
+    sourceType: "module",
     ecmaFeatures: {
       jsx: true,
     },
   },
-  plugins: ['@typescript-eslint'],
+  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'],
+    "@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/package.json

@@ -32,17 +32,17 @@
     "release": "np"
   },
   "devDependencies": {
-    "@builder.io/qwik": "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",
+    "@builder.io/qwik": "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": "latest",
-    "eslint": "8.41.0",
+    "eslint": "8.43.0",
     "undici": "5.22.1",
     "np": "7.6.1",
     "prettier": "2.8.8",
-    "typescript": "5.0.4",
+    "typescript": "5.1.3",
     "vite": "4.3.9"
   },
   "__qwik__": {

package/starters/apps/library/src/components/counter/counter.tsx

@@ -1,4 +1,4 @@
-import { component$, useSignal } from '@builder.io/qwik';
+import { component$, useSignal } from "@builder.io/qwik";
 
 export const Counter = component$(() => {
   const count = useSignal(0);

package/starters/apps/library/src/components/logo/logo.tsx

@@ -1,4 +1,4 @@
-import { component$ } from '@builder.io/qwik';
+import { component$ } from "@builder.io/qwik";
 
 export const Logo = component$(() => {
   return (

package/starters/apps/library/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/library/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 />, {

package/starters/apps/library/src/index.ts

@@ -1,2 +1,2 @@
-export { Logo } from './components/logo/logo';
-export { Counter } from './components/counter/counter';
+export { Logo } from "./components/logo/logo";
+export { Counter } from "./components/counter/counter";

package/starters/apps/library/src/root.tsx

@@ -1,5 +1,5 @@
-import { Counter } from './components/counter/counter';
-import { Logo } from './components/logo/logo';
+import { Counter } from "./components/counter/counter";
+import { Logo } from "./components/logo/logo";
 
 export default () => {
   return (

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

@@ -1,14 +1,14 @@
-import { defineConfig } from 'vite';
-import { qwikVite } from '@builder.io/qwik/optimizer';
+import { defineConfig } from "vite";
+import { qwikVite } from "@builder.io/qwik/optimizer";
 
 export default defineConfig(() => {
   return {
     build: {
-      target: 'es2020',
+      target: "es2020",
       lib: {
-        entry: './src/index.ts',
-        formats: ['es', 'cjs'],
-        fileName: (format) => `index.qwik.${format === 'es' ? 'mjs' : 'cjs'}`,
+        entry: "./src/index.ts",
+        formats: ["es", "cjs"],
+        fileName: (format) => `index.qwik.${format === "es" ? "mjs" : "cjs"}`,
       },
     },
     plugins: [qwikVite()],

package/starters/apps/site-with-visual-cms/README.md

@@ -0,0 +1,15 @@
+## Builder.io + Qwik
+
+An example of using [Builder.io's](https://www.builder.io/) visual editor with Qwik.
+
+See the catchall route at [src/routes/[...index]/index.tsx](src/routes/[...index]/index.tsx) for the integration code.
+
+Registered components can be found in [src/components/builder-registry.ts](src/components/builder-registry.ts)
+
+### Docs
+
+See our full integration guides [here](https://www.builder.io/c/docs/developers)
+
+Also, when you push your integration to production, go back and update your preview URL to your production URL so now anyone on your team can visuall create content in your Qwik app!
+
+Also, to integrate structured data, see [this guide](https://www.builder.io/c/docs/integrate-cms-data)

package/starters/apps/site-with-visual-cms/package.json

@@ -2,8 +2,8 @@
   "name": "qwik-site-with-visual-cms",
   "description": "Site integrated with Builder.io for visual editing",
   "devDependencies": {
-    "@builder.io/dev-tools": "^0.0.1",
-    "@builder.io/sdk-qwik": "^0.3.0"
+    "@builder.io/dev-tools": "^0.0.7",
+    "@builder.io/sdk-qwik": "^0.4.1"
   },
   "type": "module",
   "__qwik__": {

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);
 }