{
  "slug": "yew-component-lifecycle",
  "version": 1,
  "project": "yew",
  "title": "Yew client-side component lifecycle and render requests",
  "description": "Creation leads to a render pass and a mounted component. Messages call update; changed properties call changed. Handlers can request another render or return without requesting one. Unmounting calls destroy before DOM detachment.",
  "config": {
    "design": "state-machine-rounded-states-labeled-transitions",
    "name": "component-lifecycle",
    "style": "clean",
    "palette": [
      "#417f79"
    ],
    "parameters": {
      "states": [
        {
          "id": "start",
          "kind": "start"
        },
        {
          "id": "create",
          "kind": "state",
          "name": "Creating",
          "description": "create(ctx)"
        },
        {
          "id": "render",
          "kind": "state",
          "name": "Render pass",
          "description": "view, DOM, rendered"
        },
        {
          "id": "idle",
          "kind": "state",
          "name": "Mounted",
          "description": "Awaiting input"
        },
        {
          "id": "input",
          "kind": "state",
          "name": "Handling input",
          "description": "update(msg) / changed(props)"
        },
        {
          "id": "destroy",
          "kind": "state",
          "name": "Removing",
          "description": "destroy(ctx), DOM detach"
        },
        {
          "id": "end",
          "kind": "end"
        }
      ],
      "transitions": [
        {
          "from": "start",
          "to": "create"
        },
        {
          "from": "create",
          "to": "render",
          "label": "Initial render"
        },
        {
          "from": "render",
          "to": "idle",
          "label": "DOM reconciled"
        },
        {
          "from": "idle",
          "to": "input",
          "label": "Message / props"
        },
        {
          "from": "input",
          "to": "render",
          "label": "Requests render"
        },
        {
          "from": "input",
          "to": "idle",
          "label": "No render needed"
        },
        {
          "from": "idle",
          "to": "destroy",
          "label": "Unmount"
        },
        {
          "from": "destroy",
          "to": "end",
          "label": "Cleanup complete"
        }
      ]
    },
    "accessibility": {
      "title": "Yew client-side component lifecycle and render requests",
      "description": "Creation leads to a render pass and a mounted component. Messages call update; changed properties call changed. Handlers can request another render or return without requesting one. Unmounting calls destroy before DOM detachment."
    }
  },
  "files": {
    "svg": {
      "url": "/diagram-sources/yew-component-lifecycle/v1/diagram.svg",
      "sha256": "e993853d4345724fb37b6291a892f3febd170e24e014042f79fdf287ae2fc856"
    },
    "png": {
      "url": "/diagram-sources/yew-component-lifecycle/v1/diagram.png",
      "sha256": "ceb0866d3427129312f884932aab684c8e20990749eb12538b340fe00a4d35ee"
    },
    "dot": {
      "url": "/diagram-sources/yew-component-lifecycle/v1/diagram.dot",
      "sha256": "7272a21daeff6b0e85473a83d490c87ae7704b2a0cc3942067f733612faf4a56"
    }
  }
}