create-qwik 0.0.38 → 0.0.39-dev20220805031634

package/package.json

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

package/starters/apps/base/package.json

@@ -15,21 +15,21 @@
     "typecheck": "tsc --incremental --noEmit"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.38",
+    "@builder.io/qwik": "0.0.39-dev20220805031634",
     "@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.38",
+    "@typescript-eslint/eslint-plugin": "5.30.7",
+    "@typescript-eslint/parser": "5.30.7",
+    "eslint-plugin-qwik": "0.0.39-dev20220805031634",
     "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": {
-    "node": ">=14"
+    "node": "^14.18.0 || >=16.0.0"
   }
 }

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/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,15 @@ app.get('/*', async (req, res, next) => {
   try {
     // Render the Root component to a string
     const result = await render({
-      url: req.url,
+      stream: res,
     });
 
     // respond with SSR'd HTML
-    res.send(result.html);
+    if ('html' in result) {
+      res.send((result as any).html);
+    } else {
+      res.end();
+    }
   } 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/qwik-city/package.json

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

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

@@ -1,11 +1,11 @@
 import { component$, Host } from '@builder.io/qwik';
-import { Content } from '@builder.io/qwik-city';
+import { RouterOutlet } from '@builder.io/qwik-city';
 
 export const Body = component$(
   () => {
     return (
       <Host>
-        <Content />
+        <RouterOutlet />
       </Host>
     );
   },

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, useStyles$ } from '@builder.io/qwik';
+import { useContent, useLocation, ContentMenu } from '@builder.io/qwik-city';
+import styles from './breadcrumbs.css?inline';
+
+export const Breadcrumbs = component$(
+  () => {
+    useStyles$(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/counter/counter.tsx

@@ -1,8 +1,8 @@
-import { component$, useScopedStyles$, useStore } from '@builder.io/qwik';
+import { component$, useStyles$, useStore } from '@builder.io/qwik';
 
 export const Counter = component$(() => {
   const store = useStore({ count: 0 });
-  useScopedStyles$(`
+  useStyles$(`
   .counter {
     border: 3px solid #1474ff;
     padding: 10px;

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,10 +1,10 @@
-import { component$, Host, useScopedStyles$ } from '@builder.io/qwik';
-import { useContent, useLocation } from '@builder.io/qwik-city';
+import { component$, Host, useStyles$ } from '@builder.io/qwik';
+import { useContent, Link, useLocation } from '@builder.io/qwik-city';
 import styles from './menu.css?inline';
 
 export const Menu = component$(
   () => {
-    useScopedStyles$(styles);
+    useStyles$(styles);
 
     const { menu } = useContent();
     const loc = useLocation();
@@ -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 { 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 './api.css?inline';
 
 export default component$(() => {
-  useScopedStyles$(styles);
+  useStyles$(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>
   );
 });