@nanostores/vue - npm Package Compare versions

Comparing version 0.9.0 to 0.9.1

devtools/index.d.ts

 import type { AnySyncTemplate, MapTemplate, Store } from 'nanostores'
 import type { App } from 'vue'
 
-type AnyStore = Store | MapTemplate | AnySyncTemplate
+type AnyStore = AnySyncTemplate | MapTemplate | Store
 
-export interface StoreNameGetter {
-  (store: AnyStore, templateName: string): string
-}
-
 /**
@@ -31,9 +27,3 @@ * Vue Devtools plugin.
     [key: string]: AnyStore
-  },
-  opts?: {
-    /**
-     * Custom name getter for stores that was built from `MapTemplate`.
-     */
-    nameGetter?: StoreNameGetter
   }
 ): void

devtools/index.js

@@ -0,10 +1,9 @@
+import { setupDevtoolsPlugin } from '@vue/devtools-api'
 import {
-  STORE_UNMOUNT_DELAY,
   lastAction,
-  onBuild,
+  onSet,
   onStart,
   onStop,
-  onSet
+  STORE_UNMOUNT_DELAY
 } from 'nanostores'
-import { setupDevtoolsPlugin } from '@vue/devtools-api'
 
@@ -14,32 +13,20 @@ const layerId = 'nanostores'
 const pluginConfig = {
+  componentStateTypes: ['Nanostores'],
+  enableEarlyProxy: true,
+  homepage: 'https://github.com/nanostores',
   id: 'io.github.nanostores',
   label: 'Nanostores',
+  logo: 'https://nanostores.github.io/nanostores/logo.svg',
   packageName: '@nanostores/vue',
-  homepage: 'https://github.com/nanostores',
-  logo: 'https://nanostores.github.io/nanostores/logo.svg',
   settings: {
+    keepUnmounted: {
+      defaultValue: false,
+      label: 'Keep unmounted',
+      type: 'boolean'
+    },
     realtimeUpdateDetected: {
+      defaultValue: true,
       label: 'Real-time update detected',
-      type: 'boolean',
-      defaultValue: true
-    },
-    keepUnmounted: {
-      label: 'Keep unmounted',
-      type: 'boolean',
-      defaultValue: false
+      type: 'boolean'
     }
-  },
-  enableEarlyProxy: true,
-  componentStateTypes: ['Nanostores']
-}
-const tags = {
-  template: {
-    label: 'Template',
-    textColor: 0xffffff,
-    backgroundColor: 0xbb5100
-  },
-  unmounted: {
-    label: 'Unmounted',
-    textColor: 0xffffff,
-    backgroundColor: 0x5c5c5c
   }
@@ -71,11 +58,11 @@ }
     api.addTimelineLayer({
+      color: 0x1f49e0,
       id: layerId,
-      label: 'Nanostores',
-      color: 0x1f49e0
+      label: 'Nanostores'
     })
 
     api.addInspector({
+      icon: 'storage',
       id: inspectorId,
       label: 'Nanostores',
-      icon: 'storage',
       treeFilterPlaceholder: 'Search for stores'
@@ -123,5 +110,5 @@ })
           payload.instanceData.state.push({
+            editable: true,
+            key: index.toString(),
             type: pluginConfig.componentStateTypes[0],
-            key: index.toString(),
-            editable: true,
             value: store.get()
@@ -185,14 +172,14 @@ })
       api.addTimelineEvent({
-        layerId,
         event: {
-          time: Date.now(),
-          title: storeName,
-          subtitle: 'was mounted',
           data: {
             event: 'mount',
-            storeName,
-            store
+            store,
+            storeName
           },
-          groupId
-        }
+          groupId,
+          subtitle: 'was mounted',
+          time: Date.now(),
+          title: storeName
+        },
+        layerId
       })
@@ -207,14 +194,14 @@ }
         api.addTimelineEvent({
-          layerId,
           event: {
-            time: Date.now(),
-            title: storeName,
-            subtitle: 'was unmounted',
             data: {
               event: 'unmount',
-              storeName,
-              store
+              store,
+              storeName
             },
-            groupId
-          }
+            groupId,
+            subtitle: 'was unmounted',
+            time: Date.now(),
+            title: storeName
+          },
+          layerId
         })
@@ -241,10 +228,10 @@ }
     api.addTimelineEvent({
-      layerId,
       event: {
+        data,
+        groupId,
+        subtitle: 'was changed',
         time: Date.now(),
-        title: storeName,
-        subtitle: 'was changed',
-        data,
-        groupId
-      }
+        title: storeName
+      },
+      layerId
     })
@@ -265,5 +252,5 @@ })
           {
+            editable: true,
             key: 'value',
-            value: store.get(),
-            editable: true
+            value: store.get()
           }
@@ -274,5 +261,5 @@ ]
           ([key, value]) => ({
+            editable: true,
             key,
-            value,
-            editable: true
+            value
           })
@@ -302,85 +289,2 @@ )
 
-function createTemplateLogger(app, api, template, templateName, nameGetter) {
-  let inspectorNode = {
-    id: templateName,
-    label: templateName,
-    tags: [tags.template],
-    children: []
-  }
-  inspectorTree.push(inspectorNode)
-
-  onBuild(template, ({ store }) => {
-    let built = true
-    let childId = `${templateName}:${store.get().id}`
-    let storeName = nameGetter(store, templateName)
-    let groupId = (eventGroups += 1)
-    api.addTimelineEvent({
-      layerId,
-      event: {
-        time: Date.now(),
-        title: storeName,
-        subtitle: `was built by ${templateName}`,
-        data: {
-          event: `build`,
-          storeName,
-          store,
-          by: templateName
-        },
-        groupId
-      }
-    })
-    let childIndex = inspectorNode.children.findIndex(i => i.id === childId)
-    if (childIndex > -1) {
-      inspectorNode.children[childIndex].tags = []
-    } else {
-      childIndex = inspectorNode.children.length
-      inspectorNode.children.push({
-        id: childId,
-        label: storeName,
-        tags: []
-      })
-    }
-    let destroyLogger = createLogger(
-      app,
-      api,
-      store,
-      storeName,
-      groupId,
-      childId
-    )
-    let unbindStop = onStop(store, () => {
-      setTimeout(() => {
-        if (built) {
-          built = false
-          if (api.getSettings().keepUnmounted) {
-            inspectorNode.children[childIndex].tags.push(tags.unmounted)
-          } else {
-            let index = inspectorNode.children.findIndex(i => i.id === childId)
-            index > -1 && inspectorNode.children.splice(index, 1)
-          }
-          api.sendInspectorTree(inspectorId)
-          destroyLogger()
-          unbindStop()
-        }
-      }, STORE_UNMOUNT_DELAY + 1)
-    })
-  })
-
-  api.on.getInspectorState(payload => {
-    if (isValidPayload(payload, app, templateName)) {
-      payload.state = {
-        template: {
-          plural: template.plural,
-          remote: template.remote,
-          offline: template.offline
-        },
-        cache: template.cache
-      }
-      if (template.filters) {
-        payload.state.template.filters = template.filters
-      }
-    }
-  })
-}
-
 function createStoreLogger(app, api, store, storeName) {
@@ -395,14 +299,8 @@ inspectorTree.push({
 
-const defaultNameGetter = (store, templateName) =>
-  `${templateName}:${store.get().id}`
-
-export function attachStores(app, stores, opts = {}) {
+export function attachStores(app, stores) {
   setupDevtoolsPlugin({ ...pluginConfig, app }, api => {
-    let nameGetter = opts.nameGetter || defaultNameGetter
     Object.entries(stores).forEach(([storeName, store]) => {
-      'build' in store
-        ? createTemplateLogger(app, api, store, storeName, nameGetter)
-        : createStoreLogger(app, api, store, storeName)
+      createStoreLogger(app, api, store, storeName)
     })
   })
 }

index.d.ts

@@ -1,3 +0,3 @@
-export { useStore, registerStore } from './use-store/index.js'
+export { mapStores } from './map-stores/index.js'
+export { registerStore, useStore } from './use-store/index.js'
 export { useVModel } from './use-v-model/index.js'
-export { mapStores } from './map-stores/index.js'

index.js

@@ -1,3 +0,3 @@
-export { useStore, registerStore } from './use-store/index.js'
+export { mapStores } from './map-stores/index.js'
+export { registerStore, useStore } from './use-store/index.js'
 export { useVModel } from './use-v-model/index.js'
-export { mapStores } from './map-stores/index.js'

map-stores/index.d.ts

@@ -1,5 +0,5 @@
-import type { AnySyncTemplate, StoreValue, MapStore, Atom } from 'nanostores'
+import type { AnySyncTemplate, Atom, MapStore, StoreValue } from 'nanostores'
 import type { DeepReadonly, Ref } from 'vue'
 
-type AnyStore = Atom | MapStore | AnySyncTemplate
+type AnyStore = AnySyncTemplate | Atom | MapStore
 
@@ -6,0 +6,0 @@ /**

package.json

 {
   "name": "@nanostores/vue",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Vue integration for Nano Stores, a tiny state manager with many atomic tree-shakable stores",
@@ -5,0 +5,0 @@ "keywords": [

use-v-model/index.d.ts

@@ -40,3 +40,3 @@ import type { Store, StoreValue } from 'nanostores'
   Value extends StoreValue<SomeStore>,
-  Keys extends keyof Value | (keyof Value)[] = undefined,
+  Keys extends (keyof Value)[] | keyof Value = undefined,
   Prefix extends string = 'Model'
@@ -43,0 +43,0 @@ >(

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

15892

decreased by-15.3%

Lines of code

496

decreased by-17.74%

Number of low supply chain risk alerts

5

increased by66.67%

No dependency changes