https://github.com/autosseyai/prxmpt
Prompt Crafting with JSX
https://github.com/autosseyai/prxmpt
ai jsx openai prompt prompt-engineering typescript
Last synced: 11 months ago
JSON representation
Prompt Crafting with JSX
- Host: GitHub
- URL: https://github.com/autosseyai/prxmpt
- Owner: AutosseyAI
- Created: 2023-08-26T23:40:42.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-04T20:41:17.000Z (over 2 years ago)
- Last Synced: 2025-07-21T04:49:40.326Z (11 months ago)
- Topics: ai, jsx, openai, prompt, prompt-engineering, typescript
- Language: TypeScript
- Homepage:
- Size: 765 KB
- Stars: 34
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
𝕡𝕣𝕩𝕞𝕡𝕥
-- Prompt Crafting with JSX --
Prxmpt is like _"Tailwind for Prompt Engineering"_. It provides a set of utilities for formatting strings with JSX.
Prxmpt is designed for shaping the input to LLMs, and includes powerful elements such as [\](#priority) for managing tokens. However, Prxmpt also provides both Markdown and HTML elements, making it perfect for formatting LLM outputs for end users as well.
Why JSX?
1. 📖 **Readability** - JSX gives us more control over whitespace, enabling more readable code.
2. 🎛️ **Control** - With built-in props such as `hide`, we can easily control the text we display without ternaries.
3. 📦 **Reusability** - Prxmpt components take props just like normal JSX components, making them easy to reuse.
```tsx
const text = (
This is the first line.
Here's a second line.
This is a longer line, so we'll break the text tag.
We can even start another line here, and a space will be added.
);
```
Result (hideLine2=false)
```
# This is the first line.
Here's a second line.
This is a long line, so we'llbreak the text tag We can even start another line here, and a space will be added.
```
Result (hideLine2=true)
```
# This is the first line.
This is a long line, so we'll break the text tag We can even start another line here, and a space will be added.
```
Compare this to an equivalent using template literals:
```ts
const text = `# This is the first line.${hideLine2 ? "\nHere's a second line." : ""}\n\nThis is a longer line, so by now we're off the page. We can even start another line here, but I wouldn't recommend it.`;
```
Installation
```sh
npm install @autossey/prxmpt
```
```sh
yarn add @autossey/prxmpt
```
```sh
pnpm add @autossey/prxmpt
```
```sh
bun add @autossey/prxmpt
```
Getting Started
Automatic Mode
Prxmpt provides a base `tsconfig.json` that you can extend:
```json
{
"extends": "@autossey/prxmpt/tsconfig.json"
}
```
> NOTE: Bun doesn't seem to detect Prxmpt correctly when using the "extends" method.
Alternatively, you can simply add the following fields to your `tsconfig.json`:
```json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "@autossey/prxmpt",
"module": "NodeNext"
}
}
```
You should be able to use Prxmpt elements now, without importing:
```tsx
export const MyComponent = () => (
Hello, World!
);
```
> If using Prxmpt with React, add the following line at the top of each file that uses Prxmpt instead:
> ```tsx
> /** @jsxImportSource @autossey/prxmpt */
>
> export const MyComponent = () => (
> Hello, World!
> );
> ```
Classic Mode
To use Prxmpt in classic mode, you'll need to set the following fields in your `tsconfig.json`:
```json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "Prxmpt.createElement",
"jsxFragmentFactory": "Prxmpt.Fragment"
}
}
```
Additionally, you'll need to import `Prxmpt` in each file you use it:
```tsx
import Prxmpt from "@autossey/prxmpt";
export const MyComponent = () => (
Hello, World!
);
```
Examples
Several examples are provided in the [examples](https://github.com/AutosseyAI/prxmpt/tree/main/examples) directory:
**Element Usage Examples:**
- [kitchen sink](https://github.com/AutosseyAI/prxmpt/blob/main/examples/kitchen-sink/source/Prompt.tsx) (Showcases many elements)
- [priority](https://github.com/AutosseyAI/prxmpt/tree/main/examples/priority/) (A few examples of the `` element)
**Setup Examples (TypeScript):**
- [bun](./examples/bun/)
- [bun (classic mode)](./examples/bun-classic/)
- [Next.js](./examples/next/)
- [swc](./examples/swc/)
- [swc (classic mode)](./examples/swc-classic/)
- [ts-node](./examples/ts-node/)
- [ts-node (classic mode)](./examples/ts-node-classic/)
- [tsc](./examples/tsc/)
- [tsc (classic mode)](./examples/tsc-classic/)
**Setup Examples (JavaScript):**
- [node --loader @autossey/prxmpt](./examples/node-loader/)
- [swc](./examples/swc-js/)
- [swc (classic mode)](./examples/swc-js-classic/)
For examples of how to use specific elements, the [tests](https://github.com/AutosseyAI/prxmpt/tree/main/test/) show more usecases.
Elements
- [Text Elements](#text-elements)
- [``](#text)
- [Characters](#characters)
- [``](#empty)
- [``](#space)
- [``](#tab)
- [``](#ellipsis)
- [`` (n/a)](#na)
- [Brackets](#brackets)
- [`` (Parenthesis)](#parenthesis)
- [`` (Square Bracket)](#square-bracket)
- [`` (Square Bracket)](#curly-bracket)
- [`` (Angle Bracket)](#angle-bracket)
- [Quotes](#quotes)
- [`` (Single Quote)](#single-quote)
- [`` (Double Quote)](#double-quote)
- [`` (Back Quote)](#back-quote)
- [`` (Triple Single Quote)](#triple-single-quote)
- [`` (Triple Double Quote)](#triple-double-quote)
- [`` (Triple Back Quote)](#triple-back-quote)
- [Comments](#comments)
- [``](#slash-comment)
- [``](#hash-comment)
- [``](#dash-comment)
- [``](#html-comment)
- [Sentences](#sentences)
- [``](#state)
- [``](#ask)
- [``](#exclaim)
- [Miscellaneous](#miscellaneous-text)
- [`` (Key-Value Pair)](#key-value-pair)
- [HTML Elements](#html-elements)
- [``](#tag)
- [Breaks](#breaks)
- [`
` (Line Break)](#line-break)
- [`
` (Horizontal Rule)](#horizontal-rule)
- [Linking](#linking)
- [`` (Anchor)](#anchor)
- [`![]()
` (Image)](#image)
- [Headings](#headings)
- [``](#h1)
- [``](#h2)
- [``](#h3)
- [``](#h4)
- [``](#h5)
- [``](#h6)
- [Lists](#lists)
- [`` (Unordered List)](#unordered-list)
- [`` (Ordered List)](#ordered-list)
- [`` (Checkbox List)](#checkbox-list)
- [`` (Definition List)](#definition-list)
- [Styling](#styling)
- [`` (Italic)](#italic)
- [`` (Bold)](#bold)
- [`` (Strikethrough)](#strikethrough)
- [`` (Code)](#code)
- [Miscellaneous](#miscellaneous-html)
- [``](#span)
- [``](#paragraph)
- [`
`](#blockquote)
- [``](#quote)
- [``](#pre)
- [Serialization Elements](#serialization-elements)
- [Primitives](#primitives)
- [``](#num)
- [Dates](#dates)
- [``](#datetime)
- [``](#date)
- [`
Hello, World!;
```
Result
```
[Hello, World!](https://example.com "A Title")
```
```tsx
const string = Hello, World!;
```
Result
```
Hello, World!
```
#### Image
_`![]()
`_
Props
---
- **src**
```tsx
/**
* The URL of the image.
*/
href: string;
```
- **title**
```tsx
/**
* A title for the image.
*/
title?: string;
```
---
```tsx
const string = 
Hello, World!;
```
Result
```
```
```tsx
const string = Hello, World!;
```
Result
```
```
Headings
#### H1
_`
`_
##### Standard:
```tsx
const string =
Hello, World!
;
```
Result
```
# Hello, World!
```
##### HTML:
```tsx
const string =
Hello, World!
;
```
Result
```
Hello, World!
```
#### H2
_`
`_
##### Standard:
```tsx
const string =
Hello, World!
;
```
Result
```
## Hello, World!
```
##### HTML:
```tsx
const string =
Hello, World!
;
```
Result
```
Hello, World!
```
#### H3
_`
`_
##### Standard:
```tsx
const string =
Hello, World!
;
```
Result
```
### Hello, World!
```
##### HTML:
```tsx
const string =
Hello, World!
;
```
Result
```
Hello, World!
```
#### H4
_`
`_
##### Standard:
```tsx
const string =
Hello, World!
;
```
Result
```
#### Hello, World!
```
##### HTML:
```tsx
const string =
Hello, World!
;
```
Result
```
Hello, World!
```
#### H5
_`
`_
##### Standard:
```tsx
const string =
Hello, World!
;
```
Result
```
##### Hello, World!
```
##### HTML:
```tsx
const string =
Hello, World!
;
```
Result
```
Hello, World!
```
#### H6
_`
`_
##### Standard:
```tsx
const string =
Hello, World!
;
```
Result
```
###### Hello, World!
```
##### HTML:
```tsx
const string =
Hello, World!
;
```
Result
```
Hello, World!
```
Lists
#### Ordered List
_`
`_
Props
---
- **onlyMarkIfList**
```tsx
/**
* Only include markers if the list contains more than one item.
* @default false
*/
onlyMarkIfList?: boolean;
```
---
```tsx
const string = (
Hello
World
);
```
Result
```
1. Hello
2. World
```
#### Unordered List
_`
`_
Props
---
- **onlyMarkIfList**
```tsx
/**
* Only include markers if the list contains more than one item.
* @default false
*/
onlyMarkIfList?: boolean;
```
---
```tsx
const string = (
Hello
World
);
```
Result
```
- Hello
- World
```
#### Checkbox list
_``_
Props
---
- **items**
```tsx
items: {
/**
* @default false
*/
checked?: boolean;
/**
* Content to render after the checkbox.
*/
content: Prxmpt.Children;
}[];
```
---
```tsx
const string = (
);
```
Result
```
- [ ] Hello
- [x] World
```
#### Definition List
_`
`_
Props
---
- **items**
```tsx
/**
* The items to render.
*/
items: Record;
```
- **termCase**
```tsx
/**
* Casing to apply to each key.
* @default undefined
*/
termCase?: "upper" | "lower" | "capital" | "title";
```
- **space**
```tsx
/**
* Number of blank lined to insert between each item.
* @default 0
*/
space?: number;
```
- **wrap**
```tsx
/**
* Override the default behavior for wrapping values.
* @default undefined
*/
wrap?: boolean;
```
---
```tsx
const string = (
);
```
Result
```
Hello: World
Foo: Bar
```
Styling
#### Italic
_``_
Props
---
- **char**
```tsx
/**
* @default "_"
*/
char?: "*" | "_";
```
---
##### Standard:
```tsx
const string = Hello, World!;
```
Result
```
_Hello, World!_
```
##### HTML:
```tsx
const string = Hello, World!;
```
Result
```
Hello, World!
```
#### Bold
_``_
Props
---
- **char**
```tsx
/**
* @default "*"
*/
char?: "*" | "_";
```
---
##### Standard:
```tsx
const string = Hello, World!;
```
Result
```
**Hello, World!**
```
##### HTML:
```tsx
const string = Hello, World!;
```
Result
```
Hello, World!
```
#### Strikethrough
_``_
##### Standard:
```tsx
const string = Hello, World!;
```
Result
```
~~Hello, World!~~
```
##### HTML:
```tsx
const string = Hello, World!;
```
Result
```
Hello, World!
```
#### Code
_``_
##### Standard:
```tsx
const string = Hello, World!;
```
Result
```
`Hello, World!`
```
##### HTML:
```tsx
const string = Hello, World!;
```
Result
```
Hello, World!
```
Miscellaneous
#### Span
_``_
##### Standard:
When rendered as text, `` simply renders its children like ``:
```tsx
const string = Hello, World!;
```
Result
```
Hello, World!
```
##### HTML:
```tsx
const string = Hello, World!;
```
Result
```
Hello, World!
```
#### Paragraph
_`
`_
##### Standard:
When rendered as text, the paragraph tag adds a newline at the end of the element:
```tsx
const string =
Hello, World!
;
```
Result
```
Hello, World!
```
##### HTML:
```tsx
const string =
Hello, World!
;
```
Result
```
Hello, World!
```
#### Blockquote
_`
`_
##### Standard:
```tsx
const string = (
Hello
World!
);
```
Result
```
> Hello
>
> World!
```
##### HTML:
```tsx
const string =
Hello, World!
;
```
Result
```
Hello, World!
```
#### Quote
_``_
Props
---
- **type**
```tsx
/**
* @default "double"
*/
type?: "single" | "double" | "backtick";
```
---
##### Standard:
The quote element returns a triple quote if the children contain a newline, otherwise it returns a single quote.
###### Single Line
```tsx
const string = Hello, World!;
```
Result
```
"Hello, World!"
```
###### Multi Line
```tsx
const string = Hello
World;
```
Result
```
"""
Hello, World!
"""
```
##### HTML:
```tsx
const string = Hello, World!;
```
Result
```
Hello, World!
```
#### Pre
_`
`_
##### Standard:
```tsx
const string =
Hello, World!
;
```
Result
```
Hello, World!
```
##### HTML:
```tsx
const string =
Hello, World!
;
```
Result
```
Hello, World!
```
Serialization Elements
Primitives
#### Num
_``_
Props
---
- **add**
```tsx
/**
* Add a value to the number.
*/
add?: number;
```
- **min**
```tsx
/**
* Minimum value. Applied after `add`.
*/
min?: number;
```
- **max**
```tsx
/**
* Maximum value. Applied after `add`.
*/
max?: number;
```
- **fixed**
```tsx
/**
* Number of decimal places.
*/
fixed?: number;
```
---
```tsx
const string = 1;
```
Result
```
1.00
```
```tsx
const string = 0;
```
Result
```
1
```
Dates
#### Datetime
Props
---
- **value**
```tsx
/**
* @default Date.now()
*/
value?: Date | string | number;
```
- **dateFormat**
```tsx
/**
* @default "short"
*/
dateFormat?: "long" | "medium" | "short" | "full";
```
- **timeFormat**
```tsx
/**
* @default "short"
*/
timeFormat?: "long" | "medium" | "short" | "full";
```
---
```tsx
const string = ;
```
Result
```
September 23, 2023 at 5:17 PM
```
#### Date
Props
---
- **value**
```tsx
/**
* @default Date.now()
*/
value?: Date | string | number;
```
- **format**
```tsx
/**
* @default "short"
*/
format?: "long" | "medium" | "short" | "full";
```
---
```tsx
const string = ;
```
Result
```
September 23, 2023
```
#### Time
Props
---
- **value**
```tsx
/**
* @default Date.now()
*/
value?: Date | string | number;
```
- **format**
```tsx
/**
* @default "short"
*/
format?: "long" | "medium" | "short" | "full";
```
---
```tsx
const string = ;
```
Result
```
5:17 PM
```
#### Year
Props
---
- **value**
```tsx
/**
* @default Date.now()
*/
value?: Date | string | number;
```
---
```tsx
const string =
```
Result
```
2023
```
#### Month
Props
---
- **value**
```tsx
/**
* @default Date.now()
*/
value?: Date | string | number;
```
- **format**
```tsx
/**
* @default "number"
*/
format?: "number" | "long" | "short" | "narrow";
```
---
```tsx
const string =
```
Result
```
8
```
```tsx
const string =
```
Result
```
September
```
```tsx
const string =
```
Result
```
Sep
```
```tsx
const string =
```
Result
```
S
```
#### Day
Props
---
- **value**
```tsx
/**
* @default Date.now()
*/
value?: Date | string | number;
```
- **format**
```tsx
/**
* @default "number"
*/
format?: "number" | "long" | "short" | "narrow";
```
---
```tsx
const string =
```
Result
```
6
```
```tsx
const string =
```
Result
```
Saturday
```
```tsx
const string =
```
Result
```
Sat
```
```tsx
const string =
```
Result
```
S
```
#### Hour
Props
---
- **value**
```tsx
/**
* @default Date.now()
*/
value?: Date | string | number;
```
- **cycle**
```tsx
/**
* @default "12"
*/
cycle?: "12" | "24";
```
---
```tsx
const string =
```
Result
```
5
```
```tsx
const string =
```
Result
```
17
```
#### Minute
Props
---
- **value**
```tsx
/**
* @default Date.now()
*/
value?: Date | string | number;
```
---
```tsx
const string =
```
Result
```
42
```
#### Second
Props
---
- **value**
```tsx
/**
* @default Date.now()
*/
value?: Date | string | number;
```
---
```tsx
const string =
```
Result
```
42
```
#### Millisecond
Props
---
- **value**
```tsx
/**
* @default Date.now()
*/
value?: Date | string | number;
```
---
```tsx
const string =
```
Result
```
999
```
#### Duration
Props
---
- **value**
```tsx
/**
* The end of the duration.
* @default Date.now()
*/
value?: Date | string | number;
```
- **since**
```tsx
/**
* The start of the duration.
*/
since: Date | string | number;
```
---
```tsx
const string =
```
Result
```
2 years
```
Objects
#### JSON
Props
---
- **data**
```tsx
/**
* The data to stringify.
*/
data: NestedOptionalJSONValue;
```
- **pretty**
```tsx
/**
* @default false
*/
pretty?: boolean;
```
---
```tsx
const string = ;
```
Result
```
{
"Hello": "World"
}
```
#### YAML
Props
---
- **data**
```tsx
/**
* The data to stringify.
*/
data: NestedOptionalJSONValue;
```
- **noStartMarker**
```tsx
/**
* @default false
*/
noStartMarker?: boolean;
```
- **sequenceIndent**
```tsx
/**
* @default false
*/
sequenceIndent?: boolean;
```
---
```tsx
const string = ;
```
Result
```
---
hello: world
```
Utility Elements
Casing
#### Upper
_``_
```tsx
const string = Hello, World!;
```
Result
```
HELLO, WORLD!
```
#### Lower
_``_
```tsx
const string = Hello, World!;
```
Result
```
hello, world!
```
#### Capital
_``_
```tsx
const string = hello, world!;
```
Result
```
Hello, world!
```
#### Title
_``_
```tsx
const string = hello, world!;
```
Result
```
Hello, World!
```
Affixes
#### Trim
```tsx
// "Hello, World!"
const string = Hello, World! ;
```
Result
```
Hello, World!
```
#### Frame
Props
---
- **with**
```tsx
/**
* A value to apply to both `prefix` and `suffix`.
*/
with: Prxmpt.Children;
```
---
```tsx
const string = Hello, World! ;
```
Result
```
-- Hello, World! --
```
Joins
#### Lined
_``_
```tsx
const string = (
Hello
World!
);
```
Result
```
Hello
World!
```
#### Spaced
_``_
```tsx
const string = (
Hello
World!
);
```
Result
```
Hello World!
```
#### Comma-Separated List
_``_
Props
---
- **noSpace**
```tsx
/**
* @default false
*/
noSpace?: boolean;
```
---
```tsx
const string = (
hello
world
);
```
Result
```
hello, world
```
```tsx
const string = (
hello
world
);
```
Result
```
hello,world
```
#### Union
_``_
Props
---
- **noSpace**
```tsx
/**
* @default false
*/
noSpace?: boolean;
```
---
```tsx
const string = (
hello
world
);
```
Result
```
hello | world
```
```tsx
const string = (
hello
world
);
```
Result
```
hello|world
```
#### Sectioned
Props
---
- **divider**
```tsx
/**
* @default "---"
*/
divider?: string;
```
- **frame**
```tsx
/**
* Whether add dividers before and after the body.
* @default false
*/
frame?: boolean;
```
---
```tsx
const string = (
Hello
World!
);
```
Result
```
Hello
---
World!
```
Sets
Sets automatically adjust the separators used based on the number of children provided.
#### And
_``_
```tsx
const string = (
a
);
```
Result
```
a
```
```tsx
const string = (
a
b
);
```
Result
```
a and b
```
```tsx
const string = (
a
b
c
);
```
Result
```
a, b, and c
```
#### And / Or
_``_
```tsx
const string = (
a
b
c
);
```
Result
```
a, b, and/or c
```
#### Or
_``_
```tsx
const string = (
a
b
c
);
```
Result
```
a, b, or c
```
#### Nor
_``_
```tsx
const string = (
a
b
c
);
```
Result
```
a, b, nor c
```
Limiters
#### Cap
The `` element allows you to limit the length of a string by providing a `splitter` function and a `max` number of "units" to allow.
Props
---
- **max**
```tsx
/**
* The maximum "units" to include.
* @default Infinity
*/
max?: number;
```
- **splitter**
```tsx
/**
* A function that splits a string into "units".
* @default "chars"
*/
splitter?: "paragraphs" | "lines" | "spaces" | "words" | "commas" | "chars" | (string: string) => string[];
```
- **ellipsis**
```tsx
/**
* A string to append to the end if the maximum is reached.
* This string is included in the maximum count.
* If `true`, "..." is used.
* @default undefined
*/
ellipsis?: string | true;
```
---
```tsx
const string = Hello, World!;
```
Result
```
Hello
```
#### Priority
The `` element is like a width-based [CSS media query](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) for strings.
Instead of providing a list of children, `` expects a list of items, each of which can have a priority. Higher priorities are rendered first (like `z-index` in CSS), and each item has a default priority of 0. Several strategies are provided as well for fine-tuning how items are prioritiezed.
Priority elements can also be nested, which enable extremely fine-grained control over which content is rendered. Several examples are provided in the [priority example directory](https://github.com/AutosseyAI/prxmpt/tree/main/examples/priority).
Props
---
- **max**
```tsx
/**
* The maximum "units" to include.
* @default Infinity
*/
max?: number;
```
- **counter**
```tsx
/**
* A function that returns the number of "units" in a string.
* @default (string: string) => string.length
*/
counter?: (string: string) => number;
```
- **items**
```tsx
/**
* The items to render, in order of priority.
*/
items: (Prxmpt.Children | {
/**
* The priority of this item. Higher priority items are included first.
* @default 0
*/
p?: number;
/**
* The content to render.
*/
content: ((capacity: number) => Prxmpt.Children) | Prxmpt.Children;
})[];
```
- **strategy**
> The strategy to use when prioritizing items.
If multiple strategies are provided, subsequent strategies are tried in order to break ties.
`"priority"`:
_Prioritize items by the provided priority.
Once the maximum is reached, continue to check if remaining items fit._
`"order-asc"`:
_Prioritize items by the order provided.
Once the maximum is reached, continue to check if remaining items fit._
`"order-desc"`:
_Prioritize items in reverse of the order provided.
Once the maximum is reached, continue to check if remaining items fit._
`"size-asc"`:
_Prioritize items in size order, smallest to largest.
Use if you want to include as many items as possible._
`"size-desc"`:
_Prioritized items in size order, largest to smallest.
Use if you want to include as few items as possible._
```tsx
/**
* @default ["priority", "order-asc"]
*/
strategy?: PriorityStrategy | PriorityStrategy[];
```
- **noSkip**
```tsx
/**
* If `true`, do not skip items after the maximum is reached.
* @default false
*/
noSkip?: boolean;
```
---
```tsx
const string = (
);
```
Result
```
Test 1
Test 3
```
Exports
Rendering
#### `createElement`
```tsx
import { createElement } from "@autossey/prxmpt";
const string = createElement("text", {}, "Hello, World!");
```
Result
```
Hello, World!
```
#### `render`
```tsx
import { render } from "@autossey/prxmpt";
const string = render(
Hello, World!
);
```
Result
```
Hello, World!
```
Children
#### `hasChildren`
Returns `true` if the provided props object has a `children` property.
```tsx
import { hasChildren } from "@autossey/prxmpt";
if(hasChildren({ children: "Hello, World!" })) {
// ...
}
```
#### `isChildren`
Returns `true` if the provided value is a valid Prxmpt element child.
```tsx
import { isChildren } from "@autossey/prxmpt";
if(isChildren("Hello, World!")) {
// ...
}
```
Splitters
#### `split`
Split `children` on `separator`. If `separator` is `undefined`, no splitting occurs.
```tsx
import { split } from "@autossey/prxmpt";
const children = (
Hello
World!
);
// ["Hello", "World!"]
const strings = split(children, "\n");
```
#### `paragraphs`
Split `children` on `"\n\n"`.
#### `lines`
Split `children` on `"\n"`.
#### `spaces`
Split `children` on whitespace.
#### `words`
Split `children` on word boundaries.
#### `commas`
Split `children` on `","`.
#### `characters`
Split `children` on `""`.
Dependencies
- [@swc/core](https://www.npmjs.com/package/@swc/core): Super-fast alternative for babel
- [as-typed-array](https://www.npmjs.com/package/as-typed-array): Make any value an array
- [types-json](https://www.npmjs.com/package/types-json): Type checking for JSON objects
- [yaml](https://www.npmjs.com/package/yaml): JavaScript parser and stringifier for YAML
Dev Dependencies
- [@autossey/eslint-config](https://www.npmjs.com/package/@autossey/eslint-config): A base for projects that use ESLint.
- [@autossey/tsconfig](https://www.npmjs.com/package/@autossey/tsconfig): A collection of base TSConfigs for various types of projects.
- [@jest/globals](https://www.npmjs.com/package/@jest/globals)
- [@swc/jest](https://www.npmjs.com/package/@swc/jest): Swc integration for jest
- [@types/node](https://www.npmjs.com/package/@types/node): TypeScript definitions for Node.js
- [eslint](https://www.npmjs.com/package/eslint): An AST-based pattern checker for JavaScript.
- [jest](https://www.npmjs.com/package/jest): Delightful JavaScript Testing.
- [typescript](https://www.npmjs.com/package/typescript): TypeScript is a language for application scale JavaScript development
License 
[MIT](https://opensource.org/licenses/MIT) - _The MIT License_