twc
0.5.1
타이핑 된 웹 구성 요소는 본래의 폴리머 모듈 (중합체 도구 상자 친화적)을 작성하기 위해 보일러 플레이트가없는 타입 스크립트 기반 방식을 제공합니다. 전체 프로세스는 설계 시간에 수행되므로 프로젝트에 추가 의존성을 추가 할 필요가 없습니다.
npm install -g twc
TWC는 CLI와 함께 제공됩니다. 대부분의 구성은 tsconfig (및 bower.json )에서 제공되며 TSC와 거의 동일하게 작동합니다. TS 클래스를 네이티 폴리머 모듈로 변환하려면 프로젝트 루트 DIR을 입력하고 터미널에서 다음을 실행하십시오.
twc
tsconfig.json 파일에서 구성을 읽는 tsc 와 마찬가지로 작동합니다. 유일한 차이점은 plain .js 대신 중합체 모듈로 .html 파일을 출력하는 것입니다.
주석은 @types NPM 네임 스페이스에서 사용할 수 있습니다. 이런 일이 발생할 때까지 유형은 tsconfig에 포함되어야합니다.
{
"compilerOptions": {
...
},
"files": [
...
],
"include": [
"node_modules/twc/types/polymer.decorators.d.ts"
]
}
TWC는 동일한 코드를 중합체 1.x 또는 중합체 2.x로 컴파일 할 수 있습니다. 컴파일하기 전에 bower.json 중합체 의존성 버전을 확인한 다음 대상으로 사용됩니다. 예를 들어:
"polymer": "Polymer/polymer#^1.8.0"
중합체 1.X 모듈을 구축하는 반면, 이는 다음과 같습니다.
"polymer": "Polymer/polymer#^2.0.0"
ES6 기반 폴리머 2.X 모듈을 구축합니다.
TWC에서도 TypeScript 컴파일러 옵션도 사용할 수 있지만 모든 것이 지원되는 것은 아닙니다. 다음은 지원되지 않는 옵션 목록입니다 (미래에 변경 될 수 있음).
TWC의 모듈은 TypeScript 언어의 구문과 키워드를 수용하며 단순히 클래스 일뿐입니다. 따르는 규칙은 중합체 2.x (V1 웹 구성 요소 사양)와 일치합니다.
@ CustomElement ( )
export class MyElement extends Polymer . Element {
name : string ;
}동등합니다
<dom-module id="my-element">
<script>
Polymer({
is: "my-element",
properties: {
name: {
type: String
}
}
});
</script>
</dom-module>
템플릿을 추가하는 4 가지 방법이 있습니다 (따라서 아무도 지루하지 않습니다).
@template 데코레이터 내에 템플릿을 제공하십시오@template 데코레이터 내에서 템플릿 파일로가는 경로를 제공합니다template() 메소드에서 템플릿을 반환합니다 첫 번째 접근 방식은 매우 일반적이며 아마도 여러 번 보았을 것입니다. 일반적으로 <template> 태그 사이에있는 모든 것은 이제 데코레이터로 들어갑니다. 여기에 멋진 마법이 없습니다.
@ CustomElement ( )
@ template ( `<h1>Hello [[name]]</h1>` )
export class MyElement extends Polymer . Element {
name : string ;
} 마찬가지로 두 번째 접근 방식은 템플릿에 대한 상대 경로를 제공하면됩니다 ( <link rel="import"> tag를 통해 가져 오는 것처럼). 템플릿 파일의 내용은 첫 번째 접근 방식과 같이 <template> 태그 사이의 코드입니다.
@ CustomElement ( )
@ template ( 'template.html' )
export class MyElement extends Polymer . Element {
name : string ;
} React World에서 더 많이 오면 render() 메소드를 좋아할 수 있습니다. 따라서 여기에는 template() 메소드가 매우 비슷합니다. 이 방법의 장점은 클래스 프로토 타입에 액세스 할 수 있고 템플릿 문자열에서 사용할 수 있다는 것입니다. 모든 this 은 속성에 대한 양방향 바인딩으로 대체됩니다 (양방향을 사용하는시기와 단방향 바인딩을 언제 사용 해야하는지 결정하는 방법이있는 경우 알려주십시오).
@ CustomElement ( )
export class MyElement extends Polymer . Element {
name : string ;
template ( ) {
return `<h1>Hello ${ this . name } </h1>` ;
}
}마지막 접근 방식은 클래스를 그대로 떠나 TS 파일과 동일한 이름으로 템플릿 파일을 만드는 것입니다. 컴파일 시간에 TWC는 파일 내용을 선택하여 첨부합니다 (두 번째 접근 방식과 마찬가지로). 그래도 조심하세요! Outdir를 지정하지 않으면 최종 모듈이 템플릿을 대체 할 수 있습니다 (기본적으로 기본 이름으로 HTML 파일이 생성됩니다).
TWC 는 중합체 템플릿을 사용합니다. 템플릿 및 바인딩에 대한 자세한 내용은이 문서를 참조하십시오.
ES 가져 오기는 아직 브라우저에서 작동하지 않습니다. 대신 폴리머는 HTML 수입을 사용합니다. 이를 통해 <link> 태그를 사용하여 모듈을 가져올 수 있지만 TWC에서 어떻게해야합니까?
import "./my-component.html";
동일한 원칙이 스크립트에 적용됩니다 ( <script> 태그로 변환) :
import "./some-library.js";
위의 내용은 컴파일됩니다
<link rel="import" href="./my-component.html">
그리고
<script src="./some-library.js"></script>
각기.
Bower 또는 NPM 리포지토리에 대한 상대 경로를 처리하는 것은 고통 스러울 수 있습니다. 여기는 별명이 편리한 곳입니다.
import "bower:polymer/polymer-element.html";
import "npm:jquery/dist/jquery.min.js";
위는 .bowerrc 의 bower 디렉토리를 사용하도록 번역되며 bower_components 로 돌아갑니다. 대부분의 개발자는 polymer-cli 사용하여 구성 요소를 사용하므로 bower_components 로의 경로는 마치 프로젝트 루트가 해당 폴더 내부에있는 것처럼 번역됩니다.
어떤 이유로 든 NPM 또는 Bower 폴더 이름 또는 경로를 변경 해야하는 경우 bowerDir 및 npmDir 환경 변수를 설정하여이를 수행 할 수 있습니다.
프로젝트 루트에 비해 가져 오는 것도 가능합니다. 경로 앞에 ~ 추가하십시오.
import "~demo/index.html";
import "~bower_components/polymer/polymer-element.html";
다른 모듈의 구성원 (예 : 동작 가져 오기)을 가져 오려면 ES 가져 오기를 사용합니다.
import { IronControlState } from "bower:iron-behaviors/iron-control-state.html";
정의에 선언 된 네임 스페이스가있는 경우 가져 오기 한 멤버의 모든 인스턴스를 자동으로 업그레이드합니다.
HTML 모듈에서 가져올 수 있으 려면 정의를 생성해야합니다.
기존 동작/구성 요소에서 유형 선언을 생성하려면 Potts 도구를 사용하십시오. 전 세계적으로 설치하고 ( npm install potts -g ) Project Root 디렉토리에 potts 실행하십시오. 선언은 기본적으로 potts.d.ts 파일에 저장됩니다 ( --outFile 또는 -o 플래그를 통해 구성 가능). main 하면 모든 HTML 파일에 대한 bower.json 이 생성됩니다. 모든 모듈은 수입 경로 (예 : bower:polymer/polymer.html )와 일치하도록 선언됩니다.
모든 견고한 프로젝트에는 적절한 문서가 있어야합니다. 여기에는 구성 요소가 해고 된 이벤트도 포함됩니다. TWC를 사용하면 Event 또는 CustomEvent 확장하는 인터페이스를 만들어 쉽게 할 수 있습니다.
/** My custom event, which fires when needed */
export interface SomeEvent extends CustomEvent {
detail: {
/** Property inside event.detail */
myCustomProp: string;
};
}
속성 선언으로 직접 설정된 모든 값은 기본값으로 사용됩니다. 원시적이지 않은 값 (배열, 객체 등)은 기능으로 포장됩니다.
export class MyElement {
title : string = '' ;
categories : Array = [ ] ;
}번역됩니다
Polymer ( {
properties : {
title : {
type : string ,
value : ''
} ,
categories : {
type : Array ,
value : function ( ) {
return [ ] ;
}
}
}
} ) ; properties 구성에 모든 것이 추가되어서는 안됩니다. 해당 프로세스를 건너 뛰려면 속성을 비공개로 정의해야합니다.
export class MyElement {
name : string ; // is added to properties config
private hasName : boolean ; // is NOT added to properties config
} 폴리머의 모든 것이 TypeScript 키워드로 수행 할 수있는 것은 아니지만 읽기 readonly 속성 만 읽기 쉽습니다.
export class MyElement {
readonly name : string ; // property will have `readOnly` flag
}ES Mixins는 TypeScript 2.2 이후에 지원됩니다. 당신은 그들에 대해 더 많이 읽을 수 있습니다.
믹스 인은 중합체 v1에 의해지지되지 않습니다
행동은 중합체에서 기능을 공유하는 첫 번째 접근법입니다 (현재 ES Mixins로 대체 됨). 이들은 중합체 특성을 갖는 일반 물체로 정의되며 중합체 V1 구성 물체와 마찬가지로 나열된 방법. 동작을 추가하려면 Polymer.mixinBehaviors() Mixin을 사용하십시오 (자세한 내용은 여기). 중합체 V1의 경우, 이들은 동작 구성에 추가되는 반면, 중합체 V2는 위의 Mixin과 함께 사용합니다.
앞에서 언급했듯이 모든 것을 키워드로 수행 할 수있는 것은 아닙니다. 이것이 TWC에 일련의 설계 시간 주석이 함께 제공되는 이유입니다.
이를 사용하려면 Twc를 로컬로 설치하고 필요에 따라 Elements의 소스 파일에서 가져 오십시오.
import { attr , compute , notify , observe , style , template } from 'twc/polymer' ; 구성 요소에 신체를 제공하려면 템플릿을 제공해야합니다. 이것은 html 템플릿 코드 또는 HTML 템플릿으로가는 경로를 허용하는 @template 주석을 사용하여 수행됩니다 ( .html Extension이 있어야 함).
@ template ( `<h1>Hello {{name}}</h1>` )
export class MyElement {
name : string ;
} @ template ( `template.html` )
export class MyElement {
name : string ;
} 구성 요소 스타일링은 템플릿을 제공하는 것만 큼 쉽습니다. @style Annotation은 CSS 코드, CSS 파일 경로 또는 공유 스타일 이름을 허용합니다. 단일 구성 요소에 여러 스타일을 제공 할 수 있습니다.
@ template ( `<h1>Hello {{name}}</h1>` )
@ style ( `:host {display: block;}` , `style.css` , `shared-styles` )
export class MyElement {
name : string ;
} @attr 및 @notify 추가 reflectToAttribute add 및 properties 구성에 대한 플래그에 notify .
export class MyElement {
@ attr ( ) name : string ; // property will have `reflectToAttribute` flag
@ notify ( ) age : number ; // property will have `notify` flag
} 계산 된 속성은 하나 이상의 종속성 (시청 속성)을 결합한 속성입니다. 종속성이 변경 될 때마다 계산 된 속성 메소드가 화재 및 반환 된 결과가 속성에 할당됩니다. 더 많은 정보는 여기에 있습니다. TWC는 기능 이름과 종속성 배열을 제공하거나 Resolver 함수를 직접 전달하여 두 가지 방식으로 만들 수 있습니다 (이 경우 종속성은 문자열 배열 또는 함수 인수로 전달 될 수 있음).
export class MyElement {
name : string ;
age : number ;
cards : Array < string > ;
// Responds to `name` changes. Property name taken from function argument.
@ compute ( ( name : string ) => `Hi, I am ${ name } ` ) greetings : string ;
// Responds to `age` changes. Property name taken from an array.
@ compute ( ( value : number ) => value >= 18 , [ "age" ] ) isAdult : boolean ;
// Responds to both `age` and `name` changes.
@ compute ( ( age : number , name : string ) => ` ${ name } is ${ age } years old` ) aboutMe : string ;
// Responds to length of `cards` array changes. As dependency is a path, it has to be added to an array.
@ compute ( ( size ) => size , [ "cards.length" ] ) collectionSize : number ;
// Responds to name and length of `cards` array changes. Resolver method is provided by name.
@ compute ( '_summary' , [ "name" , "cards.length" ] ) summary : string ;
private _summary ( name , collectionSize ) {
return ` ${ name } has ${ collectionSize } cards` ;
}
} 계산 된 속성뿐만 아니라 관찰자에 의해서도 모든 속성 또는 경로 변경에 반응 할 수 있습니다. 관찰자는 아무것도 반환하지 않으며 이것이 유일한 차이점입니다.
export class MyElement {
name : string ;
cards : Array < string > ;
// Responds to name and length of `cards` array changes.
@ observe ( "name" , "cards.length" ) summary ( name , collectionSize ) {
console . log ( ` ${ name } cards collection size changed to ${ collectionSize } cards` ;
}
} 타이핑 된 웹 구성 요소는 초기 단계에 있으며 피드백이 필요합니다. 시도해보고 문제가 발생하면 문제가 발생했습니다. 또한 주저하지 말고 아이디어를 게시하십시오!
classList 와 같은) Windows에서 테스트를 실행하려면 ( npm run test ) 현재 tsconfig.json 파일의 include 섹션을 수정하여 아래의 패턴을 포함해야합니다.
{
"include" : [
" node_modules/@types/**/*.d.ts "
]
}
