npm - create-qwik - Versions diffs - 0.0.39 → 0.0.40-0-dev20220808233008 - Mend

create-qwik 0.0.39 → 0.0.40-0-dev20220808233008

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/package.json CHANGED Viewed

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

package/starters/apps/base/package.json CHANGED Viewed

@@ -15,12 +15,12 @@
     "typecheck": "tsc --incremental --noEmit"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.39",
+    "@builder.io/qwik": "0.0.40-0-dev20220808233008",
     "@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",
+    "eslint-plugin-qwik": "0.0.40-0-dev20220808233008",
     "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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/root.tsx CHANGED Viewed

@@ -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/api/[org]/[user].json/index.ts CHANGED Viewed

@@ -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/_layout-foo/index.tsx CHANGED Viewed

@@ -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/api/data.json.ts CHANGED Viewed

@@ -1,13 +1,9 @@
-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 }) => {
+export const onGet: RequestHandler = ({ 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/api/index@foo.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import { component$, Host, useClientEffect$, useStore } from '@builder.io/qwik';
 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 +9,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 +25,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/blog/[...slug].tsx CHANGED Viewed

@@ -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,7 +19,7 @@ export default component$(() => {
   );
 });
-export const onGet: EndpointHandler<EndpointData> = async ({ params, request }) => {
+export const onGet: RequestHandler<EndpointData> = async ({ params, request }) => {
   return {
     blogTitle: `Blog: ${params.slug}`,
     blogContent: `${params.slug}, ${request.url}`,

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

@@ -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 CHANGED Viewed

@@ -1,10 +1,8 @@
-import { Resource, component$, Host, useStore } from '@builder.io/qwik';
-import { useEndpoint, useLocation, EndpointHandler, DocumentHead } from '@builder.io/qwik-city';
-import os from 'os';
+import { Resource, component$, Host } from '@builder.io/qwik';
+import { useEndpoint, useLocation, RequestHandler, DocumentHead } from '@builder.io/qwik-city';
 export default component$(() => {
-  const { params, pathname } = useLocation();
-  const store = useStore({ productFetchData: '' });
+  const { params } = useLocation();
   const resource = useEndpoint<typeof onGet>();
@@ -30,23 +28,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,53 +48,59 @@ 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}`,
   };
 };
-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
   // 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: `Product description here.`,
+      };
+      resolve(productData);
+    }, 250)
+  );
 };
 // Our pretty awesome database of prices
@@ -123,7 +110,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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 → netlify-edge}/.node-version RENAMED Viewed

File without changes

package/starters/servers/{netlify → netlify-edge}/README.md RENAMED Viewed

File without changes

package/starters/servers/{netlify → netlify-edge}/netlify.toml RENAMED Viewed

File without changes

package/starters/servers/{netlify → netlify-edge}/package.json RENAMED Viewed

File without changes

package/starters/servers/{netlify → netlify-edge}/public/_headers RENAMED Viewed

File without changes

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

@@ -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 → netlify-edge}/tsconfig.json RENAMED Viewed

File without changes

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

@@ -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;