create-qwik 0.0.8 → 0.0.12

package/starters/apps/todo/vite.config.js

@@ -0,0 +1,34 @@
+import { defineConfig } from 'vite';
+import { qwikRollup } from '@builder.io/qwik/optimizer';
+import { writeFile, mkdir } from 'fs/promises';
+import { dirname, resolve } from 'path';
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      output: {
+        chunkFileNames: 'q-[hash].js',
+        assetFileNames: 'q-[hash].[ext]',
+      },
+    },
+  },
+  ssr: {
+    noExternal: true,
+  },
+  plugins: [
+    qwikRollup({
+      srcDir: resolve('./src'),
+      entryStrategy: {
+        type: 'single',
+      },
+      symbolsOutput: (data) => {
+        outputJSON('./server/q-symbols.json', data);
+      },
+    }),
+  ],
+});
+
+async function outputJSON(path, data) {
+  await mkdir(dirname(path), { recursive: true });
+  await writeFile(path, JSON.stringify(data, null, 2));
+}

package/starters/features/prettier/.prettierignore

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

package/starters/features/prettier/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "qwik-project-name",
+  "version": "0.0.1",
+  "description": "The de facto standard in JS formatting",
+  "scripts": {
+    "fmt": "prettier --write .",
+    "fmt.check": "prettier --check ."
+  },
+  "devDependencies": {
+    "prettier": "2.3.0"
+  }
+}

package/starters/features/tailwindcss/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "qwik-project-name",
+  "version": "0.0.1",
+  "description": "Utility-first CSS framework for rapidly building custom user interfaces",
+  "devDependencies": {
+    "autoprefixer": "10.4.2",
+    "postcss": "8.4.6",
+    "tailwindcss": "3.0.18"
+  }
+}

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

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

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

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

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

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

package/starters/servers/cloudflare/package.json

@@ -3,17 +3,15 @@
   "description": "Cloudflare Workers (serverless)",
   "priority": -1,
   "scripts": {
-    "build": "npm run clean && npm run build.client && npm run build.server",
-    "build.client": "rollup -c",
-    "build.server": "rollup -c rollup.config.server.js",
+    "build.server": "vite build --outDir server/build --ssr src/entry.cloudflare.tsx",
     "deploy": "wrangler publish",
-    "start": "wrangler dev"
+    "deploy.preview": "wrangler preview",
+    "deploy.dev": "wrangler dev"
   },
   "devDependencies": {
-    "@cloudflare/kv-asset-handler": "^0.2.0",
-    "@cloudflare/workers-types": "^3.2.0",
-    "@types/service-worker-mock": "^2.0.1",
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-json": "^4.1.0"
+    "@cloudflare/kv-asset-handler": "0.2.0",
+    "@cloudflare/workers-types": "3.2.0",
+    "@cloudflare/wrangler": "1.19.7",
+    "@types/service-worker-mock": "2.0.1"
   }
 }

package/starters/servers/cloudflare/{workers-site → server}/package.json

@@ -1,4 +1,4 @@
 {
   "name": "cloudflare-worker",
-  "main": "build/index.js"
+  "main": "build/entry.js"
 }

package/starters/servers/cloudflare/src/{index.cloudflare.tsx → entry.cloudflare.tsx}

@@ -1,6 +1,13 @@
-import { renderApp } from './index.server';
+/* eslint-disable */
+
+// @ts-ignore
+import { render } from './entry.server';
+
+// @ts-ignore
 import { getAssetFromKV } from '@cloudflare/kv-asset-handler';
-import symbols from '../server/build/q-symbols.json';
+
+// @ts-ignore
+import symbols from '../server/q-symbols.json';
 
 const CACHING = true;
 
@@ -30,14 +37,14 @@ async function handleQwik(event: any, request: Request) {
     }
   }
 
-  const ssrResult = await renderApp({
+  const ssrResult = await render({
     url: new URL(request.url),
     symbols,
   });
 
   const response = new Response(ssrResult.html, {
     headers: {
-      'Content-Type': 'text/html',
+      'Content-Type': 'text/html; charset=utf-8',
       'Cache-Control': `max-age=${60}`,
     },
   });

package/starters/servers/cloudflare/wrangler.toml

@@ -14,5 +14,5 @@ command = "npm run build"
 format = "service-worker"
 
 [site]
-bucket = "public" # directory with your static assets
-entry-point = "workers-site" # JS folder serving your assets
+bucket = "dist" # directory with your static assets
+entry-point = "server" # JS folder serving your assets

package/starters/servers/express/package.json

@@ -5,6 +5,6 @@
     "serve": "node server/index.js"
   },
   "devDependencies": {
-    "express": "~4.17.1"
+    "express": "4.17.2"
   }
 }

package/starters/servers/express/server/index.js

@@ -1,15 +1,15 @@
 const express = require('express');
 const { join } = require('path');
 const { existsSync } = require('fs');
-const { renderApp } = require('./build/index.server.js');
-const symbols = require('./build/q-symbols.json');
+const { render } = require('./build/entry.js');
+const symbols = require('./q-symbols.json');
 const PORT = process.env.PORT || 8080;
 
 async function startServer() {
   async function handleQwik(req, res) {
-    const result = await renderApp({
+    const result = await render({
       symbols,
-      url: new URL(req.url),
+      url: new URL(`${req.protocol}://${req.hostname}${req.url}`),
       debug: true,
     });
     res.send(result.html);

package/starters/apps/starter/rollup.config.js

@@ -1,37 +0,0 @@
-import { nodeResolve } from '@rollup/plugin-node-resolve';
-import { qwikRollup } from '@builder.io/qwik/optimizer';
-import { writeFile, mkdir } from "fs/promises";
-import { dirname } from "path";
-
-export default async function () {
-  return {
-    input: [
-      'src/index.server.tsx',
-      'src/my-app.tsx'
-    ],
-    plugins: [
-      nodeResolve(),
-      qwikRollup({
-        symbolsOutput: (data) => {
-          outputJSON('./server/build/q-symbols.json', data);
-        },
-      })
-    ],
-    output: [
-      {
-        chunkFileNames: 'q-[hash].js',
-        dir: 'public/build',
-        format: 'es',
-      },
-      {
-        dir: 'server/build',
-        format: 'cjs',
-      },
-    ],
-  };
-}
-
-async function outputJSON(path, data) {
-  await mkdir(dirname(path), {recursive: true});
-  await writeFile(path, JSON.stringify(data, null, 2));
-}

package/starters/apps/starter/src/my-app.tsx

@@ -1,63 +0,0 @@
-import { h } from '@builder.io/qwik';
-import { qComponent, qHook, useEvent } from '@builder.io/qwik';
-
-export const MyApp = qComponent<{}, { name: string }>({
-  tagName: 'my-app', // optional
-  onMount: qHook(() => ({ name: 'World' })),
-  onRender: qHook((props, state) => {
-    return (
-      <div>
-        <p style={{ 'text-align': 'center' }}>
-          <a href="https://github.com/builderio/qwik">
-            <img
-              alt="Qwik Logo"
-              width={400}
-              src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F667ab6c2283d4c4d878fb9083aacc10f"
-            />
-          </a>
-        </p>
-        <p>Congratulations Qwik is working!</p>
-
-        <p>Next steps:</p>
-        <ol>
-          <li>
-            Open dev-tools network tab and notice that no JavaScript was downloaded to render this
-            page. (Zero JavaScript no matter the size of your app.)
-          </li>
-          <li>
-            Try interacting with this component by changing{' '}
-            <input
-              value={state.name}
-              on:keyup={qHook<typeof MyApp>((props, state) => {
-                const event = useEvent<KeyboardEvent>();
-                const input = event.target as HTMLInputElement;
-                state.name = input.value;
-              })}
-            ></input>
-            .
-          </li>
-          <li>
-            Observe that the binding changes: <code>Hello {state.name}!</code>
-          </li>
-          <li>
-            Notice that Qwik automatically lazily-loaded and hydrated the component upon interaction
-            without the developer having to code that behavior. (Lazy hydration is what gives even
-            large apps instant on behavior.)
-          </li>
-          <li>
-            Read the docs <a href="https://github.com/builderio/qwik">here</a>.
-          </li>
-          <li>Replace the content of this component with your code.</li>
-          <li>Build amazing web-sites with unbeatable startup performance.</li>
-        </ol>
-        <hr />
-        <p style={{ 'text-align': 'center' }}>
-          Made with ❤️ by{' '}
-          <a target="_blank" href="https://www.builder.io/">
-            Builder.io
-          </a>
-        </p>
-      </div>
-    );
-  }),
-});

package/starters/apps/starter-builder/rollup.config.js

@@ -1,37 +0,0 @@
-import { nodeResolve } from '@rollup/plugin-node-resolve';
-import { qwikRollup } from '@builder.io/qwik/optimizer';
-import { writeFile, mkdir } from "fs/promises";
-import { dirname } from "path";
-
-export default async function () {
-  return {
-    input: [
-      'src/index.server.tsx',
-      'src/my-app.tsx'
-    ],
-    plugins: [
-      nodeResolve(),
-      qwikRollup({
-        symbolsOutput: (data) => {
-          outputJSON('./server/build/q-symbols.json', data);
-        },
-      })
-    ],
-    output: [
-      {
-        chunkFileNames: 'q-[hash].js',
-        dir: 'public/build',
-        format: 'es',
-      },
-      {
-        dir: 'server/build',
-        format: 'cjs',
-      },
-    ],
-  };
-}
-
-async function outputJSON(path, data) {
-  await mkdir(dirname(path), {recursive: true});
-  await writeFile(path, JSON.stringify(data, null, 2));
-}

package/starters/apps/starter-builder/src/my-app.tsx

@@ -1,34 +0,0 @@
-import { h, Fragment } from '@builder.io/qwik';
-import { qComponent, qHook } from '@builder.io/qwik';
-
-export const Header = qComponent<{}, { name: string }>({
-  onRender: qHook(() => {
-    return (
-      <p style={{ 'text-align': 'center' }}>
-        <a href="https://github.com/builderio/qwik">
-          <img
-            alt="Qwik Logo"
-            width={400}
-            src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F667ab6c2283d4c4d878fb9083aacc10f"
-          />
-        </a>
-      </p>
-    );
-  }),
-});
-
-export const Footer = qComponent<{}, { name: string }>({
-  onRender: qHook(() => {
-    return (
-      <>
-        <hr />
-        <p style={{ 'text-align': 'center' }}>
-          Made with ❤️ by{' '}
-          <a target="_blank" href="https://www.builder.io/">
-            Builder.io
-          </a>
-        </p>
-      </>
-    );
-  }),
-});

package/starters/apps/starter-partytown/rollup.config.js

@@ -1,37 +0,0 @@
-import { nodeResolve } from '@rollup/plugin-node-resolve';
-import { qwikRollup } from '@builder.io/qwik/optimizer';
-import { writeFile, mkdir } from "fs/promises";
-import { dirname } from "path";
-
-export default async function () {
-  return {
-    input: [
-      'src/index.server.tsx',
-      'src/my-app.tsx'
-    ],
-    plugins: [
-      nodeResolve(),
-      qwikRollup({
-        symbolsOutput: (data) => {
-          outputJSON('./server/build/q-symbols.json', data);
-        },
-      })
-    ],
-    output: [
-      {
-        chunkFileNames: 'q-[hash].js',
-        dir: 'public/build',
-        format: 'es',
-      },
-      {
-        dir: 'server/build',
-        format: 'cjs',
-      },
-    ],
-  };
-}
-
-async function outputJSON(path, data) {
-  await mkdir(dirname(path), {recursive: true});
-  await writeFile(path, JSON.stringify(data, null, 2));
-}

package/starters/apps/todo/rollup.config.js

@@ -1,39 +0,0 @@
-import { nodeResolve } from '@rollup/plugin-node-resolve';
-import { qwikRollup } from '@builder.io/qwik/optimizer';
-import { terser } from "rollup-plugin-terser";
-import { writeFile, mkdir } from "fs/promises";
-import { dirname } from "path";
-
-export default async function () {
-  return {
-    input: [
-      'src/index.server.tsx',
-      'src/components.tsx'
-    ],
-    plugins: [
-      nodeResolve(),
-      qwikRollup({
-        symbolsOutput: (data) => {
-          outputJSON('./server/build/q-symbols.json', data);
-        },
-      }),
-      terser(),
-    ],
-    output: [
-      {
-        chunkFileNames: 'q-[hash].js',
-        dir: 'public/build',
-        format: 'es',
-      },
-      {
-        dir: 'server/build',
-        format: 'cjs',
-      },
-    ],
-  };
-}
-
-async function outputJSON(path, data) {
-  await mkdir(dirname(path), {recursive: true});
-  await writeFile(path, JSON.stringify(data, null, 2));
-}