플러그인 설정 추가

// src/settings.ts
import { defineSettings } from "@muvel-plugins/settings-store"
 
export const settings = defineSettings("my-plugin", {
  default: {
    enabled: false,
    zoom: 1,
  },
})

import { settingsStorePluginId } from "@muvel-plugins/settings-store"
import { settings } from "./settings"
 
setup: async (mgr, ctx) => {
  const storesApi = mgr.use(ctx, settingsStorePluginId)
  const store = await storesApi.register(settings)
 
  // JS 영역에서 즉시 읽기
  const enabled = store.get("enabled")
 
  // 변경 구독 (예: webview zoom 반영)
  store.subscribeValues<number>(
    async (zoom) => {
      // zoom 변경 시 처리
    },
    (config) => config.zoom,
  )
}

import { settingsPluginId } from "@muvel-plugins/settings"
import {
  categoryIds,
  tabIds,
} from "@muvel-plugins/settings-schema"
import { MyPluginConfig } from "./settings-ui"
 
setup: async (mgr, ctx) => {
  const settingsApi = mgr.use(ctx, settingsPluginId)
 
  settingsApi.register((data) => {
    const tab = data[categoryIds.general]!.tabs[tabIds.general.general]!
 
    tab.items["my-plugin"] = {
      order: 500,
      component: MyPluginConfig,
    }
  })
}

// src/settings-ui.tsx
import { Switch } from "@chakra-ui/react"
import {
  SettingStoreField,
  useSettingsStore,
} from "@muvel-plugins/settings-store"
import { settings } from "./settings"
 
export const MyPluginConfig = () => {
  const configStore = useSettingsStore(settings.id)
 
  return (
    <SettingStoreField
      store={configStore}
      fieldKey="enabled"
      render={({ value, onChange, disabled }) => (
        <Switch.Root
          checked={value}
          disabled={disabled}
          onCheckedChange={({ checked }) => onChange(checked)}
        >
          <Switch.HiddenInput />
          <Switch.Control>
            <Switch.Thumb />
          </Switch.Control>
        </Switch.Root>
      )}
    />
  )
}

import { useSettingsStore } from "@muvel-plugins/settings-store"
import { settings } from "./settings"
 
const Example = () => {
  const store = useSettingsStore(settings.id)
  const enabled = store.useValues((v) => v.enabled)
 
  return <>{enabled ? "ON" : "OFF"}</>
}

setup: async (mgr, ctx) => {
  const storesApi = mgr.use(ctx, settingsStorePluginId)
  const store = await storesApi.register(settings)
 
  const enabled = store.get("enabled")
  if (!enabled) return
 
  store.subscribeValues(
    (value) => {
      // 설정 변경 시 동작
    },
    (config) => config.enabled,
  )
}