@synetics/ui 0.7.0-alpha

package/src/lab/transformer/resource-pre-resolution/2026-02-11-14-20-resource-pre-resolution.syn

@@ -0,0 +1,405 @@
+// Resource Pre Resolution Test PSR File
+// Tests resource pre-resolution and preloading strategies
+
+component ResourcePreResolutionExample() {
+    signal selectedUserId = null
+    signal preloadEnabled = true
+    signal hoverDelay = 500
+    signal preloadedUserIds = []
+    
+    const users = [
+        { id: 1, name: 'Alice' },
+        { id: 2, name: 'Bob' },
+        { id: 3, name: 'Charlie' },
+        { id: 4, name: 'Diana' },
+        { id: 5, name: 'Eve' }
+    ]
+    
+    // Resource that can be pre-resolved
+    const [userDetails, { preload }] = createResource(
+        () => selectedUserId(),
+        async (id) => {
+            console.log('Fetching user details for:', id)
+            await new Promise(resolve => setTimeout(resolve, 1500))
+            
+            return {
+                id,
+                name: users.find(u => u.id === id)?.name,
+                email: `user${id}@example.com`,
+                bio: `Biography for user ${id}. This is a detailed description.`,
+                posts: 42 + id * 10,
+                followers: 100 + id * 50
+            }
+        }
+    )
+    
+    // Hover to preload
+    const handleUserHover = (userId) => {
+        if (!preloadEnabled()) return
+        
+        if (!preloadedUserIds().includes(userId)) {
+            console.log('Preloading user:', userId)
+            preloadedUserIds(prev => [...prev, userId])
+            
+            // Trigger preload after delay
+            setTimeout(() => {
+                preload(userId)
+            }, hoverDelay())
+        }
+    }
+    
+    const handleUserClick = (userId) => {
+        console.log('Loading user:', userId)
+        selectedUserId(userId)
+    }
+    
+    return (
+        <div>
+            <h1>Resource Pre-Resolution Demo</h1>
+            
+            <div class="controls">
+                <h3>Preload Settings</h3>
+                
+                <label>
+                    <input 
+                        type="checkbox"
+                        checked={preloadEnabled()}
+                        onchange={(e) => preloadEnabled(e.target.checked)}
+                    />
+                    Enable hover preloading
+                </label>
+                
+                <label>
+                    Hover delay: {hoverDelay()}ms
+                    <input 
+                        type="range"
+                        min="0"
+                        max="2000"
+                        step="100"
+                        value={hoverDelay()}
+                        oninput={(e) => hoverDelay(parseInt(e.target.value))}
+                    />
+                </label>
+                
+                <div class="preload-status">
+                    Preloaded users: {preloadedUserIds().join(', ') || 'None'}
+                </div>
+            </div>
+            
+            <div class="content-layout">
+                <div class="user-list">
+                    <h3>Users</h3>
+                    <p class="hint">
+                        {preloadEnabled() 
+                            ? 'Hover over a user to preload their data' 
+                            : 'Preloading disabled - click to load'}
+                    </p>
+                    
+                    <For each={users} key={(user) => user.id}>
+                        {(user) => (
+                            <div 
+                                class={`user-item ${selectedUserId() === user.id ? 'selected' : ''} ${preloadedUserIds().includes(user.id) ? 'preloaded' : ''}`}
+                                onmouseenter={() => handleUserHover(user.id)}
+                                onclick={() => handleUserClick(user.id)}
+                            >
+                                <span class="user-name">{user.name}</span>
+                                {preloadedUserIds().includes(user.id) && (
+                                    <span class="preload-badge">✓ Preloaded</span>
+                                )}
+                            </div>
+                        )}
+                    </For>
+                </div>
+                
+                <div class="user-details">
+                    <h3>User Details</h3>
+                    
+                    {!selectedUserId() && (
+                        <div class="empty-state">
+                            Select a user to view details
+                        </div>
+                    )}
+                    
+                    {selectedUserId() && (
+                        <div class="details-content">
+                            {userDetails.loading && (
+                                <div class="loading-indicator">
+                                    <div class="spinner"></div>
+                                    <p>
+                                        {preloadedUserIds().includes(selectedUserId()) 
+                                            ? 'Loading from cache...' 
+                                            : 'Fetching user data...'}
+                                    </p>
+                                </div>
+                            )}
+                            
+                            {userDetails() && !userDetails.loading && (
+                                <div class="details-card">
+                                    <h4>{userDetails().name}</h4>
+                                    <p class="email">{userDetails().email}</p>
+                                    <p class="bio">{userDetails().bio}</p>
+                                    
+                                    <div class="stats">
+                                        <div class="stat">
+                                            <strong>{userDetails().posts}</strong>
+                                            <span>Posts</span>
+                                        </div>
+                                        <div class="stat">
+                                            <strong>{userDetails().followers}</strong>
+                                            <span>Followers</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+            
+            <RoutePreloadingExample />
+            <PrefetchOnVisibleExample />
+            <AggressivePreloadExample />
+        </div>
+    )
+}
+
+component RoutePreloadingExample() {
+    signal currentRoute = 'home'
+    signal hoveredRoute = null
+    
+    const routes = [
+        { path: 'home', label: 'Home' },
+        { path: 'dashboard', label: 'Dashboard' },
+        { path: 'profile', label: 'Profile' },
+        { path: 'settings', label: 'Settings' }
+    ]
+    
+    const [routeData, { preload }] = createResource(
+        () => currentRoute(),
+        async (route) => {
+            console.log('Loading route:', route)
+            await new Promise(resolve => setTimeout(resolve, 1000))
+            
+            return {
+                route,
+                content: `Content for ${route} page`,
+                loadedAt: Date.now()
+            }
+        }
+    )
+    
+    const handleRouteHover = (routePath) => {
+        hoveredRoute(routePath)
+        
+        // Preload route data on hover
+        setTimeout(() => {
+            if (hoveredRoute() === routePath) {
+                console.log('Preloading route:', routePath)
+                preload(routePath)
+            }
+        }, 300)
+    }
+    
+    return (
+        <div class="route-preloading">
+            <h3>Route Preloading Pattern</h3>
+            
+            <nav class="route-nav">
+                <For each={routes} key={(route) => route.path}>
+                    {(route) => (
+                        <a 
+                            class={`nav-link ${currentRoute() === route.path ? 'active' : ''}`}
+                            onmouseenter={() => handleRouteHover(route.path)}
+                            onmouseleave={() => hoveredRoute(null)}
+                            onclick={(e) => {
+                                e.preventDefault()
+                                currentRoute(route.path)
+                            }}
+                            href={`#${route.path}`}
+                        >
+                            {route.label}
+                            {hoveredRoute() === route.path && ' 🔄'}
+                        </a>
+                    )}
+                </For>
+            </nav>
+            
+            <div class="route-content">
+                {routeData.loading && (
+                    <div class="loading">Loading {currentRoute()}...</div>
+                )}
+                
+                {routeData() && !routeData.loading && (
+                    <div class="page-content">
+                        <h4>{routeData().route}</h4>
+                        <p>{routeData().content}</p>
+                        <small>Loaded at: {new Date(routeData().loadedAt).toLocaleTimeString()}</small>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+component PrefetchOnVisibleExample() {
+    signal elementRef = null
+    signal isVisible = false
+    signal dataFetched = false
+    
+    const [visibleData] = createResource(
+        () => isVisible() && !dataFetched(),
+        async () => {
+            console.log('Fetching data when visible...')
+            dataFetched(true)
+            await new Promise(resolve => setTimeout(resolve, 1500))
+            
+            return {
+                items: Array.from({ length: 10 }, (_, i) => ({
+                    id: i + 1,
+                    name: `Item ${i + 1}`
+                }))
+            }
+        }
+    )
+    
+    // Setup intersection observer
+    onMount(() => {
+        if (!elementRef()) return
+        
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    console.log('Element is visible - prefetching')
+                    isVisible(true)
+                }
+            })
+        }, { threshold: 0.1 })
+        
+        observer.observe(elementRef())
+        
+        onCleanup(() => {
+            observer.disconnect()
+        })
+    })
+    
+    return (
+        <div class="prefetch-on-visible">
+            <h3>Prefetch on Visible Pattern</h3>
+            
+            <div class="spacer">
+                Scroll down to load data when the section becomes visible...
+            </div>
+            
+            <div class="content-section" ref={elementRef}>
+                <h4>Below-the-Fold Content</h4>
+                
+                {!isVisible() && (
+                    <div class="not-visible">
+                        Content not visible yet - data will load when scrolled into view
+                    </div>
+                )}
+                
+                {visibleData.loading && (
+                    <div class="loading">
+                        Loading content... (triggered by visibility)
+                    </div>
+                )}
+                
+                {visibleData() && (
+                    <div class="items">
+                        <For each={visibleData().items} key={(item) => item.id}>
+                            {(item) => (
+                                <div class="item">{item.name}</div>
+                            )}
+                        </For>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+component AggressivePreloadExample() {
+    signal currentPage = 1
+    const totalPages = 5
+    
+    // Preload current, previous, and next pages
+    const pagesToPreload = () => {
+        const pages = [currentPage()]
+        if (currentPage() > 1) pages.push(currentPage() - 1)
+        if (currentPage() < totalPages) pages.push(currentPage() + 1)
+        return pages
+    }
+    
+    const [pageData, { preload }] = createResource(
+        () => currentPage(),
+        async (page) => {
+            console.log('Loading page:', page)
+            await new Promise(resolve => setTimeout(resolve, 1000))
+            
+            return {
+                page,
+                items: Array.from({ length: 10 }, (_, i) => ({
+                    id: (page - 1) * 10 + i + 1,
+                    title: `Item ${(page - 1) * 10 + i + 1} on page ${page}`
+                }))
+            }
+        }
+    )
+    
+    // Aggressively preload adjacent pages
+    createEffect(() => {
+        const pages = pagesToPreload()
+        pages.forEach(page => {
+            if (page !== currentPage()) {
+                console.log('Aggressively preloading page:', page)
+                setTimeout(() => preload(page), 500)
+            }
+        })
+    })
+    
+    return (
+        <div class="aggressive-preload">
+            <h3>Aggressive Preload Pattern</h3>
+            <p>Current page and adjacent pages are automatically preloaded</p>
+            
+            <div class="pagination">
+                <button 
+                    onclick={() => currentPage(Math.max(1, currentPage() - 1))}
+                    disabled={currentPage() === 1}
+                >
+                    Previous
+                </button>
+                
+                <span class="page-indicator">
+                    Page {currentPage()} of {totalPages}
+                </span>
+                
+                <button 
+                    onclick={() => currentPage(Math.min(totalPages, currentPage() + 1))}
+                    disabled={currentPage() === totalPages}
+                >
+                    Next
+                </button>
+            </div>
+            
+            <div class="page-content">
+                {pageData.loading && <div class="loading">Loading page...</div>}
+                
+                {pageData() && !pageData.loading && (
+                    <div class="items-list">
+                        <For each={pageData().items} key={(item) => item.id}>
+                            {(item) => (
+                                <div class="item-card">{item.title}</div>
+                            )}
+                        </For>
+                    </div>
+                )}
+            </div>
+            
+            <div class="preload-hint">
+                Preloaded pages: {pagesToPreload().join(', ')}
+            </div>
+        </div>
+    )
+}

package/src/lab/transformer/resource-refetch-patterns/2026-02-11-14-20-resource-refetch-patterns.syn

@@ -0,0 +1,120 @@
+// Resource Refetch Patterns Test PSR File
+// Tests resource refetch, revalidation, and dependency invalidation
+
+component ResourceRefetchExample() {
+    signal refreshTrigger = 0
+    signal autoRefresh = false
+    signal filters = { category: "all", status: "active" }
+    
+    // Resource that depends on multiple signals
+    const itemsResource = createResource(
+        () => [filters(), refreshTrigger()],
+        async ([currentFilters, trigger]) => {
+            const params = new URLSearchParams(currentFilters)
+            const response = await fetch(`/api/items?${params}&_t=${trigger}`)
+            return response.json()
+        }
+    )
+    
+    // Auto-refreshing resource
+    const statsResource = createResource(
+        () => autoRefresh() ? Date.now() : 0,
+        async () => {
+            const response = await fetch("/api/stats")
+            return response.json()
+        }
+    )
+    
+    // Resource with manual refetch control
+    const expensiveResource = createResource(
+        () => "expensive-data",
+        async () => {
+            await new Promise(resolve => setTimeout(resolve, 3000))
+            return { computed: Math.random(), timestamp: Date.now() }
+        }
+    )
+    
+    // Set up auto-refresh interval
+    createEffect(() => {
+        if (autoRefresh()) {
+            const interval = setInterval(() => {
+                refreshTrigger(prev => prev + 1)
+            }, 5000)
+            
+            return () => clearInterval(interval)
+        }
+    })
+    
+    return (
+        <div>
+            <div class="controls">
+                <button onclick={() => refreshTrigger(prev => prev + 1)}>
+                    Manual Refresh
+                </button>
+                
+                <button onclick={() => itemsResource.refetch()}>
+                    Refetch Items
+                </button>
+                
+                <button onclick={() => expensiveResource.refetch()}>
+                    Refetch Expensive Data
+                </button>
+                
+                <label>
+                    <input 
+                        type="checkbox" 
+                        checked={autoRefresh()} 
+                        onchange={(e) => autoRefresh(e.target.checked)}
+                    />
+                    Auto Refresh
+                </label>
+            </div>
+            
+            <div class="filters">
+                <select onchange={(e) => filters(prev => ({ ...prev, category: e.target.value }))}>
+                    <option value="all">All Categories</option>
+                    <option value="tech">Tech</option>
+                    <option value="design">Design</option>
+                </select>
+                
+                <select onchange={(e) => filters(prev => ({ ...prev, status: e.target.value }))}>
+                    <option value="active">Active</option>
+                    <option value="inactive">Inactive</option>
+                    <option value="all">All Status</option>
+                </select>
+            </div>
+            
+            <div class="data-sections">
+                <div class="items-section">
+                    <h3>Items (Refetch Count: {refreshTrigger()})</h3>
+                    {itemsResource.isLoading && <div>Loading items...</div>}
+                    {itemsResource.error && <div>Error loading items</div>}
+                    {itemsResource() && (
+                        <div>
+                            <p>Found {itemsResource().length} items</p>
+                            <pre>{JSON.stringify(itemsResource(), null, 2)}</pre>
+                        </div>
+                    )}
+                </div>
+                
+                <div class="stats-section">
+                    <h3>Stats (Auto: {autoRefresh() ? 'On' : 'Off'})</h3>
+                    {statsResource() && (
+                        <pre>{JSON.stringify(statsResource(), null, 2)}</pre>
+                    )}
+                </div>
+                
+                <div class="expensive-section">
+                    <h3>Expensive Data</h3>
+                    {expensiveResource.isLoading && <div>Computing...</div>}
+                    {expensiveResource() && (
+                        <div>
+                            <p>Result: {expensiveResource().computed}</p>
+                            <p>Computed at: {new Date(expensiveResource().timestamp).toLocaleString()}</p>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}

package/src/lab/transformer/resource-state-handling/2026-02-11-14-20-resource-state-handling.syn

@@ -0,0 +1,104 @@
+// Resource State Handling Test PSR File
+// Tests resource.isLoading, resource.error, resource.data patterns
+
+component ResourceStateExample() {
+    signal postId = 1
+    
+    const postResource = createResource(
+        () => postId(),
+        async (id) => {
+            // Simulate random delay and potential error
+            await new Promise(resolve => setTimeout(resolve, Math.random() * 2000))
+            if (Math.random() > 0.8) {
+                throw new Error(`Failed to fetch post ${id}`)
+            }
+            return {
+                id,
+                title: `Post ${id} Title`,
+                content: `This is the content of post ${id}`,
+                author: `Author ${id}`
+            }
+        }
+    )
+    
+    const commentsResource = createResource(
+        () => postResource() && postResource().id,
+        async (postId) => {
+            await new Promise(resolve => setTimeout(resolve, 1000))
+            return Array.from({ length: 3 }, (_, i) => ({
+                id: i + 1,
+                postId,
+                text: `Comment ${i + 1} on post ${postId}`,
+                author: `Commenter ${i + 1}`
+            }))
+        }
+    )
+    
+    return (
+        <div>
+            <div class="controls">
+                <button onclick={() => postId(postId() + 1)}>
+                    Load Post {postId() + 1}
+                </button>
+                <button onclick={() => postResource.refetch()}>
+                    Retry Current Post
+                </button>
+            </div>
+            
+            {/* Loading state handling */}
+            <div class="post-section">
+                <h2>Post Data</h2>
+                
+                {postResource.isLoading && (
+                    <div class="loading">Loading post...</div>
+                )}
+                
+                {postResource.error && (
+                    <div class="error">
+                        Error: {postResource.error.message}
+                        <button onclick={() => postResource.refetch()}>Retry</button>
+                    </div>
+                )}
+                
+                {postResource() && (
+                    <div class="post">
+                        <h3>{postResource().title}</h3>
+                        <p>{postResource().content}</p>
+                        <small>By: {postResource().author}</small>
+                    </div>
+                )}
+            </div>
+            
+            {/* Nested resource state */}
+            <div class="comments-section">
+                <h2>Comments</h2>
+                
+                {commentsResource.isLoading && (
+                    <div class="loading">Loading comments...</div>
+                )}
+                
+                {commentsResource.error && (
+                    <div class="error">Failed to load comments</div>
+                )}
+                
+                {commentsResource() && (
+                    <div class="comments">
+                        {commentsResource().map(comment => (
+                            <div key={comment.id} class="comment">
+                                <p>{comment.text}</p>
+                                <small>By: {comment.author}</small>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+            
+            {/* Combined state checking */}
+            <div class="status">
+                <p>Post Loading: {postResource.isLoading ? 'Yes' : 'No'}</p>
+                <p>Comments Loading: {commentsResource.isLoading ? 'Yes' : 'No'}</p>
+                <p>Has Errors: {(postResource.error || commentsResource.error) ? 'Yes' : 'No'}</p>
+            </div>
+        </div>
+    )
+}