feat: update example for object props

examples/type-restore/Object.mjs

@@ -4,7 +4,7 @@ export class ObjectText extends WebComponent {
   static properties = ["object"];
   onInit() {
     this.props.object = {
-        hello: 'world',
+        hello: 'worldzz',
         age: 2
     };
   }
@@ -12,7 +12,37 @@ export class ObjectText extends WebComponent {
     console.log('>>> object', this.props.object)
   }
   get template() {
-    return `<textarea>${JSON.stringify(this.props.object)}</textarea>`;
+    const greeting = document.createElement('textarea')
+    greeting.innerHTML = this.props.object.hello;
+    greeting.setAttribute('id', 'greeting-field');
+    const greetingLabel = document.createElement('label');
+    greetingLabel.setAttribute('for', 'greeting-field');
+    greetingLabel.textContent = 'Hello';
+    greeting.onkeyup = () => {
+      this.props.object = {
+        ...this.props.object,
+        hello: greeting.value
+      };
+    }
+    const ageField = document.createElement('input');
+    ageField.value = this.props.object.age;
+    ageField.setAttribute('id', 'age-field');
+    const ageLabel = document.createElement('label')
+    ageLabel.setAttribute('for', 'age-field');
+    ageLabel.textContent = 'Age'
+    ageField.onkeyup = () => {
+      this.props.object = {
+        ...this.props.object,
+        age: ageField.value
+      }
+    }
+    const form = document.createElement('form');
+    form.append(greetingLabel, greeting, ageLabel, ageField)
+    return form;
+  }
+
+  render() {
+    if (this.children.length === 0) this.replaceChildren(this.template);
   }
 }
 

examples/type-restore/index.html

@@ -22,10 +22,21 @@
       Toggle: <my-toggle></my-toggle>
     </div>
     <div>
-      String: <my-hello-world />
+      String: <my-hello-world></my-hello-world>
     </div>
     <div>
-      Object: <my-object />
+      <my-object></my-object>
+      <p id="display-panel"></p>
     </div>
+    <script type="module">
+      import { attachEffect } from "../../src/index.js";
+      const myObjectEl = document.querySelector('my-object');
+      const objectProp = myObjectEl.props.object;
+      const displayPanelEl = document.querySelector('#display-panel');
+      displayPanelEl.textContent = JSON.stringify(objectProp);
+      attachEffect(objectProp, (object) => {
+        displayPanelEl.textContent = JSON.stringify(object);
+      });
+    </script>
   </body>
 </html>