Function createPlugins

packages/devtools/src/context/use-devtools-context.ts:32–74

()

  const plugins = createMemo(() => store.plugins)
  /**
   * Derived, never stored. The layout tree is the only record of what is open,
   * so this cannot drift out of step with it.
   *
   * Compared by contents, not identity: `flattenTabs` builds a fresh array every
   * time, and without this every unrelated store write would look like a change
   * and re-run each plugin's `render`.
   */
  const activePlugins = createMemo(() => flattenTabs(store.state.layout), [], {
    equals: (a, b) => a.length === b.length && a.every((id, i) => id === b[i]),
  })
  const layout = createMemo(() => store.state.layout)

  const setLayout = (next: LayoutNode | null) => {
    setStore((previous) => ({
      ...previous,
      state: { ...previous.state, layout: next },
    }))
  }

  const toggleActivePlugins = (pluginId: string) => {
    const current = store.state.layout
    const isActive = flattenTabs(current).includes(pluginId)

    if (isActive) {
      // `destroy` is deliberately not called here. It hangs off the pane's own
      // teardown in `PluginWorkspace`, so it fires exactly once however the pane
      // was closed — this toggle, a tab's close button, or a whole group going
      // away — and it fires before the mount node is detached.
      setLayout(closeTab(current, pluginId))
      return
    }

    if (flattenTabs(current).length >= MAX_ACTIVE_PLUGINS) return

    // Opening from the strip adds a pane alongside the others at an equal share,
    // which is the side-by-side behaviour the strip has always had. Dragging
    // decides placement for itself.
    setLayout(appendPane(current, pluginId))
  }

  return { plugins, toggleActivePlugins, activePlugins, layout, setLayout }
}

export const createDevtoolsState = () => {
  const { store, setStore } = createDevtoolsContext()
  const state = createMemo(() => store.state)