ripple 0.3.5 → 0.3.6

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # ripple
 
+## 0.3.6
+
+### Patch Changes
+
+- Updated dependencies []:
+  - ripple@0.3.6
+
 ## 0.3.5
 
 ### 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.5",
+  "version": "0.3.6",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -105,6 +105,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.3.5"
+    "ripple": "0.3.6"
   }
 }

package/tests/hydration/components/basic.ripple

@@ -1,5 +1,5 @@
 // Basic static components for hydration testing
-import type { Component } from 'ripple';
+import type { Children } from 'ripple';
 
 export component StaticText() {
 	<div>{'Hello World'}</div>
@@ -97,7 +97,7 @@ component Actions({ playgroundVisible = false }: { playgroundVisible: boolean })
 	</div>
 }
 
-component Layout({ children }: { children: Component }) {
+component Layout({ children }: { children: Children }) {
 	<main>
 		<div class="container">
 			<children />

package/tests/hydration/components/composite.ripple

@@ -1,6 +1,6 @@
-import type { Component } from 'ripple';
+import type { Children } from 'ripple';
 
-export component Layout(&{ children }: { children?: Component }) {
+export component Layout(&{ children }: { children?: Children }) {
 	<div class="layout">
 		<children />
 	</div>

package/tests/utils/vite-plugin-hmr.test.js

@@ -0,0 +1,98 @@
+import { describe, it, expect, vi } from 'vitest';
+import { ripple } from '@ripple-ts/vite-plugin';
+
+describe('vite-plugin-ripple hotUpdate', () => {
+	it('invalidates SSR modules for non-self-accepting .ripple files', async () => {
+		const [plugin] = ripple({ excludeRippleExternalModules: true });
+		await plugin.configResolved?.({ root: '/workspace', command: 'serve' });
+
+		const transform_request = vi.fn().mockResolvedValue(undefined);
+		const get_css_module = vi.fn().mockReturnValue(undefined);
+		const invalidate_css_module = vi.fn();
+		const send_hot_update = vi.fn();
+		const get_ssr_modules = vi.fn().mockReturnValue(new Set([{ id: 'ssr:a' }, { id: 'ssr:b' }]));
+		const invalidate_ssr_module = vi.fn();
+
+		const result = await plugin.hotUpdate.handler.call(
+			{
+				environment: {
+					name: 'client',
+					transformRequest: transform_request,
+					moduleGraph: {
+						getModuleById: get_css_module,
+						invalidateModule: invalidate_css_module,
+					},
+					hot: {
+						send: send_hot_update,
+					},
+				},
+			},
+			{
+				file: '/workspace/src/non-component.ripple',
+				modules: [{ id: 'client:non-component', isSelfAccepting: false }],
+				server: {
+					environments: {
+						ssr: {
+							moduleGraph: {
+								getModulesByFile: get_ssr_modules,
+								invalidateModule: invalidate_ssr_module,
+							},
+						},
+					},
+				},
+			},
+		);
+
+		expect(transform_request).toHaveBeenCalledWith('/src/non-component.ripple');
+		expect(get_ssr_modules).toHaveBeenCalledWith('/workspace/src/non-component.ripple');
+		expect(invalidate_ssr_module).toHaveBeenCalledTimes(2);
+		expect(send_hot_update).toHaveBeenCalledWith({ type: 'full-reload' });
+		expect(result).toEqual([]);
+	});
+
+	it('keeps self-accepting .ripple files on Vite HMR path', async () => {
+		const [plugin] = ripple({ excludeRippleExternalModules: true });
+		await plugin.configResolved?.({ root: '/workspace', command: 'serve' });
+
+		const transform_request = vi.fn().mockResolvedValue(undefined);
+		const get_ssr_modules = vi.fn();
+		const invalidate_ssr_module = vi.fn();
+		const send_hot_update = vi.fn();
+
+		const result = await plugin.hotUpdate.handler.call(
+			{
+				environment: {
+					name: 'client',
+					transformRequest: transform_request,
+					moduleGraph: {
+						getModuleById: vi.fn().mockReturnValue(undefined),
+						invalidateModule: vi.fn(),
+					},
+					hot: {
+						send: send_hot_update,
+					},
+				},
+			},
+			{
+				file: '/workspace/src/component.ripple',
+				modules: [{ id: 'client:component', isSelfAccepting: true }],
+				server: {
+					environments: {
+						ssr: {
+							moduleGraph: {
+								getModulesByFile: get_ssr_modules,
+								invalidateModule: invalidate_ssr_module,
+							},
+						},
+					},
+				},
+			},
+		);
+
+		expect(transform_request).toHaveBeenCalledWith('/src/component.ripple');
+		expect(get_ssr_modules).not.toHaveBeenCalled();
+		expect(invalidate_ssr_module).not.toHaveBeenCalled();
+		expect(send_hot_update).not.toHaveBeenCalled();
+		expect(result).toBeUndefined();
+	});
+});

package/types/index.d.ts

@@ -1,5 +1,8 @@
 export type Component<T = Record<string, any>> = (props: T) => void;
 
+/** Type for JSX children - accepts single child, multiple children, or no children */
+export type Children = Component | readonly Component[];
+
 export type CompatApi = {
 	createRoot: () => void;
 	createComponent: (node: any, children_fn: () => any) => void;
@@ -159,10 +162,10 @@ export type InferComponent<T> = T extends () => infer R ? (R extends Component<a
 export type Props<K extends PropertyKey = any, V = unknown> = Record<K, V>;
 export type PropsWithExtras<T extends object> = Props & T & Record<string, unknown>;
 export type PropsWithChildren<T extends object = {}> = Expand<
-	Omit<T, 'children'> & { children: Component }
+	Omit<T, 'children'> & { children: Children }
 >;
 export type PropsWithChildrenOptional<T extends object = {}> = Expand<
-	Omit<T, 'children'> & { children?: Component }
+	Omit<T, 'children'> & { children?: Children }
 >;
 export type PropsNoChildren<T extends object = {}> = Expand<T>;
 
@@ -383,10 +386,10 @@ export const MediaQuery: MediaQueryConstructor;
 
 export function Portal<V = HTMLElement>({
 	target,
-	children: Component,
+	children,
 }: {
 	target: V;
-	children?: Component;
+	children?: Children;
 }): void;
 
 export type GetFunction<V> = () => V;