Startseite>Programmierbezogen>AI-Quellcode
Herunterladen
-sofortiges Handwerk mit JSX-

NPM • GitHub • Probleme

PRXMPT ist wie "Rückenwind für schnelle Engineering" . Es bietet eine Reihe von Versorgungsunternehmen für die Formatierung von Zeichenfolgen mit JSX.

PRXMPT ist für die Gestaltung der Eingabe in LLMs konzipiert und umfasst leistungsstarke Elemente wie <priorität> zum Verwalten von Token. PRXMPT bietet jedoch auch sowohl Markdown- als auch HTML -Elemente, sodass es auch für Endbenutzer perfekt zum Formatieren von LLM -Ausgängen ist.

Warum JSX?

  1. Lesbarkeit - JSX gibt uns mehr Kontrolle über Whitespace und ermöglicht mehr lesbare Code.

  2. ? ️ Kontrolle - Mit eingebauten Requisiten wie hide können wir den von uns angezeigten Text problemlos ohne Ternäre steuern.

  3. ? Wiederverwendbarkeit - PRXMPT -Komponenten nehmen Requisiten genauso wie normale JSX -Komponenten, wodurch sie leicht wiederverwendet werden können.

 const text = ((
  <gefüttert> <h1> Dies ist die erste Zeile. </h1> <Text hide = {hideline2}> Hier ist eine zweite Zeile. Brechen Sie den Text -Tag.
      Wir können hier sogar eine weitere Zeile starten, und ein Platz wird hinzugefügt. </Text>
  </ausgekleidet>);
Ergebnis ( 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.
Ergebnis ( 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.

Vergleichen Sie dies mit einem Äquivalent mit Template -Literalen:

 const text = `# Dies ist die erste Zeile. $ {Hideline2? "Nhere ist eine zweite Zeile." : ""} nnthis ist eine längere Linie, also sind wir inzwischen von der Seite aus. Wir können hier sogar eine weitere Zeile starten, aber ich würde es nicht empfehlen. ";

Installation

 npm install @autossey/prxmpt
 Garn fügen Sie @autossey/prxmpt hinzu
 PNPM add @autossey/prxmpt
 Bun add @autossey/prxmpt

Erste Schritte

Automatischer Modus

PRXMPT bietet eine Basis tsconfig.json , die Sie erweitern können:

 {"erweitert": "@autossey/prxmpt/tsconfig.json"}

Hinweis: Bun scheint PRXMPT nicht korrekt zu erkennen, wenn die Methode "Erweiterung" verwendet wird.

Alternativ können Sie einfach die folgenden Felder zu Ihrem tsconfig.json hinzufügen:

 {"CompilerOptions": {"JSX": "React-jsx", "JsximportSource": "@autossey/prxmpt", "Modul": "Knodenext"
  }
}

Sie sollten jetzt in der Lage sein, PRXMPT -Elemente zu verwenden, ohne zu importieren:

 Export const mycomponent = () => (
  <text> Hallo, Welt! </text>);

Wenn Sie PRXMPT mit React verwenden, fügen Sie die folgende Zeile oben in jeder Datei hinzu, die stattdessen PRXMPT verwendet:

 /** @jsximportSource @autossey/prxmpt*/export const mycomponent = () => (
  <text> Hallo, Welt! </text>);
Klassischer Modus

Beispiele

Im Beispielverzeichnis sind mehrere Beispiele angegeben:

Beispiele für Elementnutzung:

  • Küchenspüle (zeigt viele Elemente)

  • Priorität (einige Beispiele für das <priority> Element)

Setup -Beispiele (TypeScript):

  • Brötchen

  • Brötchen (klassischer Modus)

  • Weiter.js

  • SWC

  • SWC (klassischer Modus)

  • TS-Knoten

  • TS-Knoten (klassischer Modus)

  • tsc

  • TSC (klassischer Modus)

Setup -Beispiele (JavaScript):

  • Knoten - -loader @autossey/prxmpt

  • SWC

  • SWC (klassischer Modus)

Beispiele für die Verwendung bestimmter Elemente zeigen die Tests mehr USA.

Elemente

  • Textelemente

    • <kv> (Schlüsselwertpaar)

    • <state>

    • <ask>

    • <exclaim>

    • <comment type="slash">

    • <comment type="hash">

    • <comment type="dash">

    • <comment type="html">

    • <sq> (einzelnes Zitat)

    • <dq> (Doppelzitat)

    • <bq> (Back -Zitat)

    • <tsq> (dreifaches einzelnes Zitat)

    • <tdq> (dreifaches Doppelzitat)

    • <tbq> (Triple Back -Zitat)

    • <parens> (Klammern)

    • <square> (Quadratklammer)

    • <curly> (Quadratklammer)

    • <angle> (Winkelhalterung)

    • <empty>

    • <space>

    • <tab>

    • <ellipsis>

    • <na> (n/a)

    • <text>

    • Charaktere

    • Klammern

    • Zitate

    • Kommentare

    • Sätze

    • Verschiedenes

  • HTML -Elemente

    • <span>

    • <p>

    • <blockquote>

    • <q>

    • <pre>

    • <i> (kursiv)

    • <b> (fett)

    • <s> (striftens)

    • <code> (Code)

    • <ul> (ungeordnete Liste)

    • <ol> (bestellte Liste)

    • <cl> (Kontrollkästchen -Liste)

    • <dl> (Definitionsliste)

    • <h1>

    • <h2>

    • <h3>

    • <h4>

    • <h5>

    • <h6>

    • <a> (Anker)

    • <img> (Bild)

    • <br> (Zeilenpause)

    • <hr> (horizontale Regel)

    • <tag>

    • Bricht

    • Verknüpfung

    • Überschriften

    • Listen

    • Styling

    • Verschiedenes

  • Serialisierungselemente

    • <json>

    • <yaml>

    • <datetime>

    • <date>

    • <time>

    • <year>

    • <month>

    • <day>

    • <hour>

    • <minute>

    • <second>

    • <millisecond>

    • <duration>

    • <num>

    • Primitive

    • Daten

    • Objekte

  • Dienstprogrammelemente

    • <cap>

    • <priority>

    • <trim>

    • <frame>

    • <and>

    • <andor>

    • <or>

    • <nor>

    • <lined>

    • <spaced>

    • <csl> (comma getrennte Liste)

    • <union>

    • <sectioned>

    • <upper>

    • <lower>

    • <capital>

    • <title>

    • Gehäuse

    • Schließt sich an

    • Sets

    • Affixes

    • Begrenzer

Exporte

Die folgenden Funktionen werden ebenfalls von PRXMPT exportiert:

  • Rendering

    • createElement

    • render

  • Kinder

    • hasChildren

    • isChildren

  • Splitter

    • split

    • paragraphs

    • lines

    • spaces

    • words

    • commas

    • chars

Textelemente

Text

<text>

Text ist das Basis -PRXMPT -Element. Es gibt seine Kinder als Schnur zurück:

 const string = <text> Hallo, Welt! </text>;
Ergebnis 
Hello, World!

Der Text kann auch mit der Prop hide versteckt werden:

 const string = <text> Hallo <Text ausblenden>, world </hide>! </text>;
Ergebnis 
Hello!
Requisiten

Da <text> die Basis der meisten anderen Elemente ist, können die von ihnen bereitgestellten Requisiten mit den meisten anderen Elementen verwendet werden.

PRXMPT behandelt Kinder als eine Reihe von Zeichenfolgen, was bedeutet, dass <text> auch mehrere Array -Funktionen für die Zuordnung, Filtern und Beiträge für Kinder bereitstellen können.

  • verstecken

 /*** verhindern, dass das Element gerendert wird. * @Default false */hide ?: boolean;

  • Filter

 /*** Eine Funktion zum Filtern von Kindern. * @Default (Knoten) => true */filter ?: (node: prxmpt.Children, Index: Nummer, arr: prxmpt.Children []) => boolean;

  • Karte

 /*** Eine Funktion, die jedes Kind einem neuen Element ordnet. * @Default (Knoten) => prxmpt.render (Knoten) */map ?: (node: prxmpt.children, index: nummer, arr: prxmpt.children []) => prxmpt.jsx.element;

  • umkehren

 /*** Umkehren Sie die Reihenfolge der Kinder um. */umgekehrt?: boolean;

  • verbinden

 /*** Ein Element zum Einfügen in jedes Kind. * @Default "" */join ?: prxmpt.Children;

  • wiederholen

 /** * @Default 1 */repep ?: number;

  • trimmen

 /*** `true`: Trage Whitespace von Anfang und Ende des Elements. * * `" Start "`: Trimmhitze vom Beginn des Elements trimmen. * * `" Ende "`: Trimmhitze vom Ende des Elements. * * @default false */trim ?: boolean | Trimside;

  • Gehäuse

 /*** Konvertieren Sie das Element in ein bestimmtes Gehäuse. * @Default undefiniert */Case ?: Case;

  • Präfix

 /*** Ein Element zum Vorbereiten des Elements. * @Default "" */Präfix ?: prxmpt.Children;

  • Suffix

 /*** Ein Element zum Anhängen des Elements. * @Default "" */Suffix ?: prxmpt.Children;

  • Einzug

 /*** Anwenden Sie die Eindrücke auf jede Zeile des Elements an. * * Wenn `true`, wird die Eindrücke unter Verwendung von 2 Leerzeichen angewendet. * * Wenn eine Zahl bereitgestellt wird, wird diese Anzahl der Räume verwendet. * * Wenn `" t "` bereitgestellt wird, wird ein einzelnes Registerkartenzeichen verwendet. * * @default false */Eingeklagter ?: boolean | Nummer | "T";

  • Block

 /*** eine neue Zeile am Ende des Elements anhängen. * @Default false */block ?: boolean;

Charaktere

Leer

<empty>

Das Element <empty> gibt eine leere Zeichenfolge zurück:

 // "" const String = <leer />;

<empty> ist oft als Kind von Elementen nützlich, die sich ihren Kindern mit einem Trennzeichen anschließen.

 const String = ((
  <Geed> <text> Zeile 1 </text> <leer/> <text> Zeile 3 </text>
  </ausgekleidet>);
Ergebnis 
Line 1

Line 2

Raum

<space>

Das Element <space> gibt einen Raum zurück:

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

Tab

<tab>

Requisiten

  • wörtlich

 /*** Wenn wahr, verwenden Sie einen wörtlichen Registerkartenzeichen. Ansonsten verwenden Sie Leerzeichen.  * @default false */literal ?: boolean;

  • Breite

 /** * Anzahl der Zeichen pro Tab * @Default 1 Wenn `literal` wahr ist, sonst 2 */width ?: number;
 // "" const string = <täg width = {4} />

Ellipse

<ellipsis>

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

N / A

<na>

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

?

Klammern

Klammern

<parens>

 const String = <parens> Hallo, Welt! </parens>;
Ergebnis 
(Hello, World!)

Quadratklammer

<square>

 const string = <quadrat> Hallo, Welt! </square>;
Ergebnis 
[Hello, World!]

Lockige Klammer

<curly>

 const string = <curly> Hallo, Welt! </Curly>;
Ergebnis 
{Hello, World!}

Winkelhalterung

<angle>

 const String = <Gonle> Hallo, Welt! </Angle>;
Ergebnis 
<Hello, World!>

Zitate

Einzelnes Zitat

<sq>

 const string = <sq> Hallo, Welt! </sq>;
Ergebnis 
'Hello, World!'

Doppelzitat

<dq>

 const string = <dq> Hallo, Welt! </dq>;
Ergebnis 
"Hello, World!"

Zurück -Zitat

<bq>

 const string = <bq> Hallo, Welt! </bq>;
Ergebnis 
`Hello, World!`

Dreifaches Zitat

<tsq>

 const string = <tsq> Hallo, Welt! </tsq>;
Ergebnis 
'''
Hello, World!
'''

Dreifaches Doppelzitat

<tdq>

 const string = <tdq> Hallo, Welt! </tdq>;
Ergebnis 
"""
Hello, World!
"""

Triple Back -Zitat

<tbq>

 const tbq = <tbq> Hallo, Welt! </tbq>;
Ergebnis
 `` `
Hallo Welt!
`` `

Kommentare

Slash -Kommentar

<comment type="slash">

 const Slash = <Kommentar Typ = "Slash"> Hallo, Welt! </comment>;
Ergebnis 
// Hello, World!

Hash -Kommentar

<comment type="hash">

 const Hash = <Kommentar Typ = "Hash"> Hallo, Welt! </comment>;
Ergebnis 
# Hello, World!

Dash Kommentar

<comment type="dash">

 const Dash = <Kommentar type = "Dash"> Hallo, Welt! </comment>;
Ergebnis 
-- Hello, World!

HTML -Kommentar

<comment type="html">

 const html = <comment type = "html"> Hallo, Welt! </comment>;
Ergebnis 
<!-- Hello, World! -->

Sätze

Zustand

<state>

 const state = <Stace> Hallo, Welt! </State>;
Ergebnis 
Hello, World.

Fragen

<ask>

 const Ask = <ABLE> Hallo, Welt! </frage>;
Ergebnis 
Hello, World?

Ausrufen

<exclaim>

 const ruraim = <ausruf> Hallo, Welt! </raim>;
Ergebnis 
Hello, World!

Verschiedenes

Schlüsselwertpaar

<kv>

Requisiten

  • Schlüssel

 /*** Ein Schlüssel zum Rendern.  */key: prxmpt.Children;

  • Keycase

 /*** Fall für den Schlüssel angewendet werden.  * @default undefined */keyCase ?: "ober" | "niedriger" | "Kapital" | "Titel";

  • wickeln

 /*** Überschreiben Sie das Standardverhalten für das Verpacken des Wertes. * @Default undefined */Wrap ?: Boolean;

  • Nospace

 /*** Wenn wahr, fügen Sie keinen Speicherplatz zwischen Schlüssel und Wert hinzu. * Gilt nur, wenn sie nicht eingewickelt werden. * @default false */nospace ?: boolean;
 const string = <kv key = "hello"> world </kv>;
Ergebnis 
Hello: World

Wenn die Kinder mehrere Zeilen enthalten, wird der Wert standardmäßig mit einer neuen Zeile ausgeführt:

 const welts = (
  <tdq join = {"n"}> <text> world1 </text> <text> world2 </text> <text> world3 </text>
  </tdq>); const String = <kv key = "hello"> {welts} </kv>;
Ergebnis 
Hello:
"""
World1
World2
World3
"""

HTML -Elemente

HTML -Elemente sind oben auf dem <tag> -Element aufgebaut. Jedes HTML -Element hat eine booleale html -Requisite, die standardmäßig auf false gesetzt ist. Wenn html wahr ist, wird das Element als HTML gerendert. Andernfalls wird das Element als Markdown -Äquivalent gerendert.

Zusätzlich können benutzerdefinierte Attribute mithilfe der attributes Prop eingestellt werden.

Etikett

<tag>

Requisiten

  • Name

 /*** Name des Tags. */Name: String;

  • Noindent

 /** * @default false */noindent ?: boolean;

  • wickeln

 /*** standardmäßig true, wenn der Inhalt eine neue Linie enthält. */Wrap?: Boolean;
 const tag = <tag name = "mytag"> Hallo, Welt! </Tag>;
Ergebnis 
<mytag>Hello, World!</mytag>

Wenn keine Kinder zur Verfügung gestellt werden, wird das Tag als sich selbst klingelnder Tag erfüllt:

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

Bricht

Zeilenpause

<br />

 // "n" const br = <br />;
 const br = <br html />;
Ergebnis 
<br />

Horizontale Regel

<hr />

Requisiten

  • Breite

 /** * @Default 3 */width ?: number;

  • verkohlen

 /** * @Default "-" */char ?: "-" | "_" | "=" | "*";
 const hr = <hr />;
Ergebnis 
---
 const hr = <hr />;
Ergebnis 
<hr />

Verknüpfung

Anker

<a>

Requisiten

  • href

 /*** Die URL des Links. */href: String;

  • Titel

 /*** Ein Titel für den Link. */Titel ?: String;
 const string = <a href = "https://example.com" title = "a title"> Hallo, Welt! </a>;
Ergebnis 
[Hello, World!](https://example.com "A Title")
 const string = <a href = "https://example.com" title = "a title" html> Hallo, Welt! </a>;
Ergebnis 
<a href="https://example.com" title="A Title">Hello, World!</a>

Bild

<img>

Requisiten

  • src

 /*** Die URL des Bildes. */href: String;

  • Titel

 /*** Ein Titel für das Bild. */Titel ?: String;
 const string = <img src = "https://example.com" title = "a title"> Hallo, Welt! </img>;
Ergebnis 
![Hello, World!](https://example.com "A Title")
 const string = <img src = "https://example.com" title = "a title" html> Hallo, Welt! </img>;
Ergebnis 
<img src="https://example.com" alt="Hello, World!" title="A Title" />

Überschriften

H1

<h1>

Standard:
 const String = <h1> Hallo, Welt! </h1>;
Ergebnis 
# Hello, World!
HTML:
 const string = <h1 html> Hallo, Welt! </h1>;
Ergebnis 
<h1>Hello, World!</h1>

H2

<h2>

Standard:
 const String = <h2> Hallo, Welt! </H2>;
Ergebnis 
## Hello, World!
HTML:
 const String = <H2 html> Hallo, Welt! </H2>;
Ergebnis 
<h2>Hello, World!</h2>

H3

<h3>

Standard:
 const String = <h3> Hallo, Welt! </h3>;
Ergebnis 
### Hello, World!
HTML:
 const string = <h3 html> Hallo, Welt! </h3>;
Ergebnis 
<h3>Hello, World!</h3>

H4

<h4>

Standard:
 const String = <h4> Hallo, Welt! </h4>;
Ergebnis 
#### Hello, World!
HTML:
 const string = <h4 html> Hallo, Welt! </h4>;
Ergebnis 
<h4>Hello, World!</h4>

H5

<h5>

Standard:
 const string = <h5> Hallo, Welt! </h5>;
Ergebnis 
##### Hello, World!
HTML:
 const String = <H5 html> Hallo, Welt! </h5>;
Ergebnis 
<h5>Hello, World!</h5>

H6

<h6>

Standard:
 const string = <h6> Hallo, Welt! </h6>;
Ergebnis 
###### Hello, World!
HTML:
 const String = <H6 html> Hallo, Welt! </h6>;
Ergebnis 
<h6>Hello, World!</h6>

Listen

Bestellte Liste

<ol>

Requisiten

  • Nur markiflist

 /*** Enthält nur Markierungen, wenn die Liste mehr als ein Element enthält.  * @default false */nurmarkiflist ?: boolean;
 const String = ((
  <ol> <text> Hallo </text> <text> Welt </text>
  </ol>);
Ergebnis 
1. Hello
2. World

Ungeordnete Liste

<ul>

Requisiten

  • Nur markiflist

 /*** Enthält nur Markierungen, wenn die Liste mehr als ein Element enthält.  * @default false */nurmarkiflist ?: boolean;
 const String = ((
  <ul> <text> Hallo </text> <text> Welt </text>
  </ul>);
Ergebnis 
- Hello
- World

Kontrollkästchen -Liste

<cl>

Requisiten

  • Artikel

 Artikel: {
  /** * @default false */
  überprüft ?: Boolean;
  /*** Inhalt zum Rendern nach dem Kontrollkästchen.   */
  Inhalt: prxmpt.Children;} [];
 const String = ((
  <Clitems = {[{Inhalt: "Hallo"}, {Inhalt: "Welt", überprüft: true},]}
  />);
Ergebnis 
- [ ] Hello
- [x] World

Definitionsliste

<dl>

Requisiten

  • Artikel

 /*** Die Gegenstände zu rendern. */items: record <string, prxmpt.children>;

  • Term Case

 /*** Gehäuse, um auf jeden Schlüssel anzuwenden. * @Default undefined */termCase ?: "ober" | "niedriger" | "Kapital" | "Titel";

  • Raum

 /*** Anzahl der mit leer ausgekleideten Läden zwischen jedem Element. * @Default 0 */space ?: number;

  • wickeln

 /*** Überschreiben Sie das Standardverhalten für das Verpackungswerten. * @Default undefined */Wrap ?: Boolean;
 const String = ((
  <dlitems = {{hello: "world", foo: "bar"}}
  />);
Ergebnis 
Hello: World
Foo: Bar

Styling

Kursiv

<i>

Requisiten

  • verkohlen

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

Deutlich

<b>

Requisiten

  • verkohlen

 /***@Default "*"*/char ?: "*" | "_";
Standard:
 const String = <b> Hallo, Welt! </b>;
Ergebnis 
**Hello, World!**
HTML:
 const string = <b html> Hallo, Welt! </b>;
Ergebnis 
<b>Hello, World!</b>

Schlägen

<s>

Standard:
 const string = <s> Hallo, Welt! </S>;
Ergebnis 
~~Hello, World!~~
HTML:
 const String = <s html> Hallo, Welt! </S>;
Ergebnis 
<s>Hello, World!</s>

Code

<code>

Standard:
 const string = <code> Hallo, Welt! </code>;
Ergebnis 
`Hello, World!`
HTML:
 const String = <Code html> Hallo, Welt! </code>;
Ergebnis 
<code>Hello, World!</code>

Verschiedenes

Spanne

<span>

Standard:

Wenn er als Text gerendert wird, rendert <span> einfach seine Kinder wie <text> :

 const string = <span> Hallo, Welt! </span>;
Ergebnis 
Hello, World!
HTML:
 const String = <span html> Hallo, Welt! </span>;
Ergebnis 
<span>Hello, World!</span>

Absatz

<p>

Standard:

Wenn das Absatz -Tag als Text als Text gerendert wird, fügt sie am Ende des Elements eine neue Zeile hinzu:

 const string = <p> Hallo, Welt! </p>;
Ergebnis 
Hello, World!
HTML:
 const string = <p html> Hallo, Welt! </p>;
Ergebnis 
<p>Hello, World!</p>

Blockquote

<blockquote>

Standard:
 const String = ((
  <blockquote join = {"n"}> <text> Hallo </text> <leer/> <text> Welt! </text>
  </blockquote>);
Ergebnis 
> Hello
>
> World!
HTML:
 const string = <blockquote html> Hallo, Welt! </blockquote>;
Ergebnis 
<blockquote>Hello, World!</blockquote>

Zitat

<q>

Requisiten

  • Typ

 /** * @default "double" */Typ ?: "Single" | "Doppel" | "Backtick";
Standard:

Das Zitatelement gibt ein dreifaches Zitat zurück, wenn die Kinder eine Newline enthalten, andernfalls gibt es ein einzelnes Zitat zurück.

Einzellinie
 const string = <Q> Hallo, Welt! </q>;
Ergebnis 
"Hello, World!"
Multi -Linie
 const string = <q> Hallo <br /> world < /q>;
Ergebnis 
"""
Hello, World!
"""
HTML:
 const string = <q html> Hallo, Welt! </q>;
Ergebnis 
<q>Hello, World!</q>

Vor

<pre>

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

Serialisierungselemente

Primitive

Num

<num>

Requisiten

  • hinzufügen

 /*** Fügen Sie der Zahl einen Wert hinzu. */add ?: nummer;

  • min

 /*** Mindestwert. Angewendet nach "add". */min?: Nummer;

  • Max

 /*** Maximaler Wert. Angewendet nach "add". */max ?: nummer;

  • behoben

 /*** Anzahl der Dezimalstellen. */behoben ?: Nummer;
 const string = <num fix = {2}> 1 </num>;
Ergebnis 
1.00
 const string = <num min = {1}> 0 </num>;
Ergebnis 
1

Daten

Datetime

Requisiten

  • Wert

 /** * @default date.now () */value ?: Datum | String | Nummer;

  • DateFormat

 /** * @default "kurz" */dateFormat ?: "long" | "Medium" | "kurz" | "voll";

  • Timeformat

 /** * @default "kurz" */timeFormat ?: "long" | "Medium" | "kurz" | "voll";
 const string = <datenetime />;
Ergebnis 
September 23, 2023 at 5:17 PM

Datum

Requisiten

  • Wert

 /** * @default date.now () */value ?: Datum | String | Nummer;

  • Format

 /** * @Default "kurz" */Format ?: "Long" | "Medium" | "kurz" | "voll";
 const String = <Date />;
Ergebnis 
September 23, 2023

Zeit

Requisiten

  • Wert

 /** * @default date.now () */value ?: Datum | String | Nummer;

  • Format

 /** * @Default "kurz" */Format ?: "Long" | "Medium" | "kurz" | "voll";
 const String = <Time />;
Ergebnis 
5:17 PM

Jahr

Requisiten

  • Wert

 /** * @default date.now () */value ?: Datum | String | Nummer;
 const String = <Jahr />
Ergebnis 
2023

Monat

Requisiten

  • Wert

 /** * @default date.now () */value ?: Datum | String | Nummer;

  • Format

 /** * @Default "Nummer" */Format ?: "Nummer" | "lang" | "kurz" | "eng";
 const string = <monat />
Ergebnis 
8
 const string = <monat format = "long" />
Ergebnis 
September
 const String = <Monatsformat = "Short" />
Ergebnis 
Sep
 const string = <monat format = "schmal" />
Ergebnis 
S

Tag

Requisiten

  • Wert

 /** * @default date.now () */value ?: Datum | String | Nummer;

  • Format

 /** * @Default "Nummer" */Format ?: "Nummer" | "lang" | "kurz" | "eng";
 const string = <tag />
Ergebnis 
6
 const String = <Day format = "long" />
Ergebnis 
Saturday
 const String = <Day format = "Short" />
Ergebnis 
Sat
 const String = <Day format = "schmal" />
Ergebnis 
S

Stunde

Requisiten

  • Wert

 /** * @default date.now () */value ?: Datum | String | Nummer;

  • Zyklus

 /** * @default "12" */cycle ?: "12" | "24";
 const string = <hour />
Ergebnis 
5
 const string = <hour cycle = "24">
Ergebnis 
17

Minute

Requisiten

  • Wert

 /** * @default date.now () */value ?: Datum | String | Nummer;
 const String = <Minute />
Ergebnis 
42

Zweite

Requisiten

  • Wert

 /** * @default date.now () */value ?: Datum | String | Nummer;
 const string = <secon />
Ergebnis 
42

Millisekunde

Requisiten

  • Wert

 /** * @default date.now () */value ?: Datum | String | Nummer;
 const String = <Millisekunden />
Ergebnis 
999

Dauer

Requisiten

  • Wert

 /*** Das Ende der Dauer. * @default date.now () */value ?: Datum | String | Nummer;

  • seit

 /*** Der Beginn der Dauer. */seit: Datum | String | Nummer;
 const string = <duration seit = {"" September 2021 "} />
Ergebnis 
2 years

Objekte

JSON

Requisiten

  • Daten

 /*** Die zu stringifizierten Daten. */data: nestedoptionaljsonValue;

  • hübsch

 /** * @default false */Pretty ?: Boolean;
 const string = <json data = {{hello: "world"}} Pretty />;
Ergebnis 
{
  "Hello": "World"
}

Yaml

Requisiten

  • Daten

 /*** Die zu stringifizierten Daten. */data: nestedoptionaljsonValue;

  • Nostartmarker

 /** * @default false */nostartmarker?: boolean;

  • SequenzIndent

 /** * @default false */sequenceIndent ?: boolean;
 const string = <yaml data = {{hello: "world"}} />;
Ergebnis 
---
hello: world

Dienstprogrammelemente

Gehäuse

Obere

<upper>

 const String = <Kopien> Hallo, Welt! </ober>;
Ergebnis 
HELLO, WORLD!

Untere

<lower>

 const string = <lower> Hallo, Welt! </länger>;
Ergebnis 
hello, world!

Hauptstadt

<capital>

 const String = <Capital> Hallo, Welt! </Capital>;
Ergebnis 
Hello, world!

Titel

<title>

 const String = <title> Hallo, Welt! </title>;
Ergebnis 
Hello, World!

Affixes

Trimmen

 // "Hallo, Welt!" Const String = <trim> Hallo, Welt! </trim>;
Ergebnis 
Hello, World!

Rahmen

Requisiten

  • mit

 /*** Ein Wert, der sowohl für `Präfix" als auch für `suffix` angewendet wird. */mit: prxmpt.Children;
 const String = <Frame With = "-"> Hallo, Welt! </Frame>;
Ergebnis 
-- Hello, World! --

Schließt sich an

Ausgekleidet

<lined>

 const String = ((
  <gefüttert> <text> Hallo </text> <text> Welt! </text>
  </ausgekleidet>);
Ergebnis 
Hello
World!

Abstand

<spaced>

 const String = ((
  <space> <text> Hallo </text> <text> Welt! </text>
  </respaced>);
Ergebnis 
Hello World!

Komma getrennte Liste

<csl>

Requisiten

  • Nospace

 /** * @default false */nospace?: boolean;
 const String = ((
  <CSL> <text> Hallo </text> <text> Welt </text>
  </csl>);
Ergebnis 
hello, world
 const String = ((
  <CSL Nospace> <text> Hallo </text> <text> Welt </text>
  </csl>);
Ergebnis 
hello,world

Union

<union>

Requisiten

  • Nospace

 /** * @default false */nospace?: boolean;
 const String = ((
  <Vergion> <text> Hallo </text> <text> Welt </text>
  </Union>);
Ergebnis 
hello | world
 const String = ((
  <Union Nospace> <text> Hallo </text> <text> Welt </text>
  </Union>);
Ergebnis 
hello|world

Geschnitten

Requisiten

  • Teiler

 /** * @Default "---" */Divider ?: String;

  • rahmen

 /*** Ob Trenner vor und nach dem Körper hinzufügen. * @Default False */Frame ?: Boolean;
 const String = ((
  <Stiched> <text> Hallo </text> <text> Welt! </text>
  </§iert>);
Ergebnis 
Hello
---
World!

Sets

Setzt die Separatoren automatisch anhand der Anzahl der bereitgestellten Kinder an.

Und

<and>

 const String = ((
  <und> <text> a </text>
  </und>);
Ergebnis 
a
 const String = ((
  <und> <text> a </text> <text> b </text>
  </und>);
Ergebnis 
a and b
 const String = ((
  <und> <text> a </text> <text> b </text> <text> c </text>
  </und>);
Ergebnis 
a, b, and c

Und / oder

<andor>

 const String = ((
  <ANDOR> <text> a </text> <text> b </text> <text> c </text>
  </andor>);
Ergebnis 
a, b, and/or c

Oder

<or>

 const String = ((
  <oder> <text> a </text> <text> b </text> <text> c </text>
  </oder>);
Ergebnis 
a, b, or c

Noch

<nor>

 const String = ((
  <nor> <text> a </text> <text> b </text> <text> c </text>
  </Nor>);
Ergebnis 
a, b, nor c

Begrenzer

Kappe

Mit dem <cap> -Element können Sie die Länge einer Zeichenfolge einschränken, indem Sie eine splitter und eine max Anzahl von "Einheiten" zur Verfügung stellen.

Requisiten

  • Max

 /*** Die maximalen "Einheiten" einbeziehen. * @Default Infinity */max ?: nummer;

  • Splitter

 /*** Eine Funktion, die eine Zeichenfolge in "Einheiten" aufteilt. * @default "chars" */splitter ?: "attacks" | "Linien" | "Räume" | "Worte" | "Kommas" | "Chars" | (String: String) => String [];

  • Ellipse

 /*** Eine Zeichenfolge, die am Ende angehängt ist, wenn das Maximum erreicht ist. * Diese Zeichenfolge ist in der maximalen Anzahl enthalten. * Wenn "wahr" "..." verwendet wird. * @Default undefined */ellipsis ?: String | WAHR;
 const string = <cap max = {5}> Hallo, Welt! </cap>;
Ergebnis 
Hello

Priorität

Das <priority> -Element ist wie eine breite CSS-Medienabfrage für Zeichenfolgen.

Anstatt eine Liste von Kindern bereitzustellen, erwartet <priority> eine Liste von Elementen, von denen jede Priorität haben kann. Höhere Prioritäten werden zuerst (wie z-index in CSS) erfüllt, und jedes Element hat eine Standardpriorität von 0. Es werden mehrere Strategien zur Feinabstimmung bereitgestellt, wie Elemente Priorität werden.

Prioritätselemente können auch verschachtelt werden, was eine extrem feinkörnige Kontrolle darüber ermöglicht, welche Inhalte gerendert werden. Mehrere Beispiele sind im Priority -Beispielverzeichnis enthalten.

Requisiten

  • Max

 /*** Die maximalen "Einheiten" einbeziehen. * @Default Infinity */max ?: nummer;

  • Schalter

 /*** Eine Funktion, die die Anzahl der "Einheiten" in einer Zeichenfolge zurückgibt. * @Default (String: String) => String.Length */counter ?: (String: String) => Nummer;

  • Artikel

 /*** Die Elemente, die in der Reihenfolge der Priorität rendern. */items: (prxmpt.children | {
  /*** Die Priorität dieses Artikels. Elemente mit höherer Priorität sind zuerst enthalten.   * @Default 0 */
  P ?: Nummer;
  /*** Der Inhalt zum Rendern.   */
  Inhalt: (Kapazität: Nummer) => prxmpt.Children) | Prxmpt.children;}) [];

  • Strategie

Die Strategie, die bei der Priorisierung von Elementen verwendet werden soll.
Wenn mehrere Strategien bereitgestellt werden, werden nachfolgende Strategien versucht, um die Beziehungen zu unterbrechen.

"priority" :

Priorisieren Sie die Elemente nach der vorgesehenen Priorität.
Sobald das Maximum erreicht ist, überprüfen Sie weiter, ob die verbleibenden Artikel passen.

"order-asc" :

Priorisieren Sie die Elemente nach der angegebenen Bestellung.
Sobald das Maximum erreicht ist, überprüfen Sie weiter, ob die verbleibenden Artikel passen.

"order-desc" :

Priorisieren Sie die Elemente umgekehrt umgekehrt der angegebenen Bestellung.
Sobald das Maximum erreicht ist, überprüfen Sie weiter, ob die verbleibenden Artikel passen.

"size-asc" :

Priorisieren Sie die Elemente in Größenreihenfolge, kleinste bis größte.
Verwenden Sie, wenn Sie so viele Elemente wie möglich einfügen möchten.

"size-desc" :

Priorisierte Artikel in Größenreihenfolge, größte bis kleinste.
Verwenden Sie, wenn Sie so wenige Elemente wie möglich einfügen möchten.

 /** * @Default ["Priorität", "Order-asc"] */Strategie ?: PriorityStrategy | PriorityStrategy [];

  • Noskip

 /*** Wenn `true`, überspringen Sie die Elemente nicht, nachdem das Maximum erreicht ist.  * @default false */noskip ?: boolean;
 const String = ((
  <priorityMax = {15} join = {"n"} items = {[{P: 2 Inhalt: "test 1"}, {// p: 0 ist der Standardinhalt: "Dies ist eine super lange Zeichenfolge, die gewonnen hat." t fit. "}, {P: 1, Inhalt:" Test 3 "}]} />);
Ergebnis 
Test 1
Test 3

Exporte

Rendering

createElement

 Import {createLement} aus "@autossey/prxmpt"; const String = createLement ("text", {}, "Hallo, Welt!");
Ergebnis 
Hello, World!

render

 importieren {render} aus "@autossey/prxmpt"; const String = render (
  <text> Hallo, Welt! </text>);
Ergebnis 
Hello, World!

Kinder

hasChildren

Gibt true zurück, wenn das angegebene Requisitenobjekt über ein children verfügt.

 Import {HaSchildren} aus "@autossey/prxmpt"; if (HaSchildren ({Kinder: "Hallo, Welt!"}) {
  // ...}

isChildren

Gibt true zurück, wenn der angegebene Wert ein gültiges PRXMPT -Element -Kind ist.

 Importieren {Ischildren} aus "@autossey/prxmpt"; if (ischildren ("Hallo, Welt!") {
  // ...}

Splitter

split

Teilen Sie children auf separator . Wenn separator undefined ist, tritt keine Spaltung auf.

 importieren {split} aus "@autossey/prxmpt"; const children = (
  <gefüttert> <text> Hallo </text> <text> Welt! </text>
  </ausgekleidet>); // ["Hallo", "Welt!"] const strings = split (Kinder, "n");

paragraphs

Spalt children auf "nn" .

lines

Teilen Sie children auf "n" .

spaces

Teilen Sie children auf Whitespace.

words

Teilen Sie children an Wortgrenzen.

commas

Spalt children auf "," .

characters

Teilen Sie children auf "" .

Abhängigkeiten

  • @swc/core: Super-schnelle Alternative für Babel

  • AS-TYPED-Array: Machen Sie einen Wert zu einem Array

  • Typen-JSON: Geben Sie die Überprüfung für JSON-Objekte ein

  • YAML: JavaScript -Parser und Stringifier für YAML

Dev -Abhängigkeiten

  • @Autossey/Eslint-Config: Eine Basis für Projekte, die Eslint verwenden.

  • @Autossey/Tsconfig: Eine Sammlung von Basis -Tsconfigs für verschiedene Arten von Projekten.

  • @Scherz/Global

  • @swc/scherde: SWC -Integration für Scherz

  • @Typen/Knoten: TypeScript -Definitionen für node.js

  • Eslint: Ein AST-basierter Musterprüfer für JavaScript.

  • Scherz: Köstliche JavaScript -Tests.

  • TypeScript: TypeScript ist eine Sprache für die JavaScript -Entwicklung der Anwendungsskala

Lizenz

MIT - Die MIT -Lizenz

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle