Fix M4 reactivity bugs via context + class store
Symptoms in v0.1.0 install: 📡 broadcast button didn't change color
on toggle, × close button didn't remove the pane, blue active
border stuck on the first pane. All three were UI-not-rerendering-
on-state-change manifestations of the same prop-reactivity quirk
that drilling activeLeafId tried (and apparently failed) to fix.
Refactor to the Svelte 5 canonical pattern for shared reactive
state:
- New src/lib/layout/orchestration.svelte.ts with an Orchestration
class. Reactive fields (activeLeafId, notifications, distros) are
class-field $state declarations; methods mutate them directly.
Provided via context (provideOrchestration / useOrchestration);
no prop drilling.
- App.svelte: provideOrchestration(treeOps). Tree mutations remain
closures over the App-level tree $state; the class delegates to
them. Pane only takes `node` now.
- Pane.svelte / SplitNode.svelte: stop drilling ops + activeLeafId.
Pure pass-through of node.
- LeafPane.svelte: useOrchestration(); `active = $derived(
orch.activeLeafId === leaf.id)` reads the class field directly so
Svelte 5 tracks it per-property.
- Notifications.svelte: receives notifications + onDismiss from App
(which gets them from orch).
- Deleted src/lib/layout/ops.ts (TreeOps moved into orchestration).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
6b9a3adf85
commit
e871ee8e6e
6 changed files with 243 additions and 204 deletions
|
|
@ -1,24 +1,15 @@
|
|||
<script lang="ts">
|
||||
import type { TreeNode } from "./tree";
|
||||
import type { PaneOps } from "./ops";
|
||||
import SplitNode from "./SplitNode.svelte";
|
||||
import LeafPane from "./LeafPane.svelte";
|
||||
|
||||
let {
|
||||
node,
|
||||
ops,
|
||||
activeLeafId,
|
||||
}: {
|
||||
node: TreeNode;
|
||||
ops: PaneOps;
|
||||
activeLeafId: string | null;
|
||||
} = $props();
|
||||
let { node }: { node: TreeNode } = $props();
|
||||
</script>
|
||||
|
||||
{#if node.kind === "split"}
|
||||
<SplitNode {node} {ops} {activeLeafId} />
|
||||
<SplitNode {node} />
|
||||
{:else}
|
||||
{#key node.id}
|
||||
<LeafPane leaf={node} {ops} {activeLeafId} />
|
||||
<LeafPane leaf={node} />
|
||||
{/key}
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue