Skip to content

Commit

Permalink
fix: cannot update states of options-api (#395)
Browse files Browse the repository at this point in the history
  • Loading branch information
alexzhang1030 authored Jun 5, 2024
1 parent 3fb3229 commit f138c20
Show file tree
Hide file tree
Showing 15 changed files with 153 additions and 20 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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...",
Expand Down Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions packages/applet/src/components/state/StateFieldViewer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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),
Expand Down
4 changes: 2 additions & 2 deletions packages/applet/src/composables/state-editor.ts
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -40,7 +40,7 @@ export function useStateEditor() {
editing.value = !editing.value
},
editingType,
nodeId: state.value.nodeId,
nodeId: computed(() => state.value.nodeId),
}
}

Expand Down
9 changes: 6 additions & 3 deletions packages/devtools-kit/src/core/component/state/editor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -160,10 +160,13 @@ export async function editComponentState(payload: InspectorStateEditorPayload, s
let target: Record<string, unknown> | 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') {
Expand Down
18 changes: 18 additions & 0 deletions packages/playground/options-api/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue DevTools Basic Playground</title>
</head>
<style>
html {
color-scheme: dark;
}
</style>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
16 changes: 16 additions & 0 deletions packages/playground/options-api/package.json
Original file line number Diff line number Diff line change
@@ -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:*"
}
}
1 change: 1 addition & 0 deletions packages/playground/options-api/public/vite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions packages/playground/options-api/src/App.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script setup lang="ts">
import Options from './Options.vue'
import Setup from './Setup.vue'
</script>

<template>
<div>
<Options />
<Setup />
</div>
</template>
15 changes: 15 additions & 0 deletions packages/playground/options-api/src/Options.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<script lang="ts">
export default {
data() {
return {
name: 'Vue',
}
},
}
</script>

<template>
<div>
Options: {{ name }}
</div>
</template>
11 changes: 11 additions & 0 deletions packages/playground/options-api/src/Setup.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script setup lang="ts">
import { ref } from 'vue'
const name = ref('Vue')
</script>

<template>
<div>
Setup: {{ name }}
</div>
</template>
4 changes: 4 additions & 0 deletions packages/playground/options-api/src/main.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
16 changes: 16 additions & 0 deletions packages/playground/options-api/src/style.css
Original file line number Diff line number Diff line change
@@ -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%;
}
20 changes: 20 additions & 0 deletions packages/playground/options-api/uno.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import {
defineConfig,
presetAttributify,
presetTypography,
presetUno,
transformerDirectives,
transformerVariantGroup,
} from 'unocss'

export default defineConfig({
presets: [
presetUno(),
presetAttributify(),
presetTypography(),
],
transformers: [
transformerDirectives(),
transformerVariantGroup(),
],
})
16 changes: 16 additions & 0 deletions packages/playground/options-api/vite.config.ts
Original file line number Diff line number Diff line change
@@ -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,
},
})
26 changes: 13 additions & 13 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit f138c20

Please sign in to comment.