chore(examples): update jsx

Author: crashmax-dev

examples/jsx/package.json

@@ -13,7 +13,7 @@
     "vite-userscript-plugin": "workspace:*"
   },
   "dependencies": {
-    "redom": "^3.29.0",
+    "redom": "link:../../../vite-redom-jsx/packages/redom/",
     "redom-jsx": "^1.2.1"
   }
 }

examples/jsx/src/App.tsx

@@ -1,40 +1,44 @@
-import { Router, RedomComponent, mount, unmount, router } from 'redom'
-import { Counter } from './Counter'
+import { Router, mount, router, unmount } from 'redom'
+import type { RedomComponent, RedomEl } from 'redom'
+import { Counter } from './Counter.js'
 
 class H1 implements RedomComponent {
-  public el: Router
+  public el: RedomEl
 
   constructor() {
-    <span this="el">hello</span>
+    ;<span this="el">hello</span>
   }
 }
 
 class H2 implements RedomComponent {
-  public el: Router
+  public el: RedomEl
 
   constructor() {
-    <span this="el">world</span>
+    ;<span this="el">world</span>
   }
 }
 
-class Heading implements RedomComponent {
+class Heading {
   public el: Router
 
   constructor() {
-    this.el = router('.heading', {
+    this.el = router('p.heading', {
       h1: H1,
       h2: H2
-    }, 'h1')
+    })
+
+    this.el.update('h1')
   }
 }
 
-const list = Array.from({ length: 10 }, () => Math.random())
+const list = Array.from({ length: 5 }, () => Math.random())
 
 export class App implements RedomComponent {
-  public el: HTMLElement
+  public el: RedomEl
   public counter: RedomComponent
   public button: HTMLElement
   public router: Router
+  public toggle = true
 
   constructor() {
     this.render()
@@ -49,7 +53,6 @@ export class App implements RedomComponent {
       <button
         this="button"
         onclick={() => {
-          // @ts-ignore
           if (this.counter.el.__redom_mounted) {
             unmount(this.el, this.counter)
           } else {
@@ -64,20 +67,24 @@ 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>
-      })}
+      {list.map((value) => (
+        <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>
+      <button
+        onclick={() => {
+          this.toggle = !this.toggle
+          this.router.el.update!(this.toggle ? 'h1' : 'h2')
+        }}
+      >
+        toggle
+      </button>
     </div>
   }
 }

examples/jsx/src/Counter.tsx

@@ -1,15 +1,11 @@
-import type { RedomComponent } from 'redom'
-
-type RedomProps<T extends Record<string, any>> = {
-  this?: string
-} & T
+import type { RedomComponent, RedomEl, RedomProps } from 'redom'
 
 interface Props {
   initialValue?: number
 }
 
 export class Counter implements RedomComponent {
-  public el: HTMLElement
+  public el: RedomEl
 
   private counter: number
   private initialCounter: number