Update Renderer API (bitovi#101)

* update react-to-web-component

* refactor

* fix tests

* fix

Author: Christopher J Baker

.github/actions/test/action.yml

@@ -11,4 +11,4 @@ runs:
   steps:
     - name: Test
       shell: bash
-      run: npx nx test ${{ inputs.package }}
+      run: npx nx test:ci ${{ inputs.package }}

nx.json

@@ -11,6 +11,8 @@
           "prettier",
           "depcheck",
           "test",
+          "test:ci",
+          "test:coverage",
           "clean",
           "build"
         ]

packages/core/package.json

@@ -34,8 +34,8 @@
     "prettier": "prettier --check vite.config.ts src",
     "depcheck": "depcheck .",
     "dev": "vite",
-    "test": "vitest run",
-    "test:dev": "vitest",
+    "test": "vitest",
+    "test:ci": "vitest run",
     "test:coverage": "vitest run --coverage",
     "clean": "rm -rf tsconfig.tsbuildinfo dist",
     "build": "vite build"

packages/core/src/core.test.tsx

@@ -1,25 +1,15 @@
 import { describe, test, it, expect, vi, afterEach } from "vitest"
 import matchers from "@testing-library/jest-dom/matchers"
-import React from "react"
 
 import r2wc from "./core"
 
 expect.extend(matchers)
 
-const mountCheck = vi.fn()
+const mount = vi.fn(() => ({ why: "context" }))
 const unmount = vi.fn()
 const update = vi.fn()
-const onUpdated = vi.fn()
-
-const mount = (el: HTMLElement, reactComponent: any, _props: any) => {
-  mountCheck()
-  return {
-    reactContainer: el,
-    component: reactComponent,
-  }
-}
 
-function flushPromises() {
+function wait() {
   return new Promise((resolve) => setImmediate(resolve))
 }
 
@@ -28,40 +18,62 @@ describe("core", () => {
     document.body.innerHTML = ""
   })
 
-  it("mounts and unmounts for a functional component", async () => {
-    function TestComponent() {
-      return <div>hello</div>
-    }
+  it("mounts and unmounts in light mode", async () => {
+    const ReactComponent: React.FC = () => <h1>Hello</h1>
 
-    const TestElement = r2wc(TestComponent, {}, { mount, unmount, update })
-    customElements.define("test-func-element", TestElement)
+    const WebComponent = r2wc(ReactComponent, {}, { mount, unmount, update })
+    customElements.define("test-light", WebComponent)
 
-    const testEl = new TestElement()
+    const element = new WebComponent()
 
-    document.body.appendChild(testEl)
-    expect(mountCheck).toBeCalledTimes(1)
+    document.body.appendChild(element)
+    expect(mount).toBeCalledTimes(1)
 
-    document.body.removeChild(testEl)
+    document.body.removeChild(element)
     expect(unmount).toBeCalledTimes(1)
+    expect(unmount).toBeCalledWith({ why: "context" })
   })
 
-  it("mounts and unmounts for a class component", async () => {
-    class TestComponent extends React.Component {
-      render() {
-        return <div>hello</div>
-      }
-    }
+  it("mounts and unmounts in open shadow mode", async () => {
+    const ReactComponent: React.FC = () => <h1>Hello</h1>
+
+    const WebComponent = r2wc(
+      ReactComponent,
+      { shadow: "open" },
+      { mount, unmount, update },
+    )
+    customElements.define("test-shadow-open", WebComponent)
+
+    const element = new WebComponent()
 
-    const TestElement = r2wc(TestComponent, {}, { mount, unmount, update })
-    customElements.define("test-element", TestElement)
+    document.body.appendChild(element)
+    expect(element).toHaveProperty("shadowRoot")
+    expect(mount).toBeCalledTimes(1)
+
+    document.body.removeChild(element)
+    expect(unmount).toBeCalledTimes(1)
+    expect(unmount).toBeCalledWith({ why: "context" })
+  })
+
+  it("mounts and unmounts in closed shadow mode", async () => {
+    const ReactComponent: React.FC = () => <h1>Hello</h1>
+
+    const WebComponent = r2wc(
+      ReactComponent,
+      { shadow: "closed" },
+      { mount, unmount, update },
+    )
+    customElements.define("test-shadow-closed", WebComponent)
 
-    const testEl = new TestElement()
+    const element = new WebComponent()
 
-    document.body.appendChild(testEl)
-    expect(mountCheck).toBeCalledTimes(1)
+    document.body.appendChild(element)
+    expect(element).toHaveProperty("shadowRoot")
+    expect(mount).toBeCalledTimes(1)
 
-    document.body.removeChild(testEl)
+    document.body.removeChild(element)
     expect(unmount).toBeCalledTimes(1)
+    expect(unmount).toBeCalledWith({ why: "context" })
   })
 
   test("updated attribute updates the component prop and the HTMLElement property", async () => {
@@ -72,7 +84,7 @@ describe("core", () => {
     const ButtonElement = r2wc(
       Button,
       { props: ["text"] },
-      { mount, unmount, update, onUpdated },
+      { mount, unmount, update },
     )
 
     customElements.define("test-button-element-attribute", ButtonElement)
@@ -81,20 +93,18 @@ describe("core", () => {
     body.innerHTML =
       "<test-button-element-attribute text='hello'></test-button-element-attribute>"
 
-    const testEl = body.querySelector(
+    const element = body.querySelector(
       "test-button-element-attribute",
     ) as HTMLElement & { text: string }
 
-    testEl.setAttribute("text", "world")
+    element.setAttribute("text", "world")
 
-    await flushPromises()
+    await wait()
 
-    expect(onUpdated).toBeCalledTimes(1)
-    expect(testEl.text).toBe("world")
+    expect(element.text).toBe("world")
   })
 
   test("updated HTMLElement property updates the component prop and the HTMLElement attribute", async () => {
-    expect.assertions(13)
     interface Props {
       text: string
       numProp: number
@@ -127,7 +137,7 @@ describe("core", () => {
           funcProp: "function",
         },
       },
-      { mount, unmount, update, onUpdated },
+      { mount, unmount, update },
     )
 
     //@ts-ignore
@@ -147,33 +157,32 @@ describe("core", () => {
     body.innerHTML = `<test-button-element-property text='hello' obj-prop='{"greeting": "hello, world"}' arr-prop='["hello", "world"]' num-prop='240' bool-prop='true' func-prop='globalFn'>
                       </test-button-element-property>`
 
-    const testEl = body.querySelector(
+    const element = body.querySelector(
       "test-button-element-property",
     ) as HTMLElement & Props
 
-    await flushPromises()
+    await wait()
 
-    expect(testEl.text).toBe("hello")
-    expect(testEl.numProp).toBe(240)
-    expect(testEl.boolProp).toBe(true)
-    expect(testEl.arrProp).toEqual(["hello", "world"])
-    expect(testEl.objProp).toEqual({ greeting: "hello, world" })
-    expect(testEl.funcProp).toBeInstanceOf(Function)
-    expect(testEl.funcProp()).toBe(true)
+    expect(element.text).toBe("hello")
+    expect(element.numProp).toBe(240)
+    expect(element.boolProp).toBe(true)
+    expect(element.arrProp).toEqual(["hello", "world"])
+    expect(element.objProp).toEqual({ greeting: "hello, world" })
+    expect(element.funcProp).toBeInstanceOf(Function)
+    expect(element.funcProp()).toBe(true)
 
-    testEl.text = "world"
-    testEl.numProp = 100
-    testEl.boolProp = false
+    element.text = "world"
+    element.numProp = 100
+    element.boolProp = false
     //@ts-ignore
-    testEl.funcProp = global.newFunc
+    element.funcProp = global.newFunc
 
-    await flushPromises()
+    await wait()
 
-    expect(onUpdated).toBeCalledTimes(4)
-    expect(testEl.getAttribute("text")).toBe("world")
-    expect(testEl.getAttribute("num-prop")).toBe("100")
-    expect(testEl.getAttribute("bool-prop")).toBe("false")
-    expect(testEl.getAttribute("func-prop")).toBe("newFunc")
+    expect(element.getAttribute("text")).toBe("world")
+    expect(element.getAttribute("num-prop")).toBe("100")
+    expect(element.getAttribute("bool-prop")).toBe("false")
+    expect(element.getAttribute("func-prop")).toBe("newFunc")
   })
 
   test("sets HTML property not defined in props but found on HTML object", async () => {
@@ -184,25 +193,25 @@ describe("core", () => {
     const ButtonElement = r2wc(
       Button,
       { props: ["text"] },
-      { mount, unmount, update, onUpdated },
+      { mount, unmount, update },
     )
 
     customElements.define("test-button-element-non-prop", ButtonElement)
 
     const body = document.body
     body.innerHTML = `<test-button-element-non-prop></test-button-element-non-prop>`
 
-    const testEl = body.querySelector(
+    const element = body.querySelector(
       "test-button-element-non-prop",
     ) as HTMLElement & { text: string }
-    testEl.style.backgroundColor = "red"
-    testEl.style.visibility = "hidden"
-    testEl.id = "test-button-id"
+    element.style.backgroundColor = "red"
+    element.style.visibility = "hidden"
+    element.id = "test-button-id"
 
-    await flushPromises()
+    await wait()
 
-    expect(testEl).toHaveStyle("background-color: red;")
-    expect(testEl).not.toBeVisible()
-    expect(body.querySelector("#test-button-id")).toBe(testEl)
+    expect(element).toHaveStyle("background-color: red;")
+    expect(element).not.toBeVisible()
+    expect(body.querySelector("#test-button-id")).toBe(element)
   })
 })

packages/core/src/core.ts

@@ -0,0 +1,8 @@
+import type { Transform } from "./index"
+
+const string: Transform<boolean> = {
+  stringify: (value) => (value ? "true" : "false"),
+  parse: (value) => /^[ty1-9]/i.test(value),
+}
+
+export default string

packages/core/src/transforms/boolean.ts

@@ -0,0 +1,22 @@
+import type { Transform } from "./index"
+
+const string: Transform<(...args: unknown[]) => unknown> = {
+  stringify: (value) => value.name,
+  parse: (value, element) => {
+    const fn = (() => {
+      if (typeof window !== "undefined" && value in window) {
+        // @ts-expect-error
+        return window[value]
+      }
+
+      if (typeof global !== "undefined" && value in global) {
+        // @ts-expect-error
+        return global[value]
+      }
+    })()
+
+    return typeof fn === "function" ? fn.bind(element) : undefined
+  },
+}
+
+export default string

packages/core/src/transforms/function.ts

@@ -0,0 +1,22 @@
+import string from "./string"
+import number from "./number"
+import boolean from "./boolean"
+import function_ from "./function"
+import json from "./json"
+
+export interface Transform<Type> {
+  stringify?: (value: Type) => string
+  parse: (value: string, element: HTMLElement) => Type
+}
+
+const transforms = {
+  string,
+  number,
+  boolean,
+  function: function_,
+  json,
+}
+
+export type R2WCType = keyof typeof transforms
+
+export default transforms

packages/core/src/transforms/index.ts

@@ -0,0 +1,8 @@
+import type { Transform } from "./index"
+
+const string: Transform<string> = {
+  stringify: (value) => JSON.stringify(value),
+  parse: (value) => JSON.parse(value),
+}
+
+export default string

packages/core/src/transforms/json.ts

@@ -0,0 +1,8 @@
+import type { Transform } from "./index"
+
+const string: Transform<number> = {
+  stringify: (value) => `${value}`,
+  parse: (value) => parseFloat(value),
+}
+
+export default string

packages/core/src/transforms/number.ts

@@ -0,0 +1,8 @@
+import type { Transform } from "./index"
+
+const string: Transform<string> = {
+  stringify: (value) => value,
+  parse: (value) => value,
+}
+
+export default string

packages/core/src/transforms/string.ts

@@ -36,8 +36,8 @@
     "prettier": "prettier --check vite.config.ts src",
     "depcheck": "depcheck .",
     "dev": "vite",
-    "test": "vitest run",
-    "test:dev": "vitest",
+    "test": "vitest",
+    "test:ci": "vitest run",
     "test:coverage": "vitest run --coverage",
     "clean": "rm -rf tsconfig.tsbuildinfo dist",
     "build": "vite build"

packages/core/src/types.ts

@@ -1,33 +1,39 @@
-import type {
-  ComponentClass,
-  Container,
-  FC,
-  R2WCOptions,
-  ReactElement,
-  RefObject,
-  Context,
-} from "@r2wc/core"
-import r2wcCore from "@r2wc/core"
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const rootSymbol = Symbol.for("r2wc.root")
+import type { R2WCOptions } from "@r2wc/core"
 
-interface ReactDOMType {
-  createRoot?: (container: Element | DocumentFragment, options?: any) => unknown
-  unmountComponentAtNode?: (container: Element | DocumentFragment) => boolean
-  render?: (
-    element: ReactElement<any, any> | null | any,
-    container: Container | null,
-  ) => unknown
-}
+import r2wcCore from "@r2wc/core"
 
 interface ReactType {
-  createRef: () => RefObject<unknown>
   createElement: (
-    type: string | FC<any> | ComponentClass<any>,
+    type: any,
     data: any,
     children?: any,
-  ) => ReactElement<any, any> | null | any
+  ) => React.ReactElement | null
+}
+
+interface ReactDOMRootRootType {
+  render: (element: React.ReactElement | null) => void
+  unmount: () => void
+}
+
+interface ReactDOMRootType {
+  createRoot: (
+    container: Element | DocumentFragment,
+    options?: any,
+  ) => ReactDOMRootRootType
+}
+
+interface ReactDOMRenderType {
+  unmountComponentAtNode: (container: Element | DocumentFragment) => boolean
+  render: (
+    element: React.ReactElement | null,
+    container: ReactDOM.Container | null,
+  ) => unknown
+}
+
+interface Context<Props> {
+  container: HTMLElement
+  root?: ReactDOMRootRootType
+  ReactComponent: React.ComponentType<Props>
 }
 
 /**
@@ -40,60 +46,68 @@ interface ReactType {
  * @param {Object|Array?} options.props - Array of camelCasedProps to watch as Strings or { [camelCasedProp]: String | Number | Boolean | Function | Object | Array }
  */
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export default function (
-  ReactComponent: FC<any> | ComponentClass<any>,
+export default function r2wc<Props>(
+  ReactComponent: React.ComponentType<Props>,
   React: ReactType,
-  ReactDOM: ReactDOMType,
-  options: R2WCOptions = {},
+  ReactDOM: ReactDOMRootType | ReactDOMRenderType,
+  options: R2WCOptions<Props> = {},
 ): CustomElementConstructor {
-  const isReact18 =
-    ReactDOM.createRoot && typeof ReactDOM.createRoot === "function"
-  function unmount<Props extends React.Attributes>(
-    this: any,
-    { reactContainer }: Context<React.ComponentType<Props>>,
-  ): void {
-    if (isReact18) {
-      this[rootSymbol].unmount()
-    } else if (ReactDOM.unmountComponentAtNode) {
-      ReactDOM.unmountComponentAtNode(reactContainer)
-    }
-  }
-
-  function mount<Props extends React.Attributes>(
-    this: any,
+  function mount(
     container: HTMLElement,
     ReactComponent: React.ComponentType<Props>,
     props: Props,
-  ): Context<React.ComponentType<Props>> {
+  ): Context<Props> {
     const element = React.createElement(ReactComponent, props)
-    if (isReact18) {
-      if (!this[rootSymbol]) {
-        this[rootSymbol] = ReactDOM.createRoot?.(container)
+
+    if ("createRoot" in ReactDOM) {
+      const root = ReactDOM.createRoot(container)
+      root.render(element)
+
+      return {
+        container,
+        root,
+        ReactComponent,
       }
+    }
 
-      this[rootSymbol].render(element)
-    } else if (ReactDOM.render) {
+    if ("render" in ReactDOM) {
       ReactDOM.render(element, container)
-    }
 
-    return {
-      reactContainer: container,
-      component: ReactComponent,
+      return {
+        container,
+        ReactComponent,
+      }
     }
+
+    throw new Error("Invalid ReactDOM instance provided.")
   }
 
-  function update<Props extends React.Attributes>(
-    this: any,
-    { reactContainer, component }: Context<React.ComponentType<Props>>,
+  function update(
+    { container, root, ReactComponent }: Context<Props>,
     props: Props,
   ): void {
-    const element = React.createElement(component, props)
+    const element = React.createElement(ReactComponent, props)
+
+    if (root) {
+      root.render(element)
+      return
+    }
+
+    if ("render" in ReactDOM) {
+      ReactDOM.render(element, container)
+      return
+    }
+  }
+
+  function unmount({ container, root }: Context<Props>): void {
+    if (root) {
+      root.unmount()
+      return
+    }
 
-    if (isReact18) {
-      this[rootSymbol].render(element)
+    if ("unmountComponentAtNode" in ReactDOM) {
+      ReactDOM.unmountComponentAtNode(container)
       return
-    } else if (ReactDOM.render) {
-      ReactDOM.render(element, reactContainer)
     }
   }
 

packages/legacy/package.json

@@ -35,8 +35,8 @@
     "prettier": "prettier --check vite.config.ts src",
     "depcheck": "depcheck .",
     "dev": "vite",
-    "test": "vitest run",
-    "test:dev": "vitest",
+    "test": "vitest",
+    "test:ci": "vitest run",
     "test:coverage": "vitest run --coverage",
     "clean": "rm -rf tsconfig.tsbuildinfo dist",
     "build": "vite build"

packages/legacy/src/react-to-webcomponent.ts

@@ -3,17 +3,18 @@ import { describe, it, expect, assert } from "vitest"
 import matchers from "@testing-library/jest-dom/matchers"
 
 import r2wc from "./react-to-web-component"
-import React from "react"
 
 expect.extend(matchers)
 
 function flushPromises() {
   return new Promise((resolve) => setImmediate(resolve))
 }
 
-const Greeting = ({ name }: { name: string }) => <h1>Hello, {name}</h1>
+const Greeting: React.FC<{ name: string }> = ({ name }) => (
+  <h1>Hello, {name}</h1>
+)
 
-describe("react", () => {
+describe("react-to-web-component", () => {
   it("basics with react", () => {
     const MyWelcome = r2wc(Greeting)
     customElements.define("my-welcome", MyWelcome)
@@ -140,18 +141,19 @@ describe("react", () => {
         arrayProp,
         objProp,
       }
+
       return <h1>{stringProp}</h1>
     }
 
     const WebOptionsPropsTypeCasting = r2wc(OptionsPropsTypeCasting, {
       props: {
-        stringProp: String,
-        numProp: Number,
-        floatProp: Number,
-        trueProp: Boolean,
-        falseProp: Boolean,
-        arrayProp: Array,
-        objProp: Object,
+        stringProp: "string",
+        numProp: "number",
+        floatProp: "number",
+        trueProp: "boolean",
+        falseProp: "boolean",
+        arrayProp: "json",
+        objProp: "json",
       },
     })
 
@@ -221,7 +223,7 @@ describe("react", () => {
 
     const WebThemeSelect = r2wc(ThemeSelect, {
       props: {
-        handleClick: Function,
+        handleClick: "function",
       },
     })
 
@@ -256,121 +258,4 @@ describe("react", () => {
       }, 0)
     })
   })
-
-  it("Props typed as 'ref' work with functional components", async () => {
-    expect.assertions(5)
-
-    type TestRef = {
-      tag: string
-      setTag: React.Dispatch<React.SetStateAction<string>>
-    }
-
-    const RCom = React.forwardRef<
-      TestRef,
-      { h1Ref: React.RefObject<HTMLButtonElement> }
-    >(function RCom(props, ref) {
-      const [tag, setTag] = React.useState("h1")
-      React.useImperativeHandle(ref, () => ({
-        tag,
-        setTag,
-      }))
-      return (
-        <button ref={props.h1Ref} onClick={() => setTag("h2")}>
-          Ref, {tag}
-        </button>
-      )
-    })
-
-    class WebCom extends r2wc(RCom, {
-      props: {
-        ref: "ref",
-        h1Ref: "ref",
-      },
-    }) {}
-
-    customElements.define("ref-test-func", WebCom)
-
-    const body = document.body
-
-    await new Promise((r) => {
-      body.innerHTML = "<ref-test-func ref h1-ref></ref-test-func>"
-
-      setTimeout(() => {
-        const el = document.querySelector("ref-test-func") as HTMLElement & {
-          ref: React.RefObject<TestRef>
-          h1Ref: React.RefObject<HTMLButtonElement>
-        }
-        expect(el.ref.current?.tag).toEqual("h1")
-        expect(typeof el.ref.current?.setTag).toEqual("function")
-        const button = document.querySelector(
-          "ref-test-func button",
-        ) as HTMLButtonElement
-        expect(el.h1Ref.current).toEqual(button)
-        button?.click()
-        setTimeout(() => {
-          expect(el.ref.current?.tag).toEqual("h2")
-          expect(button.innerHTML).toEqual("Ref, h2")
-          r(true)
-        }, 0)
-      }, 0)
-    })
-  })
-
-  it("Props typed as 'ref' work with class components", async () => {
-    expect.assertions(3)
-
-    type TestClassProps = {
-      h1Ref: React.RefObject<HTMLButtonElement>
-    }
-
-    class RCom extends React.Component<TestClassProps, { tag: string }> {
-      constructor(props: TestClassProps) {
-        super(props)
-        this.state = { tag: "h1" }
-      }
-      render() {
-        const Tag = this.state.tag
-        return (
-          <button
-            ref={this.props.h1Ref}
-            onClick={() => this.setState({ tag: "h2" })}
-          >
-            Ref, {Tag}
-          </button>
-        )
-      }
-    }
-
-    class WebCom extends r2wc(RCom, {
-      props: {
-        ref: "ref",
-        h1Ref: "ref",
-      },
-    }) {}
-
-    customElements.define("ref-test", WebCom)
-
-    const body = document.body
-
-    await new Promise((r) => {
-      body.innerHTML = "<ref-test ref h1-ref></ref-test>"
-
-      setTimeout(() => {
-        const el = document.querySelector("ref-test") as HTMLElement & {
-          ref: React.RefObject<HTMLElement>
-          h1Ref: React.RefObject<HTMLButtonElement>
-        }
-        expect(el?.ref.current instanceof RCom).toEqual(true)
-        const button = document.querySelector(
-          "ref-test button",
-        ) as HTMLButtonElement
-        expect(el.h1Ref.current).toEqual(button)
-        button.click()
-        setTimeout(() => {
-          expect(button.innerHTML).toEqual("Ref, h2")
-          r(true)
-        }, 0)
-      }, 0)
-    })
-  })
 })

packages/react-to-web-component/package.json

@@ -1,44 +1,46 @@
-import type { Context, R2WCOptions } from "@r2wc/core"
+import type { R2WCOptions } from "@r2wc/core"
 
-import ReactDOM from "react-dom"
-import type { ComponentType } from "react"
 import React from "react"
+import ReactDOM from "react-dom"
 
 import r2wcCore from "@r2wc/core"
 
-function mount<Props extends React.Attributes>(
+interface Context<Props extends object> {
+  container: HTMLElement
+  ReactComponent: React.ComponentType<Props>
+}
+
+function mount<Props extends object>(
   container: HTMLElement,
-  ReactComponent: ComponentType<Props>,
+  ReactComponent: React.ComponentType<Props>,
   props: Props,
-): Context<ComponentType<Props>> {
+): Context<Props> {
   const element = React.createElement(ReactComponent, props)
 
   ReactDOM.render(element, container)
 
   return {
-    reactContainer: container,
-    component: ReactComponent,
+    container,
+    ReactComponent,
   }
 }
 
-function update<Props extends React.Attributes>(
-  { reactContainer, component }: Context<ComponentType<Props>>,
+function update<Props extends object>(
+  { container, ReactComponent }: Context<Props>,
   props: Props,
 ): void {
-  const element = React.createElement(component, props)
+  const element = React.createElement(ReactComponent, props)
 
-  ReactDOM.render(element, reactContainer)
+  ReactDOM.render(element, container)
 }
 
-function unmount<Props extends React.Attributes>({
-  reactContainer,
-}: Context<ComponentType<Props>>): void {
-  ReactDOM.unmountComponentAtNode(reactContainer)
+function unmount<Props extends object>({ container }: Context<Props>): void {
+  ReactDOM.unmountComponentAtNode(container)
 }
 
-export default function r2wc(
-  ReactComponent: React.FC<any> | React.ComponentClass<any>,
-  config: R2WCOptions = {},
+export default function r2wc<Props extends object>(
+  ReactComponent: React.ComponentType<Props>,
+  options: R2WCOptions<Props> = {},
 ): CustomElementConstructor {
-  return r2wcCore(ReactComponent, config, { mount, unmount, update })
+  return r2wcCore(ReactComponent, options, { mount, update, unmount })
 }