create-qwik 0.0.107 → 0.0.108-dev20220913212706

package/README.md

@@ -1,48 +1,36 @@
-# Create Qwik
+# Create Qwik ⚡️
 
 ## Interactive mode
 
 ```
-npm init qwik@latest
+npm create qwik@latest
 ```
 
 ## Command mode
 
 ```
-npm init qwik@latest <starter> <projectName>
-```
-
-#### Example:
-
-```
-npm init qwik@latest todo my-app
+npm create qwik@latest <starter> <projectName>
 ```
 
 ## API
 
 ```javascript
-const { getStarters, generateStarter } = require('create-qwik');
-
-const starters = await getStarters();
-console.log(starters);
+const { createApp } = require('create-qwik');
 
 const opts = {
   projectName: 'my-project',
-  appId: 'todo',
-  serverId: 'express',
+  starterId: 'todo',
   outDir: '/path/to/output/dir',
-  featureIds: [],
 };
 
-const result = await generateStarter(opts);
+const result = await createApp(opts);
 console.log(result);
 ```
 
 ## Community
 
 - Ping us at [@QwikDev](https://twitter.com/QwikDev)
-- Join our [Discord](https://qwik.builder.io/chat) community.
-- Join our [weekly office hours](https://calendar.google.com/calendar/u/0?cid=Y180ZG91YjR2NTZ1cW43YmgzbW1oZGJ2M3R2c0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t)
+- Join our [Discord](https://qwik.builder.io/chat) community
 
 ## Related
 

package/create-qwik.cjs

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+const createQwik = require('./index.cjs');
+createQwik.runCli();

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "create-qwik",
-  "version": "0.0.107",
-  "description": "Interactive CLI and API for generating Qwik projects.",
-  "bin": "create-qwik",
+  "version": "0.0.108-dev20220913212706",
+  "description": "Interactive CLI for create Qwik projects and adding features.",
+  "bin": "./create-qwik.cjs",
   "main": "index.js",
   "files": [
-    "create-qwik",
+    "create-qwik.cjs",
     "starters/"
   ],
   "author": "Builder.io Team",
@@ -13,7 +13,9 @@
   "keywords": [
     "qwik",
     "generator",
-    "builder.io"
+    "builder.io",
+    "starters",
+    "template"
   ],
   "homepage": "https://qwik.builder.io/",
   "repository": {
@@ -27,10 +29,11 @@
   "devDependencies": {
     "@types/prompts": "2.0.14",
     "kleur": "4.1.5",
+    "ora": "^6.1.2",
     "prompts": "2.4.2"
   },
   "engines": {
-    "node": ">=14",
+    "node": ">=14.18",
     "npm": ">=6.0.0"
   }
 }

package/starters/apps/base/.prettierignore

@@ -0,0 +1,6 @@
+# Files Prettier should not format
+**/*.log
+**/.DS_Store
+*.
+dist
+node_modules

package/starters/apps/base/README.md

@@ -1,24 +1,14 @@
-## Development Builds
+## Development Build
 
-### Client only
-
-During development, the index.html is not a result of server-side rendering, but rather the Qwik app is built using client-side JavaScript only. This is ideal for development with Vite and its ability to reload modules quickly and on-demand. However, this mode is only for development and does not showcase "how" Qwik works since JavaScript is required to execute, and Vite imports many development modules for the app to work.
+Server-side rendered index.html, with client-side modules prefetched and loaded by the browser.
 
 ```
 npm run dev
 ```
 
-### Server-side Rendering (SSR) and Client
-
-Server-side rendered index.html, with client-side modules prefetched and loaded by the browser. This can be used to test out server-side rendered content during development, but will be slower than the client-only development builds.
-
-```
-npm run dev.ssr
-```
-
 ## Production Builds
 
-A production build should generate the client and server modules by running both client and server build commands.
+The production build should generate the client and server modules by running both client and server build commands. Additionally, the build command will use Typescript run a type check on the source.
 
 ```
 npm run build
@@ -32,10 +22,10 @@ Production build that creates only the client-side modules that are dynamically
 npm run build.client
 ```
 
-### Server Modules
+### Preview
 
-Production build that creates the server-side render (SSR) module that is used by the server to render the HTML.
+The preview command is intended for previewing the build locally and not meant as a production server.
 
 ```
-npm run build.ssr
+npm run preview
 ```

package/starters/apps/base/gitignore

@@ -1,9 +1,7 @@
 # Build
-build
-dist
-lib
-server
-functions/**/*.js
+/dist
+/lib
+/server
 
 # Development
 node_modules
@@ -36,4 +34,4 @@ lerna-debug.log*
 
 # Yarn
 .yarn/*
-!.yarn/releases
+!.yarn/releases

package/starters/apps/base/package.json

@@ -1,35 +1,32 @@
 {
   "name": "qwik-project-name",
-  "description": "",
-  "license": "",
   "scripts": {
-    "build": "npm run typecheck && npm run build.client && npm run build.ssr",
+    "build": "qwik build",
     "build.client": "vite build",
-    "build.ssr": "vite build --ssr src/entry.ssr.tsx",
-    "dev": "npm run dev.ssr",
-    "dev.client": "vite",
-    "dev.ssr": "node --inspect node_modules/vite/bin/vite.js --mode ssr",
-    "dev.debug": "node --inspect-brk node_modules/vite/bin/vite.js --force --mode ssr",
-    "start": "npm run dev",
+    "build.preview": "vite build --ssr src/entry.preview.tsx",
+    "dev": "vite --mode ssr",
+    "fmt": "prettier --write .",
+    "fmt.check": "prettier --check .",
     "lint": "eslint \"src/**/*.ts*\"",
-    "typecheck": "tsc --incremental --noEmit"
+    "preview": "qwik build preview && vite preview",
+    "start": "vite --mode ssr",
+    "typecheck": "tsc --incremental --noEmit",
+    "qwik": "qwik"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.107",
+    "@builder.io/qwik": "0.0.108-dev20220913212706",
+    "@builder.io/qwik-city": "0.0.109",
     "@types/eslint": "8.4.6",
     "@types/node": "latest",
     "@typescript-eslint/eslint-plugin": "5.34.0",
     "@typescript-eslint/parser": "5.34.0",
-    "eslint-plugin-qwik": "0.0.107",
+    "eslint-plugin-qwik": "0.0.108-dev20220913212706",
     "eslint": "8.22.0",
     "node-fetch": "3.2.10",
+    "prettier": "2.7.1",
     "typescript": "4.7.4",
-    "vite": "3.0.9"
+    "vite": "3.0.9",
+    "vite-tsconfig-paths": "3.5.0"
   },
-  "type": "module",
-  "homepage": "https://qwik.builder.io/",
-  "private": true,
-  "engines": {
-    "node": "^14.18.0 || >=16.0.0"
-  }
+  "private": true
 }

package/starters/apps/base/public/favicons/favicon.svg

@@ -0,0 +1,13 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_645_1322)">
+<circle cx="250" cy="250" r="250" fill="white"/>
+<path d="M367.865 418.452L306.699 357.271L305.765 357.405V356.734L175.687 227.529L207.739 196.402L188.908 87.7251L99.5631 199.085C84.3384 214.515 81.5338 239.604 92.4849 258.12L148.309 351.233C156.856 365.589 172.348 374.176 189.042 374.042L216.687 373.773L367.865 418.452Z" fill="#18B6F6"/>
+<path d="M401.247 196.938L388.961 174.129L382.55 162.457L380.013 157.895L379.746 158.163L346.091 99.5314C337.677 84.7728 321.918 75.6493 304.824 75.7834L275.309 76.5884L187.3 76.8568C170.606 76.9909 155.381 85.8461 146.968 100.202L93.4141 207.001L189.17 87.4562L314.707 226.187L292.404 248.861L305.759 357.404L305.892 357.136V357.404H305.625L305.892 357.672L316.309 367.869L366.925 417.646C369.062 419.658 372.534 417.243 371.065 414.694L339.814 352.842L394.303 251.545L396.039 249.532C396.707 248.727 397.374 247.922 397.909 247.117C408.592 232.493 410.062 212.904 401.247 196.938Z" fill="#AC7EF4"/>
+<path d="M315.106 225.651L189.168 87.5908L207.064 195.731L175.012 226.992L305.49 357.27L293.738 249.13L315.106 225.651Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_645_1322">
+<rect width="500" height="500" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,6 @@
+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
+export default qwikCity(render);

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

@@ -2,14 +2,16 @@ import { renderToStream, RenderToStreamOptions } from '@builder.io/qwik/server';
 import { manifest } from '@qwik-client-manifest';
 import Root from './root';
 
-/**
- * Server-Side Render method to be called by a server.
- */
 export default function (opts: RenderToStreamOptions) {
-  // Render the Root component to a string
-  // Pass in the manifest that was generated from the client build
   return renderToStream(<Root />, {
     manifest,
     ...opts,
+    prefetchStrategy: {
+      implementation: {
+        linkInsert: null,
+        workerFetchInsert: null,
+        prefetchEvent: 'always',
+      },
+    },
   });
 }

package/starters/apps/base/tsconfig.json

@@ -3,19 +3,20 @@
     "allowJs": true,
     "target": "ES2017",
     "module": "ES2020",
-    "lib": ["es2020", "DOM"],
+    "lib": ["es2020", "DOM", "WebWorker"],
     "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"]
+    "types": ["vite/client"],
+    "paths": {
+      "~/*": ["./src/*"]
+    }
   },
   "include": ["src"]
 }

package/starters/apps/base/vite.config.ts

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

package/starters/apps/blank/package.json

@@ -1,22 +1,7 @@
 {
   "description": "Blank Qwik starter app.",
-  "scripts": {
-    "build.ssr": "vite build --ssr src/entry.express.tsx",
-    "serve": "node server/entry.express"
-  },
-  "devDependencies": {
-    "@types/express": "4.17.13",
-    "express": "4.17.3"
-  },
   "type": "module",
   "__qwik__": {
-    "priority": 0,
-    "featureOptions": [
-      "prettier",
-      "tailwindcss"
-    ],
-    "featureEnabled": [
-      "prettier"
-    ]
+    "priority": 0
   }
 }

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

@@ -0,0 +1,19 @@
+/// <reference types="node" />
+import type { IncomingMessage, ServerResponse } from 'http';
+import render from './entry.ssr';
+
+// Create the Qwik ssr preview middleware
+// Imported by vite preview
+export default async function (req: IncomingMessage, res: ServerResponse, next: (e?: any) => void) {
+  try {
+    await render({
+      stream: res,
+      envData: {
+        url: `http://${req.headers.host}${req.url}`,
+      },
+    });
+    res.end();
+  } catch (e) {
+    next(e);
+  }
+}

package/starters/apps/blank/src/root.tsx

@@ -2,7 +2,7 @@ import { App } from './components/app/app';
 
 import './global.css';
 
-export default () => {
+export default function () {
   return (
     <html>
       <head>
@@ -15,4 +15,4 @@ export default () => {
       </body>
     </html>
   );
-};
+}

package/starters/apps/{qwik-city → library}/tsconfig.json

@@ -15,10 +15,7 @@
     "skipLibCheck": true,
     "incremental": true,
     "isolatedModules": true,
-    "types": ["vite/client"],
-    "paths": {
-      "~/*": ["./src/*"]
-    }
+    "types": ["vite/client"]
   },
   "include": ["src"]
 }

package/starters/apps/library/vite.config.ts

@@ -1,10 +1,8 @@
 import { defineConfig } from 'vite';
 import { qwikVite } from '@builder.io/qwik/optimizer';
-/* VITE_IMPORTS */
 
 export default defineConfig(() => {
   return {
-    /* VITE_CONFIG */
     build: {
       target: 'es2020',
       lib: {
@@ -13,9 +11,6 @@ export default defineConfig(() => {
         fileName: (format) => `index.qwik.${format === 'es' ? 'mjs' : 'cjs'}`,
       },
     },
-    plugins: [
-      qwikVite(/* VITE_QWIK */),
-      /* VITE_PLUGINS */
-    ],
+    plugins: [qwikVite()],
   };
 });

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

@@ -2,18 +2,7 @@
   "description": "File based routing and MDX support",
   "__qwik__": {
     "priority": 1,
-    "selectServer": true,
-    "featureOptions": [
-      "prettier",
-      "tailwindcss"
-    ],
-    "featureEnabled": [
-      "prettier"
-    ]
+    "selectServer": true
   },
-  "type": "module",
-  "devDependencies": {
-    "@builder.io/qwik-city": "0.0.106",
-    "vite-tsconfig-paths": "3.5.0"
-  }
+  "type": "module"
 }

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

@@ -1,4 +1,4 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
+import { component$, mutable, useStyles$ } from '@builder.io/qwik';
 import { useContent, Link, useLocation } from '@builder.io/qwik-city';
 import styles from './menu.css?inline';
 
@@ -18,10 +18,10 @@ export const Menu = component$(() => {
                 {item.items?.map((item) => (
                   <li>
                     <Link
-                      href={item.href}
-                      class={{
+                      href={mutable(item.href)}
+                      class={mutable({
                         'is-active': loc.pathname === item.href,
-                      }}
+                      })}
                     >
                       {item.text}
                     </Link>

package/starters/apps/qwik-city/src/entry.ssr.tsx

@@ -0,0 +1,17 @@
+import { renderToStream, RenderToStreamOptions } from '@builder.io/qwik/server';
+import { manifest } from '@qwik-client-manifest';
+import Root from './root';
+
+export default function (opts: RenderToStreamOptions) {
+  return renderToStream(<Root />, {
+    manifest,
+    ...opts,
+    prefetchStrategy: {
+      implementation: {
+        linkInsert: null,
+        workerFetchInsert: null,
+        prefetchEvent: 'always',
+      },
+    },
+  });
+}

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

@@ -1,16 +1,16 @@
-import { component$ } from '@builder.io/qwik';
-import { QwikCity, RouterOutlet } from '@builder.io/qwik-city';
+import { QwikCity, RouterOutlet, ServiceWorkerRegister } from '@builder.io/qwik-city';
 import { Head } from './components/head/head';
 
 import './global.css';
 
-export default component$(() => {
+export default function () {
   return (
     <QwikCity>
       <Head />
       <body lang="en">
         <RouterOutlet />
+        <ServiceWorkerRegister />
       </body>
     </QwikCity>
   );
-});
+}

package/starters/apps/qwik-city/src/routes/service-worker.ts

@@ -0,0 +1,10 @@
+/// <reference lib="webworker" />
+declare const self: ServiceWorkerGlobalScope;
+
+import { setupServiceWorker } from '@builder.io/qwik-city/service-worker';
+
+setupServiceWorker();
+
+addEventListener('install', () => self.skipWaiting());
+
+addEventListener('activate', () => self.clients.claim());

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

@@ -2,16 +2,9 @@ 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 */
-    ],
+    plugins: [qwikCity(), qwikVite(), tsconfigPaths()],
   };
 });