npm - create-qwik - Versions diffs - 0.0.7 → 0.0.11 - Mend

create-qwik 0.0.7 → 0.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/starters/apps/starter-builder/src/{index.server.qwik.tsx → index.server.tsx} RENAMED Viewed

@@ -6,22 +6,21 @@
  * 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 { Footer, Header } from './my-app.qwik';
+import { Footer, Header } from './my-app';
 /**
  * Entry point for server-side pre-rendering.
  *
  * @returns a promise when all of the rendering is completed.
  */
-export default function serverRender(opts: RenderToStringOptions) {
+export function renderApp(opts: RenderToStringOptions) {
   return renderToString(
     <html>
       <head>
         <title>Qwik Blank App</title>
       </head>
-      <body>
+      <body q:base="/build/">
         <Header />
         <div id="my-content"></div>
         <Footer />

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

@@ -0,0 +1,29 @@
+import { component$, onRender$ } from '@builder.io/qwik';
+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 CHANGED Viewed

@@ -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/package.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "name": "qwik-starter-partytown",
+  "name": "qwik-project-name",
   "version": "0.0.1",
   "description": "Blank starter app with Partytown",
   "scripts": {
@@ -9,7 +9,7 @@
     "serve": "echo \"server not setup\""
   },
   "devDependencies": {
-    "@builder.io/qwik": "~0.0.15",
+    "@builder.io/qwik": "0.0.16-6",
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-typescript": "^8.3.0",
     "concurrently": "^6.4.0",

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

@@ -1,25 +1,30 @@
 import { nodeResolve } from '@rollup/plugin-node-resolve';
-import { qwikRollup } from '@builder.io/qwik/optimizer';
 import typescript from '@rollup/plugin-typescript';
+import { qwikRollup } from '@builder.io/qwik/optimizer';
+import { writeFileSync, mkdirSync } from 'fs';
+import { dirname } from 'path';
 export default async function () {
   return {
     input: [
-      'src/index.server.qwik.tsx',
-      'src/my-app.qwik.tsx'
+      'src/index.server.tsx',
+      'src/my-app.tsx'
     ],
     plugins: [
       nodeResolve(),
       qwikRollup({
-        symbolsPath: 'q-symbols.json',
-      }),
+        entryStrategy: {type: 'hook' },
+        symbolsOutput: (data) => {
+          outputJSON('./server/build/q-symbols.json', data);
+        },
+      }),
       typescript(),
     ],
     output: [
       {
         chunkFileNames: 'q-[hash].js',
         dir: 'public/build',
-        format: 'es',
+        format: 'es',
       },
       {
         dir: 'server/build',
@@ -28,3 +33,8 @@ export default async function () {
     ],
   };
 }
+function outputJSON(path, data) {
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, JSON.stringify(data, null, 2));
+}

package/starters/apps/starter-partytown/src/{index.server.qwik.tsx → index.server.tsx} RENAMED Viewed

@@ -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.qwik';
+import { MyApp } from './my-app';
 /**
  * Entry point for server-side pre-rendering.
  *
  * @returns a promise when all of the rendering is completed.
  */
-export default function serverRender(opts: RenderToStringOptions) {
+export function renderApp(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>
+      <body q:base="/build/">
         <MyApp />
         <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/{my-app.qwik.tsx → my-app.tsx} RENAMED Viewed

@@ -1,21 +1,12 @@
-import { h, qEvent } from '@builder.io/qwik';
-import { qComponent, qHook, useEvent } from '@builder.io/qwik';
+import { component$, onRender$, useEvent, useStore } from '@builder.io/qwik';
-export const expensiveComputationDone = qEvent('document:expensiveComputationDone');
-export const MyApp = qComponent<{}, { name: string; running: boolean }>({
-  tagName: 'my-app', // optional
-  onMount: qHook(() => ({ name: 'World', running: true })),
-  onRender: qHook((props, state) => {
+export const MyApp = component$(() => {
+  const state = useStore({ 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 +16,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 +51,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 +59,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 +90,5 @@ export const MyApp = qComponent<{}, { name: string; running: boolean }>({
         </p>
       </div>
     );
-  }),
+  });
 });

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

@@ -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/todo/package.json CHANGED Viewed

@@ -1,20 +1,21 @@
 {
-  "name": "qwik-todo-express",
+  "name": "qwik-project-name",
   "version": "0.0.1",
   "description": "Classic Todo MVC app",
   "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\""
+    "serve": "echo 'missing server'",
+    "start": "npm run clean && concurrently -c blue,green \"rollup -c --configDev --watch\" \"wait-on public/build && npm run serve\""
   },
   "devDependencies": {
-    "@builder.io/qwik": "~0.0.15",
+    "@builder.io/qwik": "0.0.16-6",
     "@rollup/plugin-node-resolve": "^13.0.6",
     "@rollup/plugin-typescript": "^8.3.0",
     "concurrently": "^6.4.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.59.0",
+    "rollup-plugin-terser": "^7.0.2",
     "typescript": "^4.5.2",
     "wait-on": "^6.0.0"
   },

package/starters/apps/todo/public/favicon.ico ADDED Viewed

Binary file

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

@@ -1,25 +1,32 @@
 import { nodeResolve } from '@rollup/plugin-node-resolve';
-import { qwikRollup } from '@builder.io/qwik/optimizer';
 import typescript from '@rollup/plugin-typescript';
+import { qwikRollup } from '@builder.io/qwik/optimizer';
+import { terser } from 'rollup-plugin-terser';
+import { writeFileSync, mkdirSync } from 'fs';
+import { dirname } from 'path';
 export default async function () {
   return {
     input: [
-      'src/index.server.qwik.tsx',
-      'src/components.qwik.tsx'
+      'src/index.server.tsx',
+      'src/components.tsx'
     ],
     plugins: [
       nodeResolve(),
       qwikRollup({
-        symbolsPath: 'q-symbols.json',
-      }),
+        entryStrategy: {type: 'hook' },
+        symbolsOutput: (data) => {
+          outputJSON('./server/build/q-symbols.json', data);
+        },
+      }),
       typescript(),
+      terser(),
     ],
     output: [
       {
         chunkFileNames: 'q-[hash].js',
         dir: 'public/build',
-        format: 'es',
+        format: 'es',
       },
       {
         dir: 'server/build',
@@ -28,3 +35,8 @@ export default async function () {
     ],
   };
 }
+function outputJSON(path, data) {
+  mkdirSync(dirname(path), { recursive: true });
+  writeFileSync(path, JSON.stringify(data, null, 2));
+}

package/starters/apps/todo/src/components.tsx ADDED Viewed

@@ -0,0 +1,227 @@
+import {
+  Host,
+  component,
+  onRender$,
+  useStore,
+  useHostElement,
+  useEvent,
+  notifyRender,
+  $,
+} from '@builder.io/qwik';
+import {
+  addItem,
+  clearCompleted,
+  FilterStates,
+  getFilteredCount,
+  getFilteredItems,
+  removeItem,
+  TodoItem,
+  Todos,
+  toggleItem,
+  updateFilter,
+} from './state';
+/* 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 ToDoApp = component(
+  'todo',
+  $((props: { todos: Todos }) => {
+    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 = useStore({ 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 = useStore({ 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/{index.server.qwik.tsx → index.server.tsx} RENAMED Viewed

@@ -6,17 +6,16 @@
  * 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.qwik';
-import type { Todos } from './state.qwik';
+import { ToDoApp } from './components';
+import type { Todos } from './state';
 /**
  * Entry point for server-side pre-rendering.
  *
  * @returns a promise when all of the rendering is completed.
  */
-export default function serverRender(opts: RenderToStringOptions) {
+export function renderApp(opts: RenderToStringOptions) {
   const todos: Todos = {
     filter: 'all',
     items: [
@@ -30,10 +29,10 @@ export default function serverRender(opts: RenderToStringOptions) {
     <html>
       <head>
         <title>Qwik Demo: ToDo</title>
-        <link rel="stylesheet" href="base.css" />
-        <link rel="stylesheet" href="index.css" />
+        <link rel="stylesheet" href="/base.css" />
+        <link rel="stylesheet" href="/index.css" />
       </head>
-      <body>
+      <body q:base="/build/">
         <ToDoApp todos={todos} />
         <QwikLoader debug={opts.debug} />
       </body>

package/starters/apps/todo/src/{state.qwik.ts → state.ts} RENAMED Viewed

@@ -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 CHANGED Viewed

@@ -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/servers/cloudflare/package.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "name": "qwik-project-name",
+  "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",
+    "deploy": "wrangler publish",
+    "start": "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"
+  }
+}