prxmpt
v0.2.0
- fabrication rapide avec JSX -
NPM • GitHub • Problèmes
PRXMPT est comme "vent arrière pour l'ingénierie rapide" . Il fournit un ensemble de services publics pour la mise en forme des chaînes avec JSX.
PRXMPT est conçu pour façonner l'entrée à LLMS et comprend des éléments puissants tels que <priority> pour gérer les jetons. Cependant, PRXMPT fournit également des éléments Markdown et HTML, ce qui le rend parfait pour formater les sorties LLM pour les utilisateurs finaux.
LIBIBILITÉ - JSX nous donne plus de contrôle sur les espaces blancs, permettant un code plus lisible.
? Ourd Control - Avec des accessoires intégrés tels que hide , nous pouvons facilement contrôler le texte que nous affichons sans ternaires.
? Réutilisabilité - Les composants PRXMPT prennent des accessoires comme les composants JSX normaux, ce qui les rend faciles à réutiliser.
const text = (
<lined> <h1> Il s'agit de la première ligne. </h1> <Text Hide = {Hidline2}> Voici une deuxième ligne. </Text> <vide /> <Text> Il s'agit d'une ligne plus longue, donc nous allons donc Brisez la balise de texte.
Nous pouvons même démarrer une autre ligne ici, et un espace sera ajouté. </Text>
</clined>);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.
Comparez cela à un équivalent en utilisant des littéraux de modèle:
const text = `# c'est la première ligne. $ {HiDeline2? "Nhere est une deuxième ligne." : ""} nndthis est une ligne plus longue, donc nous sommes maintenant hors de la page. Nous pouvons même commencer une autre ligne ici, mais je ne le recommanderais pas. »;NPM Install @ AutoSsey / PrxMpt
yarn add @ autoSsey / Prxmppt
pnpm add @ autoSsey / Prxmppt
bun add @ autoSsey / prxmppt
PRXMPT fournit une base tsconfig.json que vous pouvez étendre:
{"étend": "@ AutoSsey / Prxmppt / tsconfig.json"}Remarque: BUN ne semble pas détecter correctement PRXMPT lors de l'utilisation de la méthode "Extends".
Alternativement, vous pouvez simplement ajouter les champs suivants à votre tsconfig.json :
? } }
Vous devriez être en mesure d'utiliser des éléments PRXMPT maintenant, sans importation:
export const myComponent = () => ( <Text> Bonjour, Monde! </Text>);
Si vous utilisez PRXMPT avec React, ajoutez la ligne suivante en haut de chaque fichier qui utilise PRXMPT à la place:
/ ** @jsxixportsource @ autoSsey / Prxmppt * / Export const myComponent = () => ( <Text> Bonjour, Monde! </Text>);
Plusieurs exemples sont fournis dans le répertoire des exemples:
Exemples d'utilisation des éléments:
évier de cuisine (présente de nombreux éléments)
Priorité (quelques exemples de l'élément <priority> )
Exemples de configuration (TypeScript):
chignon
chignon (mode classique)
Next.js
swc
SWC (mode classique)
nœud TS
TS-node (mode classique)
TSC
TSC (mode classique)
Exemples de configuration (JavaScript):
node --loader @ autoSsey / Prxmppt
swc
SWC (mode classique)
Pour des exemples de la façon d'utiliser des éléments spécifiques, les tests montrent plus d'économies.
Éléments de texte
<kv> (paire de valeurs clés)
<state>
<ask>
<exclaim>
<comment type="slash">
<comment type="hash">
<comment type="dash">
<comment type="html">
<sq> (citation unique)
<dq> (Double Citation)
<bq> (citation arrière)
<tsq> (triple citation unique)
<tdq> (Triple Double Citation)
<tbq> (citation triple dos)
<parens> (parenthèses)
<square> (support carré)
<curly> (support carré)
<angle> (support d'angle)
<empty>
<space>
<tab>
<ellipsis>
<na> (N / A)
<text>
Personnages
Supports
Citations
Commentaires
Phrases
Divers
Éléments HTML
<span>
<p>
<blockquote>
<q>
<pre>
<i> (italique)
<b> (gras)
<s> (Strikethrough)
<code> (code)
<ul> (liste non ordonnée)
<ol> (liste ordonnée)
<cl> (liste de cocher)
<dl> (liste de définition)
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<a> (ancre)
<img> (image)
<br> (pause de ligne)
<hr> (règle horizontale)
<tag>
Pauses
Enchaînement
Rubriques
Listes
Coiffage
Divers
Éléments de sérialisation
<json>
<yaml>
<datetime>
<date>
<time>
<year>
<month>
<day>
<hour>
<minute>
<second>
<millisecond>
<duration>
<num>
Primitives
Dates
Objets
Éléments des services publics
<cap>
<priority>
<trim>
<frame>
<and>
<andor>
<or>
<nor>
<lined>
<spaced>
<csl> (liste séparée par virgule)
<union>
<sectioned>
<upper>
<lower>
<capital>
<title>
Enveloppe
Se joindre à
Sets
Affixes
Limitations
Les fonctions suivantes sont également exportées à partir de PRXMPT:
Rendu
createElement
render
Enfants
hasChildren
isChildren
Séparateurs
split
paragraphs
lines
spaces
words
commas
chars
<text>
Le texte est l'élément PRXMMPT de base. Il renvoie ses enfants comme une chaîne:
const string = <Text> Bonjour, Monde! </Text>;
Hello, World!
Le texte peut également être caché avec le conduit hide :
const string = <Text> Hello <Text Mide>, World </ Hide>! </Text>;
Hello!
Étant donné que <text> est la base de la plupart des autres éléments, les accessoires qu'il fournit peuvent être utilisés avec la plupart des autres éléments.
PRXMPT traite les enfants comme un éventail de chaînes, ce qui signifie que <text> peut également fournir plusieurs fonctions de tableau pour la cartographie, le filtrage et l'adhésion aux enfants.
cacher
/ ** * Empêcher l'élément d'être rendu. * @default false * / Hide ?: Boolean;
filtre
/ ** * Une fonction pour filtrer les enfants. * @default (node) => true * / filter ?: (node: prxmppt.children, index: numéro, arr: prxmpt.children []) => booléen;
carte
/ ** * Une fonction qui mappe chaque enfant à un nouvel élément. * @default (node) => prxmppt.render (node) * / map ?: (node: prxmppt.children, index: nombre, arr: prxmpt.children []) => prxmppt.jsx.element;
inverse
/ ** * inverser l'ordre des enfants. * / inverse ?: Boolean;
rejoindre
/ ** * un élément à insérer entre chaque enfant. * @default "" * / join ?: prxmppt.children;
répéter
/ ** * @default 1 * / répéter ?: Numéro;
garniture
/ ** * `True`: Trim Whitespace du début et de la fin de l'élément. * * `" Démarrer "`: TRIP Whitespace depuis le début de l'élément. * * `" End "`: Trimez l'espace de la fin de l'élément. * * @default false * / Trim ?: Boolean | Trimside;
enveloppe
/ ** * Convertissez l'élément en un boîtier donné. * @Default Undefined * / Basing ?: Basing;
préfixe
/ ** * Un élément pour appliquer à l'élément. * @default "" * / préfixe ?: prxmppt.children;
suffixe
/ ** * Un élément pour ajouter à l'élément. * @default "" * / suffixe ?: prxmppt.children;
intention
/ ** * Appliquer l'indentation à chaque ligne de l'élément. * * Si «True», l'indentation est appliquée à l'aide de 2 espaces. * * Si un nombre est fourni, ce nombre d'espaces est utilisé. * * Si `" t "` est fourni, un seul caractère d'onglet est utilisé. * * @default false * / indent ?: booléen | Numéro | "t";
bloc
/ ** * Ajoutez une nouvelle ligne à la fin de l'élément. * @default false * / Block ?: Boolean;
<empty>
L'élément <empty> renvoie une chaîne vide:
// "" const string = <vide />;
<empty> est souvent utile en tant qu'enfant d'éléments qui rejoignent leurs enfants sur un délimiteur.
const string = ( <Dened> <Text> Ligne 1 </Text> <vide /> <Text> Ligne 3 </Text> </clined>);
Line 1 Line 2
<space>
L'élément <space> renvoie un espace:
// "" const string = <espace />;
<tab>
littéral
/ ** * Si vrai, utilisez un caractère d'onglet littéral. Sinon, utilisez des espaces. * @default false * / littéral ?: Boolean;
largeur
/ ** * Nombre de caractères par onglet * @default 1 Si `littéral` est vrai, sinon 2 * / largeur ?: Numéro;
// "" const string = <tab width = {4} /> <ellipsis>
const string = <ellipsis />;
...
<na>
const string = <na />;
n/a
?
Supports <parens>
const string = <parens> Bonjour, monde! </ parens>;
(Hello, World!)
<square>
const string = <square> bonjour, monde! </ carré>;
[Hello, World!]
<curly>
const string = <curly> bonjour, monde! </curly>;
{Hello, World!} <angle>
const string = <ngle> bonjour, monde! </ngle>;
<Hello, World!>
<sq>
const string = <sq> Bonjour, monde! </q>;
'Hello, World!'
<dq>
const string = <dq> Bonjour, monde! </dq>;
"Hello, World!"
<bq>
const string = <bq> Bonjour, monde! </bq>;
`Hello, World!`
<tsq>
const string = <tsq> Bonjour, monde! </tsq>;
''' Hello, World! '''
<tdq>
const string = <tdq> Bonjour, monde! </tdq>;
""" Hello, World! """
<tbq>
const tbq = <tbq> Bonjour, monde! </tbq>;
`` ' Bonjour le monde! `` '
<comment type="slash">
const slash = <commentaire type = "slash"> Bonjour, monde! </ commentaire>;
// Hello, World!
<comment type="hash">
const hash = <commentaire type = "hash"> bonjour, monde! </ commentaire>;
# Hello, World!
<comment type="dash">
const dash = <commentaire type = "dash"> Bonjour, monde! </ commentaire>;
-- Hello, World!
<comment type="html">
const html = <commentaire type = "html"> Bonjour, monde! </ commentaire>;
<!-- Hello, World! -->
<state>
const state = <state> bonjour, monde! </state>;
Hello, World.
<ask>
const Ask = <sk> bonjour, monde! </sk>;
Hello, World?
<exclaim>
const exclaim = <c exclamer> Bonjour, monde! </cclaim>;
Hello, World!
<kv>
clé
/ ** * Une clé pour rendre. * / clé: prxmppt.children;
touche
/ ** * Case à appliquer à la clé. * @default Undefined * / KeyCase ?: "Upper" | "inférieur" | "Capital" | "titre";
envelopper
/ ** * remplacer le comportement par défaut pour envelopper la valeur. * @Default Undefined * / Wrap ?: Boolean;
radial
/ ** * Si vrai, n'ajoutez pas d'espace entre la clé et la valeur. * Ne s'applique que lorsque vous ne s'emballer pas. * @default false * / Nospace ?: Boolean;
const string = <kv key = "hello"> world </kv>;
Hello: World
Lorsque les enfants contiennent plusieurs lignes, la valeur est rendue à partir d'une nouvelle ligne par défaut:
Const Worlds = (
<TDQ JOIN = {"N"}> <Text> World1 </ Text> <Text> World2 </ Text> <Text> World3 </Text>
</tdq>); const string = <kv key = "hello"> {worlds} </kv>;Hello: """ World1 World2 World3 """
Les éléments HTML sont construits sur l'élément <tag> . Chaque élément HTML a un accessoire html booléen qui est défini sur FALSE par défaut. Lorsque html est vrai, l'élément est rendu en HTML. Sinon, l'élément est rendu comme un équivalent Markdown.
De plus, les attributs personnalisés peuvent être définis à l'aide de l'efficacité attributes .
<tag>
nom
/ ** * Nom de la balise. * / nom: chaîne;
noeud
/ ** * @default false * / noindent ?: boolean;
envelopper
/ ** * par défaut est vrai si le contenu contient une nouvelle ligne. * / Wrap ?: Boolean;
const tag = <tag name = "mytag"> bonjour, monde! </gag>;
<mytag>Hello, World!</mytag>
Si aucun enfant n'est fourni, la balise est rendue comme une balise d'auto-fermeture:
const tag = <tag name = "mytag" />;
<mytag />
<br />
// "n" const br = <br />;
const br = <br html />;
<br />
<hr />
largeur
/ ** * @default 3 * / largeur ?: numéro;
carboniser
/ ** * @default "-" * / char ?: "-" | "_" | "=" | "*";
const hr = <hr />;
---
const hr = <hr />;
<hr />
<a>
href
/ ** * L'URL du lien. * / href: string;
titre
/ ** * Un titre pour le lien. * / title ?: String;
const string = <a href = "https://example.com" title = "a title"> Bonjour, monde! </a>;
[Hello, World!](https://example.com "A Title")
const string = <a href = "https://example.com" title = "a title" html> Bonjour, monde! </a>;
<a href="https://example.com" title="A Title">Hello, World!</a>
<img>
SRC
/ ** * L'URL de l'image. * / href: string;
titre
/ ** * Un titre pour l'image. * / title ?: String;
const string = <img src = "https://example.com" title = "a title"> Bonjour, monde! </img>;
const string = <img src = "https://example.com" title = "a title" html> Bonjour, monde! </img>;
<img src="https://example.com" alt="Hello, World!" title="A Title" />
<h1>
const string = <h1> bonjour, monde! </h1>;
# Hello, World!
const string = <h1 html> Bonjour, monde! </h1>;
<h1>Hello, World!</h1>
<h2>
const string = <h2> bonjour, monde! </h2>;
## Hello, World!
const string = <h2 html> Bonjour, monde! </h2>;
<h2>Hello, World!</h2>
<h3>
const string = <h3> bonjour, monde! </h3>;
### Hello, World!
const string = <h3 html> Bonjour, monde! </h3>;
<h3>Hello, World!</h3>
<h4>
const string = <h4> bonjour, monde! </h4>;
#### Hello, World!
const string = <h4 html> Bonjour, monde! </h4>;
<h4>Hello, World!</h4>
<h5>
const string = <h5> Bonjour, monde! </h5>;
##### Hello, World!
const string = <h5 html> Bonjour, monde! </h5>;
<h5>Hello, World!</h5>
<h6>
const string = <h6> bonjour, monde! </h6>;
###### Hello, World!
const string = <h6 html> Bonjour, monde! </h6>;
<h6>Hello, World!</h6>
<ol>
Seulementmarkelist
/ ** * Inclure les marqueurs uniquement si la liste contient plus d'un élément. * @default false * / onlymarkiflist ?: boolean;
const string = ( <l> <Text> Hello </ Text> <Text> World </Text> </l>);
1. Hello 2. World
<ul>
Seulementmarkelist
/ ** * Inclure les marqueurs uniquement si la liste contient plus d'un élément. * @default false * / onlymarkiflist ?: boolean;
const string = ( <ul> <Text> Hello </ Text> <Text> World </Text> </ul>);
- Hello - World
<cl>
articles
articles: {
/ ** * @default false * /
vérifié ?: Boolean;
/ ** * Contenu à rendre après la case à cocher. * /
Contenu: prxmppt.children;} []; const string = (
<Clitems = {[{Content: "Hello"}, {Content: "World", vérifié: true},]}
/>);- [ ] Hello - [x] World
<dl>
articles
/ ** * Les articles à rendre. * / items: enregistre <string, prxmppt.children>;
termcase
/ ** * Enveloppe pour s'appliquer à chaque clé. * @Default Undefined * / TermCase ?: "Upper" | "inférieur" | "Capital" | "titre";
espace
/ ** * Nombre de blancs bordés à insérer entre chaque élément. * @default 0 * / espace ?: numéro;
envelopper
/ ** * remplacer le comportement par défaut pour l'emballage des valeurs. * @Default Undefined * / Wrap ?: Boolean;
const string = (
<dlitems = {{Hello: "world", foo: "bar"}}
/>);Hello: World Foo: Bar
<i>
carboniser
/ ** * @default "_" * / char ?: "*" | "_";
const string = <i> Bonjour, monde! </i>;
_Hello, World!_
const string = <i html> Bonjour, monde! </i>;
<i>Hello, World!</i>
<b>
carboniser
/ ** * @default "*" * / char ?: "*" | "_";
const string = <b> Bonjour, monde! </b>;
**Hello, World!**
const string = <b html> Bonjour, monde! </b>;
<b>Hello, World!</b>
<s>
const string = <s> Bonjour, monde! </s>;
~~Hello, World!~~
const string = <s html> Bonjour, monde! </s>;
<s>Hello, World!</s>
<code>
const string = <code> Bonjour, monde! </code>;
`Hello, World!`
const string = <code html> Bonjour, monde! </code>;
<code>Hello, World!</code>
<span>
Lorsqu'il est rendu en texte, <span> rend simplement ses enfants comme <text> :
const string = <span> bonjour, monde! </span>;
Hello, World!
const string = <span html> Bonjour, monde! </span>;
<span>Hello, World!</span>
<p>
Lorsqu'il est rendu en texte, la balise de paragraphe ajoute une nouvelle ligne à la fin de l'élément:
const string = <p> Bonjour, monde! </p>;
Hello, World!
const string = <p html> Bonjour, monde! </p>;
<p>Hello, World!</p>
<blockquote>
const string = (
<lockQuote join = {"n"}> <Text> Bonjour </Text> <vide /> <Text> World! </Text>
</lockquote>);> Hello > > World!
const string = <blockquote html> Bonjour, monde! </lockquote>;
<blockquote>Hello, World!</blockquote>
<q>
taper
/ ** * @default "double" * / type ?: "Single" | "Double" | "Backtick";
L'élément de devis renvoie une triple devis si les enfants contiennent une nouvelle ligne, sinon il renvoie un seul devis.
const string = <q> Bonjour, monde! </Q>;
"Hello, World!"
const string = <q> bonjour <br /> world </ q>;
""" Hello, World! """
const string = <q html> Bonjour, monde! </Q>;
<q>Hello, World!</q>
<pre>
const string = <pre> bonjour, monde! </ pre>;
`` ' Bonjour le monde! `` '
const string = <pre html> bonjour, monde! </ pre>;
<pre>Hello, World!</pre>
<num>
ajouter
/ ** * Ajoutez une valeur au nombre. * / add ?: numéro;
min
/ ** * Valeur minimale. Appliqué après `ajout». * / min ?: Numéro;
max
/ ** * Valeur maximale. Appliqué après `ajout». * / Max ?: Numéro;
fixé
/ ** * Nombre de décimales. * / fixe ?: Numéro;
const string = <num fixe = {2}> 1 </ num>;1.00
const string = <num min = {1}> 0 </ num>;1
valeur
/ ** * @default Date.Now () * / Value ?: Date | String | nombre;
dateformat
/ ** * @default "short" * / dateFormat ?: "long" | "Medium" | "Short" | "complet";
format de temps
/ ** * @default "short" * / timeFormat ?: "long" | "Medium" | "Short" | "complet";
const string = <DateTime />;
September 23, 2023 at 5:17 PM
valeur
/ ** * @default Date.Now () * / Value ?: Date | String | nombre;
format
/ ** * @default "short" * / format ?: "long" | "Medium" | "Short" | "complet";
const string = <date />;
September 23, 2023
valeur
/ ** * @default Date.Now () * / Value ?: Date | String | nombre;
format
/ ** * @default "short" * / format ?: "long" | "Medium" | "Short" | "complet";
const string = <time />;
5:17 PM
valeur
/ ** * @default Date.Now () * / Value ?: Date | String | nombre;
const string = <an />
2023
valeur
/ ** * @default Date.Now () * / Value ?: Date | String | nombre;
format
/ ** * @default "numéro" * / format ?: "numéro" | "Long" | "Short" | "étroit";
const string = <mois />
8
const string = <mois format = "long" />
September
const string = <mois format = "short" />
Sep
const string = <mois format = "étroit" />
S
valeur
/ ** * @default Date.Now () * / Value ?: Date | String | nombre;
format
/ ** * @default "numéro" * / format ?: "numéro" | "Long" | "Short" | "étroit";
const string = <day />
6
const string = <day format = "long" />
Saturday
const string = <day format = "short" />
Sat
const string = <day format = "étroit" />
S
valeur
/ ** * @default Date.Now () * / Value ?: Date | String | nombre;
faire du vélo
/ ** * @default "12" * / cycle ?: "12" | "24";
const string = <hour />
5
const string = <hour cycle = "24">
17
valeur
/ ** * @default Date.Now () * / Value ?: Date | String | nombre;
const string = <minute />
42
valeur
/ ** * @default Date.Now () * / Value ?: Date | String | nombre;
const string = <seconde />
42
valeur
/ ** * @default Date.Now () * / Value ?: Date | String | nombre;
const string = <milliseconde />
999
valeur
/ ** * La fin de la durée. * @default date.now () * / valeur ?: Date | String | nombre;
depuis
/ ** * Le début de la durée. * / depuis: date | String | nombre;
const string = <durée depuis = {"septembre 2021"} />2 years
données
/ ** * Les données à chaîner. * / Données: NeedOptionalJSonValue;
joli
/ ** * @default false * / joli ?: booléen;
const string = <json data = {{Hello: "world"}} joli />;{
"Hello": "World"
}données
/ ** * Les données à chaîner. * / Données: NeedOptionalJSonValue;
Nostartmarker
/ ** * @default false * / nostartmarker ?: booléen;
séquenceIndente
/ ** * @default false * / SequenceIndent ?: Boolean;
const string = <yaml data = {{Hello: "world"}} />;--- hello: world
<upper>
const string = <fumple> Bonjour, monde! </pirg>;
HELLO, WORLD!
<lower>
const string = <bower> bonjour, monde! </bout>;
hello, world!
<capital>
const string = <papital> Bonjour, monde! </papital>;
Hello, world!
<title>
const string = <title> bonjour, monde! </Title>;
Hello, World!
// "Hello, World!" Const string = <mor> bonjour, monde! </mor>;
Hello, World!
avec
/ ** * Une valeur à appliquer à la fois à `préfixe` et à` suffixe`. * / avec: prxmppt.children;
const string = <frame avec = "-"> Bonjour, monde! </ frame>;
-- Hello, World! --
<lined>
const string = ( <Dened> <Text> Bonjour </XTME> <Text> MONDE! </Text> </clined>);
Hello World!
<spaced>
const string = ( <space> <Text> Hello </Text> <Text> MONDE! </Text> </spaced>);
Hello World!
<csl>
radial
/ ** * @default false * / Nospace ?: Boolean;
const string = ( <CSL> <Text> Bonjour </XTME> <Text> World </Text> </csl>);
hello, world
const string = ( <CSL NOSPACE> <Text> Bonjour </XTME> <Text> World </Text> </csl>);
hello,world
<union>
radial
/ ** * @default false * / Nospace ?: Boolean;
const string = ( <ion> <Text> Hello </ Text> <Text> World </Text> </union>);
hello | world
const string = ( <Union Nospace> <Text> Bonjour </Text> <Text> World </Text> </union>);
hello|world
diviseur
/ ** * @default "---" * / Divider ?: String;
cadre
/ ** * si ajouter des séparateurs avant et après le corps. * @default false * / frame ?: boolean;
const string = ( <secctioned> <Text> Bonjour </Text> <Text> MONDE! </Text> </cctioned>);
Hello --- World!
Les ensembles ajustent automatiquement les séparateurs utilisés en fonction du nombre d'enfants fournis.
<and>
const string = ( <et> <Text> a </XTME> </ et>);
a
const string = ( <et> <Text> a </XTME> <Text> B </XTME> </ et>);
a and b
const string = ( <et> <Text> a </XTME> <Text> B </XTME> <Text> C </XTME> </ et>);
a, b, and c
<andor>
const string = ( <etor> <Text> A </Text> <Text> B </XTME> <Text> C </XET> </ORN>);
a, b, and/or c
<or>
const string = ( <ou> <Text> A </Text> <Text> B </XTME> <Text> C </XET> </ ou>);
a, b, or c
<nor>
const string = ( <nor> <Text> a </XTME> <Text> B </XTME> <Text> C </XTME> </ nor>);
a, b, nor c
L'élément <cap> vous permet de limiter la longueur d'une chaîne en fournissant une fonction splitter et un nombre max d '"unités" à autoriser.
max
/ ** * Les "unités" maximales à inclure. * @Default Infinity * / Max ?: Numéro;
éclater
/ ** * Une fonction qui divise une chaîne en "unités". * @default "Chars" * / Splitter ?: "Paragraphes" | "lignes" | "Espaces" | "mots" | "virgules" | "Chars" | (String: String) => String [];
ellipse
/ ** * Une chaîne à ajouter à la fin si le maximum est atteint. * Cette chaîne est incluse dans le nombre maximum. * Si `true`," ... "est utilisé. * @default Undefined * / ellipsis ?: String | vrai;
const string = <cap max = {5}> bonjour, monde! </ap>;Hello
L'élément <priority> est comme une requête multimédia CSS basée sur la largeur pour les chaînes.
Au lieu de fournir une liste d'enfants, <priority> s'attend à une liste d'éléments, chacun pouvant avoir une priorité. Des priorités plus élevées sont rendues en premier (comme z-index dans CSS), et chaque élément a une priorité par défaut de 0. Plusieurs stratégies sont fournies ainsi que pour affiner la façon dont les éléments sont prioritaires.
Les éléments prioritaires peuvent également être imbriqués, ce qui permet un contrôle extrêmement à grain fin sur le contenu rendu. Plusieurs exemples sont fournis dans l'exemple de priorité.
max
/ ** * Les "unités" maximales à inclure. * @Default Infinity * / Max ?: Numéro;
comptoir
/ ** * Une fonction qui renvoie le nombre de "unités" dans une chaîne. * @Default (String: String) => String.length * / COMPTER ?: (String: String) => Number;
articles
/ ** * Les éléments à rendre, par ordre de priorité. * / éléments: (prxmppt.children | {
/ ** * La priorité de cet élément. Les éléments de priorité plus élevés sont inclus en premier. * @default 0 * /
P ?: Numéro;
/ ** * Le contenu à rendre. * /
Contenu: ((capacité: numéro) => prxmppt.children) | Prxmppt.children;}) [];stratégie
La stratégie à utiliser lors de la priorité des éléments.
Si plusieurs stratégies sont fournies, des stratégies ultérieures sont essayées afin de rompre les liens.
"priority" :
Prioriser les éléments par la priorité fournie.
Une fois le maximum atteint, continuez à vérifier si les articles restants conviennent.
"order-asc" :
Prioriser les éléments par la commande fournie.
Une fois le maximum atteint, continuez à vérifier si les articles restants conviennent.
"order-desc" :
Prioriser les éléments à l'inverse de la commande fournie.
Une fois le maximum atteint, continuez à vérifier si les articles restants conviennent.
"size-asc" :
Prioriser les articles dans l'ordre de taille, le plus petit à plus grand.
Utilisez si vous souhaitez inclure autant d'articles que possible.
"size-desc" :
Les articles prioritaires dans l'ordre de taille, le plus grand au plus petit.
Utilisez si vous souhaitez inclure le moins possible les éléments.
/ ** * @default ["Priority", "Order-ASC"] * / Stratégie ?: PriorityStrategy | PriorityStrategy [];
noskip
/ ** * Si «True», ne sautez pas les éléments après le maximum atteint. * @default false * / noskip ?: booléen;
const string = (
<priorityMax = {15} join = {"n"} items = {[{p: 2 Content: "test 1"}, {// p: 0 est le contenu par défaut: "Il s'agit d'une chaîne super longue qui a gagné ' t fit. "}, {p: 1, contenu:" test 3 "}]} />);Test 1 Test 3
createElement import {createElement} de "@ autoSsey / PrxMpt"; const string = createElement ("text", {}, "Bonjour, monde!");Hello, World!
render import {render} de "@ autoSsey / prxmppt"; const string = render (
<Text> Bonjour, Monde! </Text>);Hello, World!
hasChildren Renvoie true si l'objet d'accessoires fourni a une propriété children .
import {haschildren} de "@ autoSsey / prxmppt"; if (haschildren ({enfants: "Bonjour, monde!"})) {
// ...}isChildren Renvoie true si la valeur fournie est un enfant PRXMMPT valide.
import {ischildren} de "@ autoSsey / Prxmppt"; if (ischildren ("Hello, world!") {
// ...}split children divisés sur separator . Si separator undefined , aucune fractionnement ne se produit.
import {Split} de "@ autoSsey / Prxmppt"; const les enfants = (
<Dened> <Text> Bonjour </XTME> <Text> MONDE! </Text>
</ lined>); // ["Hello", "World!"] const Strings = Split (enfants, "n");paragraphs Divisé children sur "nn" .
lines Diviser children sur "n" .
spaces Diviser children sur les espaces.
words children divisés sur les limites des mots.
commas Split children sur "," .
characters Diviser children sur "" .
@ SWC / Core: Alternative super rapide pour Babel
Assemblée à Typed: Faites de toute valeur un tableau
Types-Json: Type Vérification des objets JSON
Yaml: analyser JavaScript et stringificateur pour yaml
@ AutoSsey / Eslint-Config: une base pour les projets qui utilisent Eslint.
@ AutoSsey / TSConfig: une collection de tsconfigs de base pour divers types de projets.
@ jest / global
@ SWC / Jest: Intégration SWC pour Jest
@ types / noeud: définitions de typescript pour node.js
Eslint: un vérificateur de motif basé sur AST pour JavaScript.
Jest: Nédieux tests JavaScript.
TypeScript: TypeScript est un langage pour le développement JavaScript à l'échelle de l'application
MIT - la licence MIT
