Function DevtoolsProvider

packages/devtools/src/context/devtools-context.tsx:182–230

(props: ContextProps)

        ...plugin,
        id,
      }
    }) || []

  // If nothing was open, seed from plugins with defaultOpen: true, or activate
  // a lone plugin automatically.
  let layout = existingState?.layout ?? null

  const shouldFillWithDefaultOpenPlugins =
    flattenTabs(layout).length === 0 && pluginsWithIds.length > 0
  if (shouldFillWithDefaultOpenPlugins) {
    layout = singleGroup(getDefaultActivePlugins(pluginsWithIds))
  }

  const state: DevtoolsStore = {
    ...initialState,
    plugins: pluginsWithIds,
    state: {
      ...initialState.state,
      ...existingState,
      layout,
    },
    settings: {
      ...initialState.settings,
      ...config,
      ...settings,
    },
  }
  return state
}

export type TanStackDevtoolsConfig = DevtoolsStore['settings']

export const DevtoolsProvider = (props: ContextProps) => {
  const [store, setStore] = createStore(
    getExistingStateFromStorage(props.config, props.plugins),
  )

  setStorageItem(TANSTACK_DEVTOOLS_STATE, JSON.stringify(store.state))

  // Provide a way for the core to update plugins reactively
  const updatePlugins = (newPlugins: Array<TanStackDevtoolsPlugin>) => {
    const pluginsWithIds = newPlugins.map((plugin, i) => {
      const id = generatePluginId(plugin, i)
      return {
        ...plugin,
        id,
      }
    })

    setStore('plugins', pluginsWithIds)
  }