Skip to content

AutosseyAI/prxmpt

BranchesTags

Repository files navigation

𝕡𝕣𝕩𝕞𝕡𝕥

Coverage Status NPM TypeScript

-- Prompt Crafting with JSX --
npm   •   GitHub   •   Issues


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.
const text = (
  <lined>
    <h1>This is the first line.</h1>
    <text hide={hideLine2}>Here's a second line.</text>
    <empty />
    <text>
      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.
    </text>
  </lined>
);
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:

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

NPM 
npm install @autossey/prxmpt
Yarn 
yarn add @autossey/prxmpt
PNPM 
pnpm add @autossey/prxmpt
Bun 
bun add @autossey/prxmpt

Getting Started

Automatic Mode

Prxmpt provides a base tsconfig.json that you can extend:

{
  "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:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@autossey/prxmpt",
    "module": "NodeNext"
  }
}

You should be able to use Prxmpt elements now, without importing:

export const MyComponent = () => (
  <text>Hello, World!</text>
);

If using Prxmpt with React, add the following line at the top of each file that uses Prxmpt instead:

/** @jsxImportSource @autossey/prxmpt */

export const MyComponent = () => (
  <text>Hello, World!</text>
);
Classic Mode

To use Prxmpt in classic mode, you'll need to set the following fields in your tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "Prxmpt.createElement",
    "jsxFragmentFactory": "Prxmpt.Fragment"
  }
}

Additionally, you'll need to import Prxmpt in each file you use it:

import Prxmpt from "@autossey/prxmpt";

export const MyComponent = () => (
  <text>Hello, World!</text>
);

Examples

Several examples are provided in the examples directory:

Element Usage Examples:

Setup Examples (TypeScript):

Setup Examples (JavaScript):

For examples of how to use specific elements, the tests show more usecases.

Elements

Exports

The following functions are also exported from Prxmpt:

Text Elements

Text

<text>

Text is the base Prxmpt element. It returns its children as a string:

const string = <text>Hello, World!</text>;
Result 
Hello, World!

Text can also be hidden with the hide prop:

const string = <text>Hello<text hide>, World</hide>!</text>;
Result 
Hello!
Props

Since <text> is the base of most other elements, the props it provides can be used with most other elements.

Prxmpt treats children as an array of strings, which means <text> can also provide several array functions for mapping, filtering, and joining children.

  • hide
/**
 * Prevent the Element from being rendered.
 * @default false
 */
hide?: boolean;
  • filter
/**
 * A function to filter children.
 * @default (node) => true
 */
filter?: (node: Prxmpt.Children, index: number, arr: Prxmpt.Children[]) => boolean;
  • map
/**
 * A function that maps each child to a new Element.
 * @default (node) => Prxmpt.render(node)
 */
map?: (node: Prxmpt.Children, index: number, arr: Prxmpt.Children[]) => Prxmpt.JSX.Element;
  • reverse
/**
 * Reverse the order of the children.
 */
reverse?: boolean;
  • join
/**
 * An Element to insert between each child.
 * @default ""
 */
join?: Prxmpt.Children;
  • repeat
/**
 * @default 1
 */
repeat?: number;
  • trim
/**
 * `true`: Trim whitespace from the beginning and end of the Element.
 * 
 * `"start"`: Trim whitespace from the beginning of the Element.
 * 
 * `"end"`: Trim whitespace from the end of the Element.
 * 
 * @default false
 */
trim?: boolean | TrimSide;
  • casing
/**
 * Convert the Element to a given casing.
 * @default undefined
 */
casing?: Casing;
  • prefix
/**
 * An Element to prepend to the element.
 * @default ""
 */
prefix?: Prxmpt.Children;
  • suffix
/**
 * An Element to append to the element.
 * @default ""
 */
suffix?: Prxmpt.Children;
  • indent
/**
 * Apply indentation to each line of the Element.
 * 
 * If `true`, indentation is applied using 2 spaces.
 * 
 * If a number is provided, that number of spaces is used.
 * 
 * If `"\t"` is provided, a single tab character is used.
 * 
 * @default false
 */
indent?: boolean | number | "\t";
  • block
/**
 * Append a newline to the end of the Element.
 * @default false
 */
block?: boolean;

Characters

Empty

<empty>

The <empty> element returns an empty string:

// ""
const string = <empty />;

<empty> is often useful as a child of elements that join their children on some delimiter.

const string = (
  <lined>
    <text>Line 1</text>
    <empty />
    <text>Line 3</text>
  </lined>
);
Result 
Line 1

Line 2

Space

<space>

The <space> element returns a space:

// " "
const string = <space />;

Tab

<tab>

Props
  • literal
/**
  * If true, use a literal tab character. Otherwise, use spaces.
  * @default false
  */
literal?: boolean;
  • width
/**
  * Number of characters per tab
  * @default 1 if `literal` is true, otherwise 2
  */
width?: number;
// "    "
const string = <tab width={4} />

Ellipsis

<ellipsis>

const string = <ellipsis />;
Result 
...

NA

<na>

const string = <na />;
Result 
n/a

Brackets

Parenthesis

<parens>

const string = <parens>Hello, World!</parens>;
Result 
(Hello, World!)

Square Bracket

<square>

const string = <square>Hello, World!</square>;
Result 
[Hello, World!]

Curly Bracket

<curly>

const string = <curly>Hello, World!</curly>;
Result 
{Hello, World!}

Angle Bracket

<angle>

const string = <angle>Hello, World!</angle>;
Result 
<Hello, World!>

Quotes

Single Quote

<sq>

const string = <sq>Hello, World!</sq>;
Result 
'Hello, World!'

Double Quote

<dq>

const string = <dq>Hello, World!</dq>;
Result 
"Hello, World!"

Back Quote

<bq>

const string = <bq>Hello, World!</bq>;
Result 
`Hello, World!`

Triple Single Quote

<tsq>

const string = <tsq>Hello, World!</tsq>;
Result 
'''
Hello, World!
'''

Triple Double Quote

<tdq>

const string = <tdq>Hello, World!</tdq>;
Result 
"""
Hello, World!
"""

Triple Back Quote

<tbq>

const tbq = <tbq>Hello, World!</tbq>;
Result 
```
Hello, World!
```

Comments

Slash Comment

<comment type="slash">

const slash = <comment type="slash">Hello, World!</comment>;
Result 
// Hello, World!

Hash Comment

<comment type="hash">

const hash = <comment type="hash">Hello, World!</comment>;
Result 
# Hello, World!

Dash Comment

<comment type="dash">

const dash = <comment type="dash">Hello, World!</comment>;
Result 
-- Hello, World!

HTML Comment

<comment type="html">

const html = <comment type="html">Hello, World!</comment>;
Result 
<!-- Hello, World! -->

Sentences

State

<state>

const state = <state>Hello, World!</state>;
Result 
Hello, World.

Ask

<ask>

const ask = <ask>Hello, World!</ask>;
Result 
Hello, World?

Exclaim

<exclaim>

const exclaim = <exclaim>Hello, World!</exclaim>;
Result 
Hello, World!

Miscellaneous

Key-Value Pair

<kv>

Props
  • key
/**
  * A key to render.
  */
key: Prxmpt.Children;
  • keyCase
/**
  * Case to apply to the key.
  * @default undefined
  */
keyCase?: "upper" | "lower" | "capital" | "title";
  • wrap
/**
 * Override the default behavior for wrapping the value.
 * @default undefined
 */
wrap?: boolean;
  • noSpace
/**
 * If true, do not add a space between the key and value.
 * Only applies when not wrapping.
 * @default false
 */
noSpace?: boolean;
const string = <kv key="Hello">World</kv>;
Result 
Hello: World

When the children contain multiple lines, the value is rendered starting on a newline by default:

const worlds = (
  <tdq join={"\n"}>
    <text>World1</text>
    <text>World2</text>
    <text>World3</text>
  </tdq>
);

const string = <kv key="Hello">{worlds}</kv>;
Result 
Hello:
"""
World1
World2
World3
"""

HTML Elements

HTML elements are built on top of the <tag> element. Each html element has a boolean html prop that is set to false by default. When html is true, the element is rendered as HTML. Otherwise, the element is rendered as a Markdown equivalent.

Additionally, custom attributes can be set using the attributes prop.

Tag

<tag>

Props
  • name
/**
 * Name of the tag.
 */
name: string;
  • noIndent
/**
 * @default false
 */
noIndent?: boolean;
  • wrap
/**
 * Defaults to true if the content contains a newline.
 */
wrap?: boolean;
const tag = <tag name="mytag">Hello, World!</tag>;
Result 
<mytag>Hello, World!</mytag>

If no children are provided, the tag is rendered as a self-closing tag:

const tag = <tag name="mytag" />;
Result 
<mytag />

Breaks

Line Break

<br />

// "\n"
const br = <br />;
const br = <br html />;
Result 
<br />

Horizontal Rule

<hr />

Props
  • width
/**
 * @default 3
 */
width?: number;
  • char
/**
 * @default "-"
 */
char?: "-" | "_" | "=" | "*";
const hr = <hr />;
Result 
---

const hr = <hr />;
Result 
<hr />

Linking

Anchor

<a>

Props
  • href
/**
 * The URL of the link.
 */
href: string;
  • title
/**
 * A title for the link.
 */
title?: string;
const string = <a href="https://example.com" title="A Title">Hello, World!</a>;
Result 
[Hello, World!](https://example.com "A Title")

const string = <a href="https://example.com" title="A Title" html>Hello, World!</a>;
Result 
<a href="https://example.com" title="A Title">Hello, World!</a>

Image

<img>

Props
  • src
/**
 * The URL of the image.
 */
href: string;
  • title
/**
 * A title for the image.
 */
title?: string;
const string = <img src="https://example.com" title="A Title">Hello, World!</img>;
Result 
![Hello, World!](https://example.com "A Title")

const string = <img src="https://example.com" title="A Title" html>Hello, World!</img>;
Result 
<img src="https://example.com" alt="Hello, World!" title="A Title" />

Headings

H1

<h1>

Standard:
const string = <h1>Hello, World!</h1>;
Result 
# Hello, World!
HTML:
const string = <h1 html>Hello, World!</h1>;
Result 
<h1>Hello, World!</h1>

H2

<h2>

Standard:
const string = <h2>Hello, World!</h2>;
Result 
## Hello, World!
HTML:
const string = <h2 html>Hello, World!</h2>;
Result 
<h2>Hello, World!</h2>

H3

<h3>

Standard:
const string = <h3>Hello, World!</h3>;
Result 
### Hello, World!
HTML:
const string = <h3 html>Hello, World!</h3>;
Result 
<h3>Hello, World!</h3>

H4

<h4>

Standard:
const string = <h4>Hello, World!</h4>;
Result 
#### Hello, World!
HTML:
const string = <h4 html>Hello, World!</h4>;
Result 
<h4>Hello, World!</h4>

H5

<h5>

Standard:
const string = <h5>Hello, World!</h5>;
Result 
##### Hello, World!
HTML:
const string = <h5 html>Hello, World!</h5>;
Result 
<h5>Hello, World!</h5>

H6

<h6>

Standard:
const string = <h6>Hello, World!</h6>;
Result 
###### Hello, World!
HTML:
const string = <h6 html>Hello, World!</h6>;
Result 
<h6>Hello, World!</h6>

Lists

Ordered List

<ol>

Props
  • onlyMarkIfList
/**
  * Only include markers if the list contains more than one item.
  * @default false
  */
onlyMarkIfList?: boolean;
const string = (
  <ol>
    <text>Hello</text>
    <text>World</text>
  </ol>
);
Result 
1. Hello
2. World

Unordered List

<ul>

Props
  • onlyMarkIfList
/**
  * Only include markers if the list contains more than one item.
  * @default false
  */
onlyMarkIfList?: boolean;
const string = (
  <ul>
    <text>Hello</text>
    <text>World</text>
  </ul>
);
Result 
- Hello
- World

Checkbox list

<cl>

Props
  • items
items: {
  /**
   * @default false
   */
  checked?: boolean;
  /**
   * Content to render after the checkbox.
   */
  content: Prxmpt.Children;
}[];
const string = (
  <cl
    items={[
      { content: "Hello" },
      { content: "World", checked: true },
    ]}
  />
);
Result 
- [ ] Hello
- [x] World

Definition List

<dl>

Props
  • items
/**
 * The items to render.
 */
items: Record<string, Prxmpt.Children>;
  • termCase
/**
 * Casing to apply to each key.
 * @default undefined
 */
termCase?: "upper" | "lower" | "capital" | "title";
  • space
/**
 * Number of blank lined to insert between each item.
 * @default 0
 */
space?: number;
  • wrap
/**
 * Override the default behavior for wrapping values.
 * @default undefined
 */
wrap?: boolean;
const string = (
  <dl
    items={{
      Hello: "World",
      Foo: "Bar"
    }}
  />
);
Result 
Hello: World
Foo: Bar

Styling

Italic

<i>

Props
  • char
/**
 * @default "_"
 */
char?: "*" | "_";
Standard:
const string = <i>Hello, World!</i>;
Result 
_Hello, World!_
HTML:
const string = <i html>Hello, World!</i>;
Result 
<i>Hello, World!</i>

Bold

<b>

Props
  • char
/**
 * @default "*"
 */
char?: "*" | "_";
Standard:
const string = <b>Hello, World!</b>;
Result 
**Hello, World!**
HTML:
const string = <b html>Hello, World!</b>;
Result 
<b>Hello, World!</b>

Strikethrough

<s>

Standard:
const string = <s>Hello, World!</s>;
Result 
~~Hello, World!~~
HTML:
const string = <s html>Hello, World!</s>;
Result 
<s>Hello, World!</s>

Code

<code>

Standard:
const string = <code>Hello, World!</code>;
Result 
`Hello, World!`
HTML:
const string = <code html>Hello, World!</code>;
Result 
<code>Hello, World!</code>

Miscellaneous

Span

<span>

Standard:

When rendered as text, <span> simply renders its children like <text>:

const string = <span>Hello, World!</span>;
Result 
Hello, World!
HTML:
const string = <span html>Hello, World!</span>;
Result 
<span>Hello, World!</span>

Paragraph

<p>

Standard:

When rendered as text, the paragraph tag adds a newline at the end of the element:

const string = <p>Hello, World!</p>;
Result 
Hello, World!
HTML:
const string = <p html>Hello, World!</p>;
Result 
<p>Hello, World!</p>

Blockquote

<blockquote>

Standard:
const string = (
  <blockquote join={"\n"}>
    <text>Hello</text>
    <empty />
    <text>World!</text>
  </blockquote>
);
Result 
> Hello
>
> World!
HTML:
const string = <blockquote html>Hello, World!</blockquote>;
Result 
<blockquote>Hello, World!</blockquote>

Quote

<q>

Props
  • type
/**
 * @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
const string = <q>Hello, World!</q>;
Result 
"Hello, World!"
Multi Line
const string = <q>Hello<br />World</q>;
Result 
"""
Hello, World!
"""
HTML:
const string = <q html>Hello, World!</q>;
Result 
<q>Hello, World!</q>

Pre

<pre>

Standard:
const string = <pre>Hello, World!</pre>;
Result 
```
Hello, World!
```
HTML:
const string = <pre html>Hello, World!</pre>;
Result 
<pre>Hello, World!</pre>

Serialization Elements

Primitives

Num

<num>

Props
  • add
/**
 * Add a value to the number.
 */
add?: number;
  • min
/**
 * Minimum value. Applied after `add`.
 */
min?: number;
  • max
/**
 * Maximum value. Applied after `add`.
 */
max?: number;
  • fixed
/**
 * Number of decimal places.
 */
fixed?: number;
const string = <num fixed={2}>1</num>;
Result 
1.00

const string = <num min={1}>0</num>;
Result 
1

Dates

Datetime

Props
  • value
/**
 * @default Date.now()
 */
value?: Date | string | number;
  • dateFormat
/**
 * @default "short"
 */
dateFormat?: "long" | "medium" | "short" | "full";
  • timeFormat
/**
 * @default "short"
 */
timeFormat?: "long" | "medium" | "short" | "full";
const string = <datetime />;
Result 
September 23, 2023 at 5:17 PM

Date

Props
  • value
/**
 * @default Date.now()
 */
value?: Date | string | number;
  • format
/**
 * @default "short"
 */
format?: "long" | "medium" | "short" | "full";
const string = <date />;
Result 
September 23, 2023

Time

Props
  • value
/**
 * @default Date.now()
 */
value?: Date | string | number;
  • format
/**
 * @default "short"
 */
format?: "long" | "medium" | "short" | "full";
const string = <time />;
Result 
5:17 PM

Year

Props
  • value
/**
 * @default Date.now()
 */
value?: Date | string | number;
const string = <year />
Result 
2023

Month

Props
  • value
/**
 * @default Date.now()
 */
value?: Date | string | number;
  • format
/**
 * @default "number"
 */
format?: "number" | "long" | "short" | "narrow";
const string = <month />
Result 
8

const string = <month format="long" />
Result 
September

const string = <month format="short" />
Result 
Sep

const string = <month format="narrow" />
Result 
S

Day

Props
  • value
/**
 * @default Date.now()
 */
value?: Date | string | number;
  • format
/**
 * @default "number"
 */
format?: "number" | "long" | "short" | "narrow";
const string = <day />
Result 
6

const string = <day format="long" />
Result 
Saturday

const string = <day format="short" />
Result 
Sat

const string = <day format="narrow" />
Result 
S

Hour

Props
  • value
/**
 * @default Date.now()
 */
value?: Date | string | number;
  • cycle
/**
 * @default "12"
 */
cycle?: "12" | "24";
const string = <hour />
Result 
5

const string = <hour cycle="24">
Result 
17

Minute

Props
  • value
/**
 * @default Date.now()
 */
value?: Date | string | number;
const string = <minute />
Result 
42

Second

Props
  • value
/**
 * @default Date.now()
 */
value?: Date | string | number;
const string = <second />
Result 
42

Millisecond

Props
  • value
/**
 * @default Date.now()
 */
value?: Date | string | number;
const string = <millisecond />
Result 
999

Duration

Props
  • value
/**
 * The end of the duration.
 * @default Date.now()
 */
value?: Date | string | number;
  • since
/**
 * The start of the duration.
 */
since: Date | string | number;
const string = <duration since={"September 2021"} />
Result 
2 years

Objects

JSON

Props
  • data
/**
 * The data to stringify.
 */
data: NestedOptionalJSONValue;
  • pretty
/**
 * @default false
 */
pretty?: boolean;
const string = <json data={{ Hello: "World" }} pretty />;
Result 
{
  "Hello": "World"
}

YAML

Props
  • data
/**
 * The data to stringify.
 */
data: NestedOptionalJSONValue;
  • noStartMarker
/**
 * @default false
 */
noStartMarker?: boolean;
  • sequenceIndent
/**
 * @default false
 */
sequenceIndent?: boolean;
const string = <yaml data={{ hello: "world" }} />;
Result 
---
hello: world

Utility Elements

Casing

Upper

<upper>

const string = <upper>Hello, World!</upper>;
Result 
HELLO, WORLD!

Lower

<lower>

const string = <lower>Hello, World!</lower>;
Result 
hello, world!

Capital

<capital>

const string = <capital>hello, world!</capital>;
Result 
Hello, world!

Title

<title>

const string = <title>hello, world!</title>;
Result 
Hello, World!

Affixes

Trim

// "Hello, World!"
const string = <trim>Hello, World! </trim>;
Result 
Hello, World!

Frame

Props
  • with
/**
 * A value to apply to both `prefix` and `suffix`.
 */
with: Prxmpt.Children;
const string = <frame with="--">Hello, World! </frame>;
Result 
-- Hello, World! --

Joins

Lined

<lined>

const string = (
  <lined>
    <text>Hello</text>
    <text>World!</text>
  </lined>
);
Result 
Hello
World!

Spaced

<spaced>

const string = (
  <spaced>
    <text>Hello</text>
    <text>World!</text>
  </spaced>
);
Result 
Hello World!

Comma-Separated List

<csl>

Props
  • noSpace
/**
 * @default false
 */
noSpace?: boolean;
const string = (
  <csl>
    <text>hello</text>
    <text>world</text>
  </csl>
);
Result 
hello, world

const string = (
  <csl noSpace>
    <text>hello</text>
    <text>world</text>
  </csl>
);
Result 
hello,world

Union

<union>

Props
  • noSpace
/**
 * @default false
 */
noSpace?: boolean;
const string = (
  <union>
    <text>hello</text>
    <text>world</text>
  </union>
);
Result 
hello | world

const string = (
  <union noSpace>
    <text>hello</text>
    <text>world</text>
  </union>
);
Result 
hello|world

Sectioned

Props
  • divider
/**
 * @default "---"
 */
divider?: string;
  • frame
/**
 * Whether add dividers before and after the body.
 * @default false
 */
frame?: boolean;
const string = (
  <sectioned>
    <text>Hello</text>
    <text>World!</text>
  </sectioned>
);
Result 
Hello
---
World!

Sets

Sets automatically adjust the separators used based on the number of children provided.

And

<and>

const string = (
  <and>
    <text>a</text>
  </and>
);
Result 
a

const string = (
  <and>
    <text>a</text>
    <text>b</text>
  </and>
);
Result 
a and b

const string = (
  <and>
    <text>a</text>
    <text>b</text>
    <text>c</text>
  </and>
);
Result 
a, b, and c

And / Or

<andor>

const string = (
  <andor>
    <text>a</text>
    <text>b</text>
    <text>c</text>
  </andor>
);
Result 
a, b, and/or c

Or

<or>

const string = (
  <or>
    <text>a</text>
    <text>b</text>
    <text>c</text>
  </or>
);
Result 
a, b, or c

Nor

<nor>

const string = (
  <nor>
    <text>a</text>
    <text>b</text>
    <text>c</text>
  </nor>
);
Result 
a, b, nor c

Limiters

Cap

The <cap> 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
/**
 * The maximum "units" to include.
 * @default Infinity
 */
max?: number;
  • splitter
/**
 * A function that splits a string into "units".
 * @default "chars"
 */
splitter?: "paragraphs" | "lines" | "spaces" | "words" | "commas" | "chars" | (string: string) => string[];
  • ellipsis
/**
 * 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;
const string = <cap max={5}>Hello, World!</cap>;
Result 
Hello

Priority

The <priority> element is like a width-based CSS media query for strings.

Instead of providing a list of children, <priority> 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.

Props
  • max
/**
 * The maximum "units" to include.
 * @default Infinity
 */
max?: number;
  • counter
/**
 * A function that returns the number of "units" in a string.
 * @default (string: string) => string.length
 */
counter?: (string: string) => number;
  • items
/**
 * 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.

/**
 * @default ["priority", "order-asc"]
 */
strategy?: PriorityStrategy | PriorityStrategy[];
  • noSkip
/**
  * If `true`, do not skip items after the maximum is reached.
  * @default false
  */
noSkip?: boolean;
const string = (
  <priority
    max={15}
    join={"\n"}
    items={[{
      p: 2
      content: "Test 1"
    }, {
      // p: 0 is the default
      content: "This is a a super long string that won't fit."
    }, {
      p: 1,
      content: "Test 3"
    }]} />
);
Result 
Test 1
Test 3

Exports

Rendering

createElement

import { createElement } from "@autossey/prxmpt";

const string = createElement("text", {}, "Hello, World!");
Result 
Hello, World!

render

import { render } from "@autossey/prxmpt";

const string = render(
  <text>Hello, World!</text>
);
Result 
Hello, World!

Children

hasChildren

Returns true if the provided props object has a children property.

import { hasChildren } from "@autossey/prxmpt";

if(hasChildren({ children: "Hello, World!" })) {
  // ...
}

isChildren

Returns true if the provided value is a valid Prxmpt element child.

import { isChildren } from "@autossey/prxmpt";

if(isChildren("Hello, World!")) {
  // ...
}

Splitters

split

Split children on separator. If separator is undefined, no splitting occurs.

import { split } from "@autossey/prxmpt";

const children = (
  <lined>
    <text>Hello</text>
    <text>World!</text>
  </lined>
);

// ["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 "".


Dependenciesdependencies

Dev Dependencies


License license

MIT - The MIT License

About

Prompt Crafting with JSX

Topics

typescript ai jsx prompt openai prompt-engineering

Resources

Readme
Activity
Custom properties

Stars

28 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases 3

v0.2.0 Latest
Oct 3, 2023
+ 2 releases

Languages