prxmpt
v0.2.0
-JSX를 사용한 프롬프트 제작-
NPM • GitHub • 문제
PRXMPT는 "프롬프트 엔지니어링을위한 테일 바람" 과 같습니다. JSX와 함께 문자열을 형식화하기위한 유틸리티 세트를 제공합니다.
PRXMPT는 입력을 LLM으로 형성하도록 설계되었으며 토큰 관리를위한 <priernity>와 같은 강력한 요소를 포함합니다. 그러나 PRXMPT는 MarkDown 및 HTML 요소를 모두 제공하므로 최종 사용자를위한 LLM 출력을 형식화하는 데 적합합니다.
가독성 -JSX는 Whitespace를보다 잘 제어하여 더 읽기 쉬운 코드를 가능하게합니다.
? ️ 컨트롤 - hide 와 같은 내장 소품을 사용하여 삼부자없이 표시되는 텍스트를 쉽게 제어 할 수 있습니다.
? 재사용 가능성 -PXMPT 구성 요소는 일반적인 JSX 구성 요소와 마찬가지로 소품을 사용하여 재사용이 쉽습니다.
const text = (
<lined> <h1> 이것은 첫 번째 줄입니다. </h1> <text hide = {hideline2}> 두 번째 줄은 다음과 같습니다. </text> <empty/> <text> 이것은 더 긴 줄이므로, 우리는 우리는 더 긴 줄입니다. 텍스트 태그를 깨십시오.
여기서 다른 줄을 시작할 수도 있고 공간이 추가됩니다. </text>
</lined>);hideLine2=false ) # This is the first line. Here's a second line. This is a long line, so we'llbreak the text tag We can even start another line here, and a space will be added.
hideLine2=true ) # This is the first line. This is a long line, so we'll break the text tag We can even start another line here, and a space will be added.
이것을 템플릿 리터럴을 사용하여 동등한 것과 비교하십시오.
const text =`# 이것은 첫 번째 줄입니다. $ {hideline2? "NHERE는 두 번째 줄입니다." : ""} nnthis는 더 긴 줄이므로 이제 우리는 페이지에서 벗어납니다. 우리는 여기서 다른 줄을 시작할 수도 있지만 권장하지 않을 것입니다 .`;npm install @autossey/prxmpt
원사 추가 @autossey/prxmpt
pnpm add @autossey/prxmpt
Bun Add @Autossey/Prxmpt
prxmpt는 확장 할 수있는 기본 tsconfig.json 제공합니다.
{ "확장": "@autossey/prxmpt/tsconfig.json"}참고 : BUN은 "확장"메소드를 사용할 때 PRXMPT를 올바르게 감지하지 않는 것 같습니다.
또는 tsconfig.json 에 다음 필드를 추가 할 수 있습니다.
{ "compileroptions": { "jsx": "react-jsx", "jsximportsource": "@autossey/prxmpt", "module": "nodenext"
}
}가져 오지 않고 prxmpt 요소를 사용할 수 있어야합니다.
내보내기 const mycomponent = () => ( <Text> 안녕하세요, 세계! </text>);
React와 함께 prxmpt를 사용하는 경우 prxmpt를 대신 사용하는 각 파일 상단에 다음 줄을 추가하십시오.
/** @jsximportsource @autossey/prxmpt*/내보내기 const mycomponent = () => ( <Text> 안녕하세요, 세계! </text>);
예제 디렉토리에 몇 가지 예가 제공됩니다.
요소 사용 예 :
주방 싱크 (많은 요소를 보여줍니다)
우선 순위 ( <priority> 요소의 몇 가지 예)
설정 예 (TypeScript) :
혈액 요소 질소
Bun (클래식 모드)
다음 .js
SWC
SWC (클래식 모드)
TS- 노드
TS- 노드 (클래식 모드)
TSC
TSC (클래식 모드)
설정 예제 (JavaScript) :
노드 --- 로더 @autossey/prxmpt
SWC
SWC (클래식 모드)
특정 요소를 사용하는 방법의 예를 위해 테스트는 더 많은 usecase를 보여줍니다.
텍스트 요소
<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> (Square Bracket)
<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 </hide>! </text>;
Hello!
<text> 대부분의 다른 요소의 기초이므로 제공하는 소품은 대부분의 다른 요소와 함께 사용할 수 있습니다.
PRXMPT는 어린이를 문자열 배열로 취급합니다. 즉, <text> 맵핑, 필터링 및 어린이 가입을위한 여러 배열 기능을 제공 할 수 있습니다.
숨다
/*** 요소가 렌더링되는 것을 방지합니다. * @default false */hide? : 부울;
필터
/*** 어린이를 필터링하는 기능. * @default (node) => true */filter? : (노드 : prxmpt.children, index : number, arr : prxmpt.children []) => boolean;
지도
/*** 각 어린이를 새 요소에 매핑하는 함수. * @default (node) => prxmpt.render (node) */map? : (노드 : prxmpt.children, index : arr : prxmpt.children []) => prxmpt.jsx.element;
뒤집다
/*** 아이들의 순서를 뒤집습니다. */리버스? : 부울;
가입하다
/*** 각 어린이 사이에 삽입 할 요소. * @default "" */join? : prxmpt.children;
반복하다
/** * @default 1 */repeat? : 숫자;
손질
/***`true ': 요소의 시작과 끝에서 공백을 다듬습니다. * *` "시작"`: 요소의 시작 부분에서 공백을 다듬습니다. * *` "END"`: 요소 끝에서 whiteSpace를 트립니다. * * @default false */trim? : 부울 | 트림;
포장
/*** 요소를 주어진 케이싱으로 변환합니다. * @default 정의되지 않은 */케이싱? : 케이싱;
접두사
/*** 요소로 전부 할 요소. * @default "" */prefix? : prxmpt.children;
접미사
/*** 요소에 추가되는 요소. * @default "" */접미사? : prxmpt.children;
톱니 모양
/*** 요소의 각 줄에 들여 쓰기를 적용하십시오. * * 'true'인 경우 2 개의 공간을 사용하여 계약을 적용합니다. * * 숫자가 제공되면 해당 공간 수가 사용됩니다. * *` "t"`가 제공되면 단일 탭 문자가 사용됩니다. * * @Default False */Indent? : 부울 | 번호 | "티";
차단하다
/*** 요소의 끝까지 새로운 라인을 추가하십시오. * @default false */block? : 부울;
<empty>
<empty> 요소는 빈 문자열을 반환합니다.
// ""const String = <empty />;
<empty> 은 종종 자녀들과 함께 일부 구분표에 합류하는 요소의 자녀로 유용합니다.
const string = ( <lined> <text> 줄 1 </text> <empty/> <text> 줄 3 </text> </lined>);
Line 1 Line 2
<space>
<space> 요소는 공간을 반환합니다.
// ""const String = <<space />;
<tab>
오자
/*** 사실이라면 문자 그대로 탭 문자를 사용하십시오. 그렇지 않으면 공간을 사용하십시오. * @default false */literal? : 부울;
너비
/** * 탭 당 문자 수 * @default 1 'literal'이 true 인 경우, 그렇지 않으면 2 */너비? : 숫자;
// ""const string = <탭 너비 = {4} /> <ellipsis>
const string = <Ellipsis />;
...
<na>
const string = <na />;
n/a
?
브래킷 <parens>
const string = <parens> 안녕하세요, 세계! </parens>;
(Hello, World!)
<square>
const string = <quare> 안녕하세요, 세계! </square>;
[Hello, World!]
<curly>
const string = <curly> 안녕하세요, 세계! </curly>;
{Hello, World!} <angle>
const string = <angle> 안녕하세요, 세계! </angle>;
<Hello, World!>
<sq>
const string = <SQ> 안녕하세요, 세계! </sq>;
'Hello, World!'
<dq>
const string = <dq> 안녕하세요, 세계! </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 = <tbq> 안녕하세요, 세계! </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! </comment>;
-- Hello, World!
<comment type="html">
const html = <comment type = "html"> hello, world! </comment>;
<!-- Hello, World! -->
<state>
const state = <state> 안녕하세요, 세계! </state>;
Hello, World.
<ask>
const ask = <sug> 안녕하세요, 세계! </ask>;
Hello, World?
<exclaim>
Const exhaim = <외식> 안녕하세요, 세계! </exaim>;
Hello, World!
<kv>
열쇠
/*** 렌더링의 키. */키 : Prxmpt. Children;
키 케이스
/*** 키에 적용 할 경우. * @default undefined */keycase? : "upper"| "더 낮은"| "자본"| "제목";
포장하다
/*** 값을 감싸기 위해 기본 동작을 대체합니다. * @default undefined */랩? : 부울;
nospace
/*** 사실이라면 키와 값 사이에 공간을 추가하지 마십시오. * 포장하지 않을 때만 적용됩니다. * @default false */nospace? : 부울;
const string = <kv key = "hello"> world </kv>;
Hello: World
어린이가 여러 줄을 포함하면 기본적으로 Newline에서 값이 렌더링됩니다.
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 """
HTML 요소는 <tag> 요소 위에 구축됩니다. 각 HTML 요소에는 기본적으로 False로 설정된 부울 html 소품이 있습니다. html 이 참이면 요소는 HTML로 렌더링됩니다. 그렇지 않으면 요소가 마크 다운으로 렌더링됩니다.
또한, 특성 속성은 attributes 소품을 사용하여 설정할 수 있습니다.
<tag>
이름
/*** 태그 이름. */이름 : 문자열;
Noindent
/** * @default false */noindent? : 부울;
포장하다
/*** 컨텐츠에 Newline이 포함 된 경우 기본값이 true로 표시됩니다. */랩? : 부울;
const tag = <tag name = "mytag"> hello, world! </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? : 숫자;
숯
/** * @default "-" */char? : "-"| "_"| "="| "*";
const hr = <hr />;
---
const hr = <hr />;
<hr />
<a>
href
/*** 링크의 URL. */href : 문자열;
제목
/*** 링크 제목. */title? : 문자열;
const string = <a href = "https://example.com"title = "aitle"> hello, world! </a>;
[Hello, World!](https://example.com "A Title")
const string = <a href = "https://example.com"title = "aitle"html> hello, world! </a>;
<a href="https://example.com" title="A Title">Hello, World!</a>
<img>
SRC
/*** 이미지의 URL. */href : 문자열;
제목
/*** 이미지의 제목입니다. */title? : 문자열;
const string = <img src = "https://example.com"title = "title"> hello, world! </img>;
const string = <img src = "https://example.com"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> 안녕하세요, 세계! </h1>;
<h1>Hello, World!</h1>
<h2>
const string = <h2> 안녕하세요, 세계! </h2>;
## Hello, World!
const string = <h2 html> 안녕하세요, 세계! </h2>;
<h2>Hello, World!</h2>
<h3>
const string = <h3> 안녕하세요, 세계! </h3>;
### Hello, World!
const string = <h3 html> 안녕하세요, 세계! </h3>;
<h3>Hello, World!</h3>
<h4>
const string = <h4> 안녕하세요, 세계! </h4>;
#### Hello, World!
const string = <h4 html> 안녕하세요, 세계! </h4>;
<h4>Hello, World!</h4>
<h5>
const string = <h5> 안녕하세요, 세계! </h5>;
##### Hello, World!
const string = <h5 html> 안녕하세요, 세계! </h5>;
<h5>Hello, World!</h5>
<h6>
const string = <h6> 안녕하세요, 세계! </h6>;
###### Hello, World!
const string = <h6 html> 안녕하세요, 세계! </h6>;
<h6>Hello, World!</h6>
<ol>
유일한 마크리스트
/*** 목록에 하나 이상의 항목이 포함 된 경우 마커 만 포함합니다. * @default false */onlymarkiflist? : 부울;
const string = ( <ol> <text> 안녕하세요 </text> <text> world </text> </ol>);
1. Hello 2. World
<ul>
유일한 마크리스트
/*** 목록에 하나 이상의 항목이 포함 된 경우 마커 만 포함합니다. * @default false */onlymarkiflist? : 부울;
const string = ( <ul> <text> 안녕하세요 </text> <text> World </text> </ul>);
- Hello - World
<cl>
항목
항목 : {
/** * @default false */
점검? : 부울;
/*** 확인란 다음에 렌더링 할 내용. */
내용 : prxmpt.children;} []; const string = (
<clitems = {[{content : "hello"}, {content : "world", checked : true},]}
/>);- [ ] Hello - [x] World
<dl>
항목
/*** 렌더링 할 항목. */항목 : record <string, prxmpt.children>;
용어
/*** 각 키에 적용 할 케이싱. * @default undefined */termcase? : "upper"| "더 낮은"| "자본"| "제목";
공간
/*** 각 항목 사이에 삽입 할 빈 늘어서 늘어납니다. * @default 0 */space? : 숫자;
포장하다
/*** 랩핑 값에 대한 기본 동작을 대체합니다. * @default undefined */랩? : 부울;
const string = (
<dlitems = {{hello : "world", foo : "bar"}}
/>);Hello: World Foo: Bar
<i>
숯
/***@default "_"*/char? : "*"| "_";
const string = <i> 안녕하세요, 세계! </i>;
_Hello, World!_
const string = <i html> 안녕하세요, 세계! </i>;
<i>Hello, World!</i>
<b>
숯
/***@default "*"*/char? : "*"| "_";
const string = <b> 안녕하세요, 세계! </b>;
**Hello, World!**
const string = <b html> 안녕하세요, 세계! </b>;
<b>Hello, World!</b>
<s>
const string = <s> 안녕하세요, 세계! </s>;
~~Hello, World!~~
const string = <s html> 안녕하세요, 세계! </s>;
<s>Hello, World!</s>
<code>
const string = <code> 안녕하세요, 세계! </code>;
`Hello, World!`
const string = <code html> 안녕하세요, 세계! </code>;
<code>Hello, World!</code>
<span>
텍스트로 렌더링되면 <span> <text> 와 같은 어린이를 렌더링합니다.
const string = <span> 안녕하세요, 세계! </span>;
Hello, World!
const string = <span html> hello, world! </span>;
<span>Hello, World!</span>
<p>
텍스트로 렌더링되면 단락 태그는 요소의 끝에 새로운 라인을 추가합니다.
const string = <p> 안녕하세요, 세계! </p>;
Hello, World!
const string = <p html> 안녕하세요, 세계! </p>;
<p>Hello, World!</p>
<blockquote>
const string = (
<blockquote join = { "n"}> <text> hello </text> <empty/> <text> world! </text>
</blockquote>);> Hello > > World!
const string = <blockquote html> 안녕하세요, 세계! </blockquote>;
<blockquote>Hello, World!</blockquote>
<q>
유형
/** * @Default "Double" */type? : "Single"| "이중"| "백 티크";
어린이가 Newline이 포함 된 경우 인용 요소는 트리플 견적을 반환합니다. 그렇지 않으면 단일 인용문을 반환합니다.
const string = <q> 안녕하세요, 세계! </q>;
"Hello, World!"
const string = <q> hello <br /> world < /q>;
""" Hello, World! """
const string = <q html> 안녕하세요, 세계! </q>;
<q>Hello, World!</q>
<pre>
const string = <pre> 안녕하세요, 세계! </pre>;
``` 안녕하세요, 세상! ```
const string = <pre html> 안녕하세요, 세계! </pre>;
<pre>Hello, World!</pre>
<num>
추가하다
/*** 숫자에 값을 추가하십시오. */추가? : 숫자;
최소
/*** 최소값. `add '후에 적용됩니다. */min? : 숫자;
맥스
/*** 최대 값. `add '후에 적용됩니다. */max? : 숫자;
결정된
/*** 소수점 자리 수. */정족수;
const string = <num 고정 = {2}> 1 </num>;1.00
const string = <num min = {1}> 0 </num>;1
값
/** * @default date.now () */value? : 날짜 | 문자열 | 숫자;
DateFormat
/** * @default "short" */dateformat? : "long"| "중간"| "짧은"| "가득한";
TimeFormat
/** * @default "short" */timeformat? : "long"| "중간"| "짧은"| "가득한";
const String = <dateTime />;
September 23, 2023 at 5:17 PM
값
/** * @default date.now () */value? : 날짜 | 문자열 | 숫자;
체재
/** * @default "short" */format? : "long"| "중간"| "짧은"| "가득한";
const string = <date />;
September 23, 2023
값
/** * @default date.now () */value? : 날짜 | 문자열 | 숫자;
체재
/** * @default "short" */format? : "long"| "중간"| "짧은"| "가득한";
const string = <time />;
5:17 PM
값
/** * @default date.now () */value? : 날짜 | 문자열 | 숫자;
const string = <년 />
2023
값
/** * @default date.now () */value? : 날짜 | 문자열 | 숫자;
체재
/** * @default "number" */format? : "number"| "긴"| "짧은"| "좁은";
const string = <month />
8
const string = <month format = "long" />
September
const string = <month format = "short" />
Sep
const string = <month format = "좁은" />
S
값
/** * @default date.now () */value? : 날짜 | 문자열 | 숫자;
체재
/** * @default "number" */format? : "number"| "긴"| "짧은"| "좁은";
const string = <day />
6
const string = <day format = "long" />
Saturday
const string = <day format = "short" />
Sat
const string = <day format = "좁은" />
S
값
/** * @default date.now () */value? : 날짜 | 문자열 | 숫자;
주기
/** * @default "12" */cycle? : "12"| "24";
const string = <시간 />
5
const string = <시간 사이클 = "24">
17
값
/** * @default date.now () */value? : 날짜 | 문자열 | 숫자;
const string = <minute />
42
값
/** * @default date.now () */value? : 날짜 | 문자열 | 숫자;
const string = <second />
42
값
/** * @default date.now () */value? : 날짜 | 문자열 | 숫자;
const string = <millisecond />
999
값
/*** 지속 시간의 끝. * @default date.now () */value? : 날짜 | 문자열 | 숫자;
~부터
/*** 지속 시간의 시작. */이후 : 날짜 | 문자열 | 숫자;
const string = <infer = { "2021 년 9 월"} />2 years
데이터
/*** 데이터를 stringify. */데이터 : NestEdoptionaljsonValue;
예쁜
/** * @Default False */Pretty? : 부울;
const string = <json data = {{hello : "world"}} pretty />;{
"Hello": "World"
}데이터
/*** 데이터를 stringify. */데이터 : NestEdoptionaljsonValue;
Nostartmarker
/** * @default false */nostartmarker? : 부울;
시퀀스 인덴트
/** * @default false */sequenceIndent? : 부울;
const string = <yaml data = {{hello : "world"}} />;--- hello: world
<upper>
const string = <popre> 안녕하세요, 세계! </upper>;
HELLO, WORLD!
<lower>
const string = <lower> 안녕하세요, 세계! </lower>;
hello, world!
<capital>
const string = <caincial> 안녕하세요, 세계! </capital>;
Hello, world!
<title>
const string = <title> 안녕하세요, 세계! </title>;
Hello, World!
// "안녕하세요, 세계!"const string = <trim> 안녕하세요, 세계! </트림>;
Hello, World!
~와 함께
/***`prefix`와`접미사 '모두에 적용 할 값. */with : prxmpt.Children;
const string = <frame with = "-"> 안녕하세요, World! </프레임>;
-- Hello, World! --
<lined>
const string = ( <lined> <text> 안녕하세요 </text> <text> World! </text> </lined>);
Hello World!
<spaced>
const string = ( <spaced> <text> 안녕하세요 </text> <text> World! </text> </spaced>);
Hello World!
<csl>
nospace
/** * @default false */nospace? : 부울;
const string = ( <csl> <text> hello </text> <text> world </text> </csl>);
hello, world
const string = ( <CSL NOSPACE> <text> 안녕하세요 </text> <text> World </text> </csl>);
hello,world
<union>
nospace
/** * @default false */nospace? : 부울;
const string = ( <Union> <text> 안녕하세요 </text> <text> World </text> </Union>);
hello | world
const string = ( <Union nospace> <text> 안녕하세요 </text> <text> world </text> </Union>);
hello|world
분할기
/** * @default "---" */divider? : String;
액자
/*** 신체 전후에 분배기를 추가할지 여부. * @default false */frame? : 부울;
const string = ( <Sectioned> <text> 안녕하세요 </text> <text> World! </text> </sectioned>);
Hello --- World!
세트는 제공된 어린이 수에 따라 사용되는 분리기를 자동으로 조정합니다.
<and>
const string = ( <and> <text> a </text> </and>);
a
const string = ( <and> <text> a </text> <text> b </text> </and>);
a and b
const string = ( <and> <text> a </text> <text> b </text> <text> c </text> </and>);
a, b, and c
<andor>
const string = ( <andor> <text> a </text> <text> b </text> <text> c </text> </andor>);
a, b, and/or c
<or>
const string = ( <또는> <text> a </text> <text> b </text> <text> c </text> </또는>);
a, b, or c
<nor>
const string = ( <ONDER> <text> a </text> <text> b </text> <text> c </text> </nor>);
a, b, nor c
<cap> 요소를 사용하면 splitter 기능과 허용 할 max 수의 "단위"를 제공하여 문자열의 길이를 제한 할 수 있습니다.
맥스
/*** 포함 할 최대 "단위". * @Default Infinity */max? : 숫자;
쪼개는 도구
/*** 문자열을 "단위"로 나누는 함수. * @default "chars" */splitter? : "단락"| "라인"| "공간"| "단어"| "쉼표"| "숯"| (문자열 : String) => String [];
생략
/*** 최대 값에 도달하면 끝까지 추가 할 문자열입니다. *이 문자열은 최대 수에 포함됩니다. * 'true', "..."가 사용된다면. * @default undefined */elipsis? : 문자열 | 진실;
const string = <cap max = {5}> 안녕하세요, World! </cap>;Hello
<priority> 요소는 문자열의 너비 기반 CSS 미디어 쿼리와 같습니다.
<priority> 어린이 목록을 제공하는 대신 각각의 항목 목록을 기대하며 각 항목은 우선 순위를 가질 수 있습니다. 우선 순위가 높을수록 우선 순위가 먼저 렌더링되며 (CSS의 z-index 와 같은) 각 항목의 기본 우선 순위는 0입니다. 항목 우선 순위가 미세 조정하기위한 몇 가지 전략이 제공됩니다.
우선 순위 요소도 중첩 될 수있어 어떤 컨텐츠가 렌더링되는지에 대해 매우 세밀하게 제어 할 수 있습니다. 우선 순위 예제 디렉토리에 몇 가지 예가 제공됩니다.
맥스
/*** 포함 할 최대 "단위". * @Default Infinity */max? : 숫자;
계수기
/*** 문자열에서 "단위"수를 반환하는 함수. * @default (문자열 : String) => String.length */counter? : (String : string) => 숫자;
항목
/*** 우선 순위로 렌더링 할 항목. */항목 : (Prxmpt.Children | {
/***이 항목의 우선 순위. 더 높은 우선 순위 항목이 먼저 포함됩니다. * @default 0 */
p? : 숫자;
/*** 렌더링 할 내용. */
내용 : ((용량 : 번호) => prxmpt.Children) | prxmpt.children;}) [];전략
항목 우선 순위를 정할 때 사용하는 전략.
여러 전략이 제공되면 관계를 깨기 위해 후속 전략을 시도합니다.
"priority" :
제공된 우선 순위에 따라 항목을 우선 순위를 정합니다.
최대 값에 도달하면 나머지 품목에 맞는지 계속 확인하십시오.
"order-asc" :
제공된 주문별로 항목 우선 순위를 정합니다.
최대 값에 도달하면 나머지 품목에 맞는지 계속 확인하십시오.
"order-desc" :
제공된 주문을 뒤집은 항목 우선 순위를 정합니다.
최대 값에 도달하면 나머지 품목에 맞는지 계속 확인하십시오.
"size-asc" :
크기 순서대로 품목을 우선 순위를 정하면 가장 작은 것입니다.
가능한 한 많은 항목을 포함시키려는 경우 사용하십시오.
"size-desc" :
크기 순서대로 우선 순위를 정하는 항목은 가장 큰 것입니다.
가능한 몇 가지 항목을 포함시키려는 경우 사용하십시오.
/** * @default [ "우선 순위", "Order-ASC"] */전략? : PriorityStrategy | PriorityStrategy [];
Noskip
/*** 'true'인 경우 최대 값에 도달 한 후에는 항목을 건너 뛰지 마십시오. * @default false */noskip? : 부울;
const string = (
<priorityMax = {15} join = { "n"} items = {[{p : 2 내용 : "test 1"}, {// p : 0은 기본 내용입니다. t fit. "}, {p : 1, 내용 :"test 3 "}]} />);Test 1 Test 3
createElement "@autossey/prxmpt"에서 {createElement} import {createElement}; const string = createElement ( "text", {}, "hello, world!");Hello, World!
render "@autossey/prxmpt"에서 {render} 가져 오기; const string = render (
<Text> 안녕하세요, 세계! </text>);Hello, World!
hasChildren 제공된 소품 객체에 children 재산이있는 경우 true 반환합니다.
"@autossey/prxmpt"에서 {haschildren} import (haschildren ({children : "Hello, World!"})) {
// ...}isChildren 제공된 값이 유효한 prxmpt 요소 자식이면 true 반환합니다.
"@autossey/prxmpt"에서 {ischildren} import {iSchildren ( "hello, world!")) {
// ...}split separator 에 children 나누십시오. separator undefined 되지 않은 경우 분할이 발생하지 않습니다.
"@autossey/prxmpt"에서 {split} 가져 오기; const children = (
<lined> <text> 안녕하세요 </text> <text> World! </text>
</lined>); // [ "hello", "world!"] const strings = split (children, "n");paragraphs "nn" 에서 children 나누십시오.
lines "n" 에 children 나누십시오.
spaces 공백에서 children 나누십시오.
words 단어 경계에 children 나누십시오.
commas children 나누어 "," .
characters "" 에 children 나누십시오.
@swc/core : 바벨을위한 초고속 대안
As-typed-array : 값을 배열로 만듭니다
Type-JSON : JSON 객체에 대한 유형 확인
Yaml : Yaml 용 JavaScript Parser 및 Stringifier
@autossey/eslint-config : eslint를 사용하는 프로젝트의 기반.
@autossey/tsconfig : 다양한 유형의 프로젝트를위한 기본 tsconfig 모음.
@Jest/Globals
@swc/jest : Jest 용 SWC 통합
@type/node : node.js의 TypeScript 정의
Eslint : JavaScript의 AST 기반 패턴 검사기.
JEST : 유쾌한 JavaScript 테스트.
TypeScript : TypeScript는 애플리케이션 척도 자바 스크립트 개발을위한 언어입니다.
MIT- MIT 라이센스
