README.md

@@ -16,6 +16,4 @@ This toolkit is here to help provide just the functionality you need and nothing
 | [@joist/query](packages/query)           | query custom elements and assign to property.                         |
 | [@joist/styled](packages/styled)         | Apply styles to shadow dom. (Constructable stylesheets with fallback) |
 
-NOTE: This branch contains the next available version (2.0.0) and is available under the "canary" tag. The API is solidfying and should be stable shortly.
-
-[Try it out with Vite and Stackblitz!](https://stackblitz.com/edit/joist-starter-app-vite)
+[Try it out with Vite and Stackblitz!](https://stackblitz.com/github/joist-framework/starter-app-vite?file=index.html)

integration/own/index.html

@@ -48,6 +48,46 @@
         position: relative;
         box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
       }
+
+      todo-form:not(:defined) {
+        border-bottom: solid 1px rgb(243, 243, 243);
+        background: #fff;
+        display: block;
+        height: 65px;
+      }
+
+      todo-list:not(:defined) {
+        border-bottom: solid 1px rgb(243, 243, 243);
+        background: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        padding: 2rem 0;
+      }
+
+      #loader {
+        content: '';
+        box-sizing: border-box;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        border-top: 2px solid #07d;
+        border-right: 2px solid transparent;
+        animation: spinner 0.6s linear infinite;
+      }
+
+      todo-list-footer:not(:defined) {
+        background: #fff;
+        display: block;
+        height: 50px;
+      }
+
+      @keyframes spinner {
+        to {
+          transform: rotate(360deg);
+        }
+      }
     </style>
 
     <header>
@@ -57,7 +97,9 @@ <h1>todos</h1>
     <local-storage-ctx>
       <todo-form></todo-form>
 
-      <todo-list></todo-list>
+      <todo-list>
+        <div id="loader" slot="loading"></div>
+      </todo-list>
 
       <todo-list-footer></todo-list-footer>
 

integration/own/src/services/storage.service.ts

@@ -1,16 +1,21 @@
 import { service } from '@joist/di';
 
+export interface Storage {
+  loadJSON<T>(key: string): Promise<T | undefined>;
+  saveJSON<T>(key: string, val: T): Promise<boolean>;
+}
+
 @service
-export class AppStorage {
+export class AppStorage implements Storage {
   data: Record<string, any> = {};
 
-  loadJSON<T>(key: string): T | undefined {
-    return this.data[key];
+  loadJSON<T>(key: string): Promise<T | undefined> {
+    return Promise.resolve(this.data[key] as T);
   }
 
-  saveJSON<T extends object>(key: string, val: T): boolean {
+  saveJSON<T>(key: string, val: T): Promise<boolean> {
     this.data[key] = val;
 
-    return true;
+    return Promise.resolve(true);
   }
 }

integration/own/src/services/todo.service.ts

@@ -7,23 +7,16 @@ export const enum TodoStatus {
   Complete = 'complete',
 }
 
-const todoSecret = Symbol();
-
 export class Todo {
   static create(name: string, status: TodoStatus) {
-    return new Todo(crypto.randomUUID(), name, status, todoSecret);
+    return new Todo('todo--' + crypto.randomUUID(), name, status);
   }
 
   constructor(
     public readonly id: string,
     public readonly name: string,
-    public readonly status: TodoStatus,
-    secret: Symbol
-  ) {
-    if (secret !== todoSecret) {
-      throw new Error('use Todo.create');
-    }
-  }
+    public readonly status: TodoStatus
+  ) {}
 }
 
 export class TodoUpdatedEvent extends Event {
@@ -48,50 +41,69 @@ export class TodoRemovedEvent extends Event {
 export class TodoService extends EventTarget {
   static inject = [AppStorage];
 
-  todos: Todo[] = [];
-
-  private store: AppStorage;
+  private todos: Todo[] = [];
+  private store = this.getStore();
+  private initialized = false;
 
-  constructor(store: Injected<AppStorage>) {
+  constructor(private getStore: Injected<AppStorage>) {
     super();
+  }
 
-    this.store = store();
+  getTodos(): Promise<Todo[]> {
+    if (this.initialized) {
+      return Promise.resolve(this.todos);
+    }
 
-    const stored = this.store.loadJSON<Todo[]>('joist_todo');
+    return this.store.loadJSON<Todo[]>('joist_todo').then((todos) => {
+      this.initialized = true;
 
-    if (stored) {
-      this.todos = stored;
-    }
+      if (todos) {
+        this.todos = todos;
+      }
+
+      return this.todos;
+    });
   }
 
-  addTodo(todo: Todo) {
+  async addTodo(todo: Todo) {
     this.todos.push(todo);
 
+    await this.sync();
+
     this.dispatchEvent(new TodoAddedEvent(todo));
-    this.sync();
   }
 
-  removeTodo(id: string) {
+  async removeTodo(id: string) {
     this.todos = this.todos.filter((todo) => todo.id !== id);
 
+    await this.sync();
+
     this.dispatchEvent(new TodoRemovedEvent(id));
-    this.sync();
   }
 
-  updateTodo(id: string, patch: Partial<Todo>) {
+  async updateTodo(id: string, patch: Partial<Todo>) {
     for (let i = 0; i < this.todos.length; i++) {
       if (this.todos[i].id === id) {
         this.todos[i] = { ...this.todos[i], ...patch };
 
+        await this.sync();
+
         this.dispatchEvent(new TodoUpdatedEvent(this.todos[i]));
-        this.sync();
 
         break;
       }
     }
   }
 
+  listen(event: string, cb: EventListener) {
+    this.addEventListener(event, cb);
+
+    return () => {
+      this.removeEventListener(event, cb);
+    };
+  }
+
   private sync() {
-    this.store.saveJSON('joist_todo', this.todos);
+    return this.store.saveJSON('joist_todo', this.todos);
   }
 }

integration/own/src/storage.ctx.ts

@@ -1,28 +1,28 @@
 import { injectable } from '@joist/di';
 
-import { AppStorage } from './services/storage.service';
+import { AppStorage, Storage } from './services/storage.service';
 import { TodoService } from './services/todo.service';
 
-class AppLocalStorage extends AppStorage {
-  loadJSON<T>(key: string): T | undefined {
+class AppLocalStorage implements Storage {
+  loadJSON<T>(key: string): Promise<T | undefined> {
     try {
       const res = localStorage.getItem(key);
 
       if (res) {
-        return JSON.parse(res);
+        return Promise.resolve(JSON.parse(res));
       }
     } catch {}
 
-    return undefined;
+    return Promise.resolve(undefined);
   }
 
-  saveJSON<T extends object>(key: string, val: T): boolean {
+  saveJSON<T>(key: string, val: T): Promise<boolean> {
     try {
       localStorage.setItem(key, JSON.stringify(val));
 
-      return true;
+      return Promise.resolve(true);
     } catch {
-      return false;
+      return Promise.resolve(false);
     }
   }
 }

integration/own/src/todo-card.element.ts

@@ -2,7 +2,7 @@ import { styled, css } from '@joist/styled';
 import { attr, UpgradableElement, observable, observe, OnPropertyChanged } from '@joist/observable';
 import { query } from '@joist/query';
 
-import { TodoStatus } from './services/todo.service';
+import { Todo, TodoStatus } from './services/todo.service';
 
 const template = document.createElement('template');
 template.innerHTML = /*html*/ `
@@ -18,6 +18,15 @@ template.innerHTML = /*html*/ `
 @styled
 @observable
 export class TodoCardElement extends UpgradableElement implements OnPropertyChanged {
+  static create(todo: Todo) {
+    const card = new TodoCardElement();
+    card.id = todo.id;
+    card.status = todo.status;
+    card.innerHTML = todo.name;
+
+    return card;
+  }
+
   static styles = [
     css`
       :host {

integration/own/src/todo-form.element.ts

@@ -66,27 +66,23 @@ export class TodoFormElement extends UpgradableElement {
 
   @query('#input') input!: HTMLInputElement;
 
-  constructor(private todo: Injected<TodoService>) {
+  constructor(private getTodo: Injected<TodoService>) {
     super();
 
-    const root = this.attachShadow({ mode: 'open' });
+    const shadow = this.attachShadow({ mode: 'open' });
 
-    root.appendChild(template.content.cloneNode(true));
+    shadow.appendChild(template.content.cloneNode(true));
 
-    root.addEventListener('submit', (e) => {
-      this.onSubmit(e);
-    });
+    shadow.addEventListener('submit', this.#onSubmit.bind(this));
   }
 
-  private onSubmit(e: Event) {
-    const service = this.todo();
+  #onSubmit(e: Event) {
+    const service = this.getTodo();
 
     e.preventDefault();
 
-    const todo = this.input.value;
-
-    if (todo.length) {
-      service.addTodo(Todo.create(todo, TodoStatus.Active));
+    if (this.input.value) {
+      service.addTodo(Todo.create(this.input.value, TodoStatus.Active));
 
       this.input.value = '';
     }