ripple 0.2.6 → 0.2.7

package/tests/basic.test.ripple

@@ -1,273 +1,302 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+
 import { mount, flushSync } from 'ripple';
 
 describe('basic', () => {
-  let container;
+	let container;
+
+	function render(component) {
+		mount(component, {
+			target: container
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+		container = null;
+	});
+
+	it('render static text', () => {
+		component Basic() {
+			<div>{'Hello World'}</div>
+		}
+
+		render(Basic);
+		expect(container).toMatchSnapshot();
+	});
+
+	it('render static attributes', () => {
+		component Basic() {
+			<div class='foo' id='bar' style='color: red;'>{'Hello World'}</div>
+		}
+
+		render(Basic);
+
+		expect(container).toMatchSnapshot();
+	});
+
+	it('render semi-dynamic text', () => {
+		component Basic() {
+			let text = 'Hello World';
+			<div>{text}</div>
+		}
+
+		render(Basic);
+
+		expect(container).toMatchSnapshot();
+	});
+
+	it('render dynamic text', () => {
+		component Basic() {
+			let $text = 'Hello World';
+			<button onClick={() => $text = 'Hello Ripple'}>{'Change Text'}</button>
+			<div>{$text}</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('div').textContent).toEqual('Hello Ripple');
+	});
+
+	it('render dynamic class attribute', () => {
+		component Basic() {
+			let $active = false;
+			<button onClick={() => $active = !$active}>{'Toggle'}</button>
+			<div $class={$active ? 'active' : 'inactive'}>{'Dynamic Class'}</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const div = container.querySelector('div');
+
+		expect(div.className).toBe('inactive');
+
+		button.click();
+		flushSync();
+
+		expect(div.className).toBe('active');
+
+		button.click();
+		flushSync();
+
+		expect(div.className).toBe('inactive');
+	});
+
+	it('render dynamic id attribute', () => {
+		component Basic() {
+			let $count = 0;
+			<button onClick={() => $count++}>{'Increment'}</button>
+			<div $id={`item-${$count}`}>{'Dynamic ID'}</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const div = container.querySelector('div');
+
+		expect(div.id).toBe('item-0');
+
+		button.click();
+		flushSync();
+
+		expect(div.id).toBe('item-1');
+
+		button.click();
+		flushSync();
+
+		expect(div.id).toBe('item-2');
+	});
+
+	it('render dynamic style attribute', () => {
+		component Basic() {
+			let $color = 'red';
+			<button onClick={() => $color = $color === 'red' ? 'blue' : 'red'}>{'Change Color'}</button>
+			<div $style={`color: ${$color}; font-weight: bold;`}>{'Dynamic Style'}</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const div = container.querySelector('div');
+
+		expect(div.style.color).toBe('red');
+		expect(div.style.fontWeight).toBe('bold');
+
+		button.click();
+		flushSync();
 
-  function render(component) {
-    mount(component, { target: container });
-  }
+		expect(div.style.color).toBe('blue');
+		expect(div.style.fontWeight).toBe('bold');
+	});
 
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
+	it('render dynamic boolean attributes', () => {
+		component Basic() {
+			let $disabled = false;
+			let $checked = false;
+			<button onClick={() => {
+				$disabled = !$disabled;
+				$checked = !$checked;
+			}}>{'Toggle'}</button>
+			<input type='checkbox' $disabled={$disabled} $checked={$checked} />
+		}
 
-  afterEach(() => {
-    document.body.removeChild(container);
-    container = null;
-  });
-
-  it('render static text', () => {
-    component Basic() {
-      <div>{"Hello World"}</div>
-    }
-
-    render(Basic);
-
-    expect(container).toMatchSnapshot();
-  });
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const input = container.querySelector('input');
 
-  it('render static attributes', () => {
-    component Basic() {
-      <div class="foo" id="bar" style="color: red;">{"Hello World"}</div>
-    }
+		expect(input.disabled).toBe(false);
+		expect(input.checked).toBe(false);
 
-    render(Basic);
+		button.click();
+		flushSync();
 
-    expect(container).toMatchSnapshot();
-  });
-
-  it('render semi-dynamic text', () => {
-    component Basic() {
-      let text = 'Hello World';
-      <div>{text}</div>
-    }
-
-    render(Basic);
-
-    expect(container).toMatchSnapshot();
-  });
-
-  it('render dynamic text', () => {
-    component Basic() {
-      let $text = 'Hello World';
-
-      <button onClick={() => $text = 'Hello Ripple'}>{"Change Text"}</button>
-
-      <div>{$text}</div>
-    }
-
-    render(Basic);
-
-    const button = container.querySelector('button');
-    
-    button.click();
-    flushSync();
-
-    expect(container.querySelector('div').textContent).toEqual('Hello Ripple');
-  });
-
-  it('render dynamic class attribute', () => {
-    component Basic() {
-      let $active = false;
-
-      <button onClick={() => $active = !$active}>{"Toggle"}</button>
-
-      <div $class={$active ? 'active' : 'inactive'}>{"Dynamic Class"}</div>
-    }
-
-    render(Basic);
-
-    const button = container.querySelector('button');
-    const div = container.querySelector('div');
-    
-    expect(div.className).toBe('inactive');
-    
-    button.click();
-    flushSync();
-    
-    expect(div.className).toBe('active');
-    
-    button.click();
-    flushSync();
-    
-    expect(div.className).toBe('inactive');
-  });
-
-  it('render dynamic id attribute', () => {
-    component Basic() {
-      let $count = 0;
-
-      <button onClick={() => $count++}>{"Increment"}</button>
-
-      <div $id={`item-${$count}`}>{"Dynamic ID"}</div>
-    }
-
-    render(Basic);
-
-    const button = container.querySelector('button');
-    const div = container.querySelector('div');
-    
-    expect(div.id).toBe('item-0');
-    
-    button.click();
-    flushSync();
-    
-    expect(div.id).toBe('item-1');
-    
-    button.click();
-    flushSync();
-    
-    expect(div.id).toBe('item-2');
-  });
-
-  it('render dynamic style attribute', () => {
-    component Basic() {
-      let $color = 'red';
-
-      <button onClick={() => $color = $color === 'red' ? 'blue' : 'red'}>{"Change Color"}</button>
-
-      <div $style={`color: ${$color}; font-weight: bold;`}>{"Dynamic Style"}</div>
-    }
-
-    render(Basic);
-
-    const button = container.querySelector('button');
-    const div = container.querySelector('div');
-    
-    expect(div.style.color).toBe('red');
-    expect(div.style.fontWeight).toBe('bold');
-    
-    button.click();
-    flushSync();
-    
-    expect(div.style.color).toBe('blue');
-    expect(div.style.fontWeight).toBe('bold');
-  });
-
-  it('render dynamic boolean attributes', () => {
-    component Basic() {
-      let $disabled = false;
-      let $checked = false;
-
-      <button onClick={() => { $disabled = !$disabled; $checked = !$checked; }}>{"Toggle"}</button>
-
-      <input type="checkbox" $disabled={$disabled} $checked={$checked} />
-    }
-
-    render(Basic);
-
-    const button = container.querySelector('button');
-    const input = container.querySelector('input');
-    
-    expect(input.disabled).toBe(false);
-    expect(input.checked).toBe(false);
-    
-    button.click();
-    flushSync();
-    
-    expect(input.disabled).toBe(true);
-    expect(input.checked).toBe(true);
-  });
-
-  it('render multiple dynamic attributes', () => {
-    component Basic() {
-      let $theme = 'light';
-      let $size = 'medium';
-
-      <button onClick={() => {
-        $theme = $theme === 'light' ? 'dark' : 'light';
-        $size = $size === 'medium' ? 'large' : 'medium';
-      }}>{"Toggle Theme & Size"}</button>
-
-      <div 
-        $class={`theme-${$theme} size-${$size}`}
-        $data-theme={$theme}
-        $data-size={$size}
-      >
-        {"Multiple Dynamic Attributes"}
-      </div>
-    }
-
-    render(Basic);
-
-    const button = container.querySelector('button');
-    const div = container.querySelector('div');
-    
-    expect(div.className).toBe('theme-light size-medium');
-    expect(div.getAttribute('data-theme')).toBe('light');
-    expect(div.getAttribute('data-size')).toBe('medium');
-    
-    button.click();
-    flushSync();
-    
-    expect(div.className).toBe('theme-dark size-large');
-    expect(div.getAttribute('data-theme')).toBe('dark');
-    expect(div.getAttribute('data-size')).toBe('large');
-  });
-
-  it('render conditional attributes', () => {
-    component Basic() {
-      let $showTitle = false;
-      let $showAria = false;
-
-      <button onClick={() => { $showTitle = !$showTitle; $showAria = !$showAria; }}>{"Toggle Attributes"}</button>
-
-      <div 
-        $title={$showTitle ? 'This is a title' : null}
-        $aria-label={$showAria ? 'Accessible label' : null}
-      >
-        {"Conditional Attributes"}
-      </div>
-    }
-
-    render(Basic);
-
-    const button = container.querySelector('button');
-    const div = container.querySelector('div');
-    
-    expect(div.hasAttribute('title')).toBe(false);
-    expect(div.hasAttribute('aria-label')).toBe(false);
-    
-    button.click();
-    flushSync();
-    
-    expect(div.getAttribute('title')).toBe('This is a title');
-    expect(div.getAttribute('aria-label')).toBe('Accessible label');
-    
-    button.click();
-    flushSync();
-    
-    expect(div.hasAttribute('title')).toBe(false);
-    expect(div.hasAttribute('aria-label')).toBe(false);
-  });
-
-  it('render spread attributes', () => {
-    component Basic() {
-      let $attrs = { class: 'initial', id: 'test-1' };
-
-      <button onClick={() => {
-        $attrs = { class: 'updated', id: 'test-2', 'data-extra': 'value' };
-      }}>{"Update Attributes"}</button>
-
-      <div {...$attrs}>{"Spread Attributes"}</div>
-    }
-
-    render(Basic);
-
-    const button = container.querySelector('button');
-    const div = container.querySelector('div');
-    
-    expect(div.className).toBe('initial');
-    expect(div.id).toBe('test-1');
-    expect(div.hasAttribute('data-extra')).toBe(false);
-    
-    button.click();
-    flushSync();
-    
-    expect(div.className).toBe('updated');
-    expect(div.id).toBe('test-2');
-    expect(div.getAttribute('data-extra')).toBe('value');
-  });
-});
+		expect(input.disabled).toBe(true);
+		expect(input.checked).toBe(true);
+	});
+
+	it('render multiple dynamic attributes', () => {
+		component Basic() {
+			let $theme = 'light';
+			let $size = 'medium';
+			<button
+				onClick={() => {
+				$theme = $theme === 'light' ? 'dark' : 'light';
+				$size = $size === 'medium' ? 'large' : 'medium';
+			}}
+			>{'Toggle Theme & Size'}</button>
+			<div $class={`theme-${$theme} size-${$size}`} $data-theme={$theme} $data-size={$size}>{'Multiple Dynamic Attributes'}</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const div = container.querySelector('div');
+
+		expect(div.className).toBe('theme-light size-medium');
+		expect(div.getAttribute('data-theme')).toBe('light');
+		expect(div.getAttribute('data-size')).toBe('medium');
+
+		button.click();
+		flushSync();
+
+		expect(div.className).toBe('theme-dark size-large');
+		expect(div.getAttribute('data-theme')).toBe('dark');
+		expect(div.getAttribute('data-size')).toBe('large');
+	});
+
+	it('render conditional attributes', () => {
+		component Basic() {
+			let $showTitle = false;
+			let $showAria = false;
+			<button onClick={() => {
+				$showTitle = !$showTitle;
+				$showAria = !$showAria;
+			}}>{'Toggle Attributes'}</button>
+			<div
+				$title={$showTitle ? 'This is a title' : null}
+				$aria-label={$showAria ? 'Accessible label' : null}
+			>{'Conditional Attributes'}</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const div = container.querySelector('div');
+
+		expect(div.hasAttribute('title')).toBe(false);
+		expect(div.hasAttribute('aria-label')).toBe(false);
+
+		button.click();
+		flushSync();
+
+		expect(div.getAttribute('title')).toBe('This is a title');
+		expect(div.getAttribute('aria-label')).toBe('Accessible label');
+
+		button.click();
+		flushSync();
+
+		expect(div.hasAttribute('title')).toBe(false);
+		expect(div.hasAttribute('aria-label')).toBe(false);
+	});
+
+	it('render spread attributes', () => {
+		component Basic() {
+			let $attrs = {
+				class: 'initial',
+				id: 'test-1'
+			};
+			<button
+				onClick={() => {
+				$attrs = {
+					class: 'updated',
+					id: 'test-2',
+					'data-extra': 'value'
+				};
+			}}
+			>{'Update Attributes'}</button>
+			<div {...$attrs}>{'Spread Attributes'}</div>
+		}
+
+		render(Basic);
+
+		const button = container.querySelector('button');
+		const div = container.querySelector('div');
+
+		expect(div.className).toBe('initial');
+		expect(div.id).toBe('test-1');
+		expect(div.hasAttribute('data-extra')).toBe(false);
+
+		button.click();
+		flushSync();
+
+		expect(div.className).toBe('updated');
+		expect(div.id).toBe('test-2');
+		expect(div.getAttribute('data-extra')).toBe('value');
+	});
+
+	it('renders multiple reactive lexical blocks', () => {
+		component Basic() {
+			<div>
+				let obj = {
+					$count: 0
+				};
+
+				<span>{obj.$count}</span>
+			</div>
+			<div>
+				let b = {
+					$count: 0
+				};
+
+				<button onClick={() => b.$count--}>{'-'}</button>
+				<span class='count'>{b.$count}</span>
+				<button onClick={() => b.$count++}>{'+'}</button>
+			</div>
+		}
+		render(Basic);
+
+		const buttons = container.querySelectorAll('button');
+
+		buttons[0].click();
+		flushSync();
+
+		expect(container.querySelector('.count').textContent).toBe('-1');
+
+		buttons[1].click();
+		flushSync();
+
+		expect(container.querySelector('.count').textContent).toBe('0');
+	});
+});

package/tests/composite.test.ripple

@@ -0,0 +1,125 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+
+import { mount, flushSync } from 'ripple';
+
+describe('composite components', () => {
+	let container;
+
+	function render(component) {
+		mount(component, {
+			target: container
+		});
+	}
+
+	beforeEach(() => {
+		container = document.createElement('div');
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		document.body.removeChild(container);
+		container = null;
+	});
+
+	it('renders composite components with object state', () => {
+		component Button({ obj }) {
+			<button class='count2' onClick={() => {
+				obj.$count++;
+			}}>{obj.$count}</button>
+		}
+
+		component App() {
+			<div>
+				let obj = {
+					$count: 0
+				};
+				let $button = true;
+
+				<span class='count'>{obj.$count}</span>
+				<span>{' '}</span>
+				<Button obj={obj} />
+			</div>
+		}
+
+		render(App);
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('.count').textContent).toBe('1');
+		expect(container.querySelector('.count2').textContent).toBe('1');
+	});
+
+	it('renders composite components with object state', () => {
+		component Button({ obj }) {
+			<button class='count2' onClick={() => {
+				obj.$count++;
+			}}>{obj.$count}</button>
+		}
+
+		component App() {
+			<div>
+				let obj = {
+					$count: 0
+				};
+
+				<span class='count'>{obj.$count}</span>
+				<Button obj={obj} />
+			</div>
+		}
+
+		render(App);
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('.count').textContent).toBe('1');
+		expect(container.querySelector('.count2').textContent).toBe('1');
+	});
+
+	it('renders composite components with object state wrapped in an if statement', () => {
+		component Button({ obj }) {
+			<button class='count2' onClick={() => {
+				obj.$count++;
+			}}>{obj.$count}</button>
+		}
+
+		component OtherComponent({ obj }) {
+			<div class='count3'>{obj.$count}</div>
+		}
+
+		component App() {
+			<div>
+				let obj = {
+					$count: 0
+				};
+				let $button = true;
+
+				<span class='count'>{obj.$count}</span>
+				<span>{' '}</span>
+				if (obj) {
+					<Button obj={obj} />
+				}
+
+				if (obj) {
+					<OtherComponent obj={obj} />
+				}
+			</div>
+		}
+
+		render(App);
+
+		const button = container.querySelector('button');
+
+		button.click();
+		flushSync();
+
+		expect(container.querySelector('.count').textContent).toBe('1');
+		expect(container.querySelector('.count2').textContent).toBe('1');
+		expect(container.querySelector('.count3').textContent).toBe('1');
+	});
+});