Lifecycle#

import { DomphyElement, merge } from "@domphy/core"

const App: DomphyElement<"div"> = {
  div: "Hello",

  _onSchedule: (node, rawElement) => {
    const theme = node.getContext("theme")
    merge(rawElement, {
      style: {
        color: theme === "dark" ? "#fff" : "#000",
      },
    })
  },

  _onInsert: (node) => {
    const index = node.parent!.children.items.indexOf(node)
    node.setMetadata("index", index)
  },

  _onMount: (node) => {
    const observer = new ResizeObserver(() => {
      console.log(node.domElement!.offsetWidth)
    })

    observer.observe(node.domElement!)
    node.addHook("BeforeRemove", () => observer.disconnect())
  },

  _onBeforeUpdate: (node, rawChildren) => {
    console.log("incoming:", rawChildren.length)
  },

  _onUpdate: (node) => {
    console.log("children updated:", node.children.items.length)
  },

  _onBeforeRemove: (node, done) => {
    node.domElement!
      .animate([{ opacity: 1 }, { opacity: 0 }], { duration: 300 })
      .onfinish = done
  },

  _onRemove: (node) => {
    console.log("removed")
  },
}