ripple 0.3.64 → 0.3.65

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # ripple
 
+## 0.3.65
+
+### Patch Changes
+
+- Updated dependencies
+  [[`95c2976`](https://github.com/Ripple-TS/ripple/commit/95c2976b9ec2c20c4160ad13b636c1ed03e863ef)]:
+  - @tsrx/core@0.1.13
+  - @tsrx/ripple@0.1.13
+
 ## 0.3.64
 
 ## 0.3.63

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.64",
+  "version": "0.3.65",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -74,8 +74,8 @@
     "clsx": "^2.1.1",
     "devalue": "^5.8.1",
     "esm-env": "^1.2.2",
-    "@tsrx/core": "0.1.12",
-    "@tsrx/ripple": "0.1.12"
+    "@tsrx/core": "0.1.13",
+    "@tsrx/ripple": "0.1.13"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/tests/client/tsx.test.tsrx

@@ -37,7 +37,9 @@ describe('tsx expression', () => {
 
 	it('renders a basic fragment shorthand element', () => {
 		component App() {
-			const el = <tsx><div>hello world</div></tsx>;
+			const el = <tsx>
+				<div>hello world</div>
+			</tsx>;
 			{el}
 		}
 		render(App);
@@ -97,7 +99,9 @@ describe('tsx expression', () => {
 
 	it('renders a tsx element assigned to a variable', () => {
 		component App() {
-			const el = <tsx><span class="test">content</span></tsx>;
+			const el = <tsx>
+				<span class="test">content</span>
+			</tsx>;
 			{el}
 		}
 		render(App);
@@ -140,7 +144,9 @@ describe('tsx expression', () => {
 
 	it('renders a tsx element inline in a parent element', () => {
 		component App() {
-			const el = <tsx><span>inline</span></tsx>;
+			const el = <tsx>
+				<span>inline</span>
+			</tsx>;
 			<div class="parent">{el}</div>
 		}
 		render(App);
@@ -172,7 +178,9 @@ describe('tsx expression', () => {
 	it('conditionally renders tsx elements', () => {
 		component App() {
 			let &[show] = track(true);
-			const el = <tsx><div class="tsx-content">visible</div></tsx>;
+			const el = <tsx>
+				<div class="tsx-content">visible</div>
+			</tsx>;
 
 			if (show) {
 				{el}
@@ -197,7 +205,9 @@ describe('tsx expression', () => {
 		}
 
 		component App() {
-			const el = <tsx><span>from tsx</span></tsx>;
+			const el = <tsx>
+				<span>from tsx</span>
+			</tsx>;
 			<Child children={el} />
 		}
 		render(App);
@@ -209,12 +219,14 @@ describe('tsx expression', () => {
 
 	it('renders tsx element with text content only', () => {
 		component App() {
-			const el = <tsx>just text</tsx>;
+			const el = <tsx>
+				just text
+			</tsx>;
 			{el}
 		}
 
 		render(App);
-		expect(container.textContent).toBe('just text');
+		expect(container.textContent.trim()).toBe('just text');
 	});
 
 	it('renders tsx element with static attributes', () => {
@@ -237,7 +249,9 @@ describe('tsx expression', () => {
 		component App() {
 			let &[name] = track('initial');
 
-			const el = <tsx><div id={name} class={'cls-' + name}>content</div></tsx>;
+			const el = <tsx>
+				<div id={name} class={'cls-' + name}>content</div>
+			</tsx>;
 			{el}
 			<button onClick={() => (name = 'updated')}>{'update'}</button>
 		}
@@ -299,7 +313,9 @@ describe('tsx expression', () => {
 		component App() {
 			let &[color] = track('red');
 
-			const el = <tsx><div style={'color: ' + color}>styled</div></tsx>;
+			const el = <tsx>
+				<div style={'color: ' + color}>styled</div>
+			</tsx>;
 			{el}
 			<button onClick={() => (color = 'blue')}>{'change color'}</button>
 		}
@@ -351,7 +367,11 @@ describe('tsx expression', () => {
 		}
 
 		component App() {
-			<Wrapper content={<tsx><span class="inner">direct prop</span></tsx>} />
+			<Wrapper
+				content={<tsx>
+					<span class="inner">direct prop</span>
+				</tsx>}
+			/>
 		}
 
 		render(App);
@@ -371,8 +391,12 @@ describe('tsx expression', () => {
 
 		component App() {
 			<Card
-				title={<tsx><span class="bold">Title</span></tsx>}
-				children={<tsx><p>Card content here</p></tsx>}
+				title={<tsx>
+					<span class="bold">Title</span>
+				</tsx>}
+				children={<tsx>
+					<p>Card content here</p>
+				</tsx>}
 			/>
 		}
 
@@ -384,7 +408,9 @@ describe('tsx expression', () => {
 
 	it('renders tsx from function defined outside component', () => {
 		function createBadge(label: string) {
-			return <tsx><span class="badge">{label}</span></tsx>;
+			return <tsx>
+				<span class="badge">{label}</span>
+			</tsx>;
 		}
 
 		component App() {
@@ -399,7 +425,9 @@ describe('tsx expression', () => {
 
 	it('renders tsx from function with multiple elements', () => {
 		function createListItem(item: string) {
-			return <tsx><li class="list-item">{item}</li></tsx>;
+			return <tsx>
+				<li class="list-item">{item}</li>
+			</tsx>;
 		}
 
 		component App() {
@@ -479,7 +507,9 @@ describe('tsx expression', () => {
 
 	it('renders nested tsx from multiple functions', () => {
 		function createIcon(name: string) {
-			return <tsx><i class={'icon icon-' + name}></i></tsx>;
+			return <tsx>
+				<i class={'icon icon-' + name}></i>
+			</tsx>;
 		}
 
 		function createButton(icon: string, label: string) {
@@ -521,7 +551,9 @@ describe('tsx expression', () => {
 		}
 
 		component App() {
-			{<tsx>{[1, 2, 3].map((item) => <div class="app-item">{item}</div>)}</tsx>}
+			{<tsx>
+				{[1, 2, 3].map((item) => <div class="app-item">{item}</div>)}
+			</tsx>}
 			{makeFragment('from helper')}
 		}
 
@@ -615,7 +647,12 @@ describe('tsx expression', () => {
 
 		component App() {
 			<Alert message="No icon" />
-			<Alert icon={<tsx><span class="custom-icon">✓</span></tsx>} message="Custom icon" />
+			<Alert
+				icon={<tsx>
+					<span class="custom-icon">✓</span>
+				</tsx>}
+				message="Custom icon"
+			/>
 		}
 
 		render(App);
@@ -627,7 +664,9 @@ describe('tsx expression', () => {
 
 	it('renders tsx stored in array via function', () => {
 		function createItem(className: string, content: string) {
-			return <tsx><div class={className}>{content}</div></tsx>;
+			return <tsx>
+				<div class={className}>{content}</div>
+			</tsx>;
 		}
 
 		component App() {
@@ -654,11 +693,17 @@ describe('tsx expression', () => {
 	it('renders tsx conditionally from function', () => {
 		function createContent(type: string) {
 			if (type === 'success') {
-				return <tsx><div class="success">Success!</div></tsx>;
+				return <tsx>
+					<div class="success">Success!</div>
+				</tsx>;
 			} else if (type === 'error') {
-				return <tsx><div class="error">Error!</div></tsx>;
+				return <tsx>
+					<div class="error">Error!</div>
+				</tsx>;
 			}
-			return <tsx><div class="default">Default</div></tsx>;
+			return <tsx>
+				<div class="default">Default</div>
+			</tsx>;
 		}
 
 		component App() {

package/tests/hydration/components/basic.tsrx

@@ -83,7 +83,9 @@ function makeNestedTsxTsrxFragment(label: string) {
 }
 
 export component NestedTsxTsrxExpressionValues() {
-	{<tsx>{[1, 2, 3].map((item) => <div class="app-item">{item}</div>)}</tsx>}
+	{<tsx>
+		{[1, 2, 3].map((item) => <div class="app-item">{item}</div>)}
+	</tsx>}
 	{makeNestedTsxTsrxFragment('from helper')}
 }
 

package/tests/server/basic.test.tsrx

@@ -73,7 +73,9 @@ second"</pre>
 		}
 
 		component Basic() {
-			{<tsx>{[1, 2, 3].map((item) => <div class="app-item">{item}</div>)}</tsx>}
+			{<tsx>
+				{[1, 2, 3].map((item) => <div class="app-item">{item}</div>)}
+			</tsx>}
 			{makeFragment('from helper')}
 		}