feat: add more functionality to the vue-devtools

docs/src/integrations/vue-devtools.md

@@ -5,4 +5,4 @@
 Meanwhile please checkout the [hacky playground example](https://github.com/h2xd/exposition/blob/main/playground/src/main.ts).
 :::
 
-<<< ../playground/src/main.ts#vue-devtools{5-6}
+<<< ../playground/src/main.ts#vue-devtools{5-13}

packages/integrations/msw/functions/defineMSWIntegration.spec.ts

@@ -23,11 +23,9 @@ beforeAll(() => {
       rest.get('https://api.example.com/account', (_request, response, context) => {
         switch (values.user) {
           case 'authorized':
-            context.status(200)
             return response(context.json({ name: 'Spanky 🐕' }))
           case 'unauthorized':
-            context.status(401)
-            return response(context.json({}))
+            return response(context.status(401))
         }
       }),
     ]
@@ -45,9 +43,20 @@ it('should return an authorized code by default', async () => {
 })
 
 it('should return an 401 when set to unauthorized', async () => {
-  integration.updateValues({ user: 'unauthorized' }).then(async () => {
-    const response = await fetch('https://api.example.com/account')
+  integration.updateValues({ user: 'unauthorized' })
 
-    expect(response.status).toBe(401)
-  })
+  const response = await fetch('https://api.example.com/account')
+
+  expect(response.status).toBe(401)
+})
+
+it('should use no handler if explicitly called', async () => {
+  await integration.useNoHandlers()
+
+  try {
+    await fetch('/')
+  }
+  catch (error) {
+    expect(error).toBeDefined()
+  }
 })

packages/integrations/msw/functions/defineMSWIntegration.ts

@@ -21,49 +21,38 @@ export function defineMSWIntegration<T extends Exposition<ExpositionConfig>>(opt
     return resetValues()
   }
 
-  async function assignHandler(values: ExpositionValues<T>, delay = 10): Promise<void> {
-    return new Promise((resolve, reject) => {
-      try {
-        const handlerList = [...internalHandler, ...handlers].reduce((accumulator, handler) => {
-          return [
-            ...accumulator,
-            ...handler(values),
-          ]
-        }, [] as Handler[])
-
-        msw.use(...handlerList)
+  function assignHandler(values: ExpositionValues<T>): void {
+    const handlerList = [...internalHandler, ...handlers].reduce((accumulator, handler) => {
+      return [
+        ...accumulator,
+        ...handler(values),
+      ]
+    }, [] as Handler[])
+
+    msw.use(...handlerList)
+  }
 
-        /**
-         * Important! 🧦
-         * MSW seems to need some time to apply all handler.
-         * For that we mimic a `nextTick` functionality that exists in your
-         * favorite Frontend Framework.
-         * BUT, with a much simpler approach.
-         */
-        setTimeout(resolve, delay)
-      }
-      catch (error) {
-        console.error(error)
-        reject(error)
-      }
-    })
+  function useNoHandlers(): void {
+    msw.resetHandlers()
+    msw.use()
   }
 
   function createHandler(handler: (values: ExpositionValues<T>) => Handler[]): void {
     internalHandler.push(handler)
   }
 
-  async function updateValues<TValues extends ExpositionValues<T>>(newValues: TValues): Promise<void> {
-    return assignHandler(newValues)
+  function updateValues<TValues extends ExpositionValues<T>>(newValues: TValues): void {
+    assignHandler(newValues)
   }
 
-  async function resetValues(): Promise<void> {
-    return assignHandler(getExpositionValues(exposition))
+  function resetValues(): void {
+    assignHandler(getExpositionValues(exposition))
   }
 
   return {
     createHandler,
     updateValues,
+    useNoHandlers,
     resetValues,
     init,
   }

packages/integrations/package.json

@@ -42,8 +42,7 @@
   "sideEffects": false,
   "dependencies": {
     "@exposition/core": "workspace:*",
-    "@exposition/web": "workspace:*",
-    "debug": "^4.3.4"
+    "@exposition/web": "workspace:*"
   },
   "peerDependencies": {
     "@vue/devtools-api": "^6.0.0-beta.14",
@@ -59,7 +58,6 @@
   },
   "devDependencies": {
     "@rollup/plugin-json": "^4.1.0",
-    "@types/debug": "^4.1.7",
     "@vue/devtools-api": "^6.2.0",
     "cross-env": "^7.0.3",
     "esbuild": "^0.12.9",

packages/integrations/vue-devtools/index.ts

@@ -1 +1,40 @@
-export { setupDevtools } from './functions/setupDevtools'
+import { setupDevtoolsPlugin } from '@vue/devtools-api'
+import type { Exposition } from '@exposition/core'
+
+import type { DevtoolsContext, OnUpdateHandler } from './src/@types/api'
+import { defineDevtoolsSettingsState, defineExpositionState } from './src/states'
+import { updateState } from './src/utils'
+import { expositionLabel, id, stateType } from './src/config'
+import { createInspectorViews, createSettingsViews, createTimelineViews } from './src/views'
+
+export function setupDevtools<T extends Exposition<any>>(app: any, options: { exposition: T; onUpdate: OnUpdateHandler<T> }) {
+  const settings = defineDevtoolsSettingsState()
+  const state = defineExpositionState(options.exposition)
+
+  return setupDevtoolsPlugin({
+    id,
+    label: expositionLabel,
+    packageName: '@exposition/vue-devtools',
+    homepage: 'https://h2xd.github.io/exposition/integrations/vue-devtools.html',
+    componentStateTypes: [stateType],
+    app,
+  }, (api) => {
+    const context: DevtoolsContext<T> = {
+      api,
+      settings,
+      state,
+      onUpdate: options.onUpdate,
+    }
+
+    function main(): void {
+      createSettingsViews(context)
+      createTimelineViews(context)
+      createInspectorViews(context)
+
+      state.loadFromStore()
+      updateState(context)
+    }
+
+    main()
+  })
+}