WebComponents+TypeScript로 프런트엔드 프레임워크를 만들었어요.
6038 단어 TypeScriptWeb Componentstech
사실 며칠 전까지만 해도 타입 스크립트를 접해 본 적이 없는데 갑자기 필요해서 기억할 때 이거랑 WebComponents에서 가장 활발하면 뭘 할 수 있지 않을까요?그래서 시험 제작해 봤어요.
최근에 가상 DOM의 전면 프레임을 만들지 않습니까?라는 Svelte 같은 것이 존재하기 때문에 그 기술을 모방해 가상 DOM을 사용하지 않고 시도해 봤다.
사용법
창고에 있는 index.ts를 읽고 Component 클래스와 html 라벨 함수를 읽으며 Component를 계승하는 클래스를 만드는 형식으로 제작합니다.
제작된 구성 요소는 custom Elements입니다.데파인으로 표시해.
import {Component, html} from '../index.ts';
class TestComponent extends Component{
init() {
return {
attr: 'heheh',
greet: 'hello'
}
}
update(state, mes) {
return {
attr: state.attr,
greet: state.greet + 'o'
}
}
render(state) {
return html`
<div
id=${state.attr}
@click=${e => this.dispatch('update', state.greet + 'hhhh')}
>
${
state.greet.length < 20
? html`<h1>success!</h1>`
: html`<div>${state.greet}</div>`
}
</div>
`;
}
}
customElements.define('test-component', TestComponent);
init, 업데이트,render는 Elm을 모방한 것이다.요즘 The Elm Archeitecture는 나의 열풍이다.결실
해보도록 하겠습니다.
겨우 300줄 정도만 완성했으니 나도 놀랐다.그 정도로 제작되지 않아 포장화도 안 됐는데 사용 가능하다면 포장화와 성능을 확인하고 싶어요.가능하면 의견 주세요(^^)
추기
포장해서 미안해요.
주먹밥사이좋게 지내세요.
Reference
이 문제에 관하여(WebComponents+TypeScript로 프런트엔드 프레임워크를 만들었어요.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/boke0/articles/4e98a151314d1c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)