create-qwik 0.0.39-dev20220805031634 → 0.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-qwik",
-  "version": "0.0.39-dev20220805031634",
+  "version": "0.0.40",
   "description": "Interactive CLI and API for generating Qwik projects.",
   "bin": "create-qwik",
   "main": "index.js",

package/starters/apps/base/package.json

@@ -15,12 +15,12 @@
     "typecheck": "tsc --incremental --noEmit"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.39-dev20220805031634",
+    "@builder.io/qwik": "0.0.40",
     "@types/eslint": "8.4.5",
     "@types/node": "latest",
     "@typescript-eslint/eslint-plugin": "5.30.7",
     "@typescript-eslint/parser": "5.30.7",
-    "eslint-plugin-qwik": "0.0.39-dev20220805031634",
+    "eslint-plugin-qwik": "0.0.40",
     "eslint": "8.20.0",
     "node-fetch": "3.2.9",
     "typescript": "4.7.4",

package/starters/apps/qwik-city/package.json

@@ -14,7 +14,7 @@
   },
   "type": "module",
   "devDependencies": {
-    "@builder.io/qwik-city": "0.0.29",
+    "@builder.io/qwik-city": "0.0.30",
     "vite-tsconfig-paths": "3.5.0"
   }
 }

package/starters/apps/qwik-city/src/components/footer/footer.tsx

@@ -17,9 +17,6 @@ export default component$(
           <li>
             <a href="/about-us">About Us</a>
           </li>
-          <li>
-            <a href="/sign-in">Sign In</a>
-          </li>
           <li>
             <a class="footer-home" href="/">
               Home

package/starters/apps/qwik-city/src/routes/api/[org]/[user].json/index.ts

@@ -1,21 +1,15 @@
-import type { EndpointHandler } from '@builder.io/qwik-city';
-import os from 'os';
+import type { RequestHandler } from '@builder.io/qwik-city';
 
-export const onGet: EndpointHandler = ({ request, params }) => {
+export const onGet: RequestHandler = ({ request, params }) => {
   return {
     timestamp: Date.now(),
     method: request.method,
     url: request.url,
     params,
-    os: os.platform(),
-    arch: os.arch(),
-    node: process.versions.node,
   };
 };
 
-export const onPost: EndpointHandler = async ({ request, response }) => {
+export const onPost: RequestHandler = async ({ request, response }) => {
   response.headers.set('Content-Type', 'text/plain');
-  return `Platform: ${os.platform()}, Node: ${process.versions.node}, HTTP Method: ${
-    request.method
-  }`;
+  return `HTTP Method: ${request.method}`;
 };

package/starters/apps/qwik-city/src/routes/api/data.json/index.ts

@@ -0,0 +1,9 @@
+import type { RequestHandler } from '@builder.io/qwik-city';
+
+export const onGet: RequestHandler = ({ request }) => {
+  return {
+    timestamp: Date.now(),
+    method: request.method,
+    url: request.url,
+  };
+};

package/starters/apps/qwik-city/src/routes/api/{index@foo.tsx → index@api.tsx}

@@ -1,7 +1,11 @@
 import { component$, Host, useClientEffect$, useStore } from '@builder.io/qwik';
 
+/**
+ * Uses named layout `foo`
+ */
+
 export default component$(() => {
-  const store = useStore({ timestamp: '', os: '', arch: '', node: '' });
+  const store = useStore({ timestamp: '' });
 
   useClientEffect$(async () => {
     const url = `/api/builder.io/oss.json`;
@@ -9,9 +13,6 @@ export default component$(() => {
     const data: any = await rsp.json();
 
     store.timestamp = data.timestamp;
-    store.os = data.os;
-    store.arch = data.arch;
-    store.node = data.node;
   });
 
   return (
@@ -28,12 +29,6 @@ export default component$(() => {
       </ul>
 
       <p>Timestamp: {store.timestamp}</p>
-      <p>
-        Node: <span>{store.node}</span>
-      </p>
-      <p>
-        OS: <span>{store.os}</span>
-      </p>
     </Host>
   );
 });

package/starters/apps/qwik-city/src/routes/api/{_layout-foo/index.tsx → layout-api.tsx}

@@ -2,6 +2,11 @@ import { component$, Host, Slot, useStyles$ } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
 import styles from './api.css?inline';
 
+/**
+ * Named layout `foo`
+ * Any index files named `index@foo.tsx` will use this layout
+ */
+
 export default component$(() => {
   useStyles$(styles);
 

package/starters/apps/qwik-city/src/routes/blog/{[...slug].tsx → [...slug]/index.tsx}

@@ -1,5 +1,5 @@
 import { component$, Host, Resource } from '@builder.io/qwik';
-import { useEndpoint, DocumentHead, EndpointHandler } from '@builder.io/qwik-city';
+import { useEndpoint, DocumentHead, RequestHandler } from '@builder.io/qwik-city';
 
 export default component$(() => {
   const resource = useEndpoint<typeof onGet>();
@@ -19,10 +19,10 @@ export default component$(() => {
   );
 });
 
-export const onGet: EndpointHandler<EndpointData> = async ({ params, request }) => {
+export const onGet: RequestHandler<EndpointData> = async ({ params, url }) => {
   return {
     blogTitle: `Blog: ${params.slug}`,
-    blogContent: `${params.slug}, ${request.url}`,
+    blogContent: `${params.slug}, ${url.pathname}`,
   };
 };
 

package/starters/apps/qwik-city/src/routes/dashboard/dashboard.css

@@ -0,0 +1,14 @@
+.dashboard {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  padding: 0;
+}
+
+.dashboard-menu {
+  background: #eee;
+  padding-left: 20px;
+}
+
+.dashboard-content {
+  padding-left: 20px;
+}

package/starters/apps/qwik-city/src/routes/dashboard/index.tsx

@@ -5,13 +5,11 @@ export default component$(() => {
   return (
     <Host>
       <h1>Dashboard</h1>
-      <p>
-        <a href="/sign-out">Sign Out</a>
-      </p>
+      <p>Welcome to the dashboard.</p>
     </Host>
   );
 });
 
 export const head: DocumentHead = {
-  title: 'Dashboard',
+  title: 'Home',
 };

package/starters/apps/qwik-city/src/routes/dashboard/layout!.tsx

@@ -0,0 +1,44 @@
+import { component$, Host, Slot, useStyles$ } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
+import Footer from '../../components/footer/footer';
+import Header from '../../components/header/header';
+import styles from './dashboard.css?inline';
+
+/**
+ * `layout!` means this is the top level layout. Because of the
+ * `!` at the end of the filename, it stops at this layout and does
+ * not keep crawling up the directories making more nested layouts.
+ */
+
+export default component$(() => {
+  useStyles$(styles);
+
+  return (
+    <Host>
+      <Header />
+      <main class="dashboard">
+        <aside class="dashboard-menu">
+          <h5>Dashboard Menu</h5>
+          <ul>
+            <li>
+              <a href="/dashboard/profile">Profile</a>
+            </li>
+            <li>
+              <a href="/dashboard/settings">Settings</a>
+            </li>
+          </ul>
+        </aside>
+        <section class="dashboard-content">
+          <Slot />
+        </section>
+      </main>
+      <Footer />
+    </Host>
+  );
+});
+
+export const head: DocumentHead = ({ head }) => {
+  return {
+    title: `Dashboard ${head.title}`,
+  };
+};

package/starters/apps/qwik-city/src/routes/dashboard/{profile@dashboard.tsx → profile/index.tsx}

@@ -1,4 +1,5 @@
 import { component$, Host } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
 
 export default component$(() => {
   return (
@@ -8,3 +9,7 @@ export default component$(() => {
     </Host>
   );
 });
+
+export const head: DocumentHead = {
+  title: 'Profile',
+};

package/starters/apps/qwik-city/src/routes/dashboard/settings/{index@dashboard.tsx → index.tsx}

@@ -1,4 +1,5 @@
 import { component$, Host } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
 
 export default component$(() => {
   return (
@@ -8,3 +9,7 @@ export default component$(() => {
     </Host>
   );
 });
+
+export const head: DocumentHead = {
+  title: 'Settings',
+};

package/starters/apps/qwik-city/src/routes/docs/{_layout!/index.tsx → layout!.tsx}

@@ -1,10 +1,10 @@
 import { component$, Host, Slot, useStyles$ } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
-import { Breadcrumbs } from '../../../components/breadcrumbs/breadcrumbs';
-import Footer from '../../../components/footer/footer';
-import Header from '../../../components/header/header';
-import { Menu } from '../../../components/menu/menu';
-import styles from './index.css?inline';
+import { Breadcrumbs } from '../../components/breadcrumbs/breadcrumbs';
+import Footer from '../../components/footer/footer';
+import Header from '../../components/header/header';
+import { Menu } from '../../components/menu/menu';
+import styles from './docs.css?inline';
 
 export default component$(() => {
   useStyles$(styles);

package/starters/apps/qwik-city/src/routes/docs/{_menu.md → menu.md}

@@ -3,7 +3,7 @@
 ## Introduction
 
 - [Overview](overview/index.md)
-- [Getting Started](getting-started.md)
+- [Getting Started](getting-started/index.md)
 
 ## Components
 

package/starters/apps/qwik-city/src/routes/products/{[id].tsx → [id]/index.tsx}

@@ -1,6 +1,5 @@
 import { Resource, component$, Host } from '@builder.io/qwik';
-import { useEndpoint, useLocation, EndpointHandler, DocumentHead } from '@builder.io/qwik-city';
-import os from 'os';
+import { useEndpoint, useLocation, RequestHandler, DocumentHead } from '@builder.io/qwik-city';
 
 export default component$(() => {
   const { params } = useLocation();
@@ -49,13 +48,18 @@ export default component$(() => {
   );
 });
 
-export const head: DocumentHead<ProductData> = ({ data }) => {
+export const head: DocumentHead<EndpointData> = ({ data }) => {
+  if (!data) {
+    return {
+      title: `Product not found`,
+    };
+  }
   return {
     title: `Product ${data.productId}, ${data.price}`,
   };
 };
 
-export const onGet: EndpointHandler<EndpointData> = async ({ params, response }) => {
+export const onGet: RequestHandler<EndpointData> = async ({ params, response }) => {
   // Serverside Endpoint
   // During SSR, this method is called directly on the server and returns the data object
   // On the client, this same data can be requested with fetch() at the same URL, but also
@@ -63,18 +67,16 @@ export const onGet: EndpointHandler<EndpointData> = async ({ params, response })
 
   if (params.id === 'shirt') {
     // Redirect, which will skip any rendering and the server will immediately redirect
-    response.redirect('/products/tshirt');
-    return;
+    throw response.redirect('/products/tshirt');
   }
 
   // artificially slow database call
   const productData = await loadProduct(params.id);
-
   if (!productData) {
-    // Product data not found
-    // but the data is still given to the renderer to decide what to do
+    // Product data not found, but the data is still
+    // given to the renderer to decide how to render
     response.status = 404;
-    return;
+    return productData;
   }
 
   // Found the product data
@@ -89,19 +91,18 @@ const loadProduct = (productId: string) => {
   return new Promise<ProductData | null>((resolve) =>
     setTimeout(() => {
       const productPrice = PRODUCT_DB[productId];
-      if (!productPrice) {
-        return null;
+      if (productPrice) {
+        // awesome product database found product data
+        const productData: ProductData = {
+          productId,
+          price: productPrice,
+          description: `Product description here.`,
+        };
+        resolve(productData);
+      } else {
+        // awesome product database did not find product data
+        resolve(null);
       }
-
-      const productData: ProductData = {
-        productId,
-        price: productPrice,
-        description: `Node ${process.versions.node} ${os.platform()} ${os.arch()} ${
-          os.cpus()[0].model
-        }`,
-      };
-
-      resolve(productData);
     }, 250)
   );
 };
@@ -113,7 +114,7 @@ const PRODUCT_DB: Record<string, string> = {
   tshirt: '$18.96',
 };
 
-type EndpointData = ProductData;
+type EndpointData = ProductData | null;
 
 interface ProductData {
   productId: string;

package/starters/apps/qwik-city/src/routes/api/data.json.ts

@@ -1,13 +0,0 @@
-import type { EndpointHandler } from '@builder.io/qwik-city';
-import os from 'os';
-
-export const onGet: EndpointHandler = ({ request }) => {
-  return {
-    timestamp: Date.now(),
-    method: request.method,
-    url: request.url,
-    os: os.platform(),
-    arch: os.arch(),
-    node: process.versions.node,
-  };
-};

package/starters/apps/qwik-city/src/routes/dashboard/_layout-dashboard.tsx

@@ -1,18 +0,0 @@
-import { component$, Host, Slot } from '@builder.io/qwik';
-import Footer from '../../components/footer/footer';
-import Header from '../../components/header/header';
-
-export default component$(() => {
-  return (
-    <Host>
-      <Header />
-      <main class="dashboard">
-        <aside class="dashboard-menu">Dashboard Menu</aside>
-        <section class="dashboard-content">
-          <Slot />
-        </section>
-      </main>
-      <Footer />
-    </Host>
-  );
-});