ripple 0.3.69 → 0.3.71

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # ripple
 
+## 0.3.71
+
+### Patch Changes
+
+- Updated dependencies
+  [[`0574e73`](https://github.com/Ripple-TS/ripple/commit/0574e73830a549f515cef6aa8c0a1e38c79b06cc),
+  [`0574e73`](https://github.com/Ripple-TS/ripple/commit/0574e73830a549f515cef6aa8c0a1e38c79b06cc)]:
+  - @tsrx/core@0.1.19
+  - @tsrx/ripple@0.1.19
+
+## 0.3.70
+
+### Patch Changes
+
+- Updated dependencies
+  [[`5c0b0ff`](https://github.com/Ripple-TS/ripple/commit/5c0b0ff031ddfb319bb048d627e2d2a2a49c1f1d)]:
+  - @tsrx/core@0.1.18
+  - @tsrx/ripple@0.1.18
+
 ## 0.3.69
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.69",
+  "version": "0.3.71",
   "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.17",
-    "@tsrx/ripple": "0.1.17"
+    "@tsrx/core": "0.1.19",
+    "@tsrx/ripple": "0.1.19"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/tests/client/compiler/compiler.basic.test.tsrx

@@ -524,6 +524,36 @@ function App() { return <>
 		expect(result).toContain('const content = <div class="native">');
 	});
 
+	it('keeps assigned style blocks anchored in to_ts output', () => {
+		const source = `
+function App() { return <>
+	const styles = <style>
+		.logo { display: block; }
+	</style>;
+
+	<div class={styles.logo} />
+</>; }
+`;
+		const result = compile_to_volar_mappings(source, 'test.tsrx', { loose: true });
+		const source_offset = source.indexOf('<style>') + 1;
+		const mapping = result.mappings.find((mapping: {
+			sourceOffsets: number[];
+			lengths: number[];
+		}) => {
+			const start = mapping.sourceOffsets[0];
+			const end = start + mapping.lengths[0];
+			return source_offset >= start && source_offset < end;
+		});
+
+		expect(result.code).toContain('<style></style>');
+		expect(result.code).toContain('const styles = {');
+		expect(result.code).not.toContain('(<style></style>,');
+		expect(result.code).toContain('\'logo\'');
+		expect(mapping).toBeDefined();
+		expect(mapping?.data.completion).toBe(true);
+		expect(mapping?.data.verification).toBe(false);
+	});
+
 	it('maps identifiers from native expression values in to_ts output', () => {
 		const source = `
 function App() { return <>

package/tests/client/css/style-identifier.test.tsrx

@@ -1,23 +1,27 @@
 import { track } from 'ripple';
 import { compile } from '@tsrx/ripple';
 
-describe('style refs', () => {
+const external_styles = <style>
+	.external {
+		color: tomato;
+	}
+</style>;
+
+describe('style class maps', () => {
 	describe('basic usage with components', () => {
-		it('passes scoped classes to a child component via a style ref', () => {
+		it('passes scoped classes to a child component via a style expression', () => {
 			function Child({ className }: { className: string }) {
 				return <><div class={className}>{'styled child'}</div></>;
 			}
 
 			function Parent() {
-				let styles;
-				return <>
-					<Child className={styles.highlight} />
-					<style ref={(s) => (styles = s)}>
-						.highlight {
-							color: red;
-						}
-					</style>
-				</>;
+				const styles = <style>
+					.highlight {
+						color: red;
+					}
+				</style>;
+
+				return <><Child className={styles.highlight} /></>;
 			}
 
 			render(Parent);
@@ -30,7 +34,7 @@ describe('style refs', () => {
 			expect(classes.some((cls: string) => cls === 'highlight')).toBe(true);
 		});
 
-		it('passes multiple style ref classes to a child component', () => {
+		it('passes multiple style expression classes to a child component', () => {
 			function Child({ primary, secondary }: { primary: string; secondary: string }) {
 				return <>
 					<div class={primary}>{'primary'}</div>
@@ -39,18 +43,16 @@ describe('style refs', () => {
 			}
 
 			function Parent() {
-				let styles;
-				return <>
-					<Child primary={styles.primary} secondary={styles.secondary} />
-					<style ref={(s) => (styles = s)}>
-						.primary {
-							color: blue;
-						}
-						.secondary {
-							color: gray;
-						}
-					</style>
-				</>;
+				const styles = <style>
+					.primary {
+						color: blue;
+					}
+					.secondary {
+						color: gray;
+					}
+				</style>;
+
+				return <><Child primary={styles.primary} secondary={styles.secondary} /></>;
 			}
 
 			render(Parent);
@@ -70,44 +72,43 @@ describe('style refs', () => {
 			expect(spanClasses.some((cls: string) => cls === 'secondary')).toBe(true);
 		});
 
-		it('allows style ref classes on child components with children', () => {
+		it('allows style expression classes on child components with children', () => {
 			const source = `
 function Child({ className }) { return <>
 	<div class={className}>"hello world"</div>
 </>; }
 function App() {
-	let styles;
+	const styles = <style>
+		.container {
+			color: red;
+		}
+	</style>;
+
 	return <>
 		<Child className={styles.container}>"hello world"</Child>
-
-		<style ref={(s) => styles = s}>
-			.container {
-				color: red;
-			}
-		</style>
 	</>;
 }`;
 
 			expect(() => compile(source, 'test.tsrx')).not.toThrow();
 		});
 
-		it('passes scoped classes to a dynamic child component via a style ref', () => {
+		it('passes scoped classes to a dynamic child component via a style expression', () => {
 			function Child({ cls }: { cls: string }) {
 				return <><span class={cls}>{'text'}</span></>;
 			}
 
 			function Parent() {
-				let styles;
+				const styles = <style>
+					.text {
+						color: red;
+					}
+				</style>;
+
 				return <>
 					let dynamic = track(() => Child);
 					<div class="wrapper">
 						<@dynamic cls={styles.text} />
 					</div>
-					<style ref={(s) => (styles = s)}>
-						.text {
-							color: red;
-						}
-					</style>
 				</>;
 			}
 
@@ -120,7 +121,25 @@ function App() {
 			expect(classes.some((cls: string) => cls === 'text')).toBe(true);
 		});
 
-		it('child can combine its own classes with a parent style ref class', () => {
+		it('passes style expression classes declared outside the component', () => {
+			function Child({ cls }: { cls: string }) {
+				return <><span class={cls}>{'text'}</span></>;
+			}
+
+			function Parent() {
+				return <Child cls={external_styles.external} />;
+			}
+
+			render(Parent);
+
+			const span = container.querySelector('span');
+			expect(span).toBeTruthy();
+			const classes = Array.from(span.classList);
+			expect(classes.some((cls: string) => cls.startsWith('tsrx-'))).toBe(true);
+			expect(classes.some((cls: string) => cls === 'external')).toBe(true);
+		});
+
+		it('child can combine its own classes with a parent style expression class', () => {
 			function Card({ className }: { className?: string }) {
 				return <>
 					<div class={['card-base', className ?? '']}>{'card content'}</div>
@@ -133,15 +152,13 @@ function App() {
 			}
 
 			function App() {
-				let styles;
-				return <>
-					<Card className={styles.themed} />
-					<style ref={(s) => (styles = s)}>
-						.themed {
-							background: purple;
-						}
-					</style>
-				</>;
+				const styles = <style>
+					.themed {
+						background: purple;
+					}
+				</style>;
+
+				return <><Card className={styles.themed} /></>;
 			}
 
 			render(App);
@@ -159,19 +176,19 @@ function App() {
 			}
 
 			function App() {
-				let styles;
+				const styles = <style>
+					.dual {
+						color: blue;
+					}
+					.parent .dual {
+						font-weight: bold;
+					}
+				</style>;
+
 				return <>
 					<div class="parent">
 						<Child cls={styles.dual} />
 					</div>
-					<style ref={(s) => (styles = s)}>
-						.dual {
-							color: blue;
-						}
-						.parent .dual {
-							font-weight: bold;
-						}
-					</style>
 				</>;
 			}
 
@@ -223,15 +240,14 @@ function Child({ cls }) { return <>
 	<div class={cls}>{'text'}</div>
 </>; }
 export function App() {
-	let styles;
+	const styles = <style>
+		.highlight {
+			color: red;
+		}
+	</style>;
+
 	return <>
 		<Child cls={styles.highlight} />
-
-		<style ref={(s) => styles = s}>
-			.highlight {
-				color: red;
-			}
-		</style>
 	</>;
 }`;
 			const { code } = compile(source, 'test.tsrx');
@@ -246,15 +262,14 @@ function Child({ cls }) { return <>
 	<div class={cls}>{'text'}</div>
 </>; }
 export function App() {
-	let styles;
+	const styles = <style>
+		.highlight {
+			color: red;
+		}
+	</style>;
+
 	return <>
 		<Child cls={styles.highlight} />
-
-		<style ref={(s) => styles = s}>
-			.highlight {
-				color: red;
-			}
-		</style>
 	</>;
 }`;
 			const { code } = compile(source, 'test.tsrx', { mode: 'server' });

package/tests/server/style-identifier.test.tsrx

@@ -1,23 +1,27 @@
 import { track } from 'ripple';
 import { compile } from '@tsrx/ripple';
 
-describe('style refs (server)', () => {
+const external_styles = <style>
+	.external {
+		color: tomato;
+	}
+</style>;
+
+describe('style class maps (server)', () => {
 	describe('basic usage with components', () => {
-		it('passes scoped classes to a child component via a style ref', async () => {
+		it('passes scoped classes to a child component via a style expression', async () => {
 			function Child({ className }: { className: string }) {
 				return <><div class={className}>{'styled child'}</div></>;
 			}
 
 			function Parent() {
-				let styles;
-				return <>
-					<Child className={styles.highlight} />
-					<style ref={(s) => (styles = s)}>
-						.highlight {
-							color: red;
-						}
-					</style>
-				</>;
+				const styles = <style>
+					.highlight {
+						color: red;
+					}
+				</style>;
+
+				return <><Child className={styles.highlight} /></>;
 			}
 
 			const { body } = await render(Parent);
@@ -31,7 +35,7 @@ describe('style refs (server)', () => {
 			expect(classes.some((cls: string) => cls === 'highlight')).toBe(true);
 		});
 
-		it('passes multiple style ref classes to a child component', async () => {
+		it('passes multiple style expression classes to a child component', async () => {
 			function Child({ primary, secondary }: { primary: string; secondary: string }) {
 				return <>
 					<div class={primary}>{'primary'}</div>
@@ -40,18 +44,16 @@ describe('style refs (server)', () => {
 			}
 
 			function Parent() {
-				let styles;
-				return <>
-					<Child primary={styles.primary} secondary={styles.secondary} />
-					<style ref={(s) => (styles = s)}>
-						.primary {
-							color: blue;
-						}
-						.secondary {
-							color: gray;
-						}
-					</style>
-				</>;
+				const styles = <style>
+					.primary {
+						color: blue;
+					}
+					.secondary {
+						color: gray;
+					}
+				</style>;
+
+				return <><Child primary={styles.primary} secondary={styles.secondary} /></>;
 			}
 
 			const { body } = await render(Parent);
@@ -74,21 +76,19 @@ describe('style refs (server)', () => {
 	});
 
 	describe('parent styling applied to child', () => {
-		it('allows parent to style child elements via a style ref prop', async () => {
+		it('allows parent to style child elements via a style expression prop', async () => {
 			function Button({ extraClass }: { extraClass?: string }) {
 				return <><button class={extraClass ?? ''}>{'Click me'}</button></>;
 			}
 
 			function App() {
-				let styles;
-				return <>
-					<Button extraClass={styles.fancy} />
-					<style ref={(s) => (styles = s)}>
-						.fancy {
-							background: gold;
-						}
-					</style>
-				</>;
+				const styles = <style>
+					.fancy {
+						background: gold;
+					}
+				</style>;
+
+				return <><Button extraClass={styles.fancy} /></>;
 			}
 
 			const { body } = await render(App);
@@ -101,7 +101,7 @@ describe('style refs (server)', () => {
 			expect(classes.some((cls: string) => cls === 'fancy')).toBe(true);
 		});
 
-		it('child can combine its own classes with a parent style ref class', async () => {
+		it('child can combine its own classes with a parent style expression class', async () => {
 			function Card({ className }: { className?: string }) {
 				return <>
 					<div class={['card-base', className ?? '']}>{'card content'}</div>
@@ -114,15 +114,13 @@ describe('style refs (server)', () => {
 			}
 
 			function App() {
-				let styles;
-				return <>
-					<Card className={styles.themed} />
-					<style ref={(s) => (styles = s)}>
-						.themed {
-							background: purple;
-						}
-					</style>
-				</>;
+				const styles = <style>
+					.themed {
+						background: purple;
+					}
+				</style>;
+
+				return <><Card className={styles.themed} /></>;
 			}
 
 			const { body } = await render(App);
@@ -141,19 +139,19 @@ describe('style refs (server)', () => {
 			}
 
 			function App() {
-				let styles;
+				const styles = <style>
+					.dual {
+						color: blue;
+					}
+					.parent .dual {
+						font-weight: bold;
+					}
+				</style>;
+
 				return <>
 					<div class="parent">
 						<Child cls={styles.dual} />
 					</div>
-					<style ref={(s) => (styles = s)}>
-						.dual {
-							color: blue;
-						}
-						.parent .dual {
-							font-weight: bold;
-						}
-					</style>
 				</>;
 			}
 
@@ -168,23 +166,23 @@ describe('style refs (server)', () => {
 		});
 	});
 
-	it('passes scoped classes to a dynamic child component via a style ref', async () => {
+	it('passes scoped classes to a dynamic child component via a style expression', async () => {
 		function Child({ cls }: { cls: string }) {
 			return <><span class={cls}>{'text'}</span></>;
 		}
 
 		function Parent() {
-			let styles;
+			const styles = <style>
+				.text {
+					color: red;
+				}
+			</style>;
+
 			return <>
 				let dynamic = track(() => Child);
 				<div class="wrapper">
 					<@dynamic cls={styles.text} />
 				</div>
-				<style ref={(s) => (styles = s)}>
-					.text {
-						color: red;
-					}
-				</style>
 			</>;
 		}
 
@@ -198,6 +196,28 @@ describe('style refs (server)', () => {
 		expect(classes.some((cls: string) => cls === 'text')).toBe(true);
 	});
 
+	it('passes style expression classes declared outside the component', async () => {
+		function Child({ cls }: { cls: string }) {
+			return <><span class={cls}>{'text'}</span></>;
+		}
+
+		function Parent() {
+			return <Child cls={external_styles.external} />;
+		}
+
+		const { body, css } = await render(Parent);
+		const { document } = parseHtml(body);
+
+		const span = document.querySelector('span');
+		expect(span).toBeTruthy();
+		const classes = Array.from(span.classList);
+		expect(classes.some((cls: string) => cls.startsWith('tsrx-'))).toBe(true);
+		expect(classes.some((cls: string) => cls === 'external')).toBe(true);
+
+		expect(css.size).toBeGreaterThan(0);
+		expect(Array.from(css).some((hash: string) => hash.startsWith('tsrx-'))).toBe(true);
+	});
+
 	it('preserves caller scoped hash through wrapper children', async () => {
 		function Wrapper({ children }) {
 			return <>
@@ -283,15 +303,14 @@ function Child({ cls }: { cls: string }) { return <>
 	<div class={cls}>{'text'}</div>
 </>; }
 export function App() {
-	let styles;
+	const styles = <style>
+		.highlight {
+			color: red;
+		}
+	</style>;
+
 	return <>
 		<Child cls={styles.highlight} />
-
-		<style ref={(s) => styles = s}>
-			.highlight {
-				color: red;
-			}
-		</style>
 	</>;
 }`;
 			const { code } = compile(source, 'test.tsrx', { mode: 'server' });
@@ -307,15 +326,13 @@ export function App() {
 			}
 
 			function App() {
-				let styles;
-				return <>
-					<Child cls={styles.styled} />
-					<style ref={(s) => (styles = s)}>
-						.styled {
-							font-weight: bold;
-						}
-					</style>
-				</>;
+				const styles = <style>
+					.styled {
+						font-weight: bold;
+					}
+				</style>;
+
+				return <><Child cls={styles.styled} /></>;
 			}
 
 			const { body, css } = await render(App);