create-qwik 0.0.109 → 0.0.110

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-qwik",
-  "version": "0.0.109",
+  "version": "0.0.110",
   "description": "Interactive CLI for create Qwik projects and adding features.",
   "bin": "./create-qwik.cjs",
   "main": "./index.cjs",

package/starters/apps/base/package.json

@@ -5,22 +5,23 @@
     "build.client": "vite build",
     "build.preview": "vite build --ssr src/entry.preview.tsx",
     "dev": "vite --mode ssr",
+    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
     "fmt": "prettier --write .",
     "fmt.check": "prettier --check .",
     "lint": "eslint \"src/**/*.ts*\"",
-    "preview": "qwik build preview && vite preview",
-    "start": "vite --mode ssr",
+    "preview": "qwik build preview && vite preview --open",
+    "start": "vite --open --mode ssr",
     "typecheck": "tsc --incremental --noEmit",
     "qwik": "qwik"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.109",
-    "@builder.io/qwik-city": "0.0.110",
+    "@builder.io/qwik": "0.0.110",
+    "@builder.io/qwik-city": "0.0.111",
     "@types/eslint": "8.4.6",
     "@types/node": "latest",
     "@typescript-eslint/eslint-plugin": "5.37.0",
     "@typescript-eslint/parser": "5.37.0",
-    "eslint-plugin-qwik": "0.0.109",
+    "eslint-plugin-qwik": "0.0.110",
     "eslint": "8.23.1",
     "node-fetch": "3.2.10",
     "prettier": "2.7.1",

package/starters/apps/base/src/entry.dev.tsx

@@ -1,7 +1,6 @@
-import { render, RenderOptions } from '@builder.io/qwik';
-import Root from './root';
-
-/**
+/*
+ * WHAT IS THIS FILE?
+ *
  * Development entry point using only client-side modules:
  * - Do not use this mode in production!
  * - No SSR
@@ -10,6 +9,9 @@ import Root from './root';
  * - More code is transferred to the browser than in SSR mode.
  * - Optimizer/Serialization/Deserialization code is not exercised!
  */
+import { render, RenderOptions } from '@builder.io/qwik';
+import Root from './root';
+
 export default function (opts: RenderOptions) {
   return render(document, <Root />, opts);
 }

package/starters/apps/base/src/entry.preview.tsx

@@ -1,6 +1,19 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * It's the bundle entry point for `npm run preview`.
+ * That is, serving your app built in production mode.
+ *
+ * Feel free to modify this file, but don't remove it!
+ *
+ * Learn more about Vite's preview command:
+ * - https://vitejs.dev/config/preview-options.html#preview-options
+ *
+ */
 import { qwikCity } from '@builder.io/qwik-city/middleware/node';
 import render from './entry.ssr';
 
-// Create the Qwik City ssr preview middleware
-// Imported by vite preview
+/**
+ * The default export is the QwikCity adaptor used by Vite preview.
+ */
 export default qwikCity(render);

package/starters/apps/base/src/entry.ssr.tsx

@@ -1,3 +1,15 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * SSR entry point, in all cases the application is render outside the browser, this
+ * entry point will be the common one.
+ *
+ * - Server (express, cloudflare...)
+ * - npm run start
+ * - npm run preview
+ * - npm run build
+ *
+ */
 import { renderToStream, RenderToStreamOptions } from '@builder.io/qwik/server';
 import { manifest } from '@qwik-client-manifest';
 import Root from './root';

package/starters/apps/base/src/global.css

@@ -1,3 +1,10 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * Globally applied styles. No matter which components are in the page or matching route,
+ * the styles in here will be applied to the Document, without any sort of CSS scoping.
+ *
+ */
 html {
   line-height: 1.5;
   -webkit-text-size-adjust: 100%;

package/starters/apps/base/src/routes/service-worker.ts

@@ -1,5 +1,12 @@
-declare const self: ServiceWorkerGlobalScope;
-
+/*
+ * WHAT IS THIS FILE?
+ *
+ * The service-worker.ts file is used to have state of the art prefetching.
+ * https://qwik.builder.io/docs/advanced/prefetching/#prefetching
+ *
+ * Qwik uses service worker to speed up your site and reduce latency, ie, not used in the tradicional way of offiline.
+ * You can also use this file to add more functionality that runs in the service worker.
+ */
 import { setupServiceWorker } from '@builder.io/qwik-city/service-worker';
 
 setupServiceWorker();
@@ -7,3 +14,5 @@ setupServiceWorker();
 addEventListener('install', () => self.skipWaiting());
 
 addEventListener('activate', () => self.clients.claim());
+
+declare const self: ServiceWorkerGlobalScope;

package/starters/apps/basic/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "qwik-basic-starter",
+  "description": "Recommended for your first Qwik app",
+  "type": "module",
+  "__qwik__": {
+    "priority": 1,
+    "qwikCity": true
+  }
+}

package/starters/apps/{blank → basic}/src/components/header/header.tsx

@@ -1,9 +1,9 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
+import { component$, useStylesScoped$ } from '@builder.io/qwik';
 import { QwikLogo } from '../icons/qwik';
-import styles from './header.css';
+import styles from './header.css?inline';
 
 export default component$(() => {
-  useStyles$(styles);
+  useStylesScoped$(styles);
 
   return (
     <header>
@@ -14,7 +14,7 @@ export default component$(() => {
       </div>
       <ul>
         <li>
-          <a href="https://qwik.builder.io/" target="_blank">
+          <a href="https://qwik.builder.io/docs/components/overview/" target="_blank">
             Docs
           </a>
         </li>

package/starters/apps/basic/src/global.css

@@ -0,0 +1,125 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * Globally applied styles. No matter which components are in the page or matching route,
+ * the styles in here will be applied to the Document, without any sort of CSS scoping.
+ *
+ */
+
+:root {
+  --qwik-dark-blue: #006ce9;
+  --qwik-light-blue: #18b6f6;
+  --qwik-light-purple: #ac7ff4;
+  --qwik-dark-purple: #713fc2;
+}
+
+body {
+  background-color: #fafafa;
+  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  padding: 20px 20px 40px 20px;
+}
+
+main {
+  max-width: 760px;
+  margin: 0 auto;
+  background-color: white;
+  border-radius: 5px;
+  box-shadow: 0px 0px 130px -50px var(--qwik-light-purple);
+  overflow: hidden;
+}
+
+h1,
+h2 {
+  margin: 0 0 5px 0;
+}
+
+.lightning {
+  filter: hue-rotate(180deg);
+}
+
+section {
+  padding: 20px;
+  border-bottom: 10px solid var(--qwik-dark-blue);
+}
+
+ul {
+  list-style-type: square;
+  margin: 5px 0 30px 0;
+  padding-left: 25px;
+}
+
+li {
+  padding: 5px 0;
+}
+
+li::marker {
+  color: var(--qwik-light-blue);
+}
+
+a,
+a:visited {
+  color: var(--qwik-dark-blue);
+}
+
+a:hover {
+  text-decoration: none;
+}
+
+table.commands {
+  margin: 0 0 30px 0;
+}
+
+.commands td {
+  padding: 5px;
+}
+
+.commands td:first-child {
+  white-space: nowrap;
+  padding-right: 20px;
+}
+
+code {
+  font-family: Menlo, Monaco, Courier New, monospace;
+  font-size: 0.9em;
+  background-color: rgb(224, 224, 224);
+  padding: 2px 4px;
+  border-radius: 3px;
+  border-bottom: 2px solid #bfbfbf;
+}
+
+footer {
+  padding: 15px;
+  text-align: center;
+  font-size: 0.8em;
+}
+
+footer a {
+  text-decoration: none;
+}
+
+footer a:hover {
+  text-decoration: underline;
+}
+
+a.mindblow {
+  margin: 0 auto;
+  display: block;
+  background: var(--qwik-light-purple);
+  padding: 10px 20px;
+  border-radius: 10px;
+  border: 0;
+  color: white;
+  text-decoration: none;
+  font-size: 20px;
+  width: fit-content;
+  border-bottom: 4px solid black;
+  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🤯</text></svg>")
+      16 0,
+    auto; /*!emojicursor.app*/
+}
+
+a.mindblow:hover {
+  border-bottom-width: 0px;
+  margin-bottom: 4px;
+  transform: translateY(4px);
+}

package/starters/apps/{blank → basic}/src/root.tsx

@@ -5,7 +5,7 @@ import { RouterHead } from './components/router-head/router-head';
 import './global.css';
 
 export default component$(() => {
-  /*
+  /**
    * The root of a QwikCity site always start with the <QwikCity> component,
    * immediately followed by the document's <head> and <body>.
    *

package/starters/apps/basic/src/routes/flower/flower.css

@@ -0,0 +1,71 @@
+.host {
+  display: grid;
+
+  align-items: center;
+  justify-content: center;
+  justify-items: center;
+  --rotation: 135deg;
+  --rotation: 225deg;
+  --size-step: 10px;
+  --odd-color-step: 5;
+  --even-color-step: 5;
+  --center: 12;
+
+  width: 100%;
+  height: 500px;
+
+  contain: strict;
+}
+
+input {
+  width: 100%;
+}
+
+.square {
+  --size: calc(40px + var(--index) * var(--size-step));
+
+  display: block;
+  width: var(--size);
+  height: var(--size);
+  transform: rotateZ(calc(var(--rotation) * var(--state) * (var(--center) - var(--index))));
+  transition-property: transform, border-color;
+  transition-duration: 5s;
+  transition-timing-function: ease-in-out;
+  grid-area: 1 / 1;
+  background: white;
+  border-width: 2px;
+  border-style: solid;
+  border-color: black;
+  box-sizing: border-box;
+  will-change: transform, border-color;
+
+  contain: strict;
+}
+
+.square.odd {
+  --luminance: calc(1 - calc(calc(var(--index) * var(--odd-color-step)) / 256));
+  background: rgb(
+    calc(172 * var(--luminance)),
+    calc(127 * var(--luminance)),
+    calc(244 * var(--luminance))
+  );
+}
+
+.pride .square:nth-child(12n + 1) {
+  background: #e70000;
+}
+.pride .square:nth-child(12n + 3) {
+  background: #ff8c00;
+}
+.pride .square:nth-child(12n + 5) {
+  background: #ffef00;
+}
+.pride .square:nth-child(12n + 7) {
+  background: #00811f;
+}
+.pride .square:nth-child(12n + 9) {
+  background: #0044ff;
+}
+.pride .square:nth-child(12n + 11) {
+  background: #760089;
+}

package/starters/apps/basic/src/routes/flower/index.tsx

@@ -0,0 +1,54 @@
+import { component$, useClientEffect$, useStore, useStylesScoped$ } from '@builder.io/qwik';
+import { useLocation } from '@builder.io/qwik-city';
+import styles from './flower.css?inline';
+
+export default component$(() => {
+  useStylesScoped$(styles);
+  const loc = useLocation();
+
+  const state = useStore({
+    count: 0,
+    number: 20,
+  });
+
+  useClientEffect$(({ cleanup }) => {
+    const timeout = setTimeout(() => (state.count = 1), 500);
+    cleanup(() => clearTimeout(timeout));
+
+    const internal = setInterval(() => state.count++, 7000);
+    cleanup(() => clearInterval(internal));
+  });
+
+  return (
+    <>
+      <input
+        type="range"
+        value={state.number}
+        max={50}
+        onInput$={(ev) => {
+          state.number = (ev.target as HTMLInputElement).valueAsNumber;
+        }}
+      />
+      <div
+        style={{
+          '--state': `${state.count * 0.1}`,
+        }}
+        class={{
+          host: true,
+          pride: loc.query['pride'] === 'true',
+        }}
+      >
+        {Array.from({ length: state.number }, (_, i) => (
+          <div
+            key={i}
+            class={{
+              square: true,
+              odd: i % 2 === 0,
+            }}
+            style={{ '--index': `${i + 1}` }}
+          />
+        )).reverse()}
+      </div>
+    </>
+  );
+});

package/starters/apps/{blank → basic}/src/routes/index.tsx

@@ -1,5 +1,6 @@
 import { component$ } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
+import { Link } from '@builder.io/qwik-city';
 
 export default component$(() => {
   return (
@@ -45,7 +46,55 @@ export default component$(() => {
           <td>
             <code>npm run qwik add</code>
           </td>
-          <td>Add integration like edge servers and SSG.</td>
+          <td>Select an integration to add.</td>
+        </tr>
+      </table>
+
+      <h2>Add Integrations</h2>
+
+      <table class="commands">
+        <tr>
+          <td>
+            <code>npm run qwik add cloudflare-pages</code>
+          </td>
+          <td>
+            <a href="https://developers.cloudflare.com/pages" target="_blank">
+              Cloudflare Pages Server
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>npm run qwik add express</code>
+          </td>
+          <td>
+            <a href="https://expressjs.com/" target="_blank">
+              Nodejs Express Server
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>npm run qwik add netlify-edge</code>
+          </td>
+          <td>
+            <a href="https://docs.netlify.com/" target="_blank">
+              Netlify Edge Functions
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>npm run qwik add static-node</code>
+          </td>
+          <td>
+            <a
+              href="https://qwik.builder.io/qwikcity/static-site-generation/overview/"
+              target="_blank"
+            >
+              Static Site Generation (SSG)
+            </a>
+          </td>
         </tr>
       </table>
 
@@ -72,6 +121,9 @@ export default component$(() => {
           </a>
         </li>
       </ul>
+      <Link class="mindblow" href="/flower">
+        Blow my mind 🤯
+      </Link>
     </div>
   );
 });

package/starters/apps/basic/src/routes/layout.tsx

@@ -0,0 +1,20 @@
+import { component$, Slot } from '@builder.io/qwik';
+import Header from '../components/header/header';
+
+export default component$(() => {
+  return (
+    <>
+      <main>
+        <Header />
+        <section>
+          <Slot />
+        </section>
+      </main>
+      <footer>
+        <a href="https://www.builder.io/" target="_blank">
+          Made with ♡ by Builder.io
+        </a>
+      </footer>
+    </>
+  );
+});

package/starters/apps/documentation-site/package.json

@@ -1,8 +1,8 @@
 {
   "name": "qwik-docs-starter",
-  "description": "Documentation site starter.",
+  "description": "Documentation site starter",
   "__qwik__": {
-    "priority": 1,
+    "priority": 0,
     "qwikCity": true
   },
   "type": "module"

package/starters/apps/documentation-site/src/components/footer/footer.css

@@ -2,10 +2,11 @@ footer {
   border-top: 0.5px solid #ddd;
   margin-top: 40px;
   padding: 20px;
+  text-align: center;
 }
 
 footer a {
-  color: #949494;
+  color: #9e9e9e;
   font-size: 12px;
 }
 
@@ -13,10 +14,9 @@ footer ul {
   list-style: none;
   margin: 0;
   padding: 0;
-  text-align: center;
 }
 
 footer li {
   display: inline-block;
-  padding: 4px 12px;
+  padding: 6px 12px;
 }

package/starters/apps/documentation-site/src/components/footer/footer.tsx

@@ -25,10 +25,12 @@ export default component$(() => {
         <li>
           <a href="https://qwik.builder.io/chat">Chat</a>
         </li>
-        <li>
-          <a href="/">Home</a>
-        </li>
       </ul>
+      <div>
+        <a href="https://www.builder.io/" target="_blank" class="builder">
+          Made with ♡ by Builder.io
+        </a>
+      </div>
     </footer>
   );
 });

package/starters/apps/documentation-site/src/routes/index.tsx

@@ -53,7 +53,55 @@ export default component$(() => {
           <td>
             <code>npm run qwik add</code>
           </td>
-          <td>Add integration like edge servers and SSG.</td>
+          <td>Select an integration to add.</td>
+        </tr>
+      </table>
+
+      <h2>Add Integrations</h2>
+
+      <table class="commands">
+        <tr>
+          <td>
+            <code>npm run qwik add cloudflare-pages</code>
+          </td>
+          <td>
+            <a href="https://developers.cloudflare.com/pages" target="_blank">
+              Cloudflare Pages Server
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>npm run qwik add express</code>
+          </td>
+          <td>
+            <a href="https://expressjs.com/" target="_blank">
+              Nodejs Express Server
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>npm run qwik add netlify-edge</code>
+          </td>
+          <td>
+            <a href="https://docs.netlify.com/" target="_blank">
+              Netlify Edge Functions
+            </a>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <code>npm run qwik add static-node</code>
+          </td>
+          <td>
+            <a
+              href="https://qwik.builder.io/qwikcity/static-site-generation/overview/"
+              target="_blank"
+            >
+              Static Site Generation (SSG)
+            </a>
+          </td>
         </tr>
       </table>
 

package/starters/apps/library/package.json

@@ -27,12 +27,6 @@
     "np": "7.6.1"
   },
   "__qwik__": {
-    "priority": -1,
-    "featureOptions": [
-      "prettier"
-    ],
-    "featureEnabled": [
-      "prettier"
-    ]
+    "priority": -1
   }
 }

package/starters/apps/blank/package.json

@@ -1,9 +0,0 @@
-{
-  "name": "qwik-blank-starter",
-  "description": "Blank Qwik starter app.",
-  "type": "module",
-  "__qwik__": {
-    "priority": 0,
-    "qwikCity": true
-  }
-}