torus
Minor rendering bug fixes
torus-dom )Torus는 웹을위한 이벤트 중심의 모델 뷰 UI 프레임 워크로 작고 효율적이며 종속성이 없음 에 중점을 둡니다.
당신은 찾을 수 있습니까? GitHub 페이지에서 Torus에 대한 전체 문서 .
Torus는 또한 GitHub 페이지에 주석이 달린 (꽤 간결한) 코드베이스를 읽기 쉬운 버전을 가지고 있습니다. 프레임 워크가 설계된 방법과 가상 DOM 및 템플릿이 작동하는 방식에 대해 자세히 알아 보려면 확인하십시오!
Torus가 실제로 보이는 모습은 다음과 같습니다! 이것은 완벽하게 작동하는 카운터 앱이며 편집 또는 번들링 단계가 필요하지 않습니다.
이 스크립트 태그를 HTML에 떨어 뜨립니다
< script src =" https://unpkg.com/torus-dom/dist/index.min.js " > </ script >... 그리고이 스크립트를로드하십시오.
// every view extends Component or StyledComponent
class App extends Torus . StyledComponent {
init ( ) {
// initialize our local state
this . count = 0 ;
}
styles ( ) {
// we can define dynamically and efficiently injected
// styles for our component with styles(), like this.
// These styles are also automatically scoped to the
// component, and we can use the full, nested SCSS syntax.
return css `
font-family: system-ui, sans-serif;
h1 {
text-align: center;
}
button {
padding: 4px 8px;
&:hover {
opacity: .8;
}
}
` ;
}
compose ( ) {
// We define the structure of our component in compose(),
// using a JSX- and lit-html-like syntax as a template string.
return jdom `<main>
<h1>Hi! You clicked ${ this . count } times.</h1>
<button onclick=" ${ ( ) => {
this . count ++ ;
this . render ( ) ;
} } ">Count up!</button>
</main>` ;
}
}
// mount the app to the page
document . body . appendChild ( new App ( ) . node ) ; Torus는 생산 의존성이 없으며 모든 기능을 활용할 수있는 빌드 단계가 필요하지 않으며 템플릿 엔진, 렌더러, 구성 요소 및 이벤트 시스템 및 CSS-in-JS 래퍼를 포함하여 5KB 미만의 GZIPES가 있습니다. 이를 통해 페이지의 단일 구성 요소를 렌더링하는 것부터 본격적인 응용 프로그램 구축에 이르기까지 간단하게 채택하고 배송 할 수 있습니다.
Torus는 가장 빠른 Virtual Dom Library ( inferno 와 같은 훌륭한 대안이 있음)로 설계되지 않았지만 성능과 응답 성은 프로젝트의 주요 목표 중 하나입니다. Torus는 작지만, 특히 렌더링에서 최대한 빠르고 반응이 좋으려고합니다. 작은 번들 크기와 결합하여 Torus는 모든 장치에서 어디서나 웹 애플리케이션을 구축하는 데 좋습니다.
Torus의 아키텍처는 구성 요소 자체 내의 모든 렌더링 및 업데이트 로직을 캡슐화하므로 Component#node 가져 와서 구성 요소의 루트 DOM 요소에 대한 간단한 포인터로 취급하는 것이 안전합니다. 페이지 주위로 이동하고 문서에서 가져 와서 React 또는 VUE 구성 요소 또는 웹 구성 요소에 포함시킬 수 있으며, 그렇지 않으면 기존 DOM 요소를 사용할 수있는 곳에 사용하십시오. 이를 통해 다양한 프론트 엔드 아키텍처에 Torus 구성 요소 및 앱을 포함시킬 수 있습니다.
작은 크기의 Torus와 결합하여 Torus 전체 애플리케이션을 원하지 않거나 배송 할 수없는 경우 다른 프레임 워크의 요소를 포함하는 더 큰 프로젝트에 대해 하나 또는 몇 개의 구성 요소 만 배송하는 것이 합리적입니다.
Torus는 국제화와 관련이 없지만 개발자로서 우리는 이용 가능한 API를 사용하여 국제화가 Torus 구성 요소 내부에서 가능하게 할 수 있습니다. Torus는 많은 렌더링 프로세스와 가상 DOM을 개발자에게 노출 시키며 중요한 것은 렌더러에 도달하기 전에 JDOM을 취할 수있는 preprocessor 만들 수 있도록하여 렌더러가 자체 코드로 볼 수 있도록 DOM을 수정할 수 있습니다. 이로 인해 Torus는 I18N에 강력하고 이상적입니다. 실제로, 구성 요소 사전 처리기 API는 Torus의 Styled() 구성 요소를 가능하게하는 이유입니다. ( Styled() 구성 요소가 렌더링되기 전에 JDOM에 새 클래스 이름을 추가합니다.)
예를 들어, 우리는 I18nComponent 만들 수 있으며, 이는 국제화 된 프로젝트의 기본 구성 요소 클래스 역할을 할 수 있습니다.
class I18nComponent extends Component {
// The default preprocess method just returns the jdom as-is. We can override it
// to modify the JDOM given by component's `#compose()` method before it reaches the
// virtual DOM renderer.
preprocess ( jdom , _data ) {
// Here, we might recursively traverse the JDOM tree of children
// and call some custom `translate()` function on each string child
// and any displayed props like `placeholder` and `title`.
// As a trivial example, if we only cared about text nodes on the page,
// we could write...
const translate = jdom => {
if ( typeof jdom === 'string' ) {
// translate text nodes
return yourImplementationOfTranslateString ( jdom ) ;
} else if ( Array . isArray ( jdom . children ) ) {
// it's an object-form JDOM, so recursively translate children
jdom . children = jdom . children . map ( yourImplementationOfTranslateString ) ;
return jdom ;
}
return jdom ;
}
// In production, we'd also want to translate some user-visible properties,
// so we may also detect and translate attrs like `title` and `placeholder`.
return translate ( jdom ) ;
}
} 클라이언트 측 UI 라이브러리가 필요할 때 (Linus) 대부분의 개인 프로젝트에 Torus를 사용합니다. 이러한 프로젝트 중 일부는 다음과 같습니다.
Torus의 API는 사용자 인터페이스 및 뷰를 정의하기위한 선언적 인터페이스의 혼합이며, 개인적으로 찾은 상태 관리를위한 필수 패턴은 대규모 응용 프로그램을 구축 할 때 두 가지 스타일의 최상의 균형입니다. 일반적인 관행으로, 구성 요소는 선언적이고 Idempotent를 유지하고 데이터 모델에 의해 노출 된 공개, 안정적인 명령 적 API를 통해 데이터 모델 / 상태와 상호 작용해야합니다.
Torus의 디자인은 React의 구성 요소 중심의 아키텍처에서 영감을 얻었으며, 렌더링하기 전에 가상 DOM의 차이, CSS 및 마크 업을 JavaScript에 혼합하여 각 구성 요소의 단일 클래스로 분리하는 것과 같이 React Ecosystem의 일반적인 개념을 빌려줍니다. 그러나 Torus는 더 최소한의 의견이 적은 낮은 수준 API를 제공하고 순전히 기능적으로 노력하는 뷰/컨트롤러 계층보다는 상태가 완성 된 데이터 모델을 선택함으로써 이러한 아이디어를 기반으로합니다.
Torus는 또한 데이터 업데이트가 뷰 및 기타 모델에 구속되는 방식 뒤에 이벤트 중심 디자인을 갖기 위해 데이터 모델 설계, 레코드 및 저장 용 백본에서 차용합니다.
마지막으로 Torus의 jdom 템플릿 태그는 HTM 및 Lit-HTML에서 영감을 얻었습니다.
Frontend Development Tooling은 Build Time / Compile Time에서 점점 더 많은 작업을 수행하여 제안서 트랙 JavaScript 기능 및 JSX를 채택하는 것과 같은 더 풍부한 구문 및 기능을 가능하게합니다. Svelte는 컴파일 타임 툴링이 사용자 인터페이스 구축에 대한 범주 적으로 차이가있는 방법을 만드는 방법에 대한 훌륭한 예입니다.
Torus는 또 다른 빌드 타임 도구가되지 않습니다. Torus의 목표 중 하나는 가능한 한 적은 성능과 오버 헤드를 희생하면서 런타임에 최대한 유용하여 개발중인 컴파일 단계를 제거 할 수 있습니다. 결과적으로 Torus는 프로토 타이핑 사용자 인터페이스 아이디어에 대한 금 표준 경험입니다. 문서에 <script> 태그를 떨어 뜨리고 쓰기 시작하십시오. 컴파일 타임에 대한 런타임 의이 의식적인 우선 순위의 단점은 JavaScript 구문의 일부가 아닌 일부 기능이 컴파일 단계 없이는 불가능하다는 것입니다. 특히 ECMAScript Decorator Syntax 및 JSX 구문은 불가능하지만 유용 할 것입니다. Torus 앱을 구축하는 데 컴파일 단계가있었습니다. 우리는 JSX에 JDOM 템플릿을 작성할 수 있으며, 이는 구문 적으로 매우 유사하며 @render 및 @bind 데코레이터의 상태 업데이트 메소드 및 이벤트 리스너를 랩핑하는 대신 모든 인스턴스에서 this.render() 및 .bind(this) 랩핑 할 수 있습니다.
컴파일 지원 추가는 현재 로드맵에 있지 않지만 Torus는 최신 JavaScript의 하위 집합이므로 간단해야합니다. 우리는 특히 데코레이터가 제안 트랙에서 진전을 보이지 않는 경우, 앞으로 편집의 한계 이점을 해결하기 위해 돌아올 수 있습니다.
React 및 Preact와 같은 유사한 선언적 UI 프레임 워크는 조각에서 (가상) DOM 노드를 렌더링하기위한 구문 설탕 인 조각의 개념을 도입했습니다. 구성 요소에 모드 배열이 자체적으로는 의미가 없지만 구성 요소의 부분과 뷰를 래퍼 요소가없는 노드로 반환하는 내부 기능을 갖는 것이 종종 유용하기 때문입니다. Torus는 기본적으로 노드 목록의 배열 표현을 지원합니다. 배열로 JDOM 객체를 랩핑하십시오! React와 달리 구성 요소는 둘 이상의 노드를 렌더링 할 수 없지만 대부분의 사용 사례는 단순히 구성 요소 내부 배열에서 노드 목록을 표현할 수있게되며 Torus에서 직관적으로 지원됩니다.
<>...</> 와 같은 조각의 템플릿 표현을 노드 배열로 전환 할 수 있도록 jdom 템플릿 태그를 수정하는 아이디어를 가지고 놀았습니다. jdom 또한 템플릿에서 인접한 최상위 요소를 단순히 구문 분석하고 단일 배열로 반환 할 수 있습니다. 그러나 나는 이러한 기능을 배송하지 않기로 결정했습니다. 왜냐하면 이러한 사용 사례는 JDOM 템플릿의 .children 반환 할 수있게함으로써 적절하게 덮여 있다고 생각하기 때문입니다. 심지어 <>...</> 조각 내부에 랩핑 된 마커가 가독성을 위해 단순히 JDOM 객체를 반환 할 수 있습니다. 렌더링 작업에서 비 전통적인 배열을 반환하는 데 관련된 추가 단계의 명시 적에 감사하며, 뷰의 일부의 중간 표현으로 배열을 반환하는 데 드는 비용은 추가 기능 비용의 가치가 없다고 생각합니다.
Torus는 기호, 맵 및 세트를 사용하므로 Internet Explorer 11을 제외한 모든 주요 브라우저의 최신 버전과 호환됩니다. EG 배열 스프레드 연산자를 지원하지 않는 이전 브라우저에서는 Babel과 같은 도구를 사용하여 라이브러리를 ES5로 전환해야 할 수도 있습니다.
NPM에서 Torus를 torus-dom 으로 설치할 수 있습니다. Torus는 여전히 베타 로 간주되며 아직 1.0 릴리스가 아닙니다. 나는 API가 현재 안정적이며 대부분의 주요 버그는 스쿼시되었지만 1.0까지는 보장되지 않습니다.
npm install --save torus-dom
# or
yarn add torus-dom import { StyledComponent , Record , Store , Router } from 'torus-dom' ;또는 다음과 같이 Torus를 가져올 수도 있습니다.
< script src =" https://unpkg.com/torus-dom/dist/index.min.js " > </ script > Torus는 모든 기본 글로벌을 window.Torus 로 내보내므로 스크립트의 글로벌 이름으로 액세스 할 수 있습니다. 이것은 프로덕션 앱에서 권장되지 않지만 실험에 좋습니다.
버그를 찾으면 문제를 열거 나 테스트를 통해 풀 요청을 입력하여 Torus가 할 예정인대로 버그를 재현하십시오. 기능 요청이있는 경우 Torus가 주로 개인 워크 플로 및 아키텍처 환경 설정에 맞게 구축되고 있기 때문에 반드시 존중할 필요는 없습니다. 그러나 나는 당신의 의견을 듣고 열려 있습니다! 따라서 Torus에 기능을 추가하기로 결정하지 않을 것으로 예상하여 문제를 자유롭게 열어주십시오 (특히 번들 크기가 팽창하거나 트랜스 필러가 필요한 경우).
NPM과 원사를 모두 사용하여 Torus를 개발할 수 있지만 NPM 스크립트는 원사를 사용하며 원사는 공식적으로 Torus를 개발하고 구축하는 데 사용하는 것이므로 공식적으로 지원됩니다.
소스에서 Torus를 구축하려면 실행하십시오
yarn build 이것은 사용자 정의 도구 체인을 통해 ./src/torus.js 실행하여 먼저 디버그 기능 호출을 제거하고 development 및 production 모드를 통해 Webpack을 통해 결과를 실행합니다. 웹 팩 처리가없는 Torus의 바닐라 버전뿐만 아니라 두 출력은 ./dist/ 에 저장됩니다. 실행 yarn clean 이러한 빌드 아티팩트와 생성 된 커버리지 보고서를 삭제합니다.
Torus는 //> 로 시작하는 코드 주석에서 문서를 생성하기위한 고유 한 시스템을 가지고 있습니다. 주석 문서를 생성하려면 실행하십시오
yarn docs DOCS 파일은 ./docs/ 에서 생성되며 웹 브라우저에서 볼 수 있습니다. 이 스크립트가 생성 한 내용의 예는이 프로젝트의 GitHub 페이지를 확인하십시오.
Torus의 단위 테스트를 실행하고 coverage/ 실행에 대한 적용 범위 보고서를 생성하려면
yarn test이것은 Torus의 개발 빌드에서 기본 테스트 스위트를 실행합니다. Todo Apps와 같은 전체 사용자 인터페이스를 사용하는보다 포괄적 인 통합 테스트가 로드맵에 있습니다.
또한 생산 빌드에서 테스트를 실행할 수도 있습니다.
yarn test:prod 이는 적용 범위 보고서를 생성하지는 않지만 dist/torus.min.js 에서 최소화 된 생산 빌드에 대해 테스트를 실행하여 컴파일 버그가 발생하지 않았는지 확인합니다.
Torus는 사용자 정의 구성을 사용하여 eslint로 선을 엽니 다. 린터를 실행하려면 달리십시오
yarn lint또는 ESLINT 용 편집기 플러그인 사용을 고려하십시오.
