Beranda>Terkait pemrograman>Kode Sumber AI
Unduh
-Prompt Crafting dengan JSX-

NPM • GitHub • Masalah

PRXMPT seperti "Tailwind for Prompt Engineering" . Ini menyediakan serangkaian utilitas untuk memformat string dengan JSX.

PRXMPT dirancang untuk membentuk input ke LLMS, dan termasuk elemen -elemen kuat seperti <pioritas> untuk mengelola token. Namun, PRXMPT juga menyediakan elemen markdown dan HTML, membuatnya sempurna untuk memformat output LLM untuk pengguna akhir juga.

Mengapa JSX?

  1. Keterbacaan - JSX memberi kami lebih banyak kontrol atas whitespace, memungkinkan lebih banyak kode yang dapat dibaca.

  2. ? ️ Control - Dengan alat peraga bawaan seperti hide , kami dapat dengan mudah mengontrol teks yang kami tampilkan tanpa ternaries.

  3. ? Reusability - Komponen PRXMPT mengambil alat peraga seperti komponen JSX normal, membuatnya mudah digunakan kembali.

 const text = (
  <lined> <h1> Ini adalah baris pertama. </h1> <text hide = {hideline2}> inilah baris kedua. </text> <kosong/> <ext> ini adalah baris yang lebih panjang, jadi kami akan kami Hancurkan tag teks.
      Kami bahkan dapat memulai baris lain di sini, dan ruang akan ditambahkan. </sext>
  </slined>);
Hasil ( 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.
Hasil ( 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.

Bandingkan ini dengan yang setara dengan menggunakan literal template:

 const text = `# Ini adalah baris pertama. $ {hideline2? "Tidak ada baris kedua." : ""} nnThis adalah baris yang lebih panjang, jadi sekarang kita tidak ada halaman. Kami bahkan dapat memulai baris lain di sini, tetapi saya tidak akan merekomendasikannya.`;

Instalasi

 NPM Instal @Autossey/Prxmpt
 Benang Tambahkan @Autossey/prxmpt
 PNPM Tambahkan @Autossey/prxmpt
 BUN Tambahkan @Autossey/prxmpt

Memulai

Mode otomatis

Prxmpt menyediakan tsconfig.json dasar yang dapat Anda perpanjang:

 {"Extends": "@Autossey/prxmpt/tsconfig.json"}

Catatan: BUN tampaknya tidak mendeteksi PRXMPT dengan benar saat menggunakan metode "Extends".

Atau, Anda cukup menambahkan bidang berikut ke tsconfig.json Anda:

 {"compileroptions": {"jsx": "react-jsx", "jsximportsource": "@autossey/prxmpt", "module": "nodenext"
  }
}

Anda harus dapat menggunakan elemen prxmpt sekarang, tanpa mengimpor:

 Ekspor const myComponent = () => (
  <text> halo, dunia! </text>);

Jika menggunakan prxmpt dengan reaksi, tambahkan baris berikut di bagian atas setiap file yang menggunakan prxmpt sebagai gantinya:

 /** @jsximportsource @autossey/prxmpt*/ekspor const mycomponent = () => (
  <text> halo, dunia! </text>);
Mode klasik

Contoh

Beberapa contoh disediakan di Direktori Contoh:

Contoh Penggunaan Elemen:

  • wastafel dapur (menampilkan banyak elemen)

  • Prioritas (beberapa contoh elemen <priority> )

Contoh Pengaturan (TypeScript):

  • sanggul

  • Bun (mode klasik)

  • Next.js

  • swc

  • SWC (mode klasik)

  • TS-Node

  • TS-Node (Mode Klasik)

  • tsc

  • TSC (mode klasik)

Contoh Pengaturan (JavaScript):

  • node ---loader @autossey/prxmpt

  • swc

  • SWC (mode klasik)

Untuk contoh cara menggunakan elemen tertentu, tes menunjukkan lebih banyak usecases.

Elemen

  • Elemen teks

    • <kv> (pasangan nilai kunci)

    • <state>

    • <ask>

    • <exclaim>

    • <comment type="slash">

    • <comment type="hash">

    • <comment type="dash">

    • <comment type="html">

    • <sq> (kutipan tunggal)

    • <dq> (kutipan ganda)

    • <bq> (Kutipan Kembali)

    • <tsq> (triple single quote)

    • <tdq> (triple double quote)

    • <tbq> (penawaran triple back)

    • <parens> (tanda kurung)

    • <square> (braket persegi)

    • <curly> (braket persegi)

    • <angle> (Braket Angle)

    • <empty>

    • <space>

    • <tab>

    • <ellipsis>

    • <na> (n/a)

    • <text>

    • Karakter

    • Kurung

    • Kutipan

    • Komentar

    • Kalimat

    • Aneka ragam

  • Elemen html

    • <span>

    • <p>

    • <blockquote>

    • <q>

    • <pre>

    • <i> (miring)

    • <b> (tebal)

    • <s> (Strikethrough)

    • <code> (kode)

    • <ul> (daftar tidak tertib)

    • <ol> (daftar yang dipesan)

    • <cl> (daftar kotak centang)

    • <dl> (daftar definisi)

    • <h1>

    • <h2>

    • <h3>

    • <h4>

    • <h5>

    • <h6>

    • <a> (jangkar)

    • <img> (gambar)

    • <br> (line break)

    • <hr> (aturan horizontal)

    • <tag>

    • Istirahat

    • Menghubungkan

    • Judul

    • Daftar

    • Gaya

    • Aneka ragam

  • Elemen serialisasi

    • <json>

    • <yaml>

    • <datetime>

    • <date>

    • <time>

    • <year>

    • <month>

    • <day>

    • <hour>

    • <minute>

    • <second>

    • <millisecond>

    • <duration>

    • <num>

    • Primitif

    • Tanggal

    • Objek

  • Elemen utilitas

    • <cap>

    • <priority>

    • <trim>

    • <frame>

    • <and>

    • <andor>

    • <or>

    • <nor>

    • <lined>

    • <spaced>

    • <csl> (Daftar terpisah koma)

    • <union>

    • <sectioned>

    • <upper>

    • <lower>

    • <capital>

    • <title>

    • Selubung

    • Bergabung

    • Set

    • Affixes

    • Pembatas

Ekspor

Fungsi -fungsi berikut juga diekspor dari PRXMPT:

  • Rendering

    • createElement

    • render

  • Anak-anak

    • hasChildren

    • isChildren

  • Splitter

    • split

    • paragraphs

    • lines

    • spaces

    • words

    • commas

    • chars

Elemen teks

Teks

<text>

Teks adalah elemen prxmpt dasar. Itu mengembalikan anak -anaknya sebagai string:

 const string = <text> halo, dunia! </text>;
Hasil 
Hello, World!

Teks juga dapat disembunyikan dengan prop hide :

 const string = <text> halo <hide text>, world </side>! </text>;
Hasil 
Hello!
Alat peraga

Karena <text> adalah dasar dari sebagian besar elemen lain, alat peraga yang disediakan dapat digunakan dengan sebagian besar elemen lainnya.

PRXMPT memperlakukan anak -anak sebagai serangkaian string, yang berarti <text> juga dapat menyediakan beberapa fungsi array untuk pemetaan, penyaringan, dan bergabung dengan anak -anak.

  • bersembunyi

 /*** Mencegah elemen yang diterjemahkan. * @Default false */hide?: boolean;

  • menyaring

 /*** Fungsi untuk menyaring anak -anak. * @Default (node) => true */filter?: (node: prxmpt.children, index: number, arr: prxmpt.children []) => boolean;

  • peta

 /*** Fungsi yang memetakan setiap anak ke elemen baru. * @Default (node) => prxmpt.render (node) */peta?: (node: prxmpt.children, index: number, arr: prxmpt.children []) => prxmpt.jsx.element;

  • balik

 /*** membalikkan urutan anak -anak. */Reverse?: Boolean;

  • bergabung

 /*** elemen untuk disisipkan di antara setiap anak. * @Default "" */gabung?: prxmpt.children;

  • mengulang

 /** * @default 1 */ulangi?: angka;

  • memangkas

 /*** `true`: Trim Whitespace dari awal dan akhir elemen. * * `" MULAI "`: Trim Whitespace dari awal elemen. * * `" end "`: Trim Whitespace dari ujung elemen. * * @default false */trim?: boolean | Trimside;

  • selubung

 /*** Konversi elemen menjadi casing yang diberikan. * @Default tidak terdefinisi */casing?: casing;

  • awalan

 /*** elemen untuk diatur ke elemen. * @Default "" */awalan?: prxmpt.children;

  • akhiran

 /*** elemen untuk ditambahkan ke elemen. * @default "" */suffix?: prxmpt.children;

  • indentasi

 /*** Terapkan lekukan untuk setiap baris elemen. * * Jika `true`, indentasi diterapkan menggunakan 2 ruang. * * Jika nomor disediakan, jumlah spasi itu digunakan. * * Jika `" T "` disediakan, karakter tab tunggal digunakan. * * @default false */indent?: boolean | Nomor | "T";

  • memblokir

 /*** Tambahkan garis baru ke akhir elemen. * @Default false */block?: boolean;

Karakter

Kosong

<empty>

Elemen <empty> mengembalikan string kosong:

 // "" const string = <kosong />;

<empty> sering berguna sebagai anak dari elemen yang bergabung dengan anak -anak mereka dengan pembatas.

 const string = (
  <lined> <text> baris 1 </ext> <kosong/> <pruct> baris 3 </ext>
  </slined>);
Hasil 
Line 1

Line 2

Ruang angkasa

<space>

Elemen <space> mengembalikan ruang:

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

Tab

<tab>

Alat peraga

  • harfiah

 /*** Jika benar, gunakan karakter tab literal. Jika tidak, gunakan spasi.  * @Default false */literal?: boolean;

  • lebar

 /** * Jumlah karakter per tab * @default 1 jika `literal` benar, jika tidak 2 */lebar?: Angka;
 // "" const string = <tab lebar = {4} />

Elipsis

<ellipsis>

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

Na

<na>

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

?

Kurung

Kurung

<parens>

 const string = <parens> halo, dunia! </darens>;
Hasil 
(Hello, World!)

Braket persegi

<square>

 const string = <square> halo, dunia! </square>;
Hasil 
[Hello, World!]

Braket keriting

<curly>

 const string = <urly> halo, dunia! </urly>;
Hasil 
{Hello, World!}

Braket sudut

<angle>

 const string = <An Angle> halo, dunia! </angle>;
Hasil 
<Hello, World!>

Kutipan

Kutipan tunggal

<sq>

 const string = <sq> halo, dunia! </sq>;
Hasil 
'Hello, World!'

Kutipan ganda

<dq>

 const string = <dq> halo, dunia! </dq>;
Hasil 
"Hello, World!"

Kutipan Kembali

<bq>

 const string = <bq> halo, dunia! </bq>;
Hasil 
`Hello, World!`

Kutipan tunggal tiga

<tsq>

 const string = <tsq> halo, dunia! </tsq>;
Hasil 
'''
Hello, World!
'''

Kutipan tiga kali lipat

<tdq>

 const string = <tdq> halo, dunia! </tdq>;
Hasil 
"""
Hello, World!
"""

Kutipan tiga kali lipat

<tbq>

 const tbq = <tbq> halo, dunia! </tbq>;
Hasil
 `` `
Halo, dunia!
`` `

Komentar

Slash Comment

<comment type="slash">

 const slash = <type komentar = "slash"> halo, dunia! </komentar>;
Hasil 
// Hello, World!

Komentar hash

<comment type="hash">

 const hash = <komentar type = "hash"> halo, dunia! </komentar>;
Hasil 
# Hello, World!

Komentar dasbor

<comment type="dash">

 const dash = <komentar type = "dash"> halo, world! </koment>;
Hasil 
-- Hello, World!

Komentar HTML

<comment type="html">

 const html = <type komentar = "html"> halo, dunia! </koment>;
Hasil 
<!-- Hello, World! -->

Kalimat

Negara

<state>

 const state = <tate> halo, dunia! </tenaga>;
Hasil 
Hello, World.

Bertanya

<ask>

 const ask = <k ask> halo, dunia! </ask>;
Hasil 
Hello, World?

Berseru

<exclaim>

 const seru = <cercraim> halo, dunia! </cercraim>;
Hasil 
Hello, World!

Aneka ragam

Pasangan Nilai Kunci

<kv>

Alat peraga

  • kunci

 /*** Kunci untuk diterjemahkan.  */Key: prxmpt.children;

  • Keycase

 /*** Kasus untuk diterapkan ke kunci.  * @Default tidak terdefinisi */keycase?: "Upper" | "lebih rendah" | "Modal" | "judul";

  • membungkus

 /*** Mengamati perilaku default untuk membungkus nilainya. * @Default tidak ditentukan */wrap?: boolean;

  • nospace

 /*** Jika benar, jangan tambahkan ruang antara kunci dan nilai. * Hanya berlaku saat tidak membungkus. * @Default false */nospace?: boolean;
 const string = <kv key = "hello"> dunia </kv>;
Hasil 
Hello: World

Ketika anak -anak mengandung banyak baris, nilainya diberikan mulai dari garis baru secara default:

 const worlds = (
  <tdq join = {"n"}> <pruct> world1 </text> <text> world2 </text> <text> world3 </text>
  </tdq>); const string = <kv key = "hello"> {worlds} </kv>;
Hasil 
Hello:
"""
World1
World2
World3
"""

Elemen html

Elemen HTML dibangun di atas elemen <tag> . Setiap elemen HTML memiliki prop html boolean yang diatur ke false secara default. Ketika html benar, elemen tersebut diterjemahkan sebagai HTML. Kalau tidak, elemen tersebut diterjemahkan sebagai setara dengan penurunan harga.

Selain itu, atribut khusus dapat diatur menggunakan prop attributes .

Menandai

<tag>

Alat peraga

  • nama

 /*** Nama tag. */name: string;

  • Noindent

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

  • membungkus

 /*** default ke true jika konten berisi garis baru. */Wrap?: Boolean;
 tag const = <tag name = "mytag"> halo, world! </tag>;
Hasil 
<mytag>Hello, World!</mytag>

Jika tidak ada anak yang disediakan, tag tersebut diterjemahkan sebagai tag self-closing:

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

Istirahat

Line Break

<br />

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

Aturan horizontal

<hr />

Alat peraga

  • lebar

 /** * @default 3 */width?: angka;

  • arang

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

Menghubungkan

Jangkar

<a>

Alat peraga

  • href

 /*** URL tautan. */href: string;

  • judul

 /*** Judul untuk tautan. */title?: string;
 const string = <a href = "https://example.com" title = "A title"> Halo, World! </a>;
Hasil 
[Hello, World!](https://example.com "A Title")
 const string = <a href = "https://example.com" title = "A title" html> halo, dunia! </a>;
Hasil 
<a href="https://example.com" title="A Title">Hello, World!</a>

Gambar

<img>

Alat peraga

  • SRC

 /*** URL gambar. */href: string;

  • judul

 /*** Judul untuk gambar. */title?: string;
 const string = <img src = "https://example.com" title = "A title"> Halo, World! </img>;
Hasil 
![Hello, World!](https://example.com "A Title")
 const string = <img src = "https://example.com" title = "A title" html> halo, dunia! </img>;
Hasil 
<img src="https://example.com" alt="Hello, World!" title="A Title" />

Judul

H1

<h1>

Standar:
 const string = <h1> halo, dunia! </h1>;
Hasil 
# Hello, World!
Html:
 const string = <h1 html> halo, dunia! </h1>;
Hasil 
<h1>Hello, World!</h1>

H2

<h2>

Standar:
 const string = <h2> halo, dunia! </h2>;
Hasil 
## Hello, World!
Html:
 const string = <h2 html> halo, dunia! </h2>;
Hasil 
<h2>Hello, World!</h2>

H3

<h3>

Standar:
 const string = <h3> halo, dunia! </h3>;
Hasil 
### Hello, World!
Html:
 const string = <h3 html> halo, dunia! </h3>;
Hasil 
<h3>Hello, World!</h3>

H4

<h4>

Standar:
 const string = <h4> halo, dunia! </h4>;
Hasil 
#### Hello, World!
Html:
 const string = <h4 html> halo, dunia! </h4>;
Hasil 
<h4>Hello, World!</h4>

H5

<h5>

Standar:
 const string = <h5> halo, dunia! </h5>;
Hasil 
##### Hello, World!
Html:
 const string = <h5 html> halo, dunia! </h5>;
Hasil 
<h5>Hello, World!</h5>

H6

<h6>

Standar:
 const string = <h6> halo, dunia! </h6>;
Hasil 
###### Hello, World!
Html:
 const string = <h6 html> halo, dunia! </h6>;
Hasil 
<h6>Hello, World!</h6>

Daftar

Daftar yang dipesan

<ol>

Alat peraga

  • Onlymarkiflist

 /*** Hanya menyertakan penanda jika daftar tersebut berisi lebih dari satu item.  * @Default false */Onlymarkiflist?: boolean;
 const string = (
  <Ol> <Text> halo </text> <text> world </text>
  </l>);
Hasil 
1. Hello
2. World

Daftar yang tidak dipesan

<ul>

Alat peraga

  • Onlymarkiflist

 /*** Hanya menyertakan penanda jika daftar tersebut berisi lebih dari satu item.  * @Default false */Onlymarkiflist?: boolean;
 const string = (
  <ul> <text> halo </text> <text> dunia </text>
  </ul>);
Hasil 
- Hello
- World

Daftar kotak centang

<cl>

Alat peraga

  • item

 Item: {
  /** * @default false */
  diperiksa?: boolean;
  /*** Konten untuk diterjemahkan setelah kotak centang.   */
  konten: prxmpt.children;} [];
 const string = (
  <clitems = {[{content: "hello"}, {content: "world", checked: true},]}
  />);
Hasil 
- [ ] Hello
- [x] World

Daftar Definisi

<dl>

Alat peraga

  • item

 /*** Item untuk diterjemahkan. */item: Rekam <string, prxmpt.children>;

  • termcase

 /*** Casing untuk diterapkan pada setiap kunci. * @Default tidak terdefinisi */termcase?: "atas" | "lebih rendah" | "Modal" | "judul";

  • ruang angkasa

 /*** Jumlah kosong yang dilapisi untuk dimasukkan di antara setiap item. * @Default 0 */Space?: Number;

  • membungkus

 /*** Mengamati perilaku default untuk nilai pembungkus. * @Default tidak ditentukan */wrap?: boolean;
 const string = (
  <dlitems = {{hello: "world", foo: "bar"}}
  />);
Hasil 
Hello: World
Foo: Bar

Gaya

Miring

<i>

Alat peraga

  • arang

 /***@default "_"*/char?: "*" | "_";
Standar:
 const string = <i> halo, dunia! </i>;
Hasil 
_Hello, World!_
Html:
 const string = <i html> halo, dunia! </i>;
Hasil 
<i>Hello, World!</i>

Berani

<b>

Alat peraga

  • arang

 /***@default "*"*/char?: "*" | "_";
Standar:
 const string = <b> halo, dunia! </b>;
Hasil 
**Hello, World!**
Html:
 const string = <B html> halo, dunia! </b>;
Hasil 
<b>Hello, World!</b>

Strikethrough

<s>

Standar:
 const string = <s> halo, dunia! </s>;
Hasil 
~~Hello, World!~~
Html:
 const string = <s html> halo, dunia! </s>;
Hasil 
<s>Hello, World!</s>

Kode

<code>

Standar:
 const string = <code> halo, dunia! </code>;
Hasil 
`Hello, World!`
Html:
 const string = <code html> halo, dunia! </code>;
Hasil 
<code>Hello, World!</code>

Aneka ragam

Menjangkau

<span>

Standar:

Saat diterjemahkan sebagai teks, <span> cukup membuat anak -anaknya seperti <text> :

 const string = <span> halo, dunia! </span>;
Hasil 
Hello, World!
Html:
 const string = <span html> halo, dunia! </span>;
Hasil 
<span>Hello, World!</span>

Ayat

<p>

Standar:

Saat diterjemahkan sebagai teks, tag paragraf menambahkan garis baru di akhir elemen:

 const string = <p> halo, dunia! </p>;
Hasil 
Hello, World!
Html:
 const string = <p html> halo, dunia! </p>;
Hasil 
<p>Hello, World!</p>

Blockquote

<blockquote>

Standar:
 const string = (
  <BlockQuote gabungan = {"n"}> <text> halo </text> <kosong/<text> world! </ext>
  </blockquote>);
Hasil 
> Hello
>
> World!
Html:
 const string = <blockquote html> halo, dunia! </lockquote>;
Hasil 
<blockquote>Hello, World!</blockquote>

Mengutip

<q>

Alat peraga

  • jenis

 /** * @default "ganda" */type?: "single" | "Ganda" | "Backtick";
Standar:

Elemen kutipan mengembalikan triple Quote jika anak -anak berisi garis baru, jika tidak ia mengembalikan satu penawaran.

Satu baris
 const string = <Q> halo, dunia! </q>;
Hasil 
"Hello, World!"
Multi Line
 const string = <Q> halo <br /> dunia </q>;
Hasil 
"""
Hello, World!
"""
Html:
 const string = <q html> halo, dunia! </q>;
Hasil 
<q>Hello, World!</q>

Pra

<pre>

Standar:
 const string = <pr Pre> halo, dunia! </sh>;
Hasil
 `` `
Halo, dunia!
`` `
Html:
 const string = <pre html> halo, dunia! </pe>;
Hasil 
<pre>Hello, World!</pre>

Elemen serialisasi

Primitif

Num

<num>

Alat peraga

  • menambahkan

 /*** Tambahkan nilai ke nomor. */add?: nomor;

  • Min

 /*** Nilai minimum. Diterapkan setelah `add`. */Min?: Nomor;

  • Max

 /*** Nilai maksimum. Diterapkan setelah `add`. */max?: angka;

  • tetap

 /*** Jumlah tempat desimal. */diperbaiki?: nomor;
 const string = <num fixed = {2}> 1 </bum>;
Hasil 
1.00
 const string = <num min = {1}> 0 </bum>;
Hasil 
1

Tanggal

Datetime

Alat peraga

  • nilai

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

  • format date

 /** * @default "pendek" */dateFormat?: "long" | "Medium" | "Pendek" | "penuh";

  • Timeformat

 /** * @default "pendek" */timeformat?: "long" | "Medium" | "Pendek" | "penuh";
 const string = <dateTime />;
Hasil 
September 23, 2023 at 5:17 PM

Tanggal

Alat peraga

  • nilai

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

  • format

 /** * @default "pendek" */format?: "long" | "Medium" | "Pendek" | "penuh";
 const string = <date />;
Hasil 
September 23, 2023

Waktu

Alat peraga

  • nilai

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

  • format

 /** * @default "pendek" */format?: "long" | "Medium" | "Pendek" | "penuh";
 const string = <time />;
Hasil 
5:17 PM

Tahun

Alat peraga

  • nilai

 /** * @default date.now () */value?: date | String | nomor;
 const string = <tahun />
Hasil 
2023

Bulan

Alat peraga

  • nilai

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

  • format

 /** * @default "Nomor" */format?: "Nomor" | "Long" | "Pendek" | "sempit";
 const string = <bulan />
Hasil 
8
 const string = <format bulan = "long" />
Hasil 
September
 const string = <format bulan = "pendek" />
Hasil 
Sep
 const string = <format bulan = "sempit" />
Hasil 
S

Hari

Alat peraga

  • nilai

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

  • format

 /** * @default "Nomor" */format?: "Nomor" | "Long" | "Pendek" | "sempit";
 const string = <day />
Hasil 
6
 const string = <format day = "long" />
Hasil 
Saturday
 const string = <format hari = "pendek" />
Hasil 
Sat
 const string = <format hari = "sempit" />
Hasil 
S

Jam

Alat peraga

  • nilai

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

  • siklus

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

Menit

Alat peraga

  • nilai

 /** * @default date.now () */value?: date | String | nomor;
 const string = <menit />
Hasil 
42

Kedua

Alat peraga

  • nilai

 /** * @default date.now () */value?: date | String | nomor;
 const string = <detik />
Hasil 
42

Milidetik

Alat peraga

  • nilai

 /** * @default date.now () */value?: date | String | nomor;
 const string = <milidisecond />
Hasil 
999

Lamanya

Alat peraga

  • nilai

 /*** Akhir dari durasi. * @Default date.now () */value?: date | String | nomor;

  • sejak

 /*** Awal durasi. */Sejak: Tanggal | String | nomor;
 const string = <durasi sejak = {"September 2021"} />
Hasil 
2 years

Objek

Json

Alat peraga

  • data

 /*** Data untuk Stringify. */Data: NestedOptionalJsonValue;

  • cantik

 /** * @default false */cantik?: boolean;
 const string = <json data = {{hello: "world"}} cantik />;
Hasil 
{
  "Hello": "World"
}

Yaml

Alat peraga

  • data

 /*** Data untuk Stringify. */Data: NestedOptionalJsonValue;

  • nostartmarker

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

  • Sequenceindent

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

Elemen utilitas

Selubung

Atas

<upper>

 const string = <pute> halo, dunia! </pute>;
Hasil 
HELLO, WORLD!

Lebih rendah

<lower>

 const string = <dener> halo, dunia! </lower>;
Hasil 
hello, world!

Modal

<capital>

 const string = <apital> halo, dunia! </apital>;
Hasil 
Hello, world!

Judul

<title>

 const string = <title> halo, dunia! </title>;
Hasil 
Hello, World!

Affixes

Memangkas

 // "halo, dunia!" Const string = <rim> halo, dunia! </mim>;
Hasil 
Hello, World!

Bingkai

Alat peraga

  • dengan

 /*** Nilai untuk diterapkan pada `awalan` dan` sufiks`. */dengan: prxmpt.children;
 const string = <frame with = "-"> halo, dunia! </fame>;
Hasil 
-- Hello, World! --

Bergabung

Berjajar

<lined>

 const string = (
  <lined> <text> hello </text> <text> world! </sext>
  </slined>);
Hasil 
Hello
World!

Spasi

<spaced>

 const string = (
  <spaced> <text> hello </text> <text> world! </sext>
  </spaced>);
Hasil 
Hello World!

Daftar yang dipisahkan koma

<csl>

Alat peraga

  • nospace

 /** * @default false */nospace?: boolean;
 const string = (
  <csl> <text> halo </text> <text> world </text>
  </csl>);
Hasil 
hello, world
 const string = (
  <CSL Nospace> <Text> Hello </text> <text> dunia </ext>
  </csl>);
Hasil 
hello,world

Serikat

<union>

Alat peraga

  • nospace

 /** * @default false */nospace?: boolean;
 const string = (
  <sion> <text> halo </text> <text> dunia </text>
  </ion>);
Hasil 
hello | world
 const string = (
  <Union Nospace> <Text> halo </text> <text> dunia </teks>
  </ion>);
Hasil 
hello|world

Dibagi

Alat peraga

  • pembagi

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

  • bingkai

 /*** Apakah menambahkan pembagi sebelum dan sesudah tubuh. * @Default false */frame?: boolean;
 const string = (
  <sectioned> <text> halo </text> <text> world! </sext>
  </sectioned>);
Hasil 
Hello
---
World!

Set

Set secara otomatis menyesuaikan pemisah yang digunakan berdasarkan jumlah anak yang disediakan.

Dan

<and>

 const string = (
  <bahul> <Text> a </text>
  </dr>);
Hasil 
a
 const string = (
  <nry> <text> a </text> <text> b </text>
  </dr>);
Hasil 
a and b
 const string = (
  <nry> <text> a </text> <text> b </text> <text> c </text>
  </dr>);
Hasil 
a, b, and c

Dan / atau

<andor>

 const string = (
  <andor> <text> a </text> <text> b </pext> <text> c </text>
  </andor>);
Hasil 
a, b, and/or c

Atau

<or>

 const string = (
  <atau <atau <text> a </text> <text> b </ext> <text> c </text>
  </or>);
Hasil 
a, b, or c

Juga bukan

<nor>

 const string = (
  <orsc> <text> a </text> <text> b </text> <text> c </text>
  </cor>);
Hasil 
a, b, nor c

Pembatas

Topi

Elemen <cap> memungkinkan Anda untuk membatasi panjang string dengan menyediakan fungsi splitter dan jumlah max "unit" untuk diizinkan.

Alat peraga

  • Max

 /*** "Unit" maksimum untuk dimasukkan. * @Default Infinity */max?: Number;

  • splitter

 /*** Fungsi yang membagi string menjadi "unit". * @Default "chars" */splitter?: "paragraf" | "Garis" | "Spaces" | "Kata -kata" | "koma" | "Chars" | (string: string) => string [];

  • elipsis

 /*** String untuk ditambahkan ke akhir jika maksimum tercapai. * String ini termasuk dalam jumlah maksimum. * Jika `true`," ... "digunakan. * @default tidak terdefinisi */ellipsis?: string | BENAR;
 const string = <cap max = {5}> halo, dunia! </cap>;
Hasil 
Hello

Prioritas

Elemen <priority> seperti kueri media CSS berbasis lebar untuk string.

Alih -alih memberikan daftar anak -anak, <priority> mengharapkan daftar item, yang masing -masing dapat memiliki prioritas. Prioritas yang lebih tinggi diberikan terlebih dahulu (seperti z-index dalam CSS), dan setiap item memiliki prioritas default 0. Beberapa strategi disediakan juga untuk menyempurnakan bagaimana item diprioritaskan.

Elemen prioritas juga dapat bersarang, yang memungkinkan kontrol berbutir sangat halus di mana konten diberikan. Beberapa contoh disediakan di direktori contoh prioritas.

Alat peraga

  • Max

 /*** "Unit" maksimum untuk dimasukkan. * @Default Infinity */max?: Number;

  • menangkal

 /*** Fungsi yang mengembalikan jumlah "unit" dalam string. * @default (string: string) => string.length */counter ?: (string: string) => angka;

  • item

 /*** Item yang akan diterjemahkan, sesuai urutan prioritas. */item: (prxmpt.children | {
  /*** Prioritas item ini. Item prioritas yang lebih tinggi disertakan terlebih dahulu.   * @Default 0 */
  p?: angka;
  /*** Konten untuk diterjemahkan.   */
  Konten: ((kapasitas: angka) => prxmpt.children) | Prxmpt.children;}) [];

  • strategi

Strategi untuk digunakan saat memprioritaskan item.
Jika beberapa strategi disediakan, strategi selanjutnya dicoba untuk memutuskan hubungan.

"priority" :

Memprioritaskan item dengan prioritas yang disediakan.
Setelah maksimum tercapai, terus periksa apakah barang yang tersisa pas.

"order-asc" :

Memprioritaskan item dengan pesanan yang disediakan.
Setelah maksimum tercapai, terus periksa apakah barang yang tersisa pas.

"order-desc" :

Memprioritaskan item secara terbalik dari pesanan yang disediakan.
Setelah maksimum tercapai, terus periksa apakah barang yang tersisa pas.

"size-asc" :

Memprioritaskan item dalam urutan ukuran, terkecil hingga terbesar.
Gunakan jika Anda ingin memasukkan sebanyak mungkin item.

"size-desc" :

Barang yang diprioritaskan dalam urutan ukuran, terbesar hingga terkecil.
Gunakan jika Anda ingin memasukkan sedikit item.

 /** * @default ["prioritas", "order-asc"] */strategi?: prioritas strategi | PrioritasStrategy [];

  • Noskip

 /*** Jika `true`, jangan lewati item setelah maksimum tercapai.  * @Default false */noskip?: boolean;
 const string = (
  <prioritasMax = {15} gabung = {"n"} item = {[{{p: 2 konten: "test 1"}, {// p: 0 adalah konten default: "Ini adalah string super panjang yang menang ' t fit. "}, {p: 1, konten:" test 3 "}]} />);
Hasil 
Test 1
Test 3

Ekspor

Rendering

createElement

 impor {createelement} dari "@autossey/prxmpt"; const string = createelement ("text", {}, "halo, dunia!");
Hasil 
Hello, World!

render

 impor {render} dari "@autossey/prxmpt"; const string = render (
  <text> halo, dunia! </text>);
Hasil 
Hello, World!

Anak-anak

hasChildren

Pengembalian true jika objek alat peraga yang disediakan memiliki properti children .

 impor {haschildren} dari "@autossey/prxmpt"; if (haschildren ({anak -anak: "halo, dunia!"})) {
  // ...}

isChildren

Pengembalian true jika nilai yang disediakan adalah anak elemen prxmpt yang valid.

 impor {ischildren} dari "@autossey/prxmpt"; if (ischildren ("halo, dunia!")) {
  // ...}

Splitter

split

Pisahkan children di separator . Jika separator undefined , tidak ada pemisahan yang terjadi.

 impor {split} dari "@autossey/prxmpt"; const children = (
  <lined> <text> hello </text> <text> world! </sext>
  </lined>); // ["halo", "dunia!"] Const string = split (anak -anak, "n");

paragraphs

Pisahkan children di "nn" .

lines

Pisahkan children di "n" .

spaces

Pisahkan children di whitespace.

words

Membagi children di batas kata.

commas

Pisahkan children di "," .

characters

Pisahkan children di "" .

Dependensi

  • @swc/core: alternatif super cepat untuk babel

  • As-Typed-Array: Buat nilai apa pun sebagai array

  • Tipe-json: Ketik Pemeriksaan untuk Objek JSON

  • YAML: Parser dan Stringifier JavaScript untuk YAML

Dependensi dev

  • @Autossey/Eslint-Config: Basis untuk proyek yang menggunakan Eslint.

  • @Autossey/Tsconfig: Koleksi tsconfigs dasar untuk berbagai jenis proyek.

  • @Jest/Globals

  • @swc/jest: integrasi swc untuk bercanda

  • @type/node: Definisi TypeScript untuk node.js

  • ESLINT: Pemeriksa pola berbasis AST untuk JavaScript.

  • Jest: Pengujian JavaScript yang menyenangkan.

  • TypeScript: TypeScript adalah bahasa untuk pengembangan skala aplikasi JavaScript

Lisensi

MIT - Lisensi MIT

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua