@daz4126/helium 0.30.0 → 0.31.0

package/helium.test.js

@@ -11,287 +11,308 @@ describe('Helium Reactive Library', () => {
   });
 
   afterEach(() => {
+    window.heliumTeardown?.();
     document.body.innerHTML = '';
   });
 
   describe('State Reactivity', () => {
-    it('should initialize with default data', () => {
+    it('should initialize with default data', async () => {
       container.innerHTML = '<div @text="count"></div>';
-      helium({ count: 5 });
+      await helium({ count: 5 });
       expect(container.querySelector('div').textContent).toBe('5');
     });
 
-    it('should react to direct property assignment', (done) => {
+    it('should react to direct property assignment', async () => {
       container.innerHTML = '<div @text="count"></div>';
-      const state = helium({ count: 0 });
-      
-      setTimeout(() => {
-        state.count = 10;
-        setTimeout(() => {
-          expect(container.querySelector('div').textContent).toBe('10');
-          done();
-        }, 0);
-      }, 0);
-    });
-
-    it('should react to nested object mutations', (done) => {
+      const state = await helium({ count: 0 });
+
+      state.count = 10;
+      await new Promise(r => setTimeout(r, 0));
+      expect(container.querySelector('div').textContent).toBe('10');
+    });
+
+    it('should react to nested object mutations', async () => {
       container.innerHTML = '<div @text="user.name"></div>';
-      const state = helium({ user: { name: 'Alice' } });
-      
-      setTimeout(() => {
-        state.user.name = 'Bob';
-        setTimeout(() => {
-          expect(container.querySelector('div').textContent).toBe('Bob');
-          done();
-        }, 0);
-      }, 0);
-    });
-
-    it('should react to array push', (done) => {
+      const state = await helium({ user: { name: 'Alice' } });
+
+      state.user.name = 'Bob';
+      await new Promise(r => setTimeout(r, 0));
+      expect(container.querySelector('div').textContent).toBe('Bob');
+    });
+
+    it('should react to array push', async () => {
       container.innerHTML = '<div @text="items.length"></div>';
-      const state = helium({ items: [1, 2, 3] });
-      
-      setTimeout(() => {
-        state.items.push(4);
-        setTimeout(() => {
-          expect(container.querySelector('div').textContent).toBe('4');
-          done();
-        }, 0);
-      }, 0);
-    });
-
-    it('should react to array index assignment', (done) => {
+      const state = await helium({ items: [1, 2, 3] });
+
+      state.items.push(4);
+      await new Promise(r => setTimeout(r, 0));
+      expect(container.querySelector('div').textContent).toBe('4');
+    });
+
+    it('should react to array index assignment', async () => {
       container.innerHTML = '<div @text="items[0]"></div>';
-      const state = helium({ items: ['a', 'b', 'c'] });
-      
-      setTimeout(() => {
-        state.items[0] = 'z';
-        setTimeout(() => {
-          expect(container.querySelector('div').textContent).toBe('z');
-          done();
-        }, 0);
-      }, 0);
-    });
-
-    it('should react to complete array replacement', (done) => {
+      const state = await helium({ items: ['a', 'b', 'c'] });
+
+      state.items[0] = 'z';
+      await new Promise(r => setTimeout(r, 0));
+      expect(container.querySelector('div').textContent).toBe('z');
+    });
+
+    it('should react to complete array replacement', async () => {
       container.innerHTML = '<div @text="items.length"></div>';
-      const state = helium({ items: [1, 2, 3] });
-      
-      setTimeout(() => {
-        state.items = [...state.items, 4, 5];
-        setTimeout(() => {
-          expect(container.querySelector('div').textContent).toBe('5');
-          done();
-        }, 0);
-      }, 0);
+      const state = await helium({ items: [1, 2, 3] });
+
+      state.items = [...state.items, 4, 5];
+      await new Promise(r => setTimeout(r, 0));
+      expect(container.querySelector('div').textContent).toBe('5');
     });
   });
 
   describe('Directives - @text and @html', () => {
-    it('should bind text content with @text', () => {
+    it('should bind text content with @text', async () => {
       container.innerHTML = '<div @text="message"></div>';
-      helium({ message: 'Hello World' });
+      await helium({ message: 'Hello World' });
       expect(container.querySelector('div').textContent).toBe('Hello World');
     });
 
-    it('should bind HTML content with @html', () => {
+    it('should bind HTML content with @html', async () => {
       container.innerHTML = '<div @html="content"></div>';
-      helium({ content: '<strong>Bold</strong>' });
+      await helium({ content: '<strong>Bold</strong>' });
       expect(container.querySelector('div').innerHTML).toBe('<strong>Bold</strong>');
     });
 
-    it('should work with data-he-text prefix', () => {
+    it('should work with data-he-text prefix', async () => {
       container.innerHTML = '<div data-he-text="message"></div>';
-      helium({ message: 'Test' });
+      await helium({ message: 'Test' });
       expect(container.querySelector('div').textContent).toBe('Test');
     });
 
-    it('should evaluate expressions in @text', () => {
+    it('should evaluate expressions in @text', async () => {
       container.innerHTML = '<div @text="count * 2"></div>';
-      helium({ count: 5 });
+      await helium({ count: 5 });
       expect(container.querySelector('div').textContent).toBe('10');
     });
   });
 
   describe('Directives - @bind', () => {
-    it('should create two-way binding with input', () => {
+    it('should create two-way binding with input', async () => {
       container.innerHTML = '<input @bind="name" />';
-      const state = helium({ name: 'John' });
+      await helium({ name: 'John' });
       const input = container.querySelector('input');
-      
+
       expect(input.value).toBe('John');
     });
 
-    it('should update state when input changes', (done) => {
+    it('should update state when input changes', async () => {
       container.innerHTML = '<input @bind="name" /><span @text="name"></span>';
-      const state = helium({ name: 'John' });
+      await helium({ name: 'John' });
       const input = container.querySelector('input');
-      
+
       input.value = 'Jane';
       input.dispatchEvent(new Event('input'));
-      
-      setTimeout(() => {
-        expect(container.querySelector('span').textContent).toBe('Jane');
-        done();
-      }, 0);
+
+      await new Promise(r => setTimeout(r, 0));
+      expect(container.querySelector('span').textContent).toBe('Jane');
     });
   });
 
   describe('Directives - @hidden and @visible', () => {
-    it('should hide element with @hidden when true', () => {
+    it('should hide element with @hidden when true', async () => {
       container.innerHTML = '<div @hidden="isHidden"></div>';
-      helium({ isHidden: true });
+      await helium({ isHidden: true });
       expect(container.querySelector('div').hidden).toBe(true);
     });
 
-    it('should show element with @hidden when false', () => {
+    it('should show element with @hidden when false', async () => {
       container.innerHTML = '<div @hidden="isHidden"></div>';
-      helium({ isHidden: false });
+      await helium({ isHidden: false });
       expect(container.querySelector('div').hidden).toBe(false);
     });
 
-    it('should show element with @visible when true', () => {
+    it('should show element with @visible when true', async () => {
       container.innerHTML = '<div @visible="isVisible"></div>';
-      helium({ isVisible: true });
+      await helium({ isVisible: true });
       expect(container.querySelector('div').hidden).toBe(false);
     });
 
-    it('should hide element with @visible when false', () => {
+    it('should hide element with @visible when false', async () => {
       container.innerHTML = '<div @visible="isVisible"></div>';
-      helium({ isVisible: false });
+      await helium({ isVisible: false });
       expect(container.querySelector('div').hidden).toBe(true);
     });
   });
 
   describe('Directives - Dynamic Attributes (:attr)', () => {
-    it('should bind attribute dynamically', () => {
+    it('should bind attribute dynamically', async () => {
       container.innerHTML = '<div :class="className"></div>';
-      helium({ className: 'active' });
+      await helium({ className: 'active' });
       expect(container.querySelector('div').getAttribute('class')).toBe('active');
     });
 
-    it('should update attribute on state change', (done) => {
+    it('should update attribute on state change', async () => {
       container.innerHTML = '<div :title="tooltip"></div>';
-      const state = helium({ tooltip: 'Initial' });
-      
-      setTimeout(() => {
-        state.tooltip = 'Updated';
-        setTimeout(() => {
-          expect(container.querySelector('div').getAttribute('title')).toBe('Updated');
-          done();
-        }, 0);
-      }, 0);
+      const state = await helium({ tooltip: 'Initial' });
+
+      state.tooltip = 'Updated';
+      await new Promise(r => setTimeout(r, 0));
+      expect(container.querySelector('div').getAttribute('title')).toBe('Updated');
     });
   });
 
   describe('Event Handlers', () => {
-    it('should handle click events', () => {
+    it('should handle click events', async () => {
       container.innerHTML = '<button @click="count++">Click</button><span @text="count"></span>';
-      helium({ count: 0 });
-      
+      await helium({ count: 0 });
+
       container.querySelector('button').click();
-      setTimeout(() => {
-        expect(container.querySelector('span').textContent).toBe('1');
-      }, 0);
+      await new Promise(r => setTimeout(r, 0));
+      expect(container.querySelector('span').textContent).toBe('1');
     });
 
-    it('should handle event with prevent modifier', () => {
+    it('should handle event with prevent modifier', async () => {
       container.innerHTML = '<form @submit.prevent="submitted = true"></form>';
-      const state = helium({ submitted: false });
+      await helium({ submitted: false });
       const form = container.querySelector('form');
       const event = new Event('submit', { cancelable: true });
-      
+
       form.dispatchEvent(event);
       expect(event.defaultPrevented).toBe(true);
     });
 
-    it('should handle keyboard events with key modifiers', () => {
+    it('should handle keyboard events with key modifiers', async () => {
       container.innerHTML = '<input @keydown.enter="pressed = true" />';
-      const state = helium({ pressed: false });
+      const state = await helium({ pressed: false });
       const input = container.querySelector('input');
-      
+
       const event = new KeyboardEvent('keydown', { key: 'Enter' });
       input.dispatchEvent(event);
-      
-      setTimeout(() => {
-        expect(state.pressed).toBe(true);
-      }, 0);
+
+      await new Promise(r => setTimeout(r, 0));
+      expect(state.pressed).toBe(true);
     });
 
-    it('should handle debounced events', (done) => {
+    it('should handle debounced events', async () => {
       container.innerHTML = '<input @input.debounce:100="value = $event.target.value" />';
-      const state = helium({ value: '' });
+      const state = await helium({ value: '' });
       const input = container.querySelector('input');
-      
+
       input.value = 'test';
       input.dispatchEvent(new Event('input'));
-      
+
       // Should not update immediately
       expect(state.value).toBe('');
-      
-      setTimeout(() => {
-        expect(state.value).toBe('test');
-        done();
-      }, 150);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+      expect(state.value).toBe('test');
     });
 
-    it('should handle once modifier', () => {
+    it('should handle once modifier', async () => {
       container.innerHTML = '<button @click.once="count++">Click</button>';
-      const state = helium({ count: 0 });
+      const state = await helium({ count: 0 });
       const button = container.querySelector('button');
-      
+
       button.click();
       button.click();
       button.click();
-      
-      setTimeout(() => {
-        expect(state.count).toBe(1);
-      }, 0);
+
+      await new Promise(r => setTimeout(r, 0));
+      expect(state.count).toBe(1);
     });
   });
 
   describe('@ref Directive', () => {
-    it('should create reference to element', () => {
+    it('should create reference to element', async () => {
       container.innerHTML = '<div @ref="myDiv"></div><button @click="$myDiv.textContent = \'Changed\'">Change</button>';
-      helium({});
-      
+      await helium({});
+
+      container.querySelector('button').click();
+      await new Promise(r => setTimeout(r, 0));
+      expect(container.querySelector('div').textContent).toBe('Changed');
+    });
+
+    it('should make refs available in @params for AJAX requests', async () => {
+      global.fetch = vi.fn().mockResolvedValueOnce({
+        headers: { get: () => 'application/json' },
+        json: async () => ({ success: true })
+      });
+
+      container.innerHTML = `
+        <form @ref="myForm">
+          <input name="title" value="Test Title">
+          <button @post="/api/test" @params="new FormData($myForm)">Submit</button>
+        </form>
+      `;
+      await helium({});
+
+      container.querySelector('button').click();
+      await new Promise(r => setTimeout(r, 100));
+
+      expect(global.fetch).toHaveBeenCalled();
+      const [url, options] = global.fetch.mock.calls[0];
+      expect(url).toBe('/api/test');
+      expect(options.body).toBeInstanceOf(FormData);
+    });
+
+    it('should make refs available with nested @data sections', async () => {
+      global.fetch = vi.fn().mockResolvedValueOnce({
+        headers: { get: () => 'application/json' },
+        json: async () => ({ success: true })
+      });
+
+      // Mimic the examples page structure with nested @data
+      container.innerHTML = `
+        <div @data="{ count: 0 }">
+          <div @data="{ templates: { post: data => data.title } }">
+            <section @ref="posts">
+              <form @ref="form">
+                <input name="title" value="Test">
+                <button @post.prevent="/api/posts" @params="new FormData($form)" @target="$posts:append" @template="templates.post">Submit</button>
+              </form>
+            </section>
+          </div>
+        </div>
+      `;
+      await helium({});
+
       container.querySelector('button').click();
-      setTimeout(() => {
-        expect(container.querySelector('div').textContent).toBe('Changed');
-      }, 0);
+      await new Promise(r => setTimeout(r, 100));
+
+      expect(global.fetch).toHaveBeenCalled();
+      const [url, options] = global.fetch.mock.calls[0];
+      expect(url).toBe('/api/posts');
+      expect(options.body).toBeInstanceOf(FormData);
     });
   });
 
   describe('@init Directive', () => {
-    it('should execute code on initialization', () => {
+    it('should execute code on initialization', async () => {
       container.innerHTML = '<div @init="initialized = true"></div>';
-      const state = helium({ initialized: false });
+      const state = await helium({ initialized: false });
       expect(state.initialized).toBe(true);
     });
   });
 
   describe('@data Directive', () => {
-    it('should merge data into state', () => {
+    it('should merge data into state', async () => {
       container.innerHTML = '<div @data="{ user: \'Alice\', age: 30 }"></div><span @text="user"></span>';
-      helium({});
+      await helium({});
       expect(container.querySelector('span').textContent).toBe('Alice');
     });
   });
 
   describe('Helper Functions', () => {
-    it('should provide $ selector helper', () => {
+    it('should provide $ selector helper', async () => {
       container.innerHTML = '<div id="target"></div><button @click="$(\'#target\').textContent = \'Found\'">Click</button>';
-      helium({});
-      
+      await helium({});
+
       container.querySelector('button').click();
-      setTimeout(() => {
-        expect(container.querySelector('#target').textContent).toBe('Found');
-      }, 0);
+      await new Promise(r => setTimeout(r, 0));
+      expect(container.querySelector('#target').textContent).toBe('Found');
     });
 
-    it('should provide $html helper to create elements', () => {
+    it('should provide $html helper to create elements', async () => {
       container.innerHTML = '<div @init="$el.appendChild($html(\'<span>Test</span>\'))"></div>';
-      helium({});
+      await helium({});
       expect(container.querySelector('span').textContent).toBe('Test');
     });
   });
@@ -308,10 +329,10 @@ describe('Helium Reactive Library', () => {
       });
 
       container.innerHTML = '<button @click="$get(\'/api/data\', \'result\')">Load</button><div @text="result?.data"></div>';
-      helium({ result: null });
-      
+      await helium({ result: null });
+
       container.querySelector('button').click();
-      
+
       await new Promise(resolve => setTimeout(resolve, 100));
       expect(global.fetch).toHaveBeenCalledWith('/api/data', expect.any(Object));
     });
@@ -323,10 +344,10 @@ describe('Helium Reactive Library', () => {
       });
 
       container.innerHTML = '<button @click="$post(\'/api/save\', { name: \'test\' }, \'response\')">Save</button>';
-      helium({ response: null });
-      
+      await helium({ response: null });
+
       container.querySelector('button').click();
-      
+
       await new Promise(resolve => setTimeout(resolve, 100));
       expect(global.fetch).toHaveBeenCalledWith('/api/save', expect.objectContaining({
         method: 'POST',
@@ -335,107 +356,436 @@ describe('Helium Reactive Library', () => {
     });
   });
 
+  describe('Server-Sent Events (SSE)', () => {
+    // Helper to create a mock SSE ReadableStream
+    const createSSEStream = (events) => {
+      const encoder = new TextEncoder();
+      let index = 0;
+      return new ReadableStream({
+        pull(controller) {
+          if (index < events.length) {
+            controller.enqueue(encoder.encode(events[index]));
+            index++;
+          } else {
+            controller.close();
+          }
+        }
+      });
+    };
+
+    beforeEach(() => {
+      global.fetch = vi.fn();
+    });
+
+    it('should handle basic SSE stream updating DOM target', async () => {
+      // Simulate SSE response like Datastar hello-world example
+      const sseData = 'event: #message\ndata: <div>Hello from SSE!</div>\n\n';
+
+      global.fetch.mockResolvedValueOnce({
+        headers: { get: () => 'text/event-stream' },
+        body: createSSEStream([sseData])
+      });
+
+      container.innerHTML = `
+        <button @get="/api/hello-world" @target="#message">Start</button>
+        <div id="message"></div>
+      `;
+      await helium({});
+
+      container.querySelector('button').click();
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      expect(container.querySelector('#message').innerHTML).toBe('<div>Hello from SSE!</div>');
+    });
+
+    it('should handle multiple SSE events in sequence', async () => {
+      const sseData = [
+        'event: #counter\ndata: <span>1</span>\n\n',
+        'event: #counter\ndata: <span>2</span>\n\n',
+        'event: #counter\ndata: <span>3</span>\n\n'
+      ];
+
+      global.fetch.mockResolvedValueOnce({
+        headers: { get: () => 'text/event-stream' },
+        body: createSSEStream(sseData)
+      });
+
+      container.innerHTML = `
+        <button @get="/api/count" @target="#counter">Count</button>
+        <div id="counter"></div>
+      `;
+      await helium({});
+
+      container.querySelector('button').click();
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      // Should have the last value after all events processed
+      expect(container.querySelector('#counter').innerHTML).toBe('<span>3</span>');
+    });
+
+    it('should update state when event targets a state property', async () => {
+      const sseData = 'event: message\ndata: Hello World\n\n';
+
+      global.fetch.mockResolvedValueOnce({
+        headers: { get: () => 'text/event-stream' },
+        body: createSSEStream([sseData])
+      });
+
+      container.innerHTML = `
+        <button @get="/api/message" @target="message">Load</button>
+        <span @text="message"></span>
+      `;
+      const state = await helium({ message: '' });
+
+      container.querySelector('button').click();
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      expect(state.message).toBe('Hello World');
+      expect(container.querySelector('span').textContent).toBe('Hello World');
+    });
+
+    it('should handle multiline data in SSE events', async () => {
+      const sseData = 'data: line 1\ndata: line 2\ndata: line 3\n\n';
+
+      global.fetch.mockResolvedValueOnce({
+        headers: { get: () => 'text/event-stream' },
+        body: createSSEStream([sseData])
+      });
+
+      container.innerHTML = `
+        <button @get="/api/multiline" @target="#output">Load</button>
+        <pre id="output"></pre>
+      `;
+      await helium({});
+
+      container.querySelector('button').click();
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      expect(container.querySelector('#output').innerHTML).toBe('line 1\nline 2\nline 3');
+    });
+
+    it('should use @target for SSE updates', async () => {
+      const sseData = 'data: <div>SSE content</div>\n\n';
+
+      global.fetch.mockResolvedValueOnce({
+        headers: { get: () => 'text/event-stream' },
+        body: createSSEStream([sseData])
+      });
+
+      container.innerHTML = `
+        <button @get="/api/simple" @target="#result">Load</button>
+        <div id="result"></div>
+      `;
+      await helium({});
+
+      container.querySelector('button').click();
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      expect(container.querySelector('#result').innerHTML).toBe('<div>SSE content</div>');
+    });
+
+    it('should track event id for potential reconnection', async () => {
+      const sseData = 'id: 42\ndata: <span>Connected</span>\n\n';
+
+      global.fetch.mockResolvedValueOnce({
+        headers: { get: () => 'text/event-stream' },
+        body: createSSEStream([sseData])
+      });
+
+      container.innerHTML = `
+        <button @get="/api/status" @target="#status">Connect</button>
+        <div id="status"></div>
+      `;
+      await helium({});
+
+      container.querySelector('button').click();
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      expect(container.querySelector('#status').innerHTML).toBe('<span>Connected</span>');
+    });
+
+    it('should handle chunked SSE data', async () => {
+      // Simulate data arriving in chunks (like real network)
+      const chunk1 = 'event: #result\nda';
+      const chunk2 = 'ta: <div>Chunked!</div>\n\n';
+
+      global.fetch.mockResolvedValueOnce({
+        headers: { get: () => 'text/event-stream' },
+        body: createSSEStream([chunk1, chunk2])
+      });
+
+      container.innerHTML = `
+        <button @get="/api/chunked" @target="#result">Load</button>
+        <div id="result"></div>
+      `;
+      await helium({});
+
+      container.querySelector('button').click();
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      expect(container.querySelector('#result').innerHTML).toBe('<div>Chunked!</div>');
+    });
+  });
+
   describe('Dynamic DOM Updates', () => {
-    it('should process dynamically added elements', (done) => {
+    it('should process dynamically added elements', async () => {
       container.innerHTML = '<div id="container"></div>';
-      const state = helium({ message: 'Dynamic' });
-      
-      setTimeout(() => {
-        const newEl = document.createElement('span');
-        newEl.setAttribute('@text', 'message');
-        container.querySelector('#container').appendChild(newEl);
-        
-        setTimeout(() => {
-          expect(newEl.textContent).toBe('Dynamic');
-          done();
-        }, 100);
-      }, 0);
-    });
-
-    it('should handle innerHTML updates with new bindings', (done) => {
+      await helium({ message: 'Dynamic' });
+
+      const newEl = document.createElement('span');
+      newEl.setAttribute('data-he-text', 'message');
+      container.querySelector('#container').appendChild(newEl);
+
+      await new Promise(r => setTimeout(r, 100));
+      expect(newEl.textContent).toBe('Dynamic');
+    });
+
+    it('should handle innerHTML updates with new bindings', async () => {
       container.innerHTML = '<div @html="content"></div>';
-      const state = helium({ content: '', name: 'Test' });
-      
-      setTimeout(() => {
-        state.content = '<span @text="name"></span>';
-        setTimeout(() => {
-          expect(container.querySelector('span').textContent).toBe('Test');
-          done();
-        }, 100);
-      }, 0);
+      const state = await helium({ content: '', name: 'Test' });
+
+      state.content = '<span data-he-text="name"></span>';
+      await new Promise(r => setTimeout(r, 100));
+      expect(container.querySelector('span').textContent).toBe('Test');
     });
   });
 
   describe('Edge Cases', () => {
-    it('should handle undefined state values', () => {
+    it('should handle undefined state values', async () => {
       container.innerHTML = '<div @text="undefined"></div>';
-      helium({});
-      expect(container.querySelector('div').textContent).toBe('undefined');
+      await helium({});
+      expect(container.querySelector('div').textContent).toBe('');
     });
 
-    it('should handle null state values', () => {
+    it('should handle null state values', async () => {
       container.innerHTML = '<div @text="value"></div>';
-      helium({ value: null });
-      expect(container.querySelector('div').textContent).toBe('null');
+      await helium({ value: null });
+      expect(container.querySelector('div').textContent).toBe('');
     });
 
     it('should handle circular references in state', () => {
       const obj = { name: 'test' };
       obj.self = obj;
-      
+
       container.innerHTML = '<div @text="obj.name"></div>';
       expect(() => helium({ obj })).not.toThrow();
     });
 
-    it('should not process already processed elements', () => {
+    it('should not process already processed elements', async () => {
       container.innerHTML = '<div @text="count"></div>';
-      const state = helium({ count: 0 });
-      
+      const state = await helium({ count: 0 });
+
       // Manually mark as processed
       container.querySelector('div').setAttribute('data-helium-processed', '');
-      
+
       state.count = 5;
       // Should still work because binding was already created
-      setTimeout(() => {
-        expect(container.querySelector('div').textContent).toBe('5');
-      }, 0);
+      await new Promise(r => setTimeout(r, 0));
+      expect(container.querySelector('div').textContent).toBe('5');
     });
   });
 
   describe('Performance', () => {
-    it('should handle many bindings efficiently', () => {
-      const html = Array.from({ length: 100 }, (_, i) => 
+    it('should handle many bindings efficiently', async () => {
+      const html = Array.from({ length: 100 }, (_, i) =>
         `<div @text="items[${i}]"></div>`
       ).join('');
-      
+
       container.innerHTML = html;
       const items = Array.from({ length: 100 }, (_, i) => i);
-      
+
       const start = performance.now();
-      helium({ items });
+      await helium({ items });
       const end = performance.now();
-      
+
       expect(end - start).toBeLessThan(100); // Should initialize in < 100ms
     });
 
-    it('should not cause infinite loops with DOM mutations', (done) => {
+    it('should not cause infinite loops with DOM mutations', async () => {
       container.innerHTML = '<div @html="content"></div>';
-      const state = helium({ content: '<span>Test</span>', updateCount: 0 });
-      
+      const state = await helium({ content: '<span>Test</span>', updateCount: 0 });
+
       let mutationCount = 0;
       const observer = new MutationObserver(() => {
         mutationCount++;
       });
       observer.observe(container, { childList: true, subtree: true });
-      
-      setTimeout(() => {
-        state.content = '<span>Updated</span>';
-        setTimeout(() => {
-          expect(mutationCount).toBeLessThan(10); // Should not cause excessive mutations
-          observer.disconnect();
-          done();
-        }, 100);
-      }, 0);
+
+      state.content = '<span>Updated</span>';
+      await new Promise(r => setTimeout(r, 100));
+      expect(mutationCount).toBeLessThan(10); // Should not cause excessive mutations
+      observer.disconnect();
     });
   });
 });
+
+describe(':style Directive', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    container.setAttribute('data-helium', '');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    window.heliumTeardown?.();
+    document.body.innerHTML = '';
+  });
+
+  it('should apply style object with camelCase properties', async () => {
+    container.innerHTML = '<div :style="{ backgroundColor: color }"></div>';
+    await helium({ color: 'blue' });
+    const div = container.querySelector('div');
+    expect(div.style.backgroundColor).toBe('blue');
+  });
+
+  it('should apply style object with kebab-case properties', async () => {
+    container.innerHTML = '<div :style="{ \'background-color\': color }"></div>';
+    await helium({ color: 'red' });
+    const div = container.querySelector('div');
+    expect(div.style.backgroundColor).toBe('red');
+  });
+
+  it('should apply multiple style properties', async () => {
+    container.innerHTML = '<div :style="{ backgroundColor: bg, fontSize: size }"></div>';
+    await helium({ bg: 'green', size: '20px' });
+    const div = container.querySelector('div');
+    expect(div.style.backgroundColor).toBe('green');
+    expect(div.style.fontSize).toBe('20px');
+  });
+
+  it('should update style when state changes', async () => {
+    container.innerHTML = '<div :style="{ backgroundColor: color }"></div>';
+    const state = await helium({ color: 'blue' });
+    const div = container.querySelector('div');
+    expect(div.style.backgroundColor).toBe('blue');
+
+    state.color = 'red';
+    await new Promise(r => setTimeout(r, 0));
+    expect(div.style.backgroundColor).toBe('red');
+  });
+
+  it('should filter out null and false values', async () => {
+    container.innerHTML = '<div :style="{ backgroundColor: bg, color: textColor }"></div>';
+    await helium({ bg: 'blue', textColor: null });
+    const div = container.querySelector('div');
+    expect(div.style.backgroundColor).toBe('blue');
+    expect(div.style.color).toBe('');
+  });
+
+  it('should handle width with percentage', async () => {
+    container.innerHTML = '<div :style="{ width: width + \'%\' }"></div>';
+    await helium({ width: 50 });
+    const div = container.querySelector('div');
+    expect(div.style.width).toBe('50%');
+  });
+});
+
+describe('@calculate', () => {
+  let container;
+
+  beforeEach(() => {
+    container = document.createElement('div');
+    container.setAttribute('data-helium', '');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    heliumTeardown();
+    document.body.innerHTML = '';
+  });
+
+  it('should compute derived values from state', async () => {
+    container.innerHTML = `
+      <div @data="{ firstname: 'John', lastname: 'Doe' }">
+        <span @calculate:fullname="firstname + ' ' + lastname"></span>
+        <span id="result" @text="fullname"></span>
+      </div>
+    `;
+    await helium();
+    expect(container.querySelector('#result').textContent).toBe('John Doe');
+  });
+
+  it('should update when dependencies change', async () => {
+    container.innerHTML = `
+      <div @data="{ x: 5, y: 3 }">
+        <span @calculate:sum="x + y"></span>
+        <span id="result" @text="sum"></span>
+        <button @click="x = 10">Update</button>
+      </div>
+    `;
+    const state = await helium();
+    expect(container.querySelector('#result').textContent).toBe('8');
+    
+    container.querySelector('button').click();
+    await new Promise(r => setTimeout(r, 10));
+    expect(container.querySelector('#result').textContent).toBe('13');
+  });
+
+  it('should update @text with fallback expression when @calculate value changes', async () => {
+    container.innerHTML = `
+      <div @data="{ firstname: '', lastname: '' }">
+        <input id="first" @bind="firstname">
+        <input id="last" @bind="lastname">
+        <span @calculate:fullname="firstname && lastname ? firstname + ' ' + lastname : firstname || lastname || ''"></span>
+        <span id="result" @text="fullname || 'stranger'"></span>
+      </div>
+    `;
+    const state = await helium();
+
+    // Initially should show 'stranger' since fullname is ''
+    expect(container.querySelector('#result').textContent).toBe('stranger');
+
+    // Update firstname
+    const firstInput = container.querySelector('#first');
+    firstInput.value = 'John';
+    firstInput.dispatchEvent(new Event('input', { bubbles: true }));
+    await new Promise(r => setTimeout(r, 10));
+
+    // Should now show 'John' (since lastname is still empty, fullname = 'John')
+    expect(container.querySelector('#result').textContent).toBe('John');
+
+    // Update lastname
+    const lastInput = container.querySelector('#last');
+    lastInput.value = 'Doe';
+    lastInput.dispatchEvent(new Event('input', { bubbles: true }));
+    await new Promise(r => setTimeout(r, 10));
+
+    // Should now show 'John Doe'
+    expect(container.querySelector('#result').textContent).toBe('John Doe');
+  });
+
+  it('should handle password strength pattern with nested property access', async () => {
+    container.innerHTML = `
+      <div @data="{ password: '' }">
+        <input id="pw" type="password" @bind="password">
+        <span @calculate:strength="password.length < 4 ? 'Weak' : password.length < 8 ? 'Medium' : 'Strong'"></span>
+        <span id="result" @text="strength"></span>
+      </div>
+    `;
+    await helium();
+
+    // Initially should show 'Weak' (empty password)
+    expect(container.querySelector('#result').textContent).toBe('Weak');
+
+    // Type 'abc' (3 chars) - still Weak
+    const input = container.querySelector('#pw');
+    input.value = 'abc';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await new Promise(r => setTimeout(r, 10));
+    expect(container.querySelector('#result').textContent).toBe('Weak');
+
+    // Type 'abcdef' (6 chars) - Medium
+    input.value = 'abcdef';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await new Promise(r => setTimeout(r, 10));
+    expect(container.querySelector('#result').textContent).toBe('Medium');
+
+    // Type 'abcdefgh' (8 chars) - Strong
+    input.value = 'abcdefgh';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await new Promise(r => setTimeout(r, 10));
+    expect(container.querySelector('#result').textContent).toBe('Strong');
+  });
+});