npm - create-qwik - Versions diffs - 0.0.18-7 → 0.0.18-dev20220422050522 - Mend

create-qwik 0.0.18-7 → 0.0.18-dev20220422050522

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 (21) hide show

package/README.md +1 -1
package/create-qwik +1 -0
package/index.js +1 -0
package/package.json +1 -1
package/starters/apps/base/README.md +1 -1
package/starters/apps/base/index.html +1 -1
package/starters/apps/base/package.json +1 -1
package/starters/apps/starter/src/components/logo/logo.tsx +3 -3
package/starters/apps/starter/src/main.tsx +4 -5
package/starters/apps/starter-builder/src/components/footer/footer.tsx +3 -3
package/starters/apps/starter-builder/src/components/header/header.tsx +3 -3
package/starters/apps/starter-builder/src/main.tsx +3 -3
package/starters/apps/starter-partytown/src/main.tsx +82 -85
package/starters/apps/todo/src/components/body/body.tsx +14 -18
package/starters/apps/todo/src/components/footer/footer.tsx +45 -47
package/starters/apps/todo/src/components/header/header.tsx +23 -26
package/starters/apps/todo/src/components/item/item.tsx +60 -59
package/starters/apps/todo/src/main.tsx +8 -10
package/starters/features/eslint/.eslintignore +0 -1
package/starters/features/prettier/.prettierignore +0 -1
package/starters/servers/cloudflare/.node-version +1 -0

package/README.md CHANGED Viewed

@@ -41,7 +41,7 @@ console.log(result);
 ## Community
 - Ping us at [@QwikDev](https://twitter.com/QwikDev)
-- Join our [Discord](https://discord.gg/Fd9Cwb3Z8D) community.
+- Join our [Discord](https://discord.gg/bNVSQmPzqy) community.
 - Join our [weekly office hours](https://calendar.google.com/calendar/u/0?cid=Y180ZG91YjR2NTZ1cW43YmgzbW1oZGJ2M3R2c0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t)
 ## Related

package/create-qwik CHANGED Viewed

@@ -1,6 +1,7 @@
 #! /usr/bin/env node
 /**
  * @license
+ * create-qwik
  * Copyright Builder.io, Inc. All Rights Reserved.
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/BuilderIO/qwik/blob/main/LICENSE

package/index.js CHANGED Viewed

@@ -1,5 +1,6 @@
 /**
  * @license
+ * create-qwik
  * Copyright Builder.io, Inc. All Rights Reserved.
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/BuilderIO/qwik/blob/main/LICENSE

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-qwik",
-  "version": "0.0.18-7",
+  "version": "0.0.18-dev20220422050522",
   "description": "Interactive CLI and API for generating Qwik projects.",
   "bin": {
     "create-qwik": "create-qwik"

package/starters/apps/base/README.md CHANGED Viewed

@@ -22,7 +22,7 @@ npm run build
 - [Qwik Github](https://github.com/BuilderIO/qwik)
 - [@QwikDev](https://twitter.com/QwikDev)
-- [Discord](https://discord.gg/JHVpZmqSs4)
+- [Discord](https://discord.gg/bNVSQmPzqy)
 - [Vite](https://vitejs.dev/)
 - [Partytown](https://partytown.builder.io/)
 - [Builder.io](https://www.builder.io/)

package/starters/apps/base/index.html CHANGED Viewed

@@ -5,11 +5,11 @@
   <head>
     <meta charset="utf-8" />
     <title>Qwik Client Dev Mode</title>
+    <meta name="viewport" content="width=device-width" />
   </head>
   <body>
     <script type="module">
       // Vite Dev Mode Only
-      import '@builder.io/qwik/qwikloader.debug.js';
       import { render, jsx } from '@builder.io/qwik';
       import { Main } from '/src/main.tsx';
       render(document.body, jsx(Main, {}));

package/starters/apps/base/package.json CHANGED Viewed

@@ -15,7 +15,7 @@
   },
   "devDependencies": {
     "@types/node": "17.0.17",
-    "@builder.io/qwik": "0.0.18-7",
+    "@builder.io/qwik": "0.0.18-dev20220422050522",
     "typescript": "4.5.5",
     "vite": "2.8.6"
   },

package/starters/apps/starter/src/components/logo/logo.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
-import { $, component$, Host } from '@builder.io/qwik';
+import { component$, Host } from '@builder.io/qwik';
 export const Logo = component$(() => {
-  return $(() => (
+  return (
     <Host style={{ 'text-align': 'center' }}>
       <a href="https://github.com/builderio/qwik">
         <img
@@ -11,5 +11,5 @@ export const Logo = component$(() => {
         />
       </a>
     </Host>
-  ));
+  );
 });

package/starters/apps/starter/src/main.tsx CHANGED Viewed

@@ -1,11 +1,11 @@
-import { useStore, $, component$, useEvent, Host } from '@builder.io/qwik';
+import { useStore, component$, Host } from '@builder.io/qwik';
 import { Logo } from './components/logo/logo';
 import './global.css';
 export const Main = component$(() => {
   const state = useStore({ name: 'World' });
-  return $(() => (
+  return (
     <Host class="my-app p-20">
       <Logo class="mb-10" />
@@ -23,8 +23,7 @@ export const Main = component$(() => {
             value={state.name}
             class="border-2 border-solid border-blue-500"
             placeholder="Write some text"
-            onKeyup$={() => {
-              const event = useEvent<KeyboardEvent>();
+            onInput$={(event) => {
               const input = event.target as HTMLInputElement;
               state.name = input.value;
             }}
@@ -53,5 +52,5 @@ export const Main = component$(() => {
         </a>
       </p>
     </Host>
-  ));
+  );
 });

package/starters/apps/starter-builder/src/components/footer/footer.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
-import { component$, $ } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 export const Footer = component$(() => {
-  return $(() => (
+  return (
     <>
       <hr />
       <p style={{ 'text-align': 'center' }}>
@@ -11,5 +11,5 @@ export const Footer = component$(() => {
         </a>
       </p>
     </>
-  ));
+  );
 });

package/starters/apps/starter-builder/src/components/header/header.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
-import { component$, $ } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 export const Header = component$(() => {
-  return $(() => (
+  return (
     <p style={{ 'text-align': 'center' }}>
       <a href="https://github.com/builderio/qwik">
         <img
@@ -11,5 +11,5 @@ export const Header = component$(() => {
         />
       </a>
     </p>
-  ));
+  );
 });

package/starters/apps/starter-builder/src/main.tsx CHANGED Viewed

@@ -1,15 +1,15 @@
-import { component$, $ } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 import { Footer } from './components/footer/footer';
 import { Header } from './components/header/header';
 import './global.css';
 export const Main = component$(() => {
-  return $(() => (
+  return (
     <>
       <Header />
       <div id="my-content"></div>
       <Footer />
     </>
-  ));
+  );
 });

package/starters/apps/starter-partytown/src/main.tsx CHANGED Viewed

@@ -1,92 +1,89 @@
-import { component$, $, useEvent, useStore } from '@builder.io/qwik';
+import { component$, useStore } from '@builder.io/qwik';
 import './global.css';
 export const Main = component$(() => {
   const state = useStore({ name: 'World', running: true });
-  return $(() => {
-    return (
-      <div id="my-app" onDocumentExpensiveComputationDone$={() => (state.running = false)}>
-        <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 class="congrats">
-          Congratulations <a href="https://github.com/builderio/qwik">Qwik</a> with{' '}
-          <a href="https://partytown.builder.io/">Partytown</a> is working!
-        </p>
+  return (
+    <div id="my-app" onDocumentExpensiveComputationDone$={() => (state.running = false)}>
+      <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 class="congrats">
+        Congratulations <a href="https://github.com/builderio/qwik">Qwik</a> with{' '}
+        <a href="https://partytown.builder.io/">Partytown</a> is working!
+      </p>
-        <p>
-          Expensive script running in <a href="https://partytown.builder.io/">Partytown</a> is{' '}
-          {state.running ? (
-            <span style={{ 'background-color': 'red', color: 'white', padding: '.1em' }}>
-              running
-            </span>
-          ) : (
-            <span style={{ 'background-color': 'green', color: 'white', padding: '.1em' }}>
-              finished
-            </span>
-          )}
-          .
-        </p>
+      <p>
+        Expensive script running in <a href="https://partytown.builder.io/">Partytown</a> is{' '}
+        {state.running ? (
+          <span style={{ 'background-color': 'red', color: 'white', padding: '.1em' }}>
+            running
+          </span>
+        ) : (
+          <span style={{ 'background-color': 'green', color: 'white', padding: '.1em' }}>
+            finished
+          </span>
+        )}
+        .
+      </p>
-        <p>Next steps:</p>
-        <ol>
-          <li>
-            Open dev-tools network tab and notice that no JavaScript was downloaded by the main
-            thread to render this page. (<code>partytown.js</code> is used to execute things of main
-            thread and not for rendering the application.)
-          </li>
-          <li>
-            Partytown executes <code>&lt;script&gt;</code> tag that contains a simulation of
-            expensive script. The expensive script simplation keeps the web-worker thread busy for
-            2.5 seconds, leaving main-thread free for user interactions. (Without Partytown the
-            script would block the main thread resulting in poor user experience.)
-          </li>
-          <li>
-            Once the expensive operation is finished it dispatches custom event (
-            <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>
-          <li>
-            Try interacting with this component by changing{' '}
-            <input
-              value={state.name}
-              onKeyup$={() => {
-                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 resumed 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>
-    );
-  });
+      <p>Next steps:</p>
+      <ol>
+        <li>
+          Open dev-tools network tab and notice that no JavaScript was downloaded by the main thread
+          to render this page. (<code>partytown.js</code> is used to execute things of main thread
+          and not for rendering the application.)
+        </li>
+        <li>
+          Partytown executes <code>&lt;script&gt;</code> tag that contains a simulation of expensive
+          script. The expensive script simplation keeps the web-worker thread busy for 2.5 seconds,
+          leaving main-thread free for user interactions. (Without Partytown the script would block
+          the main thread resulting in poor user experience.)
+        </li>
+        <li>
+          Once the expensive operation is finished it dispatches custom event (
+          <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>
+        <li>
+          Try interacting with this component by changing{' '}
+          <input
+            value={state.name}
+            onKeyup$={(event) => {
+              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 resumed 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/todo/src/components/body/body.tsx CHANGED Viewed

@@ -1,22 +1,18 @@
-import { component$, Host, $ } from '@builder.io/qwik';
+import { component$, Host } from '@builder.io/qwik';
 import { FILTERS, Todos } from '../../state/state';
 import { Item } from '../item/item';
-/**
- * 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 Body = component$((props: { todos: Todos }) => {
-  return $(() => {
-    return (
-      <Host class="main">
-        <ul class="todo-list">
-          {props.todos.items.filter(FILTERS[props.todos.filter]).map((key) => (
-            <Item item={key} todos={props.todos} />
-          ))}
-        </ul>
-      </Host>
-    );
-  });
+interface BodyProps {
+  todos: Todos;
+}
+export const Body = component$(({ todos }: BodyProps) => {
+  return (
+    <Host class="main">
+      <ul class="todo-list">
+        {todos.items.filter(FILTERS[todos.filter]).map((key) => (
+          <Item item={key} todos={todos} />
+        ))}
+      </ul>
+    </Host>
+  );
 });

package/starters/apps/todo/src/components/footer/footer.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { component$, Host, $ } from '@builder.io/qwik';
+import { component$, Host } from '@builder.io/qwik';
 import { FILTERS, FilterStates, Todos } from '../../state/state';
 /**
@@ -8,54 +8,52 @@ import { FILTERS, FilterStates, Todos } from '../../state/state';
  */
 export const Footer = component$(
   (props: { todos: Todos }) => {
-    return $(() => {
-      /**
-       * 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 }}
-              onClick$={() => {
-                props.todos.filter = filter;
-              }}
-            >
-              {filter[0].toUpperCase() + filter.slice(1)}
-            </a>
-          </li>
-        );
-      }
-      const remaining = props.todos.items.filter(FILTERS.active).length;
+    /**
+     * Example of lite-component (it will always be included with the parent component)
+     */
+    function Filter({ filter }: { filter: FilterStates }) {
+      const lMode = filter.toLowerCase();
       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"
-                  onClick$={() => {
-                    props.todos.items = props.todos.items.filter(FILTERS.active);
-                  }}
-                >
-                  Clear completed
-                </button>
-              ) : null}
-            </>
-          ) : null}
-        </Host>
+        <li>
+          <a
+            class={{ selected: props.todos.filter == lMode }}
+            onClick$={() => {
+              props.todos.filter = filter;
+            }}
+          >
+            {filter[0].toUpperCase() + filter.slice(1)}
+          </a>
+        </li>
       );
-    });
+    }
+    const remaining = props.todos.items.filter(FILTERS.active).length;
+    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"
+                onClick$={() => {
+                  props.todos.items = props.todos.items.filter(FILTERS.active);
+                }}
+              >
+                Clear completed
+              </button>
+            ) : null}
+          </>
+        ) : null}
+      </Host>
+    );
   },
   {
     tagName: 'footer',

package/starters/apps/todo/src/components/header/header.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { component$, useStore, $, useEvent } from '@builder.io/qwik';
+import { component$, useStore } from '@builder.io/qwik';
 import type { Todos } from '../../state/state';
 /**
@@ -9,31 +9,28 @@ import type { Todos } from '../../state/state';
 export const Header = component$(
   (props: { todos: Todos }) => {
     const state = useStore({ text: '' });
-    return $(() => {
-      return (
-        <>
-          <h1>todos</h1>
-          <input
-            class="new-todo"
-            placeholder="What needs to be done?"
-            autoFocus
-            value={state.text}
-            onKeyup$={() => {
-              const event = useEvent<KeyboardEvent>();
-              const inputValue = (event.target as HTMLInputElement).value;
-              state.text = inputValue;
-              if (event.key === 'Enter' && inputValue) {
-                props.todos.items.push({
-                  completed: false,
-                  title: state.text,
-                });
-                state.text = '';
-              }
-            }}
-          />
-        </>
-      );
-    });
+    return (
+      <>
+        <h1>todos</h1>
+        <input
+          class="new-todo"
+          placeholder="What needs to be done?"
+          autoFocus
+          value={state.text}
+          onKeyup$={(event: any) => {
+            const inputValue = (event.target as HTMLInputElement).value;
+            state.text = inputValue;
+            if (event.key === 'Enter' && inputValue) {
+              props.todos.items.push({
+                completed: false,
+                title: state.text,
+              });
+              state.text = '';
+            }
+          }}
+        />
+      </>
+    );
   },
   {
     tagName: 'header',

package/starters/apps/todo/src/components/item/item.tsx CHANGED Viewed

@@ -1,12 +1,4 @@
-import {
-  component$,
-  useStore,
-  Host,
-  notifyRender,
-  $,
-  useEvent,
-  useHostElement,
-} from '@builder.io/qwik';
+import { component$, useStore, Host, useRef, useEffect$ } from '@builder.io/qwik';
 import type { TodoItem, Todos } from '../../state/state';
 /**
@@ -14,59 +6,68 @@ import type { TodoItem, Todos } from '../../state/state';
  *
  * It only rerenders if the user infarcts with it or if the item itself changes.
  */
+export interface ItemProps {
+  item: TodoItem;
+  todos: Todos;
+}
 export const Item = component$(
-  (props: { item: TodoItem; todos: Todos }) => {
+  (props: ItemProps) => {
     const state = useStore({ editing: false });
-    return $(() => {
-      return (
-        <Host class={{ completed: props.item.completed, editing: state.editing }}>
-          <div class="view">
-            <input
-              class="toggle"
-              type="checkbox"
-              checked={props.item.completed}
-              onClick$={() => {
-                props.item.completed = !props.item.completed;
-              }}
-            />
-            <label
-              onDblclick$={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"
-              onClick$={() => {
-                const todoItem = props.item;
-                props.todos.items = props.todos.items.filter((i) => i != todoItem);
-              }}
-            />
-          </div>
-          {state.editing ? (
-            <input
-              class="edit"
-              value={props.item.title}
-              onBlur$={() => (state.editing = false)}
-              onKeyup$={() => {
-                const event = useEvent<KeyboardEvent>();
-                const inputValue = (event.target as HTMLInputElement).value;
-                props.item.title = inputValue;
-                if (event.key === 'Enter') {
-                  state.editing = false;
-                }
-              }}
-            />
-          ) : null}
-        </Host>
-      );
+    const editInput = useRef<HTMLInputElement>();
+    useEffect$((obs) => {
+      const { current } = obs(editInput);
+      if (current) {
+        current.focus();
+        current.selectionStart = current.selectionEnd = current.value.length;
+      }
     });
+    return (
+      <Host class={{ completed: props.item.completed, editing: state.editing }}>
+        <div class="view">
+          <input
+            class="toggle"
+            type="checkbox"
+            checked={props.item.completed}
+            onClick$={() => {
+              props.item.completed = !props.item.completed;
+            }}
+          />
+          <label
+            onDblclick$={async () => {
+              state.editing = true;
+            }}
+          >
+            {props.item.title}
+          </label>
+          <button
+            class="destroy"
+            onClick$={() => {
+              const todoItem = props.item;
+              props.todos.items = props.todos.items.filter((i) => i != todoItem);
+            }}
+          />
+        </div>
+        {state.editing ? (
+          <input
+            class="edit"
+            ref={editInput}
+            value={props.item.title}
+            onBlur$={() => (state.editing = false)}
+            onKeyup$={(event: any) => {
+              const inputValue = (event.target as HTMLInputElement).value;
+              props.item.title = inputValue;
+              if (event.key === 'Enter') {
+                state.editing = false;
+              }
+            }}
+          />
+        ) : null}
+      </Host>
+    );
   },
   {
     tagName: 'li',

package/starters/apps/todo/src/main.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { component$, $, useStore } from '@builder.io/qwik';
+import { component$, useStore } from '@builder.io/qwik';
 import { Footer } from './components/footer/footer';
 import { Header } from './components/header/header';
 import { Body } from './components/body/body';
@@ -23,13 +23,11 @@ export const Main = component$(() => {
       { completed: false, title: 'Profit' },
     ],
   });
-  return $(() => {
-    return (
-      <section class="todoapp">
-        <Header todos={todos} />
-        <Body todos={todos} />
-        <Footer todos={todos} />
-      </section>
-    );
-  });
+  return (
+    <section class="todoapp">
+      <Header todos={todos} />
+      <Body todos={todos} />
+      <Footer todos={todos} />
+    </section>
+  );
 });

package/starters/features/eslint/.eslintignore CHANGED Viewed

@@ -17,7 +17,6 @@ node_modules
 temp
 tsc-out
 tsdoc-metadata.json
-integration/**/*.js
 target
 output
 rollup.config.js

package/starters/features/prettier/.prettierignore CHANGED Viewed

@@ -12,7 +12,6 @@ node_modules
 temp
 tsc-out
 tsdoc-metadata.json
-integration/**/*.js
 target
 output
 rollup.config.js

package/starters/servers/cloudflare/.node-version ADDED Viewed

	@@ -0,0 +1 @@
1	+ 16