create-qwik 0.0.37 → 0.0.39-dev20220801194759

package/package.json

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

package/starters/apps/base/package.json

@@ -9,23 +9,24 @@
     "dev": "npm run dev.ssr",
     "dev.client": "vite",
     "dev.ssr": "node --inspect node_modules/vite/bin/vite.js --mode ssr",
-    "dev.debug": "node --inspect-brk node_modules/vite/bin/vite.js --mode ssr",
+    "dev.debug": "node --inspect-brk node_modules/vite/bin/vite.js --force --mode ssr",
     "start": "npm run dev",
     "lint": "eslint \"src/**/*.ts*\"",
     "typecheck": "tsc --incremental --noEmit"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.37",
+    "@builder.io/qwik": "0.0.39-dev20220801194759",
     "@types/eslint": "8.4.5",
     "@types/node": "latest",
-    "@typescript-eslint/eslint-plugin": "5.30.6",
-    "@typescript-eslint/parser": "5.30.6",
-    "eslint-plugin-qwik": "0.0.37",
+    "@typescript-eslint/eslint-plugin": "5.30.7",
+    "@typescript-eslint/parser": "5.30.7",
+    "eslint-plugin-qwik": "0.0.39-dev20220801194759",
     "eslint": "8.20.0",
-    "node-fetch": "3.2.8",
+    "node-fetch": "3.2.9",
     "typescript": "4.7.4",
-    "vite": "3.0.1"
+    "vite": "3.0.2"
   },
+  "type": "module",
   "homepage": "https://qwik.builder.io/",
   "private": true,
   "engines": {

package/starters/apps/base/src/entry.dev.tsx

@@ -1,4 +1,4 @@
-import { render } from '@builder.io/qwik';
+import { render, RenderOptions } from '@builder.io/qwik';
 import Root from './root';
 
 /**
@@ -10,4 +10,6 @@ import Root from './root';
  * - More code is transferred to the browser than in SSR mode.
  * - Optimizer/Serialization/Deserialization code is not exercised!
  */
-render(document, <Root />);
+export default function (opts: RenderOptions) {
+  return render(document, <Root />, opts);
+}

package/starters/apps/base/src/entry.ssr.tsx

@@ -1,14 +1,14 @@
-import { renderToString, RenderOptions } from '@builder.io/qwik/server';
+import { renderToStream, RenderToStreamOptions } from '@builder.io/qwik/server';
 import { manifest } from '@qwik-client-manifest';
 import Root from './root';
 
 /**
  * Server-Side Render method to be called by a server.
  */
-export function render(opts?: RenderOptions) {
+export default function (opts: RenderToStreamOptions) {
   // Render the Root component to a string
   // Pass in the manifest that was generated from the client build
-  return renderToString(<Root />, {
+  return renderToStream(<Root />, {
     manifest,
     ...opts,
   });

package/starters/apps/blank/package.json

@@ -8,6 +8,7 @@
     "@types/express": "4.17.13",
     "express": "4.17.3"
   },
+  "type": "module",
   "__qwik__": {
     "priority": 0,
     "featureOptions": [

package/starters/apps/blank/src/entry.express.tsx

@@ -1,6 +1,9 @@
 import express from 'express';
 import { join } from 'path';
-import { render } from './entry.ssr';
+import { fileURLToPath } from 'url';
+import render from './entry.ssr';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
 /**
  * Create an express server
@@ -32,11 +35,14 @@ app.get('/*', async (req, res, next) => {
   try {
     // Render the Root component to a string
     const result = await render({
+      stream: res,
       url: req.url,
     });
 
     // respond with SSR'd HTML
-    res.send(result.html);
+    if ('html' in result) {
+      res.send((result as any).html);
+    }
   } catch (e) {
     // Error while server-side rendering
     next(e);

package/starters/apps/blank/src/entry.ssr.tsx

@@ -1,14 +1,14 @@
-import { renderToString, RenderOptions } from '@builder.io/qwik/server';
+import { renderToStream, RenderToStreamOptions } from '@builder.io/qwik/server';
 import { manifest } from '@qwik-client-manifest';
 import Root from './root';
 
 /**
  * Server-Side Render method to be called by a server.
  */
-export function render(opts?: RenderOptions) {
+export default function (opts: RenderToStreamOptions) {
   // Render the Root component to a string
   // Pass in the manifest that was generated from the client build
-  return renderToString(<Root />, {
+  return renderToStream(<Root />, {
     manifest,
     ...opts,
   });

package/starters/apps/library/package.json

@@ -6,6 +6,7 @@
   "qwik": "./lib/index.qwik.mjs",
   "module": "./lib/index.qwik.mjs",
   "types": "./lib/types/index.d.ts",
+  "type": "module",
   "exports": {
     ".": {
       "import": "./lib/index.qwik.mjs",

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

@@ -12,8 +12,9 @@
       "prettier"
     ]
   },
+  "type": "module",
   "devDependencies": {
-    "@builder.io/qwik-city": "0.0.20",
+    "@builder.io/qwik-city": "0.0.26",
     "vite-tsconfig-paths": "3.5.0"
   }
 }

package/starters/apps/qwik-city/src/components/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,25 @@
+nav.breadcrumbs {
+  padding: 5px;
+  border-bottom: 1px solid #ddd;
+}
+
+nav.breadcrumbs > span {
+  display: inline-block;
+  padding: 5px 0;
+  font-size: 12px;
+}
+
+nav.breadcrumbs > span a {
+  text-decoration: none;
+  color: inherit;
+}
+
+nav.breadcrumbs > span::after {
+  content: '>';
+  padding: 0 5px;
+  opacity: 0.4;
+}
+
+nav.breadcrumbs > span:last-child::after {
+  display: none;
+}

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

@@ -0,0 +1,77 @@
+import { component$, Host, useScopedStyles$ } from '@builder.io/qwik';
+import { useContent, useLocation, ContentMenu } from '@builder.io/qwik-city';
+import styles from './breadcrumbs.css?inline';
+
+export const Breadcrumbs = component$(
+  () => {
+    useScopedStyles$(styles);
+
+    const { menu } = useContent();
+    const loc = useLocation();
+
+    const breadcrumbs = createBreadcrumbs(menu, loc.pathname);
+    if (breadcrumbs.length === 0) {
+      return null;
+    }
+
+    return (
+      <Host class="breadcrumbs">
+        {breadcrumbs.map((b) => (
+          <span>{b.href ? <a href={b.href}>{b.text}</a> : b.text}</span>
+        ))}
+      </Host>
+    );
+  },
+  { tagName: 'nav' }
+);
+
+export function createBreadcrumbs(menu: ContentMenu | undefined, pathname: string) {
+  if (menu?.items) {
+    for (const indexA of menu.items) {
+      const breadcrumbA: ContentBreadcrumb = {
+        text: indexA.text,
+      };
+      if (typeof indexA.href === 'string') {
+        breadcrumbA.href = indexA.href;
+      }
+      if (indexA.href === pathname) {
+        return [breadcrumbA];
+      }
+
+      if (indexA.items) {
+        for (const indexB of indexA.items) {
+          const breadcrumbB: ContentBreadcrumb = {
+            text: indexB.text,
+          };
+          if (typeof indexB.href === 'string') {
+            breadcrumbB.href = indexB.href;
+          }
+          if (indexB.href === pathname) {
+            return [breadcrumbA, breadcrumbB];
+          }
+
+          if (indexB.items) {
+            for (const indexC of indexB.items) {
+              const breadcrumbC: ContentBreadcrumb = {
+                text: indexC.text,
+              };
+              if (typeof indexC.href === 'string') {
+                breadcrumbC.href = indexC.href;
+              }
+              if (indexC.href === pathname) {
+                return [breadcrumbA, breadcrumbB, breadcrumbC];
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return [];
+}
+
+interface ContentBreadcrumb {
+  text: string;
+  href?: string;
+}

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

@@ -1,5 +1,5 @@
 footer {
-  border-top: 1px solid #949494;
+  border-top: 1px solid #ddd;
   margin-top: 40px;
   padding: 20px;
 }

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

@@ -21,7 +21,9 @@ export default component$(
             <a href="/sign-in">Sign In</a>
           </li>
           <li>
-            <a href="/">Home</a>
+            <a class="footer-home" href="/">
+              Home
+            </a>
           </li>
         </ul>
       </Host>

package/starters/apps/qwik-city/src/components/header/header.css

@@ -1,8 +1,17 @@
 header {
+  background-color: #0093ee;
+}
+
+header .header-inner {
   display: grid;
   grid-template-columns: 1fr auto auto;
   padding: 10px;
-  background-color: #0093ee;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.full-screen header .header-inner {
+  max-width: 100%;
 }
 
 header a {

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

@@ -3,43 +3,35 @@ import { useLocation } from '@builder.io/qwik-city';
 import styles from './header.css?inline';
 
 export default component$(
-  (props: { fullWidth?: boolean }) => {
+  () => {
     useStyles$(styles);
 
     const pathname = useLocation().pathname;
 
     return (
-      <Host class={{ 'full-width': !!props.fullWidth }}>
-        <section>
-          <a href="/">Qwik City 🏙</a>
-        </section>
-        <nav>
-          <a href="/blog" class={{ active: pathname === '/blog' }}>
-            Blog
-          </a>
-          <a href="/docs" class={{ active: pathname === '/docs' }}>
-            Docs
-          </a>
-          <a href="/api" class={{ active: pathname === '/api' }}>
-            API
-          </a>
-          <a href="/about-us" class={{ active: pathname === '/about-us' }}>
-            About Us
-          </a>
-          <a href="/sign-in" class={{ active: pathname === '/sign-in' }}>
-            Sign In
-          </a>
-        </nav>
-        {/* <button
-          class="theme-toggle"
-          onClick$={() => {
-            if (themeCtx.theme === 'light') {
-              themeCtx.theme = 'dark';
-            } else {
-              themeCtx.theme = 'light';
-            }
-          }}
-        /> */}
+      <Host>
+        <div class="header-inner">
+          <section class="logo">
+            <a href="/">Qwik City 🏙</a>
+          </section>
+          <nav>
+            <a href="/blog" class={{ active: pathname.startsWith('/blog') }}>
+              Blog
+            </a>
+            <a href="/docs" class={{ active: pathname.startsWith('/docs') }}>
+              Docs
+            </a>
+            <a href="/api" class={{ active: pathname.startsWith('/api') }}>
+              API
+            </a>
+            <a href="/products/hat" class={{ active: pathname.startsWith('/products') }}>
+              Products
+            </a>
+            <a href="/about-us" class={{ active: pathname.startsWith('/about-us') }}>
+              About Us
+            </a>
+          </nav>
+        </div>
       </Host>
     );
   },

package/starters/apps/qwik-city/src/components/menu/menu.css

@@ -1,3 +1,13 @@
 .menu {
   background: #eee;
+  padding: 20px 10px;
+}
+
+.menu h5 {
+  margin: 0;
+}
+
+.menu ul {
+  padding-left: 20px;
+  margin: 5px 0 25px 0;
 }

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

@@ -1,12 +1,12 @@
 import { component$, Host, useScopedStyles$ } from '@builder.io/qwik';
-import { useContentMenu, useLocation } from '@builder.io/qwik-city';
+import { useContent, Link, useLocation } from '@builder.io/qwik-city';
 import styles from './menu.css?inline';
 
 export const Menu = component$(
   () => {
     useScopedStyles$(styles);
 
-    const menu = useContentMenu();
+    const { menu } = useContent();
     const loc = useLocation();
 
     return (
@@ -18,14 +18,14 @@ export const Menu = component$(
                 <ul>
                   {item.items?.map((item) => (
                     <li>
-                      <a
+                      <Link
                         href={item.href}
                         class={{
                           'is-active': loc.pathname === item.href,
                         }}
                       >
                         {item.text}
-                      </a>
+                      </Link>
                     </li>
                   ))}
                 </ul>

package/starters/apps/qwik-city/src/global.css

@@ -1,15 +1,24 @@
-html {
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  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 {
+  margin: 0;
   padding: 0;
-  line-height: inherit;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    sans-serif;
+}
+
+main {
+  padding: 10px 20px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.full-screen main {
+  max-width: 100%;
+}
+
+a {
+  color: #006eb3;
+}
+
+a:hover {
+  text-decoration: none;
 }

package/starters/apps/qwik-city/src/root.tsx

@@ -6,7 +6,7 @@ import './global.css';
 
 export default () => {
   return (
-    <Html lang="en">
+    <Html lang="en" dir="ltr">
       <Head />
       <Body />
     </Html>

package/starters/apps/qwik-city/src/routes/about-us.tsx

@@ -12,8 +12,6 @@ export default component$(() => {
   );
 });
 
-export const head: DocumentHead = () => {
-  return {
-    title: 'About US',
-  };
+export const head: DocumentHead = {
+  title: 'About Us',
 };

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

@@ -3,30 +3,19 @@ import os from 'os';
 
 export const onGet: EndpointHandler = ({ request, params }) => {
   return {
-    status: 200,
-    body: {
-      timestamp: Date.now(),
-      method: request.method,
-      url: request.url,
-      params,
-      os: os.platform(),
-      arch: os.arch(),
-      node: process.versions.node,
-    },
+    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, params }) => {
-  return {
-    status: 200,
-    body: {
-      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 }) => {
+  response.headers.set('Content-Type', 'text/plain');
+  return `Platform: ${os.platform()}, Node: ${process.versions.node}, HTTP Method: ${
+    request.method
+  }`;
 };

package/starters/apps/qwik-city/src/routes/api/_layout-foo/index.tsx

@@ -1,38 +1,32 @@
 import { component$, Host, Slot, useScopedStyles$ } 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 './api.css?inline';
 
 export default component$(() => {
   useScopedStyles$(styles);
 
   return (
-    <Host>
-      <Header fullWidth={true} />
-      <main class="api">
-        <aside class="api-menu">
-          <h2>API</h2>
-          <ul>
-            <li>
-              <a href="/api/builder.io/oss.json">Org/User</a>
-            </li>
-            <li>
-              <a href="/api/data.json">Data</a>
-            </li>
-          </ul>
-        </aside>
-        <section class="api-content">
-          <Slot />
-        </section>
-      </main>
-      <Footer />
+    <Host class="api">
+      <aside class="api-menu">
+        <h2>API</h2>
+        <ul>
+          <li>
+            <a href="/api/builder.io/oss.json">Org/User</a>
+          </li>
+          <li>
+            <a href="/api/data.json">Data</a>
+          </li>
+        </ul>
+      </aside>
+      <section class="api-content">
+        <Slot />
+      </section>
     </Host>
   );
 });
 
 export const head: DocumentHead = ({ pathname }) => {
   return {
-    title: pathname,
+    title: `API: ${pathname}`,
   };
 };

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

@@ -3,14 +3,11 @@ import os from 'os';
 
 export const onGet: EndpointHandler = ({ request }) => {
   return {
-    status: 200,
-    body: {
-      timestamp: Date.now(),
-      method: request.method,
-      url: request.url,
-      os: os.platform(),
-      arch: os.arch(),
-      node: process.versions.node,
-    },
+    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/api/index@foo.tsx

@@ -1,7 +1,7 @@
 import { component$, Host, useClientEffect$, useStore } from '@builder.io/qwik';
 
 export default component$(() => {
-  const store = useStore({ timestamp: 0, os: '', arch: '', node: '' });
+  const store = useStore({ timestamp: '', os: '', arch: '', node: '' });
 
   useClientEffect$(async () => {
     const url = `/api/builder.io/oss.json`;
@@ -28,9 +28,12 @@ export default component$(() => {
       </ul>
 
       <p>Timestamp: {store.timestamp}</p>
-      <p>OS: {store.os}</p>
-      <p>Arch: {store.arch}</p>
-      <p>Node: {store.node}</p>
+      <p>
+        Node: <span>{store.node}</span>
+      </p>
+      <p>
+        OS: <span>{store.os}</span>
+      </p>
     </Host>
   );
 });

package/starters/apps/qwik-city/src/routes/blog/[...slug].tsx

@@ -1,13 +1,36 @@
-import { component$, Host } from '@builder.io/qwik';
-import { useLocation } from '@builder.io/qwik-city';
+import { component$, Host, Resource } from '@builder.io/qwik';
+import { useEndpoint, DocumentHead, EndpointHandler } from '@builder.io/qwik-city';
 
 export default component$(() => {
-  const { pathname, params } = useLocation();
+  const resource = useEndpoint<typeof onGet>();
 
   return (
     <Host>
-      <h1>Blog {pathname}</h1>
-      <p>Slug: {params.slug}</p>
+      <Resource
+        resource={resource}
+        onResolved={(blog) => (
+          <>
+            <h1>{blog.blogTitle}</h1>
+            <p>{blog.blogContent}</p>
+          </>
+        )}
+      />
     </Host>
   );
 });
+
+export const onGet: EndpointHandler<EndpointData> = async ({ params, request }) => {
+  return {
+    blogTitle: `Blog: ${params.slug}`,
+    blogContent: `${params.slug}, ${request.url}`,
+  };
+};
+
+export const head: DocumentHead<EndpointData> = ({ data }) => {
+  return { title: data?.blogTitle };
+};
+
+export interface EndpointData {
+  blogTitle: string;
+  blogContent: string;
+}

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

@@ -9,10 +9,10 @@ export default component$(() => {
       <aside class="blog-menu">
         <ul>
           <li>
-            <a href="/blog/how-to-use-a-toaster">How to use a toaster</a>
+            <a href="/blog/what-is-resumability">What Is Resumability?</a>
           </li>
           <li>
-            <a href="/blog/how-to-crack-an-egg">How to crack an egg</a>
+            <a href="/blog/serializing-props">Serializing Props</a>
           </li>
         </ul>
       </aside>

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

@@ -1,9 +1,17 @@
 import { component$, Host } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
 
 export default component$(() => {
   return (
     <Host>
       <h1>Dashboard</h1>
+      <p>
+        <a href="/sign-out">Sign Out</a>
+      </p>
     </Host>
   );
 });
+
+export const head: DocumentHead = {
+  title: 'Dashboard',
+};

package/starters/apps/qwik-city/src/routes/docs/[category]/[id]/index.tsx

@@ -1,15 +1,23 @@
 import { component$, Host } from '@builder.io/qwik';
-import { useLocation } from '@builder.io/qwik-city';
+import { useLocation, DocumentHead } from '@builder.io/qwik-city';
 
 export default component$(() => {
-  const loc = useLocation();
+  const { pathname, params } = useLocation();
 
   return (
     <Host>
-      <h1>Docs</h1>
-      <p>pathname: {loc.pathname}</p>
-      <p>category: {loc.params.category}</p>
-      <p>id: {loc.params.id}</p>
+      <h1>
+        Docs: {params.category} {params.id}
+      </h1>
+      <p>pathname: {pathname}</p>
+      <p>category: {params.category}</p>
+      <p>id: {params.id}</p>
     </Host>
   );
 });
+
+export const head: DocumentHead = ({ params }) => {
+  return {
+    title: `${params.category} ${params.id}`,
+  };
+};

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

@@ -1,7 +1,8 @@
-.docs {
+.docs main {
   display: grid;
   grid-template-columns: 200px 1fr;
   padding: 0;
+  margin: 0;
 }
 
 .docs-content {

package/starters/apps/qwik-city/src/routes/docs/_layout!/index.tsx

@@ -0,0 +1,31 @@
+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';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  return (
+    <Host class="docs full-screen">
+      <Header />
+      <main>
+        <Menu />
+        <section class="docs-content">
+          <Breadcrumbs />
+          <Slot />
+          <Footer />
+        </section>
+      </main>
+    </Host>
+  );
+});
+
+export const head: DocumentHead = ({ head }) => {
+  return {
+    title: `Docs: ${head.title}`,
+  };
+};

package/starters/apps/qwik-city/src/routes/docs/_menu.md

@@ -1,9 +1,11 @@
 # Docs
 
-## Getting Started
+## Introduction
 
-- [Introduction](introduction/index.md)
+- [Overview](overview/index.md)
+- [Getting Started](getting-started.md)
 
 ## Components
 
 - [Basics](/docs/components/basics)
+- [Listeners](/docs/components/listeners)

package/starters/apps/qwik-city/src/routes/docs/getting-started.md

@@ -0,0 +1,44 @@
+---
+title: Getting Started
+---
+
+# Getting Started
+
+## Creating an app using the CLI
+
+The first step is to create an application. Qwik comes with a CLI that allows you to create a basic working skeleton of an application. We will use the CLI to create a Todo sample app, and we will use that application to do a walk-through of Qwik so that you can familiarize yourself with it.
+
+## Running in development
+
+Once the application is download.
+
+1. Change into the directory created by the `npm create qwik@latest`.
+
+```shell
+cd qwik-todo
+```
+
+2. Install NPM modules:
+
+```shell
+npm install
+```
+
+3. Invoke the dev server
+
+```shell
+npm start
+```
+
+4. You should see a server running with your To-do application
+
+```shell
+  vite v2.8.6 dev server running at:
+
+  > Local: http://localhost:3000/
+  > Network: use `--host` to expose
+
+  ready in 157ms.
+```
+
+5. Visit http://localhost:3000/ to explore the To-do app.

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

@@ -9,8 +9,6 @@ export default component$(() => {
   );
 });
 
-export const head: DocumentHead = () => {
-  return {
-    title: 'Welcome!',
-  };
+export const head: DocumentHead = {
+  title: 'Welcome!',
 };

package/starters/apps/qwik-city/src/routes/docs/{introduction → overview}/index.md

@@ -1,7 +1,7 @@
 ---
-title: Introduction
+title: Overview
 ---
 
-# Introduction
+# Overview
 
 Qwik is a new kind of web framework that can deliver instant loading web applications at any size or complexity. Your sites and apps can boot with less than 1kb of JS (_including_ your code, regardless of complexity), and achieve unheard of performance at scale.

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

@@ -1,11 +1,16 @@
 import { component$, Host } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
 
 export default component$(() => {
   return (
     <Host>
-      <h1>Welcome to QwikCity</h1>
+      <h1 onClick$={() => console.warn('hola')}>Welcome to Qwik City</h1>
 
       <p>The meta-framework for Qwik.</p>
     </Host>
   );
 });
+
+export const head: DocumentHead = {
+  title: 'Welcome to Qwik City',
+};

package/starters/apps/qwik-city/src/routes/products/[id].tsx

@@ -0,0 +1,132 @@
+import { Resource, component$, Host, useStore } from '@builder.io/qwik';
+import { useEndpoint, useLocation, EndpointHandler, DocumentHead } from '@builder.io/qwik-city';
+import os from 'os';
+
+export default component$(() => {
+  const { params, pathname } = useLocation();
+  const store = useStore({ productFetchData: '' });
+
+  const resource = useEndpoint<typeof onGet>();
+
+  return (
+    <Host>
+      <Resource
+        resource={resource}
+        onPending={() => <p>Loading</p>}
+        onResolved={(product) => {
+          if (product == null) {
+            return <h1>Product "{params.id}" not found</h1>;
+          }
+
+          return (
+            <>
+              <h1>Product: {product.productId}</h1>
+              <p>Price: {product.price}</p>
+              <p>{product.description}</p>
+            </>
+          );
+        }}
+      />
+
+      <p>(Artificial response delay of 250ms)</p>
+
+      <p>
+        <button
+          onClick$={async () => {
+            const rsp = await fetch(pathname, {
+              headers: { accept: 'application/json' },
+            });
+            store.productFetchData = JSON.stringify(await rsp.json(), null, 2);
+          }}
+        >
+          fetch("{pathname}") data
+        </button>
+      </p>
+
+      <pre>
+        <code>{store.productFetchData}</code>
+      </pre>
+
+      <hr />
+
+      <ul>
+        <li>
+          <a href="/products/jacket">Jacket</a>
+        </li>
+        <li>
+          <a href="/products/hat">Hat</a>
+        </li>
+        <li>
+          <a href="/products/shirt">T-Shirt (Redirect to /products/tshirt)</a>
+        </li>
+        <li>
+          <a href="/products/hoodie">Hoodie (404 Not Found)</a>
+        </li>
+      </ul>
+    </Host>
+  );
+});
+
+export const head: DocumentHead<ProductData | null> = ({ data }) => {
+  if (!data) {
+    return {
+      title: 'Product Not Found',
+    };
+  }
+
+  return {
+    title: `Product ${data.productId}, ${data.price}`,
+  };
+};
+
+export const onGet: EndpointHandler<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
+  // requires the "accept: application/json" request header.
+
+  // artificial slow response
+  await new Promise<void>((resolve) => setTimeout(resolve, 250));
+
+  if (params.id === 'shirt') {
+    // Redirect, which will skip any rendering and the server will immediately redirect
+    response.redirect('/products/tshirt');
+    return;
+  }
+
+  const productPrice = PRODUCT_DB[params.id];
+
+  if (!productPrice) {
+    // Product data not found
+    // but the data is still given to the renderer to decide what to do
+    response.status = 404;
+    return null;
+  }
+
+  // Found the product data
+  // This same data is passed to the head() function
+  // and in the component$() it can be access with useEndpoint()
+  response.headers.set('Cache-Control', 'no-cache, no-store, no-fun');
+  return {
+    productId: params.id,
+    price: productPrice,
+    description: `Node ${process.versions.node} ${os.platform()} ${os.arch()} ${
+      os.cpus()[0].model
+    }`,
+  };
+};
+
+// Our pretty awesome database of prices
+const PRODUCT_DB: Record<string, string> = {
+  hat: '$21.96',
+  jacket: '$48.96',
+  tshirt: '$18.96',
+};
+
+type EndpointData = ProductData | null;
+
+interface ProductData {
+  productId: string;
+  price: string;
+  description: string;
+}

package/starters/features/react/package.json

@@ -5,7 +5,7 @@
     "fmt.check": "prettier --check ."
   },
   "devDependencies": {
-    "@builder.io/qwik-react": "0.0.7",
+    "@builder.io/qwik-react": "0.0.8",
     "@emotion/react": "11.9.3",
     "@emotion/server": "11.4.0",
     "@emotion/styled": "11.9.3",

package/starters/features/react/src/entry.ssr.tsx

@@ -3,7 +3,7 @@ import { renderToString } from '@builder.io/qwik-react';
 import { manifest } from '@qwik-client-manifest';
 import Root from './root';
 
-export function render(opts: RenderOptions) {
+export default function (opts: RenderOptions) {
   return renderToString(<Root />, {
     manifest,
     ...opts,

package/starters/servers/cloudflare-pages/src/entry.cloudflare.tsx

@@ -1,4 +1,4 @@
-import { render } from './entry.ssr';
+import render from './entry.ssr';
 
 /**
  * Cloudflare Pages Request Handler

package/starters/servers/express/package.json

@@ -2,7 +2,7 @@
   "description": "Express.js server.",
   "scripts": {
     "build.ssr": "vite build --ssr src/entry.express.tsx",
-    "serve": "node server/entry.express.mjs"
+    "serve": "node server/entry.express"
   },
   "devDependencies": {
     "@types/express": "4.17.13",

package/starters/servers/express/src/entry.express.tsx

@@ -3,7 +3,7 @@ import { fileURLToPath } from 'url';
 import { join } from 'path';
 import cityPlan from '@qwik-city-plan';
 import { qwikCity } from '@builder.io/qwik-city/middleware/express';
-import { render } from './entry.ssr';
+import render from './entry.ssr';
 
 const app = express();
 

package/starters/servers/netlify/src/entry.netlify.ts

@@ -1,4 +1,4 @@
-import { render } from './entry.ssr';
+import render from './entry.ssr';
 
 const handler = async (request: Request) => {
   try {

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

@@ -1,17 +0,0 @@
-import { component$, Host, Slot } from '@builder.io/qwik';
-
-export default component$(() => {
-  return (
-    <Host>
-      <section>
-        <Slot />
-      </section>
-      <aside>
-        <p>Account Help</p>
-        <ul>
-          <li>Forgot password</li>
-        </ul>
-      </aside>
-    </Host>
-  );
-});

package/starters/apps/qwik-city/src/routes/__auth/sign-in.tsx

@@ -1,25 +0,0 @@
-import { component$, Host } from '@builder.io/qwik';
-import type { DocumentHead } from '@builder.io/qwik-city';
-
-export default component$(() => {
-  return (
-    <Host>
-      <h1>Sign In</h1>
-      <form action="/api/on-sign-in" method="post">
-        <label>
-          <span>Username</span>
-          <input name="username" type="text" />
-        </label>
-        <label>
-          <span>Password</span>
-          <input name="password" type="password" />
-        </label>
-        <button>Log In</button>
-      </form>
-    </Host>
-  );
-});
-
-export const head: DocumentHead = {
-  title: 'Sign In',
-};

package/starters/apps/qwik-city/src/routes/__auth/sign-up.tsx

@@ -1,29 +0,0 @@
-import { component$, Host } from '@builder.io/qwik';
-import type { DocumentHead } from '@builder.io/qwik-city';
-
-export default component$(() => {
-  return (
-    <Host>
-      <h1>Sign Up</h1>
-      <form>
-        <label>
-          <span>Username</span>
-          <input type="text" />
-        </label>
-        <label>
-          <span>Password</span>
-          <input type="password" />
-        </label>
-        <label>
-          <span>Re-entry Password</span>
-          <input type="password" />
-        </label>
-        <button>Create Account</button>
-      </form>
-    </Host>
-  );
-});
-
-export const head: DocumentHead = {
-  title: 'Sign Up',
-};

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

@@ -1,23 +0,0 @@
-import { component$, Host, Slot, useStyles$ } from '@builder.io/qwik';
-import type { DocumentHead } from '@builder.io/qwik-city';
-import { Menu } from '../../../components/menu/menu';
-import styles from './docs.css?inline';
-
-export default component$(() => {
-  useStyles$(styles);
-
-  return (
-    <Host class="docs">
-      <Menu />
-      <section class="docs-content">
-        <Slot />
-      </section>
-    </Host>
-  );
-});
-
-export const head: DocumentHead = ({ head }) => {
-  return {
-    title: `Docs: ${head.title}`,
-  };
-};

package/starters/apps/qwik-city/src/routes/docs/getting-started.mdx

@@ -1,32 +0,0 @@
----
-title: Welcome
----
-
-import { Counter } from '~/components/counter/counter';
-
-# Welcome
-
-Welcome to the fabulous Qwik City. QwikCity is our official kit to build amazing sites:
-
-- 🐎 Powered by Qwik. Zero hydration and instant interactivity.
-- 🗃 File based routing (like Nextjs)
-- 🌏 Deploy easily to the edge: Netlify, Cloudflare, Vercel, Deno...
-- 📖 Author content directly in Markdown or MDX. MDX brings the best of markdown and JSX, allowing you to render Qwik components directly in markdown, like this one:
-
-<Counter />
-
-## Next steps
-
-Open your editor and check out the following:
-
-**The `src/routes` folder**
-
-This is where the main content lives. Adding folders and / or files (`.md`, `.mdx`, or `.tsx`) will automatically create new URLs. For example, code saved at `routes/dashboard/settings/index.tsx` will be accessible via the URL path `/dashboard/settings`.
-
-**The `src/routes/_layout` files and folders**
-
-These bring form to your content. Since different pages may need to be rendered by different layouts, QwikCity provides the ability to scope layouts to specific routes, while still allowing for easy reuse across different content. For any page without its own layout defined, the `src/routes/_layout.tsx` is used by default.
-
-**The `src/components` folder**
-
-QwikCity is still a normal Qwik app. Any custom component, design systems, or functionality should live here. Notice the `header`, `footer` and `content-nav` components. They are used by the `default` layout!