@synetics/ui 0.7.0-alpha

package/src/lab/transformer/memo-optimization/2026-02-11-14-20-memo-optimization.syn

@@ -0,0 +1,275 @@
+// Memo Optimization Test PSR File
+// Tests createMemo(() => {}) memoization optimization
+
+component MemoOptimizationExample() {
+    signal count = 0
+    signal multiplier = 2
+    signal items = [1, 2, 3, 4, 5]
+    signal filter = "all"
+    signal expensiveCalcCount = 0
+    signal memoCalcCount = 0
+    
+    // Without memo - recalculates every render
+    const expensiveCalculation = () => {
+        expensiveCalcCount(prev => prev + 1)
+        console.log('Expensive calc running:', expensiveCalcCount())
+        
+        // Simulate expensive operation
+        let result = 0
+        for (let i = 0; i < 1000000; i++) {
+            result += Math.sqrt(i)
+        }
+        return count() * multiplier()
+    }
+    
+    // With memo - only recalculates when dependencies change
+    const memoizedCalculation = createMemo(() => {
+        memoCalcCount(prev => prev + 1)
+        console.log('Memoized calc running:', memoCalcCount())
+        
+        // Same expensive operation
+        let result = 0
+        for (let i = 0; i < 1000000; i++) {
+            result += Math.sqrt(i)
+        }
+        return count() * multiplier()
+    })
+    
+    // Memoized filtered list
+    const filteredItems = createMemo(() => {
+        switch (filter()) {
+            case "even":
+                return items().filter(n => n % 2 === 0)
+            case "odd":
+                return items().filter(n => n % 2 !== 0)
+            default:
+                return items()
+        }
+    })
+    
+    // Memoized computed value
+    const totalValue = createMemo(() => {
+        return filteredItems().reduce((sum, item) => sum + item, 0)
+    })
+    
+    // Chain of memoized computations
+    const doubledTotal = createMemo(() => totalValue() * 2)
+    const finalResult = createMemo(() => doubledTotal() + count())
+    
+    return (
+        <div>
+            <h1>Memo Optimization Demo</h1>
+            
+            <div class="stats">
+                <div class="stat-card">
+                    <h3>Calculation Counts</h3>
+                    <p>Expensive (no memo): {expensiveCalcCount()}</p>
+                    <p>Memoized: {memoCalcCount()}</p>
+                    <p class="efficiency">
+                        Efficiency: {expensiveCalcCount() > 0 
+                            ? ((1 - memoCalcCount() / expensiveCalcCount()) * 100).toFixed(1) 
+                            : 0}% fewer calculations
+                    </p>
+                </div>
+                
+                <div class="stat-card">
+                    <h3>Current Values</h3>
+                    <p>Count: {count()}</p>
+                    <p>Multiplier: {multiplier()}</p>
+                    <p>Filter: {filter()}</p>
+                </div>
+                
+                <div class="stat-card">
+                    <h3>Results</h3>
+                    <p>Expensive: {expensiveCalculation()}</p>
+                    <p>Memoized: {memoizedCalculation()}</p>
+                    <p>Match: {expensiveCalculation() === memoizedCalculation() ? '✓' : '✗'}</p>
+                </div>
+            </div>
+            
+            <div class="controls">
+                <button onclick={() => count(count() + 1)}>
+                    Increment Count ({count()})
+                </button>
+                
+                <button onclick={() => multiplier(multiplier() + 1)}>
+                    Increment Multiplier ({multiplier()})
+                </button>
+                
+                <button onclick={() => items([...items(), items().length + 1])}>
+                    Add Item
+                </button>
+                
+                <select onchange={(e) => filter(e.target.value)}>
+                    <option value="all">All Items</option>
+                    <option value="even">Even Only</option>
+                    <option value="odd">Odd Only</option>
+                </select>
+                
+                <button onclick={() => {
+                    // Trigger re-render without changing memo dependencies
+                    // This should increase expensiveCalcCount but not memoCalcCount
+                    console.log('Force re-render')
+                }}>
+                    Force Re-render
+                </button>
+            </div>
+            
+            <div class="computed-values">
+                <h3>Memoized Computed Chain</h3>
+                <div class="computation-flow">
+                    <div class="step">
+                        <span class="label">Filtered Items:</span>
+                        <span class="value">[{filteredItems().join(', ')}]</span>
+                    </div>
+                    <div class="arrow">↓</div>
+                    <div class="step">
+                        <span class="label">Total Value:</span>
+                        <span class="value">{totalValue()}</span>
+                    </div>
+                    <div class="arrow">↓</div>
+                    <div class="step">
+                        <span class="label">Doubled Total:</span>
+                        <span class="value">{doubledTotal()}</span>
+                    </div>
+                    <div class="arrow">↓</div>
+                    <div class="step">
+                        <span class="label">Final Result:</span>
+                        <span class="value">{finalResult()}</span>
+                    </div>
+                </div>
+            </div>
+            
+            <ItemsList items={filteredItems()} />
+            <MemoComparison count={count()} multiplier={multiplier()} />
+        </div>
+    )
+}
+
+component ItemsList({ items }) {
+    // Memo inside child component
+    const itemsWithSquares = createMemo(() => {
+        return items.map(item => ({
+            value: item,
+            squared: item * item,
+            cubed: item * item * item
+        }))
+    })
+    
+    return (
+        <div class="items-list">
+            <h3>Items with Computed Values</h3>
+            <div class="items-grid">
+                <For each={itemsWithSquares()} key={(item) => item.value}>
+                    {(item) => (
+                        <ItemCard item={item} />
+                    )}
+                </For>
+            </div>
+        </div>
+    )
+}
+
+component ItemCard({ item }) {
+    signal hovered = false
+    
+    // Memoize expensive formatting
+    const formattedData = createMemo(() => ({
+        value: item.value,
+        squared: item.squared.toLocaleString(),
+        cubed: item.cubed.toLocaleString(),
+        sum: (item.value + item.squared + item.cubed).toLocaleString()
+    }))
+    
+    return (
+        <div 
+            class={`item-card ${hovered() ? 'hovered' : ''}`}
+            onmouseenter={() => hovered(true)}
+            onmouseleave={() => hovered(false)}
+        >
+            <div class="item-value">{formattedData().value}</div>
+            <Show when={hovered()}>
+                <div class="item-details">
+                    <p>Squared: {formattedData().squared}</p>
+                    <p>Cubed: {formattedData().cubed}</p>
+                    <p>Sum: {formattedData().sum}</p>
+                </div>
+            </Show>
+        </div>
+    )
+}
+
+component MemoComparison({ count, multiplier }) {
+    signal renderCount = 0
+    
+    createEffect(() => {
+        renderCount(prev => prev + 1)
+    })
+    
+    // Non-memoized computation
+    const withoutMemo = () => {
+        let result = 0
+        for (let i = 0; i < count * multiplier; i++) {
+            result += i
+        }
+        return result
+    }
+    
+    // Memoized computation
+    const withMemo = createMemo(() => {
+        let result = 0
+        for (let i = 0; i < count * multiplier; i++) {
+            result += i
+        }
+        return result
+    })
+    
+    // Performance tracking
+    const nonMemoTime = createMemo(() => {
+        const start = performance.now()
+        const result = withoutMemo()
+        const end = performance.now()
+        return { result, time: end - start }
+    })
+    
+    const memoTime = createMemo(() => {
+        const start = performance.now()
+        const result = withMemo()
+        const end = performance.now()
+        return { result, time: end - start }
+    })
+    
+    return (
+        <div class="memo-comparison">
+            <h3>Performance Comparison</h3>
+            <p>Component Renders: {renderCount()}</p>
+            
+            <div class="comparison-grid">
+                <div class="comparison-card">
+                    <h4>Without Memo</h4>
+                    <p>Result: {nonMemoTime().result}</p>
+                    <p>Time: {nonMemoTime().time.toFixed(4)}ms</p>
+                </div>
+                
+                <div class="comparison-card">
+                    <h4>With Memo</h4>
+                    <p>Result: {memoTime().result}</p>
+                    <p>Time: {memoTime().time.toFixed(4)}ms</p>
+                </div>
+                
+                <div class="comparison-card">
+                    <h4>Speedup</h4>
+                    <p>
+                        {memoTime().time > 0 
+                            ? (nonMemoTime().time / memoTime().time).toFixed(2) 
+                            : 'N/A'}x faster
+                    </p>
+                    <p>
+                        {((1 - memoTime().time / nonMemoTime().time) * 100).toFixed(1)}% 
+                        time saved
+                    </p>
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/lab/transformer/on-cleanup-patterns/2026-02-11-14-20-on-cleanup-patterns.syn

@@ -0,0 +1,375 @@
+// On Cleanup Patterns Test PSR File
+// Tests onCleanup(() => {}) cleanup pattern transformations
+
+component OnCleanupPatternsExample() {
+    signal activeTab = "intervals"
+    signal cleanupLogs = []
+    
+    const addLog = (message) => {
+        cleanupLogs(prev => [...prev, {
+            id: Date.now(),
+            message,
+            timestamp: new Date().toLocaleTimeString()
+        }])
+    }
+    
+    return (
+        <div>
+            <h1>onCleanup Patterns Demo</h1>
+            
+            <div class="tabs">
+                <button 
+                    class={activeTab() === "intervals" ? "active" : ""}
+                    onclick={() => activeTab("intervals")}
+                >
+                    Intervals
+                </button>
+                <button 
+                    class={activeTab() === "events" ? "active" : ""}
+                    onclick={() => activeTab("events")}
+                >
+                    Event Listeners
+                </button>
+                <button 
+                    class={activeTab() === "subscriptions" ? "active" : ""}
+                    onclick={() => activeTab("subscriptions")}
+                >
+                    Subscriptions
+                </button>
+                <button 
+                    class={activeTab() === "resources" ? "active" : ""}
+                    onclick={() => activeTab("resources")}
+                >
+                    Resources
+                </button>
+            </div>
+            
+            <div class="cleanup-log">
+                <h3>Cleanup Log</h3>
+                <button onclick={() => cleanupLogs([])}>Clear Log</button>
+                <div class="log-entries">
+                    <For each={cleanupLogs()} key={(log) => log.id}>
+                        {(log) => (
+                            <div class="log-entry">
+                                <span class="timestamp">{log.timestamp}</span>
+                                <span class="message">{log.message}</span>
+                            </div>
+                        )}
+                    </For>
+                </div>
+            </div>
+            
+            <div class="content">
+                {/* Components will cleanup when tab changes */}
+                <Show when={activeTab() === "intervals"}>
+                    <IntervalCleanupExample onLog={addLog} />
+                </Show>
+                
+                <Show when={activeTab() === "events"}>
+                    <EventListenerCleanupExample onLog={addLog} />
+                </Show>
+                
+                <Show when={activeTab() === "subscriptions"}>
+                    <SubscriptionCleanupExample onLog={addLog} />
+                </Show>
+                
+                <Show when={activeTab() === "resources"}>
+                    <ResourceCleanupExample onLog={addLog} />
+                </Show>
+            </div>
+        </div>
+    )
+}
+
+component IntervalCleanupExample({ onLog }) {
+    signal count = 0
+    signal intervalDelay = 1000
+    signal isRunning = false
+    
+    createEffect(() => {
+        if (!isRunning()) return
+        
+        onLog('Starting interval')
+        
+        const interval = setInterval(() => {
+            count(prev => prev + 1)
+        }, intervalDelay())
+        
+        onCleanup(() => {
+            onLog('Cleaning up interval')
+            clearInterval(interval)
+        })
+    })
+    
+    onMount(() => {
+        onLog('IntervalCleanupExample mounted')
+    })
+    
+    onCleanup(() => {
+        onLog('IntervalCleanupExample unmounted')
+    })
+    
+    return (
+        <div class="interval-cleanup">
+            <h3>Interval Cleanup</h3>
+            <p>Count: {count()}</p>
+            <p>Delay: {intervalDelay()}ms</p>
+            
+            <div class="controls">
+                <button onclick={() => isRunning(!isRunning())}>
+                    {isRunning() ? 'Stop' : 'Start'} Interval
+                </button>
+                
+                <input 
+                    type="range"
+                    min="100"
+                    max="5000"
+                    step="100"
+                    value={intervalDelay()}
+                    oninput={(e) => {
+                        intervalDelay(parseInt(e.target.value))
+                        onLog(`Interval delay changed to ${e.target.value}ms`)
+                    }}
+                />
+                
+                <button onclick={() => count(0)}>Reset Count</button>
+            </div>
+        </div>
+    )
+}
+
+component EventListenerCleanupExample({ onLog }) {
+    signal mouseX = 0
+    signal mouseY = 0
+    signal trackingEnabled = false
+    
+    createEffect(() => {
+        if (!trackingEnabled()) return
+        
+        const handleMouseMove = (e) => {
+            mouseX(e.clientX)
+            mouseY(e.clientY)
+        }
+        
+        const handleResize = () => {
+            onLog(`Window resized to ${window.innerWidth}x${window.innerHeight}`)
+        }
+        
+        onLog('Adding event listeners')
+        
+        window.addEventListener('mousemove', handleMouseMove)
+        window.addEventListener('resize', handleResize)
+        
+        onCleanup(() => {
+            onLog('Removing event listeners')
+            window.removeEventListener('mousemove', handleMouseMove)
+            window.removeEventListener('resize', handleResize)
+        })
+    })
+    
+    onCleanup(() => {
+        onLog('EventListenerCleanupExample unmounted')
+    })
+    
+    return (
+        <div class="event-cleanup">
+            <h3>Event Listener Cleanup</h3>
+            
+            <div class="controls">
+                <label>
+                    <input 
+                        type="checkbox"
+                        checked={trackingEnabled()}
+                        onchange={(e) => {
+                            trackingEnabled(e.target.checked)
+                            onLog(`Mouse tracking ${e.target.checked ? 'enabled' : 'disabled'}`)
+                        }}
+                    />
+                    Track Mouse Movement
+                </label>
+            </div>
+            
+            <Show when={trackingEnabled()}>
+                <div class="mouse-position">
+                    <p>Mouse X: {mouseX()}</p>
+                    <p>Mouse Y: {mouseY()}</p>
+                </div>
+            </Show>
+        </div>
+    )
+}
+
+component SubscriptionCleanupExample({ onLog }) {
+    signal messages = []
+    signal subscribed = false
+    
+    // Fake WebSocket/EventSource
+    class FakeSubscription {
+        constructor(onMessage) {
+            this.onMessage = onMessage
+            this.interval = null
+        }
+        
+        start() {
+            this.interval = setInterval(() => {
+                this.onMessage({
+                    id: Date.now(),
+                    data: `Message ${Math.floor(Math.random() * 100)}`
+                })
+            }, 2000)
+        }
+        
+        stop() {
+            if (this.interval) {
+                clearInterval(this.interval)
+                this.interval = null
+            }
+        }
+    }
+    
+    createEffect(() => {
+        if (!subscribed()) return
+        
+        onLog('Creating subscription')
+        
+        const subscription = new FakeSubscription((message) => {
+            messages(prev => [...prev, message])
+        })
+        
+        subscription.start()
+        
+        onCleanup(() => {
+            onLog('Cleaning up subscription')
+            subscription.stop()
+        })
+    })
+    
+    onCleanup(() => {
+        onLog('SubscriptionCleanupExample unmounted')
+    })
+    
+    return (
+        <div class="subscription-cleanup">
+            <h3>Subscription Cleanup</h3>
+            
+            <div class="controls">
+                <button onclick={() => {
+                    subscribed(!subscribed())
+                    onLog(`Subscription ${!subscribed() ? 'started' : 'stopped'}`)
+                }}>
+                    {subscribed() ? 'Unsubscribe' : 'Subscribe'}
+                </button>
+                
+                <button onclick={() => messages([])}>
+                    Clear Messages
+                </button>
+            </div>
+            
+            <div class="messages">
+                <h4>Messages ({messages().length}):</h4>
+                <div class="message-list">
+                    <For each={messages()} key={(msg) => msg.id}>
+                        {(message) => (
+                            <div class="message">
+                                {message.data}
+                            </div>
+                        )}
+                    </For>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+component ResourceCleanupExample({ onLog }) {
+    signal userId = 1
+    signal autoRefresh = false
+    signal refreshInterval = null
+    
+    const [userData] = createResource(
+        () => userId(),
+        async (id) => {
+            onLog(`Fetching user ${id}`)
+            
+            const controller = new AbortController()
+            
+            // Setup cleanup for the fetch
+            onCleanup(() => {
+                onLog(`Aborting fetch for user ${id}`)
+                controller.abort()
+            })
+            
+            try {
+                await new Promise((resolve, reject) => {
+                    const timeout = setTimeout(resolve, 2000)
+                    
+                    controller.signal.addEventListener('abort', () => {
+                        clearTimeout(timeout)
+                        reject(new Error('Aborted'))
+                    })
+                })
+                
+                return {
+                    id,
+                    name: `User ${id}`,
+                    email: `user${id}@example.com`
+                }
+            } catch (error) {
+                onLog(`Fetch aborted for user ${id}`)
+                throw error
+            }
+        }
+    )
+    
+    createEffect(() => {
+        if (!autoRefresh()) return
+        
+        onLog('Starting auto-refresh')
+        
+        const interval = setInterval(() => {
+            userId(prev => prev + 1)
+        }, 5000)
+        
+        onCleanup(() => {
+            onLog('Stopping auto-refresh')
+            clearInterval(interval)
+        })
+    })
+    
+    onCleanup(() => {
+        onLog('ResourceCleanupExample unmounted')
+    })
+    
+    return (
+        <div class="resource-cleanup">
+            <h3>Resource Cleanup</h3>
+            
+            <div class="controls">
+                <button onclick={() => userId(prev => prev + 1)}>
+                    Load Next User ({userId()})
+                </button>
+                
+                <label>
+                    <input 
+                        type="checkbox"
+                        checked={autoRefresh()}
+                        onchange={(e) => autoRefresh(e.target.checked)}
+                    />
+                    Auto-refresh every 5s
+                </label>
+            </div>
+            
+            <div class="user-data">
+                {userData.loading && <p>Loading user...</p>}
+                {userData.error && <p class="error">Error: {userData.error.message}</p>}
+                {userData() && (
+                    <div>
+                        <p>ID: {userData().id}</p>
+                        <p>Name: {userData().name}</p>
+                        <p>Email: {userData().email}</p>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}