@synetics/ui 0.7.0-alpha

package/src/lab/transformer/async-lazy-loading/2026-02-11-14-20-async-lazy-loading.syn

@@ -0,0 +1,242 @@
+// Async Lazy Loading Test PSR File
+// Tests lazy(() => import()) async component loading
+
+const LazyUserProfile = lazy(() => import('./components/UserProfile'))
+const LazyDataTable = lazy(() => import('./components/DataTable'))
+const LazyChart = lazy(() => import('./components/Chart'))
+const LazyEditor = lazy(() => import('./components/Editor'))
+
+component AsyncLazyLoadingExample() {
+    signal showProfile = false
+    signal showTable = false
+    signal showChart = false
+    signal showEditor = false
+    signal loadingStates = {}
+    
+    const trackLoading = (component, loading) => {
+        loadingStates(prev => ({ ...prev, [component]: loading }))
+    }
+    
+    return (
+        <div class="lazy-loading-demo">
+            <h1>Async Lazy Loading Demo</h1>
+            
+            <div class="controls">
+                <button onclick={() => {
+                    showProfile(!showProfile())
+                    if (!loadingStates()['profile']) {
+                        trackLoading('profile', true)
+                    }
+                }}>
+                    {showProfile() ? 'Hide' : 'Show'} User Profile
+                </button>
+                
+                <button onclick={() => {
+                    showTable(!showTable())
+                    if (!loadingStates()['table']) {
+                        trackLoading('table', true)
+                    }
+                }}>
+                    {showTable() ? 'Hide' : 'Show'} Data Table
+                </button>
+                
+                <button onclick={() => {
+                    showChart(!showChart())
+                    if (!loadingStates()['chart']) {
+                        trackLoading('chart', true)
+                    }
+                }}>
+                    {showChart() ? 'Hide' : 'Show'} Chart
+                </button>
+                
+                <button onclick={() => {
+                    showEditor(!showEditor())
+                    if (!loadingStates()['editor']) {
+                        trackLoading('editor', true)
+                    }
+                }}>
+                    {showEditor() ? 'Hide' : 'Show'} Code Editor
+                </button>
+            </div>
+            
+            <div class="loading-status">
+                <h3>Component Loading Status:</h3>
+                <ul>
+                    <li>Profile: {loadingStates()['profile'] ? '⏳ Loading...' : '✓ Ready'}</li>
+                    <li>Table: {loadingStates()['table'] ? '⏳ Loading...' : '✓ Ready'}</li>
+                    <li>Chart: {loadingStates()['chart'] ? '⏳ Loading...' : '✓ Ready'}</li>
+                    <li>Editor: {loadingStates()['editor'] ? '⏳ Loading...' : '✓ Ready'}</li>
+                </ul>
+            </div>
+            
+            {/* Lazy loaded components with Suspense boundaries */}
+            <div class="lazy-content">
+                <Show when={showProfile()}>
+                    <Suspense fallback={<LoadingSpinner text="Loading User Profile..." />}>
+                        <LazyUserProfile 
+                            userId={123}
+                            onLoad={() => trackLoading('profile', false)}
+                        />
+                    </Suspense>
+                </Show>
+                
+                <Show when={showTable()}>
+                    <Suspense fallback={<LoadingSpinner text="Loading Data Table..." />}>
+                        <LazyDataTable 
+                            dataSource="/api/data"
+                            onLoad={() => trackLoading('table', false)}
+                        />
+                    </Suspense>
+                </Show>
+                
+                <Show when={showChart()}>
+                    <Suspense fallback={<LoadingSpinner text="Loading Chart..." />}>
+                        <LazyChart 
+                            data={[1, 2, 3, 4, 5]}
+                            onLoad={() => trackLoading('chart', false)}
+                        />
+                    </Suspense>
+                </Show>
+                
+                <Show when={showEditor()}>
+                    <Suspense fallback={<LoadingSpinner text="Loading Code Editor..." />}>
+                        <LazyEditor 
+                            language="typescript"
+                            onLoad={() => trackLoading('editor', false)}
+                        />
+                    </Suspense>
+                </Show>
+            </div>
+            
+            {/* Nested lazy loading */}
+            <NestedLazyComponents />
+            
+            {/* Conditional lazy loading based on feature flags */}
+            <ConditionalLazyLoad />
+        </div>
+    )
+}
+
+component LoadingSpinner({ text }) {
+    return (
+        <div class="loading-spinner">
+            <div class="spinner"></div>
+            <p>{text || 'Loading...'}</p>
+        </div>
+    )
+}
+
+component NestedLazyComponents() {
+    signal showNested = false
+    
+    const LazyNestedComponent = lazy(() => import('./components/NestedComponent'))
+    
+    return (
+        <div class="nested-lazy">
+            <h3>Nested Lazy Loading</h3>
+            <button onclick={() => showNested(!showNested())}>
+                Toggle Nested Component
+            </button>
+            
+            <Show when={showNested()}>
+                <Suspense fallback={<div>Loading outer component...</div>}>
+                    <LazyNestedComponent>
+                        {/* This component itself lazy-loads children */}
+                        <InnerLazyContent />
+                    </LazyNestedComponent>
+                </Suspense>
+            </Show>
+        </div>
+    )
+}
+
+component InnerLazyContent() {
+    const LazyInnerWidget = lazy(() => import('./components/InnerWidget'))
+    
+    return (
+        <div class="inner-lazy-content">
+            <p>Inner content with lazy-loaded widget:</p>
+            <Suspense fallback={<div>Loading inner widget...</div>}>
+                <LazyInnerWidget />
+            </Suspense>
+        </div>
+    )
+}
+
+component ConditionalLazyLoad() {
+    signal featureEnabled = false
+    
+    // Only define the lazy import if feature is enabled
+    const LazyFeatureComponent = createMemo(() => {
+        return featureEnabled() 
+            ? lazy(() => import('./components/FeatureComponent'))
+            : null
+    })
+    
+    return (
+        <div class="conditional-lazy">
+            <h3>Conditional Lazy Load</h3>
+            <label>
+                <input 
+                    type="checkbox" 
+                    checked={featureEnabled()} 
+                    onchange={(e) => featureEnabled(e.target.checked)}
+                />
+                Enable Feature
+            </label>
+            
+            <Show when={featureEnabled() && LazyFeatureComponent()}>
+                <Suspense fallback={<div>Loading feature...</div>}>
+                    <Dynamic component={LazyFeatureComponent()} />
+                </Suspense>
+            </Show>
+        </div>
+    )
+}
+
+// Preloading example
+component PreloadExample() {
+    const LazyModal = lazy(() => import('./components/Modal'))
+    
+    // Preload on mouse enter
+    const handleMouseEnter = () => {
+        // Trigger the import early
+        LazyModal.preload()
+    }
+    
+    signal showModal = false
+    
+    return (
+        <div class="preload-example">
+            <button 
+                onmouseenter={handleMouseEnter}
+                onclick={() => showModal(true)}
+            >
+                Open Modal (preloads on hover)
+            </button>
+            
+            <Show when={showModal()}>
+                <Suspense fallback={<LoadingSpinner text="Loading modal..." />}>
+                    <LazyModal onClose={() => showModal(false)} />
+                </Suspense>
+            </Show>
+        </div>
+    )
+}
+
+// Error boundary for lazy loading failures
+component LazyErrorBoundary({ children }) {
+    return (
+        <Tryer 
+            fallback={(error, retry) => (
+                <div class="lazy-load-error">
+                    <h4>Failed to load component</h4>
+                    <p>Error: {error.message}</p>
+                    <button onclick={retry}>Retry Loading</button>
+                </div>
+            )}
+        >
+            {children}
+        </Tryer>
+    )
+}

package/src/lab/transformer/batch-updates/2026-02-11-14-20-batch-updates.syn

@@ -0,0 +1,228 @@
+// Batch Updates Test PSR File
+// Tests batch(() => {}) batched update transformations
+
+component BatchUpdatesExample() {
+    signal count = 0
+    signal name = "Initial"
+    signal items = [1, 2, 3]
+    signal theme = "light"
+    signal renderCount = 0
+    
+    // Track renders to show batching effectiveness
+    createEffect(() => {
+        renderCount(prev => prev + 1)
+    })
+    
+    // Regular updates (multiple re-renders)
+    const handleRegularUpdates = () => {
+        count(count() + 1)
+        name(`Updated ${count()}`)
+        items([...items(), count()])
+        theme(theme() === 'light' ? 'dark' : 'light')
+    }
+    
+    // Batched updates (single re-render)
+    const handleBatchedUpdates = () => {
+        batch(() => {
+            count(count() + 10)
+            name(`Batched ${count()}`)
+            items([...items(), count(), count() + 1, count() + 2])
+            theme(theme() === 'light' ? 'dark' : 'light')
+        })
+    }
+    
+    // Nested batching
+    const handleNestedBatching = () => {
+        batch(() => {
+            count(count() + 5)
+            
+            batch(() => {
+                name(`Nested ${count()}`)
+                items([...items(), count()])
+            })
+            
+            theme('nested')
+        })
+    }
+    
+    // Async batching
+    const handleAsyncBatching = async () => {
+        // Updates before async operation
+        batch(() => {
+            count(count() + 1)
+            name("Loading...")
+        })
+        
+        // Simulate async operation
+        await new Promise(resolve => setTimeout(resolve, 1000))
+        
+        // Batched updates after async operation
+        batch(() => {
+            name("Async Complete")
+            items([...items(), count(), count() + 1])
+            theme("async")
+        })
+    }
+    
+    // Conditional batching
+    const handleConditionalBatching = (useBatch = true) => {
+        const updates = () => {
+            count(count() + 2)
+            name(`Conditional ${count()}`)
+            items([...items(), count()])
+        }
+        
+        if (useBatch) {
+            batch(updates)
+        } else {
+            updates()
+        }
+    }
+    
+    return (
+        <div class={`app ${theme()}`}>
+            <div class="stats">
+                <h2>Batch Updates Demo</h2>
+                <p>Render Count: {renderCount()}</p>
+                <p>Current Count: {count()}</p>
+                <p>Current Name: {name()}</p>
+                <p>Items: {items().join(', ')} ({items().length} items)</p>
+                <p>Theme: {theme()}</p>
+            </div>
+            
+            <div class="controls">
+                <button onclick={handleRegularUpdates}>
+                    Regular Updates (Multiple Renders)
+                </button>
+                
+                <button onclick={handleBatchedUpdates}>
+                    Batched Updates (Single Render)
+                </button>
+                
+                <button onclick={handleNestedBatching}>
+                    Nested Batching
+                </button>
+                
+                <button onclick={handleAsyncBatching}>
+                    Async Batching
+                </button>
+                
+                <button onclick={() => handleConditionalBatching(true)}>
+                    Conditional Batch (True)
+                </button>
+                
+                <button onclick={() => handleConditionalBatching(false)}>
+                    Conditional Batch (False)
+                </button>
+                
+                <button onclick={() => {
+                    // Reset all
+                    batch(() => {
+                        count(0)
+                        name("Reset")
+                        items([1, 2, 3])
+                        theme("light")
+                        renderCount(0)
+                    })
+                }}>
+                    Reset All (Batched)
+                </button>
+            </div>
+            
+            {/* Components that depend on the signals */}
+            <CounterDisplay count={count()} />
+            <NameDisplay name={name()} />
+            <ItemsList items={items()} />
+            <ThemeDisplay theme={theme()} />
+            <RenderTracker renderCount={renderCount()} />
+        </div>
+    )
+}
+
+component CounterDisplay({ count }) {
+    signal localRenderCount = 0
+    
+    createEffect(() => {
+        localRenderCount(prev => prev + 1)
+    })
+    
+    return (
+        <div class="counter-display">
+            <h3>Counter: {count}</h3>
+            <small>Component renders: {localRenderCount()}</small>
+        </div>
+    )
+}
+
+component NameDisplay({ name }) {
+    signal localRenderCount = 0
+    
+    createEffect(() => {
+        localRenderCount(prev => prev + 1)
+    })
+    
+    return (
+        <div class="name-display">
+            <h3>Name: {name}</h3>
+            <small>Component renders: {localRenderCount()}</small>
+        </div>
+    )
+}
+
+component ItemsList({ items }) {
+    signal localRenderCount = 0
+    
+    createEffect(() => {
+        localRenderCount(prev => prev + 1)
+    })
+    
+    return (
+        <div class="items-list">
+            <h3>Items:</h3>
+            <ul>
+                <For each={items} key={(item) => item}>
+                    {(item, index) => (
+                        <li>Item {item} (position {index() + 1})</li>
+                    )}
+                </For>
+            </ul>
+            <small>Component renders: {localRenderCount()}</small>
+        </div>
+    )
+}
+
+component ThemeDisplay({ theme }) {
+    signal localRenderCount = 0
+    
+    createEffect(() => {
+        localRenderCount(prev => prev + 1)
+    })
+    
+    return (
+        <div class={`theme-display theme-${theme}`}>
+            <h3>Current Theme: {theme}</h3>
+            <div class="theme-preview">
+                <div class="color-swatch bg"></div>
+                <div class="color-swatch text"></div>
+            </div>
+            <small>Component renders: {localRenderCount()}</small>
+        </div>
+    )
+}
+
+component RenderTracker({ renderCount }) {
+    return (
+        <div class="render-tracker">
+            <h3>Global Render Tracking</h3>
+            <div class="render-stats">
+                <div class="render-counter">
+                    Total App Renders: {renderCount}
+                </div>
+                <div class="render-explanation">
+                    Batched updates should result in fewer renders compared to individual updates.
+                    Each batch() call should only trigger one render cycle.
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/lab/transformer/catcher-error-handlers/2026-02-11-14-20-catcher-error-handlers.syn

@@ -0,0 +1,211 @@
+// Catcher Error Handlers Test PSR File
+// Tests <Catcher showRetry={true}> error handlers with retry functionality
+
+component CatcherExample() {
+    signal failureRate = 0.5
+    signal maxRetries = 3
+    signal autoRetry = false
+    
+    return (
+        <div>
+            <div class="controls">
+                <label>
+                    Failure Rate: 
+                    <input 
+                        type="range" 
+                        min="0" 
+                        max="1" 
+                        step="0.1"
+                        value={failureRate()} 
+                        onchange={(e) => failureRate(parseFloat(e.target.value))}
+                    />
+                    {Math.round(failureRate() * 100)}%
+                </label>
+                
+                <label>
+                    Max Retries:
+                    <input 
+                        type="number" 
+                        min="1" 
+                        max="10"
+                        value={maxRetries()} 
+                        onchange={(e) => maxRetries(parseInt(e.target.value))}
+                    />
+                </label>
+                
+                <label>
+                    <input 
+                        type="checkbox" 
+                        checked={autoRetry()} 
+                        onchange={(e) => autoRetry(e.target.checked)}
+                    />
+                    Auto Retry
+                </label>
+            </div>
+            
+            {/* Basic Catcher with retry */}
+            <Catcher 
+                showRetry={true}
+                maxRetries={maxRetries()}
+                retryDelay={1000}
+                fallback={(error, retry, retryCount) => (
+                    <div class="catcher-error">
+                        <h4>Operation Failed</h4>
+                        <p>{error.message}</p>
+                        <p>Retry attempt: {retryCount} / {maxRetries()}</p>
+                        <button onclick={retry} disabled={retryCount >= maxRetries()}>
+                            {retryCount >= maxRetries() ? 'Max retries reached' : 'Retry'}
+                        </button>
+                    </div>
+                )}
+            >
+                <UnreliableService failureRate={failureRate()} />
+            </Catcher>
+            
+            {/* Auto-retry Catcher */}
+            <Catcher 
+                showRetry={autoRetry()}
+                maxRetries={5}
+                retryDelay={2000}
+                exponentialBackoff={true}
+                fallback={(error, retry, retryCount, isRetrying) => (
+                    <div class="auto-retry-catcher">
+                        <p>Service Error: {error.message}</p>
+                        {isRetrying ? (
+                            <div class="retrying">
+                                <span>Auto-retrying... ({retryCount}/5)</span>
+                                <div class="spinner"></div>
+                            </div>
+                        ) : (
+                            <div class="manual-retry">
+                                <button onclick={retry}>Manual Retry</button>
+                            </div>
+                        )}
+                    </div>
+                )}
+            >
+                <AsyncService failureRate={failureRate()} />
+            </Catcher>
+            
+            {/* Catcher with custom retry logic */}
+            <Catcher 
+                showRetry={true}
+                retryCondition={(error, retryCount) => {
+                    // Only retry on network errors, not validation errors
+                    return error.type !== 'validation' && retryCount < 3
+                }}
+                fallback={(error, retry, retryCount, isRetrying) => (
+                    <div class="custom-retry-catcher">
+                        <h4>Smart Retry Handler</h4>
+                        <p>Error type: {error.type || 'unknown'}</p>
+                        <p>Message: {error.message}</p>
+                        {error.type === 'validation' ? (
+                            <div class="no-retry">
+                                <p>Validation errors cannot be retried</p>
+                                <button onclick={() => window.location.reload()}>Reset</button>
+                            </div>
+                        ) : (
+                            <button onclick={retry} disabled={retryCount >= 3}>
+                                Retry ({retryCount}/3)
+                            </button>
+                        )}
+                    </div>
+                )}
+            >
+                <SmartService failureRate={failureRate()} />
+            </Catcher>
+        </div>
+    )
+}
+
+component UnreliableService({ failureRate }) {
+    signal data = null
+    
+    createEffect(async () => {
+        try {
+            await new Promise(resolve => setTimeout(resolve, 500))
+            
+            if (Math.random() < failureRate) {
+                throw new Error(`Service failed (${Math.round(failureRate * 100)}% failure rate)`)
+            }
+            
+            data({ result: "Success!", timestamp: Date.now() })
+        } catch (error) {
+            throw error
+        }
+    })
+    
+    return (
+        <div class="service-result">
+            <h4>Unreliable Service</h4>
+            {data() ? (
+                <div>
+                    <p>✓ {data().result}</p>
+                    <small>Loaded at: {new Date(data().timestamp).toLocaleTime()}</small>
+                </div>
+            ) : (
+                <div>Loading...</div>
+            )}
+        </div>
+    )
+}
+
+component AsyncService({ failureRate }) {
+    const [data] = createResource(
+        () => failureRate,
+        async (rate) => {
+            await new Promise(resolve => setTimeout(resolve, 1000))
+            
+            if (Math.random() < rate) {
+                const error = new Error("Async service timeout")
+                error.type = "network"
+                throw error
+            }
+            
+            return { data: "Async success", timestamp: Date.now() }
+        }
+    )
+    
+    return (
+        <div class="async-service">
+            <h4>Async Service</h4>
+            {data.loading && <div>Loading async data...</div>}
+            {data() && (
+                <div>Result: {data().data}</div>
+            )}
+        </div>
+    )
+}
+
+component SmartService({ failureRate }) {
+    signal attempts = 0
+    
+    const tryOperation = async () => {
+        attempts(prev => prev + 1)
+        await new Promise(resolve => setTimeout(resolve, 300))
+        
+        const random = Math.random()
+        if (random < failureRate * 0.7) {
+            const error = new Error("Network timeout")
+            error.type = "network"
+            throw error
+        } else if (random < failureRate) {
+            const error = new Error("Invalid input data")
+            error.type = "validation"
+            throw error
+        }
+        
+        return `Success after ${attempts()} attempts`
+    }
+    
+    const [result] = createResource(() => attempts(), tryOperation)
+    
+    return (
+        <div class="smart-service">
+            <h4>Smart Service</h4>
+            <p>Attempts: {attempts()}</p>
+            {result.loading && <div>Processing...</div>}
+            {result() && <div>Result: {result()}</div>}
+        </div>
+    )
+}