chore(examples): refactor

Author: crashmax-dev

examples/jsx/package.json

@@ -9,11 +9,10 @@
   },
   "devDependencies": {
     "babel-plugin-transform-react-jsx": "^6.24.1",
-    "vite-redom-jsx": "^1.5.2",
+    "vite-redom-jsx": "^2.0.2",
     "vite-userscript-plugin": "workspace:*"
   },
   "dependencies": {
-    "redom": "link:../../../vite-redom-jsx/packages/redom/",
-    "redom-jsx": "^1.2.1"
+    "redom-jsx": "^3.29.1"
   }
 }

examples/jsx/src/App.tsx

@@ -1,51 +1,16 @@
-import { Router, mount, router, unmount } from 'redom'
-import type { RedomComponent, RedomEl } from 'redom'
-import { Counter } from './Counter.js'
-
-class H1 implements RedomComponent {
-  public el: RedomEl
-
-  constructor() {
-    ;<span this="el">hello</span>
-  }
-}
-
-class H2 implements RedomComponent {
-  public el: RedomEl
-
-  constructor() {
-    ;<span this="el">world</span>
-  }
-}
-
-class Heading {
-  public el: Router
-
-  constructor() {
-    this.el = router('p.heading', {
-      h1: H1,
-      h2: H2
-    })
-
-    this.el.update('h1')
-  }
-}
-
-const list = Array.from({ length: 5 }, () => Math.random())
+import { mount, unmount } from 'redom-jsx'
+import type { RedomComponent, RedomEl } from 'redom-jsx'
+import { Counter } from './Counter.jsx'
 
 export class App implements RedomComponent {
-  public el: RedomEl
-  public counter: RedomComponent
-  public button: HTMLElement
-  public router: Router
-  public toggle = true
+  el: RedomEl
 
-  constructor() {
-    this.render()
-  }
+  private counter: RedomComponent
+  private button: HTMLElement
 
-  private render(): void {
-    ;<div this="el">
+  constructor() {
+    // prettier-ignore
+    <div this="el">
       <Counter
         this="counter"
         initialValue={-10}
@@ -60,30 +25,7 @@ export class App implements RedomComponent {
           }
         }}
       >
-        mount/unmount counter
-      </button>
-      <p>
-        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum enim
-        veniam id consequatur, dolor recusandae minima dolore ab eius sunt quo
-        totam quasi nam? Cum voluptate et id porro odit!
-      </p>
-      {list.map((value) => (
-        <p>{value}</p>
-      ))}
-      <a
-        href="https://google.com"
-        target="_blank"
-      >
-        This is link
-      </a>
-      <Heading this="router" />
-      <button
-        onclick={() => {
-          this.toggle = !this.toggle
-          this.router.el.update!(this.toggle ? 'h1' : 'h2')
-        }}
-      >
-        toggle
+        Toggle
       </button>
     </div>
   }

examples/jsx/src/Counter.tsx

@@ -1,11 +1,11 @@
-import type { RedomComponent, RedomEl, RedomProps } from 'redom'
+import type { RedomComponent, RedomEl, RedomProps } from 'redom-jsx'
 
 interface Props {
   initialValue?: number
 }
 
 export class Counter implements RedomComponent {
-  public el: RedomEl
+  el: RedomEl
 
   private counter: number
   private initialCounter: number
@@ -37,6 +37,7 @@ export class Counter implements RedomComponent {
   }
 
   private render(): void {
-    ;<h1 this="el"></h1>
+    // prettier-ignore
+    <h1 this="el"></h1>
   }
 }

examples/jsx/src/Heading.tsx

@@ -0,0 +1,34 @@
+import { RedomElement, router } from 'redom-jsx'
+import type { RedomComponent, RedomEl, Router } from 'redom-jsx'
+
+class H1 implements RedomComponent {
+  el: RedomEl
+
+  constructor() {
+    // prettier-ignore
+    <h1 this="el">Lorem ipsum dolor sit amet. (h1)</h1>
+  }
+}
+
+class H2 implements RedomComponent {
+  el: RedomEl
+
+  constructor() {
+    // prettier-ignore
+    <h2 this="el">Lorem ipsum dolor sit amet. (h2)</h2>
+  }
+}
+
+export class Heading {
+  el: Router
+  toggle = true
+
+  constructor() {
+    this.el = router('span', {
+      h1: H1,
+      h2: H2
+    })
+
+    this.el.update('h1')
+  }
+}

examples/jsx/src/ListId.tsx

@@ -0,0 +1,58 @@
+import { mount } from 'redom-jsx'
+import type { RedomComponent, RedomEl, RedomElement, RedomProps } from 'redom-jsx'
+
+interface ItemsProps {
+  count: number
+}
+
+class Items implements RedomComponent {
+  el: RedomEl
+
+  private count: number
+
+  constructor({ count }: RedomProps<ItemsProps>) {
+    this.count = count
+    this.render()
+  }
+
+  update(): void {
+    this.el.innerHTML = ''
+    mount(this.el, <>{this.generateList()}</>)
+  }
+
+  private generateList(): RedomElement[] {
+    const list = Array.from({ length: this.count }, () =>
+      Math.random().toString(16).slice(2)
+    )
+
+    return list.map((value) => (
+      <>
+        <hr />
+        <p>{value}</p>
+      </>
+    ))
+  }
+
+  private render(): void {
+    <span this="el">{this.generateList()}</span>
+  }
+}
+
+export class ListId implements RedomComponent {
+  el: RedomEl
+
+  private items: Items
+
+  constructor() {
+    this.render()
+  }
+
+  private render(): void {
+    // prettier-ignore
+    <div this="el">
+      <h1 this="h1">List</h1>
+      <Items this="items" count={5} />
+      <button onclick={() => this.items.update()}>Update</button>
+    </div>
+  }
+}

examples/jsx/src/Toggle.tsx

@@ -0,0 +1,22 @@
+import { RedomComponent, RedomEl } from "redom-jsx";
+import { Heading } from "./Heading.jsx";
+
+export class Toggle implements RedomComponent {
+  el: RedomEl;
+
+  private heading: Heading
+
+  constructor() {
+    <div this="el">
+      <Heading this="heading" />
+      <button
+        onclick={() => {
+          this.heading.toggle = !this.heading.toggle
+          this.heading.el.update!(this.heading.toggle ? 'h1' : 'h2')
+        }}
+      >
+        Toggle
+      </button>
+    </div>
+  }
+}

examples/jsx/src/index.tsx

@@ -1,4 +1,8 @@
-import { mount } from 'redom'
+import { mount } from 'redom-jsx'
 import { App } from './App.js'
+import { ListId } from './ListId.jsx'
+import { Toggle } from './Toggle.jsx'
 
 mount(document.body, <App />)
+mount(document.body, <Toggle />)
+mount(document.body, <ListId />)

examples/jsx/src/vite-env.d.ts

@@ -1,2 +1 @@
 /// <reference types="vite/client" />
-/// <reference types="redom-jsx" />