create-qwik 0.0.38 → 0.0.39-dev20220805031634

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>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,122 @@
+import { Resource, component$, Host } from '@builder.io/qwik';
+import { useEndpoint, useLocation, EndpointHandler, DocumentHead } from '@builder.io/qwik-city';
+import os from 'os';
+
+export default component$(() => {
+  const { params } = useLocation();
+
+  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>
+
+      <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> = ({ data }) => {
+  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.
+
+  if (params.id === 'shirt') {
+    // Redirect, which will skip any rendering and the server will immediately redirect
+    response.redirect('/products/tshirt');
+    return;
+  }
+
+  // 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
+    response.status = 404;
+    return;
+  }
+
+  // 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 productData;
+};
+
+// our pretty awesome function to load product data
+const loadProduct = (productId: string) => {
+  return new Promise<ProductData | null>((resolve) =>
+    setTimeout(() => {
+      const productPrice = PRODUCT_DB[productId];
+      if (!productPrice) {
+        return null;
+      }
+
+      const productData: ProductData = {
+        productId,
+        price: productPrice,
+        description: `Node ${process.versions.node} ${os.platform()} ${os.arch()} ${
+          os.cpus()[0].model
+        }`,
+      };
+
+      resolve(productData);
+    }, 250)
+  );
+};
+
+// Our pretty awesome database of prices
+const PRODUCT_DB: Record<string, string> = {
+  hat: '$21.96',
+  jacket: '$48.96',
+  tshirt: '$18.96',
+};
+
+type EndpointData = ProductData;
+
+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,52 +1,6 @@
-import { render } from './entry.ssr';
+import render from './entry.ssr';
+import { qwikCity } from '@builder.io/qwik-city/middleware/cloudflare-pages';
 
-/**
- * Cloudflare Pages Request Handler
- */
-export const onRequest: PagesFunction = async ({ request, next, waitUntil }) => {
-  try {
-    const url = new URL(request.url);
+const qwikCityMiddleware = qwikCity(render);
 
-    // Handle static assets
-    if (/\.\w+$/.test(request.url)) {
-      return next(request);
-    }
-
-    // Do not using caching during development
-    const useCache = url.hostname !== 'localhost' && request.method === 'GET';
-
-    // Early return from cache
-    const cache = await caches.open('custom:qwik');
-    if (useCache) {
-      const cachedResponse = await cache.match(request);
-      if (cachedResponse) {
-        return cachedResponse;
-      }
-    }
-
-    // Generate Qwik SSR HTML
-    const result = await render({
-      url: request.url,
-    });
-
-    // Create HTTP Response
-    const response = new Response(result.html, {
-      headers: {
-        'Content-Type': 'text/html; charset=utf-8',
-        'Cache-Control': useCache
-          ? `max-age=60, s-maxage=10, stale-while-revalidate=604800, stale-if-error=604800`
-          : `no-cache, max-age=0`,
-      },
-    });
-
-    if (useCache) {
-      waitUntil(cache.put(request, response.clone()));
-    }
-
-    // Return Qwik SSR response
-    return response;
-  } catch (e) {
-    // 500 Error
-    return new Response(String(e), { status: 500 });
-  }
-};
+export const onRequestGet = [qwikCityMiddleware];

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

@@ -1,19 +1,30 @@
 import express from 'express';
 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';
 
+// directories where the static assets are located
+const distDir = join(fileURLToPath(import.meta.url), '..', '..', 'dist');
+const buildDir = join(distDir, 'build');
+
+// create the Qwik City express middleware
+const { router, notFound } = qwikCity(render);
+
+// create the express server
 const app = express();
 
-app.use(
-  qwikCity(render, {
-    ...cityPlan,
-    staticDir: join(fileURLToPath(import.meta.url), '..', '..', 'dist'),
-  })
-);
+// use Qwik City's page and endpoint handler
+app.use(router);
+
+// static asset handlers
+app.use(`/build`, express.static(buildDir, { immutable: true, maxAge: '1y', index: false }));
+app.use(express.static(distDir, { index: false }));
+
+// use Qwik City's 404 handler
+app.use(notFound);
 
+// start the express server
 app.listen(8080, () => {
   /* eslint-disable */
   console.log(`http://localhost:8080/`);

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

@@ -0,0 +1,6 @@
+import render from './entry.ssr';
+import { qwikCity } from '@builder.io/qwik-city/middleware/netlify-edge';
+
+const qwikCityHandler = qwikCity(render);
+
+export default qwikCityHandler;

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!