feat: support for stores and observables. enable/disable with stores prop. enabled by default.

Author: ampled

package-lock.json

@@ -4,7 +4,7 @@
   "version": "0.1.1",
   "repository": {
     "type": "git",
-    "url": "https://github.com/ampled/svelte-inspect-value.git"
+    "url": "git+https://github.com/ampled/svelte-inspect-value.git"
   },
   "homepage": "https://inspect.eirik.space",
   "license": "MIT",
@@ -73,6 +73,7 @@
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-svelte": "^3.3.2",
     "publint": "^0.2.0",
+    "rxjs": "^7.8.2",
     "semantic-release": "^24.2.2",
     "shiki": "^2.1.0",
     "svelte": "^5.19.0",

package.json

@@ -2,7 +2,9 @@
   import { browser } from '$app/environment'
   import Inspect from '$lib/Inspect.svelte'
   import type { InspectProps } from '$lib/types.js'
+  import { Observable, interval } from 'rxjs'
   import { onMount } from 'svelte'
+  import { readable, writable } from 'svelte/store'
   import sprite from './media/squirtle.png'
   import audio from './media/squirtle_cry.ogg'
 
@@ -46,7 +48,52 @@
     }
   }
 
+  function customStore(initialValue = 0) {
+    let interval: number | undefined
+    let val = writable(initialValue, () => {
+      if (browser) {
+        interval = setInterval(() => {
+          val.update((n) => n + 1)
+        }, 500)
+      }
+
+      return () => {
+        clearInterval(interval)
+      }
+    })
+
+    return {
+      ...val,
+      set value(v: number) {
+        val.set(v)
+      },
+    }
+  }
+
+  const o = new Observable((subscriber) => {
+    subscriber.next(1)
+    subscriber.next(2)
+    subscriber.next(3)
+    setTimeout(() => {
+      subscriber.next(4)
+      subscriber.complete()
+    }, 1000)
+  })
+
+  const fakeStore = {
+    subscribe: () => {},
+  }
+
   const allTypes = $state({
+    stores: {
+      a: readable('test'),
+      b: writable({ testing: 'haha' }),
+      b2: writable({ testing: 'haha' }),
+      c: customStore(),
+      o,
+      interval: interval(1230),
+      fakeStore,
+    },
     strings: {
       basic: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
       multilineString: 'check\n\tthis\n\t\tout',
@@ -94,6 +141,12 @@
         g: [{ test: 1, a: 2, b: 2 }],
         name: 'a',
       },
+      nestedPromises: {
+        promises: {
+          a: new Promise(() => {}),
+          b: Promise.resolve('foo'),
+        },
+      },
       nestedArrays: [[[[[[[[[[[[[[[[['end']]]]]]]]]]]]]]]]],
     },
     functions: {
@@ -303,6 +356,7 @@
         'spaces in between': ' a    ',
       },
       _: 'underscores are legit',
+      $: 'dollar signs should be legit',
       'asdf\\': 'oo',
       [Symbol('')]: 'agaga',
     },

src/doclib/examples/AllTypes.svelte

@@ -11,7 +11,7 @@
   <p><code>Inspect</code> handles map and set instances.</p>
 
   <Inspect
-    style="width: 400px"
+    style="width: 500px"
     value={{
       map: new Map<unknown, unknown>([
         ['yeah', 1],

src/doclib/examples/MapAndSet.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { browser } from '$app/environment'
+  import Inspect from '$lib/Inspect.svelte'
+  import { type InspectOptions, GLOBAL_OPTIONS_CONTEXT } from '$lib/options.svelte.js'
+  import { fromEvent, map, Observable, startWith } from 'rxjs'
+  import { getContext, onMount } from 'svelte'
+  import type { SvelteMap } from 'svelte/reactivity'
+  import { readable, writable } from 'svelte/store'
+  import ToggleButton from '../../routes/ToggleButton.svelte'
+
+  getContext<SvelteMap<string, string>>('toc')?.set('Stores', 'stores')
+  const globalInspectOptions = getContext<() => InspectOptions>(GLOBAL_OPTIONS_CONTEXT)()
+
+  const setOption =
+    getContext<(name: keyof InspectOptions, value: unknown) => void>('set-global-option')
+
+  function customStore(initialValue = 0) {
+    let interval: number | undefined
+    let val = writable(initialValue, () => {
+      if (browser) {
+        interval = setInterval(() => {
+          val.update((n) => n + 1)
+        }, 500)
+      }
+
+      return () => {
+        clearInterval(interval)
+      }
+    })
+
+    return {
+      ...val,
+      set value(v: number) {
+        val.set(v)
+      },
+    }
+  }
+
+  let eventObservable = $state<Observable<unknown>>()
+
+  onMount(() => {
+    eventObservable = fromEvent(document.body, 'click').pipe(
+      startWith(`0 clicks`),
+      map((_, i) => `${i} clicks`)
+    )
+    let subscription = eventObservable.subscribe()
+
+    const st = writable(0)
+
+    let s = st.subscribe(() => {})
+
+    return () => {
+      subscription.unsubscribe()
+      s()
+    }
+  })
+</script>
+
+<div class="flex col">
+  <h3 id="stores">Stores</h3>
+  <p>
+    Objects with a <code>subscribe</code> function are recognized as stores or observables. The
+    stores will be subscribed to and the latest emitted value will be displayed.<br />
+    If the store does not return a valid
+    <dfn title="function or object with unsubscribe-function">unsubscriber</dfn> or the subscribe-function
+    throws an error the store will be displayed as a regular object using the default object-view.
+  </p>
+
+  <Inspect
+    value={{
+      writableStore: writable('i am the store value'),
+      readableStore: readable({ a: { b: { c: { d: { e: 'end' } } } } }),
+      customStore: customStore(0),
+      clickObservable: eventObservable,
+      fakeStore: {
+        subscribe: () => 'hi',
+      },
+    }}
+    name="stores"
+  />
+
+  <p>
+    This can be enabled / disabled with the <code>stores</code>-prop:
+    <span style="margin-left: 0.5em;">
+      <ToggleButton
+        bind:checked={() => globalInspectOptions.stores, (val) => setOption('stores', val)}
+      >
+        stores
+      </ToggleButton>
+    </span>
+  </p>
+</div>

src/doclib/examples/Stores.svelte

@@ -145,7 +145,7 @@
     ); /* e.g. copy to clipboard */
     --_promise-pending-color: var(--promise-pending-color, var(--base0A));
     --_promise-fulfilled-color: var(--promise-fulfilled-color, var(--base0B));
-    --_promise-rejected-color: var(--promise-rejected-color, var(--base0E));
+    --_promise-rejected-color: var(--promise-rejected-color, var(--base08));
     --_promise-bracket-color: var(--promise-bracket-color, var(--base03));
 
     /* key */
@@ -465,18 +465,6 @@
     &.html {
       padding-inline: 0.5em;
     }
-
-    &.promise {
-      &.rejected {
-        color: var(--_promise-rejected-color);
-      }
-      &.pending {
-        color: var(--_promise-pending-color);
-      }
-      &.fulfilled {
-        color: var(--_promise-fulfilled-color);
-      }
-    }
   }
 
   .svelte-inspect-value :global(a) {

src/lib/Root.svelte

@@ -56,7 +56,7 @@
 
   let attrs = $derived.by(() => {
     if (element.ele) {
-      return Object.entries(element.ele.attributes)
+      return Object.entries(element.ele.attributes ?? {})
         .map(([, attr]) => [attr.name, attr.value])
         .filter(([name]) => !['class', 'style', 'data'].includes(name) && !name.startsWith('data-'))
     }
@@ -82,9 +82,9 @@
   let entries = $derived(
     Object.entries({
       ...Object.fromEntries(attrs),
-      class: element.ele.className.split(' ').filter(Boolean),
+      class: element.ele.className?.split(' ').filter(Boolean) ?? [],
       styles: Object.fromEntries(styles),
-      data: Object.fromEntries(Object.entries(element.ele.dataset)),
+      data: Object.fromEntries(Object.entries(element.ele.dataset ?? {})),
       ...current,
       children: value.children,
     }).filter(([, v]) =>

src/lib/components/HTMLViewSimple.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   // eslint-disable @typescript-eslint/no-explicit-any
   import type { Component } from 'svelte'
-  import { useOptions } from '../options.svelte.js'
-  import { InspectError, type CustomComponents, type TypeViewProps } from '../types.js'
+  import { useOptions, type InspectOptions } from '../options.svelte.js'
+  import { InspectError, type TypeViewProps } from '../types.js'
   import { getType, type ValueType } from '../util.js'
   import Default from './Default.svelte'
   import HtmlView from './HTMLView.svelte'
@@ -22,15 +22,17 @@
 
   const options = useOptions()
 
-  let type: ValueType = $derived(getType(value))
+  let type: ValueType = $derived(getType(value, options.value.stores))
 
+  // FIXME: this is so messy
   function getTypeComponent(
+    value: unknown,
     type: ValueType,
-    custom: CustomComponents,
-    useDefaults: boolean
+    useDefaults: boolean,
+    options: InspectOptions
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ): [Component<TypeViewProps<any>>, Partial<TypeViewProps>] {
-    let entry = getComponent(type, useDefaults ? {} : custom)
+    let entry = getComponent(type, useDefaults ? {} : options.customComponents)
 
     if (entry) {
       let [component, propfn, predicate] = entry
@@ -53,7 +55,7 @@
   }
 
   let [TypeComponent, componentProps] = $derived(
-    getTypeComponent(type, options.value.customComponents, usedefaults)
+    getTypeComponent(value, type, usedefaults, options.value)
   )
   let path = $derived(key != null && prevPath ? [...prevPath, key] : ['root'])
 </script>