feat: support Vue Devtools Next

.github/workflows/release.yml

@@ -0,0 +1,49 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - '*'
+
+permissions:
+  contents: write
+
+jobs:
+  release:
+    name: Release On Tag
+    if: startsWith(github.ref, 'refs/tags/')
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@v4
+
+      - name: Extract the changelog
+        id: changelog
+        run: |
+          TAG_NAME=${GITHUB_REF/refs\/tags\//}
+          READ_SECTION=false
+          CHANGELOG=""
+          while IFS= read -r line; do
+            if [[ "$line" =~ ^#+\ +(.*) ]]; then
+              if [[ "${BASH_REMATCH[1]}" == "$TAG_NAME" ]]; then
+                READ_SECTION=true
+              elif [[ "$READ_SECTION" == true ]]; then
+                break
+              fi
+            elif [[ "$READ_SECTION" == true ]]; then
+              CHANGELOG+="$line"$'\n'
+            fi
+          done < "CHANGELOG.md"
+          CHANGELOG=$(echo "$CHANGELOG" | awk '/./ {$1=$1;print}')
+          echo "changelog_content<<EOF" >> $GITHUB_OUTPUT
+          echo "$CHANGELOG" >> $GITHUB_OUTPUT
+          echo "EOF" >> $GITHUB_OUTPUT
+
+      - name: Create the release
+        if: steps.changelog.outputs.changelog_content != ''
+        uses: softprops/action-gh-release@v1
+        with:
+          name: ${{ github.ref_name }}
+          body: '${{ steps.changelog.outputs.changelog_content }}'
+          draft: false
+          prerelease: false

.github/workflows/test.yml

@@ -6,27 +6,30 @@ on:
       - main
   pull_request:
 
+permissions:
+  contents: read
+
 jobs:
   full:
     name: Node.js Latest Full
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
-          version: latest
+          version: 9
 
       - name: Install Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: pnpm
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile --ignore-scripts
+        run: pnpm install --ignore-scripts
 
       - name: Run tests
         run: pnpm test
@@ -35,25 +38,25 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18]
+        node-version: [20, 18]
     name: Node.js ${{ matrix.node-version }} Quick
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v4
         with:
           version: latest
 
       - name: Install Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
           cache: pnpm
 
       - name: Install dependencies
-        run: pnpm install --frozen-lockfile --ignore-scripts
+        run: pnpm install --ignore-scripts
 
       - name: Run unit tests
         run: pnpm test

.npmignore

@@ -2,6 +2,7 @@ pnpm-lock.yaml
 tsconfig.json
 vitest.config.ts
 
+demo/
 coverage/
 img/
 **/*.test.*

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>

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>

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>
+

demo/env.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  let component: DefineComponent
+  export default component
+}

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>

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')

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)
+}

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()
+  ]
+})

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