prxmpt
v0.2.0
-การประดิษฐ์พร้อมกับ JSX-
NPM • GitHub •ปัญหา
PRXMPT เป็นเหมือน "tailwind สำหรับวิศวกรรมที่รวดเร็ว" มันมีชุดยูทิลิตี้สำหรับการจัดรูปแบบสตริงด้วย JSX
PRXMPT ได้รับการออกแบบมาสำหรับการสร้างอินพุตเป็น LLMS และรวมถึงองค์ประกอบที่มีประสิทธิภาพเช่น <iority> สำหรับการจัดการโทเค็น อย่างไรก็ตาม PRXMPT ยังมีองค์ประกอบของ Markdown และ HTML ทำให้เหมาะสำหรับการจัดรูปแบบเอาต์พุต LLM สำหรับผู้ใช้เช่นกัน
ความสามารถในการอ่าน - JSX ช่วยให้เราควบคุมช่องว่างได้มากขึ้นทำให้สามารถใช้รหัสที่อ่านได้มากขึ้น
? ️ การควบคุม - ด้วยอุปกรณ์ประกอบฉากในตัวเช่น hide เราสามารถควบคุมข้อความที่เราแสดงได้อย่างง่ายดายโดยไม่มี ternaries
- ความสามารถในการนำกลับมาใช้ใหม่ - ส่วนประกอบ PRXMPT ใช้อุปกรณ์ประกอบฉากเช่นเดียวกับส่วนประกอบ JSX ปกติทำให้ง่ายต่อการใช้ซ้ำ
ข้อความ const = (
<lined> <h1> นี่คือบรรทัดแรก </h1> <text hide = {hideline2}> นี่คือบรรทัดที่สอง </xtreat> <ว่าง/> <xtyt> นี่เป็นบรรทัดที่ยาวขึ้น ทำลายแท็กข้อความ
เรายังสามารถเริ่มต้นอีกบรรทัดที่นี่และจะมีการเพิ่มพื้นที่
</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 ติดตั้ง @autossey/prxmpt
เส้นด้ายเพิ่ม @autossey/prxmpt
pnpm เพิ่ม @autossey/prxmpt
Bun Add @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*/ส่งออก const myComponent = () => ( <ข้อความ> สวัสดีโลก! </text>);
มีหลายตัวอย่างในไดเรกทอรีตัวอย่าง:
ตัวอย่างการใช้องค์ประกอบ:
อ่างครัว (แสดงองค์ประกอบหลายอย่าง)
ลำดับความสำคัญ (ตัวอย่างเล็ก ๆ น้อย ๆ ขององค์ประกอบ <priority> )
ตัวอย่างการตั้งค่า (typescript):
ขนมปัง
BUN (โหมดคลาสสิก)
next.js
SWC
SWC (โหมดคลาสสิก)
ts-node
TS-Node (โหมดคลาสสิก)
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> (Strikethrough)
<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 = <xtreat> สวัสดีโลก! </text>;
Hello, World!
ข้อความยังสามารถซ่อนได้ด้วยเสา hide :
const string = <text> hello <text hide>, World </ide>! </text>;
Hello!
เนื่องจาก <text> เป็นฐานขององค์ประกอบอื่น ๆ ส่วนใหญ่อุปกรณ์ประกอบฉากที่มีให้สามารถใช้กับองค์ประกอบอื่น ๆ ส่วนใหญ่ได้
PRXMPT ปฏิบัติต่อเด็ก ๆ เป็นหลายสายซึ่งหมายความว่า <text> ยังสามารถให้ฟังก์ชั่นอาร์เรย์หลายอย่างสำหรับการทำแผนที่การกรองและการเข้าร่วมเด็ก
ซ่อน
/*** ป้องกันไม่ให้องค์ประกอบถูกแสดงผล * @default False */ซ่อน?: บูลีน;
กรอง
/*** ฟังก์ชั่นการกรองเด็ก * @default (โหนด) => true */ตัวกรอง?: (โหนด: prxmpt.children, ดัชนี: หมายเลข, arr: prxmpt.children []) => boolean;
แผนที่
/*** ฟังก์ชั่นที่แมปเด็กแต่ละคนเข้ากับองค์ประกอบใหม่ * @default (โหนด) => prxmpt.render (โหนด) */แผนที่?: (โหนด: prxmpt.children, ดัชนี: หมายเลข, arr: prxmpt.children []) => prxmpt.jsx.element;
ย้อนกลับ
/*** ย้อนกลับลำดับของเด็ก ๆ */ย้อนกลับ?: บูลีน;
เข้าร่วม
/*** องค์ประกอบที่จะแทรกระหว่างเด็กแต่ละคน * @default "" */เข้าร่วม?: prxmpt.children;
ทำซ้ำ
/** * @default 1 */ทำซ้ำ?: หมายเลข;
ตัดแต่ง
/*** `true`: ตัดช่องว่างจากจุดเริ่มต้นและจุดสิ้นสุดขององค์ประกอบ * * `" Start "`: ตัดช่องว่างจากจุดเริ่มต้นขององค์ประกอบ * * `" สิ้นสุด "`: ตัดช่องว่างจากส่วนท้ายขององค์ประกอบ * * @default False */trim?: บูลีน | Trimside;
ปลอก
/*** แปลงองค์ประกอบเป็นปลอกที่กำหนด * @default undefined */casing?: casing;
คำนำหน้า
/*** องค์ประกอบที่จะเติมเต็มให้กับองค์ประกอบ * @default "" */คำนำหน้า?: prxmpt.children;
คำต่อท้าย
/*** องค์ประกอบที่จะผนวกเข้ากับองค์ประกอบ * @default "" */คำต่อท้าย?: prxmpt.children;
ทำให้เป็นรอย
/*** ใช้การเยื้องกับแต่ละบรรทัดขององค์ประกอบ * * ถ้า `true` การเยื้องจะใช้โดยใช้ 2 ช่องว่าง * * หากมีการให้ตัวเลขจำนวนช่องว่างนั้นจะถูกใช้ * * หากมีการจัดเตรียม `" t "` จะใช้อักขระแท็บเดียว * * @default False */Intent?: บูลีน | หมายเลข | "T";
ปิดกั้น
/*** ผนวกสายใหม่เข้าสู่ส่วนท้ายขององค์ประกอบ * @default False */block?: บูลีน;
<empty>
องค์ประกอบ <empty> ส่งคืนสตริงเปล่า:
// "" const string = <ว่าง />;
<empty> มักจะมีประโยชน์ในฐานะลูกขององค์ประกอบที่เข้าร่วมลูก ๆ ของพวกเขาในตัวคั่น
สตริง const = ( <Lined> <text> บรรทัด 1 </text> <ว่าง/> <xtreag> บรรทัด 3 </text> </lined>);
Line 1 Line 2
<space>
องค์ประกอบ <space> ส่งคืนพื้นที่:
// "" const string = <space />;
<tab>
ตามตัวอักษร
/*** ถ้าเป็นจริงให้ใช้ตัวอักษรแท็บตัวอักษร มิฉะนั้นให้ใช้ช่องว่าง * @default False */ตัวอักษร?: บูลีน;
ความกว้าง
/** * จำนวนอักขระต่อแท็บ * @default 1 ถ้า `ตัวอักษร 'เป็นจริงมิฉะนั้น 2 */width?: จำนวน;
// "" const string = <tab width = {4} /> <ellipsis>
สตริง const = <ellipsis />;
...
<na>
สตริง const = <a />;
n/a
-
วงเล็บ <parens>
const string = <parens> สวัสดีโลก! </parens>;
(Hello, World!)
<square>
const string = <mareal> สวัสดีโลก! </square>;
[Hello, World!]
<curly>
const string = <urly> สวัสดีโลก! </urly>;
{Hello, World!} <angle>
const string = <single> สวัสดีโลก! </langle>;
<Hello, World!>
<sq>
สตริง const = <sq> สวัสดีโลก! </stq>;
'Hello, World!'
<dq>
สตริง const = <DQ> สวัสดีโลก! </DQ>;
"Hello, World!"
<bq>
สตริง const = <bq> สวัสดีโลก! </bq>;
`Hello, World!`
<tsq>
สตริง const = <tsq> สวัสดีโลก! </tsq>;
''' Hello, World! '''
<tdq>
สตริง const = <tdq> สวัสดีโลก! </tdq>;
""" Hello, World! """
<tbq>
const tbq = <tbq> สวัสดีโลก! </tbq>;
- สวัสดีโลก! -
<comment type="slash">
const slash = <ความคิดเห็น type = "slash"> สวัสดีโลก! </ความคิดเห็น>;
// Hello, World!
<comment type="hash">
const hash = <ความคิดเห็น type = "hash"> สวัสดีโลก! </comment>;
# Hello, World!
<comment type="dash">
const dash = <ความคิดเห็น type = "dash"> สวัสดีโลก! </comment>;
-- Hello, World!
<comment type="html">
const html = <ความคิดเห็น type = "html"> สวัสดีโลก! </ความคิดเห็น>;
<!-- Hello, World! -->
<state>
const state = <state> สวัสดีโลก! </state>;
Hello, World.
<ask>
const ask = <ay> สวัสดีโลก! </sks>;
Hello, World?
<exclaim>
const exclaim = <excreau> สวัสดีโลก!
Hello, World!
<kv>
สำคัญ
/*** กุญแจสำคัญในการแสดงผล */คีย์: prxmpt.children;
คีย์เคส
/*** กรณีที่จะใช้กับคีย์ * @default undefined */keycase?: "Upper" | "ต่ำกว่า" | "ทุน" | "ชื่อ";
ห่อ
/*** แทนที่พฤติกรรมเริ่มต้นสำหรับการห่อค่า * @default undefined */wrap?: บูลีน;
นอต
/*** ถ้าเป็นจริงอย่าเพิ่มช่องว่างระหว่างคีย์และค่า * ใช้เฉพาะเมื่อไม่ห่อ * @default False */nospace?: บูลีน;
const string = <kv key = "hello"> World </kv>;
Hello: World
เมื่อเด็กมีหลายบรรทัดค่าจะถูกแสดงผลเริ่มต้นบนบรรทัดใหม่โดยค่าเริ่มต้น:
const Worlds = (
<tdq Join = {"n"}> <text> World1 </texp
</tdq>); const string = <kv key = "hello"> {Worlds} </kv>;Hello: """ World1 World2 World3 """
องค์ประกอบ HTML ถูกสร้างขึ้นที่ด้านบนขององค์ประกอบ <tag> แต่ละองค์ประกอบ HTML มีเสา html แบบบูลีนที่ตั้งค่าเป็นเท็จโดยค่าเริ่มต้น เมื่อ html เป็นจริงองค์ประกอบจะแสดงเป็น HTML มิฉะนั้นองค์ประกอบจะแสดงผลเป็น markdown เทียบเท่า
นอกจากนี้คุณลักษณะที่กำหนดเองสามารถตั้งค่าได้โดยใช้ attributes Prop
<tag>
ชื่อ
/*** ชื่อของแท็ก */ชื่อ: สตริง;
มีความผิดปกติ
/** * @default false */noindent?: บูลีน;
ห่อ
/*** ค่าเริ่มต้นเป็นจริงหากเนื้อหามีบรรทัดใหม่ */ห่อ?: บูลีน;
const tag = <tag name = "mytag"> สวัสดีโลก! </gat>;
<mytag>Hello, World!</mytag>
หากไม่มีการให้เด็กแท็กจะแสดงเป็นแท็กปิดตัวเอง:
const tag = <tag name = "mytag" />;
<mytag />
<br />
// "n" const br = <br />;
const br = <br html />;
<br />
<hr />
ความกว้าง
/** * @default 3 */width?: จำนวน;
ถ่าน
/** * @default "-" */char?: "-" | - - -
const hr = <hr />;
---
const hr = <hr />;
<hr />
<a>
href
/*** URL ของลิงค์ */href: สตริง;
ชื่อ
/*** ชื่อเรื่องสำหรับลิงค์ */ชื่อเรื่อง?: สตริง;
สตริง const = <a href = "https://example.com" title = "ชื่อ"> สวัสดีโลก! </a>;
[Hello, World!](https://example.com "A Title")
const string = <a href = "https://example.com" title = "ชื่อ" html> สวัสดีโลก! </a>;
<a href="https://example.com" title="A Title">Hello, World!</a>
<img>
SRC
/*** URL ของภาพ */href: สตริง;
ชื่อ
/*** ชื่อเรื่องสำหรับภาพ */ชื่อเรื่อง?: สตริง;
const string = <img src = "https://example.com" title = "ชื่อ"> สวัสดีโลก! </img>;
const string = <img src = "https://example.com" title = "ชื่อ" html> สวัสดีโลก! </img>;
<img src="https://example.com" alt="Hello, World!" title="A Title" />
<h1>
สตริง const = <h1> สวัสดีโลก! </h1>;
# Hello, World!
สตริง const = <h1 html> สวัสดีโลก! </h1>;
<h1>Hello, World!</h1>
<h2>
สตริง const = <h2> สวัสดีโลก! </h2>;
## Hello, World!
สตริง const = <h2 html> สวัสดีโลก! </h2>;
<h2>Hello, World!</h2>
<h3>
สตริง const = <h3> สวัสดีโลก! </h3>;
### Hello, World!
สตริง const = <h3 html> สวัสดีโลก! </h3>;
<h3>Hello, World!</h3>
<h4>
สตริง const = <h4> สวัสดีโลก! </h4>;
#### Hello, World!
สตริง const = <h4 html> สวัสดีโลก! </h4>;
<h4>Hello, World!</h4>
<h5>
สตริง const = <h5> สวัสดีโลก! </h5>;
##### Hello, World!
สตริง const = <h5 html> สวัสดีโลก! </h5>;
<h5>Hello, World!</h5>
<h6>
สตริง const = <h6> สวัสดีโลก! </h6>;
###### Hello, World!
สตริง const = <h6 html> สวัสดีโลก! </h6>;
<h6>Hello, World!</h6>
<ol>
OnlyMarkiflist
/*** รวมเฉพาะเครื่องหมายหากรายการมีมากกว่าหนึ่งรายการ * @default False */OnlyMarkiflist?: บูลีน;
สตริง const = ( <ol> <text> สวัสดี </text> <text> โลก </text> </ol>);
1. Hello 2. World
<ul>
OnlyMarkiflist
/*** รวมเฉพาะเครื่องหมายหากรายการมีมากกว่าหนึ่งรายการ * @default False */OnlyMarkiflist?: บูลีน;
สตริง const = ( <ul> <text> สวัสดี </text> <text> โลก </text> </ul>);
- Hello - World
<cl>
รายการ
รายการ: {
/** * @default False */
ตรวจสอบ?: บูลีน;
/*** เนื้อหาที่จะแสดงผลหลังจากช่องทำเครื่องหมาย -
เนื้อหา: prxmpt.children;} []; สตริง const = (
<clitems = {[{เนื้อหา: "สวัสดี"}, {เนื้อหา: "โลก", ตรวจสอบ: จริง},]}
-- [ ] Hello - [x] World
<dl>
รายการ
/*** รายการที่จะแสดงผล */รายการ: บันทึก <string, prxmpt.children>;
หอประชุม
/*** ปลอกที่จะใช้กับแต่ละคีย์ * @default undefined */termcase?: "Upper" | "ต่ำกว่า" | "ทุน" | "ชื่อ";
ช่องว่าง
/*** จำนวนช่องว่างที่เรียงรายไปด้วยการแทรกระหว่างแต่ละรายการ * @default 0 */Space?: หมายเลข;
ห่อ
/*** แทนที่พฤติกรรมเริ่มต้นสำหรับการห่อค่า * @default undefined */wrap?: บูลีน;
สตริง const = (
<dlItems = {{สวัสดี: "โลก", foo: "bar"}}
-Hello: World Foo: Bar
<i>
ถ่าน
/***@default "_"*/char?: "*" | -
สตริง const = <i> สวัสดีโลก! </i>;
_Hello, World!_
สตริง const = <i html> สวัสดีโลก! </i>;
<i>Hello, World!</i>
<b>
ถ่าน
/***@default "*"*/char?: "*" | -
สตริง const = <b> สวัสดีโลก! </b>;
**Hello, World!**
สตริง const = <b html> สวัสดีโลก! </b>;
<b>Hello, World!</b>
<s>
สตริง const = <s> สวัสดีโลก! </s>;
~~Hello, World!~~
สตริง const = <s html> สวัสดีโลก! </s>;
<s>Hello, World!</s>
<code>
สตริง const = <code> สวัสดีโลก! </code>;
`Hello, World!`
สตริง const = <รหัส html> สวัสดีโลก! </code>;
<code>Hello, World!</code>
<span>
เมื่อแสดงเป็นข้อความ <span> เพียงแค่ทำให้ลูก ๆ ของมันเช่น <text> ::
สตริง const = <span> สวัสดีโลก! </span>;
Hello, World!
const string = <span html> สวัสดีโลก! </pan>;
<span>Hello, World!</span>
<p>
เมื่อแสดงเป็นข้อความแท็กย่อหน้าจะเพิ่มบรรทัดใหม่ในตอนท้ายขององค์ประกอบ:
สตริง const = <p> สวัสดีโลก! </p>;
Hello, World!
สตริง const = <p html> สวัสดีโลก! </p>;
<p>Hello, World!</p>
<blockquote>
สตริง const = (
<blockQuote Join = {"n"}> <text> สวัสดี </text> <ว่าง/> <xtext> โลก! </text>
</blockquote>);> Hello > > World!
สตริง const = <blockquote html> สวัสดีโลก! </blockquote>;
<blockquote>Hello, World!</blockquote>
<q>
พิมพ์
/** * @default "double" */type?: "single" | "Double" | "backtick";
องค์ประกอบใบเสนอราคาส่งคืนใบเสนอราคาสามเท่าหากเด็กมีสายใหม่มิฉะนั้นจะส่งคืนใบเสนอราคาเดียว
สตริง const = <q> สวัสดีโลก! </q>;
"Hello, World!"
const string = <q> hello <br /> world </q>;
""" Hello, World! """
สตริง const = <q html> สวัสดีโลก! </q>;
<q>Hello, World!</q>
<pre>
สตริง const = <pre> สวัสดีโลก! </pre>;
- สวัสดีโลก! -
const string = <pre html> สวัสดีโลก! </pre>;
<pre>Hello, World!</pre>
<num>
เพิ่ม
/*** เพิ่มค่าให้กับหมายเลข */เพิ่ม?: หมายเลข;
นาที
/*** ค่าต่ำสุด นำไปใช้หลังจาก `add` */นาที?: หมายเลข;
สูงสุด
/*** ค่าสูงสุด นำไปใช้หลังจาก `add` */สูงสุด?: หมายเลข;
ที่ตายตัว
/*** จำนวนทศนิยม */แก้ไข?: หมายเลข;
const string = <num recide = {2}> 1 </um>;1.00
สตริง const = <num min = {1}> 0 </um>;1
ค่า
/** * @default Date.now () */ค่า?: วันที่ | สตริง | ตัวเลข;
วันที่
/** * @default "สั้น" */dateformat?: "Long" | "ปานกลาง" | "สั้น" | "เต็ม";
เวลา
/** * @default "สั้น" */timeFormat?: "ยาว" | "ปานกลาง" | "สั้น" | "เต็ม";
สตริง const = <datetime />;
September 23, 2023 at 5:17 PM
ค่า
/** * @default Date.now () */ค่า?: วันที่ | สตริง | ตัวเลข;
รูปแบบ
/** * @default "สั้น" */รูปแบบ?: "ยาว" | "ปานกลาง" | "สั้น" | "เต็ม";
สตริง const = <วันที่ />;
September 23, 2023
ค่า
/** * @default Date.now () */ค่า?: วันที่ | สตริง | ตัวเลข;
รูปแบบ
/** * @default "สั้น" */รูปแบบ?: "ยาว" | "ปานกลาง" | "สั้น" | "เต็ม";
สตริง const = <time />;
5:17 PM
ค่า
/** * @default Date.now () */ค่า?: วันที่ | สตริง | ตัวเลข;
สตริง const = <ปี />
2023
ค่า
/** * @default Date.now () */ค่า?: วันที่ | สตริง | ตัวเลข;
รูปแบบ
/** * @default "หมายเลข" */รูปแบบ?: "หมายเลข" | "ยาว" | "สั้น" | "แคบ";
สตริง const = <เดือน />
8
สตริง const = <month format = "long" />>>>
September
สตริง const = <month format = "short" />>>>
Sep
สตริง const = <month format = "แคบ" />>>
S
ค่า
/** * @default Date.now () */ค่า?: วันที่ | สตริง | ตัวเลข;
รูปแบบ
/** * @default "หมายเลข" */รูปแบบ?: "หมายเลข" | "ยาว" | "สั้น" | "แคบ";
สตริง const = <day />
6
สตริง const = <day format = "long" />>>>
Saturday
สตริง const = <day format = "short" />>>
Sat
สตริง const = <day format = "แคบ" />
S
ค่า
/** * @default Date.now () */ค่า?: วันที่ | สตริง | ตัวเลข;
รอบ
/** * @default "12" */รอบ?: "12" | "24";
สตริง const = <ชั่วโมง />
5
สตริง const = <ชั่วโมงรอบ = "24">
17
ค่า
/** * @default Date.now () */ค่า?: วันที่ | สตริง | ตัวเลข;
สตริง const = <นาที />
42
ค่า
/** * @default Date.now () */ค่า?: วันที่ | สตริง | ตัวเลข;
สตริง const = <วินาที />
42
ค่า
/** * @default Date.now () */ค่า?: วันที่ | สตริง | ตัวเลข;
สตริง const = <มิลลิวินาที />
999
ค่า
/*** สิ้นสุดระยะเวลา * @default date.now () */ค่า?: วันที่ | สตริง | ตัวเลข;
เนื่องจาก
/*** จุดเริ่มต้นของระยะเวลา */ตั้งแต่: วันที่ | สตริง | ตัวเลข;
สตริง const = <ระยะเวลาตั้งแต่ = {"กันยายน 2021"} />2 years
ข้อมูล
/*** ข้อมูลที่จะสตริง */data: nestedoptionaljsonvalue;
สวย
/** * @default false */สวย?: บูลีน;
สตริง const = <json data = {{hello: "World"}} pretty />;{
"Hello": "World"
}ข้อมูล
/*** ข้อมูลที่จะสตริง */data: nestedoptionaljsonvalue;
Nostartmarker
/** * @default False */nostartmarker?: บูลีน;
เป็นลำดับ
/** * @default false */sequenceindent?: บูลีน;
สตริง const = <yaml data = {{hello: "World"}} />;--- hello: world
<upper>
สตริง const = <pond> สวัสดีโลก! </pond>;
HELLO, WORLD!
<lower>
const string = <lower> สวัสดีโลก! </lower>;
hello, world!
<capital>
const string = <capital> สวัสดีโลก! </ciple>;
Hello, world!
<title>
สตริง const = <title> สวัสดีโลก! </title>;
Hello, World!
// "สวัสดีโลก!" สตริง const = <Trim> สวัสดีโลก! </trim>;
Hello, World!
กับ
/*** ค่าที่ใช้กับทั้ง `คำนำหน้า 'และ` ต่อท้าย */ด้วย: prxmpt.children;
สตริง const = <เฟรมด้วย = "-"> สวัสดีโลก! </prame>;
-- Hello, World! --
<lined>
สตริง const = ( <Nined> <text> สวัสดี </text> <text> โลก! </text> </lined>);
Hello World!
<spaced>
สตริง const = ( <spaced> <text> สวัสดี </text> <xtext> โลก! </text> </spaced>);
Hello World!
<csl>
นอต
/** * @default false */nospace?: บูลีน;
สตริง const = ( <CSL> <text> สวัสดี </text> <xtext> โลก </text> </csl>);
hello, world
สตริง const = ( <CSL NOSPACE> <Text> สวัสดี </text> <xtext> World </text> </csl>);
hello,world
<union>
นอต
/** * @default false */nospace?: บูลีน;
สตริง const = ( <Ionion> <xtex> สวัสดี </text> <text> World </text> </ion>);
hello | world
สตริง const = ( <Union Nospace> <text> Hello </text> <xtext> World </text> </ion>);
hello|world
ผู้แบ่งแยก
/** * @default "---" */Divider?: String;
กรอบ
/*** ไม่ว่าจะเพิ่มตัวแบ่งก่อนและหลังร่างกาย * @default False */frame?: บูลีน;
สตริง const = ( <SectionEd> <text> สวัสดี </text> <text> โลก! </text> </ส่วน>);
Hello --- World!
ชุดจะปรับตัวคั่นที่ใช้โดยอัตโนมัติตามจำนวนเด็กที่ให้ไว้
<and>
สตริง const = ( <และ> <text> a </text> </และ>);
a
สตริง const = ( <และ> <text> a </text> <text> b </text> </และ>);
a and b
สตริง const = ( <และ> <text> a </text> <text> b </text> <text> c </text> </และ>);
a, b, and c
<andor>
สตริง const = ( <andor> <text> a </text> <text> b </text> <text> c </text> </Andor>);
a, b, and/or c
<or>
สตริง const = ( <or> <text> a </text> <text> b </text> <text> c </text> </หรือ>);
a, b, or c
<nor>
สตริง const = ( <or> <text> a </text> <text> b </text> <text> c </text> </or>);
a, b, nor c
องค์ประกอบ <cap> ช่วยให้คุณสามารถจำกัดความยาวของสตริงได้โดยให้ฟังก์ชัน splitter และจำนวน "หน่วย" max ที่จะอนุญาต
สูงสุด
/*** หน่วย "สูงสุด" ที่จะรวม * @default Infinity */max?: number;
ตัวแยก
/*** ฟังก์ชั่นที่แยกสตริงออกเป็น "หน่วย" * @default "Chars" */splitter?: "ย่อหน้า" | "บรรทัด" | "ช่องว่าง" | "คำพูด" | "เครื่องหมายจุลภาค" | "Chars" | (สตริง: สตริง) => สตริง [];
จุดไข่ปลา
/*** สตริงที่จะผนวกเข้ากับจุดสิ้นสุดหากถึงสูงสุด * สตริงนี้รวมอยู่ในจำนวนสูงสุด * ถ้า `true`," ... "ถูกใช้ * @default undefined */ellipsis?: String | จริง;
สตริง const = <cap max = {5}> สวัสดีโลก! </cap>;Hello
องค์ประกอบ <priority> เป็นเหมือนแบบสอบถาม CSS Media ที่ใช้ความกว้างสำหรับสตริง
แทนที่จะให้รายชื่อเด็ก <priority> คาดว่าจะมีรายการรายการซึ่งแต่ละรายการมีความสำคัญ ลำดับความสำคัญที่สูงกว่าจะแสดงผลก่อน (เช่น z-index ใน CSS) และแต่ละรายการมีลำดับความสำคัญเริ่มต้นที่ 0 มีกลยุทธ์หลายอย่างเช่นเดียวกับการปรับแต่งวิธีการจัดลำดับความสำคัญของรายการ
องค์ประกอบลำดับความสำคัญยังสามารถซ้อนกันซึ่งช่วยให้สามารถควบคุมเนื้อหาได้อย่างละเอียดมากว่าเนื้อหาใดที่แสดงผล มีหลายตัวอย่างในไดเรกทอรีตัวอย่างลำดับความสำคัญ
สูงสุด
/*** หน่วย "สูงสุด" ที่จะรวม * @default Infinity */max?: number;
เคาน์เตอร์
/*** ฟังก์ชั่นที่ส่งคืนจำนวน "หน่วย" ในสตริง * @default (สตริง: สตริง) => string.length */ตัวนับ?: (สตริง: สตริง) => number;
รายการ
/*** รายการที่จะแสดงตามลำดับความสำคัญ */รายการ: (prxmpt.children | {
/*** ลำดับความสำคัญของรายการนี้ รายการลำดับความสำคัญที่สูงกว่าจะรวมอยู่ก่อน * @default 0 */
P?: จำนวน;
/*** เนื้อหาที่จะแสดงผล -
เนื้อหา: ((ความจุ: หมายเลข) => prxmpt.children) | prxmpt.children;}) [];กลยุทธ์
กลยุทธ์ที่จะใช้เมื่อจัดลำดับความสำคัญของรายการ
หากมีการจัดกลยุทธ์หลายกลยุทธ์แล้วกลยุทธ์ที่ตามมาจะถูกลองเพื่อทำลายความสัมพันธ์
"priority" :
จัดลำดับความสำคัญของรายการโดยลำดับความสำคัญที่ให้ไว้
เมื่อถึงสูงสุดแล้วให้ตรวจสอบต่อไปว่ารายการที่เหลือพอดีหรือไม่
"order-asc" :
จัดลำดับความสำคัญของรายการตามคำสั่งที่ให้ไว้
เมื่อถึงสูงสุดแล้วให้ตรวจสอบต่อไปว่ารายการที่เหลือพอดีหรือไม่
"order-desc" :
จัดลำดับความสำคัญของรายการในการย้อนกลับของคำสั่งที่ให้ไว้
เมื่อถึงสูงสุดแล้วให้ตรวจสอบต่อไปว่ารายการที่เหลือพอดีหรือไม่
"size-asc" :
จัดลำดับความสำคัญของรายการตามลำดับขนาดเล็กที่สุดถึงใหญ่ที่สุด
ใช้หากคุณต้องการรวมรายการให้ได้มากที่สุด
"size-desc" :
รายการที่จัดลำดับความสำคัญตามลำดับขนาดใหญ่ที่สุดถึงเล็กที่สุด
ใช้หากคุณต้องการรวมรายการให้น้อยที่สุด
/** * @default ["ลำดับความสำคัญ", "order-asc"] */กลยุทธ์?: prioritystrategy | Prioritystrategy [];
noskip
/*** ถ้า `true` อย่าข้ามรายการหลังจากถึงสูงสุด * @default False */noskip?: บูลีน;
สตริง const = (
<priorityMax = {15} เข้าร่วม = {"n"} items = {[{p: 2 เนื้อหา: "ทดสอบ 1"}, {// p: 0 เป็นเนื้อหาเริ่มต้น: "นี่คือสตริงยาวสุด ๆ ที่ชนะ ' t พอดี "}, {p: 1, เนื้อหา:" ทดสอบ 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 ส่งคืน true หากวัตถุอุปกรณ์ประกอบฉากที่ให้ไว้มีคุณสมบัติ children
นำเข้า {haschildren} จาก "@autossey/prxmpt"; ถ้า (haschildren ({เด็ก: "สวัสดีโลก!"})) {
-isChildren ส่งคืน true ถ้าค่าที่ให้คือเด็กองค์ประกอบ PRXMPT ที่ถูกต้อง
นำเข้า {ischildren} จาก "@autossey/prxmpt"; ถ้า (ischildren ("สวัสดีโลก!") {
-split แยก children บน separator หาก separator undefined จะไม่มีการแยกเกิดขึ้น
นำเข้า {split} จาก "@autossey/prxmpt"; const children = (
<Nined> <text> สวัสดี </text> <text> โลก! </text>
</lined>); // ["สวัสดี", "World!"] Strings const = split (เด็ก, "n");paragraphs แยก children ใน "nn"
lines แยก children ใน "n"
spaces แยก children ในช่องว่าง
words แยก children ในขอบเขตคำ
commas แยก children ใน ","
characters แยก children ใน ""
@SWC/CORE: ทางเลือกที่เร็วที่สุดสำหรับ Babel
As-typed-array: สร้างค่าใด ๆ เป็นอาร์เรย์
Types-JSON: ประเภทการตรวจสอบสำหรับวัตถุ JSON
Yaml: JavaScript Parser และ Stringifier สำหรับ Yaml
@autossey/eslint-config: ฐานสำหรับโครงการที่ใช้ ESLINT
@autossey/tsconfig: ชุดของฐาน tsconfigs สำหรับโครงการประเภทต่างๆ
@jest/globals
@SWC/JEST: SWC Integration สำหรับ JEST
@types/node: typescript refinitions สำหรับ node.js
ESLINT: ตัวตรวจสอบรูปแบบ AST ที่ใช้ JavaScript
jest: การทดสอบ JavaScript ที่น่ายินดี
TypeScript: TypeScript เป็นภาษาสำหรับการพัฒนา JavaScript ในระดับแอปพลิเคชัน
MIT - ใบอนุญาต MIT
