From f138c20f4ea29038834c1c6f1bab9e06fdcbceed Mon Sep 17 00:00:00 2001 From: Alex <49969959+alexzhang1030@users.noreply.github.com> Date: Wed, 5 Jun 2024 17:31:48 +0800 Subject: [PATCH] fix: cannot update states of options-api (#395) --- package.json | 2 ++ .../src/components/state/StateFieldViewer.vue | 4 +-- .../applet/src/composables/state-editor.ts | 4 +-- .../src/core/component/state/editor.ts | 9 ++++--- packages/playground/options-api/index.html | 18 +++++++++++++ packages/playground/options-api/package.json | 16 ++++++++++++ .../playground/options-api/public/vite.svg | 1 + packages/playground/options-api/src/App.vue | 11 ++++++++ .../playground/options-api/src/Options.vue | 15 +++++++++++ packages/playground/options-api/src/Setup.vue | 11 ++++++++ packages/playground/options-api/src/main.ts | 4 +++ packages/playground/options-api/src/style.css | 16 ++++++++++++ packages/playground/options-api/uno.config.ts | 20 ++++++++++++++ .../playground/options-api/vite.config.ts | 16 ++++++++++++ pnpm-lock.yaml | 26 +++++++++---------- 15 files changed, 153 insertions(+), 20 deletions(-) create mode 100644 packages/playground/options-api/index.html create mode 100644 packages/playground/options-api/package.json create mode 100644 packages/playground/options-api/public/vite.svg create mode 100644 packages/playground/options-api/src/App.vue create mode 100644 packages/playground/options-api/src/Options.vue create mode 100644 packages/playground/options-api/src/Setup.vue create mode 100644 packages/playground/options-api/src/main.ts create mode 100644 packages/playground/options-api/src/style.css create mode 100644 packages/playground/options-api/uno.config.ts create mode 100644 packages/playground/options-api/vite.config.ts diff --git a/package.json b/package.json index 0179d5e3..9c458bb6 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "stub:applet": "turbo stub --filter=./packages/applet", "stub:vite": "turbo stub --filter=./packages/vite", "stub:devtools-api": "turbo stub --filter=./packages/devtools-api...", + "build:applet": "turbo build --filter=./packages/applet...", "build:shared": "turbo build --filter=./packages/shared...", "build:core": "turbo build --filter=./packages/core...", "build:devtools-kit": "turbo build --filter=./packages/devtools-kit...", @@ -62,6 +63,7 @@ "play:multi-app": "turbo dev --filter=./packages/playground/multi-app", "play:webpack": "turbo dev --filter=./packages/playground/webpack", "play:termui": "turbo dev --filter=./packages/playground/termui", + "play:options-api": "turbo dev --filter=./packages/playground/options-api", "docs": "pnpm -C docs run docs:dev", "docs:build": "pnpm -C docs run docs:build", "zip": "tsx ./scripts/extension-zip.ts", diff --git a/packages/applet/src/components/state/StateFieldViewer.vue b/packages/applet/src/components/state/StateFieldViewer.vue index a9d0face..b0552c01 100644 --- a/packages/applet/src/components/state/StateFieldViewer.vue +++ b/packages/applet/src/components/state/StateFieldViewer.vue @@ -137,7 +137,7 @@ function submit() { path: normalizedPath.value, inspectorId: state.value.inspectorId, type: data.stateType!, - nodeId, + nodeId: nodeId.value, state: { newKey: null!, type: editingType.value, @@ -164,7 +164,7 @@ function submitDrafting() { path: [...normalizedPath.value, draftingNewProp.value.key], inspectorId: state.value.inspectorId, type: data.stateType!, - nodeId, + nodeId: nodeId.value, state: { newKey: draftingNewProp.value.key, type: typeof toSubmit(draftingNewProp.value.value), diff --git a/packages/applet/src/composables/state-editor.ts b/packages/applet/src/composables/state-editor.ts index 8f771bf6..a9ab01c9 100644 --- a/packages/applet/src/composables/state-editor.ts +++ b/packages/applet/src/composables/state-editor.ts @@ -1,5 +1,5 @@ import type { InjectionKey, Ref } from 'vue' -import { inject, provide, ref } from 'vue' +import { computed, inject, provide, ref } from 'vue' interface StateEditorContext { nodeId: string @@ -40,7 +40,7 @@ export function useStateEditor() { editing.value = !editing.value }, editingType, - nodeId: state.value.nodeId, + nodeId: computed(() => state.value.nodeId), } } diff --git a/packages/devtools-kit/src/core/component/state/editor.ts b/packages/devtools-kit/src/core/component/state/editor.ts index 88be3ad7..874f2b97 100644 --- a/packages/devtools-kit/src/core/component/state/editor.ts +++ b/packages/devtools-kit/src/core/component/state/editor.ts @@ -160,10 +160,13 @@ export async function editComponentState(payload: InspectorStateEditorPayload, s let target: Record | undefined // TODO: props - if (instance.devtoolsRawSetupState && Object.keys(instance.devtoolsRawSetupState).includes(path[0])) { - // Setup + + // 1. check if is setup + if (instance.devtoolsRawSetupState && Object.keys(instance.devtoolsRawSetupState).includes(path[0])) target = instance.devtoolsRawSetupState - } + // 2. check if is options + if (instance.data && Object.keys(instance.data).includes(path[0])) + target = instance.data if (target && targetPath) { if (state.type === 'object' && type === 'reactive') { diff --git a/packages/playground/options-api/index.html b/packages/playground/options-api/index.html new file mode 100644 index 00000000..6f4091f5 --- /dev/null +++ b/packages/playground/options-api/index.html @@ -0,0 +1,18 @@ + + + + + + + Vue DevTools Basic Playground + + + +
+ + + diff --git a/packages/playground/options-api/package.json b/packages/playground/options-api/package.json new file mode 100644 index 00000000..433482a8 --- /dev/null +++ b/packages/playground/options-api/package.json @@ -0,0 +1,16 @@ +{ + "name": "playground-options-api", + "type": "module", + "version": "7.2.1", + "private": true, + "scripts": { + "dev": "vite" + }, + "dependencies": { + "vue": "^3.4.27" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^5.0.4", + "vite-plugin-vue-devtools": "workspace:*" + } +} diff --git a/packages/playground/options-api/public/vite.svg b/packages/playground/options-api/public/vite.svg new file mode 100644 index 00000000..e7b8dfb1 --- /dev/null +++ b/packages/playground/options-api/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/playground/options-api/src/App.vue b/packages/playground/options-api/src/App.vue new file mode 100644 index 00000000..3fb11023 --- /dev/null +++ b/packages/playground/options-api/src/App.vue @@ -0,0 +1,11 @@ + + + diff --git a/packages/playground/options-api/src/Options.vue b/packages/playground/options-api/src/Options.vue new file mode 100644 index 00000000..3e45bc72 --- /dev/null +++ b/packages/playground/options-api/src/Options.vue @@ -0,0 +1,15 @@ + + + diff --git a/packages/playground/options-api/src/Setup.vue b/packages/playground/options-api/src/Setup.vue new file mode 100644 index 00000000..6092c895 --- /dev/null +++ b/packages/playground/options-api/src/Setup.vue @@ -0,0 +1,11 @@ + + + diff --git a/packages/playground/options-api/src/main.ts b/packages/playground/options-api/src/main.ts new file mode 100644 index 00000000..01433bca --- /dev/null +++ b/packages/playground/options-api/src/main.ts @@ -0,0 +1,4 @@ +import { createApp } from 'vue' +import App from './App.vue' + +createApp(App).mount('#app') diff --git a/packages/playground/options-api/src/style.css b/packages/playground/options-api/src/style.css new file mode 100644 index 00000000..f0a3c180 --- /dev/null +++ b/packages/playground/options-api/src/style.css @@ -0,0 +1,16 @@ +:root { + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 24px; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; +} diff --git a/packages/playground/options-api/uno.config.ts b/packages/playground/options-api/uno.config.ts new file mode 100644 index 00000000..b1d9fa57 --- /dev/null +++ b/packages/playground/options-api/uno.config.ts @@ -0,0 +1,20 @@ +import { + defineConfig, + presetAttributify, + presetTypography, + presetUno, + transformerDirectives, + transformerVariantGroup, +} from 'unocss' + +export default defineConfig({ + presets: [ + presetUno(), + presetAttributify(), + presetTypography(), + ], + transformers: [ + transformerDirectives(), + transformerVariantGroup(), + ], +}) diff --git a/packages/playground/options-api/vite.config.ts b/packages/playground/options-api/vite.config.ts new file mode 100644 index 00000000..6a32d3a8 --- /dev/null +++ b/packages/playground/options-api/vite.config.ts @@ -0,0 +1,16 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import VueDevTools from 'vite-plugin-vue-devtools' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [ + vue(), + VueDevTools({ + launchEditor: 'code', + }), + ], + server: { + port: 3000, + }, +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d1710919..370bbfa6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -631,6 +631,19 @@ importers: specifier: workspace:* version: link:../../vite + packages/playground/options-api: + dependencies: + vue: + specifier: ^3.4.27 + version: 3.4.27(typescript@5.4.5) + devDependencies: + '@vitejs/plugin-vue': + specifier: ^5.0.4 + version: 5.0.4(vite@5.2.11(@types/node@20.12.12)(sass@1.77.2)(terser@5.26.0))(vue@3.4.27(typescript@5.4.5)) + vite-plugin-vue-devtools: + specifier: workspace:* + version: link:../../vite + packages/playground/termui: dependencies: '@vue/devtools': @@ -1245,7 +1258,6 @@ packages: '@babel/plugin-proposal-class-properties@7.18.6': resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==} engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead. peerDependencies: '@babel/core': ^7.0.0-0 @@ -3394,7 +3406,6 @@ packages: abab@2.0.6: resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==} - deprecated: Use your platform's native atob() and btoa() methods instead abbrev@2.0.0: resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==} @@ -4028,7 +4039,6 @@ packages: consolidate@0.15.1: resolution: {integrity: sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==} engines: {node: '>= 0.10.0'} - deprecated: Please upgrade to consolidate v1.0.0+ as it has been modernized with several long-awaited fixes implemented. Maintenance is supported by Forward Email at https://forwardemail.net ; follow/watch https://github.com/ladjs/consolidate for updates and release changelog peerDependencies: arc-templates: ^0.5.3 atpl: '>=0.7.6' @@ -4543,7 +4553,6 @@ packages: domexception@4.0.0: resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==} engines: {node: '>=12'} - deprecated: Use your platform's native DOMException instead domhandler@4.3.1: resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==} @@ -5376,16 +5385,13 @@ packages: glob@7.1.6: resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==} - deprecated: Glob versions prior to v9 are no longer supported glob@7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} - deprecated: Glob versions prior to v9 are no longer supported glob@8.1.0: resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==} engines: {node: '>=12'} - deprecated: Glob versions prior to v9 are no longer supported global-agent@3.0.0: resolution: {integrity: sha512-PT6XReJ+D07JvGoxQMkT6qji/jVNfX/h364XHZOWeRzy64sSFr+xJ5OX7LI3b4MPQzdL4H8Y8M0xzPpsVMwA8Q==} @@ -5653,7 +5659,6 @@ packages: inflight@1.0.6: resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} - deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful. inherits@2.0.3: resolution: {integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==} @@ -7291,7 +7296,6 @@ packages: rimraf@3.0.2: resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==} - deprecated: Rimraf versions prior to v4 are no longer supported hasBin: true roarr@2.15.4: @@ -7475,7 +7479,6 @@ packages: shiki-es@0.2.0: resolution: {integrity: sha512-RbRMD+IuJJseSZljDdne9ThrUYrwBwJR04FvN4VXpfsU3MNID5VJGHLAD5je/HGThCyEKNgH+nEkSFEWKD7C3Q==} - deprecated: Please migrate to https://github.com/antfu/shikiji shiki@1.6.0: resolution: {integrity: sha512-P31ROeXcVgW/k3Z+vUUErcxoTah7ZRaimctOpzGuqAntqnnSmx1HOsvnbAB8Z2qfXPRhw61yptAzCsuKOhTHwQ==} @@ -7601,7 +7604,6 @@ packages: stable@0.1.8: resolution: {integrity: sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==} - deprecated: 'Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility' stackback@0.0.2: resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==} @@ -8461,7 +8463,6 @@ packages: vue@2.7.15: resolution: {integrity: sha512-a29fsXd2G0KMRqIFTpRgpSbWaNBK3lpCTOLuGLEDnlHWdjB8fwl6zyYZ8xCrqkJdatwZb4mGHiEfJjnw0Q6AwQ==} - deprecated: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details. vue@3.4.27: resolution: {integrity: sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==} @@ -8515,7 +8516,6 @@ packages: webpack-chain@6.5.1: resolution: {integrity: sha512-7doO/SRtLu8q5WM0s7vPKPWX580qhi0/yBHkOxNkv50f6qB76Zy9o2wRTrrPULqYTvQlVHuvbA8v+G5ayuUDsA==} engines: {node: '>=8'} - deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. webpack-dev-middleware@5.3.3: resolution: {integrity: sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==}