From 9fc291cce8a9cda52947b955ea98b7a9217bbe3d Mon Sep 17 00:00:00 2001
From: kennyfrc <fxkennyfrc@gmail.com>
Date: Sun, 26 Nov 2023 17:12:29 +0800
Subject: [PATCH] examples: v0.3.0

---
 examples/001_counter.html                 |  7 ---
 examples/002_formval.html                 | 73 +++++++++++------------
 examples/003_todo.html                    |  7 ---
 examples/004_cart.html                    |  8 ---
 examples/005_nested1.html                 | 10 +---
 examples/006_nested2.html                 |  7 ---
 examples/007_nested3.html                 |  4 --
 examples/008_nested4.html                 |  7 ---
 examples/009_dataFromProps.html           | 10 +---
 examples/010_taskmgmt.html                |  7 ---
 examples/011_playlist.html                |  7 ---
 examples/012_blog.html                    |  7 ---
 examples/XXX_counter.html                 | 12 +---
 examples/partials/_001_counter.html       |  7 ---
 examples/partials/_002_formval.html       | 73 +++++++++++------------
 examples/partials/_003_todo.html          |  7 ---
 examples/partials/_004_cart.html          |  8 ---
 examples/partials/_005_nested1.html       | 10 +---
 examples/partials/_006_nested2.html       |  7 ---
 examples/partials/_007_nested3.html       |  4 --
 examples/partials/_008_nested4.html       |  7 ---
 examples/partials/_009_dataFromProps.html | 10 +---
 examples/partials/_010_taskmgmt.html      |  7 ---
 examples/partials/_011_playlist.html      |  7 ---
 examples/partials/_012_blog.html          |  7 ---
 examples/partials/_XXX_counter.html       | 12 +---
 26 files changed, 86 insertions(+), 246 deletions(-)

diff --git a/examples/001_counter.html b/examples/001_counter.html
index d360284a..8b5c096b 100644
--- a/examples/001_counter.html
+++ b/examples/001_counter.html
@@ -21,13 +21,6 @@ <h1>Counter</h1>
   class CounterElement extends ReactiveElement {
     count = 0
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['count']
-      })
-    }
-
     template() {
       return html`
         <button @click=${() => this.count--}>-</button>
diff --git a/examples/002_formval.html b/examples/002_formval.html
index 8c85640a..9d2c201b 100644
--- a/examples/002_formval.html
+++ b/examples/002_formval.html
@@ -21,21 +21,34 @@ <h1>Registration Form</h1>
   const { html, ReactiveElement } = cami;
 
   class FormElement extends ReactiveElement {
-    emailError = '';
-    passwordError = '';
-
-    inputStream = null;
-
+    emailError = ''
+    passwordError = ''
     email = '';
     password = '';
     emailIsValid = null;
     isEmailAvailable = null;
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['emailError', 'passwordError']
-      })
+    inputValidation$ = this.stream();
+    passwordValidation$ = this.stream();
+
+    onConnect() {
+      this.inputValidation$
+        .map(e => this.validateEmail(e.target.value))
+        .debounce(300)
+        .subscribe(({ isEmailValid, emailError, email }) => {
+          this.emailError = emailError;
+          this.isEmailValid = isEmailValid;
+          this.email = email;
+          this.isEmailAvailable = this.queryEmail(this.email)
+        });
+
+      this.passwordValidation$
+        .map(e => this.validatePassword(e.target.value))
+        .debounce(300)
+        .subscribe(({ isValid, password }) => {
+          this.passwordError = isValid ? '' : 'Password must be at least 8 characters long.';
+          this.password = password;
+        });
     }
 
     validateEmail(email) {
@@ -52,11 +65,18 @@ <h1>Registration Form</h1>
         emailError = '';
         isEmailValid = true;
       }
-      return { isEmailValid, emailError };
+      return { isEmailValid, emailError, email };
     }
 
     validatePassword(password) {
-      return password !== '' && password?.length >= 8;
+      let isValid = false;
+      if (password === '') {
+        isValid = null;
+      } else if (password?.length >= 8) {
+        isValid = true;
+      }
+
+      return { isValid, password }
     }
 
     queryEmail(email) {
@@ -96,36 +116,13 @@ <h1>Registration Form</h1>
             Email:
             <input type="email"
               aria-invalid=${this.getEmailInputState()}
-              @input=${(e) => {
-                if (!this.inputStream) {
-                  this.inputStream = this.eventStream(e)
-                  this.inputStream
-                    .map(e => this.validateEmail(e.target.value))
-                    .debounce(1000)
-                    .subscribe(({ isEmailValid, emailError }) => {
-                      this.emailError = emailError;
-                      this.isEmailValid = isEmailValid;
-                      this.email = e.target.value;
-                      this.isEmailAvailable = this.queryEmail(this.email)
-                    });
-                } else {
-                  this.inputStream.next(e);
-                }
-              }} value=${this.email}>
-            <span>${this.isEmailAvailable?.status === 'success' && this.isEmailAvailable?.data?.length > 0 && this.emailError === '' ? 'Email is already taken.' : ''}</span>
+              @input=${(e) => this.inputValidation$.next(e) } value=${this.email}>
+              <span>${this.isEmailAvailable?.status === 'success' && this.isEmailAvailable?.data?.length > 0 && this.emailError === '' ? 'Email is already taken.' : ''}</span>
             <span>${this.emailError}</span>
           </label>
           <label>
             Password:
-            <input type="password" @input=${(e) => {
-              this.eventStream(e)
-                .map(e => this.validatePassword(e.target.value))
-                .debounce(300)
-                .subscribe((isValid) => {
-                  this.passwordError = isValid ? '' : 'Password must be at least 8 characters long.';
-                  this.password = e.target.value;
-                });
-              }}
+            <input type="password" @input=${(e) => this.passwordValidation$.next(e) }
               value=${this.password}
               aria-invalid=${this.getPasswordInputState()}>
             <span>${this.passwordError}</span>
diff --git a/examples/003_todo.html b/examples/003_todo.html
index 59bae9a6..9d4edd8d 100644
--- a/examples/003_todo.html
+++ b/examples/003_todo.html
@@ -53,13 +53,6 @@ <h1>Todo List</h1>
       }
     });
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['todos']
-      })
-    }
-
     template() {
       if (this.todos.data) {
         return html`
diff --git a/examples/004_cart.html b/examples/004_cart.html
index b5e75c6e..d77c6ad3 100644
--- a/examples/004_cart.html
+++ b/examples/004_cart.html
@@ -52,10 +52,6 @@ <h2>Cart</h2>
       staleTime: 1000 * 60 * 5 // 5 minutes
     });
 
-    constructor() {
-      super();
-    }
-
     addToCart(product) {
       CartStore.add(product);
     }
@@ -99,10 +95,6 @@ <h2>Cart</h2>
   class CartElement extends ReactiveElement {
     cartItems = this.connect(CartStore, 'cartItems');
 
-    constructor() {
-      super();
-    }
-
     get cartValue() {
       return this.cartItems.reduce((acc, item) => acc + item.price, 0);
     }
diff --git a/examples/005_nested1.html b/examples/005_nested1.html
index b577882d..86a0f69d 100644
--- a/examples/005_nested1.html
+++ b/examples/005_nested1.html
@@ -18,14 +18,10 @@ <h1>Label Updates from Input Forms (Nested Observable)</h1>
   const { html, ReactiveElement } = cami;
 
   class UserFormElement extends ReactiveElement {
-    user = { name: 'Kenn', age: 34, email: 'kenn@example.com' };
+    user = {};
 
-    constructor() {
-      super();
-      this.initialUser = { name: 'Kenn', age: 34, email: 'kenn@example.com' };
-      this.setup({
-        observables: ['user']
-      });
+    onConnect() {
+      this.initialUser =  { name: 'Kenn', age: 34, email: 'kenn@example.com' };
       this.user.assign(this.initialUser);
     }
 
diff --git a/examples/006_nested2.html b/examples/006_nested2.html
index c7660944..7d1e22f1 100644
--- a/examples/006_nested2.html
+++ b/examples/006_nested2.html
@@ -33,13 +33,6 @@ <h1>User Update Page (Nested Observable)</h1>
       }
     };
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['user']
-      });
-    }
-
     changeUser() {
       const john = {
         name: 'John',
diff --git a/examples/007_nested3.html b/examples/007_nested3.html
index 2ca98f56..1519d4a1 100644
--- a/examples/007_nested3.html
+++ b/examples/007_nested3.html
@@ -71,10 +71,6 @@ <h1>User Update Page (Nested Store)</h1>
   class UserListElement extends ReactiveElement {
     users = this.connect(userStore, 'users');
 
-    constructor() {
-      super();
-    }
-
     template() {
       return html`
         <ul>
diff --git a/examples/008_nested4.html b/examples/008_nested4.html
index 31bb8eb6..fa893210 100644
--- a/examples/008_nested4.html
+++ b/examples/008_nested4.html
@@ -24,13 +24,6 @@ <h1>Team Management</h1>
     ];
     editing = { isEditing: false, memberId: null };
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['teams', 'editing'],
-      });
-    }
-
     updateTeam(teamId, updateFunc) {
       this.teams.update(teams => {
         const team = teams.find(team => team.id === teamId);
diff --git a/examples/009_dataFromProps.html b/examples/009_dataFromProps.html
index 690e9dc8..c126fd94 100644
--- a/examples/009_dataFromProps.html
+++ b/examples/009_dataFromProps.html
@@ -21,13 +21,9 @@
   class MyComponent extends ReactiveElement {
     todos = []
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['todos'],
-        attributes: {
-          todos: (v) => JSON.parse(v).data
-        }
+    onConnect() {
+      this.observableAttributes({
+        todos: (v) => JSON.parse(v).data
       });
     }
 
diff --git a/examples/010_taskmgmt.html b/examples/010_taskmgmt.html
index a2f45825..0f49c35b 100644
--- a/examples/010_taskmgmt.html
+++ b/examples/010_taskmgmt.html
@@ -21,13 +21,6 @@ <h1>Task Manager</h1>
     tasks = [];
     filter = 'all';
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['tasks', 'filter'],
-      });
-    }
-
     addTask(task) {
       this.tasks.push({ name: task, completed: false });
     }
diff --git a/examples/011_playlist.html b/examples/011_playlist.html
index d240e10d..182b3c55 100644
--- a/examples/011_playlist.html
+++ b/examples/011_playlist.html
@@ -20,13 +20,6 @@ <h1>Playlist Manager</h1>
   class PlaylistElement extends ReactiveElement {
     playlist = [];
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['playlist'],
-      })
-    }
-
     addSong(song) {
       this.playlist.push(song);
     }
diff --git a/examples/012_blog.html b/examples/012_blog.html
index 1ace7356..127d3b40 100644
--- a/examples/012_blog.html
+++ b/examples/012_blog.html
@@ -72,13 +72,6 @@ <h1>Blog</h1>
       }
     });
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['posts', 'addPost']
-      });
-    }
-
     template() {
       if (this.posts.data) {
         return html`
diff --git a/examples/XXX_counter.html b/examples/XXX_counter.html
index 4757282f..55ee5dc4 100644
--- a/examples/XXX_counter.html
+++ b/examples/XXX_counter.html
@@ -19,16 +19,8 @@ <h1>Counter</h1>
   class CounterElement extends ReactiveElement {
     count = 0;
 
-    constructor() {
-      super();
-
-      this.setup({
-        observables: ['count'],
-        computed: ['countSquared', 'countCubed', 'countQuadrupled', 'countPlusRandom', 'countSqrt'],
-        effects: [
-          () => console.log('count in define', this.count)
-        ]
-      })
+    onConnect() {
+      console.log('CounterElement connected');
     }
 
     get countSquared() {
diff --git a/examples/partials/_001_counter.html b/examples/partials/_001_counter.html
index 56fffa48..383b8e3f 100644
--- a/examples/partials/_001_counter.html
+++ b/examples/partials/_001_counter.html
@@ -12,13 +12,6 @@ <h1>Counter</h1>
   class CounterElement extends ReactiveElement {
     count = 0
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['count']
-      })
-    }
-
     template() {
       return html`
         <button @click=${() => this.count--}>-</button>
diff --git a/examples/partials/_002_formval.html b/examples/partials/_002_formval.html
index a60c40b8..a68c77bd 100644
--- a/examples/partials/_002_formval.html
+++ b/examples/partials/_002_formval.html
@@ -12,21 +12,34 @@ <h1>Registration Form</h1>
   const { html, ReactiveElement } = cami;
 
   class FormElement extends ReactiveElement {
-    emailError = '';
-    passwordError = '';
-
-    inputStream = null;
-
+    emailError = ''
+    passwordError = ''
     email = '';
     password = '';
     emailIsValid = null;
     isEmailAvailable = null;
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['emailError', 'passwordError']
-      })
+    inputValidation$ = this.stream();
+    passwordValidation$ = this.stream();
+
+    onConnect() {
+      this.inputValidation$
+        .map(e => this.validateEmail(e.target.value))
+        .debounce(300)
+        .subscribe(({ isEmailValid, emailError, email }) => {
+          this.emailError = emailError;
+          this.isEmailValid = isEmailValid;
+          this.email = email;
+          this.isEmailAvailable = this.queryEmail(this.email)
+        });
+
+      this.passwordValidation$
+        .map(e => this.validatePassword(e.target.value))
+        .debounce(300)
+        .subscribe(({ isValid, password }) => {
+          this.passwordError = isValid ? '' : 'Password must be at least 8 characters long.';
+          this.password = password;
+        });
     }
 
     validateEmail(email) {
@@ -43,11 +56,18 @@ <h1>Registration Form</h1>
         emailError = '';
         isEmailValid = true;
       }
-      return { isEmailValid, emailError };
+      return { isEmailValid, emailError, email };
     }
 
     validatePassword(password) {
-      return password !== '' && password?.length >= 8;
+      let isValid = false;
+      if (password === '') {
+        isValid = null;
+      } else if (password?.length >= 8) {
+        isValid = true;
+      }
+
+      return { isValid, password }
     }
 
     queryEmail(email) {
@@ -87,36 +107,13 @@ <h1>Registration Form</h1>
             Email:
             <input type="email"
               aria-invalid=${this.getEmailInputState()}
-              @input=${(e) => {
-                if (!this.inputStream) {
-                  this.inputStream = this.eventStream(e)
-                  this.inputStream
-                    .map(e => this.validateEmail(e.target.value))
-                    .debounce(1000)
-                    .subscribe(({ isEmailValid, emailError }) => {
-                      this.emailError = emailError;
-                      this.isEmailValid = isEmailValid;
-                      this.email = e.target.value;
-                      this.isEmailAvailable = this.queryEmail(this.email)
-                    });
-                } else {
-                  this.inputStream.next(e);
-                }
-              }} value=${this.email}>
-            <span>${this.isEmailAvailable?.status === 'success' && this.isEmailAvailable?.data?.length > 0 && this.emailError === '' ? 'Email is already taken.' : ''}</span>
+              @input=${(e) => this.inputValidation$.next(e) } value=${this.email}>
+              <span>${this.isEmailAvailable?.status === 'success' && this.isEmailAvailable?.data?.length > 0 && this.emailError === '' ? 'Email is already taken.' : ''}</span>
             <span>${this.emailError}</span>
           </label>
           <label>
             Password:
-            <input type="password" @input=${(e) => {
-              this.eventStream(e)
-                .map(e => this.validatePassword(e.target.value))
-                .debounce(300)
-                .subscribe((isValid) => {
-                  this.passwordError = isValid ? '' : 'Password must be at least 8 characters long.';
-                  this.password = e.target.value;
-                });
-              }}
+            <input type="password" @input=${(e) => this.passwordValidation$.next(e) }
               value=${this.password}
               aria-invalid=${this.getPasswordInputState()}>
             <span>${this.passwordError}</span>
diff --git a/examples/partials/_003_todo.html b/examples/partials/_003_todo.html
index 30f38296..5bfb02aa 100644
--- a/examples/partials/_003_todo.html
+++ b/examples/partials/_003_todo.html
@@ -44,13 +44,6 @@ <h1>Todo List</h1>
       }
     });
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['todos']
-      })
-    }
-
     template() {
       if (this.todos.data) {
         return html`
diff --git a/examples/partials/_004_cart.html b/examples/partials/_004_cart.html
index 10a903a8..9e0c39f9 100644
--- a/examples/partials/_004_cart.html
+++ b/examples/partials/_004_cart.html
@@ -43,10 +43,6 @@ <h2>Cart</h2>
       staleTime: 1000 * 60 * 5 // 5 minutes
     });
 
-    constructor() {
-      super();
-    }
-
     addToCart(product) {
       CartStore.add(product);
     }
@@ -90,10 +86,6 @@ <h2>Cart</h2>
   class CartElement extends ReactiveElement {
     cartItems = this.connect(CartStore, 'cartItems');
 
-    constructor() {
-      super();
-    }
-
     get cartValue() {
       return this.cartItems.reduce((acc, item) => acc + item.price, 0);
     }
diff --git a/examples/partials/_005_nested1.html b/examples/partials/_005_nested1.html
index 9c44e3fe..2a2c4b4b 100644
--- a/examples/partials/_005_nested1.html
+++ b/examples/partials/_005_nested1.html
@@ -9,14 +9,10 @@ <h1>Label Updates from Input Forms (Nested Observable)</h1>
   const { html, ReactiveElement } = cami;
 
   class UserFormElement extends ReactiveElement {
-    user = { name: 'Kenn', age: 34, email: 'kenn@example.com' };
+    user = {};
 
-    constructor() {
-      super();
-      this.initialUser = { name: 'Kenn', age: 34, email: 'kenn@example.com' };
-      this.setup({
-        observables: ['user']
-      });
+    onConnect() {
+      this.initialUser =  { name: 'Kenn', age: 34, email: 'kenn@example.com' };
       this.user.assign(this.initialUser);
     }
 
diff --git a/examples/partials/_006_nested2.html b/examples/partials/_006_nested2.html
index 64120ef4..80014b66 100644
--- a/examples/partials/_006_nested2.html
+++ b/examples/partials/_006_nested2.html
@@ -24,13 +24,6 @@ <h1>User Update Page (Nested Observable)</h1>
       }
     };
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['user']
-      });
-    }
-
     changeUser() {
       const john = {
         name: 'John',
diff --git a/examples/partials/_007_nested3.html b/examples/partials/_007_nested3.html
index c8832ab4..a8e4dc28 100644
--- a/examples/partials/_007_nested3.html
+++ b/examples/partials/_007_nested3.html
@@ -62,10 +62,6 @@ <h1>User Update Page (Nested Store)</h1>
   class UserListElement extends ReactiveElement {
     users = this.connect(userStore, 'users');
 
-    constructor() {
-      super();
-    }
-
     template() {
       return html`
         <ul>
diff --git a/examples/partials/_008_nested4.html b/examples/partials/_008_nested4.html
index 4bb2f3d1..08c03843 100644
--- a/examples/partials/_008_nested4.html
+++ b/examples/partials/_008_nested4.html
@@ -15,13 +15,6 @@ <h1>Team Management</h1>
     ];
     editing = { isEditing: false, memberId: null };
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['teams', 'editing'],
-      });
-    }
-
     updateTeam(teamId, updateFunc) {
       this.teams.update(teams => {
         const team = teams.find(team => team.id === teamId);
diff --git a/examples/partials/_009_dataFromProps.html b/examples/partials/_009_dataFromProps.html
index 9c51e3a5..62c603a6 100644
--- a/examples/partials/_009_dataFromProps.html
+++ b/examples/partials/_009_dataFromProps.html
@@ -12,13 +12,9 @@
   class MyComponent extends ReactiveElement {
     todos = []
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['todos'],
-        attributes: {
-          todos: (v) => JSON.parse(v).data
-        }
+    onConnect() {
+      this.observableAttributes({
+        todos: (v) => JSON.parse(v).data
       });
     }
 
diff --git a/examples/partials/_010_taskmgmt.html b/examples/partials/_010_taskmgmt.html
index 31af075e..40328cff 100644
--- a/examples/partials/_010_taskmgmt.html
+++ b/examples/partials/_010_taskmgmt.html
@@ -12,13 +12,6 @@ <h1>Task Manager</h1>
     tasks = [];
     filter = 'all';
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['tasks', 'filter'],
-      });
-    }
-
     addTask(task) {
       this.tasks.push({ name: task, completed: false });
     }
diff --git a/examples/partials/_011_playlist.html b/examples/partials/_011_playlist.html
index 55ad74b6..313adc2c 100644
--- a/examples/partials/_011_playlist.html
+++ b/examples/partials/_011_playlist.html
@@ -11,13 +11,6 @@ <h1>Playlist Manager</h1>
   class PlaylistElement extends ReactiveElement {
     playlist = [];
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['playlist'],
-      })
-    }
-
     addSong(song) {
       this.playlist.push(song);
     }
diff --git a/examples/partials/_012_blog.html b/examples/partials/_012_blog.html
index 907a37ed..998a1d70 100644
--- a/examples/partials/_012_blog.html
+++ b/examples/partials/_012_blog.html
@@ -63,13 +63,6 @@ <h1>Blog</h1>
       }
     });
 
-    constructor() {
-      super();
-      this.setup({
-        observables: ['posts', 'addPost']
-      });
-    }
-
     template() {
       if (this.posts.data) {
         return html`
diff --git a/examples/partials/_XXX_counter.html b/examples/partials/_XXX_counter.html
index 9ca2ce71..ad7118cb 100644
--- a/examples/partials/_XXX_counter.html
+++ b/examples/partials/_XXX_counter.html
@@ -10,16 +10,8 @@ <h1>Counter</h1>
   class CounterElement extends ReactiveElement {
     count = 0;
 
-    constructor() {
-      super();
-
-      this.setup({
-        observables: ['count'],
-        computed: ['countSquared', 'countCubed', 'countQuadrupled', 'countPlusRandom', 'countSqrt'],
-        effects: [
-          () => console.log('count in define', this.count)
-        ]
-      })
+    onConnect() {
+      console.log('CounterElement connected');
     }
 
     get countSquared() {