npm - create-qwik - Versions diffs - 0.0.16 → 0.0.17-0-dev20220310192647 - Mend

create-qwik 0.0.16 → 0.0.17-0-dev20220310192647

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-qwik",
-  "version": "0.0.16",
+  "version": "0.0.17-0-dev20220310192647",
   "description": "Interactive CLI and API for generating Qwik projects.",
   "bin": {
     "create-qwik": "create-qwik"

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

@@ -8,9 +8,9 @@
     <script type="module">
       // Vite Dev Mode Only
       import '@builder.io/qwik/qwikloader.js';
-      import { render } from '@builder.io/qwik';
-      import { App } from '/src/main.tsx';
-      render(document.body, App);
+      import { render, jsx } from '@builder.io/qwik';
+      import { Main } from '/src/main.tsx';
+      render(document.body, jsx(Main, {}));
     </script>
   </body>
 </html>

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

@@ -3,18 +3,19 @@
   "version": "0.0.0",
   "description": "",
   "scripts": {
-    "typecheck": "npx tsc --noEmit",
+    "typecheck": "tsc --noEmit",
     "build": "npm run typecheck && npm run build.client && npm run build.server",
     "build.client": "vite build",
     "build.server": "vite build --outDir server/build --ssr src/entry.server.tsx",
-    "preview": "vite preview",
-    "dev": "vite",
+    "dev.ssr": "vite",
     "dev.client": "vite --mode clientonly",
+    "dev.debug": "node --inspect-brk node_modules/vite/bin/vite.js",
+    "dev": "npm run dev.client",
     "start": "npm run dev"
   },
   "devDependencies": {
     "@types/node": "17.0.17",
-    "@builder.io/qwik": "0.0.16",
+    "@builder.io/qwik": "0.0.17-0-dev20220310192647",
     "typescript": "4.5.5",
     "vite": "2.8.0"
   },

package/starters/apps/starter/src/entry.server.tsx CHANGED Viewed

@@ -7,7 +7,7 @@
  */
 import { renderToString, RenderToStringOptions, QwikLoader } from '@builder.io/qwik/server';
-import { App } from './main';
+import { Main } from './main';
 /**
  * Entry point for server-side pre-rendering.
@@ -22,7 +22,7 @@ export function render(opts: RenderToStringOptions) {
         <title>Qwik Blank App</title>
       </head>
       <body q:base="/">
-        <App />
+        <Main />
         <QwikLoader debug={opts.debug} />
       </body>
     </html>,

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

@@ -1,10 +1,10 @@
-import { createStore, $, component$, useEvent, Host } from '@builder.io/qwik';
+import { useStore, $, component$, useEvent, Host } from '@builder.io/qwik';
 import { Logo } from './components/logo/logo';
 import './global.css';
-export const App = component$(() => {
-  const state = createStore({ name: 'World' });
+export const Main = component$(() => {
+  const state = useStore({ name: 'World' });
   return $(() => (
     <Host class="my-app">
       <Logo />

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

@@ -7,7 +7,7 @@
  */
 import { renderToString, RenderToStringOptions, QwikLoader } from '@builder.io/qwik/server';
-import { App } from './main';
+import { Main } from './main';
 /**
  * Entry point for server-side pre-rendering.
@@ -22,7 +22,7 @@ export function render(opts: RenderToStringOptions) {
         <title>Qwik Blank App</title>
       </head>
       <body q:base="/">
-        <App />
+        <Main />
         <script>({fetchQwikBuilderContent.toString()})();</script>
         <QwikLoader debug={opts.debug} />
       </body>

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

@@ -4,7 +4,7 @@ import { Header } from './components/header/header';
 import './global.css';
-export const App = component$(() => {
+export const Main = component$(() => {
   return $(() => (
     <>
       <Header />

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

@@ -8,7 +8,7 @@
 import { renderToString, RenderToStringOptions, QwikLoader } from '@builder.io/qwik/server';
 import { partytownSnippet } from '@builder.io/partytown/integration';
-import { App } from './main';
+import { Main } from './main';
 /**
  * Entry point for server-side pre-rendering.
@@ -24,7 +24,7 @@ export function render(opts: RenderToStringOptions) {
         <script children={partytownSnippet({ debug: true })} />
       </head>
       <body q:base="/">
-        <App />
+        <Main />
         <script type="text/partytown">
           ({partyTownExampleWhichBlocksMainThreadForOneSecond.toString()})()
         </script>

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

@@ -1,11 +1,9 @@
-import { component$, $, useEvent, createStore } from '@builder.io/qwik';
+import { component$, $, useEvent, useStore } from '@builder.io/qwik';
 import './global.css';
-export const App = component$(() => {
-  const state = createStore({ name: 'World', running: true });
+export const Main = component$(() => {
+  const state = useStore({ name: 'World', running: true });
   return $(() => {
-    // eslint-disable-next-line no-console
-    console.log('Qwik: MyApp component is rendering...');
     return (
       <div id="my-app" on$:expensiveComputationDone={() => (state.running = false)}>
         <p style={{ 'text-align': 'center' }}>

package/starters/apps/todo/src/components/{main/main.tsx → body/body.tsx} RENAMED Viewed

@@ -1,5 +1,5 @@
 import { component$, Host, $ } from '@builder.io/qwik';
-import { getFilteredItems, Todos } from '../../state/state';
+import { FILTERS, Todos } from '../../state/state';
 import { Item } from '../item/item';
 /**
@@ -7,12 +7,12 @@ import { Item } from '../item/item';
  *
  * This component only rerenders/hydrates/downloads if the list of todos changes.
  */
-export const Main = component$((props: { todos: Todos }) => {
+export const Body = component$((props: { todos: Todos }) => {
   return $(() => {
     return (
       <Host class="main">
         <ul class="todo-list">
-          {getFilteredItems(props.todos).map((key) => (
+          {props.todos.items.filter(FILTERS[props.todos.filter]).map((key) => (
             <Item item={key} todos={props.todos} />
           ))}
         </ul>

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

@@ -1,11 +1,5 @@
 import { component$, Host, $ } from '@builder.io/qwik';
-import {
-  clearCompleted,
-  FilterStates,
-  getFilteredCount,
-  Todos,
-  updateFilter,
-} from '../../state/state';
+import { FILTERS, FilterStates, Todos } from '../../state/state';
 /**
  * Footer showing items remaining and filtering options
@@ -24,14 +18,16 @@ export const Footer = component$(
           <li>
             <a
               class={{ selected: props.todos.filter == lMode }}
-              on$:click={() => updateFilter(props.todos, filter)}
+              on$:click={() => {
+                props.todos.filter = filter;
+              }}
             >
               {filter[0].toUpperCase() + filter.substr(1)}
             </a>
           </li>
         );
       }
-      const remaining = getFilteredCount(props.todos);
+      const remaining = props.todos.items.filter(FILTERS.active).length;
       return (
         <Host class="footer">
           {props.todos.items.length > 0 ? (
@@ -46,7 +42,12 @@ export const Footer = component$(
                 ))}
               </ul>
               {remaining > 0 ? (
-                <button class="clear-completed" on$:click={() => clearCompleted(props.todos)}>
+                <button
+                  class="clear-completed"
+                  on$:click={() => {
+                    props.todos.items = props.todos.items.filter(FILTERS.active);
+                  }}
+                >
                   Clear completed
                 </button>
               ) : null}

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

@@ -1,5 +1,5 @@
-import { component$, createStore, $, useEvent } from '@builder.io/qwik';
-import { addItem, Todos } from '../../state/state';
+import { component$, useStore, $, useEvent } from '@builder.io/qwik';
+import type { Todos } from '../../state/state';
 /**
  * Header component which is responsible for providing UI to ender new todo item.
@@ -8,7 +8,7 @@ import { addItem, Todos } from '../../state/state';
  */
 export const Header = component$(
   (props: { todos: Todos }) => {
-    const state = createStore({ text: '' });
+    const state = useStore({ text: '' });
     return $(() => {
       return (
         <>
@@ -23,7 +23,10 @@ export const Header = component$(
               const inputValue = (event.target as HTMLInputElement).value;
               state.text = inputValue;
               if (event.key === 'Enter' && inputValue) {
-                addItem(props.todos, state.text);
+                props.todos.items.push({
+                  completed: false,
+                  title: state.text,
+                });
                 state.text = '';
               }
             }}

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

@@ -1,13 +1,13 @@
 import {
   component$,
-  createStore,
+  useStore,
   Host,
   notifyRender,
   $,
   useEvent,
   useHostElement,
 } from '@builder.io/qwik';
-import { removeItem, TodoItem, Todos, toggleItem } from '../../state/state';
+import type { TodoItem, Todos } from '../../state/state';
 /**
  * Individual items of the component.
@@ -16,7 +16,7 @@ import { removeItem, TodoItem, Todos, toggleItem } from '../../state/state';
  */
 export const Item = component$(
   (props: { item: TodoItem; todos: Todos }) => {
-    const state = createStore({ editing: false });
+    const state = useStore({ editing: false });
     return $(() => {
       return (
         <Host class={{ completed: props.item.completed, editing: state.editing }}>
@@ -25,7 +25,9 @@ export const Item = component$(
               class="toggle"
               type="checkbox"
               checked={props.item.completed}
-              on$:click={() => toggleItem(props.todos, props.item)}
+              on$:click={() => {
+                props.item.completed = !props.item.completed;
+              }}
             />
             <label
               on$:dblclick={async () => {
@@ -39,7 +41,13 @@ export const Item = component$(
             >
               {props.item.title}
             </label>
-            <button class="destroy" on$:click={() => removeItem(props.todos, props.item)}></button>
+            <button
+              class="destroy"
+              on$:click={() => {
+                const todoItem = props.item;
+                props.todos.items = props.todos.items.filter((i) => i != todoItem);
+              }}
+            />
           </div>
           {state.editing ? (
             <input

package/starters/apps/todo/src/entry.server.tsx CHANGED Viewed

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://github.com/BuilderIO/qwik/blob/main/LICENSE
  */
 import { renderToString, RenderToStringOptions, QwikLoader } from '@builder.io/qwik/server';
-import { App } from './main';
+import { Main } from './main';
 /**
  * Entry point for server-side pre-rendering.
@@ -21,7 +21,7 @@ export function render(opts: RenderToStringOptions) {
         <title>Qwik Demo: ToDo</title>
       </head>
       <body q:base="/">
-        <App />
+        <Main />
         <QwikLoader debug={opts.debug} />
       </body>
     </html>,

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

@@ -1,21 +1,12 @@
-import { component$, $ } from '@builder.io/qwik';
+import { component$, $, useStore } from '@builder.io/qwik';
 import { Footer } from './components/footer/footer';
 import { Header } from './components/header/header';
-import { Main } from './components/main/main';
+import { Body } from './components/body/body';
 import type { Todos } from './state/state';
 import './base.css';
 import './index.css';
-export const todos: Todos = {
-  filter: 'all',
-  items: [
-    { completed: false, title: 'Read Qwik docs' },
-    { completed: false, title: 'Build HelloWorld' },
-    { completed: false, title: 'Profit' },
-  ],
-};
 /**
  * Overall application component.
  *
@@ -23,12 +14,20 @@ export const todos: Todos = {
  * Qwik knows that it should never need to be rerendered, and its code will never
  * download to the client.
  */
-export const App = component$(() => {
+export const Main = component$(() => {
+  const todos = useStore<Todos>({
+    filter: 'all',
+    items: [
+      { completed: false, title: 'Read Qwik docs' },
+      { completed: false, title: 'Build HelloWorld' },
+      { completed: false, title: 'Profit' },
+    ],
+  });
   return $(() => {
     return (
       <section class="todoapp">
         <Header todos={todos} />
-        <Main todos={todos} />
+        <Body todos={todos} />
         <Footer todos={todos} />
       </section>
     );

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

@@ -12,51 +12,12 @@ export interface Todos {
   items: TodoItem[];
 }
-////////////////////////////////////////////////////////////////////////
-// Todo Application State Mutation Functions
-////////////////////////////////////////////////////////////////////////
-export function addItem(todos: Todos, text: string) {
-  todos.items.push({ completed: false, title: text });
-  updateFilter(todos);
-}
-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;
-  updateFilter(todos);
-}
-export function clearCompleted(todos: Todos) {
-  todos.items = todos.items.filter(FILTERS.active);
-  updateFilter(todos);
-}
-////////////////////////////////////////////////////////////////////////
-// Todo Application State Filter Functions
-////////////////////////////////////////////////////////////////////////
 export type FilterStates = 'all' | 'active' | 'completed';
 export const FilterStates: FilterStates[] = ['all', 'active', 'completed'];
 export const FILTERS = {
   all: () => true,
   active: (i: TodoItem) => i.completed == false,
   completed: (i: TodoItem) => i.completed == true,
 };
-export function updateFilter(todos: Todos, filter?: FilterStates) {
-  if (filter) {
-    todos.filter = filter.toLowerCase() as any;
-  }
-}
-export function getFilteredItems(todos: Todos): TodoItem[] {
-  return todos.items.filter(FILTERS[todos.filter]);
-}
-export function getFilteredCount(todos: Todos) {
-  return getFilteredItems(todos).filter(FILTERS.active).length;
-}