Feature: observe stores

.changeset/bright-mayflies-cross.md

@@ -0,0 +1,5 @@
+---
+'@solid-devtools/transform': minor
+---
+
+Remove `wrapStores` transform — tracking stores is handled by the debugger.

.changeset/empty-carrots-attack.md

@@ -0,0 +1,6 @@
+---
+'@solid-devtools/debugger': minor
+'@solid-devtools/shared': minor
+---
+
+Move value serialization logic to debugger

.changeset/real-dolphins-smash.md

@@ -0,0 +1,7 @@
+---
+'@solid-devtools/debugger': patch
+'@solid-devtools/logger': patch
+'@solid-devtools/shared': patch
+---
+
+Move some debugger related types from @solid-devtools/shared to @solid-devtools/debugger

.changeset/wet-camels-confess.md

@@ -0,0 +1,11 @@
+---
+'@solid-devtools/debugger': minor
+'solid-devtools': minor
+'solid-devtools-extension': minor
+'@solid-devtools/frontend': minor
+'@solid-devtools/logger': minor
+'@solid-devtools/overlay': minor
+'@solid-devtools/shared': minor
+---
+
+Move graph types from `@solid-devtools/shared` to `@solid-devtools/debugger`

.changeset/witty-rockets-juggle.md

@@ -0,0 +1,6 @@
+---
+'@solid-devtools/debugger': minor
+'@solid-devtools/frontend': minor
+---
+
+Track and show fine-grain updates to stores in inspected values.

.eslintrc

@@ -0,0 +1,12 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "no-only-tests"],
+  "ignorePatterns": ["node_modules", "dist", "scripts", "examples"],
+  "rules": {
+    "no-console": "warn",
+    "no-debugger": "warn",
+    "@typescript-eslint/no-unused-vars": "warn",
+    "no-only-tests/no-only-tests": "warn"
+  }
+}

.github/workflows/tests.yml

@@ -27,6 +27,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --no-frozen-lockfile
 
+      - name: Lint
+        run: pnpm lint
+
       - name: Run Build and Tests
         run: pnpm run build-test
         env:

.npmrc

@@ -1,2 +1,3 @@
 auto-install-peers=true
 strict-peer-dependencies=false
+link-workspace-packages=deep

configs/tsconfig.base.json

@@ -9,7 +9,6 @@
     "esModuleInterop": true,
     "noEmit": true,
     "skipLibCheck": true,
-    "noUnusedLocals": true,
     "forceConsistentCasingInFileNames": true
   }
 }

configs/tsup.config.ts

@@ -28,6 +28,7 @@ export default ({
   return defineConfig(config => {
     const options: Options = {
       clean: config.watch ? false : true,
+      minify: config.watch ? false : true,
       dts: {
         entry: [entry, ...mappedAdditionalEntries],
       },

examples/clock/package.json

@@ -17,6 +17,6 @@
   },
   "dependencies": {
     "solid-devtools": "workspace:^0.20.1",
-    "solid-js": "^1.6.0"
+    "solid-js": "^1.6.2"
   }
 }

examples/sandbox/package.json

@@ -15,6 +15,7 @@
     "@babel/plugin-syntax-typescript": "^7.18.6",
     "@solid-devtools/transform": "workspace:^0.7.5",
     "typescript": "^4.8.4",
+    "unocss": "^0.46.3",
     "vite": "^3.1.8",
     "vite-plugin-solid": "^2.3.10"
   },
@@ -24,6 +25,6 @@
     "@solid-devtools/overlay": "workspace:^0.0.7",
     "@solid-primitives/timer": "^1.3.4",
     "solid-devtools": "workspace:^0.20.1",
-    "solid-js": "^1.6.0"
+    "solid-js": "^1.6.2"
   }
 }

examples/sandbox/src/App.tsx

@@ -15,6 +15,8 @@ import {
 import Todos from './Todos'
 import { disposeApp } from '.'
 import { ThemeExample } from './Theme'
+import { createMutable } from 'solid-js/store'
+import Recursive from './Recursive'
 
 const doMediumCalc = () => {
   Array.from({ length: 1000000 }, (_, i) => i).sort(() => Math.random() - 5)
@@ -62,24 +64,51 @@ const PassChildren: ParentComponent = props => {
 }
 
 const Article: Component = () => {
+  const state = createMutable({
+    count: 0,
+    other: { name: 'article' },
+    content: {
+      title: 'A cool headline for testing :)',
+      body: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem odio culpa vel vitae? Quis deleniti soluta rem velit necessitatibus? ',
+    },
+  })
+
   return (
     <article>
-      <h3>A cool headline for testing :)</h3>
+      <h3>{state.content.title}</h3>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem odio culpa vel vitae? Quis
-        deleniti soluta rem velit necessitatibus?{' '}
+        {state.content.body}
         <PassChildren>
           <b>
             Saepe nulla omnis nobis minima perferendis odio doloremque deleniti dolore corrupti.
           </b>
         </PassChildren>
       </p>
+      {/* <p>Count: {state.count}</p> */}
+      <p>
+        <button onClick={() => state.count++}>Increment article count</button>
+      </p>
     </article>
   )
 }
 
-const obj = {
-  comp: () => <div>This is an object property component</div>,
+const DynamicSpreadParent = () => {
+  const [props, setProps] = createSignal<any>({
+    a: 1,
+    b: 2,
+    c: 3,
+    style: { width: '160px', height: '30px', background: '#fcb', color: 'black' },
+    textContent: 'Before Change',
+    onclick: () =>
+      setProps({
+        style: { width: '160px', height: '30px', background: '#eba', color: 'black' },
+        textContent: 'After Change',
+        d: 4,
+        e: 5,
+      }),
+  })
+  const DynamicSpreadChild = (props: any) => <div {...props} />
+  return <DynamicSpreadChild {...props()} />
 }
 
 const App: Component = () => {
@@ -145,7 +174,7 @@ const App: Component = () => {
 					</PassChildren>
 				</div> */}
       </div>
-      <obj.comp />
+      <DynamicSpreadParent />
       <button onClick={() => setRootCount(p => ++p)}>Update root count</button>
       <button onClick={() => disposeOuterRoot()}>Dispose OUTSIDE_ROOT</button>
       <Article />
@@ -156,6 +185,7 @@ const App: Component = () => {
       <div style={{ margin: '24px' }}>
         <ThemeExample />
       </div>
+      <Recursive />
     </>
   )
 }

examples/sandbox/src/Recursive.tsx

@@ -0,0 +1,101 @@
+import { Component, For, splitProps, mergeProps, createContext, useContext } from 'solid-js'
+import { createStore } from 'solid-js/store'
+
+type NodeType = {
+  id: number
+  children?: Array<NodeType>
+  parents?: Array<number>
+}
+
+let id: number = 3
+
+interface genNodePathInterface {
+  nodeId: number
+  parentsPath?: Array<number>
+  accessKey?: string
+}
+function genNodePath({ nodeId, parentsPath = [], accessKey = 'children' }: genNodePathInterface) {
+  let path = parentsPath.concat(nodeId)
+  let nodePath: Array<Function | string> = []
+  path.forEach(id => {
+    nodePath.push(...[(child: NodeType) => child.id === id, accessKey])
+  })
+  return nodePath
+}
+
+// Printed url path
+function genNodeUrl(nodeProps: any) {
+  let urlFormat = `${nodeProps.id}`
+  let url = nodeProps?.url ? [...nodeProps.url, urlFormat] : [urlFormat]
+  return url
+}
+
+// Recursive component
+const Node: Component<NodeType> = props => {
+  let [childrenProps, nodeProps] = splitProps(props, ['children'])
+  // To store local component signals
+  type nodeSignalsType = {
+    parents: Array<number>
+    url: Array<string>
+  }
+  const [nodeSignals, setNodeSignals] = createStore<nodeSignalsType>({
+    parents: nodeProps?.parents ? nodeProps?.parents : [],
+    url: genNodeUrl(nodeProps),
+  })
+
+  const addNode = useContext(RecursiveContext)
+
+  return (
+    <div class="border-2 rounded-lg p-1 space-y-1 m-1">
+      <p>{nodeSignals.url.join(' > ')}</p>
+      <For each={childrenProps.children}>
+        {node => {
+          const childProps = mergeProps(
+            {
+              parents: [...nodeSignals.parents, nodeProps.id],
+              url: nodeSignals.url,
+            },
+            node,
+          )
+          return <Node {...childProps} />
+        }}
+      </For>
+      <button
+        class="rounded-full bg-slate-300 px-2"
+        onClick={e => addNode(nodeProps.id, nodeSignals.parents)}
+      >
+        Add item
+      </button>
+    </div>
+  )
+}
+
+const RecursiveContext = createContext<(nodeId: number, parentsPath: number[]) => void>(() => {})
+
+const Recursive: Component = props => {
+  const [data, setData] = createStore<NodeType[]>([
+    {
+      id: 0,
+      children: [
+        { id: 1, children: [{ id: 2, children: [] }] },
+        { id: 3, children: [] },
+      ],
+    },
+  ])
+
+  const addNode = (nodeId: number, parentsPath: number[]) => {
+    setData(
+      // @ts-ignore
+      ...genNodePath({ nodeId, parentsPath }),
+      (children: any) => [...children, { id: ++id, children: [] }],
+    )
+  }
+
+  return (
+    <RecursiveContext.Provider value={addNode}>
+      <For each={data}>{page => <Node {...page} />}</For>
+    </RecursiveContext.Provider>
+  )
+}
+
+export default Recursive

examples/sandbox/src/Theme.tsx

@@ -30,23 +30,16 @@ export const ThemeProvider: ParentComponent<{
   color?: string
   title?: string
 }> = props => {
-  const [color, setColor] = createSignal(props.color ?? defaultState.color)
-  const [title, setTitle] = createSignal(props.title ?? defaultState.title)
+  const [theme, setTheme] = createStore({
+    color: props.color || defaultState.color,
+    title: props.title || defaultState.title,
+  })
 
-  const changeColor = (color: string) => setColor(color)
-  const changeTitle = (title: string) => setTitle(title)
-
-  const state = {
-    get color() {
-      return color()
-    },
-    get title() {
-      return title()
-    },
-  }
+  const changeColor = (color: string) => setTheme('color', color)
+  const changeTitle = (title: string) => setTheme('title', title)
 
   return (
-    <ThemeContext.Provider value={[state, { changeColor, changeTitle }]}>
+    <ThemeContext.Provider value={[theme, { changeColor, changeTitle }]}>
       {props.children}
     </ThemeContext.Provider>
   )