chore: todo add filters and cleanup

Mouvedia · Mar 18, 2021 · 1b6f02f · 1b6f02f
1 parent 96adf7e
commit 1b6f02f
Show file tree

Hide file tree

Showing 19 changed files with 79 additions and 147 deletions.
diff --git a/client/qootloader.ts b/client/qootloader.ts
@@ -57,8 +57,14 @@ interface QConfig {
         let dotIdx = pathname.lastIndexOf('.');
         let slashIdx = pathname.lastIndexOf('/');
         if (dotIdx === 0 || dotIdx < slashIdx) dotIdx = pathname.length;
-        let module = await import(pathname.substr(0, dotIdx) + '.js');
-        const handler = module[pathname.substring(dotIdx + 1) || 'default'];
+        const importPath = pathname.substr(0, dotIdx) + '.js';
+        let module = await import(importPath);
+        const exportName = pathname.substring(dotIdx + 1) || 'default';
+        const handler = module[exportName];
+        if (!handler)
+          throw new Error(
+            `QOOTLOADER-ERROR: import '${importPath}' does not export '${exportName}'.`
+          );
         handler(element, event, url);
       }
       element = element.parentElement;

diff --git a/client/render/jsx/html.d.ts b/client/render/jsx/html.d.ts
@@ -16,6 +16,7 @@ declare global {
 
   namespace JSX {
     interface IntrinsicElements {
+      a: Qoot.Element<nameStub>;
       html: Qoot.Element<nameStub>;
       head: Qoot.Element<nameStub>;
       title: Qoot.Element<nameStub>;

diff --git a/client/render/jsx/render.ts b/client/render/jsx/render.ts
@@ -88,6 +88,7 @@ function visitJSXNode(
   existingNode: Node | null,
   jsxNode: Promise<JSXNode<unknown>> | JSXNode<unknown>
 ): Node | null {
+  if (!jsxNode) return null;
   if (isPromise(jsxNode)) {
     waitOn.push(
       jsxNode.then((jsxNode) => {

diff --git a/integration/todo/data/Items/constructor.ts b/integration/todo/data/Items/constructor.ts
diff --git a/integration/todo/server_index.tsx b/integration/todo/server_index.tsx
@@ -22,7 +22,7 @@ export async function serverMain(document: Document) {
       <head>
         <title>ToDo Application</title>
         <script src="/qootloader.js" async></script>
-        <script>{"var Q={protocol:{ui:'./ui',data:'./data'}}"}</script>
+        <script>{"var Q={protocol:{ui:'./ui',data:'./data',qoot:'./qoot'}}"}</script>
         <link rel="stylesheet" href="./base.css" />
         <link rel="stylesheet" href="./index.css" />
       </head>

diff --git a/integration/todo/ui/Footer/template.tsx b/integration/todo/ui/Footer/template.tsx
@@ -9,36 +9,49 @@
 import { Items, ItemsService } from '../../data/Items/public.js';
 import { QRL, inject, jsxFactory, provideComponentProp, provideServiceState } from '../../qoot.js';
 
-/**
- * @fileoverview
- *
- */
-
-/**
- */
-// TODO: remove inject as it is not needed
 export default inject(
   null,
   provideServiceState<ItemsService>(provideComponentProp('$items')),
-  function (items: Items) {
+  function FooterTemplate(items: Items) {
     const remaining = items.items.length - items.completed;
+    let filter: string = 'all';
+    function filterClick(mode: 'All' | 'Active' | 'Completed') {
+      const lMode = mode.toLowerCase();
+      return (
+        <li>
+          <a class={{ selected: filter == lMode }}
+             on:click={QRL`qoot:.emitEvent?$name=selectFilter&filter=${lMode}`} >
+            {mode}
+          </a>
+        </li>
+      );
+    }
     return (
-      <footer class="footer" /* *ngIf="todoStore.todos.length > 0" */>
-        <span class="todo-count">
-          <strong>{remaining}</strong>
-          {remaining == 1 ? ' item' : ' items'} left
-        </span>
-        {items.completed > 0 ? (
-          <button
-            class="clear-completed"
-            $={{
-              'on:click': QRL`ui:/Footer/archive`,
-            }}
-          >
-            Clear completed
-          </button>
+      <>
+        {items.items.length > 0 ? (
+          <footer class="footer">
+            <span class="todo-count">
+              <strong>{remaining}</strong>
+              {remaining == 1 ? ' item' : ' items'} left
+            </span>
+            <ul class="filters">
+              {filterClick('All')}
+              {filterClick('Active')}
+              {filterClick('Completed')}
+            </ul>
+            {items.completed > 0 ? (
+              <button
+                class="clear-completed"
+                $={{
+                  'on:click': QRL`ui:/Footer/archive`,
+                }}
+              >
+                Clear completed
+              </button>
+            ) : null}
+          </footer>
         ) : null}
-      </footer>
+      </>
     );
   }
 );
diff --git a/integration/todo/ui/Header/addTodo.ts b/integration/todo/ui/Header/addTodo.ts
@@ -11,13 +11,6 @@ import { ItemsService } from '../../data/Items/public.js';
 import { injectEventHandler, provideQrlExp, provideService } from '../../qoot.js';
 import { HeaderComponent } from './component.js';
 
-/**
- * @fileoverview
- *
- */
-
-/**
- */
 export default injectEventHandler(
   HeaderComponent,
   provideQrlExp<string>('value'),

diff --git a/integration/todo/ui/Header/component.ts b/integration/todo/ui/Header/component.ts
@@ -9,12 +9,6 @@
 import { Component } from '../../qoot.js';
 import { HeaderProps } from '../Header/public.js';
 
-/**
- * @fileoverview
- *
- * Declares the `GreeterComponent` `onKeyup` handler.
- */
-
 interface HeaderState {
   text: string;
 }

diff --git a/integration/todo/ui/Header/public.ts b/integration/todo/ui/Header/public.ts
@@ -8,11 +8,6 @@
 
 import { jsxDeclareComponent, QRL } from '../../qoot.js';
 
-/**
- * @fileoverview
- *
- */
-
 export interface HeaderProps {}
 
 export const Header = jsxDeclareComponent<HeaderProps>('app-header', QRL`ui:/Header/template`);
diff --git a/integration/todo/ui/Item/public.ts b/integration/todo/ui/Item/public.ts
@@ -8,11 +8,6 @@
 
 import { jsxDeclareComponent, QRL } from '../../qoot.js';
 
-/**
- * @fileoverview
- *
- */
-
 export interface ItemProps {
   $item: string;
 }

diff --git a/integration/todo/ui/Item/remove.ts b/integration/todo/ui/Item/remove.ts
@@ -10,13 +10,6 @@ import { provideEventProp } from '../../qoot.js';
 import { ItemsService } from '../../data/Items/public.js';
 import { injectEventHandler, provideService } from '../../qoot.js';
 
-/**
- * @fileoverview
- *
- */
-
-/**
- */
 export default injectEventHandler(
   // Providers
   null,

diff --git a/integration/todo/ui/Item/template.tsx b/integration/todo/ui/Item/template.tsx
@@ -9,41 +9,32 @@
 import { Item, ItemService } from '../../data/Item/public.js';
 import { inject, jsxFactory, provideComponentProp, provideServiceState, QRL } from '../../qoot.js';
 
-/**
- * @fileoverview
- *
- */
-
-/**
- */
 export default inject(
   null,
   provideServiceState<ItemService>(provideComponentProp('$item')),
   provideComponentProp('$item'),
   function (todo: Item, itemKey: string) {
+    const editing = false;
     return (
-      <li class={{ completed: todo.completed, editing: false /*this.editing*/ }}>
+      <li class={{ completed: todo.completed, editing: editing }}>
         <div class="view">
           <input
             class="toggle"
-            type="checkbox" /* (click)="toggleCompletion(todo)" [checked]="todo.completed" */
+            type="checkbox"
             checked={todo.completed}
             on:click={QRL`ui:/Item/toggle?toggleState=.target.checked`}
           />
           <label /* (dblclick)="editTodo(todo)" */>{todo.title}</label>
-          <button class="destroy" 
-                  $={{
-                    'on:click': QRL`ui:/Item/remove?itemKey=${itemKey}`,
-                  }}          
+          <button class="destroy" on:click={QRL`ui:/Item/remove?itemKey=${itemKey}`}
           ></button>
         </div>
-        <input
-          class="edit"
-          /* *ngIf="todo.editing" 
-                  [value]="todo.title" #editedtodo (blur)="stopEditing(todo, editedtodo.value)" 
-                  (keyup.enter)="updateEditingTodo(todo, editedtodo.value)" 
-                  (keyup.escape)="cancelEditingTodo(todo)" */
-        />
+        {editing ? 
+          <input
+            class="edit"
+                  value={todo.title}
+                  on:blur="stopEditing(todo, editedtodo.value)" 
+                  on:keyup="updateEditingTodo(todo, editedtodo.value) / cancelEditingTodo(todo)"
+          />: null}
       </li>
     );
   }

diff --git a/integration/todo/ui/Item/toggle.ts b/integration/todo/ui/Item/toggle.ts
@@ -14,21 +14,13 @@ import {
   provideService,
 } from '../../qoot.js';
 
-/**
- * @fileoverview
- *
- */
-
-/**
- */
 export default injectEventHandler(
   // Providers
   null,
   provideQrlExp<boolean>('toggleState'),
   provideService<ItemService>(provideComponentProp('$item')),
   // Handler
   async function (this: null, toggleState: boolean, itemService: ItemService) {
-    console.log('Todo#toggle', toggleState);
     await itemService.toggle(toggleState);
   }
 );
diff --git a/integration/todo/ui/Main/public.ts b/integration/todo/ui/Main/public.ts
@@ -8,11 +8,6 @@
 
 import { jsxDeclareComponent, QRL } from '../../qoot.js';
 
-/**
- * @fileoverview
- *
- */
-
 export interface MainProps {
   $items: string;
 }

diff --git a/integration/todo/ui/Main/template.tsx b/integration/todo/ui/Main/template.tsx
@@ -10,13 +10,6 @@ import type { Items, ItemsService } from '../../data/Items/public.js';
 import { inject, jsxFactory, provideComponentProp, provideServiceState } from '../../qoot.js';
 import { Item } from '../Item/public.js';
 
-/**
- * @fileoverview
- *
- */
-
-/**
- */
 export default inject(
   null,
   provideServiceState<ItemsService>(provideComponentProp('$items')), //

diff --git a/integration/todo/ui/ToDoApp/public.ts b/integration/todo/ui/ToDoApp/public.ts
@@ -8,11 +8,6 @@
 
 import { jsxDeclareComponent, QRL } from '../../qoot.js';
 
-/**
- * @fileoverview
- *
- */
-
 export interface ToDoAppProps {}
 
 export const ToDoApp = jsxDeclareComponent<ToDoAppProps>('todo-app', QRL`ui:/ToDoApp/template`);
diff --git a/integration/todo/ui/ToDoApp/template.tsx b/integration/todo/ui/ToDoApp/template.tsx
@@ -13,13 +13,6 @@ import { Footer } from '../Footer/public.js';
 import { Header } from '../Header/public.js';
 import { Main } from '../Main/public.js';
 
-/**
- * @fileoverview
- *
- */
-
-/**
- */
 export default inject(
   // Providers
   null,

diff --git a/package.json b/package.json
@@ -19,12 +19,12 @@
   "@comment type": "Setting type to 'commonjs' is important as many of the bazel tooling assumes 'commonjs'. For code which wants ESM a second 'package.json' file needs to be created for just those files.",
   "type": "commonjs",
   "devDependencies": {
-    "@bazel/bazelisk": "^1.4.0",
-    "@bazel/buildifier": "^4.0.0",
+    "@bazel/bazelisk": "^1.7.5",
+    "@bazel/buildifier": "^4.0.1",
     "@bazel/cypress": "^3.2.0",
     "@bazel/ibazel": "^0.12.4",
-    "@bazel/rollup": "^3.2.1",
-    "@bazel/terser": "^3.2.1",
+    "@bazel/rollup": "^3.2.2",
+    "@bazel/terser": "^3.2.2",
     "@bazel/typescript": "3.2.0",
     "@types/chai": "^4.2.15",
     "@types/express": "^4.17.9",

diff --git a/yarn.lock b/yarn.lock
@@ -23,15 +23,15 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@bazel/bazelisk@^1.4.0":
-  version "1.7.3"
-  resolved "https://registry.npmjs.org/@bazel/bazelisk/-/bazelisk-1.7.3.tgz"
-  integrity sha512-A+QLZvKifKnbFawH5aaCnooPx0Ia5JS3S8SckKB034GVB3BjtUTCwjaxzxG3ARQ6Jq1vDcQwWgF2bjT9FjrdDg==
+"@bazel/bazelisk@^1.7.5":
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/@bazel/bazelisk/-/bazelisk-1.7.5.tgz#dd1a52e3d23464f72de55aa3dc4777847fa85373"
+  integrity sha512-JHwP9JhfZUSoj4sku471Bjw4uE773U2Agujnx0CdPkeRk25khy1l3VyjaPaHB+z1fmMnM6ED3M7tetQUsovUQg==
 
-"@bazel/buildifier@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@bazel/buildifier/-/buildifier-4.0.0.tgz#c99fb21295c7e2858fa176c2b950c589217ae8ac"
-  integrity sha512-e242AK+shp+5bpAc9l93pmG5YRYRfM0INV3gfbdxNeBxccx1MJUagaiwxqAV+Mw55zk92gsb99f2TAc9tt6C7w==
+"@bazel/buildifier@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@bazel/buildifier/-/buildifier-4.0.1.tgz#52cfbad5cbb86e9183a29dde2370cd465730ea0d"
+  integrity sha512-BTmtvJbeeEVrqRApI1gr5hvPgYcHLpdGJ5EXNXEWO692ztMPSj5fB/dH0xUlaW45jn6LimYx8ymqTMhj3538og==
 
 "@bazel/cypress@^3.2.0":
   version "3.2.0"
@@ -45,15 +45,15 @@
   resolved "https://registry.npmjs.org/@bazel/ibazel/-/ibazel-0.12.4.tgz"
   integrity sha512-FzOy+esB/fXVDbAmL6Ce2yCEy+PESZih8GypKhi0B8XzoZHAAn3QNnQcMNwo9PrIfp3G1989nM/JQ1b8jwEinQ==
 
-"@bazel/rollup@^3.2.1":
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/@bazel/rollup/-/rollup-3.2.1.tgz#c632d54298cf980fc0994a95349d938f8d0ee27c"
-  integrity sha512-+vPpi/pjCmQP3TlsDfmZZMDCBDCq2aHFXRxVx78t+1Vjz8ZT1JFx6J65V9YEPrCUowjBhkgrO5dk3IXeOvwXJA==
+"@bazel/rollup@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@bazel/rollup/-/rollup-3.2.2.tgz#cf20aeb533c8464b90418cfd42e72d9f6c2c6f8f"
+  integrity sha512-At1YvE6connH6EHatxDE6I8hrk/sy6DOInHHrvr6q32AHMhTKiltC9qDexD2kXwJXD1n1Ioy3y/sA9fesjL6Ng==
 
-"@bazel/terser@^3.2.1":
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/@bazel/terser/-/terser-3.2.1.tgz#0480cc6b00a7bf1d8c8763aa1eff267352768bf1"
-  integrity sha512-aV20kqoYnpEEfx2l4ipFOSb5JgRmPVAvicOQBQ6eMqD7SGRrDDNVtjhemo11/RCJiZuUYNxoCo+itLBw4kNaPg==
+"@bazel/terser@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@bazel/terser/-/terser-3.2.2.tgz#90cd14f1c9d1c1784730adab5208dafa2342260a"
+  integrity sha512-RI5XBDQN72zikhIZXFrbVsWWdJ+B4W0YcQndahm87t+nu26hXcmpNfSJuMjVmVrFCEB4G/z7CxgHINQCGjRgxg==
 
 "@bazel/[email protected]":
   version "3.2.0"