create-qwik 0.0.31 → 0.0.34-dev20220701233003

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

@@ -0,0 +1,33 @@
+import { component$, Host } from '@builder.io/qwik';
+import type { HeadComponent } 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: HeadComponent = () => {
+  return (
+    <>
+      <title>Sign Up</title>
+    </>
+  );
+};

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

@@ -0,0 +1,15 @@
+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>
+        <Slot />
+      </main>
+      <Footer />
+    </Host>
+  );
+});

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

@@ -0,0 +1,21 @@
+import { component$, Host } from '@builder.io/qwik';
+import type { HeadComponent } from '@builder.io/qwik-city';
+
+export default component$(() => {
+  return (
+    <Host>
+      <h1>About Us</h1>
+      <p>
+        <a href="/">Home</a>
+      </p>
+    </Host>
+  );
+});
+
+export const head: HeadComponent = () => {
+  return (
+    <>
+      <title>About Us</title>
+    </>
+  );
+};

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

@@ -0,0 +1,42 @@
+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',
+    },
+  });
+
+  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',
+    },
+  });
+
+  return res;
+};

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

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

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

@@ -0,0 +1,40 @@
+import { component$, Host, Slot, useScopedStyles$ } from '@builder.io/qwik';
+import type { HeadComponent } from '@builder.io/qwik-city';
+import Footer from '../../../components/footer/footer';
+import Header from '../../../components/header/header';
+import styles from './api.css?inline';
+
+export default component$(() => {
+  useScopedStyles$(styles);
+
+  return (
+    <Host>
+      <Header fullWidth={true} />
+      <main class="api">
+        <aside class="api-menu">
+          <h2>API</h2>
+          <ul>
+            <li>
+              <a href="/api/builder.io/oss.json">Org/User</a>
+            </li>
+            <li>
+              <a href="/api/data.json">Data</a>
+            </li>
+          </ul>
+        </aside>
+        <section class="api-content">
+          <Slot />
+        </section>
+      </main>
+      <Footer />
+    </Host>
+  );
+});
+
+export const head: HeadComponent = ({ location }) => {
+  return (
+    <>
+      <title>API: {location.pathname}</title>
+    </>
+  );
+};

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

@@ -0,0 +1,21 @@
+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',
+    },
+  });
+
+  return res;
+};

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

@@ -0,0 +1,36 @@
+import { component$, Host, useClientEffect$, useStore } from '@builder.io/qwik';
+
+export default component$(() => {
+  const store = useStore({ timestamp: 0, os: '', arch: '', node: '' });
+
+  useClientEffect$(async () => {
+    const url = `/api/builder.io/oss.json`;
+    const rsp = await fetch(url);
+    const data: any = await rsp.json();
+
+    store.timestamp = data.timestamp;
+    store.os = data.os;
+    store.arch = data.arch;
+    store.node = data.node;
+  });
+
+  return (
+    <Host>
+      <h1>Qwik City Test API!</h1>
+
+      <ul>
+        <li>
+          <a href="/api/builder.io/oss.json">/api/[org]/[user].json</a>
+        </li>
+        <li>
+          <a href="/api/data.json">/api/data.json</a>
+        </li>
+      </ul>
+
+      <p>Timestamp: {store.timestamp}</p>
+      <p>OS: {store.os}</p>
+      <p>Arch: {store.arch}</p>
+      <p>Node: {store.node}</p>
+    </Host>
+  );
+});

package/starters/apps/qwik-city/src/routes/blog/[...slug].tsx

@@ -0,0 +1,13 @@
+import { component$, Host } from '@builder.io/qwik';
+import { useLocation } from '@builder.io/qwik-city';
+
+export default component$(() => {
+  const { pathname, params } = useLocation();
+
+  return (
+    <Host>
+      <h1>Blog {pathname}</h1>
+      <p>Slug: {params.slug}</p>
+    </Host>
+  );
+});

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

@@ -0,0 +1,21 @@
+import { component$, Host, Slot } from '@builder.io/qwik';
+
+export default component$(() => {
+  return (
+    <Host>
+      <section class="blog-content">
+        <Slot />
+      </section>
+      <aside class="blog-menu">
+        <ul>
+          <li>
+            <a href="/blog/how-to-use-a-toaster">How to use a toaster</a>
+          </li>
+          <li>
+            <a href="/blog/how-to-crack-an-egg">How to crack an egg</a>
+          </li>
+        </ul>
+      </aside>
+    </Host>
+  );
+});

package/starters/apps/qwik-city/src/routes/blog/index.md

@@ -0,0 +1,7 @@
+---
+title: Welcome to our Blog!
+---
+
+# Welcome to our Blog!
+
+Enjoy.

package/starters/apps/qwik-city/src/routes/dashboard/_layout-dashboard.tsx

@@ -0,0 +1,18 @@
+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/apps/qwik-city/src/routes/dashboard/index.tsx

@@ -0,0 +1,9 @@
+import { component$, Host } from '@builder.io/qwik';
+
+export default component$(() => {
+  return (
+    <Host>
+      <h1>Dashboard</h1>
+    </Host>
+  );
+});

package/starters/apps/qwik-city/src/routes/dashboard/profile@dashboard.tsx

@@ -0,0 +1,10 @@
+import { component$, Host } from '@builder.io/qwik';
+
+export default component$(() => {
+  return (
+    <Host>
+      <h1>Profile</h1>
+      <p>My Profile</p>
+    </Host>
+  );
+});

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

@@ -0,0 +1,10 @@
+import { component$, Host } from '@builder.io/qwik';
+
+export default component$(() => {
+  return (
+    <Host>
+      <h1>Settings</h1>
+      <p>My Settings</p>
+    </Host>
+  );
+});

package/starters/apps/qwik-city/src/routes/docs/[category]/[id]/index.tsx

@@ -0,0 +1,15 @@
+import { component$, Host } from '@builder.io/qwik';
+import { useLocation } from '@builder.io/qwik-city';
+
+export default component$(() => {
+  const loc = useLocation();
+
+  return (
+    <Host>
+      <h1>Docs</h1>
+      <p>pathname: {loc.pathname}</p>
+      <p>category: {loc.params.category}</p>
+      <p>id: {loc.params.id}</p>
+    </Host>
+  );
+});

package/starters/apps/qwik-city/src/routes/docs/_layout/docs.css

@@ -0,0 +1,9 @@
+.docs {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  padding: 0;
+}
+
+.docs-content {
+  padding-left: 20px;
+}

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

@@ -0,0 +1,25 @@
+import { component$, Host, Slot, useStyles$ } from '@builder.io/qwik';
+import type { HeadComponent } 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: HeadComponent = ({ resolved }) => {
+  return (
+    <>
+      <title>Docs: {resolved.title}</title>
+    </>
+  );
+};

package/starters/apps/qwik-city/src/routes/docs/_menu.md

@@ -0,0 +1,9 @@
+# Docs
+
+## Getting Started
+
+- [Introduction](introduction/index.md)
+
+## Components
+
+- [Basics](/docs/components/basics)

package/starters/apps/qwik-city/src/{pages/index.mdx → routes/docs/getting-started.mdx}

@@ -2,7 +2,7 @@
 title: Welcome
 ---
 
-import { Counter } from '../components/counter/counter';
+import { Counter } from '~/components/counter/counter';
 
 # Welcome
 

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

@@ -0,0 +1,18 @@
+import { component$, Host } from '@builder.io/qwik';
+import type { HeadComponent } from '@builder.io/qwik-city';
+
+export default component$(() => {
+  return (
+    <Host>
+      <h1>Welcome to the Docs!</h1>
+    </Host>
+  );
+});
+
+export const head: HeadComponent = () => {
+  return (
+    <>
+      <title>Welcome!</title>
+    </>
+  );
+};

package/starters/apps/qwik-city/src/routes/docs/introduction/index.md

@@ -0,0 +1,7 @@
+---
+title: Introduction
+---
+
+# Introduction
+
+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

@@ -0,0 +1,11 @@
+import { component$, Host } from '@builder.io/qwik';
+
+export default component$(() => {
+  return (
+    <Host>
+      <h1>Welcome to QwikCity</h1>
+
+      <p>The meta-framework for Qwik.</p>
+    </Host>
+  );
+});

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

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "target": "ES2017",
+    "module": "ES2020",
+    "lib": ["es2020", "DOM"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "@builder.io/qwik",
+    "strict": true,
+    "declaration": true,
+    "declarationDir": "lib/types",
+    "resolveJsonModule": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "types": ["vite/client"],
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/starters/apps/qwik-city/vite.config.ts

@@ -1,20 +1,16 @@
 import { defineConfig } from 'vite';
 import { qwikVite } from '@builder.io/qwik/optimizer';
 import { qwikCity } from '@builder.io/qwik-city/vite';
-import { resolve } from 'path';
+import tsconfigPaths from 'vite-tsconfig-paths';
 /* VITE_IMPORTS */
 
 export default defineConfig(() => {
   return {
     /* VITE_CONFIG */
     plugins: [
-      qwikCity({
-        pagesDir: resolve('src', 'pages'),
-        layouts: {
-          default: resolve('src', 'layouts', 'default', 'default.tsx'),
-        },
-      }),
+      qwikCity(),
       qwikVite(/* VITE_QWIK */),
+      tsconfigPaths(),
       /* VITE_PLUGINS */
     ],
   };

package/starters/features/prettier/package.json

@@ -5,6 +5,6 @@
     "fmt.check": "prettier --check ."
   },
   "devDependencies": {
-    "prettier": "2.6.2"
+    "prettier": "2.7.1"
   }
 }

package/starters/features/react/package.json

@@ -0,0 +1,26 @@
+{
+  "description": "Prettier code formatter.",
+  "scripts": {
+    "fmt": "prettier --write .",
+    "fmt.check": "prettier --check ."
+  },
+  "devDependencies": {
+    "@builder.io/qwik-react": "0.0.4",
+    "@emotion/react": "11.9.3",
+    "@emotion/server": "11.4.0",
+    "@emotion/styled": "11.9.3",
+    "@mui/material": "5.8.6",
+    "@types/react": "18.0.14",
+    "@types/react-dom": "18.0.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "__qwik__": {
+    "priority": -1,
+    "vite": {
+      "VITE_IMPORTS": "import { qwikReact } from '@builder.io/qwik-react';",
+      "VITE_CONFIG": "",
+      "VITE_PLUGINS": "qwikReact(),"
+    }
+  }
+}

package/starters/{apps/qwik-city → features/react}/src/entry.ssr.tsx

@@ -1,6 +1,7 @@
-import { renderToString, RenderOptions } from '@builder.io/qwik/server';
+import type { RenderOptions } from '@builder.io/qwik/server';
+import { renderToString } from '@builder.io/qwik-react';
 import { manifest } from '@qwik-client-manifest';
-import { Root } from './root';
+import Root from './root';
 
 export function render(opts: RenderOptions) {
   return renderToString(<Root />, {

package/starters/features/react/src/react/app.tsx

@@ -0,0 +1,14 @@
+/** @jsxImportSource react */
+
+import { qwikify$ } from '@builder.io/qwik-react';
+import { Button } from '@mui/material';
+
+export function ReactCmp() {
+  return (
+    <>
+      <Button>Button</Button>
+    </>
+  );
+}
+
+export const ReactRoot = qwikify$(ReactCmp);

package/starters/servers/cloudflare-pages/functions/[[path]].ts

@@ -2,4 +2,4 @@
 
 // Cloudflare Pages Functions
 // https://developers.cloudflare.com/pages/platform/functions/
-export { onRequestGet } from '../server/entry.cloudflare.js';
+export { onRequest } from '../server/entry.cloudflare.js';

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

@@ -3,7 +3,7 @@ import { render } from './entry.ssr';
 /**
  * Cloudflare Pages Request Handler
  */
-export const onRequestGet = async ({ request, next, waitUntil }: any) => {
+export const onRequest: PagesFunction = async ({ request, next, waitUntil }) => {
   try {
     const url = new URL(request.url);
 
@@ -13,7 +13,7 @@ export const onRequestGet = async ({ request, next, waitUntil }: any) => {
     }
 
     // Do not using caching during development
-    const useCache = url.hostname !== 'localhost';
+    const useCache = url.hostname !== 'localhost' && request.method === 'GET';
 
     // Early return from cache
     const cache = await caches.open('custom:qwik');

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

@@ -1,51 +1,18 @@
 import express from 'express';
 import { join } from 'path';
+import cityPlan from '@qwik-city-plan';
+import { qwikCity } from '@builder.io/qwik-city/adaptors/express';
 import { render } from './entry.ssr';
 
-/**
- * Create an express server
- * https://expressjs.com/
- */
 const app = express();
 
-/**
- * Serve static client build files,
- * hashed filenames, immutable cache-control
- */
 app.use(
-  '/build',
-  express.static(join(__dirname, '..', 'dist', 'build'), {
-    immutable: true,
-    maxAge: '1y',
+  qwikCity(render, {
+    ...cityPlan,
+    staticDir: join(__dirname, '..', 'dist'),
   })
 );
 
-/**
- * Serve static public files at the root
- */
-app.use(express.static(join(__dirname, '..', 'dist'), { index: false }));
-
-/**
- * Server-Side Render Qwik application
- */
-app.get('/*', async (req, res, next) => {
-  try {
-    // Render the Root component to a string
-    const result = await render({
-      url: req.url,
-    });
-
-    // respond with SSR'd HTML
-    res.send(result.html);
-  } catch (e) {
-    // Error while server-side rendering
-    next(e);
-  }
-});
-
-/**
- * Start the express server
- */
 app.listen(8080, () => {
   /* eslint-disable */
   console.log(`http://localhost:8080/`);

package/starters/servers/netlify/package.json

@@ -5,7 +5,7 @@
     "build.ssr": "vite build --ssr src/entry.netlify.ts"
   },
   "devDependencies": {
-    "@netlify/vite-plugin-netlify-edge": "^1.1.0"
+    "@netlify/vite-plugin-netlify-edge": "1.1.0"
   },
   "__qwik__": {
     "priority": -1,

package/starters/apps/qwik-city/src/components/app/app.tsx

@@ -1,13 +0,0 @@
-import { component$, Host } from '@builder.io/qwik';
-import { Page } from '../page/page';
-import { useQwikCity } from '@builder.io/qwik-city';
-
-export const App = component$(() => {
-  useQwikCity();
-
-  return (
-    <Host>
-      <Page />
-    </Host>
-  );
-});