feat: add jsx package

examples/basic/spinner-cancel-advanced.ts

@@ -81,7 +81,7 @@ async function main() {
 			} catch (error) {
 				// Handle errors but continue if not cancelled
 				if (!processSpinner.isCancelled) {
-					p.note(`Error processing ${language}: ${error.message}`, 'Error');
+					p.note(`Error processing ${language}: ${(error as Error).message}`, 'Error');
 				}
 			}
 		}
@@ -134,7 +134,7 @@ async function main() {
 					}
 				} catch (error) {
 					if (!finalSpinner.isCancelled) {
-						finalSpinner.stop(`Error during ${action}: ${error.message}`);
+						finalSpinner.stop(`Error during ${action}: ${(error as Error).message}`);
 					}
 				}
 			}

examples/basic/text-validation.ts

@@ -9,7 +9,7 @@ async function main() {
 		message: 'Enter your name (letters and spaces only)',
 		initialValue: 'John123', // Invalid initial value with numbers
 		validate: (value) => {
-			if (!/^[a-zA-Z\s]+$/.test(value)) return 'Name can only contain letters and spaces';
+			if (!value || !/^[a-zA-Z\s]+$/.test(value)) return 'Name can only contain letters and spaces';
 			return undefined;
 		},
 	});
@@ -25,7 +25,7 @@ async function main() {
 		message: 'Enter another name (letters and spaces only)',
 		initialValue: 'John Doe', // Valid initial value
 		validate: (value) => {
-			if (!/^[a-zA-Z\s]+$/.test(value)) return 'Name can only contain letters and spaces';
+			if (!value || !/^[a-zA-Z\s]+$/.test(value)) return 'Name can only contain letters and spaces';
 			return undefined;
 		},
 	});

package.json

@@ -9,6 +9,7 @@
     "dev": "pnpm --filter @example/changesets run start",
     "format": "biome check --write",
     "lint": "biome lint --write --unsafe",
+    "typecheck": "pnpm -r exec tsc --noEmit",
     "types": "biome lint --write --unsafe",
     "deps": "pnpm exec knip --production",
     "test": "pnpm --color -r run test",

packages/core/tsconfig.json

@@ -1,3 +1,4 @@
 {
-  "extends": "../../tsconfig.json"
+  "extends": "../../tsconfig.json",
+  "include": ["./src", "./test"]
 }

packages/jsx/CHANGELOG.md

@@ -0,0 +1,2 @@
+# @clack/core
+

packages/jsx/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) Bombshell Maintainers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

packages/jsx/README.md

@@ -0,0 +1,18 @@
+# `@clack/jsx`
+
+This package contains JSX support for clack, allowing you to define your
+prompts declaratively.
+
+Each `Prompt` can be rendered as if it were a component:
+
+```tsx
+import {Confirm} from '@clack/jsx';
+
+const p = (<Confirm message="yes?"></Confirm>);
+
+const name = await p;
+
+if (isCancel(name)) {
+  process.exit(0);
+}
+```

packages/jsx/build.config.ts

@@ -0,0 +1,7 @@
+import { defineBuildConfig } from 'unbuild';
+
+// @see https://github.com/unjs/unbuild
+export default defineBuildConfig({
+	preset: '../../build.preset',
+	entries: ['src/index'],
+});

packages/jsx/jsx-runtime.d.ts

@@ -0,0 +1 @@
+export * from './dist/index.mjs';

packages/jsx/jsx-runtime.js

@@ -0,0 +1 @@
+export * from './dist/index.mjs';

packages/jsx/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@clack/jsx",
+  "version": "1.0.0-alpha.1",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "./jsx-runtime": "./jsx-runtime.js",
+    "./jsx-dev-runtime": "./jsx-runtime.js",
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.mts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bombshell-dev/clack.git",
+    "directory": "packages/jsx"
+  },
+  "bugs": {
+    "url": "https://github.com/bombshell-dev/clack/issues"
+  },
+  "homepage": "https://github.com/bombshell-dev/clack/tree/main/packages/jsx#readme",
+  "files": ["dist", "CHANGELOG.md"],
+  "keywords": [
+    "ask",
+    "clack",
+    "cli",
+    "command-line",
+    "command",
+    "input",
+    "interact",
+    "interface",
+    "menu",
+    "prompt",
+    "prompts",
+    "stdin",
+    "ui",
+    "jsx",
+    "ink"
+  ],
+  "author": {
+    "name": "James Garbutt",
+    "url": "https://github.com/43081j"
+  },
+  "license": "MIT",
+  "packageManager": "[email protected]",
+  "scripts": {
+    "build": "unbuild",
+    "prepack": "pnpm build",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@clack/prompts": "workspace:*"
+  },
+  "devDependencies": {
+    "vitest": "^3.1.1",
+    "vitest-ansi-serializer": "^0.1.2",
+    "@clack/test-utils": "workspace:*"
+  }
+}

packages/jsx/src/components/confirm.ts

@@ -0,0 +1,16 @@
+import type { ConfirmOptions } from '@clack/prompts';
+import { confirm } from '@clack/prompts';
+import type { JSX } from '../types.js';
+
+export type ConfirmProps = ConfirmOptions;
+
+export function Confirm(props: ConfirmProps): JSX.Element {
+	return {
+		render: (options) =>
+			confirm({
+				input: options?.input,
+				output: options?.output,
+				...props,
+			}),
+	};
+}

packages/jsx/src/components/field.ts

@@ -0,0 +1,43 @@
+import { isCancel } from '@clack/prompts';
+import type { JSX } from '../types.js';
+import { resolveChildren } from '../utils.js';
+
+export interface FieldResult {
+	name: PropertyKey;
+	value: unknown;
+}
+
+export interface FieldProps {
+	name: PropertyKey;
+	children?: JSX.Element | JSX.Element[] | string;
+}
+
+export function Field(props: FieldProps): JSX.Element {
+	return {
+		render: async (options) => {
+			let value: unknown = undefined;
+
+			if (props.children) {
+				const resolvedChildren = await resolveChildren(props.children, options);
+				const valueArr: unknown[] = [];
+
+				for (const child of resolvedChildren) {
+					if (!isCancel(child)) {
+						valueArr.push(child);
+					}
+				}
+
+				if (valueArr.length === 1) {
+					value = valueArr[0];
+				} else {
+					value = valueArr;
+				}
+			}
+
+			return {
+				name: props.name,
+				value,
+			};
+		},
+	};
+}

packages/jsx/src/components/form.ts

@@ -0,0 +1,35 @@
+import { isCancel } from '@clack/prompts';
+import type { JSX } from '../types.js';
+import { resolveChildren } from '../utils.js';
+
+export interface FormProps {
+	children?: JSX.Element | JSX.Element[] | string;
+}
+
+function isChildLike(child: unknown): child is { name: PropertyKey; value: unknown } {
+	return typeof child === 'object' && child !== null && 'name' in child && 'value' in child;
+}
+
+export function Form(props: FormProps): JSX.Element {
+	return {
+		render: async (options) => {
+			const results: Record<PropertyKey, unknown> = {};
+
+			if (props.children) {
+				const resolvedChildren = await resolveChildren(props.children, options);
+
+				for (const child of resolvedChildren) {
+					if (isCancel(child)) {
+						continue;
+					}
+
+					if (isChildLike(child)) {
+						results[child.name] = child.value;
+					}
+				}
+			}
+
+			return results;
+		},
+	};
+}

packages/jsx/src/components/note.ts

@@ -0,0 +1,39 @@
+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 function Note(props: NoteProps): JSX.Element {
+	return {
+		render: async (options) => {
+			let message = '';
+
+			if (props.children) {
+				const messages: string[] = [];
+				const children = await resolveChildren(props.children, options);
+				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, {
+				input: options?.input,
+				output: options?.output,
+				...props,
+			});
+		},
+	};
+}

packages/jsx/src/components/option.ts

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

packages/jsx/src/components/password.ts

@@ -0,0 +1,16 @@
+import type { PasswordOptions } from '@clack/prompts';
+import { password } from '@clack/prompts';
+import type { JSX } from '../types.js';
+
+export type PasswordProps = PasswordOptions;
+
+export function Password(props: PasswordProps): JSX.Element {
+	return {
+		render: (options) =>
+			password({
+				input: options?.input,
+				output: options?.output,
+				...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 | string;
+}
+
+const isOptionLike = (obj: unknown): obj is Option<unknown> => {
+	return obj !== null && typeof obj === 'object' && Object.hasOwnProperty.call(obj, 'value');
+};
+
+export function Select(props: SelectProps): JSX.Element {
+	return {
+		render: async (renderOptions) => {
+			const { children, ...opts } = props;
+			const options: Option<unknown>[] = [];
+			const resolvedChildren = await resolveChildren(props.children, renderOptions);
+
+			for (const child of resolvedChildren) {
+				if (isOptionLike(child)) {
+					options.push(child);
+				}
+			}
+
+			return select({
+				input: renderOptions?.input,
+				output: renderOptions?.output,
+				...opts,
+				options,
+			});
+		},
+	};
+}