chore: simplify vanilla samples

examples/vanilla-ts/package.json

@@ -79,6 +79,7 @@
     "@zag-js/utils": "workspace:*",
     "form-serialize": "0.7.2",
     "match-sorter": "6.3.4",
+    "nanoid": "^5.0.7",
     "typescript": "^5.4.5",
     "vite": "^5.2.11"
   }

examples/vanilla-ts/src/accordion.ts

@@ -1,32 +1,22 @@
 import * as accordion from "@zag-js/accordion"
 import { normalizeProps } from "./normalize-props"
 import { spreadProps } from "./spread-props"
+import { Component } from "./component"
 
-export class Accordion {
-  rootEl: HTMLElement
-  service: ReturnType<typeof accordion.machine>
-  api: accordion.Api<any>
-
-  constructor(rootEl: HTMLElement | null, context: accordion.Context) {
-    if (!rootEl) throw new Error("Root element not found")
-    this.rootEl = rootEl
-
-    this.service = accordion.machine(context)
-    this.api = accordion.connect(this.service.state, this.service.send, normalizeProps)
+export class Accordion extends Component<accordion.Context, accordion.Api> {
+  initService(context: accordion.Context) {
+    return accordion.machine(context)
   }
 
-  init = () => {
-    const { service } = this
-    this.render()
-    this.service.subscribe(() => {
-      this.api = accordion.connect(service.state, service.send, normalizeProps)
-      this.render()
-    })
-    this.service.start()
+  initApi() {
+    return accordion.connect(this.service.state, this.service.send, normalizeProps)
   }
 
-  destroy = () => {
-    this.service.stop()
+  render = () => {
+    spreadProps(this.rootEl, this.api.rootProps)
+    this.items.forEach((itemEl) => {
+      this.renderItem(itemEl)
+    })
   }
 
   private get items() {
@@ -36,23 +26,12 @@ export class Accordion {
   private renderItem = (itemEl: HTMLElement) => {
     const value = itemEl.dataset.value
     if (!value) throw new Error("Expected value to be defined")
-
     const itemTriggerEl = itemEl.querySelector<HTMLButtonElement>(".accordion-trigger")
     const itemContentEl = itemEl.querySelector<HTMLElement>(".accordion-content")
-
     if (!itemTriggerEl) throw new Error("Expected triggerEl to be defined")
     if (!itemContentEl) throw new Error("Expected contentEl to be defined")
-
     spreadProps(itemEl, this.api.getItemProps({ value }))
     spreadProps(itemTriggerEl, this.api.getItemTriggerProps({ value }))
     spreadProps(itemContentEl, this.api.getItemContentProps({ value }))
   }
-
-  render = () => {
-    spreadProps(this.rootEl, this.api.rootProps)
-
-    this.items.forEach((itemEl) => {
-      this.renderItem(itemEl)
-    })
-  }
 }

examples/vanilla-ts/src/avatar.ts

@@ -1,42 +1,22 @@
 import * as avatar from "@zag-js/avatar"
 import { normalizeProps } from "./normalize-props"
 import { spreadProps } from "./spread-props"
+import { Component } from "./component"
 
-export class Avatar {
-  rootEl: HTMLElement
-  service: ReturnType<typeof avatar.machine>
-  api: avatar.Api<any>
-
-  constructor(rootEl: HTMLElement | null, context: avatar.Context) {
-    if (!rootEl) throw new Error("Root element not found")
-    this.rootEl = rootEl
-
-    this.service = avatar.machine(context)
-    this.api = avatar.connect(this.service.state, this.service.send, normalizeProps)
+export class Avatar extends Component<avatar.Context, avatar.Api> {
+  initService(context: avatar.Context) {
+    return avatar.machine(context)
   }
 
-  init = () => {
-    const { service } = this
-    this.render()
-    this.service.subscribe(() => {
-      this.api = avatar.connect(service.state, service.send, normalizeProps)
-      this.render()
-    })
-
-    this.service.start()
-  }
-
-  destroy = () => {
-    this.service.stop()
+  initApi() {
+    return avatar.connect(this.service.state, this.service.send, normalizeProps)
   }
 
   render = () => {
     const rootEl = this.rootEl
     spreadProps(this.rootEl, this.api.rootProps)
-
     const imageEl = rootEl.querySelector<HTMLElement>(".avatar-image")
     if (imageEl) spreadProps(imageEl, this.api.imageProps)
-
     const fallbackEl = rootEl.querySelector<HTMLElement>(".avatar-fallback")
     if (fallbackEl) spreadProps(fallbackEl, this.api.fallbackProps)
   }

examples/vanilla-ts/src/checkbox.ts

@@ -1,45 +1,24 @@
 import * as checkbox from "@zag-js/checkbox"
 import { normalizeProps } from "./normalize-props"
 import { spreadProps } from "./spread-props"
+import { Component } from "./component"
 
-export class Checkbox {
-  rootEl: HTMLElement
-  service: ReturnType<typeof checkbox.machine>
-  api: checkbox.Api<any>
-
-  constructor(rootEl: HTMLElement | null, context: checkbox.Context) {
-    if (!rootEl) throw new Error("Root element not found")
-    this.rootEl = rootEl
-
-    this.service = checkbox.machine(context)
-    this.api = checkbox.connect(this.service.state, this.service.send, normalizeProps)
-  }
-
-  init = () => {
-    const { service } = this
-    this.render()
-    this.service.subscribe(() => {
-      this.api = checkbox.connect(service.state, service.send, normalizeProps)
-      this.render()
-    })
-
-    this.service.start()
+export class Checkbox extends Component<checkbox.Context, checkbox.Api> {
+  initService(context: checkbox.Context) {
+    return checkbox.machine(context)
   }
 
-  destroy = () => {
-    this.service.stop()
+  initApi() {
+    return checkbox.connect(this.service.state, this.service.send, normalizeProps)
   }
 
   render = () => {
     const rootEl = this.rootEl
     spreadProps(this.rootEl, this.api.rootProps)
-
     const controlEl = rootEl.querySelector<HTMLElement>(".checkbox-control")
     if (controlEl) spreadProps(controlEl, this.api.controlProps)
-
     const labelEl = rootEl.querySelector<HTMLElement>(".checkbox-label")
     if (labelEl) spreadProps(labelEl, this.api.labelProps)
-
     const inputEl = rootEl.querySelector<HTMLInputElement>(".checkbox-input")
     if (inputEl) spreadProps(inputEl, this.api.hiddenInputProps)
   }

examples/vanilla-ts/src/component.ts

@@ -0,0 +1,42 @@
+import { Machine } from "@zag-js/core"
+
+interface ComponentInterface<Api> {
+  rootEl: HTMLElement
+  service: ReturnType<any>
+  api: Api
+
+  init(): void
+  destroy(): void
+  render(): void
+}
+
+export abstract class Component<Context, Api> implements ComponentInterface<Api> {
+  rootEl: HTMLElement
+  service: ReturnType<any>
+  api: Api
+
+  constructor(rootEl: HTMLElement | null, context: Context) {
+    if (!rootEl) throw new Error("Root element not found")
+    this.rootEl = rootEl
+    this.service = this.initService(context)
+    this.api = this.initApi()
+  }
+
+  abstract initService(context: Context): Machine<any, any, any>
+  abstract initApi(): Api
+
+  init = () => {
+    this.render()
+    this.service.subscribe(() => {
+      this.api = this.initApi()
+      this.render()
+    })
+    this.service.start()
+  }
+
+  destroy = () => {
+    this.service.stop()
+  }
+
+  abstract render(): void
+}

examples/vanilla-ts/src/popover.ts

@@ -1,44 +1,23 @@
 import * as popover from "@zag-js/popover"
 import { normalizeProps } from "./normalize-props"
 import { spreadProps } from "./spread-props"
+import { Component } from "./component"
 
-export class Popover {
-  rootEl: HTMLElement
-  service: ReturnType<typeof popover.machine>
-  api: popover.Api<any>
-
-  constructor(rootEl: HTMLElement | null, context: popover.Context) {
-    if (!rootEl) throw new Error("Root element not found")
-    this.rootEl = rootEl
-
-    this.service = popover.machine(context)
-    this.api = popover.connect(this.service.state, this.service.send, normalizeProps)
-  }
-
-  init = () => {
-    const { service } = this
-    this.render()
-    this.service.subscribe(() => {
-      this.api = popover.connect(service.state, service.send, normalizeProps)
-      this.render()
-    })
-
-    this.service.start()
+export class Popover extends Component<popover.Context, popover.Api> {
+  initService(context: popover.Context) {
+    return popover.machine(context)
   }
 
-  destroy = () => {
-    this.service.stop()
+  initApi() {
+    return popover.connect(this.service.state, this.service.send, normalizeProps)
   }
 
   render = () => {
     const rootEl = this.rootEl
-
     const triggerEl = rootEl.querySelector<HTMLElement>(".popover-trigger")
     if (triggerEl) spreadProps(triggerEl, this.api.triggerProps)
-
     const contentEl = rootEl.querySelector<HTMLElement>(".popover-content")
     if (contentEl) spreadProps(contentEl, this.api.contentProps)
-
     const positionerEl = rootEl.querySelector<HTMLElement>(".popover-positioner")
     if (positionerEl) spreadProps(positionerEl, this.api.positionerProps)
   }