npm - create-qwik - Versions diffs - 0.0.35-dev20220709120816 → 0.0.35 - Mend

create-qwik 0.0.35-dev20220709120816 → 0.0.35

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

package/package.json CHANGED Viewed

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

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

@@ -14,16 +14,16 @@
     "typecheck": "tsc --incremental --noEmit"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.35-dev20220709120816",
+    "@builder.io/qwik": "0.0.35",
     "@types/eslint": "8.4.5",
     "@types/node": "latest",
-    "@typescript-eslint/eslint-plugin": "5.30.0",
-    "@typescript-eslint/parser": "5.30.0",
-    "eslint-plugin-qwik": "0.0.35-dev20220709120816",
-    "eslint": "8.18.0",
+    "@typescript-eslint/eslint-plugin": "5.30.6",
+    "@typescript-eslint/parser": "5.30.6",
+    "eslint-plugin-qwik": "0.0.35",
+    "eslint": "8.19.0",
     "node-fetch": "2.6.7",
     "typescript": "4.7.4",
-    "vite": "2.9.13"
+    "vite": "2.9.14"
   },
   "homepage": "https://qwik.builder.io/",
   "private": true,

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

@@ -9,7 +9,7 @@
     ]
   },
   "devDependencies": {
-    "@builder.io/qwik-city": "0.0.16",
+    "@builder.io/qwik-city": "0.0.18",
     "vite-tsconfig-paths": "3.5.0"
   }
 }

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

@@ -1,12 +1,11 @@
 import { Content, Html } from '@builder.io/qwik-city';
-import cityPlan from '@qwik-city-plan';
 import { Head } from './components/head/head';
 import './global.css';
 export default () => {
   return (
-    <Html lang="en" cityPlan={cityPlan}>
+    <Html lang="en">
       <Head />
       <body>
         <Content />

package/starters/apps/qwik-city/src/routes/__auth/sign-in.tsx CHANGED Viewed

@@ -1,18 +1,18 @@
 import { component$, Host } from '@builder.io/qwik';
-import type { HeadComponent } from '@builder.io/qwik-city';
+import type { DocumentHead } from '@builder.io/qwik-city';
 export default component$(() => {
   return (
     <Host>
       <h1>Sign In</h1>
-      <form>
+      <form action="/api/on-sign-in" method="post">
         <label>
           <span>Username</span>
-          <input type="text" />
+          <input name="username" type="text" />
         </label>
         <label>
           <span>Password</span>
-          <input type="password" />
+          <input name="password" type="password" />
         </label>
         <button>Log In</button>
       </form>
@@ -20,10 +20,6 @@ export default component$(() => {
   );
 });
-export const head: HeadComponent = () => {
-  return (
-    <>
-      <title>Sign In</title>
-    </>
-  );
+export const head: DocumentHead = {
+  title: 'Sign In',
 };

package/starters/apps/qwik-city/src/routes/__auth/sign-up.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { component$, Host } from '@builder.io/qwik';
-import type { HeadComponent } from '@builder.io/qwik-city';
+import type { DocumentHead } from '@builder.io/qwik-city';
 export default component$(() => {
   return (
@@ -24,10 +24,6 @@ export default component$(() => {
   );
 });
-export const head: HeadComponent = () => {
-  return (
-    <>
-      <title>Sign Up</title>
-    </>
-  );
+export const head: DocumentHead = {
+  title: 'Sign Up',
 };

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

@@ -1,5 +1,5 @@
 import { component$, Host } from '@builder.io/qwik';
-import type { HeadComponent } from '@builder.io/qwik-city';
+import type { DocumentHead } from '@builder.io/qwik-city';
 export default component$(() => {
   return (
@@ -12,10 +12,8 @@ export default component$(() => {
   );
 });
-export const head: HeadComponent = () => {
-  return (
-    <>
-      <title>About Us</title>
-    </>
-  );
+export const head: DocumentHead = () => {
+  return {
+    title: 'About US',
+  };
 };

package/starters/apps/qwik-city/src/routes/api/[org]/[user].json/index.ts CHANGED Viewed

@@ -1,42 +1,32 @@
 import type { EndpointHandler } from '@builder.io/qwik-city';
 import os from 'os';
-export const get: EndpointHandler = ({ request, params }) => {
-  const data = {
-    timestamp: Date.now(),
-    method: request.method,
-    url: request.url,
-    params,
-    os: os.platform(),
-    arch: os.arch(),
-    node: process.versions.node,
-  };
-  const res = new Response(JSON.stringify(data, null, 2), {
-    headers: {
-      'Content-Type': 'application/json',
+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,
     },
-  });
-  return res;
-};
-export const post: EndpointHandler = async ({ request, params }) => {
-  const data = {
-    timestamp: Date.now(),
-    method: request.method,
-    url: request.url,
-    params,
-    os: os.platform(),
-    arch: os.arch(),
-    node: process.versions.node,
   };
+};
-  const res = new Response(JSON.stringify(data, null, 2), {
-    headers: {
-      'Content-Type': 'application/json',
+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,
     },
-  });
-  return res;
+  };
 };

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

@@ -1,5 +1,5 @@
 import { component$, Host, Slot, useScopedStyles$ } from '@builder.io/qwik';
-import type { HeadComponent } from '@builder.io/qwik-city';
+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';
@@ -31,10 +31,8 @@ export default component$(() => {
   );
 });
-export const head: HeadComponent = ({ location }) => {
-  return (
-    <>
-      <title>API: {location.pathname}</title>
-    </>
-  );
+export const head: DocumentHead = ({ pathname }) => {
+  return {
+    title: pathname,
+  };
 };

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

@@ -1,21 +1,16 @@
 import type { EndpointHandler } from '@builder.io/qwik-city';
 import os from 'os';
-export const get: EndpointHandler = ({ request }) => {
-  const data = {
-    timestamp: Date.now(),
-    method: request.method,
-    url: request.url,
-    os: os.platform(),
-    arch: os.arch(),
-    node: process.versions.node,
-  };
-  const res = new Response(JSON.stringify(data, null, 2), {
-    headers: {
-      'Content-Type': 'application/json',
+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,
     },
-  });
-  return res;
+  };
 };

package/starters/apps/qwik-city/src/routes/api/on-sign-in.ts ADDED Viewed

@@ -0,0 +1,67 @@
+import type { EndpointHandler } from '@builder.io/qwik-city';
+export type Cookie = Record<string, string>;
+export type AuthResult = 'New Login' | 'Already Logged In' | 'Invalid Credentials';
+export const STATUS: Record<AuthResult, { code: number; msg: string }> = {
+  'New Login': {
+    code: 200,
+    msg: 'You are now logged in!',
+  },
+  'Already Logged In': {
+    code: 200,
+    msg: 'You are now logged in!',
+  },
+  'Invalid Credentials': {
+    code: 403,
+    msg: 'Incorrect user name and password',
+  },
+};
+export const post: EndpointHandler = async (ev: any) => {
+  const cookie = parseCookie(ev.request.headers.get('cookie'));
+  const formdata = await ev.request.formData();
+  const result = handleAuth(formdata, cookie);
+  const status = STATUS[result];
+  return {
+    status: status.code,
+    headers:
+      result == 'New Login'
+        ? {
+            'Set-Cookie': `${AUTHTOKEN_NAME}=${generateToken()}; Secure; HttpOnly; Max-Age=${
+              60 * 5
+            }`,
+          }
+        : {},
+  };
+};
+const AUTHTOKEN_NAME = 'qwikcity-auth-token';
+export const handleAuth = (submission: FormData, cookie: Cookie): AuthResult => {
+  const username = submission.get('username');
+  const password = submission.get('password');
+  const token = cookie[AUTHTOKEN_NAME];
+  if (token !== undefined) {
+    return 'Already Logged In';
+  }
+  if (username == 'admin' && password == 'password') {
+    return 'New Login';
+  }
+  return 'Invalid Credentials';
+};
+export const generateToken = () => {
+  return Math.round(Math.random() * 1000);
+};
+export const parseCookie = (raw: string | null): Cookie => {
+  if (!raw) {
+    return {};
+  }
+  return raw
+    .split(';')
+    .map((v) => v.split('='))
+    .reduce((acc: Cookie, v) => {
+      acc[decodeURIComponent(v[0].trim())] = decodeURIComponent(v[1].trim());
+      return acc;
+    }, {});
+};

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

@@ -1,5 +1,5 @@
 import { component$, Host, Slot, useStyles$ } from '@builder.io/qwik';
-import type { HeadComponent } from '@builder.io/qwik-city';
+import type { DocumentHead } from '@builder.io/qwik-city';
 import { Menu } from '../../../components/menu/menu';
 import styles from './docs.css?inline';
@@ -16,10 +16,8 @@ export default component$(() => {
   );
 });
-export const head: HeadComponent = ({ resolved }) => {
-  return (
-    <>
-      <title>Docs: {resolved.title}</title>
-    </>
-  );
+export const head: DocumentHead = ({ head }) => {
+  return {
+    title: `Docs: ${head.title}`,
+  };
 };

package/starters/apps/qwik-city/src/routes/docs/getting-started.mdx CHANGED Viewed

@@ -6,21 +6,27 @@ import { Counter } from '~/components/counter/counter';
 # Welcome
-Welcome to the fabolous Qwik City. QwikCity is our official kit to build amazing sites:
+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 edge: Netlify, Cloudflare, Vercel, Deno...
+- 🌏 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 the following:
+Open your editor and check out the following:
-- **The `pages` folder**: This is where the main content lives. Adding you files (`.md`, `.mdx`, or `.tsx`) will automatically create new URLs.
-- **The `src/layout` folder**: This is what bring form to your content. Different kinds of pages, might need to be rendered by a different layout.
-  This way you can reuse easily the layout across different content. By default, the `src/layout/default` is used.
-- **The `src/components` folder**: QwikCity is still a normal Qwik app. Any custom component, design systems, or funcionality should live here. Notice the `header`, `footer` and `content-nav` components. They are used by the `default` layout!
-- **The `src/utils` folder**: Place here business logic, or functions that are not components.
+**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!

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

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

package/starters/servers/express/src/entry.express.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import express from 'express';
 import { join } from 'path';
 import cityPlan from '@qwik-city-plan';
-import { qwikCity } from '@builder.io/qwik-city/adaptors/express';
+import { qwikCity } from '@builder.io/qwik-city/middleware/express';
 import { render } from './entry.ssr';
 const app = express();