diff --git a/sx/sx/reactive-islands.sx b/sx/sx/reactive-islands.sx index 7d6ac16..d8edfe2 100644 --- a/sx/sx/reactive-islands.sx +++ b/sx/sx/reactive-islands.sx @@ -169,11 +169,9 @@ (p :class "mt-2 text-sm text-stone-500" "Run: " (code "python3 shared/sx/tests/run.py signals"))) (~doc-section :title "What's next" :id "next" - (p "The spec layer and bootstrappers are complete. Remaining work:") + (p "The spec, bootstrappers, and wiring are complete. The full system is spec'd in " (code ".sx") " files and bootstrapped to JavaScript and Python. Remaining optimization:") (ul :class "space-y-2 text-stone-600 list-disc pl-5" - (li (strong "Client hydration") " — " (code "boot.sx") " discovers " (code "data-sx-island") " elements, creates signals from " (code "data-sx-state") ", re-renders in reactive context") - (li (strong "Event bindings") " — wire " (code ":on-click (fn (e) ...)") " inside islands to DOM event listeners") - (li (strong "Keyed list reconciliation") " — " (code "reactive-list") " currently clears and re-renders; needs keyed morph for efficient updates")) + (li (strong "Keyed list reconciliation") " — " (code "reactive-list") " currently clears and re-renders; needs keyed morph for efficient updates of large lists")) (p "See the " (a :href "/reactive-islands/plan" :sx-get "/reactive-islands/plan" :sx-target "#main-panel" :sx-select "#main-panel" :sx-swap "outerHTML" :sx-push-url "true" :class "text-violet-700 underline" "full plan") " for the complete design document.")))) @@ -370,38 +368,46 @@ (~doc-code :code (highlight "(map (fn (item) (li :key (get item \"id\") (get item \"name\")))\n (deref items))" "lisp")) (p "Keyed elements are reused and reordered. Unkeyed elements are morphed."))) - (~doc-section :title "Remaining Work" :id "remaining" + (~doc-section :title "Status" :id "status" (div :class "overflow-x-auto rounded border border-stone-200" (table :class "w-full text-left text-sm" (thead (tr :class "border-b border-stone-200 bg-stone-100" (th :class "px-3 py-2 font-medium text-stone-600" "Task") - (th :class "px-3 py-2 font-medium text-stone-600" "File") + (th :class "px-3 py-2 font-medium text-stone-600" "Status") (th :class "px-3 py-2 font-medium text-stone-600" "Description"))) (tbody (tr :class "border-b border-stone-100" - (td :class "px-3 py-2 text-stone-700" "Client hydration") - (td :class "px-3 py-2 font-mono text-xs text-stone-500" "boot.sx") - (td :class "px-3 py-2 text-stone-700" "Discover data-sx-island elements, create signals from data-sx-state, re-render in reactive context")) + (td :class "px-3 py-2 text-stone-700" "Signal runtime") + (td :class "px-3 py-2 text-green-700 font-medium" "Done") + (td :class "px-3 py-2 text-stone-700" "signals.sx: signal, deref, reset!, swap!, computed, effect, batch")) + (tr :class "border-b border-stone-100" + (td :class "px-3 py-2 text-stone-700" "Named stores (L3)") + (td :class "px-3 py-2 text-green-700 font-medium" "Done") + (td :class "px-3 py-2 text-stone-700" "signals.sx: def-store, use-store, clear-stores")) + (tr :class "border-b border-stone-100" + (td :class "px-3 py-2 text-stone-700" "Event bridge") + (td :class "px-3 py-2 text-green-700 font-medium" "Done") + (td :class "px-3 py-2 text-stone-700" "signals.sx: emit-event, on-event, bridge-event")) (tr :class "border-b border-stone-100" (td :class "px-3 py-2 text-stone-700" "Event bindings") - (td :class "px-3 py-2 font-mono text-xs text-stone-500" "adapter-dom.sx") - (td :class "px-3 py-2 text-stone-700" "Wire :on-click (fn (e) ...) inside islands to DOM addEventListener")) + (td :class "px-3 py-2 text-green-700 font-medium" "Done") + (td :class "px-3 py-2 text-stone-700" "adapter-dom.sx: :on-click (fn ...) → domListen")) (tr :class "border-b border-stone-100" - (td :class "px-3 py-2 text-stone-700" "data-sx-emit processing") - (td :class "px-3 py-2 font-mono text-xs text-stone-500" "orchestration.sx") - (td :class "px-3 py-2 text-stone-700" "Auto-dispatch custom events from data-sx-emit attributes on click")) + (td :class "px-3 py-2 text-stone-700" "data-sx-emit") + (td :class "px-3 py-2 text-green-700 font-medium" "Done") + (td :class "px-3 py-2 text-stone-700" "orchestration.sx: auto-dispatch custom events from server content")) (tr :class "border-b border-stone-100" - (td :class "px-3 py-2 text-stone-700" "Store bootstrapping") - (td :class "px-3 py-2 font-mono text-xs text-stone-500" "bootstrap_js.py") - (td :class "px-3 py-2 text-stone-700" "Transpile def-store, use-store, clear-stores, bridge-event to JS")) + (td :class "px-3 py-2 text-stone-700" "Client hydration") + (td :class "px-3 py-2 text-green-700 font-medium" "Done") + (td :class "px-3 py-2 text-stone-700" "boot.sx: hydrate-island, dispose-island, post-swap wiring")) (tr :class "border-b border-stone-100" - (td :class "px-3 py-2 text-stone-700" "Keyed list reconciliation") - (td :class "px-3 py-2 font-mono text-xs text-stone-500" "adapter-dom.sx") - (td :class "px-3 py-2 text-stone-700" "Keyed morph for reactive-list instead of clear + re-render")) + (td :class "px-3 py-2 text-stone-700" "Bootstrapping") + (td :class "px-3 py-2 text-green-700 font-medium" "Done") + (td :class "px-3 py-2 text-stone-700" "All functions transpiled to JS and Python, platform primitives implemented")) (tr - (td :class "px-3 py-2 text-stone-700" "Navigation integration") - (td :class "px-3 py-2 font-mono text-xs text-stone-500" "orchestration.sx") - (td :class "px-3 py-2 text-stone-700" "Call clear-stores on full page navigation, preserve stores on partial swaps")))))) + (td :class "px-3 py-2 text-stone-700" "Keyed list reconciliation") + (td :class "px-3 py-2 text-amber-600 font-medium" "TODO") + (td :class "px-3 py-2 text-stone-700" "reactive-list clears + re-renders; needs keyed morph for efficient updates")))))) (~doc-section :title "Design Principles" :id "principles" (ol :class "space-y-3 text-stone-600 list-decimal list-inside"