@synetics/ui 0.7.0-alpha

package/src/lab/transformer/complex-jsx-expressions/2026-02-11-14-20-complex-jsx-expressions.syn

@@ -0,0 +1,49 @@
+// Complex JSX Expressions Test PSR File
+// Tests complex JSX expressions, conditionals, and logical operators
+
+component ComplexJSXExample() {
+    signal user = { name: "John", age: 30, isAdmin: true }
+    signal items = [1, 2, 3, 4, 5]
+    signal loading = false
+    signal error = null
+    
+    return (
+        <div>
+            {/* Conditional rendering with ternary */}
+            {loading ? <div>Loading...</div> : <div>Content loaded</div>}
+            
+            {/* Logical AND operators */}
+            {user.isAdmin && <AdminPanel />}
+            {error && <ErrorMessage error={error} />}
+            
+            {/* Complex nested expressions */}
+            {user.age >= 18 && user.isAdmin ? (
+                <div>
+                    <h2>Admin Dashboard for {user.name}</h2>
+                    {items.length > 0 && (
+                        <ul>
+                            {items.map(item => (
+                                <li key={item}>
+                                    {item % 2 === 0 ? `Even: ${item}` : `Odd: ${item}`}
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </div>
+            ) : (
+                <div>Access Denied</div>
+            )}
+            
+            {/* Logical OR with fallback */}
+            {user.name || "Anonymous User"}
+        </div>
+    )
+}
+
+component AdminPanel() {
+    return <div class="admin-panel">Admin Controls</div>
+}
+
+component ErrorMessage({ error }) {
+    return <div class="error">{error.message}</div>
+}

package/src/lab/transformer/complex-jsx-expressions/2026-02-11-15-01-complex-jsx-expressions.syn

@@ -0,0 +1,227 @@
+/**
+ * Complex JSX Expressions Test - PSR File
+ * 
+ * Tests comprehensive complex expression functionality in JSX
+ * This file should transform correctly if complex JSX expressions are implemented
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+
+export interface IComplexJSXTestProps {
+  initialItems?: Array<{
+    id: number;
+    name: string;
+    status: 'active' | 'inactive' | 'pending';
+    createdAt: Date;
+    checked: boolean;
+    metadata?: {
+      category: string;
+      tags: string[];
+      priority?: number;
+    };
+  }>;
+}
+
+export component ComplexJSXTest({ initialItems = [] }: IComplexJSXTestProps) {
+  const [items, setItems] = createSignal(initialItems);
+  const [filter, setFilter] = createSignal<'all' | 'active' | 'checked'>('all');
+  const [user, setUser] = createSignal<{
+    profile?: {
+      name: string;
+      settings?: {
+        theme: 'light' | 'dark';
+        locale: string;
+      };
+    };
+  }>({});
+
+  // Test 1: Method chaining with filter and map
+  const filteredItems = () => {
+    return items()
+      .filter(item => {
+        if (filter() === 'all') return true;
+        if (filter() === 'active') return item.status === 'active';
+        if (filter() === 'checked') return item.checked;
+        return false;
+      })
+      .sort((a, b) => a.name.localeCompare(b.name));
+  };
+
+  const formatDate = (date: Date): string => {
+    return date.toLocaleDateString();
+  };
+
+  const toggleItem = (id: number) => {
+    setItems(items().map(item => 
+      item.id === id ? { ...item, checked: !item.checked } : item
+    ));
+  };
+
+  const updateSelected = () => {
+    const selected = items().filter(item => item.checked);
+    console.log('Selected items:', selected);
+  };
+
+  return (
+    <div style="padding: 20px; font-family: sans-serif;">
+      
+      {/* Test 1: Simple method chaining in JSX */}
+      <h2>Items Count: {items().length} (Filtered: {filteredItems().length})</h2>
+      
+      {/* Test 2: Complex method chaining with callbacks */}
+      <div>
+        {filteredItems()
+          .filter(item => item.status !== 'inactive')
+          .map((item, index) => (
+            <div 
+              key={item.id}
+              className={`item-${index} status-${item.status} ${item.checked ? 'checked' : 'unchecked'}`}
+              style={`
+                padding: 10px; 
+                margin: 5px 0; 
+                background: ${item.checked ? '#e7f3ff' : '#f8f9fa'}; 
+                border-left: 4px solid ${item.status === 'active' ? '#28a745' : '#6c757d'};
+              `}
+            >
+              {/* Test 3: Object property access chains */}
+              <h3>{item.name} - {formatDate(item.createdAt)}</h3>
+              
+              {/* Test 4: Optional chaining */}
+              {item.metadata?.category && (
+                <span>Category: {item.metadata.category}</span>
+              )}
+              
+              {/* Test 5: Complex conditional with method calls */}
+              {item.metadata?.tags?.length > 0 ? (
+                <div>
+                  Tags: {item.metadata.tags.join(', ')}
+                  {item.metadata.priority && ` (Priority: ${item.metadata.priority})`}
+                </div>
+              ) : (
+                <div>No tags</div>
+              )}
+              
+              {/* Test 6: Event handler with complex expression */}
+              <button 
+                onClick={() => toggleItem(item.id)}
+                style={`background: ${item.checked ? '#dc3545' : '#007bff'}; color: white; border: none; padding: 5px 10px;`}
+              >
+                {item.checked ? 'Uncheck' : 'Check'}
+              </button>
+            </div>
+          ))
+        }
+      </div>
+
+      {/* Test 7: Nested method calls and conditional rendering */}
+      <div style="margin-top: 20px;">
+        <h3>Statistics</h3>
+        
+        {/* Test 8: Complex filtering and calculations */}
+        <div>
+          Active Items: {items().filter(item => item.status === 'active').length}
+        </div>
+        <div>
+          Checked Items: {items().filter(item => item.checked).length}
+        </div>
+        <div>
+          Items with Tags: {items().filter(item => item.metadata?.tags?.length > 0).length}
+        </div>
+        
+        {/* Test 9: Method chaining with reduce */}
+        <div>
+          Total Priority: {items()
+            .filter(item => item.metadata?.priority)
+            .reduce((sum, item) => sum + (item.metadata?.priority || 0), 0)
+          }
+        </div>
+      </div>
+
+      {/* Test 10: Optional chaining in different contexts */}
+      <div style="margin-top: 20px;">
+        <h3>User Profile</h3>
+        
+        {user()?.profile ? (
+          <div>
+            <p>Name: {user().profile?.name}</p>
+            <p>Theme: {user().profile?.settings?.theme || 'default'}</p>
+            <p>Locale: {user().profile?.settings?.locale || 'en-US'}</p>
+          </div>
+        ) : (
+          <p>No user profile available</p>
+        )}
+      </div>
+
+      {/* Test 11: Event handlers with complex expressions */}
+      <div style="margin-top: 20px;">
+        <button 
+          onClick={() => setFilter(filter() === 'all' ? 'active' : 'all')}
+          style="margin-right: 10px;"
+        >
+          Filter: {filter() === 'all' ? 'Show All' : 'Show Active'} 
+          ({(filter() === 'all' ? items() : items().filter(i => i.status === 'active')).length})
+        </button>
+        
+        <button 
+          onClick={updateSelected}
+          disabled={items().filter(item => item.checked).length === 0}
+        >
+          Update {items().filter(item => item.checked).length} Selected Items
+        </button>
+      </div>
+
+      {/* Test 12: Conditional rendering with complex expressions */}
+      {items().some(item => item.checked) && (
+        <div style="margin-top: 20px; padding: 15px; background: #d4edda; border-radius: 4px;">
+          <strong>Selection Summary:</strong>
+          <ul>
+            {items()
+              .filter(item => item.checked)
+              .map(item => (
+                <li key={item.id}>
+                  {item.name} 
+                  {item.metadata?.category && ` (${item.metadata.category})`}
+                  {item.metadata?.priority && ` - Priority: ${item.metadata.priority}`}
+                </li>
+              ))
+            }
+          </ul>
+        </div>
+      )}
+
+      {/* Test 13: Nested ternary with method calls */}
+      <div style="margin-top: 20px;">
+        <p style={`color: ${
+          items().filter(i => i.checked).length > items().length / 2 
+            ? '#28a745' 
+            : items().filter(i => i.checked).length > 0 
+              ? '#ffc107' 
+              : '#dc3545'
+        };`}>
+          Selection Status: {
+            items().filter(i => i.checked).length > items().length / 2
+              ? 'Majority Selected'
+              : items().filter(i => i.checked).length > 0
+                ? 'Partially Selected' 
+                : 'None Selected'
+          }
+        </p>
+      </div>
+
+    </div>
+  );
+}
+
+/**
+ * Expected transformation should handle:
+ * 1. Method chaining: items().filter().map()
+ * 2. Arrow functions in JSX: (item, index) => <div/>
+ * 3. Optional chaining: user?.profile?.name
+ * 4. Complex conditionals: condition ? a : b  
+ * 5. Nested expressions with proper reactivity
+ * 6. Event handlers with complex logic
+ * 7. Property access chains: item.metadata.category
+ * 8. Method calls within expressions: formatDate()
+ * 9. Reactive dependency tracking
+ * 10. Performance optimization for static parts
+ */

package/src/lab/transformer/concurrent-rendering/2026-02-11-14-20-concurrent-rendering.syn

@@ -0,0 +1,291 @@
+// Concurrent Rendering Test PSR File
+// Tests concurrent rendering mode transformations
+
+component ConcurrentRenderingExample() {
+    signal isPending = false
+    signal currentView = "home"
+    signal items = Array.from({ length: 1000 }, (_, i) => ({ id: i, name: `Item ${i}` }))
+    signal searchQuery = ""
+    signal renderMode = "blocking"
+    
+    // Transition for non-blocking updates
+    const [startTransition, isPendingTransition] = useTransition()
+    
+    // Handle view changes with transition
+    const handleViewChange = (newView) => {
+        if (renderMode() === "concurrent") {
+            startTransition(() => {
+                currentView(newView)
+            })
+        } else {
+            currentView(newView)
+        }
+    }
+    
+    // Handle search with deferred updates
+    const handleSearch = (query) => {
+        if (renderMode() === "concurrent") {
+            // Update UI immediately
+            searchQuery(query)
+            
+            // Defer expensive filtering
+            startTransition(() => {
+                // Trigger re-render with filtered results
+                const filtered = items().filter(item => 
+                    item.name.toLowerCase().includes(query.toLowerCase())
+                )
+                items([...filtered])
+            })
+        } else {
+            searchQuery(query)
+            const filtered = items().filter(item => 
+                item.name.toLowerCase().includes(query.toLowerCase())
+            )
+            items([...filtered])
+        }
+    }
+    
+    return (
+        <div class="concurrent-rendering-demo">
+            <h1>Concurrent Rendering Demo</h1>
+            
+            <div class="controls">
+                <div class="render-mode">
+                    <label>
+                        <input 
+                            type="radio" 
+                            name="renderMode"
+                            value="blocking"
+                            checked={renderMode() === "blocking"}
+                            onchange={() => renderMode("blocking")}
+                        />
+                        Blocking Mode
+                    </label>
+                    <label>
+                        <input 
+                            type="radio" 
+                            name="renderMode"
+                            value="concurrent"
+                            checked={renderMode() === "concurrent"}
+                            onchange={() => renderMode("concurrent")}
+                        />
+                        Concurrent Mode
+                    </label>
+                </div>
+                
+                <div class="pending-indicator">
+                    {isPendingTransition() && (
+                        <span class="pending-badge">⏳ Transition pending...</span>
+                    )}
+                </div>
+            </div>
+            
+            <div class="navigation">
+                <button 
+                    onclick={() => handleViewChange("home")}
+                    class={currentView() === "home" ? "active" : ""}
+                >
+                    Home
+                </button>
+                <button 
+                    onclick={() => handleViewChange("list")}
+                    class={currentView() === "list" ? "active" : ""}
+                >
+                    Large List
+                </button>
+                <button 
+                    onclick={() => handleViewChange("complex")}
+                    class={currentView() === "complex" ? "active" : ""}
+                >
+                    Complex View
+                </button>
+            </div>
+            
+            <div class="search-section">
+                <input 
+                    type="text"
+                    placeholder="Search items..."
+                    value={searchQuery()}
+                    oninput={(e) => handleSearch(e.target.value)}
+                />
+                <small>
+                    Mode: {renderMode()} | 
+                    Items: {items().length} | 
+                    Pending: {isPendingTransition() ? 'Yes' : 'No'}
+                </small>
+            </div>
+            
+            <div class="content">
+                {/* Use Suspense with concurrent features */}
+                <Suspense fallback={<ViewLoadingIndicator />}>
+                    <Show when={currentView() === "home"}>
+                        <HomeView />
+                    </Show>
+                    
+                    <Show when={currentView() === "list"}>
+                        <Suspense fallback={<div>Loading list...</div>}>
+                            <LargeListView items={items()} query={searchQuery()} />
+                        </Suspense>
+                    </Show>
+                    
+                    <Show when={currentView() === "complex"}>
+                        <Suspense fallback={<div>Loading complex view...</div>}>
+                            <ComplexView isPending={isPendingTransition()} />
+                        </Suspense>
+                    </Show>
+                </Suspense>
+            </div>
+            
+            <DeferredComponent />
+        </div>
+    )
+}
+
+component HomeView() {
+    return (
+        <div class="home-view">
+            <h2>Home View</h2>
+            <p>This is the home view with minimal rendering cost.</p>
+            <div class="home-content">
+                <p>Switch to other views to see concurrent rendering in action.</p>
+                <p>In concurrent mode, the UI stays responsive during transitions.</p>
+            </div>
+        </div>
+    )
+}
+
+component LargeListView({ items, query }) {
+    signal renderTime = 0
+    
+    onMount(() => {
+        const start = performance.now()
+        
+        // Simulate expensive render
+        requestIdleCallback(() => {
+            const end = performance.now()
+            renderTime(end - start)
+        })
+    })
+    
+    return (
+        <div class="large-list-view">
+            <h2>Large List View</h2>
+            <p>Items: {items.length} | Render time: {renderTime().toFixed(2)}ms</p>
+            <p>Search query: "{query}"</p>
+            
+            <div class="item-list">
+                <For each={items} key={(item) => item.id}>
+                    {(item) => (
+                        <ExpensiveListItem item={item} />
+                    )}
+                </For>
+            </div>
+        </div>
+    )
+}
+
+component ExpensiveListItem({ item }) {
+    // Simulate expensive component
+    signal hovered = false
+    
+    return (
+        <div 
+            class={`list-item ${hovered() ? 'hovered' : ''}`}
+            onmouseenter={() => hovered(true)}
+            onmouseleave={() => hovered(false)}
+        >
+            <span class="item-id">#{item.id}</span>
+            <span class="item-name">{item.name}</span>
+            
+            <Show when={hovered()}>
+                <div class="item-details">
+                    <p>Additional details for {item.name}</p>
+                    <button onclick={() => console.log('Item clicked:', item.id)}>
+                        View Details
+                    </button>
+                </div>
+            </Show>
+        </div>
+    )
+}
+
+component ComplexView({ isPending }) {
+    signal complexData = Array.from({ length: 50 }, (_, i) => ({
+        id: i,
+        nested: Array.from({ length: 20 }, (_, j) => ({ id: j, value: Math.random() }))
+    }))
+    
+    return (
+        <div class="complex-view">
+            <h2>Complex View</h2>
+            <p>This view has deeply nested components with heavy computation.</p>
+            <p>Pending: {isPending ? 'Yes' : 'No'}</p>
+            
+            <div class="complex-content">
+                <For each={complexData()} key={(item) => item.id}>
+                    {(item) => (
+                        <ComplexCard data={item} />
+                    )}
+                </For>
+            </div>
+        </div>
+    )
+}
+
+component ComplexCard({ data }) {
+    signal expanded = false
+    
+    return (
+        <div class="complex-card">
+            <div class="card-header" onclick={() => expanded(!expanded())}>
+                <h4>Card {data.id}</h4>
+                <span>{expanded() ? '▼' : '▶'}</span>
+            </div>
+            
+            <Show when={expanded()}>
+                <div class="card-content">
+                    <For each={data.nested} key={(item) => item.id}>
+                        {(item) => (
+                            <div class="nested-item">
+                                Item {item.id}: {item.value.toFixed(3)}
+                            </div>
+                        )}
+                    </For>
+                </div>
+            </Show>
+        </div>
+    )
+}
+
+component DeferredComponent() {
+    // useDeferredValue for lower priority updates
+    signal input = ""
+    const deferredInput = useDeferredValue(input)
+    
+    return (
+        <div class="deferred-component">
+            <h3>Deferred Updates</h3>
+            <input 
+                type="text"
+                value={input()}
+                oninput={(e) => input(e.target.value)}
+                placeholder="Type to see deferred value..."
+            />
+            
+            <div class="deferred-display">
+                <p>Immediate value: {input()}</p>
+                <p>Deferred value: {deferredInput()}</p>
+                <p>Values match: {input() === deferredInput() ? 'Yes' : 'No (updating...)'}</p>
+            </div>
+        </div>
+    )
+}
+
+component ViewLoadingIndicator() {
+    return (
+        <div class="view-loading">
+            <div class="loading-spinner"></div>
+            <p>Loading view...</p>
+        </div>
+    )
+}