diff --git a/examples/basic/spinner-cancel-advanced.ts b/examples/basic/spinner-cancel-advanced.ts index cbf0927d..6cb9a52a 100644 --- a/examples/basic/spinner-cancel-advanced.ts +++ b/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}`); } } } diff --git a/examples/basic/text-validation.ts b/examples/basic/text-validation.ts index 9a637c68..7b928e4c 100644 --- a/examples/basic/text-validation.ts +++ b/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; }, }); diff --git a/package.json b/package.json index 39950050..30bfcd19 100644 --- a/package.json +++ b/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", diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json index 4082f16a..33e1aaf3 100644 --- a/packages/core/tsconfig.json +++ b/packages/core/tsconfig.json @@ -1,3 +1,4 @@ { - "extends": "../../tsconfig.json" + "extends": "../../tsconfig.json", + "include": ["./src", "./test"] } diff --git a/packages/jsx/CHANGELOG.md b/packages/jsx/CHANGELOG.md new file mode 100644 index 00000000..b3779c2a --- /dev/null +++ b/packages/jsx/CHANGELOG.md @@ -0,0 +1,2 @@ +# @clack/core + diff --git a/packages/jsx/LICENSE b/packages/jsx/LICENSE new file mode 100644 index 00000000..885bb86b --- /dev/null +++ b/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. diff --git a/packages/jsx/README.md b/packages/jsx/README.md new file mode 100644 index 00000000..a3c9be3b --- /dev/null +++ b/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 = (); + +const name = await p; + +if (isCancel(name)) { + process.exit(0); +} +``` diff --git a/packages/jsx/build.config.ts b/packages/jsx/build.config.ts new file mode 100644 index 00000000..8bd1ad27 --- /dev/null +++ b/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'], +}); diff --git a/packages/jsx/jsx-runtime.d.ts b/packages/jsx/jsx-runtime.d.ts new file mode 100644 index 00000000..98bc230b --- /dev/null +++ b/packages/jsx/jsx-runtime.d.ts @@ -0,0 +1 @@ +export * from './dist/index.mjs'; diff --git a/packages/jsx/jsx-runtime.js b/packages/jsx/jsx-runtime.js new file mode 100644 index 00000000..98bc230b --- /dev/null +++ b/packages/jsx/jsx-runtime.js @@ -0,0 +1 @@ +export * from './dist/index.mjs'; diff --git a/packages/jsx/package.json b/packages/jsx/package.json new file mode 100644 index 00000000..bd6122b1 --- /dev/null +++ b/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": "pnpm@9.14.2", + "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:*" + } +} diff --git a/packages/jsx/src/components/confirm.ts b/packages/jsx/src/components/confirm.ts new file mode 100644 index 00000000..0c6bd135 --- /dev/null +++ b/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, + }), + }; +} diff --git a/packages/jsx/src/components/field.ts b/packages/jsx/src/components/field.ts new file mode 100644 index 00000000..e68b1460 --- /dev/null +++ b/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, + }; + }, + }; +} diff --git a/packages/jsx/src/components/form.ts b/packages/jsx/src/components/form.ts new file mode 100644 index 00000000..49db85bf --- /dev/null +++ b/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 = {}; + + 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; + }, + }; +} diff --git a/packages/jsx/src/components/note.ts b/packages/jsx/src/components/note.ts new file mode 100644 index 00000000..a48258f5 --- /dev/null +++ b/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, + }); + }, + }; +} diff --git a/packages/jsx/src/components/option.ts b/packages/jsx/src/components/option.ts new file mode 100644 index 00000000..cbec2462 --- /dev/null +++ b/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 { + value: T; + hint?: string; + children?: JSX.Element | JSX.Element[] | string; +} + +export function Option(props: OptionProps): 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; + } + + return opts as PromptOption; + }, + }; +} diff --git a/packages/jsx/src/components/password.ts b/packages/jsx/src/components/password.ts new file mode 100644 index 00000000..60c532c8 --- /dev/null +++ b/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, + }), + }; +} diff --git a/packages/jsx/src/components/select.ts b/packages/jsx/src/components/select.ts new file mode 100644 index 00000000..612c7e75 --- /dev/null +++ b/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, 'options'> { + children: JSX.Element[] | JSX.Element | string; +} + +const isOptionLike = (obj: unknown): obj is Option => { + 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[] = []; + 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, + }); + }, + }; +} diff --git a/packages/jsx/src/components/text.ts b/packages/jsx/src/components/text.ts new file mode 100644 index 00000000..7f800bbb --- /dev/null +++ b/packages/jsx/src/components/text.ts @@ -0,0 +1,16 @@ +import type { TextOptions } from '@clack/prompts'; +import { text } from '@clack/prompts'; +import type { JSX } from '../types.js'; + +export type TextProps = TextOptions; + +export function Text(props: TextProps): JSX.Element { + return { + render: (options) => + text({ + input: options?.input, + output: options?.output, + ...props, + }), + }; +} diff --git a/packages/jsx/src/index.ts b/packages/jsx/src/index.ts new file mode 100644 index 00000000..520255e5 --- /dev/null +++ b/packages/jsx/src/index.ts @@ -0,0 +1,63 @@ +import { Confirm, type ConfirmProps } from './components/confirm.js'; +import { Field, type FieldProps } from './components/field.js'; +import { Form, type FormProps } from './components/form.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, RenderFunction, RenderOptions } 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, + Field, + type FieldProps, + Form, + type FormProps, +}; + +export function Fragment(props: { children: JSX.Element | JSX.Element[] }): JSX.Element { + return { + render: () => Promise.resolve(props.children), + }; +} + +export type Component = (props: never) => JSX.Element; + +function jsx( + tag: T, + props: JSX.IntrinsicElements[T], + _key?: string +): JSX.Element; +function jsx(fn: T, props: Parameters[0], _key?: string): JSX.Element; +function jsx(tagOrFn: string | Component, props: unknown, _key?: string): JSX.Element { + let render: RenderFunction; + if (typeof tagOrFn === 'function') { + const renderFn = (tagOrFn as (props: unknown) => JSX.Element)(props); + render = (options) => renderFn.render(options); + } else { + render = () => Promise.resolve(null); + } + return { + render, + }; +} + +export { jsx }; +export const jsxDEV = jsx; + +export async function render(node: JSX.Element, options?: RenderOptions): Promise { + await node.render(options); +} diff --git a/packages/jsx/src/types.ts b/packages/jsx/src/types.ts new file mode 100644 index 00000000..60acc040 --- /dev/null +++ b/packages/jsx/src/types.ts @@ -0,0 +1,15 @@ +import type { CommonOptions } from '@clack/prompts'; + +export interface RenderOptions extends CommonOptions {} + +export type RenderFunction = (options?: RenderOptions) => Promise; + +namespace JSX { + export type IntrinsicElements = never; + + export type Element = { + render: RenderFunction; + }; +} + +export type { JSX }; diff --git a/packages/jsx/src/utils.ts b/packages/jsx/src/utils.ts new file mode 100644 index 00000000..b33cc2c8 --- /dev/null +++ b/packages/jsx/src/utils.ts @@ -0,0 +1,17 @@ +import type { JSX, RenderOptions } from './types.js'; + +export async function resolveChildren( + children: JSX.Element[] | JSX.Element | string, + options?: RenderOptions +): Promise { + const arr = Array.isArray(children) ? children : [children]; + const results: unknown[] = []; + + for (const child of arr) { + const result = typeof child === 'string' ? child : await child.render(options); + + results.push(result); + } + + return results; +} diff --git a/packages/jsx/test/components/__snapshots__/confirm.test.tsx.snap b/packages/jsx/test/components/__snapshots__/confirm.test.tsx.snap new file mode 100644 index 00000000..896f4a74 --- /dev/null +++ b/packages/jsx/test/components/__snapshots__/confirm.test.tsx.snap @@ -0,0 +1,58 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Confirm > can set active text 1`] = ` +[ + "", + "โ”‚ +โ—† foo? +โ”‚ โ— DO IT / โ—‹ No +โ”” +", + "", + "", + "", + "โ—‡ foo? +โ”‚ DO IT", + " +", + "", +] +`; + +exports[`Confirm > can set inactive text 1`] = ` +[ + "", + "โ”‚ +โ—† foo? +โ”‚ โ— Yes / โ—‹ DONT DO IT +โ”” +", + "", + "", + "", + "โ—‡ foo? +โ”‚ Yes", + " +", + "", +] +`; + +exports[`Confirm > can set message 1`] = ` +[ + "", + "โ”‚ +โ—† foo? +โ”‚ โ— Yes / โ—‹ No +โ”” +", + "", + "", + "", + "โ—‡ foo? +โ”‚ Yes", + " +", + "", +] +`; diff --git a/packages/jsx/test/components/__snapshots__/field.test.tsx.snap b/packages/jsx/test/components/__snapshots__/field.test.tsx.snap new file mode 100644 index 00000000..89dc6e88 --- /dev/null +++ b/packages/jsx/test/components/__snapshots__/field.test.tsx.snap @@ -0,0 +1,73 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Field > renders and resolves children 1`] = ` +[ + "", + "โ”‚ +โ—† enter some text +โ”‚ _ +โ”” +", + "", + "", + "", + "โ”‚ aโ–ˆ", + "", + "", + "", + "", + "โ”‚ abโ–ˆ", + "", + "", + "", + "", + "โ—‡ enter some text +โ”‚ ab", + " +", + "", +] +`; + +exports[`Field > resolves multiple children into array 1`] = ` +[ + "", + "โ”‚ +โ—† enter some text +โ”‚ _ +โ”” +", + "", + "", + "", + "โ”‚ aโ–ˆ", + "", + "", + "", + "", + "โ—‡ enter some text +โ”‚ a", + " +", + "", + "", + "โ”‚ +โ—† enter some more text +โ”‚ _ +โ”” +", + "", + "", + "", + "โ”‚ bโ–ˆ", + "", + "", + "", + "", + "โ—‡ enter some more text +โ”‚ b", + " +", + "", +] +`; diff --git a/packages/jsx/test/components/__snapshots__/form.test.tsx.snap b/packages/jsx/test/components/__snapshots__/form.test.tsx.snap new file mode 100644 index 00000000..cbf1ee1c --- /dev/null +++ b/packages/jsx/test/components/__snapshots__/form.test.tsx.snap @@ -0,0 +1,73 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Form > renders and resolves multiple fields 1`] = ` +[ + "", + "โ”‚ +โ—† enter some text +โ”‚ _ +โ”” +", + "", + "", + "", + "โ”‚ aโ–ˆ", + "", + "", + "", + "", + "โ—‡ enter some text +โ”‚ a", + " +", + "", + "", + "โ”‚ +โ—† enter some other text +โ”‚ _ +โ”” +", + "", + "", + "", + "โ”‚ bโ–ˆ", + "", + "", + "", + "", + "โ—‡ enter some other text +โ”‚ b", + " +", + "", +] +`; + +exports[`Form > renders and resolves object 1`] = ` +[ + "", + "โ”‚ +โ—† enter some text +โ”‚ _ +โ”” +", + "", + "", + "", + "โ”‚ aโ–ˆ", + "", + "", + "", + "", + "โ”‚ abโ–ˆ", + "", + "", + "", + "", + "โ—‡ enter some text +โ”‚ ab", + " +", + "", +] +`; diff --git a/packages/jsx/test/components/__snapshots__/note.test.tsx.snap b/packages/jsx/test/components/__snapshots__/note.test.tsx.snap new file mode 100644 index 00000000..da2ac26f --- /dev/null +++ b/packages/jsx/test/components/__snapshots__/note.test.tsx.snap @@ -0,0 +1,92 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Note > can render children as message 1`] = ` +[ + "โ”‚ +โ—‡  โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ +โ”‚ โ”‚ +โ”‚ a message โ”‚ +โ”‚ โ”‚ +โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ +", +] +`; + +exports[`Note > can render complex results as message 1`] = ` +[ + "", + "โ”‚ +โ—† say yes +โ”‚ โ— Yes / โ—‹ No +โ”” +", + "", + "", + "", + "โ—‡ say yes +โ”‚ Yes", + " +", + "", + "โ”‚ +โ—‡  โ”€โ”€โ”€โ”€โ”€โ•ฎ +โ”‚ โ”‚ +โ”‚ true โ”‚ +โ”‚ โ”‚ +โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ +", +] +`; + +exports[`Note > can render multiple children as message 1`] = ` +[ + "", + "โ”‚ +โ—† say yes +โ”‚ โ— Yes / โ—‹ No +โ”” +", + "", + "", + "", + "โ—‡ say yes +โ”‚ Yes", + " +", + "", + "", + "โ”‚ +โ—† say yes again +โ”‚ โ— Yes / โ—‹ No +โ”” +", + "", + "", + "", + "โ—‡ say yes again +โ”‚ Yes", + " +", + "", + "โ”‚ +โ—‡  โ”€โ”€โ”€โ”€โ”€โ•ฎ +โ”‚ โ”‚ +โ”‚ true โ”‚ +โ”‚ true โ”‚ +โ”‚ โ”‚ +โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ +", +] +`; + +exports[`Note > can render string message 1`] = ` +[ + "โ”‚ +โ—‡  โ”€โ”€โ”€โ”€โ•ฎ +โ”‚ โ”‚ +โ”‚ foo โ”‚ +โ”‚ โ”‚ +โ”œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ +", +] +`; diff --git a/packages/jsx/test/components/__snapshots__/password.test.tsx.snap b/packages/jsx/test/components/__snapshots__/password.test.tsx.snap new file mode 100644 index 00000000..ca36fd81 --- /dev/null +++ b/packages/jsx/test/components/__snapshots__/password.test.tsx.snap @@ -0,0 +1,78 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Password > can set custom mask 1`] = ` +[ + "", + "โ”‚ +โ—† foo +โ”‚ _ +โ”” +", + "", + "", + "", + "โ”‚ !_", + "", + "", + "", + "", + "โ”‚ !!_", + "", + "", + "", + "", + "โ—‡ foo +โ”‚ !!", + " +", + "", +] +`; + +exports[`Password > renders password input 1`] = ` +[ + "", + "โ”‚ +โ—† foo +โ”‚ _ +โ”” +", + "", + "", + "", + "โ—‡ foo +โ”‚", + " +", + "", +] +`; + +exports[`Password > renders user input 1`] = ` +[ + "", + "โ”‚ +โ—† foo +โ”‚ _ +โ”” +", + "", + "", + "", + "โ”‚ โ–ช_", + "", + "", + "", + "", + "โ”‚ โ–ชโ–ช_", + "", + "", + "", + "", + "โ—‡ foo +โ”‚ โ–ชโ–ช", + " +", + "", +] +`; diff --git a/packages/jsx/test/components/__snapshots__/select.test.tsx.snap b/packages/jsx/test/components/__snapshots__/select.test.tsx.snap new file mode 100644 index 00000000..f5e77f75 --- /dev/null +++ b/packages/jsx/test/components/__snapshots__/select.test.tsx.snap @@ -0,0 +1,61 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Select > renders options 1`] = ` +[ + "", + "โ”‚ +โ—† foo +โ”‚ โ— opt0 +โ”‚ โ—‹ opt1 +โ”” +", + "", + "", + "", + "โ—‡ foo +โ”‚ opt0", + " +", + "", +] +`; + +exports[`Select > renders options with hints 1`] = ` +[ + "", + "โ”‚ +โ—† foo +โ”‚ โ— Three o three (hint one) +โ”‚ โ—‹ Eight o eight +โ”” +", + "", + "", + "", + "โ—‡ foo +โ”‚ Three o three", + " +", + "", +] +`; + +exports[`Select > renders options with labels 1`] = ` +[ + "", + "โ”‚ +โ—† foo +โ”‚ โ— Three o three +โ”‚ โ—‹ Eight o eight +โ”” +", + "", + "", + "", + "โ—‡ foo +โ”‚ Three o three", + " +", + "", +] +`; diff --git a/packages/jsx/test/components/__snapshots__/text.test.tsx.snap b/packages/jsx/test/components/__snapshots__/text.test.tsx.snap new file mode 100644 index 00000000..72a9ace1 --- /dev/null +++ b/packages/jsx/test/components/__snapshots__/text.test.tsx.snap @@ -0,0 +1,77 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`Text > can set default value 1`] = ` +[ + "", + "โ”‚ +โ—† foo +โ”‚ _ +โ”” +", + "", + "", + "", + "โ—‡ foo +โ”‚ bar", + " +", + "", +] +`; + +exports[`Text > can set initial value 1`] = ` +[ + "", + "โ”‚ +โ—† foo +โ”‚ barโ–ˆ +โ”” +", + "", + "", + "", + "โ—‡ foo +โ”‚ bar", + " +", + "", +] +`; + +exports[`Text > can set placeholder 1`] = ` +[ + "", + "โ”‚ +โ—† foo +โ”‚ bar +โ”” +", + "", + "", + "", + "โ—‡ foo +โ”‚", + " +", + "", +] +`; + +exports[`Text > renders text input 1`] = ` +[ + "", + "โ”‚ +โ—† foo +โ”‚ _ +โ”” +", + "", + "", + "", + "โ—‡ foo +โ”‚", + " +", + "", +] +`; diff --git a/packages/jsx/test/components/confirm.test.tsx b/packages/jsx/test/components/confirm.test.tsx new file mode 100644 index 00000000..12d45c33 --- /dev/null +++ b/packages/jsx/test/components/confirm.test.tsx @@ -0,0 +1,40 @@ +import { MockReadable, MockWritable } from '@clack/test-utils'; +import { beforeEach, describe, expect, test } from 'vitest'; +import { Confirm } from '../../src/index.js'; + +describe('Confirm', () => { + let input: MockReadable; + let output: MockWritable; + + beforeEach(() => { + input = new MockReadable(); + output = new MockWritable(); + }); + + test('can set message', async () => { + const element = ; + const task = element.render({ input, output }); + input.emit('keypress', '', { name: 'return' }); + const result = await task; + expect(result).to.equal(true); + expect(output.buffer).toMatchSnapshot(); + }); + + test('can set active text', async () => { + const element = ; + const task = element.render({ input, output }); + input.emit('keypress', '', { name: 'return' }); + const result = await task; + expect(result).to.equal(true); + expect(output.buffer).toMatchSnapshot(); + }); + + test('can set inactive text', async () => { + const element = ; + const task = element.render({ input, output }); + input.emit('keypress', '', { name: 'return' }); + const result = await task; + expect(result).to.equal(true); + expect(output.buffer).toMatchSnapshot(); + }); +}); diff --git a/packages/jsx/test/components/field.test.tsx b/packages/jsx/test/components/field.test.tsx new file mode 100644 index 00000000..2d050e31 --- /dev/null +++ b/packages/jsx/test/components/field.test.tsx @@ -0,0 +1,58 @@ +import { MockReadable, MockWritable, nextTick } from '@clack/test-utils'; +import { beforeEach, describe, expect, test } from 'vitest'; +import { Field, Text } from '../../src/index.js'; + +describe('Field', () => { + let input: MockReadable; + let output: MockWritable; + + beforeEach(() => { + input = new MockReadable(); + output = new MockWritable(); + }); + + test('renders and resolves children', async () => { + const element = ( + + + + ); + const task = element.render({ input, output }); + + input.emit('keypress', 'a', { name: 'a' }); + input.emit('keypress', 'b', { name: 'b' }); + input.emit('keypress', '', { name: 'return' }); + + const result = await task; + + expect(result).to.deep.equal({ + name: 'foo', + value: 'ab', + }); + expect(output.buffer).toMatchSnapshot(); + }); + + test('resolves multiple children into array', async () => { + const element = ( + + + + + ); + const task = element.render({ input, output }); + + input.emit('keypress', 'a', { name: 'a' }); + input.emit('keypress', '', { name: 'return' }); + await nextTick(); + input.emit('keypress', 'b', { name: 'b' }); + input.emit('keypress', '', { name: 'return' }); + + const result = await task; + + expect(result).to.deep.equal({ + name: 'foo', + value: ['a', 'b'], + }); + expect(output.buffer).toMatchSnapshot(); + }); +}); diff --git a/packages/jsx/test/components/form.test.tsx b/packages/jsx/test/components/form.test.tsx new file mode 100644 index 00000000..b9844b1e --- /dev/null +++ b/packages/jsx/test/components/form.test.tsx @@ -0,0 +1,62 @@ +import { MockReadable, MockWritable, nextTick } from '@clack/test-utils'; +import { beforeEach, describe, expect, test } from 'vitest'; +import { Field, Form, Text } from '../../src/index.js'; + +describe('Form', () => { + let input: MockReadable; + let output: MockWritable; + + beforeEach(() => { + input = new MockReadable(); + output = new MockWritable(); + }); + + test('renders and resolves object', async () => { + const element = ( +
+ + + +
+ ); + const task = element.render({ input, output }); + + input.emit('keypress', 'a', { name: 'a' }); + input.emit('keypress', 'b', { name: 'b' }); + input.emit('keypress', '', { name: 'return' }); + + const result = await task; + + expect(result).to.deep.equal({ + foo: 'ab', + }); + expect(output.buffer).toMatchSnapshot(); + }); + test('renders and resolves multiple fields', async () => { + const element = ( +
+ + + + + + +
+ ); + const task = element.render({ input, output }); + + input.emit('keypress', 'a', { name: 'a' }); + input.emit('keypress', '', { name: 'return' }); + await nextTick(); + input.emit('keypress', 'b', { name: 'b' }); + input.emit('keypress', '', { name: 'return' }); + + const result = await task; + + expect(result).to.deep.equal({ + foo: 'a', + bar: 'b', + }); + expect(output.buffer).toMatchSnapshot(); + }); +}); diff --git a/packages/jsx/test/components/note.test.tsx b/packages/jsx/test/components/note.test.tsx new file mode 100644 index 00000000..19adad01 --- /dev/null +++ b/packages/jsx/test/components/note.test.tsx @@ -0,0 +1,58 @@ +import { MockReadable, MockWritable, nextTick } from '@clack/test-utils'; +import { beforeEach, describe, expect, test } from 'vitest'; +import { Confirm, Note } from '../../src/index.js'; + +describe('Note', () => { + let input: MockReadable; + let output: MockWritable; + + beforeEach(() => { + input = new MockReadable(); + output = new MockWritable(); + }); + + test('can render string message', async () => { + const element = ; + const task = element.render({ output }); + await task; + + expect(output.buffer).toMatchSnapshot(); + }); + + test('can render children as message', async () => { + const element = a message; + const task = element.render({ output }); + await task; + + expect(output.buffer).toMatchSnapshot(); + }); + + test('can render complex results as message', async () => { + const element = ( + + + + ); + const task = element.render({ input, output }); + input.emit('keypress', '', { name: 'return' }); + await task; + + expect(output.buffer).toMatchSnapshot(); + }); + + test('can render multiple children as message', async () => { + const element = ( + + + + + ); + const task = element.render({ input, output }); + input.emit('keypress', '', { name: 'return' }); + await nextTick(); + input.emit('keypress', '', { name: 'return' }); + await task; + + expect(output.buffer).toMatchSnapshot(); + }); +}); diff --git a/packages/jsx/test/components/password.test.tsx b/packages/jsx/test/components/password.test.tsx new file mode 100644 index 00000000..9ffdb20d --- /dev/null +++ b/packages/jsx/test/components/password.test.tsx @@ -0,0 +1,53 @@ +import { MockReadable, MockWritable } from '@clack/test-utils'; +import { beforeEach, describe, expect, test } from 'vitest'; +import { Password } from '../../src/index.js'; + +describe('Password', () => { + let input: MockReadable; + let output: MockWritable; + + beforeEach(() => { + input = new MockReadable(); + output = new MockWritable(); + }); + + test('renders password input', async () => { + const element = ; + const task = element.render({ input, output }); + + input.emit('keypress', '', { name: 'return' }); + + const result = await task; + + expect(result).to.equal(undefined); + expect(output.buffer).toMatchSnapshot(); + }); + + test('renders user input', async () => { + const element = ; + const task = element.render({ input, output }); + + input.emit('keypress', 'a', { name: 'a' }); + input.emit('keypress', 'b', { name: 'b' }); + input.emit('keypress', '', { name: 'return' }); + + const result = await task; + + expect(result).to.equal('ab'); + expect(output.buffer).toMatchSnapshot(); + }); + + test('can set custom mask', async () => { + const element = ; + const task = element.render({ input, output }); + + input.emit('keypress', 'a', { name: 'a' }); + input.emit('keypress', 'b', { name: 'b' }); + input.emit('keypress', '', { name: 'return' }); + + const result = await task; + + expect(result).to.equal('ab'); + expect(output.buffer).toMatchSnapshot(); + }); +}); diff --git a/packages/jsx/test/components/select.test.tsx b/packages/jsx/test/components/select.test.tsx new file mode 100644 index 00000000..c5e66717 --- /dev/null +++ b/packages/jsx/test/components/select.test.tsx @@ -0,0 +1,71 @@ +import { MockReadable, MockWritable, nextTick } from '@clack/test-utils'; +import { beforeEach, describe, expect, test } from 'vitest'; +import { Option, Select } from '../../src/index.js'; + +describe('Select', () => { + let input: MockReadable; + let output: MockWritable; + + beforeEach(() => { + input = new MockReadable(); + output = new MockWritable(); + }); + + test('renders options', async () => { + const element = ( + + ); + const task = element.render({ input, output }); + + await nextTick(); + input.emit('keypress', '', { name: 'return' }); + + const result = await task; + + expect(result).to.equal('opt0'); + expect(output.buffer).toMatchSnapshot(); + }); + + test('renders options with labels', async () => { + const element = ( + + ); + const task = element.render({ input, output }); + + await nextTick(); + input.emit('keypress', '', { name: 'return' }); + + const result = await task; + + expect(result).to.equal(303); + expect(output.buffer).toMatchSnapshot(); + }); + + test('renders options with hints', async () => { + const element = ( + + ); + const task = element.render({ input, output }); + + await nextTick(); + input.emit('keypress', '', { name: 'return' }); + + const result = await task; + + expect(result).to.equal(303); + expect(output.buffer).toMatchSnapshot(); + }); +}); diff --git a/packages/jsx/test/components/text.test.tsx b/packages/jsx/test/components/text.test.tsx new file mode 100644 index 00000000..dc0a5f37 --- /dev/null +++ b/packages/jsx/test/components/text.test.tsx @@ -0,0 +1,61 @@ +import { MockReadable, MockWritable } from '@clack/test-utils'; +import { beforeEach, describe, expect, test } from 'vitest'; +import { Text } from '../../src/index.js'; + +describe('Text', () => { + let input: MockReadable; + let output: MockWritable; + + beforeEach(() => { + input = new MockReadable(); + output = new MockWritable(); + }); + + test('renders text input', async () => { + const element = ; + const task = element.render({ input, output }); + + input.emit('keypress', '', { name: 'return' }); + + const result = await task; + + expect(result).to.equal(''); + expect(output.buffer).toMatchSnapshot(); + }); + + test('can set placeholder', async () => { + const element = ; + const task = element.render({ input, output }); + + input.emit('keypress', '', { name: 'return' }); + + const result = await task; + + expect(result).to.equal(''); + expect(output.buffer).toMatchSnapshot(); + }); + + test('can set default value', async () => { + const element = ; + const task = element.render({ input, output }); + + input.emit('keypress', '', { name: 'return' }); + + const result = await task; + + expect(result).to.equal('bar'); + expect(output.buffer).toMatchSnapshot(); + }); + + test('can set initial value', async () => { + const element = ; + const task = element.render({ input, output }); + + input.emit('keypress', '', { name: 'return' }); + + const result = await task; + + expect(result).to.equal('bar'); + expect(output.buffer).toMatchSnapshot(); + }); +}); diff --git a/packages/jsx/test/jsx.test.tsx b/packages/jsx/test/jsx.test.tsx new file mode 100644 index 00000000..34539b19 --- /dev/null +++ b/packages/jsx/test/jsx.test.tsx @@ -0,0 +1,37 @@ +import { MockReadable, MockWritable } from '@clack/test-utils'; +import { beforeEach, describe, expect, test } from 'vitest'; +import { Confirm, jsx } from '../src/index.js'; + +describe('jsx', () => { + let input: MockReadable; + let output: MockWritable; + + beforeEach(() => { + input = new MockReadable(); + output = new MockWritable(); + }); + + test('can render', async () => { + const element = jsx(Confirm, { + message: 'foo?', + }); + const task = element.render({ input, output }); + input.emit('keypress', '', { name: 'return' }); + const result = await task; + expect(result).to.equal(true); + }); + + test('can render JSX', async () => { + const element = ; + const task = element.render({ input, output }); + input.emit('keypress', '', { name: 'return' }); + const result = await task; + expect(result).to.equal(true); + }); + + test('unknown elements are null', async () => { + const element = jsx('unknown-nonsense' as never, {} as never); + const result = await element.render(); + expect(result).to.equal(null); + }); +}); diff --git a/packages/jsx/tsconfig.json b/packages/jsx/tsconfig.json new file mode 100644 index 00000000..4d69f21b --- /dev/null +++ b/packages/jsx/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "jsx": "react-jsx", + "jsxImportSource": "@clack/jsx" + }, + "include": ["./src", "./test"] +} diff --git a/packages/jsx/vitest.config.ts b/packages/jsx/vitest.config.ts new file mode 100644 index 00000000..bfd9650d --- /dev/null +++ b/packages/jsx/vitest.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vitest/config'; + +export default defineConfig({ + test: { + snapshotSerializers: ['vitest-ansi-serializer'], + }, +}); diff --git a/packages/prompts/test/password.test.ts b/packages/prompts/test/password.test.ts index 9c8c9b7e..3a5479d0 100644 --- a/packages/prompts/test/password.test.ts +++ b/packages/prompts/test/password.test.ts @@ -77,7 +77,7 @@ describe.each(['true', 'false'])('password (isCI = %s)', (isCI) => { const result = prompts.password({ message: 'foo', validate: (value) => { - if (value.length < 2) { + if (!value || value.length < 2) { return 'Password must be at least 2 characters'; } diff --git a/packages/prompts/tsconfig.json b/packages/prompts/tsconfig.json index 4082f16a..33e1aaf3 100644 --- a/packages/prompts/tsconfig.json +++ b/packages/prompts/tsconfig.json @@ -1,3 +1,4 @@ { - "extends": "../../tsconfig.json" + "extends": "../../tsconfig.json", + "include": ["./src", "./test"] } diff --git a/packages/test-utils/LICENSE b/packages/test-utils/LICENSE new file mode 100644 index 00000000..885bb86b --- /dev/null +++ b/packages/test-utils/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. diff --git a/packages/test-utils/README.md b/packages/test-utils/README.md new file mode 100644 index 00000000..722756f8 --- /dev/null +++ b/packages/test-utils/README.md @@ -0,0 +1,3 @@ +# `@clack/test-utils` + +A bunch of useful test utiltiies for use inside clack. diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json new file mode 100644 index 00000000..f422db68 --- /dev/null +++ b/packages/test-utils/package.json @@ -0,0 +1,40 @@ +{ + "name": "@clack/test-utils", + "private": true, + "version": "1.0.0-alpha.1", + "type": "module", + "main": "./dist/index.js", + "module": "./dist/index.js", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "default": "./dist/index.js" + }, + "./package.json": "./package.json" + }, + "types": "./dist/index.d.ts", + "repository": { + "type": "git", + "url": "git+https://github.com/bombshell-dev/clack.git", + "directory": "packages/test-utils" + }, + "bugs": { + "url": "https://github.com/bombshell-dev/clack/issues" + }, + "homepage": "https://github.com/bombshell-dev/clack/tree/main/packages/test-utils#readme", + "files": ["dist", "CHANGELOG.md"], + "author": { + "name": "James Garbutt", + "url": "https://github.com/43081j" + }, + "license": "MIT", + "packageManager": "pnpm@9.14.2", + "scripts": { + "build": "tsc", + "prepack": "pnpm build" + }, + "dependencies": { + }, + "devDependencies": { + } +} diff --git a/packages/test-utils/src/index.ts b/packages/test-utils/src/index.ts new file mode 100644 index 00000000..d4cfd577 --- /dev/null +++ b/packages/test-utils/src/index.ts @@ -0,0 +1,8 @@ +export { MockReadable } from './mock-readable.js'; +export { MockWritable } from './mock-writable.js'; + +export function nextTick(): Promise { + return new Promise((resolve) => { + setTimeout(resolve, 0); + }); +} diff --git a/packages/test-utils/src/mock-readable.ts b/packages/test-utils/src/mock-readable.ts new file mode 100644 index 00000000..b08e4879 --- /dev/null +++ b/packages/test-utils/src/mock-readable.ts @@ -0,0 +1,26 @@ +import { Readable } from 'node:stream'; + +export class MockReadable extends Readable { + protected _buffer: unknown[] | null = []; + + _read() { + if (this._buffer === null) { + this.push(null); + return; + } + + for (const val of this._buffer) { + this.push(val); + } + + this._buffer = []; + } + + pushValue(val: unknown): void { + this._buffer?.push(val); + } + + close(): void { + this._buffer = null; + } +} diff --git a/packages/test-utils/src/mock-writable.ts b/packages/test-utils/src/mock-writable.ts new file mode 100644 index 00000000..746b0a0d --- /dev/null +++ b/packages/test-utils/src/mock-writable.ts @@ -0,0 +1,14 @@ +import { Writable } from 'node:stream'; + +export class MockWritable extends Writable { + public buffer: string[] = []; + + _write( + chunk: any, + _encoding: BufferEncoding, + callback: (error?: Error | null | undefined) => void + ): void { + this.buffer.push(chunk.toString()); + callback(); + } +} diff --git a/packages/test-utils/tsconfig.json b/packages/test-utils/tsconfig.json new file mode 100644 index 00000000..e04a918e --- /dev/null +++ b/packages/test-utils/tsconfig.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "noEmit": false, + "declaration": true, + "outDir": "./dist" + }, + "include": ["./src"] +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d2ae3cb1..30d75fd7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -74,6 +74,22 @@ importers: specifier: ^8.1.0 version: 8.1.0 + packages/jsx: + dependencies: + '@clack/prompts': + specifier: workspace:* + version: link:../prompts + devDependencies: + '@clack/test-utils': + specifier: workspace:* + version: link:../test-utils + vitest: + specifier: ^3.1.1 + version: 3.1.1(@types/node@18.16.0) + vitest-ansi-serializer: + specifier: ^0.1.2 + version: 0.1.2(vitest@3.1.1(@types/node@18.16.0)) + packages/prompts: dependencies: '@clack/core': @@ -99,6 +115,8 @@ importers: specifier: ^0.1.2 version: 0.1.2(vitest@3.1.1(@types/node@18.16.0)) + packages/test-utils: {} + packages: '@ampproject/remapping@2.3.0': diff --git a/tsconfig.json b/tsconfig.json index 50008170..e9f4064f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,6 +15,5 @@ "paths": { "@clack/core": ["./packages/core/src"] } - }, - "include": ["packages"] + } }