From ac36b2a520cada566e99999ea55b54fbfed8031f Mon Sep 17 00:00:00 2001
From: Damian Tarnawski <gthetarnav@gmail.com>
Date: Sat, 28 Dec 2024 11:33:53 +0100
Subject: [PATCH] Cleanup sandbox and walker

---
 .vscode/settings.json                     |   1 +
 examples/sandbox/src/App.tsx              | 162 ++++++++++------------
 examples/sandbox/src/Todos.tsx            |  97 ++++++-------
 packages/debugger/src/structure/walker.ts |  60 ++++----
 4 files changed, 152 insertions(+), 168 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 610f7f8e..128fa058 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -10,6 +10,7 @@
         "outin",
         "sarif",
         "stefanzweifel",
+        "sweb",
         "taze",
         "todomvc",
         "twind",
diff --git a/examples/sandbox/src/App.tsx b/examples/sandbox/src/App.tsx
index 5fb3757b..3c0e6f7a 100644
--- a/examples/sandbox/src/App.tsx
+++ b/examples/sandbox/src/App.tsx
@@ -1,55 +1,43 @@
-import {
-    type Component,
-    createComponent,
-    createComputed,
-    createEffect,
-    createMemo,
-    createRenderEffect,
-    createResource,
-    createRoot,
-    createSignal,
-    ErrorBoundary,
-    type ParentComponent,
-    type Setter,
-    Show,
-    Suspense,
-} from 'solid-js'
+import * as s from 'solid-js'
 import {createMutable} from 'solid-js/store'
+import * as sweb from 'solid-js/web'
 import Recursive from './Recursive.tsx'
 import {ThemeExample} from './Theme.tsx'
-import Todos from './Todos.tsx'
+
+// import Todos from './Todos.tsx'
+const Todos = s.lazy(() => import('./Todos.tsx'))
 
 const doMediumCalc = () => {
     Array.from({length: 1000000}, (_, i) => i).sort(() => Math.random() - 5)
 }
 
-let setRootCount: Setter<number>
+let setRootCount: s.Setter<number>
 let disposeOuterRoot: VoidFunction
 
-createRoot(dispose => {
+s.createRoot(dispose => {
     disposeOuterRoot = dispose
 
-    const [count, setCount] = createSignal(0)
+    const [count, setCount] = s.createSignal(0)
     setRootCount = setCount
 
     function createEffectInRoot(dispose: VoidFunction) {
-        createEffect(() => count() === 4 && dispose(), undefined, {})
+        s.createEffect(() => count() === 4 && dispose(), undefined, {})
 
-        createRoot(_ => {
-            createEffect(() => count())
+        s.createRoot(_ => {
+            s.createEffect(() => count())
         })
     }
 
-    createEffect(() => {
+    s.createEffect(() => {
         count()
         if (count() === 1) {
-            createRoot(createEffectInRoot)
+            s.createRoot(createEffectInRoot)
         }
     }, undefined)
 })
 
 const Button = (props: {text: string; onClick: VoidFunction}) => {
-    const text = createMemo(() => <span>{props.text}</span>)
+    const text = s.createMemo(() => <span>{props.text}</span>)
     return (
         <button aria-label={props.text} onClick={props.onClick}>
             {text()}
@@ -57,9 +45,9 @@ const Button = (props: {text: string; onClick: VoidFunction}) => {
     )
 }
 
-const PassChildren: ParentComponent = props => props.children
+const PassChildren: s.ParentComponent = props => props.children
 
-const Article: Component = () => {
+const Article: s.Component = () => {
     const state = createMutable({
         count: 0,
         other: {name: 'article'},
@@ -70,7 +58,7 @@ const Article: Component = () => {
     })
     ;(state as any).circular = state
 
-    const [data] = createResource(
+    const [data] = s.createResource(
         () => state.count,
         async c => {
             await new Promise(r => setTimeout(r, 1000))
@@ -90,19 +78,19 @@ const Article: Component = () => {
                 </b>
             </p>
             {/* <p>Count: {state.count}</p> */}
-            <Suspense>
+            <s.Suspense>
                 <p>
                     <PassChildren>
                         <button onClick={() => state.count++}>Increment {data()}</button>
                     </PassChildren>
                 </p>
-            </Suspense>
+            </s.Suspense>
         </article>
     )
 }
 
 const DynamicSpreadParent = () => {
-    const [props, setProps] = createSignal<any>({
+    const [props, setProps] = s.createSignal<any>({
         a: 1,
         b: 2,
         c: 3,
@@ -120,17 +108,17 @@ const DynamicSpreadParent = () => {
     return <DynamicSpreadChild {...props()} />
 }
 
-const Broken: Component = () => {
+const Broken: s.Component = () => {
     throw new Error('Oh No')
 }
 
-const App: Component = () => {
-    const [count, setCount] = createSignal(0)
-    const [showEven, setShowEven] = createSignal(false)
-    const fnSig = createSignal({fn: () => {}}, {equals: (a, b) => a.fn === b.fn})
-    const nullSig = createSignal(null)
-    const symbolSig = createSignal(Symbol('hello-symbol'))
-    const [header, setHeader] = createSignal(
+const App: s.Component = () => {
+    const [count, setCount] = s.createSignal(0)
+    const [showEven, setShowEven] = s.createSignal(false)
+    const fnSig = s.createSignal({fn: () => {}}, {equals: (a, b) => a.fn === b.fn})
+    const nullSig = s.createSignal(null)
+    const symbolSig = s.createSignal(Symbol('hello-symbol'))
+    const [header, setHeader] = s.createSignal(
         <h1 onClick={() => setHeader(<h1>Call that an easter egg</h1>)}>Welcome to the Sandbox</h1>,
     )
 
@@ -138,7 +126,7 @@ const App: Component = () => {
     //   setCount(count() + 1)
     // }, 2000)
 
-    const objmemo = createMemo(() => {
+    const objmemo = s.createMemo(() => {
         return {
             foo: 'bar',
             count: count(),
@@ -148,22 +136,18 @@ const App: Component = () => {
         }
     })
 
-    createComputed(
-        _ => {
-            const hello = createSignal('hello')
-            setShowEven(count() % 3 === 0)
-            return count()
-        },
-        undefined,
-        {name: 'very-long-name-that-will-definitely-not-have-enough-space-to-render'},
-    )
+    s.createComputed(_ => {
+        const hello = s.createSignal('hello')
+        setShowEven(count() % 3 === 0)
+        return count()
+    },  undefined, {name: 'very-long-name-that-will-definitely-not-have-enough-space-to-render'})
 
-    createComputed(() => {}, undefined, {name: 'frozen'})
-    createRenderEffect(() => {})
+    s.createComputed(() => {}, undefined, {name: 'frozen'})
+    s.createRenderEffect(() => {})
 
-    const Bold: ParentComponent = props => <b>{props.children}</b>
+    const Bold: s.ParentComponent = props => <b>{props.children}</b>
 
-    const [showBroken, setShowBroken] = createSignal(false)
+    const [showBroken, setShowBroken] = s.createSignal(false)
 
     return (
         <>
@@ -174,37 +158,38 @@ const App: Component = () => {
                     <Button onClick={() => setCount(p => ++p)} text={`Count: ${count()}`} />
                     <Button onClick={() => setCount(p => ++p)} text={`Count: ${count()}`} />
                 </header>
-                <div style={{height: '1rem', 'margin-top': '1rem'}}>
-                    <Show when={showEven()}>
-                        {createComponent(() => {
-                            return <Bold>{count()} is even!</Bold>
-                        }, {})}
-                    </Show>
-                </div>
+                <sweb.Dynamic
+                    component='div'
+                    style={{height: '1rem', 'margin-top': '1rem'}}
+                >
+                    <s.Show when={showEven()}>
+                    {s.createComponent(() => <>
+                        <Bold>{count()} is even!</Bold>
+                    </>, {})}
+                    </s.Show>
+                </sweb.Dynamic>
                 {/* <button onClick={() => disposeApp()}>Dispose whole application</button>
                 <br /> */}
                 <button onClick={() => setShowBroken(p => !p)}>
                     {showBroken() ? 'Hide' : 'Show'} broken component.
                 </button>
-                <ErrorBoundary
-                    fallback={(err, reset) => (
-                        <>
-                            {err.toString()}
-                            <button
-                                onClick={() => {
-                                    setShowBroken(false)
-                                    reset()
-                                }}
-                            >
-                                Reset
-                            </button>
-                        </>
-                    )}
+                <s.ErrorBoundary
+                    fallback={(err, reset) => <>
+                        {err.toString()}
+                        <button
+                            onClick={() => {
+                                setShowBroken(false)
+                                reset()
+                            }}
+                        >
+                            Reset
+                        </button>
+                    </>}
                 >
-                    <Show when={showBroken()}>
+                    <s.Show when={showBroken()}>
                         <Broken />
-                    </Show>
-                </ErrorBoundary>
+                    </s.Show>
+                </s.ErrorBoundary>
                 <br />
                 <br />
             </div>
@@ -212,20 +197,25 @@ const App: Component = () => {
             <button onClick={() => setRootCount(p => ++p)}>Update root count</button>
             <button onClick={() => disposeOuterRoot()}>Dispose OUTSIDE_ROOT</button>
             <Article />
-            <Todos />
-            <div style={{margin: '24px'}}>
-                <CountingComponent />
-            </div>
-            <div style={{margin: '24px'}}>
-                <ThemeExample />
-            </div>
+            <Todos title='Simple Todos Example' />
+            {s.untrack(() => {
+                const MARGIN = '24px'
+                return <>
+                    <div style={{margin: MARGIN}}>
+                        <CountingComponent />
+                    </div>
+                    <div style={{margin: MARGIN}}>
+                        <ThemeExample />
+                    </div>
+                </>
+            })}
             <Recursive />
         </>
     )
 }
 
 const CountingComponent = () => {
-    const [count, setCount] = createSignal(0)
+    const [count, setCount] = s.createSignal(0)
     // const interval = setInterval(() => setCount(c => c + 1), 1000)
     // onCleanup(() => clearInterval(interval))
     return <div>Count value is {count()}</div>
diff --git a/examples/sandbox/src/Todos.tsx b/examples/sandbox/src/Todos.tsx
index 00d1149c..d2b23b61 100644
--- a/examples/sandbox/src/Todos.tsx
+++ b/examples/sandbox/src/Todos.tsx
@@ -1,13 +1,4 @@
-import {
-    batch,
-    type Component,
-    createEffect,
-    createMemo,
-    createRoot,
-    createSignal,
-    For,
-    Show,
-} from 'solid-js'
+import * as s from 'solid-js'
 import {createStore, produce, type SetStoreFunction, type Store, unwrap} from 'solid-js/store'
 
 export function createLocalStore<T extends object>(
@@ -19,7 +10,7 @@ export function createLocalStore<T extends object>(
     const [state, setState] = createStore<T>(
         localState ? JSON.parse(localState) as any : init, {name}
     )
-    createEffect(() => localStorage.setItem(name, JSON.stringify(state)))
+    s.createEffect(() => localStorage.setItem(name, JSON.stringify(state)))
     return [state, setState]
 }
 
@@ -29,7 +20,7 @@ export function removeIndex<T>(array: readonly T[], index: number): T[] {
 
 type TodoItem = {title: string; done: boolean}
 
-const Todo: Component<{
+const Todo: s.Component<{
     done: boolean
     title: string
     onCheck: (value: boolean) => void
@@ -54,8 +45,10 @@ const Todo: Component<{
     )
 }
 
-const Todos: Component = () => {
-    const [newTitle, setTitle] = createSignal('')
+const Todos: s.Component<{title: string}> = (props) => {
+    console.log(s.getOwner())
+
+    const [newTitle, setTitle] = s.createSignal('')
     const [todos, setTodos] = createLocalStore('todos-2', {
         values: [] as TodoItem[],
         other: {
@@ -71,14 +64,14 @@ const Todos: Component = () => {
         },
     })
 
-    const valuesInASignal = createMemo(() => ({values: todos.values}))
+    const valuesInASignal = s.createMemo(() => ({values: todos.values}))
 
     // @ts-ignore
     setTodos('other', 'else', unwrap(todos.values))
 
     const addTodo = (e: SubmitEvent) => {
         e.preventDefault()
-        batch(() => {
+        s.batch(() => {
             setTodos('values', todos.values.length, {
                 title: newTitle(),
                 done: false,
@@ -101,43 +94,43 @@ const Todos: Component = () => {
 
     return (
         <>
-            <h3>Simple Todos Example</h3>
-            <Show when={true} keyed>
-                {v => {
-                    createRoot(d => {
-                        createEffect(newTitle, undefined, {name: 'newTitle effect'})
-                    })
-                    return (
-                        <form onSubmit={addTodo}>
-                            <input
-                                placeholder="enter todo and click +"
-                                required
-                                value={newTitle()}
-                                onInput={e => setTitle(e.currentTarget.value)}
-                            />
-                            <button>+</button>
-                        </form>
-                    )
-                }}
-            </Show>
-            <For each={todos.values}>
-                {(todo, i) => {
-                    createEffect(i, undefined, {name: 'todo index'})
-                    return (
-                        <Todo
-                            {...todo}
-                            onCheck={v => setTodos('values', i(), 'done', v)}
-                            onUpdate={v => setTodos('values', i(), 'title', v)}
-                            onRemove={() =>
-                                setTodos(
-                                    'values',
-                                    produce(t => t.splice(i(), 1)),
-                                )
-                            }
+            <h3>{props.title}</h3>
+            <s.Show when={true} keyed>
+            {v => {
+                s.createRoot(d => {
+                    s.createEffect(newTitle, undefined, {name: 'newTitle effect'})
+                })
+                return (
+                    <form onSubmit={addTodo}>
+                        <input
+                            placeholder="enter todo and click +"
+                            required
+                            value={newTitle()}
+                            onInput={e => setTitle(e.currentTarget.value)}
                         />
-                    )
-                }}
-            </For>
+                        <button>+</button>
+                    </form>
+                )
+            }}
+            </s.Show>
+            <s.For each={todos.values}>
+            {(todo, i) => {
+                s.createEffect(i, undefined, {name: 'todo index'})
+                return (
+                    <Todo
+                        {...todo}
+                        onCheck={v => setTodos('values', i(), 'done', v)}
+                        onUpdate={v => setTodos('values', i(), 'title', v)}
+                        onRemove={() =>
+                            setTodos(
+                                'values',
+                                produce(t => t.splice(i(), 1)),
+                            )
+                        }
+                    />
+                )
+            }}
+            </s.For>
         </>
     )
 }
diff --git a/packages/debugger/src/structure/walker.ts b/packages/debugger/src/structure/walker.ts
index 67eca406..4df4673c 100644
--- a/packages/debugger/src/structure/walker.ts
+++ b/packages/debugger/src/structure/walker.ts
@@ -1,4 +1,5 @@
 import {untrackedCallback} from '@solid-devtools/shared/primitives'
+import {asArray} from '@solid-devtools/shared/utils'
 import type {ComponentRegisterHandler} from '../main/component-registry.ts'
 import {NodeType, TreeWalkerMode} from '../main/constants.ts'
 import {ObjectType, getSdtId} from '../main/id.ts'
@@ -144,36 +145,39 @@ function mapElements(
 }
 
 function mapOwner(
-    owner: Solid.Owner,
+    owner:  Solid.Owner,
     parent: Mapped.Owner | null,
-    overwriteType?: NodeType,
 ): Mapped.Owner | undefined {
-    const id = getSdtId(owner, ObjectType.Owner)
-    const type = overwriteType ?? markOwnerType(owner)
+
+    const id   = getSdtId(owner, ObjectType.Owner)
+    const type = markOwnerType(owner)
     const name = getNodeName(owner)
+
     const mapped = {id, type, name} as Mapped.Owner
 
     let resolvedElements: ReturnType<typeof resolveElements> | undefined
 
     // Component
     if (type === NodeType.Component) {
-        // Context
-        //
-        // context nodes have following structure:
-        // | <provider> - Component
-        // | | RenderEffect - node with context key (contextNode)
-        // | | | children memo - memoizing children fn param
-        // | | | children memo - resolving nested children
-        //
-        // The provider component will be omitted
-        let contextNode: Solid.Computation | undefined
-        if (
-            name === 'provider' &&
+
+        let first_owned: Solid.Owner | undefined
+
+        /* 
+         Context
+        
+         <provider> - Component
+          ↳ RenderEffect - node with context key (first_owned)
+             ↳ children memo - memoizing children fn param
+             ↳ children memo - resolving nested children
+        
+         The provider component will be omitted
+        */
+        if (name === 'provider' &&
             owner.owned &&
             owner.owned.length === 1 &&
-            markOwnerType((contextNode = owner.owned[0]!)) === NodeType.Context
+            markOwnerType((first_owned = owner.owned[0]!)) === NodeType.Context
         ) {
-            return mapOwner(contextNode, parent, NodeType.Context)
+            return mapOwner(first_owned, parent)
         }
 
         // Register component to global map
@@ -195,7 +199,9 @@ function mapOwner(
     // Computation
     else if (isObservableComputation(owner)) {
         observeComputation(owner, owner)
-        if (!owner.sources || owner.sources.length === 0) mapped.frozen = true
+        if (!owner.sources || owner.sources.length === 0) {
+            mapped.frozen = true
+        }
     }
 
     const children: Mapped.Owner[] = []
@@ -206,18 +212,12 @@ function mapOwner(
 
     // Map html elements in DOM mode
     // elements might already be resolved when mapping components
-    if (
-        Mode === TreeWalkerMode.DOM &&
-        (resolvedElements =
-            resolvedElements === undefined ? resolveElements(owner.value) : resolvedElements)
+    if (Mode === TreeWalkerMode.DOM &&
+        (resolvedElements = resolvedElements === undefined
+            ? resolveElements(owner.value)
+            : resolvedElements)
     ) {
-        children.push.apply(
-            children,
-            mapElements(
-                Array.isArray(resolvedElements) ? resolvedElements : [resolvedElements],
-                parent?.children,
-            ),
-        )
+        children.push.apply(children, mapElements(asArray(resolvedElements), parent?.children))
     }
 
     // global `AddedToParentElements` will be changed in mapChildren