wip: initial components

Author: 43081j

packages/jsx/jsx-runtime.d.ts

@@ -1 +1 @@
-export { jsx, jsxDEV } from './dist/index.mjs';
+export * from './dist/index.mjs';

packages/jsx/jsx-runtime.js

@@ -1 +1 @@
-export { jsx, jsxDEV } from './dist/index.mjs';
+export * from './dist/index.mjs';

packages/jsx/package.json

@@ -57,6 +57,7 @@
   },
   "devDependencies": {
     "vitest": "^3.1.1",
+    "vitest-ansi-serializer": "^0.1.2",
     "@clack/test-utils": "workspace:*"
   }
 }

packages/jsx/src/components/confirm.ts

@@ -0,0 +1,8 @@
+import type { ConfirmOptions } from '@clack/prompts';
+import { confirm } from '@clack/prompts';
+
+export type ConfirmProps = ConfirmOptions;
+
+export function Confirm(props: ConfirmProps): ReturnType<typeof confirm> {
+	return confirm(props);
+}

packages/jsx/src/components/note.ts

@@ -0,0 +1,31 @@
+import type { NoteOptions } from '@clack/prompts';
+import { isCancel, note } from '@clack/prompts';
+import type { JSX } from '../types.js';
+import { resolveChildren } from '../utils.js';
+
+export interface NoteProps extends NoteOptions {
+	children?: JSX.Element[] | JSX.Element | string;
+	message?: string;
+	title?: string;
+}
+
+export async function Note(props: NoteProps): Promise<void> {
+	let message = '';
+
+	if (props.children) {
+		const messages: string[] = [];
+		const children = await resolveChildren(props.children);
+		for (const child of children) {
+			// TODO (43081j): handle cancelling of children
+			if (isCancel(child)) {
+				continue;
+			}
+			messages.push(String(child));
+		}
+		message = messages.join('\n');
+	} else if (props.message) {
+		message = props.message;
+	}
+
+	note(message, props.title, props);
+}

packages/jsx/src/components/option.ts

@@ -0,0 +1,31 @@
+import { type Option, isCancel } from '@clack/prompts';
+import type { JSX } from '../types.js';
+import { resolveChildren } from '../utils.js';
+
+export interface OptionProps {
+	value: unknown;
+	children?: JSX.Element | JSX.Element[] | string;
+}
+
+export async function Option(props: OptionProps): Promise<Option<unknown>> {
+	let label = '';
+	if (props.children) {
+		const children = await resolveChildren(props.children);
+		const childStrings: string[] = [];
+
+		for (const child of children) {
+			if (isCancel(child)) {
+				continue;
+			}
+			childStrings.push(String(child));
+		}
+
+		label = childStrings.join('\n');
+	} else {
+		label = String(props.value);
+	}
+	return {
+		value: props.value,
+		label,
+	};
+}

packages/jsx/src/components/password.ts

@@ -0,0 +1,8 @@
+import type { PasswordOptions } from '@clack/prompts';
+import { password } from '@clack/prompts';
+
+export type PasswordProps = PasswordOptions;
+
+export function Password(props: PasswordProps): ReturnType<typeof password> {
+	return password(props);
+}

packages/jsx/src/components/select.ts

@@ -0,0 +1,35 @@
+import type { Option, SelectOptions } from '@clack/prompts';
+import { select } from '@clack/prompts';
+import type { JSX } from '../types.js';
+import { resolveChildren } from '../utils.js';
+
+export interface SelectProps extends Omit<SelectOptions<unknown>, 'options'> {
+	children: JSX.Element[] | JSX.Element;
+}
+
+const isOptionLike = (obj: unknown): obj is Option<unknown> => {
+	return (
+		obj !== null &&
+		typeof obj === 'object' &&
+		Object.hasOwnProperty.call(obj, 'label') &&
+		Object.hasOwnProperty.call(obj, 'value') &&
+		typeof (obj as { label: string }).label === 'string'
+	);
+};
+
+export async function Select(props: SelectProps): ReturnType<typeof select> {
+	const { children, ...opts } = props;
+	const options: Option<unknown>[] = [];
+	const resolvedChildren = await resolveChildren(props.children);
+
+	for (const child of resolvedChildren) {
+		if (isOptionLike(child)) {
+			options.push(child);
+		}
+	}
+
+	return select({
+		...opts,
+		options,
+	});
+}

packages/jsx/src/components/text.ts

@@ -0,0 +1,8 @@
+import type { TextOptions } from '@clack/prompts';
+import { text } from '@clack/prompts';
+
+export type TextProps = TextOptions;
+
+export function Text(props: TextProps): ReturnType<typeof text> {
+	return text(props);
+}

packages/jsx/src/index.ts

@@ -1,37 +1,46 @@
-import type { ConfirmOptions } from '@clack/prompts';
-import { confirm } from '@clack/prompts';
-
-namespace JSX {
-	export interface IntrinsicElements {
-	}
-
-	export type Element = Promise<unknown>;
-}
+import { Confirm, type ConfirmProps } from './components/confirm.js';
+import { Note, type NoteProps } from './components/note.js';
+import { Option, type OptionProps } from './components/option.js';
+import { Password, type PasswordProps } from './components/password.js';
+import { Select, type SelectProps } from './components/select.js';
+import { Text, type TextProps } from './components/text.js';
+import type { JSX } from './types.js';
 
 export type { JSX };
+export {
+	Confirm,
+	type ConfirmProps,
+	Note,
+	type NoteProps,
+	Text,
+	type TextProps,
+	Password,
+	type PasswordProps,
+	Option,
+	type OptionProps,
+	Select,
+	type SelectProps,
+};
 
-export function Confirm(props: ConfirmOptions): ReturnType<typeof confirm> {
-	return confirm(props);
+export function Fragment(props: { children: JSX.Element | JSX.Element[] }): JSX.Element {
+	return Promise.resolve(props.children);
 }
 
 export type Component =
-	| typeof Confirm;
+	| typeof Confirm
+	| typeof Note
+	| typeof Text
+	| typeof Password
+	| typeof Option
+	| typeof Select;
 
 function jsx<T extends keyof JSX.IntrinsicElements>(
 	tag: T,
 	props: JSX.IntrinsicElements[T],
 	_key?: string
 ): JSX.Element;
-function jsx<T extends Component>(
-	fn: T,
-	props: Parameters<T>[0],
-	_key?: string
-): JSX.Element;
-function jsx(
-	tagOrFn: string | Component,
-	props: unknown,
-	_key?: string
-): JSX.Element {
+function jsx<T extends Component>(fn: T, props: Parameters<T>[0], _key?: string): JSX.Element;
+function jsx(tagOrFn: string | Component, props: unknown, _key?: string): JSX.Element {
 	if (typeof tagOrFn === 'function') {
 		return (tagOrFn as (props: unknown) => JSX.Element)(props);
 	}