@synetics/ui 0.7.0-alpha

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

@@ -0,0 +1,234 @@
+// Server Side Rendering Test PSR File
+// Tests server-side rendering transformations and hydration
+
+component SSRExample() {
+    signal clientOnly = false
+    signal hydrated = false
+    signal serverData = null
+    
+    // Server-side data fetching
+    const initialData = createServerResource(async () => {
+        // This runs on the server during SSR
+        return {
+            timestamp: Date.now(),
+            userAgent: "server",
+            initialContent: "Server-rendered content",
+            metadata: {
+                renderMode: "ssr",
+                buildTime: "2026-02-11T14:20:00Z"
+            }
+        }
+    })
+    
+    // Client-side hydration effect
+    onMount(() => {
+        hydrated(true)
+        
+        // Update data after hydration
+        serverData({
+            ...initialData(),
+            clientTimestamp: Date.now(),
+            hydrationComplete: true
+        })
+    })
+    
+    return (
+        <div class="ssr-container">
+            <ServerOnly>
+                <div class="server-only-banner">
+                    <p>⚡ This content only renders on the server</p>
+                    <p>Build time: {initialData()?.metadata.buildTime}</p>
+                </div>
+            </ServerOnly>
+            
+            <ClientOnly>
+                <div class="client-only-banner">
+                    <p>🌐 This content only renders on the client</p>
+                    <p>Hydrated: {hydrated() ? 'Yes' : 'No'}</p>
+                </div>
+            </ClientOnly>
+            
+            <div class="universal-content">
+                <h1>Universal Content (SSR + Hydration)</h1>
+                
+                <div class="data-section">
+                    <h3>Server Data:</h3>
+                    <pre>{JSON.stringify(initialData(), null, 2)}</pre>
+                </div>
+                
+                <Show when={hydrated()}>
+                    <div class="client-data-section">
+                        <h3>Post-Hydration Data:</h3>
+                        <pre>{JSON.stringify(serverData(), null, 2)}</pre>
+                    </div>
+                </Show>
+                
+                <HydratedComponent initialValue={initialData()?.initialContent} />
+                
+                <div class="interactive-section">
+                    <button onclick={() => clientOnly(!clientOnly())}>
+                        Toggle Client Only: {clientOnly() ? 'ON' : 'OFF'}
+                    </button>
+                    
+                    <Show when={clientOnly()}>
+                        <div class="client-interactive">
+                            <p>🎯 Interactive client-only content</p>
+                            <InteractiveWidget />
+                        </div>
+                    </Show>
+                </div>
+                
+                <StaticContent />
+                <MetaDataComponent />
+            </div>
+        </div>
+    )
+}
+
+component HydratedComponent({ initialValue }) {
+    signal value = initialValue || "Default value"
+    signal interactions = 0
+    
+    const handleInteraction = () => {
+        interactions(prev => prev + 1)
+        value(`Interacted ${interactions()} times`)
+    }
+    
+    return (
+        <div class="hydrated-component">
+            <h3>Hydrated Interactive Component</h3>
+            <p>Current value: {value()}</p>
+            <p>Interactions: {interactions()}</p>
+            
+            <button onclick={handleInteraction}>
+                Interact with Component
+            </button>
+            
+            {/* This content should be present in SSR and become interactive after hydration */}
+            <div class="server-rendered-form">
+                <input 
+                    type="text" 
+                    value={value()} 
+                    oninput={(e) => value(e.target.value)}
+                    placeholder="Server-rendered input"
+                />
+            </div>
+        </div>
+    )
+}
+
+component InteractiveWidget() {
+    signal counter = 0
+    signal logs = []
+    
+    const addLog = (message) => {
+        logs(prev => [...prev, { 
+            id: Date.now(), 
+            message, 
+            timestamp: new Date().toLocaleTimeString() 
+        }])
+    }
+    
+    return (
+        <div class="interactive-widget">
+            <h4>Client-Only Interactive Widget</h4>
+            
+            <div class="widget-controls">
+                <button onclick={() => {
+                    counter(prev => prev + 1)
+                    addLog(`Counter incremented to ${counter() + 1}`)
+                }}>
+                    Increment ({counter()})
+                </button>
+                
+                <button onclick={() => {
+                    counter(0)
+                    addLog('Counter reset')
+                }}>
+                    Reset
+                </button>
+                
+                <button onclick={() => logs([])}>
+                    Clear Logs
+                </button>
+            </div>
+            
+            <div class="widget-logs">
+                <h5>Activity Log:</h5>
+                <div class="logs">
+                    <For each={logs()} 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>
+    )
+}
+
+component StaticContent() {
+    // This should be fully server-rendered and require no hydration
+    return (
+        <div class="static-content">
+            <h3>Static Content</h3>
+            <p>This content is fully static and doesn't require JavaScript.</p>
+            <div class="static-list">
+                <h4>Features:</h4>
+                <ul>
+                    <li>Server-side rendered</li>
+                    <li>SEO friendly</li>
+                    <li>Fast initial paint</li>
+                    <li>No JavaScript required</li>
+                </ul>
+            </div>
+        </div>
+    )
+}
+
+component MetaDataComponent() {
+    // Should inject meta tags during SSR
+    return (
+        <div class="metadata-component">
+            <Head>
+                <title>SSR Example - Visual Schema Builder</title>
+                <meta name="description" content="Server-side rendering demo with Pulsar" />
+                <meta property="og:title" content="SSR Demo" />
+                <meta property="og:description" content="Demonstrating SSR capabilities" />
+            </Head>
+            
+            <div class="seo-content">
+                <h3>SEO Optimized Content</h3>
+                <p>This component includes meta tags for SEO optimization.</p>
+                <p>The metadata is injected during server-side rendering.</p>
+            </div>
+        </div>
+    )
+}
+
+// Server-only component wrapper
+component ServerOnly({ children }) {
+    return (
+        <Show when={typeof window === 'undefined'}>
+            {children}
+        </Show>
+    )
+}
+
+// Client-only component wrapper  
+component ClientOnly({ children }) {
+    signal mounted = false
+    
+    onMount(() => {
+        mounted(true)
+    })
+    
+    return (
+        <Show when={mounted()}>
+            {children}
+        </Show>
+    )
+}

package/src/lab/transformer/show-components/2026-02-11-14-20-show-components.syn

@@ -0,0 +1,57 @@
+// Show Components Test PSR File
+// Tests <Show when={condition}> conditional rendering
+
+component ShowExample() {
+    signal isLoggedIn = false
+    signal hasPermissions = true
+    signal user = null
+    signal loading = false
+    
+    return (
+        <div>
+            <Show when={isLoggedIn}>
+                <div class="user-dashboard">
+                    Welcome to your dashboard!
+                </div>
+            </Show>
+            
+            <Show when={!isLoggedIn}>
+                <div class="login-prompt">
+                    Please log in to continue
+                </div>
+            </Show>
+            
+            {/* Show with fallback */}
+            <Show when={user} fallback={<div>No user data</div>}>
+                <div class="user-profile">
+                    <h2>{user.name}</h2>
+                    <p>{user.email}</p>
+                </div>
+            </Show>
+            
+            {/* Nested Show components */}
+            <Show when={isLoggedIn}>
+                <Show when={hasPermissions} fallback={<div>Access denied</div>}>
+                    <AdminPanel />
+                </Show>
+            </Show>
+            
+            {/* Show with complex conditions */}
+            <Show when={!loading && user && user.isActive}>
+                <div class="active-user">
+                    User is active and ready
+                </div>
+            </Show>
+        </div>
+    )
+}
+
+component AdminPanel() {
+    return (
+        <div class="admin-panel">
+            <h3>Admin Controls</h3>
+            <button>Manage Users</button>
+            <button>System Settings</button>
+        </div>
+    )
+}

package/src/lab/transformer/show-when-components/2026-02-11-15-03-show-when-components.syn

@@ -0,0 +1,202 @@
+/**
+ * Show When Components Test - PSR File
+ * 
+ * Tests Show component transformation with reactive when conditions
+ * This file should transform correctly if Show components are implemented
+ */
+
+import { createSignal, ShowRegistry as Show } from '@synetics/synetics.dev';
+
+export interface IShowTestProps {
+  initialVisible?: boolean;
+  initialUser?: { name: string; role: string } | null;
+}
+
+export component ShowTest({
+  initialVisible = true,
+  initialUser = null
+}: IShowTestProps) {
+  const [isVisible, setIsVisible] = createSignal<boolean>(initialVisible);
+  const [user, setUser] = createSignal<{ name: string; role: string } | null>(initialUser);
+  const [count, setCount] = createSignal<number>(0);
+  const [loading, setLoading] = createSignal<boolean>(false);
+
+  const toggleVisibility = () => setIsVisible(!isVisible());
+  const toggleUser = () => {
+    setUser(user() ? null : { name: 'Tadeo', role: 'admin' });
+  };
+  const increment = () => setCount(count() + 1);
+
+  return (
+    <div style="padding: 20px; font-family: sans-serif;">
+      
+      <h2>Show Component Tests</h2>
+      
+      {/* Test 1: Simple Show with reactive condition */}
+      <div style="margin-bottom: 20px;">
+        <button onClick={toggleVisibility}>
+          {isVisible() ? 'Hide' : 'Show'} Content
+        </button>
+        
+        <Show when={isVisible()}>
+          <div style="padding: 10px; background: #e7f3ff; margin-top: 10px; border-radius: 4px;">
+            This content is conditionally visible based on isVisible() signal.
+          </div>
+        </Show>
+      </div>
+      
+      {/* Test 2: Show with fallback content */}
+      <div style="margin-bottom: 20px;">
+        <button onClick={toggleUser}>
+          {user() ? 'Logout' : 'Login'} User
+        </button>
+        
+        <Show 
+          when={user() !== null} 
+          fallback={
+            <div style="padding: 10px; background: #fff3cd; margin-top: 10px; border-radius: 4px;">
+              Please log in to see user content
+            </div>
+          }
+        >
+          <div style="padding: 10px; background: #d4edda; margin-top: 10px; border-radius: 4px;">
+            Welcome, {user()?.name}! Your role is: {user()?.role}
+          </div>
+        </Show>
+      </div>
+      
+      {/* Test 3: Show with function-based when condition */}
+      <div style="margin-bottom: 20px;">
+        <button onClick={increment}>
+          Count: {count()}
+        </button>
+        
+        <Show when={() => count() > 0}>
+          <div style="padding: 10px; background: #d1ecf1; margin-top: 10px; border-radius: 4px;">
+            Count is greater than zero: {count()}
+          </div>
+        </Show>
+        
+        <Show when={() => count() >= 5}>
+          <div style="padding: 10px; background: #f8d7da; margin-top: 10px; border-radius: 4px;">
+            Count has reached 5 or more!
+          </div>
+        </Show>
+      </div>
+      
+      {/* Test 4: Complex conditional expressions */}
+      <Show when={() => isVisible() && user() !== null}>
+        <div style="padding: 10px; background: #e2e3e5; margin-bottom: 10px; border-radius: 4px;">
+          Both visible and user logged in: {user()?.name}
+        </div>
+      </Show>
+      
+      <Show when={() => count() % 2 === 0 && count() > 0}>
+        <div style="padding: 10px; background: #fff3cd; margin-bottom: 10px; border-radius: 4px;">
+          Count is even and greater than 0: {count()}
+        </div>
+      </Show>
+      
+      {/* Test 5: Nested Show components */}
+      <Show when={isVisible()}>
+        <div style="padding: 15px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; margin-bottom: 10px;">
+          <h3>Outer Show Content</h3>
+          
+          <Show 
+            when={user() !== null}
+            fallback={<p>No user in nested show</p>}
+          >
+            <div style="background: white; padding: 10px; border-radius: 2px;">
+              <h4>Inner Show Content</h4>
+              <p>User: {user()?.name} ({user()?.role})</p>
+              
+              <Show when={() => user()?.role === 'admin'}>
+                <div style="background: #d4edda; padding: 8px; border-radius: 2px; margin-top: 8px;">
+                  🔑 Admin privileges enabled
+                </div>
+              </Show>
+            </div>
+          </Show>
+        </div>
+      </Show>
+      
+      {/* Test 6: Show with function children */}
+      <Show when={() => count() > 3}>
+        {() => (
+          <div style="padding: 10px; background: #e7f3ff; border-radius: 4px; margin-bottom: 10px;">
+            Function-based children: Count is {count()}
+            <div style="font-size: 0.8em; color: #666; margin-top: 5px;">
+              This content is generated by a function
+            </div>
+          </div>
+        )}
+      </Show>
+      
+      {/* Test 7: Show with loading states */}
+      <div style="margin-bottom: 20px;">
+        <button onClick={() => setLoading(!loading())}>
+          {loading() ? 'Stop' : 'Start'} Loading
+        </button>
+        
+        <Show 
+          when={loading()} 
+          fallback={
+            <div style="padding: 10px; background: #d4edda; margin-top: 10px; border-radius: 4px;">
+              Content is ready
+            </div>
+          }
+        >
+          <div style="padding: 10px; background: #fff3cd; margin-top: 10px; border-radius: 4px;">
+            ⏳ Loading... Please wait
+          </div>
+        </Show>
+      </div>
+      
+      {/* Test 8: Show with complex nested expressions */}
+      <Show when={() => {
+        const hasUser = user() !== null;
+        const isHighCount = count() >= 5;
+        const isVisible = isVisible();
+        return hasUser && isHighCount && isVisible;
+      }}>
+        <div style="padding: 15px; background: linear-gradient(145deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px; margin-bottom: 10px;">
+          🎉 All conditions met!
+          <div style="margin-top: 10px; font-size: 0.9em; opacity: 0.9;">
+            ✓ User logged in: {user()?.name}<br/>
+            ✓ Count ≥ 5: {count()}<br/>
+            ✓ Content visible: {isVisible() ? 'Yes' : 'No'}
+          </div>
+        </div>
+      </Show>
+      
+      {/* Test 9: Show with ternary in when condition */}
+      <Show when={() => user() ? user()?.role === 'admin' : false}>
+        <div style="padding: 10px; background: #f8d7da; color: #721c24; border-radius: 4px; margin-bottom: 10px;">
+          👑 Admin-only content visible
+        </div>
+      </Show>
+      
+      {/* Test 10: Show with optional chaining */}
+      <Show when={() => user()?.name?.length > 0}>
+        <div style="padding: 10px; background: #d1ecf1; border-radius: 4px;">
+          User has a name: "{user()?.name}" (length: {user()?.name?.length})
+        </div>
+      </Show>
+      
+    </div>
+  );
+}
+
+/**
+ * Expected transformation should handle:
+ * 1. Simple Show components: <Show when={condition}>
+ * 2. Show with fallback: <Show when={condition} fallback={content}>
+ * 3. Function-based when conditions: when={() => expression}
+ * 4. Complex conditional expressions in when
+ * 5. Nested Show components
+ * 6. Function-based children: {() => content}
+ * 7. Reactive updates when conditions change
+ * 8. Proper cleanup and disposal
+ * 9. Static optimization where possible
+ * 10. Integration with Pulsar registry system
+ */

package/src/lab/transformer/template-literals/2026-02-11-14-20-template-literals.syn

@@ -0,0 +1,34 @@
+// Template Literals Test PSR File
+// Tests template literal transformations with ${} expressions
+
+component TemplateExample() {
+    signal name = "World"
+    signal count = 42
+    signal isVisible = true
+    
+    // Basic template literal
+    computed greeting = `Hello, ${name}!`
+    
+    // Complex nested expressions
+    computed message = `User ${name} has ${count} items ${isVisible ? 'visible' : 'hidden'}`
+    
+    // Template with function calls
+    computed dynamicText = `Current time: ${new Date().toISOString()}`
+    
+    // Multi-line template
+    computed htmlTemplate = `
+        <div class="user-card">
+            <h2>${name}</h2>
+            <p>Count: ${count}</p>
+            <status>${isVisible ? 'Active' : 'Inactive'}</status>
+        </div>
+    `
+    
+    return (
+        <div>
+            <h1>{greeting}</h1>
+            <p>{message}</p>
+            <pre>{htmlTemplate}</pre>
+        </div>
+    )
+}

package/src/lab/transformer/template-literals/2026-02-11-15-00-template-literals.syn

@@ -0,0 +1,146 @@
+/**
+ * Template Literals Test - PSR File
+ * 
+ * Tests comprehensive template literal functionality with ${} interpolation
+ * This file should transform correctly if template literals are implemented
+ */
+
+import { createSignal } from '@synetics/synetics.dev';
+
+export interface ITemplateLiteralTestProps {
+  initialTheme?: 'light' | 'dark';
+  initialSize?: number;
+}
+
+export component TemplateLiteralTest({
+  initialTheme = 'light',
+  initialSize = 16
+}: ITemplateLiteralTestProps) {
+  const [theme, setTheme] = createSignal<'light' | 'dark'>(initialTheme);
+  const [size, setSize] = createSignal<number>(initialSize);
+  const [isActive, setIsActive] = createSignal<boolean>(true);
+  const [count, setCount] = createSignal<number>(0);
+  const [userName, setUserName] = createSignal<string>('Tadeo');
+
+  const toggleTheme = () => {
+    setTheme(theme() === 'light' ? 'dark' : 'light');
+  };
+
+  const increaseSize = () => {
+    setSize(size() + 2);
+  };
+
+  const toggleActive = () => {
+    setIsActive(!isActive());
+  };
+
+  const increment = () => {
+    setCount(count() + 1);
+  };
+
+  // Test 1: Simple template literal in style attribute
+  return (
+    <div style={`background: ${theme() === 'light' ? '#ffffff' : '#000000'}; padding: 20px;`}>
+      
+      {/* Test 2: Complex template literal with multiple expressions */}
+      <h1 
+        className={`title size-${size()} theme-${theme()} ${isActive() ? 'active' : 'inactive'}`}
+        style={`
+          font-size: ${size()}px; 
+          color: ${theme() === 'light' ? '#333' : '#fff'};
+          margin-bottom: ${size() / 2}px;
+          font-weight: ${isActive() ? 'bold' : 'normal'};
+        `}
+      >
+        {/* Test 3: Template literal in text content */}
+        {`Welcome ${userName()}! You have ${count()} notifications.`}
+      </h1>
+
+      {/* Test 4: Template literal with ternary and function calls */}
+      <button
+        onClick={toggleTheme}
+        className={`btn btn-${theme()} ${isActive() ? 'btn-active' : 'btn-inactive'}`}
+        style={`
+          padding: ${size() - 8}px ${size()}px;
+          background: ${theme() === 'light' ? '#007bff' : '#0056b3'};
+          border: 2px solid ${isActive() ? '#0056b3' : '#6c757d'};
+          border-radius: ${Math.max(4, size() / 4)}px;
+          font-size: ${Math.min(size(), 24)}px;
+        `}
+      >
+        {`Switch to ${theme() === 'light' ? 'Dark' : 'Light'} Theme`}
+      </button>
+
+      {/* Test 5: Nested template literals and complex expressions */}
+      <div 
+        className={`stats-panel ${theme()}-theme`}
+        style={`
+          margin-top: ${size()}px;
+          padding: ${size() / 2}px;
+          background: ${theme() === 'light' ? '#f8f9fa' : '#343a40'};
+          border-left: 4px solid ${isActive() ? '#28a745' : '#dc3545'};
+        `}
+      >
+        {/* Test 6: Template literal with object property access */}
+        <p style={`color: ${theme() === 'light' ? '#212529' : '#f8f9fa'}; margin: 0;`}>
+          {`Status: ${isActive() ? 'Online' : 'Offline'} | Size: ${size()}px | Count: ${count()}`}
+        </p>
+        
+        {/* Test 7: Template literal with method chaining */}
+        <p style={`font-size: ${size() * 0.875}px; color: ${theme() === 'light' ? '#6c757d' : '#adb5bd'};`}>
+          {`Theme: ${theme().toUpperCase()} | User: ${userName().toLowerCase()}`}
+        </p>
+      </div>
+
+      {/* Test 8: Template literals in event handlers */}
+      <div style={`margin-top: ${size()}px; display: flex; gap: ${size() / 2}px;`}>
+        <button 
+          onClick={increaseSize}
+          style={`padding: ${size() / 2}px; font-size: ${size() * 0.75}px;`}
+        >
+          {`Increase Size (${size()}px)`}
+        </button>
+        
+        <button 
+          onClick={toggleActive}
+          style={`padding: ${size() / 2}px; font-size: ${size() * 0.75}px;`}
+        >
+          {`Toggle ${isActive() ? 'Off' : 'On'}`}
+        </button>
+        
+        <button 
+          onClick={increment}
+          style={`padding: ${size() / 2}px; font-size: ${size() * 0.75}px;`}
+        >
+          {`Count: ${count()}`}
+        </button>
+      </div>
+
+      {/* Test 9: Escaped characters in template literals */}
+      <div style={`margin-top: ${size()}px; font-family: monospace;`}>
+        <code style={`background: ${theme() === 'light' ? '#f1f3f4' : '#2d3748'}; padding: 4px;`}>
+          {`Template literal: \`Hello \${world}\` - Size: ${size()}px`}
+        </code>
+      </div>
+
+    </div>
+  );
+}
+
+/**
+ * Expected transformation should generate:
+ * - t_element calls with reactive template literal attributes
+ * - Proper ${} expression wiring for reactivity  
+ * - Clean string concatenation for static parts
+ * - Reactive updates when signals change
+ * 
+ * This tests covers all major template literal scenarios:
+ * 1. Simple expressions: ${signal()}
+ * 2. Complex expressions: ${condition ? 'a' : 'b'}  
+ * 3. Method calls: ${signal().method()}
+ * 4. Nested expressions: ${Math.max(a, b)}
+ * 5. Multiple expressions per template
+ * 6. Template literals in different JSX contexts
+ * 7. Escaped characters
+ * 8. Mixed quotes and expressions
+ */