create-qwik 0.20.1 → 0.22.0-dev20230314171944

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

@@ -1,4 +1,4 @@
-import { component$, useBrowserVisibleTask$, useStore, useStylesScoped$ } from '@builder.io/qwik';
+import { component$, useVisibleTask$, useStore, useStylesScoped$ } from '@builder.io/qwik';
 import { type DocumentHead, useLocation } from '@builder.io/qwik-city';
 import styles from './flower.css?inline';
 
@@ -11,7 +11,7 @@ export default component$(() => {
     number: 20,
   });
 
-  useBrowserVisibleTask$(({ cleanup }) => {
+  useVisibleTask$(({ cleanup }) => {
     const timeout = setTimeout(() => (state.count = 1), 500);
     cleanup(() => clearTimeout(timeout));
 
@@ -20,36 +20,38 @@ export default component$(() => {
   });
 
   return (
-    <>
-      <input
-        type="range"
-        value={state.number}
-        max={50}
-        onInput$={(ev) => {
-          state.number = (ev.target as HTMLInputElement).valueAsNumber;
-        }}
-      />
-      <div
-        style={{
-          '--state': `${state.count * 0.1}`,
-        }}
-        class={{
-          host: true,
-          pride: loc.query.get('pride') === 'true',
-        }}
-      >
-        {Array.from({ length: state.number }, (_, i) => (
-          <div
-            key={i}
-            class={{
-              square: true,
-              odd: i % 2 === 0,
-            }}
-            style={{ '--index': `${i + 1}` }}
-          />
-        )).reverse()}
+    <div class="section">
+      <div class="container center">
+        <input
+          type="range"
+          value={state.number}
+          max={50}
+          onInput$={(ev) => {
+            state.number = (ev.target as HTMLInputElement).valueAsNumber;
+          }}
+        />
+        <div
+          style={{
+            '--state': `${state.count * 0.1}`,
+          }}
+          class={{
+            host: true,
+            pride: loc.query.get('pride') === 'true',
+          }}
+        >
+          {Array.from({ length: state.number }, (_, i) => (
+            <div
+              key={i}
+              class={{
+                square: true,
+                odd: i % 2 === 0,
+              }}
+              style={{ '--index': `${i + 1}` }}
+            />
+          )).reverse()}
+        </div>
       </div>
-    </>
+    </div>
   );
 });
 

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

@@ -1,150 +1,107 @@
 import { component$ } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
-import { Link } from '@builder.io/qwik-city';
+import Counter from '~/components/counter/counter';
+import Hero from '~/components/hero/hero';
+import Infobox from '~/components/infobox/infobox';
+import Starter from '~/components/starter/starter';
 
 export default component$(() => {
   return (
-    <div>
-      <h1>
-        Welcome to Qwik <span class="lightning">⚡️</span>
-      </h1>
+    <>
+      <Hero />
 
-      <ul>
-        <li>
-          Check out the <code>src/routes</code> directory to get started.
-        </li>
-        <li>
-          Add integrations with <code>npm run qwik add</code>.
-        </li>
-        <li>
-          More info about development in <code>README.md</code>
-        </li>
-      </ul>
+      <div class="section bright">
+        <div class="container center">
+          <Starter />
+        </div>
+      </div>
 
-      <h2>Commands</h2>
+      <div class="section">
+        <div class="container center">
+          <h3>
+            You can <b>count</b> on me
+          </h3>
+          <Counter />
+        </div>
+      </div>
 
-      <table class="commands">
-        <tbody>
-          <tr>
-            <td>
-              <code>npm run dev</code>
-            </td>
-            <td>Start the dev server and watch for changes.</td>
-          </tr>
-          <tr>
-            <td>
-              <code>npm run preview</code>
-            </td>
-            <td>Production build and start preview server.</td>
-          </tr>
-          <tr>
-            <td>
-              <code>npm run build</code>
-            </td>
-            <td>Production build.</td>
-          </tr>
-          <tr>
-            <td>
-              <code>npm run qwik add</code>
-            </td>
-            <td>Select an integration to add.</td>
-          </tr>
-        </tbody>
-      </table>
+      <div class="section">
+        <div class="container topics">
+          <Infobox>
+            <div q:slot="title" class="icon icon-cli">
+              CLI Commands
+            </div>
+            <>
+              <p>
+                <code>npm run dev</code>
+                <br />
+                Starts the development server and watches for changes
+              </p>
+              <p>
+                <code>npm run preview</code>
+                <br />
+                Creates production build and starts a server to preview it
+              </p>
+              <p>
+                <code>npm run build</code>
+                <br />
+                Creates production build
+              </p>
+              <p>
+                <code>npm run qwik add</code>
+                <br />
+                Runs the qwik CLI to add integrations
+              </p>
+            </>
+          </Infobox>
 
-      <h2>Add Integrations</h2>
+          <div>
+            <Infobox>
+              <div q:slot="title" class="icon icon-apps">
+                Example Apps
+              </div>
+              <p>
+                Have a look at the <a href="/flower">React Flower App</a> or the{' '}
+                <a href="/todolist">Todo App</a>.
+              </p>
+            </Infobox>
 
-      <table class="commands">
-        <tbody>
-          <tr>
-            <td>
-              <code>npm run qwik add azure-swa</code>
-            </td>
-            <td>
-              <a href="https://learn.microsoft.com/azure/static-web-apps/overview" target="_blank">
-                Azure Static Web Apps
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>npm run qwik add cloudflare-pages</code>
-            </td>
-            <td>
-              <a href="https://developers.cloudflare.com/pages" target="_blank">
-                Cloudflare Pages Server
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>npm run qwik add express</code>
-            </td>
-            <td>
-              <a href="https://expressjs.com/" target="_blank">
-                Nodejs Express Server
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>npm run qwik add netlify-edge</code>
-            </td>
-            <td>
-              <a href="https://docs.netlify.com/" target="_blank">
-                Netlify Edge Functions
-              </a>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <code>npm run qwik add vercel-edge</code>
-            </td>
-            <td>
-              <a href="https://vercel.com/docs/concepts/get-started" target="_blank">
-                Vercel Edge Functions
-              </a>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <h2>Community</h2>
-
-      <ul>
-        <li>
-          <span>Questions or just want to say hi? </span>
-          <a href="https://qwik.builder.io/chat" target="_blank">
-            Chat on discord!
-          </a>
-        </li>
-        <li>
-          <span>Follow </span>
-          <a href="https://twitter.com/QwikDev" target="_blank">
-            @QwikDev
-          </a>
-          <span> on Twitter</span>
-        </li>
-        <li>
-          <span>Open issues and contribute on </span>
-          <a href="https://github.com/BuilderIO/qwik" target="_blank">
-            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 🤯
-      </Link>
-      <Link class="todolist" href="/todolist/">
-        TODO demo 📝
-      </Link>
-    </div>
+            <Infobox>
+              <div q:slot="title" class="icon icon-community">
+                Community
+              </div>
+              <ul>
+                <li>
+                  <span>Questions or just want to say hi? </span>
+                  <a href="https://qwik.builder.io/chat" target="_blank">
+                    Chat on discord!
+                  </a>
+                </li>
+                <li>
+                  <span>Follow </span>
+                  <a href="https://twitter.com/QwikDev" target="_blank">
+                    @QwikDev
+                  </a>
+                  <span> on Twitter</span>
+                </li>
+                <li>
+                  <span>Open issues and contribute on </span>
+                  <a href="https://github.com/BuilderIO/qwik" target="_blank">
+                    GitHub
+                  </a>
+                </li>
+                <li>
+                  <span>Watch </span>
+                  <a href="https://qwik.builder.io/media/" target="_blank">
+                    Presentations, Podcasts, Videos, etc.
+                  </a>
+                </li>
+              </ul>
+            </Infobox>
+          </div>
+        </div>
+      </div>
+    </>
   );
 });
 

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

@@ -1,9 +1,10 @@
 import { component$, Slot } from '@builder.io/qwik';
-import { loader$ } from '@builder.io/qwik-city';
+import { routeLoader$ } from '@builder.io/qwik-city';
 
 import Header from '../components/header/header';
+import Footer from '~/components/footer/footer';
 
-export const useServerTimeLoader = loader$(() => {
+export const useServerTimeLoader = routeLoader$(() => {
   return {
     date: new Date().toISOString(),
   };
@@ -12,19 +13,16 @@ export const useServerTimeLoader = loader$(() => {
 export default component$(() => {
   const serverTime = useServerTimeLoader();
   return (
-    <>
+    <div class="page">
       <main>
         <Header />
-        <section>
-          <Slot />
-        </section>
+        <Slot />
       </main>
-      <footer>
-        <a href="https://www.builder.io/" target="_blank">
-          Made with ♡ by Builder.io
-          <div>{serverTime.value.date}</div>
-        </a>
-      </footer>
-    </>
+      <div class="section dark">
+        <div class="container">
+          <Footer serverTime={serverTime} />
+        </div>
+      </div>
+    </div>
   );
 });

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

@@ -0,0 +1,18 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * The service-worker.ts file is used to have state of the art prefetching.
+ * https://qwik.builder.io/qwikcity/prefetching/overview/
+ *
+ * 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';
+
+setupServiceWorker();
+
+addEventListener('install', () => self.skipWaiting());
+
+addEventListener('activate', () => self.clients.claim());
+
+declare const self: ServiceWorkerGlobalScope;

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

@@ -1,5 +1,13 @@
-import { component$ } from '@builder.io/qwik';
-import { type DocumentHead, loader$, action$, zod$, z, Form } from '@builder.io/qwik-city';
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import {
+  type DocumentHead,
+  routeLoader$,
+  globalAction$,
+  zod$,
+  z,
+  Form,
+} from '@builder.io/qwik-city';
+import style from './todolist.css?inline';
 
 interface ListItem {
   text: string;
@@ -7,11 +15,11 @@ interface ListItem {
 
 export const list: ListItem[] = [];
 
-export const useListLoader = loader$(() => {
+export const useListLoader = routeLoader$(() => {
   return list;
 });
 
-export const useAddToListAction = action$(
+export const useAddToListAction = globalAction$(
   (item) => {
     list.push(item);
     return {
@@ -24,26 +32,43 @@ export const useAddToListAction = action$(
 );
 
 export default component$(() => {
+  useStylesScoped$(style);
   const list = useListLoader();
   const action = useAddToListAction();
 
   return (
     <>
-      <h1>Form Action TODO list</h1>
-      <ul>
-        {list.value.map((item) => (
-          <li>{item.text}</li>
-        ))}
-      </ul>
-      <Form action={action} spaReset>
-        <input type="text" name="text" required />
-        <button type="submit">Add item</button>
-      </Form>
-      <p>This little app works even when JavaScript is disabled.</p>
+      <div class="section">
+        <div class="container center">
+          <h1 class="hero">TODO List</h1>
+        </div>
+      </div>
+
+      <div class="section bright">
+        <div class="container center mh-300">
+          {(list.value.length && (
+            <ul class="list">
+              {list.value.map((item, index) => (
+                <li key={`items-${index}`}>{item.text}</li>
+              ))}
+            </ul>
+          )) || <span class="no-content">No items found</span>}
+        </div>
+      </div>
+
+      <div class="section">
+        <div class="container center">
+          <Form action={action} spaReset>
+            <input type="text" name="text" required /> <button type="submit">Add item</button>
+          </Form>
+
+          <p class="hint">PS: This little app works even when JavaScript is disabled.</p>
+        </div>
+      </div>
     </>
   );
 });
 
 export const head: DocumentHead = {
-  title: 'Qwik To-Do',
+  title: 'Qwik Todo List',
 };

package/starters/apps/basic/src/routes/todolist/todolist.css

@@ -0,0 +1,13 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.list li {
+  list-style: none;
+}
+
+.hint {
+  font-size: 0.8rem;
+}

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

@@ -8,7 +8,7 @@ export const Breadcrumbs = component$(() => {
   const { menu } = useContent();
   const loc = useLocation();
 
-  const breadcrumbs = createBreadcrumbs(menu, loc.pathname);
+  const breadcrumbs = createBreadcrumbs(menu, loc.url.pathname);
   if (breadcrumbs.length === 0) {
     return null;
   }

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

@@ -6,7 +6,7 @@ import styles from './header.css?inline';
 export default component$(() => {
   useStyles$(styles);
 
-  const { pathname } = useLocation();
+  const { url } = useLocation();
 
   return (
     <header>
@@ -14,10 +14,10 @@ export default component$(() => {
         <QwikLogo />
       </a>
       <nav>
-        <a href="/docs" class={{ active: pathname.startsWith('/docs') }}>
+        <a href="/docs" class={{ active: url.pathname.startsWith('/docs') }}>
           Docs
         </a>
-        <a href="/about-us" class={{ active: pathname.startsWith('/about-us') }}>
+        <a href="/about-us" class={{ active: url.pathname.startsWith('/about-us') }}>
           About Us
         </a>
       </nav>

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

@@ -20,7 +20,7 @@ export default component$(() => {
                     <Link
                       href={item.href}
                       class={{
-                        'is-active': loc.pathname === item.href,
+                        'is-active': loc.url.pathname === item.href,
                       }}
                     >
                       {item.text}

package/starters/apps/documentation-site/src/components/on-this-page/on-this-page.tsx

@@ -8,8 +8,8 @@ export default component$(() => {
   const { headings } = useContent();
   const contentHeadings = headings?.filter((h) => h.level === 2 || h.level === 3) || [];
 
-  const { pathname } = useLocation();
-  const editUrl = `#update-your-edit-url-for-${pathname}`;
+  const { url } = useLocation();
+  const editUrl = `#update-your-edit-url-for-${url.pathname}`;
 
   return (
     <aside class="on-this-page">

package/starters/apps/library/package.json

@@ -32,16 +32,16 @@
     "release": "np"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.20.1",
-    "@types/eslint": "8.21.1",
-    "@types/node": "^18.14.0",
+    "@builder.io/qwik": "0.22.0",
+    "@types/eslint": "8.21.2",
+    "@types/node": "^18.15.3",
     "@types/node-fetch": "latest",
-    "@typescript-eslint/eslint-plugin": "5.54.0",
-    "@typescript-eslint/parser": "5.54.0",
+    "@typescript-eslint/eslint-plugin": "5.55.0",
+    "@typescript-eslint/parser": "5.55.0",
     "eslint-plugin-qwik": "latest",
-    "eslint": "8.35.0",
+    "eslint": "8.36.0",
     "node-fetch": "3.3.0",
-    "undici": "5.20.0",
+    "undici": "5.21.0",
     "np": "7.6.1",
     "prettier": "2.8.4",
     "typescript": "4.9.5",