ripple 0.3.72 → 0.3.76

package/tests/utils/ref-types.test.js

@@ -0,0 +1,72 @@
+import ts from 'typescript';
+import { describe, expect, it } from 'vitest';
+
+/**
+ * @param {string} source
+ * @returns {string[]}
+ */
+function get_diagnostics(source) {
+	const root = process.cwd();
+	const file_name = `${root}/packages/ripple/ref-types-test.ts`;
+	const options = {
+		strict: true,
+		target: ts.ScriptTarget.ESNext,
+		module: ts.ModuleKind.ESNext,
+		moduleResolution: ts.ModuleResolutionKind.Bundler,
+		lib: ['lib.esnext.d.ts', 'lib.dom.d.ts'],
+		skipLibCheck: true,
+		baseUrl: root,
+		types: [],
+		paths: {
+			'@tsrx/core/runtime/ref': ['packages/tsrx/types/runtime/ref.d.ts'],
+			'@tsrx/core/types': ['packages/tsrx/types/index.d.ts'],
+			'#helpers': ['packages/ripple/src/helpers.d.ts'],
+			'#public': ['packages/ripple/types/index.d.ts'],
+			ripple: ['packages/ripple/types/index.d.ts'],
+			'ripple/jsx-runtime': ['packages/ripple/src/jsx-runtime.d.ts'],
+		},
+	};
+	const host = ts.createCompilerHost(options);
+	const read_file = host.readFile.bind(host);
+	const file_exists = host.fileExists.bind(host);
+	host.readFile = (name) => (name === file_name ? source : read_file(name));
+	host.fileExists = (name) => name === file_name || file_exists(name);
+
+	const program = ts.createProgram([file_name], options, host);
+	return ts
+		.getPreEmitDiagnostics(program)
+		.map((diagnostic) => ts.flattenDiagnosticMessageText(diagnostic.messageText, '\n'));
+}
+
+describe('Ripple ref types', () => {
+	it('exposes RefValue from the public runtime and JSX runtime type surfaces', () => {
+		const diagnostics = get_diagnostics(`
+			import type { RefValue } from 'ripple';
+			import type { RefValue as JSXRefValue } from 'ripple/jsx-runtime';
+
+			const callback_ref: RefValue<HTMLInputElement> = (node) => {
+				node.focus();
+				return () => {};
+			};
+			const object_ref: RefValue<HTMLInputElement> = { current: null };
+			const vue_ref: RefValue<HTMLInputElement> = { value: null };
+			const element_ref: RefValue<HTMLInputElement> = document.createElement('input');
+			const ref_array: RefValue<HTMLInputElement> = [
+				callback_ref,
+				object_ref,
+				vue_ref,
+				element_ref,
+				null,
+				undefined,
+			];
+			const jsx_ref: JSXRefValue<HTMLDivElement> = (node) => {
+				node.dataset.ready = 'true';
+			};
+
+			void ref_array;
+			void jsx_ref;
+		`);
+
+		expect(diagnostics).toEqual([]);
+	});
+});

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

@@ -1,113 +1,80 @@
 import { describe, expect, it } from 'vitest';
 import { RenderRoute, resolveRippleConfig } from '@ripple-ts/vite-plugin';
 
-const fake_compat_factory = Object.assign(
-	() =>
-		Object.assign(
-			{
-				createComponent() {},
-				createRoot() {
-					return () => {};
-				},
-			},
-			{
-				__ripple_compat__: {
-					from: '@ripple-ts/compat-react',
-					factory: 'createReactCompat',
-				},
-			},
-		),
-	{
-		__ripple_compat__: {
-			from: '@ripple-ts/compat-react',
-			factory: 'createReactCompat',
-		},
-	},
-);
-
 describe('vite-plugin-ripple config resolution', () => {
-	it('preserves compat descriptors and applies defaults', () => {
+	it('preserves routes and applies defaults', () => {
+		const route = new RenderRoute({
+			path: '/',
+			entry: '/src/App.tsrx',
+		});
 		const config = resolveRippleConfig({
 			router: {
-				routes: [
-					new RenderRoute({
-						path: '/',
-						entry: '/src/App.tsrx',
-					}),
-				],
-			},
-			compat: {
-				react: {
-					from: '@ripple-ts/compat-react',
-					factory: 'createReactCompat',
-				},
+				routes: [route],
 			},
 		});
 
-		expect(config.compat).toEqual({
-			react: {
-				from: '@ripple-ts/compat-react',
-				factory: 'createReactCompat',
-			},
-		});
+		expect(config.router.routes).toEqual([route]);
 		expect(config.middlewares).toEqual([]);
 		expect(config.platform.env).toEqual({});
 		expect(config.server.trustProxy).toBe(false);
+		expect(config.rootBoundary).toEqual({});
+		expect(config.build.outDir).toBe('dist');
 	});
 
-	it('defaults compat to an empty object', () => {
+	it('defaults routes to an empty array', () => {
 		const config = resolveRippleConfig({
 			router: {
 				routes: [],
 			},
 		});
 
-		expect(config.compat).toEqual({});
+		expect(config.router.routes).toEqual([]);
 	});
 
-	it('allows compat-only configs without routes', () => {
+	it('allows configs without routes', () => {
 		const config = resolveRippleConfig({
-			compat: {
-				react: fake_compat_factory,
+			middlewares: [() => {}],
+			platform: {
+				env: {
+					API_URL: 'https://example.com',
+				},
+			},
+			server: {
+				trustProxy: true,
 			},
 		});
 
 		expect(config.router.routes).toEqual([]);
-		expect(config.compat.react).toEqual({
-			from: '@ripple-ts/compat-react',
-			factory: 'createReactCompat',
+		expect(config.middlewares).toHaveLength(1);
+		expect(config.platform.env).toEqual({
+			API_URL: 'https://example.com',
 		});
+		expect(config.server.trustProxy).toBe(true);
 	});
 
-	it('normalizes imported compat factories to descriptors', () => {
+	it('preserves build options', () => {
 		const config = resolveRippleConfig({
-			router: {
-				routes: [],
-			},
-			compat: {
-				react: fake_compat_factory,
+			build: {
+				outDir: 'build',
+				minify: true,
+				target: 'es2022',
 			},
 		});
 
-		expect(config.compat.react).toEqual({
-			from: '@ripple-ts/compat-react',
-			factory: 'createReactCompat',
+		expect(config.build).toEqual({
+			outDir: 'build',
+			minify: true,
+			target: 'es2022',
 		});
 	});
 
-	it('normalizes invoked compat entries to descriptors', () => {
-		const config = resolveRippleConfig({
-			router: {
-				routes: [],
-			},
-			compat: {
-				react: fake_compat_factory(),
-			},
-		});
-
-		expect(config.compat.react).toEqual({
-			from: '@ripple-ts/compat-react',
-			factory: 'createReactCompat',
-		});
+	it('throws for invalid routes', () => {
+		expect(() =>
+			resolveRippleConfig({
+				router: {
+					routes: /** @type {any} */ ('/'),
+				},
+			}),
+		).toThrow('router.routes must be an array');
 	});
 });

package/types/index.d.ts

@@ -1,15 +1,17 @@
 import type { ExtendedEventOptions } from '@tsrx/core/types';
+export type { RefValue } from '@tsrx/core/runtime/ref';
 export type { AddEventOptions, AddEventObject, ExtendedEventOptions } from '@tsrx/core/types';
 
-export type Component<T = Record<string, any>> = (props: T) => void;
+export type Component<T = Record<string, any>> = (props: T) => void | TSRXElement;
 
 declare const TSRX_ELEMENT: unique symbol;
 declare const REF_KEY: unique symbol;
 export type RefKey = typeof REF_KEY;
 
-export type TSRXElement = {
+export type TSRXElement<Tag = any> = {
 	readonly render: Function;
 	readonly [TSRX_ELEMENT]: true;
+	readonly __tag?: Tag;
 };
 
 /** Type for implicit children fragments rendered with `{children}`. */
@@ -25,6 +27,29 @@ export function tsrx_element(render: Function): TSRXElement;
 
 export function Fragment(props: FragmentProps): TSRXElement;
 
+type DynamicIntrinsicElements = JSX.IntrinsicElements;
+export type DynamicElementType = keyof DynamicIntrinsicElements | Component<any> | (string & {});
+type UnwrapTracked<T> = T extends Tracked<infer V> ? V : T;
+type DynamicTarget<T> = Exclude<UnwrapTracked<T>, null | undefined | false>;
+type DynamicComponentProps<T> = [T] extends [never]
+	? Props
+	: T extends Component<infer P>
+		? Omit<P, 'is'>
+		: T extends keyof DynamicIntrinsicElements
+			? DynamicIntrinsicElements[T]
+			: Props;
+export type DynamicProps<T> = Expand<
+	{
+		is: T;
+	} & DynamicComponentProps<DynamicTarget<NoInfer<T>>>
+>;
+
+export function Dynamic<T>(
+	props: {
+		is: T;
+	} & DynamicComponentProps<DynamicTarget<NoInfer<T>>>,
+): TSRXElement;
+
 export function mount(
 	component: Component,
 	options: { target: HTMLElement; props?: Record<string, any>; rootBoundary?: RootBoundaryOptions },
@@ -173,8 +198,8 @@ interface TrackedBase<V> {
 	'#v': V;
 	value: V;
 }
-// Augment Tracked to be callable when V is a Component
-// This allows <@Something /> to work in JSX when Something is Tracked<Component>
+// Augment Tracked to be callable when V is a Component.
+// This allows tracked component values to continue flowing through JSX checks.
 interface TrackedCallable<V> {
 	(props: V extends Component<infer P> ? P : never): V extends Component ? void : never;
 }

package/src/runtime/internal/client/compat.js

@@ -1,40 +0,0 @@
-/** @import { CompatApi } from '#client' */
-
-import { ROOT_BLOCK } from './constants.js';
-import { active_block } from './runtime.js';
-
-/**
- * @param {string} kind
- * @returns {CompatApi | null}
- */
-function get_compat_from_root(kind) {
-	var current = active_block;
-
-	while (current !== null) {
-		if ((current.f & ROOT_BLOCK) !== 0) {
-			var api = current.s.compat[kind];
-
-			if (api != null) {
-				return api;
-			}
-		}
-		current = current.p;
-	}
-
-	return null;
-}
-
-/**
- * @param {string} kind
- * @param {Node} node
- * @param {() => JSX.Element[]} children_fn
- */
-export function tsx_compat(kind, node, children_fn) {
-	var compat = get_compat_from_root(kind);
-
-	if (compat == null) {
-		throw new Error(`No compat API found for kind "${kind}"`);
-	}
-
-	compat.createComponent(node, children_fn);
-}

package/tests/utils/compiler-compat-config.test.js

@@ -1,38 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { compile } from '@tsrx/ripple';
-
-const source = `
-function App() { return <>
-	<tsx:react>
-		<div className="react-content">{'Hello'}</div>
-	</tsx:react>
-</>; }
-`;
-
-describe('compiler tsx compat configuration', () => {
-	it('allows tsx compat when no compat config is provided', () => {
-		expect(() =>
-			compile(source, '/src/App.tsrx', {
-				mode: 'client',
-			}),
-		).not.toThrow();
-	});
-
-	it('throws when tsx compat kind is not configured', () => {
-		expect(() =>
-			compile(source, '/src/App.tsrx', {
-				mode: 'client',
-				compat_kinds: [],
-			}),
-		).toThrow('<tsx:react> requires "react" compat to be configured in ripple.config.ts.');
-	});
-
-	it('allows tsx compat kinds that are configured', () => {
-		expect(() =>
-			compile(source, '/src/App.tsrx', {
-				mode: 'client',
-				compat_kinds: ['react'],
-			}),
-		).not.toThrow();
-	});
-});