create-qwik 0.0.39-dev20220801194759 → 0.0.39-dev20220805031634

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-qwik",
-  "version": "0.0.39-dev20220801194759",
+  "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,12 +15,12 @@
     "typecheck": "tsc --incremental --noEmit"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.39-dev20220801194759",
+    "@builder.io/qwik": "0.0.39-dev20220805031634",
     "@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-dev20220801194759",
+    "eslint-plugin-qwik": "0.0.39-dev20220805031634",
     "eslint": "8.20.0",
     "node-fetch": "3.2.9",
     "typescript": "4.7.4",
@@ -30,6 +30,6 @@
   "homepage": "https://qwik.builder.io/",
   "private": true,
   "engines": {
-    "node": ">=14"
+    "node": "^14.18.0 || >=16.0.0"
   }
 }

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

@@ -36,12 +36,13 @@ app.get('/*', async (req, res, next) => {
     // Render the Root component to a string
     const result = await render({
       stream: res,
-      url: req.url,
     });
 
     // respond with SSR'd HTML
     if ('html' in result) {
       res.send((result as any).html);
+    } else {
+      res.end();
     }
   } catch (e) {
     // Error while server-side rendering

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

@@ -14,7 +14,7 @@
   },
   "type": "module",
   "devDependencies": {
-    "@builder.io/qwik-city": "0.0.26",
+    "@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.tsx

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

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/menu/menu.tsx

@@ -1,10 +1,10 @@
-import { component$, Host, useScopedStyles$ } from '@builder.io/qwik';
+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();

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

@@ -1,9 +1,9 @@
-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 styles from './api.css?inline';
 
 export default component$(() => {
-  useScopedStyles$(styles);
+  useStyles$(styles);
 
   return (
     <Host class="api">

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

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

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

@@ -1,10 +1,9 @@
-import { Resource, component$, Host, useStore } from '@builder.io/qwik';
+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, pathname } = useLocation();
-  const store = useStore({ productFetchData: '' });
+  const { params } = useLocation();
 
   const resource = useEndpoint<typeof onGet>();
 
@@ -30,23 +29,6 @@ export default component$(() => {
 
       <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>
@@ -67,13 +49,7 @@ export default component$(() => {
   );
 });
 
-export const head: DocumentHead<ProductData | null> = ({ data }) => {
-  if (!data) {
-    return {
-      title: 'Product Not Found',
-    };
-  }
-
+export const head: DocumentHead<ProductData> = ({ data }) => {
   return {
     title: `Product ${data.productId}, ${data.price}`,
   };
@@ -85,35 +61,49 @@ export const onGet: EndpointHandler<EndpointData> = async ({ params, response })
   // 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];
+  // artificially slow database call
+  const productData = await loadProduct(params.id);
 
-  if (!productPrice) {
+  if (!productData) {
     // Product data not found
     // but the data is still given to the renderer to decide what to do
     response.status = 404;
-    return null;
+    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 {
-    productId: params.id,
-    price: productPrice,
-    description: `Node ${process.versions.node} ${os.platform()} ${os.arch()} ${
-      os.cpus()[0].model
-    }`,
-  };
+  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
@@ -123,7 +113,7 @@ const PRODUCT_DB: Record<string, string> = {
   tshirt: '$18.96',
 };
 
-type EndpointData = ProductData | null;
+type EndpointData = ProductData;
 
 interface ProductData {
   productId: string;

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

@@ -1,52 +1,6 @@
 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/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';
 
+// 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/servers/netlify/src/entry.netlify.ts

@@ -1,27 +0,0 @@
-import render from './entry.ssr';
-
-const handler = async (request: Request) => {
-  try {
-    // Handle static files
-    if (/\.\w+$/.test(request.url)) {
-      return;
-    }
-
-    const ssrResult = await render({
-      url: request.url,
-      base: '/build/',
-    });
-
-    const response = new Response(ssrResult.html, {
-      headers: {
-        'Content-Type': 'text/html; charset=utf-8',
-      },
-    });
-    return response;
-  } catch (e) {
-    // 500 Error
-    return new Response(String(e), { status: 500 });
-  }
-};
-
-export default handler;