Add Devtools for useSubscription
#374
Conversation
… doesn't work...).
| import { plugin as VueCompositionsDevtools } from '@prefecthq/vue-compositions' | ||
|
|
||
| const app = createApp(App) | ||
| if (/*not in production*/) { |
There was a problem hiding this comment.
I think this could be better, but I could use a hand getting this right...
I think ideally you'd just install this plugin onto your app and the plugin itself would no-op if in production and would also hint to a bundler to skip stuff for tree-shaking.
Here's the relevant docs - https://devtools.vuejs.org/plugin/plugins-guide.html#tree-shaking-for-production but I feel like those variables aren't the ones we want? 😕
I looked at a few other codebases - for example, vee-validate's plugin only checks __DEV__. Forgetting what exactly to do here...
obv, the debugtooling would have to be included in prod builds of this package so I don't want to do some check that will ultimately skip including the devtools in the package since an app would use the "production" build of this package.
| // timelineColor: { | ||
| // label: 'Timeline Color', | ||
| // type: 'choice', | ||
| // defaultValue: 0xFF69B4, | ||
| // options: [ | ||
| // { value: 0x4fc08d, label: 'Vue Green' }, | ||
| // { value: 0x175cd3, label: 'Prefect Blue' }, | ||
| // { value: 0xFF69B4, label: 'Hot' } | ||
| // ], | ||
| // component: 'button-group' | ||
| // } |
There was a problem hiding this comment.
We can add plugin settings like this https://devtools.vuejs.org/plugin/plugins-guide.html#plugin-settings
Here I was going to add a toggle to switch the color on the timeline but... changing the layer's color after having created it already isn't supported... 😢 . I thought i'd leave this scaffolding here tho incase some other setting comes to mind to add in.
1 thought I had was a giant list of all timeline events so you could filter down which ones get emitted/tracked. -- things got a lot noisier when I added in the channel update events (loading, error, etc.)
|
|
||
| function getComponentName(vm: ComponentInternalInstance | null): string { | ||
| // @ts-ignore __name is not in the types but works. | ||
| return vm?.type.__name as string ?? vm?.type?.name ?? '🤷🏻♂️ Unknown component' |
There was a problem hiding this comment.
there are some cases where I haven't been able to get the actual component name... I think this might be due to some package linking issues... for example, components in ui-library are built into a prod dist and lose their debug info. or something else entirely i haven't been able to track down.
There is commented code further up which pulls the component names from the vue devtools plugin api - it also doesn't seem to capture all names. Not sure if it's better/worse than this but I'm imagining it'd be slower than just this.
| @@ -16,6 +16,16 @@ | |||
| "editor.codeActionsOnSave": { | |||
| "source.fixAll.eslint": "explicit" | |||
| }, | |||
| "eslint.options": { | |||
There was a problem hiding this comment.
I guess I need these for my vs code to run eslint on save...
b/c by default it's just .js ?
but now i'm slightly confused b/c. ... how dis work before. 🤷
There was a problem hiding this comment.
huh that is weird 🤔 but that's what we have in ui-library 🤷
This PR adds a Vue Devtools plugin for debugging
useSubscription.Enable in-app with:
Custom inspector
Custom timeline layer and events