create-qwik 0.0.16 → 0.0.17-0-dev20220303165846

package/package.json

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

package/starters/apps/base/package.json

@@ -3,7 +3,7 @@
   "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",
@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@types/node": "17.0.17",
-    "@builder.io/qwik": "0.0.16",
+    "@builder.io/qwik": "0.0.17-0-dev20220303165846",
     "typescript": "4.5.5",
     "vite": "2.8.0"
   },

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

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

@@ -1,5 +1,5 @@
 import { component$, createStore, $, useEvent } from '@builder.io/qwik';
-import { addItem, Todos } from '../../state/state';
+import type { Todos } from '../../state/state';
 
 /**
  * Header component which is responsible for providing UI to ender new todo item.
@@ -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

@@ -7,7 +7,7 @@ import {
   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.
@@ -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/components/main/main.tsx

@@ -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';
 
 /**
@@ -12,7 +12,7 @@ export const Main = component$((props: { todos: Todos }) => {
     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/main.tsx

@@ -1,4 +1,4 @@
-import { component$, $ } from '@builder.io/qwik';
+import { component$, $, createStore } from '@builder.io/qwik';
 import { Footer } from './components/footer/footer';
 import { Header } from './components/header/header';
 import { Main } from './components/main/main';
@@ -7,15 +7,6 @@ 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.
  *
@@ -24,6 +15,14 @@ export const todos: Todos = {
  * download to the client.
  */
 export const App = component$(() => {
+  const todos = createStore<Todos>({
+    filter: 'all',
+    items: [
+      { completed: false, title: 'Read Qwik docs' },
+      { completed: false, title: 'Build HelloWorld' },
+      { completed: false, title: 'Profit' },
+    ],
+  });
   return $(() => {
     return (
       <section class="todoapp">

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

@@ -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;
-}