npm - create-qwik - Versions diffs - 0.0.39 → 0.0.41 - Mend

create-qwik 0.0.39 → 0.0.41

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 (42) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-qwik",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "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.41",
     "@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.41",
     "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/footer/footer.tsx CHANGED Viewed

@@ -17,9 +17,6 @@ export default component$(
           <li>
             <a href="/about-us">About Us</a>
           </li>
-          <li>
-            <a href="/sign-in">Sign In</a>
-          </li>
           <li>
             <a class="footer-home" href="/">
               Home

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/{about-us.tsx → about-us/index.tsx} RENAMED Viewed

File without changes

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/api.css → api.css} RENAMED Viewed

File without changes

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

@@ -0,0 +1,9 @@
+import type { RequestHandler } from '@builder.io/qwik-city';
+export const onGet: RequestHandler = ({ request }) => {
+  return {
+    timestamp: Date.now(),
+    method: request.method,
+    url: request.url,
+  };
+};

package/starters/apps/qwik-city/src/routes/api/{index@foo.tsx → index@api.tsx} RENAMED Viewed

@@ -1,7 +1,11 @@
 import { component$, Host, useClientEffect$, useStore } from '@builder.io/qwik';
+/**
+ * Uses named layout `foo`
+ */
 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 +13,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 +29,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/api/{_layout-foo/index.tsx → layout-api.tsx} RENAMED Viewed

@@ -1,9 +1,14 @@
-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';
+/**
+ * Named layout `foo`
+ * Any index files named `index@foo.tsx` will use this layout
+ */
 export default component$(() => {
-  useScopedStyles$(styles);
+  useStyles$(styles);
   return (
     <Host class="api">

package/starters/apps/qwik-city/src/routes/blog/{[...slug].tsx → [...slug]/index.tsx} RENAMED 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,10 +19,10 @@ export default component$(() => {
   );
 });
-export const onGet: EndpointHandler<EndpointData> = async ({ params, request }) => {
+export const onGet: RequestHandler<EndpointData> = async ({ params, url }) => {
   return {
     blogTitle: `Blog: ${params.slug}`,
-    blogContent: `${params.slug}, ${request.url}`,
+    blogContent: `${params.slug}, ${url.pathname}`,
   };
 };

package/starters/apps/qwik-city/src/routes/blog/{_layout/index.tsx → layout.tsx} RENAMED Viewed

File without changes

package/starters/apps/qwik-city/src/routes/dashboard/dashboard.css ADDED Viewed

@@ -0,0 +1,14 @@
+.dashboard {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  padding: 0;
+}
+.dashboard-menu {
+  background: #eee;
+  padding-left: 20px;
+}
+.dashboard-content {
+  padding-left: 20px;
+}

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

@@ -5,13 +5,11 @@ export default component$(() => {
   return (
     <Host>
       <h1>Dashboard</h1>
-      <p>
-        <a href="/sign-out">Sign Out</a>
-      </p>
+      <p>Welcome to the dashboard.</p>
     </Host>
   );
 });
 export const head: DocumentHead = {
-  title: 'Dashboard',
+  title: 'Home',
 };

package/starters/apps/qwik-city/src/routes/dashboard/layout!.tsx ADDED Viewed

@@ -0,0 +1,44 @@
+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 './dashboard.css?inline';
+/**
+ * `layout!` means this is the top level layout. Because of the
+ * `!` at the end of the filename, it stops at this layout and does
+ * not keep crawling up the directories making more nested layouts.
+ */
+export default component$(() => {
+  useStyles$(styles);
+  return (
+    <Host>
+      <Header />
+      <main class="dashboard">
+        <aside class="dashboard-menu">
+          <h5>Dashboard Menu</h5>
+          <ul>
+            <li>
+              <a href="/dashboard/profile">Profile</a>
+            </li>
+            <li>
+              <a href="/dashboard/settings">Settings</a>
+            </li>
+          </ul>
+        </aside>
+        <section class="dashboard-content">
+          <Slot />
+        </section>
+      </main>
+      <Footer />
+    </Host>
+  );
+});
+export const head: DocumentHead = ({ head }) => {
+  return {
+    title: `Dashboard ${head.title}`,
+  };
+};

package/starters/apps/qwik-city/src/routes/dashboard/{profile@dashboard.tsx → profile/index.tsx} RENAMED Viewed

@@ -1,4 +1,5 @@
 import { component$, Host } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
 export default component$(() => {
   return (
@@ -8,3 +9,7 @@ export default component$(() => {
     </Host>
   );
 });
+export const head: DocumentHead = {
+  title: 'Profile',
+};

package/starters/apps/qwik-city/src/routes/dashboard/settings/{index@dashboard.tsx → index.tsx} RENAMED Viewed

@@ -1,4 +1,5 @@
 import { component$, Host } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
 export default component$(() => {
   return (
@@ -8,3 +9,7 @@ export default component$(() => {
     </Host>
   );
 });
+export const head: DocumentHead = {
+  title: 'Settings',
+};

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

File without changes

package/starters/apps/qwik-city/src/routes/docs/{getting-started.md → getting-started/index.md} RENAMED Viewed

File without changes

package/starters/apps/qwik-city/src/routes/docs/{_layout!/index.tsx → layout!.tsx} RENAMED Viewed

@@ -1,10 +1,10 @@
 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';
+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 './docs.css?inline';
 export default component$(() => {
   useStyles$(styles);

package/starters/apps/qwik-city/src/routes/docs/{_menu.md → menu.md} RENAMED Viewed

@@ -3,7 +3,7 @@
 ## Introduction
 - [Overview](overview/index.md)
-- [Getting Started](getting-started.md)
+- [Getting Started](getting-started/index.md)
 ## Components

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/{_layout.tsx → layout.tsx} RENAMED Viewed

File without changes

package/starters/apps/qwik-city/src/routes/products/{[id].tsx → [id]/index.tsx} RENAMED 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,63 @@ export default component$(() => {
   );
 });
-export const head: DocumentHead<ProductData | null> = ({ data }) => {
+export const head: DocumentHead<EndpointData> = ({ data }) => {
   if (!data) {
     return {
-      title: 'Product Not Found',
+      title: `Product not found`,
     };
   }
   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;
+    throw response.redirect('/products/tshirt');
   }
-  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
+  // 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 how to render
     response.status = 404;
-    return null;
+    return productData;
   }
   // 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) {
+        // awesome product database found product data
+        const productData: ProductData = {
+          productId,
+          price: productPrice,
+          description: `Product description here.`,
+        };
+        resolve(productData);
+      } else {
+        // awesome product database did not find product data
+        resolve(null);
+      }
+    }, 250)
+  );
 };
 // Our pretty awesome database of prices

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/apps/qwik-city/src/routes/api/data.json.ts DELETED Viewed

@@ -1,13 +0,0 @@
-import type { EndpointHandler } from '@builder.io/qwik-city';
-import os from 'os';
-export const onGet: EndpointHandler = ({ 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/dashboard/_layout-dashboard.tsx DELETED Viewed

@@ -1,18 +0,0 @@
-import { component$, Host, Slot } from '@builder.io/qwik';
-import Footer from '../../components/footer/footer';
-import Header from '../../components/header/header';
-export default component$(() => {
-  return (
-    <Host>
-      <Header />
-      <main class="dashboard">
-        <aside class="dashboard-menu">Dashboard Menu</aside>
-        <section class="dashboard-content">
-          <Slot />
-        </section>
-      </main>
-      <Footer />
-    </Host>
-  );
-});

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;