-
-
Notifications
You must be signed in to change notification settings - Fork 98
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add settings for devtools plugin (#597)
- Loading branch information
1 parent
344987a
commit 77c0bc7
Showing
10 changed files
with
269 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| <script setup lang="ts"> | ||
| import { VueSelect, VueSwitch } from '@vue/devtools-ui' | ||
| import { rpc } from '@vue/devtools-core' | ||
| import { useCustomInspectorState } from '~/composables/custom-inspector-state' | ||
| const props = defineProps<{ | ||
| pluginId: string | ||
| options: Record<string, unknown> | ||
| values: Record<string, unknown> | ||
| }>() | ||
| const emit = defineEmits(['update']) | ||
| const state = useCustomInspectorState() | ||
| const options = computed(() => props.options) | ||
| const values = computed(() => props.values) | ||
| function toggleOption(key: string, v: unknown) { | ||
| rpc.value.updatePluginSettings(props.pluginId, key, v) | ||
| rpc.value.getPluginSettings(props.pluginId).then((_settings) => { | ||
| emit('update', _settings) | ||
| }) | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="flex-1 overflow-y-auto p2"> | ||
| <ul> | ||
| <li v-for="(item, index) in options" :key="index" class="flex items-center py-2"> | ||
| <div class="max-w-[190px] flex-1 select-none py-1.5 text-sm"> | ||
| {{ item.label }} | ||
| </div> | ||
| <div class="w-4/5"> | ||
| <div v-if="item.type === 'boolean'" class="flex justify-start"> | ||
| <VueSwitch | ||
| :model-value="values[index]" | ||
| class="row-reverse flex hover:bg-active py1 pl2 pr1" | ||
| @update:model-value="(v: boolean) => toggleOption(index, v)" | ||
| > | ||
| <div flex="~ gap-2" flex-auto items-center justify-start> | ||
| <span capitalize op75>{{ name }}</span> | ||
| </div> | ||
| </VueSwitch> | ||
| </div> | ||
| <template v-else-if="item.type === 'choice'"> | ||
| <div> | ||
| <VueSelect | ||
| :model-value="values[index]" | ||
| :options="item.options" | ||
| @update:model-value="(v: string) => toggleOption(index, v)" | ||
| /> | ||
| </div> | ||
| </template> | ||
| <template v-else-if="item.type === 'text'"> | ||
| <VueInput :model-value="values[index]" @update:model-value="(v: string) => toggleOption(index, v)" /> | ||
| </template> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </template> |
24 changes: 24 additions & 0 deletions
24
packages/applet/src/modules/custom-inspector/components/Settings.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <script setup lang="ts"> | ||
| import Settings from '~/components/settings/Settings.vue' | ||
| import { useCustomInspectorState } from '~/composables/custom-inspector-state' | ||
| import Navbar from '~/components/basic/Navbar.vue' | ||
| import DevToolsHeader from '~/components/basic/DevToolsHeader.vue' | ||
| const settings = inject('pluginSettings') | ||
| const customInspectState = useCustomInspectorState() | ||
| const options = computed(() => settings.value.options) | ||
| const values = computed(() => settings.value.values) | ||
| function update(_settings) { | ||
| settings.value = _settings | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="h-full flex flex-col"> | ||
| <DevToolsHeader :doc-link="customInspectState.homepage!"> | ||
| <Navbar /> | ||
| </DevToolsHeader> | ||
| <Settings :plugin-id="customInspectState.id" :options="options" :values="values" @update="update" /> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <script setup lang="ts"> | ||
| import Settings from '~/components/settings/Settings.vue' | ||
| import Navbar from '~/components/basic/Navbar.vue' | ||
| import DevToolsHeader from '~/components/basic/DevToolsHeader.vue' | ||
| const settings = inject('pluginSettings') | ||
| const options = computed(() => settings.value.options) | ||
| const values = computed(() => settings.value.values) | ||
| const inspectorId = 'pinia' | ||
| function update(_settings) { | ||
| settings.value = _settings | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <div class="h-full flex flex-col"> | ||
| <DevToolsHeader doc-link="https://pinia.vuejs.org/" github-repo-link="https://github.com/vuejs/pinia"> | ||
| <Navbar /> | ||
| </DevToolsHeader> | ||
| <Settings :plugin-id="inspectorId" :options="options" :values="values" @update="update" /> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { devtoolsPluginBuffer } from '../../ctx/plugin' | ||
| import { PluginDescriptor } from '../../types' | ||
| import { DevToolsV6PluginAPIHookKeys, devtoolsContext, getInspector } from '../../ctx' | ||
|
|
||
| function _getSettings(settings: PluginDescriptor['settings']) { | ||
| const _settings = {} | ||
| Object.keys(settings!).forEach((key) => { | ||
| _settings[key] = settings![key].defaultValue | ||
| }) | ||
|
|
||
| return _settings | ||
| } | ||
|
|
||
| function getPluginLocalKey(pluginId: string) { | ||
| return `__VUE_DEVTOOLS_NEXT_PLUGIN_SETTINGS__${pluginId}__` | ||
| } | ||
|
|
||
| export function getPluginSettingsOptions(pluginId: string) { | ||
| const descriptor = getInspector(pluginId)?.descriptor | ||
| const item = devtoolsPluginBuffer.find(item => item[0].id === descriptor?.id)?.[0] ?? null | ||
| return item?.settings ?? null | ||
| } | ||
|
|
||
| export function getPluginSettings(pluginId: string, fallbackValue?: PluginDescriptor['settings']) { | ||
| const localKey = getPluginLocalKey(pluginId) | ||
| if (localKey) { | ||
| const localSettings = localStorage.getItem(localKey) | ||
| if (localSettings) { | ||
| return JSON.parse(localSettings) | ||
| } | ||
| } | ||
|
|
||
| if (pluginId) { | ||
| const item = devtoolsPluginBuffer.find(item => item[0].id === pluginId)?.[0] ?? null | ||
| return _getSettings(item?.settings ?? {}) | ||
| } | ||
| return _getSettings(fallbackValue) | ||
| } | ||
|
|
||
| export function initPluginSettings(pluginId: string, settings: PluginDescriptor['settings']) { | ||
| const localKey = getPluginLocalKey(pluginId) | ||
| const localSettings = localStorage.getItem(localKey) | ||
| if (!localSettings) { | ||
| localStorage.setItem(localKey, JSON.stringify(_getSettings(settings))) | ||
| } | ||
| } | ||
|
|
||
| export function setPluginSettings(pluginId: string, key: string, value: string) { | ||
| const localKey = getPluginLocalKey(pluginId) | ||
| const localSettings = localStorage.getItem(localKey)! | ||
| const parsedLocalSettings = JSON.parse(localSettings || '{}') | ||
| const updated = { | ||
| ...parsedLocalSettings, | ||
| [key]: value, | ||
| } | ||
| localStorage.setItem(localKey, JSON.stringify(updated)) | ||
|
|
||
| // @ts-expect-error hookable | ||
| devtoolsContext.hooks.callHookWith((callbacks) => { | ||
| callbacks.forEach(cb => cb({ | ||
| pluginId, | ||
| key, | ||
| oldValue: parsedLocalSettings[key], | ||
| newValue: value, | ||
| settings: updated, | ||
| })) | ||
| }, DevToolsV6PluginAPIHookKeys.SET_PLUGIN_SETTINGS) | ||
| } |
Oops, something went wrong.