feat: support Vue Devtools Next

nanostores · Oct 31, 2024 · 8589943 · 8589943
1 parent b730a63
commit 8589943
Show file tree

Hide file tree

Showing 18 changed files with 3,013 additions and 1,558 deletions.
diff --git a/.npmignore b/.npmignore
@@ -2,6 +2,7 @@ pnpm-lock.yaml
 tsconfig.json
 vitest.config.ts
 
+demo/
 coverage/
 img/
 **/*.test.*

diff --git a/demo/components/App.vue b/demo/components/App.vue
@@ -0,0 +1,38 @@
+<template>
+  <div id="view">
+    <logo />
+    <with-stores v-if="isStoresMounted" />
+    <button @click="executeTest">
+      Execute Test
+    </button>
+    <button @click="toggleStores">
+      {{ isStoresMounted ? 'Unmount' : 'Mount' }} Stores
+    </button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import Logo from './Logo.vue'
+import WithStores from './WithStores.vue';
+
+import { run } from '../stores.js'
+
+const isStoresMounted = ref(false)
+
+function executeTest() {
+  run()
+}
+
+function toggleStores() {
+  isStoresMounted.value = !isStoresMounted.value
+}
+</script>
+
+<style scoped>
+#view {
+  display: grid;
+  gap: 1rem;
+}
+</style>
diff --git a/demo/components/Logo.vue b/demo/components/Logo.vue
@@ -0,0 +1,19 @@
+<template>
+  <svg id="logo" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+    <path id="p" d="M107.785 154 48.8 112.698 83.353 99.22l50.559 35.401L107.785 154ZM92.415 46l58.984 41.302-34.553 13.478-50.559-35.4L92.414 46Z"/>
+  </svg>
+</template>
+
+<style scoped>
+#logo {
+  #p {
+    fill: #000;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    #p {
+      fill: #fff;
+    }
+  }
+}
+</style>
diff --git a/demo/components/WithStores.vue b/demo/components/WithStores.vue
@@ -0,0 +1,11 @@
+<template></template>
+
+<script lang="ts" setup>
+import { useStore } from '../../use-store';
+import { $atom, $map, $deepMap } from '../stores.js'
+
+const atom = useStore($atom)
+const map = useStore($map)
+const deepMap = useStore($deepMap)
+</script>
+
diff --git a/demo/env.d.ts b/demo/env.d.ts
@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  let component: DefineComponent
+  export default component
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Nano Stores Demo</title>
+    <style>
+      html {
+        height: 100%;
+      }
+      body {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100%;
+        margin: 0;
+        background: #fff;
+      }
+      @media (prefers-color-scheme: dark) {
+        body {
+          background: #000;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./index.ts"></script>
+  </body>
+</html>
diff --git a/demo/index.ts b/demo/index.ts
@@ -0,0 +1,15 @@
+import { createApp } from "vue";
+
+import { devtools } from "../devtools/index.js";
+import App from "./components/App.vue";
+import { $atom, $deepMap, $map } from "./stores.js";
+
+const app = createApp(App)
+
+app.use(devtools, {
+  $atom,
+  $deepMap,
+  $map
+})
+
+app.mount('#app')
diff --git a/demo/stores.ts b/demo/stores.ts
@@ -0,0 +1,56 @@
+import { delay } from 'nanodelay'
+import { atom, deepMap, map, STORE_UNMOUNT_DELAY } from 'nanostores'
+
+export let $atom = atom()
+export let $map = map({
+  artworks: 213,
+  fullname: 'Nikolay Suetin',
+  id: 'A10',
+  username: 'suetin'
+})
+export let $deepMap = deepMap<{
+  artists: {
+    [key: string]: {
+      artworks: string[]
+      movement: null | string
+    }
+  }
+}>({
+  artists: {
+    malevich: {
+      artworks: ['Black Square'],
+      movement: null
+    }
+  }
+})
+
+export async function run(): Promise<void> {
+  let unbindAtom = $atom.listen(() => {})
+  $atom.set(100)
+  $atom.set(101)
+  $atom.set(Number($atom.get()) + 1)
+  $atom.set(Number($atom.get()) + 1)
+  $atom.set(Number($atom.get()) + 1)
+  unbindAtom()
+  await delay(STORE_UNMOUNT_DELAY + 10)
+
+  $map.setKey('artworks', 303)
+
+  await delay(STORE_UNMOUNT_DELAY)
+  $map.setKey('username', 'chashnik')
+  $map.setKey('fullname', 'Ilya Chashnik')
+
+  await delay(STORE_UNMOUNT_DELAY)
+  $map.setKey('username', 'malevich')
+  $map.setKey('fullname', 'Kazimir Malevich')
+
+  $deepMap.setKey('artists.malevich.movement', 'Suprematism')
+
+  let artworks = ['White on White', 'Suprematist Composition', 'Black Circle']
+  for (let item of artworks) {
+    await delay(100)
+    let index = $deepMap.get().artists.malevich.artworks.length
+    $deepMap.setKey(`artists.malevich.artworks[${index}]`, item)
+  }
+  await delay(STORE_UNMOUNT_DELAY + 10)
+}
diff --git a/demo/vite.config.ts b/demo/vite.config.ts
@@ -0,0 +1,10 @@
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools()
+  ]
+})
diff --git a/devtools/index.d.ts b/devtools/index.d.ts
@@ -38,7 +38,7 @@ interface DevtoolsOptions extends CreatorLoggerOptions, LoggerOptions {
  */
 export function devtools(
   app: App,
-  stores: {
+  stores?: {
     [key: string]: AnyStore | MapCreator
   },
   opts?: DevtoolsOptions

diff --git a/devtools/index.js b/devtools/index.js
@@ -101,48 +101,6 @@ function createLogger(
     store,
     storeName,
     {
-      action: {
-        end: ({ actionId, actionName }) => {
-          api.addTimelineEvent({
-            event: {
-              groupId: actionId,
-              subtitle: 'action was ended',
-              time: api.now(),
-              title: actionName
-            },
-            layerId: LAYER_ID
-          })
-        },
-
-        error: ({ actionId, actionName, error }) => {
-          api.addTimelineEvent({
-            event: {
-              data: {
-                message: error.message
-              },
-              groupId: actionId,
-              logType: 'error',
-              subtitle: 'action handled error',
-              time: api.now(),
-              title: actionName
-            },
-            layerId: LAYER_ID
-          })
-        },
-
-        start: ({ actionId, actionName }) => {
-          api.addTimelineEvent({
-            event: {
-              groupId: actionId,
-              subtitle: 'action was started',
-              time: api.now(),
-              title: actionName
-            },
-            layerId: LAYER_ID
-          })
-        }
-      },
-
       change: ({ actionId, changed, newValue, oldValue, valueMessage }) => {
         let data = {
           changed,
@@ -372,6 +330,26 @@ export function devtools(app, storesOrCreators, opts = {}) {
   setupDevtoolsPlugin({ ...PLUGIN_CONFIG, app }, _api => {
     api = _api
 
+    if (storesOrCreators) {
+      for (let [storeName, store] of Object.entries(storesOrCreators)) {
+        let inspectorNode = {
+          children: [],
+          id: getNodeId(),
+          label: storeName,
+          tags: []
+        }
+
+        inspectorTree.push(inspectorNode)
+        api.sendInspectorTree(INSPECTOR_ID)
+
+        if (isCreator(store)) {
+          createCreatorLogger(api, app, store, storeName, inspectorNode, opts)
+        } else {
+          createLogger(api, app, store, storeName, inspectorNode, opts)
+        }
+      }
+    }
+
     api.addTimelineLayer({
       color: 0x0059d1,
       id: LAYER_ID,
@@ -487,24 +465,4 @@ export function devtools(app, storesOrCreators, opts = {}) {
       }
     })
   })
-
-  if (storesOrCreators) {
-    for (let [storeName, store] of Object.entries(storesOrCreators)) {
-      let inspectorNode = {
-        children: [],
-        id: getNodeId(),
-        label: storeName,
-        tags: []
-      }
-
-      inspectorTree.push(inspectorNode)
-      api.sendInspectorTree(INSPECTOR_ID)
-
-      if (isCreator(store)) {
-        createCreatorLogger(api, app, store, storeName, inspectorNode, opts)
-      } else {
-        createLogger(api, app, store, storeName, inspectorNode, opts)
-      }
-    }
-  }
 }
diff --git a/devtools/types.ts b/devtools/types.ts
@@ -11,7 +11,6 @@ devtools(
   { $atom },
   {
     getCreatorInspectorState: () => {},
-    ignoreActions: ['Increase Counter'],
     messages: {
       build: false
     }
@@ -23,7 +22,6 @@ app.use(
   { $atom },
   {
     getCreatorInspectorState: () => {},
-    ignoreActions: ['Increase Counter'],
     messages: {
       build: false
     }

diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,8 @@
+import eslintConfigLogux from '@logux/eslint-config/ts'
+
+export default [
+  {
+    ignores: ['**/errors.ts']
+  },
+  ...eslintConfigLogux
+]