create-qwik 0.0.8 → 0.0.12

package/starters/apps/starter-builder/src/root.css

@@ -0,0 +1,3 @@
+/**
+ * Write here your global css styles
+ */

package/starters/apps/starter-builder/src/root.tsx

@@ -0,0 +1,41 @@
+import { component$, onRender$, withStyles$ } from '@builder.io/qwik';
+import styles from './root.css';
+
+export const Root = component$(() => {
+  withStyles$(styles);
+  return onRender$(() => (
+    <>
+      <Header />
+      <div id="my-content"></div>
+      <Footer />
+    </>
+  ));
+});
+
+export const Header = component$(() => {
+  return onRender$(() => (
+    <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 = component$(() => {
+  return onRender$(() => (
+    <>
+      <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-builder/tsconfig.json

@@ -3,10 +3,10 @@
     "target": "ES2017",
     "module": "ES2020",
     "lib": ["es2020", "DOM"],
-    "jsx": "react",
-    "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@builder.io/qwik",
     "strict": true,
+    "resolveJsonModule": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
     "skipLibCheck": true,

package/starters/apps/starter-builder/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/apps/starter-partytown/index.html

@@ -0,0 +1 @@
+<script type="module" src="/src/root.tsx"></script>

package/starters/apps/starter-partytown/package.json

@@ -3,19 +3,16 @@
   "version": "0.0.1",
   "description": "Blank starter app with Partytown",
   "scripts": {
-    "build": "npm run clean && rollup -c",
-    "clean": "rimraf */build/",
-    "start": "npm run clean && concurrently -c blue,green \"rollup -c --configDev --watch\" \"wait-on public/build && npm run serve\"",
-    "serve": "echo \"server not setup\""
+    "build": "npm run build.client && npm run build.server",
+    "build.client": "vite build",
+    "build.server": "vite build --outDir server/build --ssr src/entry.server.tsx",
+    "start": "npm run dev",
+    "dev": "vite"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.16-1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "concurrently": "^6.4.0",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.59.0",
-    "typescript": "^4.5.2",
-    "wait-on": "^6.0.0"
+    "@builder.io/qwik": "0.0.16-8",
+    "typescript": "4.5.2",
+    "vite": "2.7.13"
   },
   "author": "Builder.io Team",
   "license": "MIT",

package/starters/apps/starter-partytown/src/{index.server.tsx → entry.server.tsx}

@@ -6,28 +6,27 @@
  * found in the LICENSE file at https://github.com/BuilderIO/qwik/blob/main/LICENSE
  */
 
-import { h } from '@builder.io/qwik';
 import { renderToString, RenderToStringOptions, QwikLoader } from '@builder.io/qwik/server';
-import { MyApp } from './my-app';
+import { Root } from './root';
 
 /**
  * Entry point for server-side pre-rendering.
  *
  * @returns a promise when all of the rendering is completed.
  */
-export function renderApp(opts: RenderToStringOptions) {
+export function render(opts: RenderToStringOptions) {
   return renderToString(
     <html>
       <head>
         <title>Qwik + Partytown Blank App</title>
-        <script defer async src="~partytown/debug/partytown.js"></script>
+        <script defer async src="/~partytown/debug/partytown.js"></script>
       </head>
       <body q:base="/build/">
-        <MyApp />
+        <Root />
         <script type="text/partytown">
           ({partyTownExampleWhichBlocksMainThreadForOneSecond.toString()})()
         </script>
-        <QwikLoader debug={opts.debug} events={['click', 'keyup', 'expensive-computation-done']} />
+        <QwikLoader debug={opts.debug} events={['click', 'keyup', 'expensiveComputationDone']} />
       </body>
     </html>,
     opts
@@ -45,5 +44,5 @@ function partyTownExampleWhichBlocksMainThreadForOneSecond() {
   }
   // eslint-disable-next-line no-console
   console.log('Expensive computation ended at:', end);
-  document.dispatchEvent(new Event('expensive-computation-done', { bubbles: true }));
+  document.dispatchEvent(new Event('expensiveComputationDone', { bubbles: true }));
 }

package/starters/apps/starter-partytown/src/root.css

@@ -0,0 +1,3 @@
+/**
+ * Write here your global css styles
+ */

package/starters/apps/starter-partytown/src/{my-app.tsx → root.tsx}

@@ -1,21 +1,15 @@
-import { h, qEvent } from '@builder.io/qwik';
-import { qComponent, qHook, useEvent } from '@builder.io/qwik';
+import { component$, onRender$, useEvent, createStore, withStyles$ } from '@builder.io/qwik';
+import styles from './root.css';
 
-export const expensiveComputationDone = qEvent('document:expensiveComputationDone');
+export const Root = component$(() => {
+  withStyles$(styles);
 
-export const MyApp = qComponent<{}, { name: string; running: boolean }>({
-  tagName: 'my-app', // optional
-  onMount: qHook(() => ({ name: 'World', running: true })),
-  onRender: qHook((props, state) => {
+  const state = createStore({ name: 'World', running: true });
+  return onRender$(() => {
     // eslint-disable-next-line no-console
     console.log('Qwik: MyApp component is rendering...');
     return (
-      <div
-        id="my-app"
-        {...expensiveComputationDone(
-          qHook<typeof MyApp>((props, state) => (state.running = false))
-        )}
-      >
+      <div id="my-app" on$:expensiveComputationDone={() => (state.running = false)}>
         <p style={{ 'text-align': 'center' }}>
           <a href="https://github.com/builderio/qwik">
             <img
@@ -25,7 +19,7 @@ export const MyApp = qComponent<{}, { name: string; running: boolean }>({
             />
           </a>
         </p>
-        <p>
+        <p class="congrats">
           Congratulations <a href="https://github.com/builderio/qwik">Qwik</a> with{' '}
           <a href="https://github.com/BuilderIO/partytown">Partytown</a> is working!
         </p>
@@ -60,7 +54,7 @@ export const MyApp = qComponent<{}, { name: string; running: boolean }>({
           </li>
           <li>
             Once the expensive operation is finished it dispatches custom event (
-            <code>expensivecomputationdone</code>) that this component listens on. It is only at
+            <code>expensiveComputationDone</code>) that this component listens on. It is only at
             that time that Qwik lazy-loads the component render function and updates the UI. (See
             network tab.)
           </li>
@@ -68,11 +62,11 @@ export const MyApp = qComponent<{}, { name: string; running: boolean }>({
             Try interacting with this component by changing{' '}
             <input
               value={state.name}
-              on:keyup={qHook<typeof MyApp>((props, state) => {
+              on$:keyup={() => {
                 const event = useEvent<KeyboardEvent>();
                 const input = event.target as HTMLInputElement;
                 state.name = input.value;
-              })}
+              }}
             ></input>
             .
           </li>
@@ -99,5 +93,5 @@ export const MyApp = qComponent<{}, { name: string; running: boolean }>({
         </p>
       </div>
     );
-  }),
+  });
 });

package/starters/apps/starter-partytown/tsconfig.json

@@ -3,10 +3,10 @@
     "target": "ES2017",
     "module": "ES2020",
     "lib": ["es2020", "DOM"],
-    "jsx": "react",
-    "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@builder.io/qwik",
     "strict": true,
+    "resolveJsonModule": true,
     "moduleResolution": "node",
     "esModuleInterop": true,
     "skipLibCheck": true,

package/starters/apps/starter-partytown/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/apps/todo/index.html

@@ -0,0 +1 @@
+<script type="module" src="/src/root.tsx"></script>

package/starters/apps/todo/package.json

@@ -3,20 +3,16 @@
   "version": "0.0.1",
   "description": "Classic Todo MVC app",
   "scripts": {
-    "build": "npm run clean && rollup -c",
-    "clean": "rimraf */build/",
-    "serve": "echo 'missing server'",
-    "start": "npm run clean && concurrently -c blue,green \"rollup -c --configDev --watch\" \"wait-on public/build && npm run serve\""
+    "build": "npm run build.client && npm run build.server",
+    "build.client": "vite build",
+    "build.server": "vite build --outDir server/build --ssr src/entry.server.tsx",
+    "start": "npm run dev",
+    "dev": "vite"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.16-1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "concurrently": "^6.4.0",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.59.0",
-    "rollup-plugin-terser": "^7.0.2",
+    "@builder.io/qwik": "0.0.16-8",
     "typescript": "^4.5.2",
-    "wait-on": "^6.0.0"
+    "vite": "2.7.13"
   },
   "author": "Builder.io Team",
   "license": "MIT",

package/starters/apps/todo/src/{index.server.tsx → entry.server.tsx}

@@ -6,9 +6,8 @@
  * found in the LICENSE file at https://github.com/BuilderIO/qwik/blob/main/LICENSE
  */
 
-import { h } from '@builder.io/qwik';
 import { renderToString, RenderToStringOptions, QwikLoader } from '@builder.io/qwik/server';
-import { ToDoApp } from './components';
+import { Root } from './root';
 import type { Todos } from './state';
 
 /**
@@ -16,7 +15,7 @@ import type { Todos } from './state';
  *
  * @returns a promise when all of the rendering is completed.
  */
-export function renderApp(opts: RenderToStringOptions) {
+export function render(opts: RenderToStringOptions) {
   const todos: Todos = {
     filter: 'all',
     items: [
@@ -34,7 +33,7 @@ export function renderApp(opts: RenderToStringOptions) {
         <link rel="stylesheet" href="/index.css" />
       </head>
       <body q:base="/build/">
-        <ToDoApp todos={todos} />
+        <Root todos={todos} />
         <QwikLoader debug={opts.debug} />
       </body>
     </html>,

package/starters/apps/todo/src/root.css

@@ -0,0 +1,3 @@
+/**
+ * Write here your global css styles
+ */

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

@@ -0,0 +1,232 @@
+import {
+  Host,
+  component,
+  onRender$,
+  createStore,
+  useHostElement,
+  useEvent,
+  notifyRender,
+  $,
+  withStyles$,
+} from '@builder.io/qwik';
+import {
+  addItem,
+  clearCompleted,
+  FilterStates,
+  getFilteredCount,
+  getFilteredItems,
+  removeItem,
+  TodoItem,
+  Todos,
+  toggleItem,
+  updateFilter,
+} from './state';
+
+import styles from './root.css';
+
+/* eslint no-console: ["off"] */
+
+// TODO(misko): APIs for better debugger experience: getProps
+// TODO(misko): APIs for better debugger experience: dehydrate
+// TODO(misko): APIs to have a global way of notifying which events are being fired, so we can console out render events in the demo applications
+// TODO(misko): Place breakpoint in DOM modification and notice that too many writes are happening.
+// TODO(misko): <item> renders twice on toggle. 1) Due to state change, 2) due to <main> somehow triggering render.
+
+////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Overall application component.
+ *
+ * This component is static (meaning it will never change). Because of this
+ * Qwik knows that it should never need to be rerendered, and its code will never
+ * download to the client.
+ */
+export const Root = component(
+  'todo',
+  $((props: { todos: Todos }) => {
+    withStyles$(styles);
+    return onRender$(() => {
+      console.log('on:qRender => <ToDoApp/>');
+      return (
+        <section class="todoapp">
+          <Header todos={props.todos} />
+          <Main todos={props.todos} />
+          <Footer todos={props.todos} />
+        </section>
+      );
+    });
+  })
+);
+
+/**
+ * Header component which is responsible for providing UI to ender new todo item.
+ *
+ * This component only rerenders if the user interacts with it through the input.
+ */
+export const Header = component(
+  'header',
+  $((props: { todos: Todos }) => {
+    const state = createStore({ text: '' });
+    return onRender$(() => {
+      console.log('on:qRender => <Header/>');
+      return (
+        <>
+          <h1>todos</h1>
+          <input
+            class="new-todo"
+            placeholder="What needs to be done?"
+            autoFocus
+            value={state.text}
+            on$:keyup={() => {
+              const event = useEvent<KeyboardEvent>();
+              const inputValue = (event.target as HTMLInputElement).value;
+              state.text = inputValue;
+              if (event.key === 'Enter' && inputValue) {
+                addItem(props.todos, state.text);
+                state.text = '';
+              }
+            }}
+          />
+        </>
+      );
+    });
+  })
+);
+
+/**
+ * Main body of the application which contains the list of todo items.
+ *
+ * This component only rerenders/hydrates/downloads if the list of todos changes.
+ */
+export const Main = component(
+  'main',
+  $((props: { todos: Todos }) => {
+    return onRender$(() => {
+      console.log('on:qRender => <Main/>');
+      return (
+        <Host class="main">
+          <ul class="todo-list">
+            {getFilteredItems(props.todos).map((key) => (
+              <Item item={key} todos={props.todos} />
+            ))}
+          </ul>
+        </Host>
+      );
+    });
+  })
+);
+
+/**
+ * Individual items of the component.
+ *
+ * It only rerenders if the user infarcts with it or if the item itself changes.
+ */
+export const Item = component(
+  'li',
+  $((props: { item: TodoItem; todos: Todos }) => {
+    const state = createStore({ editing: false });
+    return onRender$(() => {
+      console.log(
+        'on:qRender => <Item item="' +
+          JSON.stringify(props.item, (key, value) => (key.startsWith('__') ? undefined : value)) +
+          '"/>'
+      );
+      return (
+        <Host class={{ completed: props.item.completed, editing: state.editing }}>
+          <div class="view">
+            <input
+              class="toggle"
+              type="checkbox"
+              checked={props.item.completed}
+              on$:click={() => toggleItem(props.todos, props.item)}
+            />
+            <label
+              on$:dblclick={async () => {
+                state.editing = true;
+                const hostElement = useHostElement()!;
+                await notifyRender(hostElement);
+                const inputEl = hostElement.querySelector('input.edit') as HTMLInputElement;
+                inputEl.focus();
+                inputEl.selectionStart = inputEl.selectionEnd = inputEl.value.length;
+              }}
+            >
+              {props.item.title}
+            </label>
+            <button class="destroy" on$:click={() => removeItem(props.todos, props.item)}></button>
+          </div>
+          {state.editing ? (
+            <input
+              class="edit"
+              value={props.item.title}
+              on$:blur={() => (state.editing = false)}
+              on$:keyup={() => {
+                const event = useEvent<KeyboardEvent>();
+                const inputValue = (event.target as HTMLInputElement).value;
+                props.item.title = inputValue;
+                if (event.key === 'Enter') {
+                  state.editing = false;
+                }
+              }}
+            />
+          ) : null}
+        </Host>
+      );
+    });
+  })
+);
+
+/**
+ * Footer showing items remaining and filtering options
+ *
+ * It only rerenders if the todos count changes or filters are reset.
+ */
+export const Footer = component(
+  'footer',
+  $((props: { todos: Todos }) => {
+    return onRender$(() => {
+      console.log('on:qRender => <Footer/>');
+      /**
+       * Example of lite-component (it will always be included with the parent component)
+       */
+      function Filter({ filter }: { filter: FilterStates }) {
+        const lMode = filter.toLowerCase();
+        return (
+          <li>
+            <a
+              class={{ selected: props.todos.filter == lMode }}
+              on$:click={() => updateFilter(props.todos, filter)}
+            >
+              {filter[0].toUpperCase() + filter.substr(1)}
+            </a>
+          </li>
+        );
+      }
+      const remaining = getFilteredCount(props.todos);
+      return (
+        <Host class="footer">
+          {props.todos.items.length > 0 ? (
+            <>
+              <span class="todo-count">
+                <strong>{remaining}</strong>
+                {remaining == 1 ? ' item' : ' items'} left
+              </span>
+              <ul class="filters">
+                {FilterStates.map((f) => (
+                  <Filter filter={f} />
+                ))}
+              </ul>
+              {remaining > 0 ? (
+                <button class="clear-completed" on$:click={() => clearCompleted(props.todos)}>
+                  Clear completed
+                </button>
+              ) : null}
+            </>
+          ) : null}
+        </Host>
+      );
+    });
+  })
+);

package/starters/apps/todo/src/state.ts

@@ -1,5 +1,3 @@
-import { qObject } from '@builder.io/qwik';
-
 ////////////////////////////////////////////////////////////////////////
 // Todo Application State Interfaces
 ////////////////////////////////////////////////////////////////////////
@@ -19,16 +17,16 @@ export interface Todos {
 ////////////////////////////////////////////////////////////////////////
 
 export function addItem(todos: Todos, text: string) {
-  todos.items.push(qObject({ completed: false, title: text }));
+  todos.items.push({ completed: false, title: text });
   updateFilter(todos);
 }
 
-export function removeItem(todos: Todos, TodoItem: TodoItem) {
-  todos.items = todos.items.filter((i) => i != TodoItem);
+export function removeItem(todos: Todos, todoItem: TodoItem) {
+  todos.items = todos.items.filter((i) => i != todoItem);
   updateFilter(todos);
 }
-export function toggleItem(todos: Todos, TodoItem: TodoItem) {
-  TodoItem.completed = !TodoItem.completed;
+export function toggleItem(todos: Todos, todoItem: TodoItem) {
+  todoItem.completed = !todoItem.completed;
   updateFilter(todos);
 }
 

package/starters/apps/todo/tsconfig.json

@@ -3,9 +3,8 @@
     "target": "ES2017",
     "module": "ES2020",
     "lib": ["es2020", "DOM"],
-    "jsx": "react",
-    "jsxFactory": "h",
-    "jsxFragmentFactory": "Fragment",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@builder.io/qwik",
     "strict": true,
     "resolveJsonModule": true,
     "moduleResolution": "node",