首頁>編程相關>Ai源碼
下載
- 提示與JSX製作 -

npm•github•問題

PRXMPT就像“迅速工程的尾風” 。它提供了一組用JSX格式化字符串的實用程序。

PRXMPT旨在將輸入分解為LLM，並包括用於管理令牌的強大元素，例如<priartity>。但是，PRXMPT還提供Markdown和HTML元素，非常適合為最終用戶的LLM輸出格式化。

為什麼JSX？

  1. 可讀性-JSX使我們對空格有了更多的控制，從而實現了更多可讀的代碼。

  2. 控制- 具有內置道具（例如hide ，我們可以輕鬆地控制沒有三元的文本。

  3. ？可重用性- PRXMPT組件像普通的JSX組件一樣採用道具，使其易於重複使用。

 const text =（
  </h1> </h1> <text hide = {hideline2}>這是第二行。打破文本標籤。
      我們甚至可以在這裡啟動另一行，並將添加一個空間。</text>
  </lined>）;
結果（ 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.
結果（ 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.

將其與使用模板文字的等效物進行比較：

 const text =`＃這是第一行。$ {hideline2？ “無處不在。” ：“”} nnthis是一條較長的行，所以到現在我們不在頁面上。我們甚至可以在這裡開始另一行，但我不建議這樣做。

安裝

npm install @autossey/prxmpt
紗線添加 @autossey/prxmpt
 pnpm添加 @autossey/prxmpt
 bun添加 @autossey/prxmpt

入門

自動模式

PRXMPT提供了一個可以擴展的基本tsconfig.json ：

 {“擴展”：“@autossey/prxmpt/tsconfig.json”}

注意：使用“擴展”方法時，BUN似乎無法正確檢測PRXMPT。

另外，您可以簡單地將以下字段添加到tsconfig.json ：

 {“ compileroptions”：{“ jsx”：“ react-jsx”，“ jsximportsource”：“@autossey/prxmpt”，“ module”：“ nodeNext”
  }
}

您應該能夠現在使用PRXMPT元素，而無需導入：

導出const mycomponent =（）=>（
  <文本>你好，世界！</text>）;

如果將PRXMPT與React一起使用，請在每個使用PRXMPT的文件頂部添加以下行：

 /** @jsximportsource @autossey/prxmpt*/export const mycomponent =（）=>（
  <文本>你好，世界！</text>）;
經典模式

例子

示例目錄中提供了幾個示例：

元素用法示例：

  • 廚房水槽（展示許多元素）

  • 優先級（ <priority>元素的一些示例）

設置示例（打字稿）：

  • 包子

  • 麵包（經典模式）

  • next.js

  • SWC

  • SWC（經典模式）

  • TS節點

  • TS節點（經典模式）

  • TSC

  • TSC（經典模式）

設置示例（JavaScript）：

  • Node -Loader @autossey/prxmpt

  • SWC

  • SWC（經典模式）

有關如何使用特定元素的示例，測試顯示了更多的用途。

元素

  • 文本元素

    • <kv> （鍵值對）

    • <state>

    • <ask>

    • <exclaim>

    • <comment type="slash">

    • <comment type="hash">

    • <comment type="dash">

    • <comment type="html">

    • <sq> （單引號）

    • <dq> （雙引號）

    • <bq> （返回報價）

    • <tsq> （三重引用）

    • <tdq> （三倍引用）

    • <tbq> （三重後引用）

    • <parens> （括號）

    • <square> （平方支架）

    • <curly> （方括號）

    • <angle> （角括號）

    • <empty>

    • <space>

    • <tab>

    • <ellipsis>

    • <na> （n/a）

    • <text>

    • 人物

    • 括號

    • 引號

    • 評論

    • 句子

    • 各種各樣的

  • HTML元素

    • <span>

    • <p>

    • <blockquote>

    • <q>

    • <pre>

    • <i> （斜體）

    • <b> （粗體）

    • <s> （罷工）

    • <code> （代碼）

    • <ul> （無序列表）

    • <ol> （訂購列表）

    • <cl> （複選框列表）

    • <dl> （定義列表）

    • <h1>

    • <h2>

    • <h3>

    • <h4>

    • <h5>

    • <h6>

    • <a> （錨）

    • <img> （圖像）

    • <br> （折線）

    • <hr> （水平規則）

    • <tag>

    • 休息

    • 鏈接

    • 標題

    • 列表

    • 造型

    • 各種各樣的

  • 序列化元素

    • <json>

    • <yaml>

    • <datetime>

    • <date>

    • <time>

    • <year>

    • <month>

    • <day>

    • <hour>

    • <minute>

    • <second>

    • <millisecond>

    • <duration>

    • <num>

    • 原語

    • 日期

    • 對象

  • 實用元素

    • <cap>

    • <priority>

    • <trim>

    • <frame>

    • <and>

    • <andor>

    • <or>

    • <nor>

    • <lined>

    • <spaced>

    • <csl> （逗號分隔列表）

    • <union>

    • <sectioned>

    • <upper>

    • <lower>

    • <capital>

    • <title>

    • 套管

    • 加入

    • 套

    • 詞綴

    • 限制器

出口

以下功能也從PRXMPT導出：

  • 渲染

    • createElement

    • render

  • 孩子們

    • hasChildren

    • isChildren

  • 分裂器

    • split

    • paragraphs

    • lines

    • spaces

    • words

    • commas

    • chars

文本元素

文字

<text>

文本是基本PRXMPT元素。它以繩子為單詞：

 const string = <文本>你好，world！</text>;
結果
Hello, World!

文字也可以用hide道具隱藏：

 const string = <text>你好<文本hide>，world </hide>！</text>;
結果
Hello!
道具

由於<text>是大多數其他元素的基礎，因此它提供的道具可以與大多數其他元素一起使用。

PRXMPT將兒童視為一系列字符串，這意味著<text>還可以提供幾個數組功能，用於映射，過濾和加入兒童。

  • 隱藏

/***防止元素被渲染。 * @default false */hide？：boolean;

  • 篩選

/***過濾兒童的功能。 * @default（node）=> true */filter？：（node：prxmpt.Children，index：number，arr：prxmpt.children []）=> boolean;

  • 地圖

/***將每個孩子映射到新元素的函數。 * @default（node）=> prxmpt.render（node） */map？:（ node：prxmpt.children，index：number，arr：prxmpt.children []）=> prxmpt.jsx.jsx.element;

  • 反向

/***扭轉孩子的順序。 */反向？

  • 加入

/***每個孩子之間插入的元素。 * @default“” */加入？：prxmpt.Children;

  • 重複

/** * @default 1 */重複？：號碼;

  • 修剪

/***`true`：從元素的開頭和末端修剪空格。 * *````''：從元素的開頭修剪空格。 * *``'end'：從元素的末尾修剪空格。 * * @default false */trim？：boolean |三邊

  • 套管

/***將元素轉換為給定的外殼。 * @default未定義 */casing？：casing;

  • 前綴

/***一個要預先到該元素的元素。 * @default“” */prefix？：prxmpt.Children;

  • 後綴

/***一個要附加到元素的元素。 * @default“” */suffix？：prxmpt.Children;

  • 縮進

/***將凹痕應用於元素的每一行。 * *如果“ true”，則使用2個空間應用凹痕。 * *如果提供了一個數字，則使用該數量的空間。 * *如果提供了“ t”`，則使用一個選項卡字符。 * * @default false */indent？：布爾值|數字| “ T”;

  • 堵塞

/***將新線附加到元素的末尾。 * @default false */block？：boolean;

人物

空的

<empty>

<empty>元素返回一個空字符串：

 //“” const string = <empty />;

<empty>通常是一個元素的孩子，這些元素會加入某個定界線。

 const string =（（
  <lined> <文本>第1行</text> <空/> <文本>行3 </text>
  </lined>）;
結果
Line 1

Line 2

空間

<space>

<space>元素返回一個空間：

 //“” const string = <space />;

選項卡

<tab>

道具

  • 文字

/***如果為true，請使用文字標籤字符。否則，請使用空間。  * @default false */literal？：boolean;

  • 寬度

/** *每個選項卡的字符數 * @default 1如果``trile''是true，否則2 */width？：number;
 //“” const string = <tab width = {4} />

省略

<ellipsis>

 const string = <橢圓 />;
結果
...

na

<na>

 const string = <na />;
結果
n/a

？

括號

插入語

<parens>

 const string = <parens>你好，world！</parens>;
結果
(Hello, World!)

方括號

<square>

 const string = <square>你好，world！</square>;
結果
[Hello, World!]

捲曲支架

<curly>

 const String = <Curly>您好，World！</curly>;
結果
{Hello, World!}

角度支架

<angle>

 const string = <安平>你好，世界！</angle>;
結果
<Hello, World!>

引號

單語

<sq>

 const string = <sq>你好，world！</sq>;
結果
'Hello, World!'

雙引號

<dq>

 const string = <dq>你好，world！</dq>;
結果
"Hello, World!"

後語報價

<bq>

 const string = <bq>你好，world！</bq>;
結果
`Hello, World!`

三重單報價

<tsq>

 const string = <tsq>你好，world！</tsq>;
結果
'''
Hello, World!
'''

三倍引用

<tdq>

 const string = <tdq>你好，world！</tdq>;
結果
"""
Hello, World!
"""

三重後語報價

<tbq>

 const tbq = <tbq>你好，world！</tbq>;
結果
````````
你好世界！
````````

評論

斜線評論

<comment type="slash">

 const slash = <comment type =“ slash”>你好，world！</comment>;
結果
// Hello, World!

哈希評論

<comment type="hash">

 const hash = <comment type =“ hash”>你好，world！</comment>;
結果
# Hello, World!

破折號評論

<comment type="dash">

 const dash = <comment type =“ dash”>你好，world！</comment>;
結果
-- Hello, World!

HTML評論

<comment type="html">

 const html = <comment type =“ html”>你好，world！</comment>;
結果
<!-- Hello, World! -->

句子

狀態

<state>

 const state = <state>你好，world！</state>;
結果
Hello, World.

問

<ask>

 const ask = <ask>你好，世界！</ask>;
結果
Hello, World?

大叫

<exclaim>

 constairaim = <airm>你好，世界！
結果
Hello, World!

各種各樣的

鑰匙值對

<kv>

道具

  • 鑰匙

/***渲染的關鍵。  */鍵：prxmpt.Children;

  • 關鍵箱

/***適用於密鑰的情況。  * @default未定義 */鍵盤？：“ upper” | “較低” | “資本” | “標題”;

  • 裹

/***覆蓋包裝值的默認行為。 * @default未定義 */wrap？：boolean;

  • Nospace

 /***如果為true，請勿在鍵和值之間添加空間。 *僅在不包裝時適用。 * @default false */nospace？：boolean;
 const string = <kv key =“ hello”> world </kv>;
結果
Hello: World

當孩子包含多行時，默認情況下以newline啟用該值：

 const worlds =（（
  <tdq join = {“ n”}> <text> world1 </text> <文本> world2 </text> <text> <文本> world3 </text>
  </tdq>）; const string = <kv key =“ hello”> {worlds} </kv>;
結果
Hello:
"""
World1
World2
World3
"""

HTML元素

HTML元素建立在<tag>元素頂部。每個HTML元素都有一個布爾人html Prop，默認情況下設置為false。當html為真時，將元素呈現為HTML。否則，將元素作為降價等效渲染。

另外，可以使用attributes支架設置自定義屬性。

標籤

<tag>

道具

  • 姓名

/***標籤的名稱。 */名稱：字符串;

  • noindent

 /** * @default false */noindent？：boolean;

  • 裹

/***如果內容包含newline，則默認為true。 */wrap？：boolean;
 const tag = <tag name =“ mytag”>你好，world！</tag>;
結果
<mytag>Hello, World!</mytag>

如果沒有提供孩子，則將標籤呈現為一個自關閉標籤：

 const tag = <tag name =“ mytag” />;
結果
<mytag />

休息

線路休息

<br />

 //“ n” const br = <br />;
 const br = <br html />;
結果
<br />

水平規則

<hr />

道具

  • 寬度

/** * @default 3 */width？：號碼;

  • char

 /** * @default“  - ” */char？：“  - ” | “ _” | “ =” | “*”;
 const hr = <hr />;
結果
---
 const hr = <hr />;
結果
<hr />

鏈接

錨

<a>

道具

  • HREF

 /***鏈接的URL。 */href：string;

  • 標題

/***鏈接的標題。 */title？：字符串;
 const string = <a href =“ https://example.com” title =“ a title”>你好，world！</a>;
結果
[Hello, World!](https://example.com "A Title")
 const string = <a href =“ https://example.com” title =“ a title” html>你好，world！</a>;
結果
<a href="https://example.com" title="A Title">Hello, World!</a>

圖像

<img>

道具

  • src

 /***圖像的URL。 */href：string;

  • 標題

/***圖像的標題。 */title？：字符串;
 const string = <img src =“ https://example.com” title =“ a title”>你好，world！</img>;
結果
![Hello, World!](https://example.com "A Title")
 const string = <img src =“ https://example.com” title =“ a title” html>你好，world！</img>;
結果
<img src="https://example.com" alt="Hello, World!" title="A Title" />

標題

H1

<h1>

標準：
 const string = <h1>你好，world！</h1>;
結果
# Hello, World!
html：
 const string = <h1 html>你好，世界！</h1>;
結果
<h1>Hello, World!</h1>

H2

<h2>

標準：
 const string = <h2>你好，世界！</h2>;
結果
## Hello, World!
html：
 const string = <h2 html>你好，世界！</h2>;
結果
<h2>Hello, World!</h2>

H3

<h3>

標準：
 const string = <h3>你好，世界！</h3>;
結果
### Hello, World!
html：
 const string = <h3 html>你好，世界！</h3>;
結果
<h3>Hello, World!</h3>

H4

<h4>

標準：
 const string = <h4>你好，世界！</h4>;
結果
#### Hello, World!
html：
 const string = <h4 html>你好，世界！</h4>;
結果
<h4>Hello, World!</h4>

H5

<h5>

標準：
 const string = <h5>你好，世界！</h5>;
結果
##### Hello, World!
html：
 const string = <h5 html>你好，世界！</h5>;
結果
<h5>Hello, World!</h5>

H6

<h6>

標準：
 const string = <h6>你好，世界！</h6>;
結果
###### Hello, World!
html：
 const string = <h6 html>你好，世界！</h6>;
結果
<h6>Hello, World!</h6>

列表

排序列表

<ol>

道具

  • 只有marksiflist

 /***僅在列表包含多個項目時包括標記。  * @default false */唯一marksiflist？：boolean;
 const string =（（
  <OL> <text>你好</text> <文本> world </text>
  </ol>）;
結果
1. Hello
2. World

無序列表

<ul>

道具

  • 只有marksiflist

 /***僅在列表包含多個項目時包括標記。  * @default false */唯一marksiflist？：boolean;
 const string =（（
  <ul> <text>你好</text> <文本> world </text>
  </ul>）;
結果
- Hello
- World

複選框列表

<cl>

道具

  • 專案

專案: {
  /** * @default false */
  檢查了？
  /***複選框後渲染的內容。   */
  內容：prxmpt.Children;} [];
 const string =（（
  <clitems = {[{content：“ hello”}，{content：“ world”，necked：true}，]}
  />）;
結果
- [ ] Hello
- [x] World

定義列表

<dl>

道具

  • 專案

/***渲染的項目。 */項目：記錄<字符串，prxmpt.Children>;

  • 末日

/***套管適用於每個鍵。 * @default未定義 */termcase？：“ upper” | “較低” | “資本” | “標題”;

  • 空間

/***在每個項目之間插入的空白數。 * @default 0 */space？：號碼;

  • 裹

/***覆蓋包裝值的默認行為。 * @default未定義 */wrap？：boolean;
 const string =（（
  <dlitems = {{hello：“ world”，foo：“ bar”}}
  />）;
結果
Hello: World
Foo: Bar

造型

斜體

<i>

道具

  • char

 /***@default“ _”*/char？：“*” | “ _”;
標準：
 const string = <i>你好，world！</i>;
結果
_Hello, World!_
html：
 const string = <i html>你好，世界！</i>;
結果
<i>Hello, World!</i>

大膽的

<b>

道具

  • char

 /***@default“*”*/char？：“*” | “ _”;
標準：
 const string = <b>你好，世界！</b>;
結果
**Hello, World!**
html：
 const string = <b html>你好，世界！</b>;
結果
<b>Hello, World!</b>

罷工

<s>

標準：
 const string = <s>你好，world！</s>;
結果
~~Hello, World!~~
html：
 const string = <s html>你好，world！</s>;
結果
<s>Hello, World!</s>

代碼

<code>

標準：
 const string = <code>你好，world！</code>;
結果
`Hello, World!`
html：
 const string = <代碼html>你好，world！</code>;
結果
<code>Hello, World!</code>

各種各樣的

跨度

<span>

標準：

當渲染為文本時， <span>只是像<text>一樣呈現其孩子：

 const string = <span>你好，world！</span>;
結果
Hello, World!
html：
 const string = <span html>你好，world！</span>;
結果
<span>Hello, World!</span>

段落

<p>

標準：

當渲染為文本時，段落標籤在元素末尾添加了一個newline：

 const string = <p>你好，世界！</p>;
結果
Hello, World!
html：
 const string = <p html>你好，world！</p>;
結果
<p>Hello, World!</p>

blockquote

<blockquote>

標準：
 const string =（（
  <blockquote join = {“ n”}> <text>你好</text> <空/> <text> world！</text>
  </blockquote>）;
結果
> Hello
>
> World!
html：
 const String = <BlockQuote HTML>您好，World！</blockQuote>;
結果
<blockquote>Hello, World!</blockquote>

引用

<q>

道具

  • 類型

/** * @default“ double” */type？：“單” | “雙” | “ Backtick”；
標準：

報價元素將返回三重報價，如果孩子包含一個newline，則返回單個報價。

單線
const string = <q>你好，world！</q>;
結果
"Hello, World!"
多線
const string = <q>你好<br /> world < /q>;
結果
"""
Hello, World!
"""
html：
 const string = <q html>你好，world！</q>;
結果
<q>Hello, World!</q>

pre

<pre>

標準：
 const string = <pre>你好，world！</pre>;
結果
````````
你好世界！
````````
html：
 const string = <pre html>你好，world！</pre>;
結果
<pre>Hello, World!</pre>

序列化元素

原語

num

<num>

道具

  • 添加

/***為數字添加一個值。 */add？：號碼;

  • 最小

/***最小值。在“添加”之後應用。 */min？：編號；

  • 最大限度

/***最大值。在“添加”之後應用。 */max？：號碼；

  • 固定的

/***十進制位置的數量。 */固定？：編號；
 const string = <num recied = {2}> 1 </num>;
結果
1.00
 const string = <num min = {1}> 0 </num>;
結果
1

日期

DateTime

道具

  • 價值

/** * @default date.now（） */value？：日期|字符串|數字;

  • dateformat

 /** * @default“ short” */dateformat？：“ long” | “中” | “短” | “滿的”;

  • TimeFormat

 /** * @default“ short” */timeformat？：“ long” | “中” | “短” | “滿的”;
 const string = <dateTime />;
結果
September 23, 2023 at 5:17 PM

日期

道具

  • 價值

/** * @default date.now（） */value？：日期|字符串|數字;

  • 格式

/** * @default“ short” */格式？：“ long” | “中” | “短” | “滿的”;
 const string = <date />;
結果
September 23, 2023

時間

道具

  • 價值

/** * @default date.now（） */value？：日期|字符串|數字;

  • 格式

/** * @default“ short” */格式？：“ long” | “中” | “短” | “滿的”;
 const string = <time />;
結果
5:17 PM

年

道具

  • 價值

/** * @default date.now（） */value？：日期|字符串|數字;
 const String = <Year />
結果
2023

月

道具

  • 價值

/** * @default date.now（） */value？：日期|字符串|數字;

  • 格式

/** * @default“ number” */格式？：“數字” | “長” | “短” | “狹窄的”;
 const String = <月 />
結果
8
 const string = <month format =“ long” />
結果
September
 const string = <month format =“ short” />
結果
Sep
 const string = <month format =“ narrow” />
結果
S

天

道具

  • 價值

/** * @default date.now（） */value？：日期|字符串|數字;

  • 格式

/** * @default“ number” */格式？：“數字” | “長” | “短” | “狹窄的”;
 const string = <day />
結果
6
 const string = <day格式=“ long” />
結果
Saturday
 const string = <day格式=“ short” />
結果
Sat
 const string = <day格式=“ narrow” />
結果
S

小時

道具

  • 價值

/** * @default date.now（） */value？：日期|字符串|數字;

  • 循環

/** * @default“ 12” */循環？：“ 12” | “ 24”;
 const字符串= <小時 />
結果
5
 const字符串= <小時循環=“ 24”>
結果
17

分鐘

道具

  • 價值

/** * @default date.now（） */value？：日期|字符串|數字;
 const string = <minne />
結果
42

第二

道具

  • 價值

/** * @default date.now（） */value？：日期|字符串|數字;
 const String = <秒 />
結果
42

毫秒

道具

  • 價值

/** * @default date.now（） */value？：日期|字符串|數字;
 const string = <millisecond />
結果
999

期間

道具

  • 價值

/***持續時間的末端。 * @default date.now（） */value？：日期|字符串|數字;

  • 自從

/***持續時間的開始。 */自：date |字符串|數字;
 const string = <持續時間自= {“ 2021年9月”} />
結果
2 years

對象

JSON

道具

  • 數據

/***要串制的數據。 */數據：NestedOptionalJsonValue;

  • 漂亮的

/** * @default false */pretty？：boolean;
 const string = <json data = {{hello：“ world”}} pretty />;
結果
{
  "Hello": "World"
}

yaml

道具

  • 數據

/***要串制的數據。 */數據：NestedOptionalJsonValue;

  • Nostartmarker

 /** * @default false */nostartmarker？：boolean;

  • 序列

/** * @default false */sequenceIndent？：boolean;
 const string = <yaml data = {{hello：“ world”}} />;
結果
---
hello: world

實用元素

套管

上

<upper>

 const string = <上>你好，world！</upper>;
結果
HELLO, WORLD!

降低

<lower>

 const string = <lower>你好，world！</lower>;
結果
hello, world!

首都

<capital>

 const string = <capital>你好，world！</capital>;
結果
Hello, world!

標題

<title>

 const string = <title>你好，世界！</title>;
結果
Hello, World!

詞綴

修剪

//“你好，世界！” const string = <trim>你好，世界！ </trim>;
結果
Hello, World!

框架

道具

  • 和

/***一個適用於`'前綴和後綴'的值。 */with：prxmpt.Children;
 const String = <with =“  - ”>你好，世界！ </frame>;
結果
-- Hello, World! --

加入

襯裡

<lined>

 const string =（（
  <lined> <文本>你好</text> <文本> world！</text>
  </lined>）;
結果
Hello
World!

間隔

<spaced>

 const string =（（
  <間距> <文本>你好</text> <文本> world！</text>
  </spaced>）;
結果
Hello World!

逗號分隔列表

<csl>

道具

  • Nospace

 /** * @default false */nospace？：boolean;
 const string =（（
  <csl> <文本> Hello </text> <text> world </text>
  </csl>）;
結果
hello, world
 const string =（（
  <CSL Nospace> <文本> Hello </text> <文本> World </text>
  </csl>）;
結果
hello,world

聯盟

<union>

道具

  • Nospace

 /** * @default false */nospace？：boolean;
 const string =（（
  <union> <text>你好</text> <text> world </text>
  </union>）;
結果
hello | world
 const string =（（
  <聯合nospace> <文本>你好</text> <text> world </text>
  </union>）;
結果
hello|world

截面

道具

  • 分隔線

/** * @default“ ---” */divider？：string;

  • 框架

/***是否在身體前後添加分隔線。 * @default false */frame？：boolean;
 const string =（（
  <分割> <text>你好</text> <text> world！</text>
  </phistred>）;
結果
Hello
---
World!

套

集合會根據提供的兒童數量自動調整使用的分離器。

和

<and>

 const string =（（
  <和> <文本> a </text>
  </and>）;
結果
a
 const string =（（
  <and> <文本> a </text> <文本> b </text>
  </and>）;
結果
a and b
 const string =（（
  <和> <文本> a </text> <文本> b </text> <文本> c </text>
  </and>）;
結果
a, b, and c

和 /或

<andor>

 const string =（（
  <Andor> <text> a </text> <文本> b </text> <文本> c </text>
  </andor>）;
結果
a, b, and/or c

或者

<or>

 const string =（（
  <或> <文本> a </text> <文本> b </text> <文本> c </text>
  </或>）;
結果
a, b, or c

也不

<nor>

 const string =（（
  <nor> <文本> a </text> <文本> b </text> <文本> c </text>
  </nor>）;
結果
a, b, nor c

限制器

帽

<cap>元素允許您通過提供splitter功能和max數量的“單位”來限製字符串的長度。

道具

  • 最大限度

/***最大“單位”要包括。 * @default Infinity */max？：號碼;

  • 分離器

/***將字符串拆分為“單位”的函數。 * @default“ chars” */splitter？：“段落” | “線” | “空間” | “單詞” | “逗號” | “ chars” | （字符串：字符串）=> string [];

  • 省略

/***如果達到最大值，則可以將其附加到結尾。 *此字符串包含在最大計數中。 *如果``true`，''...“使用。 * @default未定義 */Ellipsis？：String |真的;
 const string = <cap max = {5}>你好，world！</cap>;
結果
Hello

優先事項

<priority>元素就像基於寬度的CSS媒體查詢字符串一樣。

<priority>沒有提供兒童列表，而是期望項目列表，每個項目都可以優先。首先將更高的優先級渲染（例如CSS中的z-index ），並且每個項目的默認優先級為0。還提供了幾種策略，以微調如何優先考慮項目。

優先元素也可以嵌套，這可以對呈現的內容進行極為細粒度的控制。優先示例目錄中提供了幾個示例。

道具

  • 最大限度

/***最大“單位”要包括。 * @default Infinity */max？：號碼;

  • 櫃檯

/***一個返回字符串中“單位”數量的函數。 * @default（string：string）=> string.length */counter？:（ string：string）=> numbers;

  • 專案

/***按優先順序渲染的項目。 */項目：（ prxmpt.Children | {
  /***此項目的優先級。首先包括更高的優先級項目。   * @default 0 */
  p？：號碼；
  /***渲染的內容。   */
  內容：（（容量：number）=> prxmpt.Children）| prxmpt.Children;}）[];

  • 戰略

優先考慮項目時使用的策略。
如果提供了多種策略，則嘗試隨後的策略以打破聯繫。

"priority" ：

優先考慮項目的優先級。
達到最大值後，繼續檢查剩餘物品是否合適。

"order-asc" ：

按提供的訂單確定項目的優先級。
達到最大值後，繼續檢查剩餘物品是否合適。

"order-desc" ：

優先考慮項目的優先級。
達到最大值後，繼續檢查剩餘物品是否合適。

"size-asc" ：

優先考慮尺寸順序的項目，最小至最大。
如果要包含盡可能多的項目，請使用。

"size-desc" ：

優先級的尺寸順序，最大至最小的項目。
如果您想包含盡可能少的項目，請使用。

 /** * @default [“優先級”，“ order-asc”] */策略？：PriorityStrategy | PriorityStrategy [];

  • Noskip

 /***如果“ true”，請在達到最大值後跳過項目。  * @default false */noskip？：boolean;
 const string =（（
  <PriortityMax = {15} join = {“ n”}項目= {[{p：2 content：“ test 1”}，{// p：0是默認內容：“這是一個超長字符串，贏得了' t fit。“}，{p：1，content：“ test 3”}]} />）;
結果
Test 1
Test 3

出口

渲染

createElement

導入{createElement}來自“@autossey/prxmpt”; const string = createElement（“ text”，{}，“ hello，world！”）;
結果
Hello, World!

render

導入{Render}來自“@autossey/prxmpt”; const string = Render（
  <文本>你好，世界！</text>）;
結果
Hello, World!

孩子們

hasChildren

如果提供的道具對象具有children財產，則返回為true 。

導入{haschildren}來自“@autossey/prxmpt”; if（haschildren（{兒童：“你好，world！”}））{）{
  // ...}

isChildren

如果提供的值是有效的PRXMPT元素子，則返回為true 。

導入{iSchildren}來自“@autossey/prxmpt”; if（iSchildren（“ H​​ello，world！”））{
  // ...}

分裂器

split

分離children在separator上。如果separator undefined ，則不會發生分裂。

從“@autossey/prxmpt”導入{split}; const children =（（
  <lined> <文本>你好</text> <文本> world！</text>
  </lined>）; // [“ Hello”，“ world！”] constrings = split（兒童，“ n”）;

paragraphs

在"nn"上分裂的children 。

lines

在"n"上分裂的children 。

spaces

在空格上分裂的children 。

words

在單詞邊界上分裂的children 。

commas

分裂的children "," 。

characters

分裂的children在"" 。

依賴性

  • @swc/core：babel的超級快速替代方案

  • 符合陣列：使任何值一個數組

  • 類型-json：類型檢查JSON對象

  • YAML：YAML的JavaScript解析器和弦樂器

開發依賴性

  • @autossey/eslint-config：使用ESLINT的項目的基礎。

  • @autossey/tsconfig：用於各種項目的基本TSCONFIG集合。

  • @jest/Globals

  • @swc/jest：開玩笑的SWC集成

  • @types/node：node.js的打字稿定義

  • ESLINT：JavaScript的基於AST的模式檢查器。

  • 開玩笑：令人愉快的JavaScript測試。

  • Typescript：Typescript是應用程序量表JavaScript開發的語言

執照

麻省理工學院 -麻省理工學院許可證

展開
附加信息
相關應用
爲您推薦
相關資訊 全部