chore: update jsx example

Author: crashmax-dev

examples/jsx/src/App.tsx

@@ -1,10 +1,40 @@
-import { RedomComponent, mount, unmount } from 'redom'
+import { Router, RedomComponent, mount, unmount, router } from 'redom'
 import { Counter } from './Counter'
 
+class H1 implements RedomComponent {
+  public el: Router
+
+  constructor() {
+    <span this="el">hello</span>
+  }
+}
+
+class H2 implements RedomComponent {
+  public el: Router
+
+  constructor() {
+    <span this="el">world</span>
+  }
+}
+
+class Heading implements RedomComponent {
+  public el: Router
+
+  constructor() {
+    this.el = router('.heading', {
+      h1: H1,
+      h2: H2
+    }, 'h1')
+  }
+}
+
+const list = Array.from({ length: 10 }, () => Math.random())
+
 export class App implements RedomComponent {
   public el: HTMLElement
   public counter: RedomComponent
   public button: HTMLElement
+  public router: Router
 
   constructor() {
     this.render()
@@ -14,7 +44,7 @@ export class App implements RedomComponent {
     ;<div this="el">
       <Counter
         this="counter"
-        initialCounter={10}
+        initialValue={-10}
       />
       <button
         this="button"
@@ -34,12 +64,20 @@ export class App implements RedomComponent {
         veniam id consequatur, dolor recusandae minima dolore ab eius sunt quo
         totam quasi nam? Cum voluptate et id porro odit!
       </p>
+      {list.map((value) => {
+        return <p>{value}</p>
+      })}
       <a
         href="https://google.com"
         target="_blank"
       >
         This is link
       </a>
+      <Heading this="router" />
+      <button onclick={() => {
+        // @ts-ignore
+        this.router.el.update(Math.random() < .5 ? 'h1' : 'h2')
+      }}>toggle</button>
     </div>
   }
 }

examples/jsx/src/Counter.tsx

@@ -5,7 +5,7 @@ type RedomProps<T extends Record<string, any>> = {
 } & T
 
 interface Props {
-  initialCounter?: number
+  initialValue?: number
 }
 
 export class Counter implements RedomComponent {
@@ -15,8 +15,8 @@ export class Counter implements RedomComponent {
   private initialCounter: number
   private interval: ReturnType<typeof setInterval>
 
-  constructor({ initialCounter }: RedomProps<Props>) {
-    this.initialCounter = initialCounter ?? 0
+  constructor({ initialValue }: RedomProps<Props>) {
+    this.initialCounter = initialValue ?? 0
     this.counter = this.initialCounter
     this.render()
   }

package.json

@@ -55,9 +55,9 @@
     "@types/node": "^18.7.13",
     "@types/websocket": "^1.0.5",
     "@vitest/ui": "^0.22.1",
-    "tsup": "^6.2.2",
+    "tsup": "^6.2.3",
     "turbo": "^1.4.3",
-    "typescript": "^4.7.4",
+    "typescript": "^4.8.2",
     "vite": "^3.0.9",
     "vite-plugin-dts": "^1.4.1",
     "vitest": "^0.22.1"