create-qwik 0.0.108 → 0.0.109

package/starters/apps/qwik-city/src/routes/api/layout-api.tsx

@@ -1,37 +0,0 @@
-import { component$, 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$(() => {
-  useStyles$(styles);
-
-  return (
-    <div 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>
-    </div>
-  );
-});
-
-export const head: DocumentHead = ({ pathname }) => {
-  return {
-    title: `API: ${pathname}`,
-  };
-};

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

@@ -1,36 +0,0 @@
-import { component$, Resource } from '@builder.io/qwik';
-import { useEndpoint, DocumentHead, RequestHandler } from '@builder.io/qwik-city';
-
-export default component$(() => {
-  const resource = useEndpoint<typeof onGet>();
-
-  return (
-    <div>
-      <Resource
-        value={resource}
-        onResolved={(blog) => (
-          <>
-            <h1>{blog.blogTitle}</h1>
-            <p>{blog.blogContent}</p>
-          </>
-        )}
-      />
-    </div>
-  );
-});
-
-export const onGet: RequestHandler<EndpointData> = async ({ params, url }) => {
-  return {
-    blogTitle: `Blog: ${params.slug}`,
-    blogContent: `${params.slug}, ${url.pathname}`,
-  };
-};
-
-export const head: DocumentHead<EndpointData> = ({ data }) => {
-  return { title: data?.blogTitle };
-};
-
-export interface EndpointData {
-  blogTitle: string;
-  blogContent: string;
-}

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

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

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

@@ -1,21 +0,0 @@
-import { component$, Slot } from '@builder.io/qwik';
-
-export default component$(() => {
-  return (
-    <div>
-      <section class="blog-content">
-        <Slot />
-      </section>
-      <aside class="blog-menu">
-        <ul>
-          <li>
-            <a href="/blog/what-is-resumability">What Is Resumability?</a>
-          </li>
-          <li>
-            <a href="/blog/serializing-props">Serializing Props</a>
-          </li>
-        </ul>
-      </aside>
-    </div>
-  );
-});

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

@@ -1,14 +0,0 @@
-.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

@@ -1,15 +0,0 @@
-import { component$ } from '@builder.io/qwik';
-import type { DocumentHead } from '@builder.io/qwik-city';
-
-export default component$(() => {
-  return (
-    <div>
-      <h1>Dashboard</h1>
-      <p>Welcome to the dashboard.</p>
-    </div>
-  );
-});
-
-export const head: DocumentHead = {
-  title: 'Home',
-};

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

@@ -1,44 +0,0 @@
-import { component$, 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 (
-    <div>
-      <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 />
-    </div>
-  );
-});
-
-export const head: DocumentHead = ({ head }) => {
-  return {
-    title: `Dashboard ${head.title}`,
-  };
-};

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

@@ -1,15 +0,0 @@
-import { component$ } from '@builder.io/qwik';
-import type { DocumentHead } from '@builder.io/qwik-city';
-
-export default component$(() => {
-  return (
-    <div>
-      <h1>Profile</h1>
-      <p>My Profile</p>
-    </div>
-  );
-});
-
-export const head: DocumentHead = {
-  title: 'Profile',
-};

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

@@ -1,15 +0,0 @@
-import { component$ } from '@builder.io/qwik';
-import type { DocumentHead } from '@builder.io/qwik-city';
-
-export default component$(() => {
-  return (
-    <div>
-      <h1>Settings</h1>
-      <p>My Settings</p>
-    </div>
-  );
-});
-
-export const head: DocumentHead = {
-  title: 'Settings',
-};

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

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

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

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

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

@@ -1,44 +0,0 @@
----
-title: Getting Started
----
-
-# Getting Started
-
-## Creating an app using the CLI
-
-The first step is to create an application. Qwik comes with a CLI that allows you to create a basic working skeleton of an application. We will use the CLI to create a Todo sample app, and we will use that application to do a walk-through of Qwik so that you can familiarize yourself with it.
-
-## Running in development
-
-Once the application is download.
-
-1. Change into the directory created by the `npm create qwik@latest`.
-
-```shell
-cd qwik-todo
-```
-
-2. Install NPM modules:
-
-```shell
-npm install
-```
-
-3. Invoke the dev server
-
-```shell
-npm start
-```
-
-4. You should see a server running with your To-do application
-
-```shell
-  vite v2.8.6 dev server running at:
-
-  > Local: http://localhost:3000/
-  > Network: use `--host` to expose
-
-  ready in 157ms.
-```
-
-5. Visit http://localhost:3000/ to explore the To-do app.

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

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

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

@@ -1,31 +0,0 @@
-import { component$, 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 './docs.css?inline';
-
-export default component$(() => {
-  useStyles$(styles);
-
-  return (
-    <div class="docs full-screen">
-      <Header />
-      <main>
-        <Menu />
-        <section class="docs-content">
-          <Breadcrumbs />
-          <Slot />
-          <Footer />
-        </section>
-      </main>
-    </div>
-  );
-});
-
-export const head: DocumentHead = ({ head }) => {
-  return {
-    title: `Docs: ${head.title}`,
-  };
-};

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

@@ -1,11 +0,0 @@
-# Docs
-
-## Introduction
-
-- [Overview](overview/index.md)
-- [Getting Started](getting-started/index.md)
-
-## Components
-
-- [Basics](/docs/components/basics)
-- [Listeners](/docs/components/listeners)

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

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

@@ -1,16 +0,0 @@
-import { component$ } from '@builder.io/qwik';
-import type { DocumentHead } from '@builder.io/qwik-city';
-
-export default component$(() => {
-  return (
-    <div>
-      <h1>Welcome to Qwik City</h1>
-
-      <p>The meta-framework for Qwik.</p>
-    </div>
-  );
-});
-
-export const head: DocumentHead = {
-  title: 'Welcome to Qwik City',
-};

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

@@ -1,123 +0,0 @@
-import { Resource, component$ } from '@builder.io/qwik';
-import { useEndpoint, useLocation, RequestHandler, DocumentHead } from '@builder.io/qwik-city';
-
-export default component$(() => {
-  const { params } = useLocation();
-
-  const resource = useEndpoint<typeof onGet>();
-
-  return (
-    <>
-      <Resource
-        value={resource}
-        onPending={() => <p>Loading</p>}
-        onResolved={(product) => {
-          if (product == null) {
-            return <h1>Product "{params.id}" not found</h1>;
-          }
-
-          return (
-            <>
-              <h1>Product: {product.productId}</h1>
-              <p>Price: {product.price}</p>
-              <p>{product.description}</p>
-            </>
-          );
-        }}
-      />
-
-      <p>(Artificial response delay of 250ms)</p>
-
-      <hr />
-
-      <ul>
-        <li>
-          <a href="/products/jacket">Jacket</a>
-        </li>
-        <li>
-          <a href="/products/hat">Hat</a>
-        </li>
-        <li>
-          <a href="/products/shirt">T-Shirt (Redirect to /products/tshirt)</a>
-        </li>
-        <li>
-          <a href="/products/hoodie">Hoodie (404 Not Found)</a>
-        </li>
-      </ul>
-    </>
-  );
-});
-
-export const head: DocumentHead<EndpointData> = ({ data }) => {
-  if (!data) {
-    return {
-      title: `Product not found`,
-    };
-  }
-  return {
-    title: `Product ${data.productId}, ${data.price}`,
-  };
-};
-
-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.
-
-  if (params.id === 'shirt') {
-    // Redirect, which will skip any rendering and the server will immediately redirect
-    throw response.redirect('/products/tshirt');
-  }
-
-  // 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 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 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
-const PRODUCT_DB: Record<string, string> = {
-  hat: '$21.96',
-  jacket: '$48.96',
-  tshirt: '$18.96',
-};
-
-type EndpointData = ProductData | null;
-
-interface ProductData {
-  productId: string;
-  price: string;
-  description: string;
-}

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

@@ -1,17 +0,0 @@
-import { defineConfig } from 'vite';
-import { qwikVite } from '@builder.io/qwik/optimizer';
-import { qwikCity } from '@builder.io/qwik-city/vite';
-import tsconfigPaths from 'vite-tsconfig-paths';
-/* VITE_IMPORTS */
-
-export default defineConfig(() => {
-  return {
-    /* VITE_CONFIG */
-    plugins: [
-      qwikCity(),
-      qwikVite(/* VITE_QWIK */),
-      tsconfigPaths(),
-      /* VITE_PLUGINS */
-    ],
-  };
-});

package/starters/features/prettier/.prettierignore

@@ -1,23 +0,0 @@
-**/*.log
-**/.DS_Store
-*.
-.vscode/settings.json
-.history
-.yarn
-dist
-dist-dev
-etc
-external
-node_modules
-temp
-tsc-out
-tsdoc-metadata.json
-target
-output
-rollup.config.js
-build
-.cache
-.vscode
-.rollup.cache
-dist
-tsconfig.tsbuildinfo

package/starters/features/prettier/package.json

@@ -1,10 +0,0 @@
-{
-  "description": "Prettier code formatter.",
-  "scripts": {
-    "fmt": "prettier --write .",
-    "fmt.check": "prettier --check ."
-  },
-  "devDependencies": {
-    "prettier": "2.7.1"
-  }
-}

package/starters/features/react/package.json

@@ -1,26 +0,0 @@
-{
-  "description": "Use React components into your Qwik app",
-  "scripts": {
-    "fmt": "prettier --write .",
-    "fmt.check": "prettier --check ."
-  },
-  "devDependencies": {
-    "@builder.io/qwik-react": "0.0.100",
-    "@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/features/react/src/entry.ssr.tsx

@@ -1,11 +0,0 @@
-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';
-
-export default function (opts: RenderOptions) {
-  return renderToString(<Root />, {
-    manifest,
-    ...opts,
-  });
-}

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

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

package/starters/features/tailwindcss/package.json

@@ -1,8 +0,0 @@
-{
-  "description": "Tailwind CSS framework.",
-  "devDependencies": {
-    "autoprefixer": "10.4.7",
-    "postcss": "8.4.14",
-    "tailwindcss": "3.0.24"
-  }
-}

package/starters/features/tailwindcss/postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};

package/starters/features/tailwindcss/src/global.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/starters/features/tailwindcss/tailwind.config.cjs

@@ -1,7 +0,0 @@
-module.exports = {
-  content: ['./src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};

package/starters/servers/cloudflare-pages/.node-version

@@ -1 +0,0 @@
-16

package/starters/servers/cloudflare-pages/README.md

@@ -1,17 +0,0 @@
-## Cloudflare Pages
-
-Cloudflare's [wrangler](https://github.com/cloudflare/wrangler) CLI can be used to preview a production build locally. To start a local server, run:
-
-```
-npm run serve
-```
-
-Then visit [http://localhost:8787/](http://localhost:8787/)
-
-### Deployments
-
-[Cloudflare Pages](https://pages.cloudflare.com/) are deployable through their [Git provider integrations](https://developers.cloudflare.com/pages/platform/git-integration/).
-
-If you don't already have an account, then [create a Cloudflare account here](https://dash.cloudflare.com/sign-up/pages). Next go to your dashboard and follow the [Cloudflare Pages deployment guide](https://developers.cloudflare.com/pages/framework-guides/deploy-anything/).
-
-Within the projects "Settings" for "Build and deployments", the "Build command" should be `npm run build`, and the "Build output directory" should be set to `dist`.

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

@@ -1,5 +0,0 @@
-// @ts-ignore
-
-// Cloudflare Pages Functions
-// https://developers.cloudflare.com/pages/platform/functions/
-export { onRequest } from '../server/entry.cloudflare';