create-qwik 0.21.0 → 0.22.0-dev20230314171944

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

@@ -2,6 +2,7 @@ import { component$, Slot } from '@builder.io/qwik';
 import { routeLoader$ } from '@builder.io/qwik-city';
 
 import Header from '../components/header/header';
+import Footer from '~/components/footer/footer';
 
 export const useServerTimeLoader = routeLoader$(() => {
   return {
@@ -12,19 +13,16 @@ export const useServerTimeLoader = routeLoader$(() => {
 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,12 +1,13 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
 import {
   type DocumentHead,
   routeLoader$,
-  routeAction$,
+  globalAction$,
   zod$,
   z,
   Form,
 } from '@builder.io/qwik-city';
+import style from './todolist.css?inline';
 
 interface ListItem {
   text: string;
@@ -18,7 +19,7 @@ export const useListLoader = routeLoader$(() => {
   return list;
 });
 
-export const useAddToListAction = routeAction$(
+export const useAddToListAction = globalAction$(
   (item) => {
     list.push(item);
     return {
@@ -31,26 +32,43 @@ export const useAddToListAction = routeAction$(
 );
 
 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/library/package.json

@@ -32,16 +32,16 @@
     "release": "np"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.21.0",
-    "@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",