twc

พิมพ์ส่วนประกอบเว็บ

ส่วนประกอบของเว็บที่พิมพ์มาช่วยให้คุณมีวิธีการพิมพ์แบบใช้แบบใช้แบบไม่ต้องใช้ในการเขียนโมดูลโพลีเมอร์ดั้งเดิม (เป็นมิตรกับกล่องเครื่องมือโพลีเมอร์) กระบวนการทั้งหมดดำเนินการในเวลาออกแบบดังนั้นจึงไม่จำเป็นต้องเพิ่มการพึ่งพาเพิ่มเติมในโครงการ

การติดตั้ง

 npm install -g twc

โดยใช้

TWC มาพร้อมกับ CLI การกำหนดค่าส่วนใหญ่มาจาก tsconfig (และ bower.json ) และมันก็ใช้งานได้เหมือนกับ TSC หากต้องการแปลงคลาส TS เป็นโมดูลโพลีเมอร์ดั้งเดิมเพียงเข้าสู่โครงการรูทโครงการและดำเนินการต่อไปนี้ในเทอร์มินัล:

 twc

มันทำงานได้เช่นเดียวกับ tsc การอ่านการกำหนดค่าจากไฟล์ tsconfig.json ความแตกต่างเพียงอย่างเดียวคือเอาต์พุตไฟล์ .html พร้อมโมดูลโพลีเมอร์แทน .js ธรรมดา

การกำหนดค่า

รวมถึงคำอธิบายประกอบ

คำอธิบายประกอบจะมีให้ที่ @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"

สร้างโมดูลพอลิเมอร์ 2.x ที่ใช้ ES6

ตัวเลือก typescript

ตัวเลือก TypeScript Compiler มีให้สำหรับ TWC เช่นกันไม่ใช่ทุกอย่างที่ได้รับการสนับสนุน นี่คือรายการตัวเลือก ที่ไม่ได้รับการสนับสนุน (อาจเปลี่ยนแปลงในอนาคต):

• sourcemap
• การตกแต่ง
• JSX
• jsxfactory

การสร้างโมดูล

โมดูลใน 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 Decorator
• จัดเตรียมพา ธ ไปยังไฟล์เทมเพลตภายใน @template Decorator
• ส่งคืนเทมเพลตจากเมธอด template()
• อย่าใช้ใด ๆ ข้างต้นและสร้างไฟล์ HTML ที่ชื่อเหมือนกับไฟล์ TS กับส่วนประกอบ

วิธีแรกเป็นเรื่องธรรมดามากและคุณอาจเคยเห็นสิ่งนี้หลายครั้ง ทุกสิ่งที่ปกติจะไประหว่างแท็ก <template> ตอนนี้จะเข้าไปในมัณฑนากร ไม่มีเวทมนตร์แฟนซีที่นี่

@ CustomElement ( )
@ template ( `<h1>Hello [[name]]</h1>` )
export class MyElement extends Polymer . Element {
    name : string ;
}

ในทำนองเดียวกันวิธีที่สองคุณเพียงแค่ต้องจัดเตรียมเส้นทางสัมพัทธ์ไปยังเทมเพลต (เช่นเดียวกับที่คุณนำเข้าผ่าน <link rel="import"> แท็ก) เนื้อหาของไฟล์เทมเพลตควรเป็นในวิธีแรก - โค้ดระหว่างแท็ก <template>

@ CustomElement ( )
@ template ( 'template.html' )
export class MyElement extends Polymer . Element {
    name : string ;
}

หากคุณกำลังมาจากโลกที่ตอบสนองมากขึ้นคุณอาจชอบวิธี render() ดังนั้นนี่คือวิธี template() ที่ใช้งานได้เหมือนกันมาก ข้อดีของวิธีนี้คือคุณสามารถเข้าถึงต้นแบบคลาสและคุณสามารถใช้ในสตริงเทมเพลต ทุกการแสดงออก this จะถูกแทนที่ด้วยการเชื่อมโยงสองทางกับคุณสมบัติ (หากคุณมีข้อเสนอแนะวิธีการพิจารณาว่าจะใช้สองทางและเมื่อใดที่จะใช้การเชื่อมโยงทางเดียวโปรดแจ้งให้เราทราบ)

@ CustomElement ( )
export class MyElement extends Polymer . Element {
    name : string ;
    template ( ) {
        return `<h1>Hello ${ this . name } </h1>` ;
    }
}

วิธีสุดท้ายคือการออกจากคลาสตามที่เป็นอยู่และสร้างไฟล์เทมเพลตด้วยชื่อเดียวกับไฟล์ TS ในเวลาคอมไพล์ TWC จะรับเนื้อหาไฟล์และแนบ (เช่นเดียวกับวิธีที่สอง) ระวังแม้ว่า! หากคุณไม่ได้ระบุ outdir โมดูลสุดท้ายอาจแทนที่เทมเพลต (โดยค่าเริ่มต้นมันจะสร้างไฟล์ HTML ด้วยชื่อพื้นฐานเดียวกัน)

โปรดทราบว่า TWC ใช้เทมเพลตพอลิเมอร์ หากต้องการอ่านเพิ่มเติมเกี่ยวกับเทมเพลตและการเชื่อมโยงโปรดดูเอกสารนี้

การนำเข้าสคริปต์และโมดูล HTML

การนำเข้า 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

การจัดการเส้นทางสัมพัทธ์ไปยัง Bower หรือที่เก็บ NPM อาจเจ็บปวด นี่คือที่นามแฝงมีประโยชน์:

 import "bower:polymer/polymer-element.html";
import "npm:jquery/dist/jquery.min.js";

ข้างต้นจะถูกแปลให้ใช้ไดเรกทอรี Bower จาก .bowerrc และจะกลับไปที่ 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 ) และเรียกใช้ potts ในไดเรกทอรีรากของโครงการ การประกาศจะถูกบันทึกลงในไฟล์ potts.d.ts ตามค่าเริ่มต้น (กำหนดค่าผ่าน --outFile หรือ -o FLAG) สิ่งนี้จะสร้างการประกาศสำหรับไฟล์ HTML ทั้งหมดฟังในส่วน main ของไฟล์ bower.json ของการพึ่งพา Bower ทุกครั้ง โมดูลทั้งหมดจะถูกประกาศให้ตรงกับเส้นทางที่นำเข้า (ตัวอย่างเช่น 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 ร์ที่สามารถทำได้ด้วยคำหลัก typeScrip

 export class MyElement {
    readonly name : string ; // property will have `readOnly` flag
}

มิกซ์

ES Mixins ได้รับการสนับสนุนตั้งแต่ TypeScript 2.2 คุณสามารถอ่านเพิ่มเติมเกี่ยวกับพวกเขาได้ที่นี่

Mixins ไม่ได้รับการสนับสนุนโดย Polymer V1

พฤติกรรม

พฤติกรรมเป็นวิธีแรกในการแบ่งปันฟังก์ชั่นในพอลิเมอร์ (ตอนนี้แทนที่ด้วย ES Mixins) พวกเขาถูกกำหนดให้เป็นวัตถุธรรมดาที่มีคุณสมบัติพอลิเมอร์และวิธีการที่ระบุไว้เช่นเดียวกับวัตถุพอลิเมอร์ v1 config ในการเพิ่มพฤติกรรมให้ใช้ Polymer.mixinBehaviors() Mixin (ข้อมูลเพิ่มเติมที่นี่) สำหรับ Polymer V1 พวกเขาจะถูกเพิ่มเข้าไปในพฤติกรรมการกำหนดค่าในขณะที่ Polymer V2 จะใช้กับ Mixin ด้านบน

นักตกแต่ง

ดังที่ได้กล่าวไว้ก่อนหน้านี้ทุกอย่างไม่สามารถทำได้ด้วยคำหลัก นี่คือเหตุผลที่ TWC มาพร้อมกับชุดคำอธิบายประกอบเวลาการออกแบบ

หากต้องการใช้ให้ติดตั้ง TWC ในเครื่องและนำเข้าไฟล์ต้นฉบับขององค์ประกอบตามต้องการ:

 import { attr , compute , notify , observe , style , template } from 'twc/polymer' ; 

@Template

เพื่อให้ส่วนประกอบของคุณมีร่างกายคุณต้องจัดเตรียมเทมเพลต สิ่งนี้ทำได้โดยใช้คำอธิบายประกอบ @template ซึ่งยอมรับรหัสเทมเพลต HTML หรือเส้นทางไปยังเทมเพลต HTML (ต้องมีส่วนขยาย .html )

@ template ( `<h1>Hello {{name}}</h1>` )
export class MyElement {
    name : string ;
} 

@ template ( `template.html` )
export class MyElement {
    name : string ;
} 

@สไตล์

จัดแต่งทรงผมเป็นเรื่องง่ายเหมือนการให้แม่แบบ @style คำอธิบายประกอบยอมรับรหัส CSS, เส้นทางไฟล์ CSS หรือชื่อสไตล์ที่ใช้ร่วมกัน สามารถให้หลายสไตล์กับองค์ประกอบเดียว

@ template ( `<h1>Hello {{name}}</h1>` )
@ style ( `:host {display: block;}` , `style.css` , `shared-styles` )
export class MyElement {
    name : string ;
} 

@attr และ @Notify

@attr และ @notify เพิ่ม reflectToAttribute และ notify สถานะการกำหนดค่า properties

 export class MyElement {
    @ attr ( ) name : string ; // property will have `reflectToAttribute` flag
    @ notify ( ) age : number ; // property will have `notify` flag
} 

@คำนวณ

คุณสมบัติที่คำนวณได้เป็นคุณสมบัติที่รวมการพึ่งพาอย่างน้อยหนึ่งรายการ (คุณสมบัติที่ดู) เมื่อใดก็ตามที่การเปลี่ยนแปลงการพึ่งพาอาศัยกันวิธีการที่คำนวณจะยิงและผลลัพธ์ที่ส่งคืนจะถูกกำหนดให้กับคุณสมบัติ ข้อมูลเพิ่มเติมที่นี่ 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` ;
    }
} 

อีกมากที่จะมา!

ส่วนประกอบของเว็บที่พิมพ์อยู่ในช่วงต้นและต้องการความคิดเห็นของคุณ โปรดลองใช้และหากคุณพบปัญหาโพสต์ในปัญหา นอกจากนี้อย่าลังเลที่จะโพสต์แนวคิด!

แผนงาน

• เตือนการใช้ชื่อคุณสมบัติ/วิธีการที่สงวนไว้ (เช่น classList )
• อนุญาตให้นิพจน์ในเทมเพลต
• การนำเข้าอินเทอร์เฟซเหตุการณ์ (เพื่อหลีกเลี่ยงการ redeclaration
• ทำให้การนำเข้าสัมพัทธ์ไม่แตกหักหาก outdir เปลี่ยนโครงสร้างไฟล์
• สร้างแผนที่แหล่งที่ถูกต้อง
• สร้างนักตกแต่งและเวิร์กโฟลว์ที่เข้ากันได้ของพอลิเมอร์

รันการทดสอบบน Windows

ในการเรียกใช้การทดสอบบน Windows ( npm run test ) ปัจจุบันจำเป็นต้องแก้ไข include ของไฟล์ tsconfig.json ดังนั้นจึงมีรูปแบบด้านล่าง:

{
  "include" : [
    " node_modules/@types/**/*.d.ts "
  ]
}