examples: v0.3.0

kennyfrc · Nov 26, 2023 · 9fc291c · 9fc291c
1 parent 55d5d9f
commit 9fc291c
Show file tree

Hide file tree

Showing 26 changed files with 86 additions and 246 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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: '[email protected]' };
+    user = {};
 
-    constructor() {
-      super();
-      this.initialUser = { name: 'Kenn', age: 34, email: '[email protected]' };
-      this.setup({
-        observables: ['user']
-      });
+    onConnect() {
+      this.initialUser =  { name: 'Kenn', age: 34, email: '[email protected]' };
       this.user.assign(this.initialUser);
     }
 

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