prxmpt
v0.2.0
-صياغة سريعة مع JSX-
NPM • github • القضايا
PRXMPT يشبه "Tailwind للهندسة المطالبة" . يوفر مجموعة من الأدوات المساعدة لتنسيق السلاسل مع JSX.
تم تصميم PRXMPT لتشكيل المدخلات إلى LLMS ، ويتضمن عناصر قوية مثل <pridality> لإدارة الرموز. ومع ذلك ، يوفر PRXMPT أيضًا عناصر Markdown و HTML ، مما يجعلها مثالية لتنسيق مخرجات LLM للمستخدمين النهائيين أيضًا.
قابلية القراءة - JSX يمنحنا مزيدًا من التحكم في المساحة البيضاء ، مما يتيح المزيد من التعليمات البرمجية القابلة للقراءة.
control - مع الدعائم المدمجة مثل hide ، يمكننا بسهولة التحكم في النص الذي نعرضه بدون Ternaries.
؟ إعادة استخدام - مكونات PRXMPT تأخذ الدعائم تمامًا مثل مكونات JSX العادية ، مما يجعلها سهلة إعادة استخدامها.
نص const = (
<lining> <h1> هذا هو السطر الأول. </h1> <text Hide = {HideLine2}> إليك سطر ثانٍ. </text> <فارغ/> <Text> هذا خط أطول ، لذلك سنقوم كسر علامة النص.
يمكننا حتى بدء سطر آخر هنا ، وسيتم إضافة مساحة. </text>
</lining>) ؛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 = `# هذا هو السطر الأول. $ {HideLine2؟ "Nhere هو السطر الثاني." : ""} nnthis هو خط أطول ، لذلك نحن الآن خارج الصفحة. يمكننا حتى بدء سطر آخر هنا ، لكنني لا أوصي به.NPM تثبيت @autossey/prxmpt
الغزل إضافة @autossey/prxmpt
PNPM إضافة @autossey/prxmpt
BUN ADD @AUTOSSEY/PRXMPT
يوفر PRXMPT قاعدة tsconfig.json يمكنك تمديدها:
{"تمديد": "@autossey/prxmpt/tsconfig.json"}ملاحظة: لا يبدو أن BUN يكتشف PRXMPT بشكل صحيح عند استخدام طريقة "تمديد".
بدلاً من ذلك ، يمكنك ببساطة إضافة الحقول التالية إلى tsconfig.json :
{"برنامج التحويل البرمجي": {"jsx": "React-JSX" ، "JSimportSource": "@Autossey/Prxmpt" ، "Module": "NodeNext"
}
}يجب أن تكون قادرًا على استخدام عناصر prxmpt الآن ، دون الاستيراد:
تصدير const myComponent = () => ( <eved> مرحبًا ، العالم! </text>) ؛
إذا كنت تستخدم prxmpt مع React ، أضف السطر التالي في الجزء العلوي من كل ملف يستخدم prxmpt بدلاً من ذلك:
/** jsximportsource @autossey/prxmpt*/export const myComponent = () => ( <eved> مرحبًا ، العالم! </text>) ؛
يتم توفير العديد من الأمثلة في دليل الأمثلة:
أمثلة استخدام العنصر:
حوض المطبخ (يعرض العديد من العناصر)
الأولوية (بعض الأمثلة على عنصر <priority> )
أمثلة الإعداد (TypeScript):
كعكة
كعكة (الوضع الكلاسيكي)
Next.js
SWC
SWC (الوضع الكلاسيكي)
TS-DODE
TS-Node (الوضع الكلاسيكي)
TSC
TSC (الوضع الكلاسيكي)
أمثلة الإعداد (JavaScript):
العقدة -تحميل @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 string = <Text> مرحبًا ، العالم! </text> ؛
Hello, World!
يمكن أيضًا إخفاء النص مع hide الدعامة:
const string = <Text> Hello <Text Hide> ، World </friek>! </evide> ؛
Hello!
نظرًا لأن <text> هو قاعدة معظم العناصر الأخرى ، يمكن استخدام الدعائم التي توفرها مع معظم العناصر الأخرى.
يعامل PRXMPT للأطفال كمجموعة من الأوتار ، مما يعني أن <text> يمكن أن يوفر أيضًا العديد من وظائف الصفيف لرسم الخرائط والتصفية والانضمام إلى الأطفال.
يخفي
/*** منع العنصر من تقديمه. * default false */إخفاء؟: Boolean ؛
فلتر
/*** وظيفة لتصفية الأطفال. * default (node) => true */filter؟: (العقدة: prxmpt.children ، الفهرس: الرقم ، arr: prxmpt.children []) => boolean ؛
رسم خريطة
/*** وظيفة تقوم بتعيين كل طفل لعنصر جديد. * default (node) => prxmpt.render (node) */map؟: (node: prxmpt.children ، index: number ، arr: prxmpt.children []) => prxmpt.jsx.element ؛
يعكس
/*** عكس ترتيب الأطفال. */عكس؟: منطقية ؛
ينضم
/*** عنصر لإدراج بين كل طفل. * default "" */join؟: prxmpt.children ؛
يكرر
/** * default 1 */كرر؟: الرقم ؛
تقليم
/*** `true`: تقليم المساحة البيضاء من بداية ونهاية العنصر. * * "ابدأ" `: تقليم المساحة البيضاء من بداية العنصر. * * `" نهاية "`: تقليم المساحة البيضاء من نهاية العنصر. * * default false */trim؟: Boolean | تقليم
غلاف
/*** تحويل العنصر إلى غلاف معين. * default غير محدد */غلاف؟: غلاف ؛
بادئة
/*** عنصر لإعداد العنصر. * default "" */prefix؟: prxmpt.children ؛
لاحقة
/*** عنصر لإلحاق العنصر. * default "" */لاحقة؟: prxmpt.children ؛
البادئة
/*** تطبيق المسافة البادئة على كل سطر من العنصر. * * إذا تم تطبيق المسافة البادئة باستخدام مساحين. * * إذا تم توفير رقم ، يتم استخدام هذا العدد من المساحات. * * إذا تم توفير `" t "` ، يتم استخدام حرف علامة تبويب واحدة. * * default false */padent؟: Boolean | رقم | "ر" ؛
حاجز
/*** إلحاق خط جديد حتى نهاية العنصر. * default false */block؟: boolean ؛
<empty>
يقوم عنصر <empty> بإرجاع سلسلة فارغة:
// "" const string = <فارغ /> ؛
<empty> غالبًا ما يكون مفيدًا كطفل للعناصر التي تنضم إلى أطفالهم في بعض المحدد.
سلسلة const = ( <lining> <evide> السطر 1 </text> <فارغ/> <extre> السطر 3 <//text> </lining>) ؛
Line 1 Line 2
<space>
يعيد عنصر <space> مساحة:
// "" const string = <Space /> ؛
<tab>
حرفي
/*** إذا كان ذلك صحيحًا ، فاستخدم حرف علامة تبويب حرفية. خلاف ذلك ، استخدم المساحات. * default false */حرفي؟: منطقية ؛
عرض
/** * عدد الأحرف لكل علامة تبويب * default 1 إذا كان "حرفيًا" صحيحًا ، وإلا 2 */العرض؟: الرقم ؛
// "" const string = <tab width = {4} /> <ellipsis>
const string = <ellipsis /> ؛
...
<na>
سلسلة const = <na /> ؛
n/a
؟
قوسين <parens>
const string = <Parens> مرحبًا ، العالم! </parens> ؛
(Hello, World!)
<square>
const string = <quarned> مرحبًا ، العالم! </square> ؛
[Hello, World!]
<curly>
const string = <turly> مرحبًا ، العالم! </curly> ؛
{Hello, World!} <angle>
const string = <angle> مرحبًا ، العالم! </angle> ؛
<Hello, World!>
<sq>
const string = <sq> مرحبًا ، العالم! </sq> ؛
'Hello, World!'
<dq>
const string = <vq> مرحبًا ، العالم! </dq> ؛
"Hello, World!"
<bq>
const string = <bq> مرحبًا ، العالم! </bq> ؛
`Hello, World!`
<tsq>
const string = <tsq> مرحبًا ، العالم! </tsq> ؛
''' Hello, World! '''
<tdq>
const string = <tdq> مرحبًا ، العالم! </tdq> ؛
""" Hello, World! """
<tbq>
const tbq = <dbq> مرحبًا ، العالم! </tbq> ؛
`` ` مرحبا بالعالم! `` `
<comment type="slash">
const slash = <comment type = "slash"> hello ، world! </comment> ؛
// Hello, World!
<comment type="hash">
const hash = <comment type = "hash"> hello ، world! </comment> ؛
# Hello, World!
<comment type="dash">
const dash = <comment type = "dash"> hello ، world! </sopment> ؛
-- Hello, World!
<comment type="html">
const html = <comment type = "html"> hello ، world! </semple> ؛
<!-- Hello, World! -->
<state>
const state = <state> مرحبًا ، العالم! </state> ؛
Hello, World.
<ask>
const ask = <skis> مرحبًا ، العالم! </skis> ؛
Hello, World?
<exclaim>
const heckaim = <simpl> مرحبًا ، العالم! </abciaM> ؛
Hello, World!
<kv>
مفتاح
/*** مفتاح لتقديم. */المفتاح: prxmpt.children ؛
keycase
/*** حالة لتطبيق على المفتاح. * default غير محدد */keycase؟: "العلوي" | "أقل" | "رأس المال" | "عنوان"؛
طَوّق
/*** تجاوز السلوك الافتراضي لالتفاف القيمة. * default undefined */wrap؟: boolean ؛
الاستيلاء
/*** إذا كان هذا صحيحًا ، فلا تضيف مساحة بين المفتاح والقيمة. * ينطبق فقط عند عدم الالتفاف. * default false */nospace؟: boolean ؛
const string = <kv key = "hello"> world </kv> ؛
Hello: World
عندما يحتوي الأطفال على خطوط متعددة ، يتم تقديم القيمة بدءًا من سطر جديد افتراضيًا:
عوالم const = (
<tdq join = {"n"}> <text> world1 </evide> <evide> world2 </evide> <Text> World3 </extry>
</tdq>) ؛ const string = <kv key = "hello"> {Worlds} </kv> ؛Hello: """ World1 World2 World3 """
تم تصميم عناصر HTML أعلى عنصر <tag> . يحتوي كل عنصر HTML على دعامة html منطقية تم تعيينها على خطأ افتراضيًا. عندما يكون html صحيحًا ، يتم تقديم العنصر على أنه HTML. خلاف ذلك ، يتم تقديم العنصر على أنه مكافئ تخفيض.
بالإضافة إلى ذلك ، يمكن تعيين سمات مخصصة باستخدام السمات attributes .
<tag>
اسم
/*** اسم العلامة. */الاسم: سلسلة ؛
صوتي
/** * default false */noindent؟: boolean ؛
طَوّق
/*** الإعدادات الافتراضية إلى True إذا كان المحتوى يحتوي على سطر جديد. */التفاف؟: منطقية ؛
const tag = <tag name = "mytag"> مرحبًا ، العالم! </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 ؟: number ؛
شار
/** * default "-" */char؟: "-" | "_" | "=" | "*" ؛
const hr = <hr /> ؛
---
const hr = <hr /> ؛
<hr />
<a>
HREF
/*** عنوان URL للرابط. */HREF: سلسلة ؛
عنوان
/*** عنوان الرابط. */العنوان؟: سلسلة ؛
const string = <a href = "https://example.com" title = "a title"> hello ، world! </a> ؛
[Hello, World!](https://example.com "A Title")
const string = <a href = "https://example.com" title = "a title" html> hello ، world! </a> ؛
<a href="https://example.com" title="A Title">Hello, World!</a>
<img>
SRC
/*** عنوان URL للصورة. */HREF: سلسلة ؛
عنوان
/*** عنوان للصورة. */العنوان؟: سلسلة ؛
const string = <img src = "https://example.com" title = "a title"> hello ، world! </img> ؛
const string = <img src = "https://example.com" title = "a title" html> hello ، world! </img> ؛
<img src="https://example.com" alt="Hello, World!" title="A Title" />
<h1>
const string = <h1> مرحبًا ، العالم! </h1> ؛
# Hello, World!
const string = <h1 html> hello ، world! </h1> ؛
<h1>Hello, World!</h1>
<h2>
const string = <h2> مرحبًا ، العالم! </h2> ؛
## Hello, World!
const string = <h2 html> hello ، world! </h2> ؛
<h2>Hello, World!</h2>
<h3>
const string = <h3> مرحبًا ، العالم! </h3> ؛
### Hello, World!
const string = <h3 html> hello ، world! </h3> ؛
<h3>Hello, World!</h3>
<h4>
const string = <h4> مرحبًا ، العالم! </h4> ؛
#### Hello, World!
const string = <h4 html> hello ، world! </h4> ؛
<h4>Hello, World!</h4>
<h5>
const string = <h5> مرحبًا ، العالم! </h5> ؛
##### Hello, World!
const string = <h5 html> hello ، world! </h5> ؛
<h5>Hello, World!</h5>
<h6>
const string = <h6> مرحبًا ، العالم! </h6> ؛
###### Hello, World!
const string = <h6 html> hello ، world! </h6> ؛
<h6>Hello, World!</h6>
<ol>
فقط MarkEflist
/*** قم بتضمين علامات فقط إذا كانت القائمة تحتوي على أكثر من عنصر واحد. * default false */ommarmmarkiflist؟: boolean ؛
سلسلة const = ( <ol> <extript> Hello </extry> <Text> World </Text> </ol>) ؛
1. Hello 2. World
<ul>
فقط MarkEflist
/*** قم بتضمين علامات فقط إذا كانت القائمة تحتوي على أكثر من عنصر واحد. * default false */ommarmmarkiflist؟: boolean ؛
سلسلة const = ( <ul> <Text> Hello </extript> <Text> World </extry> </ul>) ؛
- Hello - World
<cl>
أغراض
أغراض: {
/** * default false */
فحص؟: منطقية ؛
/*** المحتوى لتقديمه بعد مربع الاختيار. */
المحتوى: prxmpt.children ؛} [] ؛ سلسلة const = (
<clitems = {[{content: "hello"} ، {content: "world" ، accoused: true} ،]}
/>) ؛- [ ] Hello - [x] World
<dl>
أغراض
/*** العناصر لتقديمها. */العناصر: سجل <string ، prxmpt.children> ؛
termcase
/*** غلاف لتطبيقه على كل مفتاح. * default غير محدد */termcase؟: "العلوي" | "أقل" | "رأس المال" | "عنوان"؛
فضاء
/*** عدد الفراغ المبطن للإدراج بين كل عنصر. * default 0 */Space ؟: number ؛
طَوّق
/*** تجاوز السلوك الافتراضي لتفليف القيم. * default undefined */wrap؟: boolean ؛
سلسلة const = (
<dlitems = {{hello: "world" ، foo: "bar"}}
/>) ؛Hello: World Foo: Bar
<i>
شار
/***default "_"*/char؟: "*" | "_" ؛
const string = <i> مرحبًا ، العالم! </i> ؛
_Hello, World!_
const string = <i html> hello ، world! </i> ؛
<i>Hello, World!</i>
<b>
شار
/***default "*"*/char؟: "*" | "_" ؛
const string = <b> مرحبًا ، العالم! </b> ؛
**Hello, World!**
const string = <b html> hello ، world! </b> ؛
<b>Hello, World!</b>
<s>
const string = <s> Hello ، World! </s> ؛
~~Hello, World!~~
const string = <s html> hello ، world! </s> ؛
<s>Hello, World!</s>
<code>
const string = <code> Hello ، World! </code> ؛
`Hello, World!`
const string = <code html> hello ، world! </code> ؛
<code>Hello, World!</code>
<span>
عندما يتم تقديمها كنص ، <span> ببساطة يجعل أطفالها مثل <text> :
const string = <span> Hello ، World! </span> ؛
Hello, World!
const string = <span html> hello ، world! </span> ؛
<span>Hello, World!</span>
<p>
عند تقديم نص ، تضيف علامة الفقرة خطًا جديدًا في نهاية العنصر:
const string = <p> Hello ، World! </p> ؛
Hello, World!
const string = <p html> Hello ، World! </p> ؛
<p>Hello, World!</p>
<blockquote>
سلسلة const = (
<blockquote join = {"n"}> <text> hello </extry> <فارغ/> <text> World! </evide>
</blockquote>) ؛> Hello > > World!
const string = <blockquote html> hello ، world! </blickquote> ؛
<blockquote>Hello, World!</blockquote>
<q>
يكتب
/** * default "double" */type؟: "Single" | "مزدوج" | "backtick" ؛
يقوم عنصر الاقتباس بإرجاع اقتباس ثلاثي إذا كان الأطفال يحتوي على سطر جديد ، وإلا فإنه يعيد عرض أسعار واحد.
const string = <q> Hello ، World! </q> ؛
"Hello, World!"
const string = <q> Hello <Br /> World </q> ؛
""" Hello, World! """
const string = <q html> hello ، world! </q> ؛
<q>Hello, World!</q>
<pre>
const string = <pre> مرحبًا ، العالم! </pre> ؛
`` ` مرحبا بالعالم! `` `
const string = <pre html> hello ، world! </pre> ؛
<pre>Hello, World!</pre>
<num>
يضيف
/*** إضافة قيمة إلى الرقم. */إضافة؟: الرقم ؛
دقيقة
/*** الحد الأدنى للقيمة. المطبق بعد `add`. */دقيقة؟: الرقم ؛
الأعلى
/*** القيمة القصوى. المطبق بعد `add`. */ماكس؟: الرقم ؛
مُثَبَّت
/*** عدد الأماكن العشرية. */ثابت؟: الرقم ؛
const string = <num apped = {2}> 1 </ump> ؛1.00
const string = <num min = {1}> 0 </ump> ؛1
قيمة
/** * Default Date.now () */value؟: Date | سلسلة | رقم؛
DateFormat
/** * Default "Short" */DateFormat؟: "Long" | "متوسطة" | "قصير" | "ممتلىء"؛
TimeFormat
/** * Default "Short" */timeFormat؟: "Long" | "متوسطة" | "قصير" | "ممتلىء"؛
const string = <dateTime /> ؛
September 23, 2023 at 5:17 PM
قيمة
/** * Default Date.now () */value؟: Date | سلسلة | رقم؛
شكل
/** * Default "Short" */Format؟: "Long" | "متوسطة" | "قصير" | "ممتلىء"؛
سلسلة const = <date /> ؛
September 23, 2023
قيمة
/** * Default Date.now () */value؟: Date | سلسلة | رقم؛
شكل
/** * Default "Short" */Format؟: "Long" | "متوسطة" | "قصير" | "ممتلىء"؛
سلسلة const = <time /> ؛
5:17 PM
قيمة
/** * Default Date.now () */value؟: Date | سلسلة | رقم؛
سلسلة const = <Year />
2023
قيمة
/** * Default Date.now () */value؟: Date | سلسلة | رقم؛
شكل
/** * default "رقم" */format؟: "الرقم" | "طويل" | "قصير" | "ضيق"؛
سلسلة const = <month />
8
سلسلة const = <month format = "long" />
September
سلسلة const = <month format = "Short" />
Sep
سلسلة const = <month format = "rearrow" />
S
قيمة
/** * Default Date.now () */value؟: Date | سلسلة | رقم؛
شكل
/** * default "رقم" */format؟: "الرقم" | "طويل" | "قصير" | "ضيق"؛
سلسلة const = <day />
6
Const String = <Day Format = "Long" />
Saturday
Const String = <Day Format = "Short" />
Sat
Const String = <Day Format = "rearrow" />
S
قيمة
/** * Default Date.now () */value؟: Date | سلسلة | رقم؛
دورة
/** * Default "12" */Cycle؟: "12" | "24" ؛
سلسلة const = <ساعة />
5
سلسلة const = <ساعة دورة = "24">
17
قيمة
/** * Default Date.now () */value؟: Date | سلسلة | رقم؛
سلسلة const = <دقيقة />
42
قيمة
/** * Default Date.now () */value؟: Date | سلسلة | رقم؛
سلسلة const = <second />
42
قيمة
/** * Default Date.now () */value؟: Date | سلسلة | رقم؛
سلسلة const = <millisecond />
999
قيمة
/*** نهاية المدة. * Default Date.Now () */value ؟: Date | سلسلة | رقم؛
منذ
/*** بداية المدة. */منذ: التاريخ | سلسلة | رقم؛
سلسلة const = <المدة منذ = {"سبتمبر 2021"} />2 years
بيانات
/*** البيانات للتشويش. */البيانات: NETTEROPTIONALJSONVALUE ؛
جميل
/** * default false */pretty؟: boolean ؛
const string = <json data = {{hello: "world"}} pretty /> ؛{
"Hello": "World"
}بيانات
/*** البيانات للتشويش. */البيانات: NETTEROPTIONALJSONVALUE ؛
Nostartmarker
/** * default false */nostartmarker؟: boolean ؛
sequenceIndent
/** * default false */sequenceIndent؟: boolean ؛
const string = <yaml data = {{hello: "world"}} /> ؛--- hello: world
<upper>
const string = <Sapt> Hello ، World! </apper> ؛
HELLO, WORLD!
<lower>
const string = <lower> مرحبًا ، العالم! </lower> ؛
hello, world!
<capital>
const string = <view> مرحبًا ، العالم! </capital> ؛
Hello, world!
<title>
const string = <title> Hello ، World! </title> ؛
Hello, World!
// "Hello ، World!" </rim> ؛
Hello, World!
مع
/*** قيمة لتطبيقها على كل من "البادئة" و "لاحقة". */مع: prxmpt.children ؛
const string = <frame with = "-"> مرحبًا ، العالم! </frame> ؛
-- Hello, World! --
<lined>
سلسلة const = ( <lining> <evide> مرحبًا </text> <Text> World! </text> </lining>) ؛
Hello World!
<spaced>
سلسلة const = ( <Spaced> <Text> Hello </text> <Text> World! </text> </spaced>) ؛
Hello World!
<csl>
الاستيلاء
/** * default false */nospace؟: boolean ؛
سلسلة const = ( <CSL> <Text> Hello </extry> <Text> World </Text> </csl>) ؛
hello, world
سلسلة const = ( <csl nospace> <evide> Hello </evide> <Text> World </Text> </csl>) ؛
hello,world
<union>
الاستيلاء
/** * default false */nospace؟: boolean ؛
سلسلة const = ( <Unloy> <Text> Hello </text> <Text> World </Text> </union>) ؛
hello | world
سلسلة const = ( <Union Nospace> <evide> Hello </evide> <Text> World </evide> </union>) ؛
hello|world
مقسم
/** * default "---" */مقسم؟: سلسلة ؛
إطار
/*** ما إذا كانت إضافة المقسمات قبل وبعد الجسم. * default false */frame؟: boolean ؛
سلسلة const = ( <ectioned> <Text> Hello </extive> <Text> World! </text> </sected>) ؛
Hello --- World!
مجموعات ضبط الفواصل المستخدمة تلقائيًا على أساس عدد الأطفال المقدمين.
<and>
سلسلة const = ( <و> <extric> A </text> </و>) ؛
a
سلسلة const = ( <و> <evide> A </evide> <extried> B </evide> </و>) ؛
a and b
سلسلة const = ( <و> <evide> a </evide> <evide> b </text> <evide> c </extry> </و>) ؛
a, b, and c
<andor>
سلسلة const = ( <NdR> <Text> A </extry> <Text> B </extry> <Text> C </extrived> </andor>) ؛
a, b, and/or c
<or>
سلسلة const = ( <أو> <evide> A </evide> <evide> b </evide> <extried> C </extry> </أو>) ؛
a, b, or c
<nor>
سلسلة const = ( <NOR> <TEXT> A </extry> <Text> B </extry> <Text> C </extrived> </nar>) ؛
a, b, nor c
يتيح لك عنصر <cap> الحد من طول السلسلة من خلال توفير وظيفة splitter وعدد max من "الوحدات" للسماح بذلك.
الأعلى
/*** الحد الأقصى "الوحدات" لتضمين. * default Infinity */max؟: number ؛
الخائن
/*** وظيفة تقسم سلسلة إلى "وحدات". * default "chars" */splitter؟: "الفقرات" | "خطوط" | "المساحات" | "كلمات" | "فواصل" | "chars" | (السلسلة: سلسلة) => String [] ؛
القطع
/*** سلسلة لإلحاقها إلى النهاية إذا تم الوصول إلى الحد الأقصى. * يتم تضمين هذه السلسلة في الحد الأقصى لعدد. * إذا تم استخدام "صحيح" ، "...". * default undefined */ellipsis ؟: string | حقيقي؛
const string = <cap max = {5}> مرحبًا ، العالم! </cap> ؛Hello
العنصر <priority> يشبه استعلام CSS Media المستند إلى العرض للسلاسل.
بدلاً من توفير قائمة بالأطفال ، يتوقع <priority> قائمة بالعناصر ، كل منها يمكن أن يكون له أولوية. يتم تقديم الأولويات الأعلى أولاً (مثل z-index في CSS) ، وكل عنصر له أولوية افتراضية تبلغ 0. يتم توفير العديد من الاستراتيجيات أيضًا لضبط كيفية أولوية العناصر.
يمكن أيضًا تداخل العناصر ذات الأولوية ، والتي تمكن من السيطرة الدقيقة للغاية على المحتوى الذي يتم تقديمه. يتم توفير العديد من الأمثلة في دليل مثال الأولوية.
الأعلى
/*** الحد الأقصى "الوحدات" لتضمين. * default Infinity */max؟: number ؛
عداد
/*** وظيفة تُرجع عدد "الوحدات" في سلسلة. * default (String: String) => string.length */counter؟: (String: String) => 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
/*** إذا "صحيح" ، فلا تتخطى العناصر بعد الوصول إلى الحد الأقصى. * default false */noskip؟: boolean ؛
سلسلة const = (
<prowerityMax = {15} Join = {"n"} عناصر = {[{p: 2 المحتوى: "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 (
<eved> مرحبًا ، العالم! </text>) ؛Hello, World!
hasChildren إرجاع true إذا كان كائن الدعائم المقدم لديه خاصية children .
استيراد {haschildren} من "@autossey/prxmpt" ؛ if (haschildren ({الأطفال: "Hello ، World!"})) {
// ...}isChildren إرجاع true إذا كانت القيمة المقدمة هي طفل PRXMPT صالح.
استيراد {ischildren} من "@autossey/prxmpt" ؛ if (ischildren ("Hello ، World!)) {
// ...}split تقسيم children على separator . إذا كان separator undefined ، فلا يحدث أي تقسيم.
استيراد {split} من "@autossey/prxmpt" ؛ const childrend = (
<lining> <evide> مرحبًا </text> <Text> World! </text>
</lining>) ؛ // ["Hello" ، "World!"] Const Strings = split (الأطفال ، "N") ؛paragraphs تقسيم children على "nn" .
lines تقسيم children على "n" .
spaces تقسيم children على مساحة بيضاء.
words تقسيم children على حدود الكلمات.
commas تقسيم children على "," .
characters تقسيم children على "" .
@SWC/CORE: بديل فائق السرعة لبابل
As-typed-typed: اجعل أي قيمة صفيف
الأنواع-JSON: اكتب التحقق من كائنات JSON
Yaml: JavaScript Parser و Stringifier لـ Yaml
@Autossey/Eslint-Config: قاعدة للمشاريع التي تستخدم ESLINT.
@autossey/tsconfig: مجموعة من tsconfigs الأساسية لأنواع مختلفة من المشاريع.
@Jest/Globals
@SWC/Jest: SWC Integration for Jest
@الأنواع/العقدة: تعريفات TypeScript لـ Node.js
ESLINT: مدقق نمط قائم على AST لجافا سكريبت.
Jest: اختبار JavaScript اللذيذ.
TypeScript: TypeScript هي لغة لتطوير JavaScript مقياس التطبيق
معهد ماساتشوستس للتكنولوجيا - ترخيص معهد ماساتشوستس للتكنولوجيا
