twc
0.5.1
タイプされたWebコンポーネントは、ネイティブポリマーモジュール（ポリマーツールボックスに優しい）を作成するために、ボイラープレートレスのタイプスクリプトベースの方法を提供します。プロセス全体が設計時間内に行われるため、プロジェクトに追加の依存関係を追加する必要はありません。
npm install -g twc
TWCにはCLIが付属しています。その構成のほとんどは、 tsconfig （およびbower.json ）からのものであり、TSCとほぼ同じように機能します。 TSクラスをネイティブポリマーモジュールに変換するには、プロジェクトルート監督を入力して、端末で以下を実行するだけです。
twc
tscと同じように機能し、 tsconfig.jsonファイルから構成を読み取ります。唯一の違いは、プレーン.js代わりにポリマーモジュールを使用して.htmlファイルを出力することです。
注釈は、 @types NPM NameSpaceで利用できます。これが起こるまで、タイプを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ではタイプスクリプトコンパイラオプションも利用できますが、すべてがサポートされているわけではありません。サポートされていないオプションのリストは次のとおりです（最終的には将来変更される可能性があります）：
TWCのモジュールは、TypeScript言語の構文とキーワードを受け入れ、単なるクラスです。従うべき規則は、ポリマー2.x（V1 Web Components Spec）と一致します。
@ 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 ;
}同様に、2番目のアプローチでは、テンプレートへの相対パスを提供する必要があります（ <link rel="import">タグを介してインポートするのと同じです）。テンプレートファイルのコンテンツは、最初のアプローチ - <template>タグ間のコードのようにする必要があります。
@ CustomElement ( )
@ template ( 'template.html' )
export class MyElement extends Polymer . Element {
name : string ;
}あなたがReactの世界からもっと来ているなら、あなたはrender()メソッドが好きかもしれません。したがって、ここには、非常に同じように機能するtemplate()メソッドです。この方法の利点は、クラスのプロトタイプにアクセスできることであり、テンプレート文字列で使用できることです。 this式はすべて、プロパティへの双方向の結合に置き換えられます（双方向を使用するタイミングを決定する方法と一方向の結合を使用するタイミングを決定する方法がある場合は、私に知らせてください）。
@ CustomElement ( )
export class MyElement extends Polymer . Element {
name : string ;
template ( ) {
return `<h1>Hello ${ this . name } </h1>` ;
}
}最後のアプローチは、クラスをそのままにして、TSファイルと同じ名前のテンプレートファイルを作成することです。コンパイル時に、TWCはファイルの内容をピックアップして添付します（2番目のアプローチと同じように）。でも注意してください！ oututdirを指定しない場合、最終モジュールはテンプレートを置き換える可能性があります（デフォルトでは、同じベース名で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 Directoryにpottsを実行します。宣言は、デフォルトでpotts.d.tsファイルに保存されます（ --outFileまたは-oフラグを介して構成可能）。これにより、すべてのbower依存関係のbower.jsonファイルのmainセクションで聞くすべてのHTMLファイルの宣言が生成されます。すべてのモジュールは、インポート可能なパス（たとえば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
}ポリマー内のすべてがタイプスクリプトキーワードで実行できるわけではありませんが、読み取り専用のプロパティはreadonlyのようにプレフィックスと同じくらい簡単です。
export class MyElement {
readonly name : string ; // property will have `readOnly` flag
}ESミクシンは、TypeScript 2.2以来サポートされています。これらの詳細については、こちらをご覧ください。
ミキシンはポリマーV1によってサポートされていません
動作は、ポリマーで機能を共有する最初のアプローチです（現在はESミクシンに置き換えられています）。これらは、ポリマーV1構成オブジェクトと同様に、ポリマー特性とメソッドがリストされているプレーンオブジェクトとして定義されます。動作を追加するには、 Polymer.mixinBehaviors() mixinを使用します（詳細はこちら）。ポリマーV1の場合、動作構成に追加され、ポリマーV2は上記のミックスインでそれらを使用します。
前述のように、すべてがキーワードで実行できるわけではありません。これが、TWCにデザイン時間注釈のセットが付属する理由です。
それらを使用するには、TWCをローカルにインストールし、必要に応じて要素のソースファイルにインポートします。
import { attr , compute , notify , observe , style , template } from 'twc/polymer' ; コンポーネントに本体を与えるには、テンプレートを提供する必要があります。これは、HTMLテンプレートコードまたはHTMLテンプレートへのパスを受け入れる@template Annotationを使用して行われます（ .html拡張機能が必要です）。
@ 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を追加し、 properties構成にフラグをnotify 。
export class MyElement {
@ attr ( ) name : string ; // property will have `reflectToAttribute` flag
@ notify ( ) age : number ; // property will have `notify` flag
} 計算されたプロパティは、1つ以上の依存関係（監視プロパティ）を組み合わせたプロパティです。依存関係のいずれかが変更されるたびに、計算されたプロパティメソッドの火災と返された結果がプロパティに割り当てられます。詳細については、こちらをご覧ください。 TWCは、関数名と依存関係配列を提供するか、リゾルバー関数を直接渡すことにより、2つの方法でそれらを作成できます（その場合、文字列の配列で依存関係を渡すことができます。
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` ;
}
} タイプされたWebコンポーネントは初期段階で、フィードバックが必要です。試してみてください。問題が発見されたら、問題に投稿してください。また、アイデアを投稿することも躊躇しないでください！
classListなど）を使用することを警告しますWindowsでテストを実行するには（ npm run test ）、 tsconfig.jsonファイルのincludeセクションを変更して、以下のパターンが含まれているように変更する必要があります。
{
"include" : [
" node_modules/@types/**/*.d.ts "
]
}
