Kami menerapkan komponen Angular dalam React, Vue, dan bahkan jQuery jika Anda mau

Jika Anda menemukan komponen keren di npm, tetapi dengan awalan ng, ngx, angular dan sebagainya, maka jangan kesal dengan hal ini. Ada banyak solusi untuk mendapatkan komponen ini. Pada artikel ini, kami akan mempertimbangkan solusi yang secara resmi didukung oleh Tim Angular, yaitu, Elemen Angular.

Untuk latihan, pilih komponen apa pun dari Awesome Angular .

Saya memilih yang sederhana, tetapi sangat menarik - ngx-avatar . Yang, pada gilirannya, menampilkan avatar dari berbagai jejaring sosial atau hanya menampilkan inisial pengguna.
Sesuatu seperti ini:


Dan dia memiliki API sederhana, berikut adalah contoh kecil:

<ngx-avatar facebookId="1508319875"></ngx-avatar> <ngx-avatar src="assets/avatar.jpg"></ngx-avatar> <ngx-avatar name="John Doe"></ngx-avatar> 

Jadi, buat proyek Sudut untuk ini dan hubungkan perpustakaan.

 ng new avatar-lib --minimalN npm i ngx-avatar --save 

Hubungkan paket ke modul kami.

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // Import your AvatarModule import { AvatarModule } from 'ngx-avatar'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, // Specify AvatarModule as an import AvatarModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

Sekarang mari kita membuat komponen sederhana, karena secara default `AvatarModule` tidak mengekspor satu-satunya komponen yang keluar.

 ng gc avatar 

 import { Component, ViewEncapsulation, Input } from '@angular/core'; @Component({ selector: 'app-avatar', template: ` <ngx-avatar [name]="name"></ngx-avatar> `, styles: [], encapsulation: ViewEncapsulation.ShadowDom }) export class AvatarComponent { @Input() name: string; constructor() { } } 

Untuk kesederhanaan, kami hanya menggunakan satu dari parameter input.

Kami akan membuat komponen universal dari semua ini. Agar elemen kami berfungsi, Anda perlu menambahkan Elemen Sudut ke proyek kami.

 ng add @angular/elements 

Antara lain, perintah ini juga akan menyertakan di bagian skrip versi lite untuk mendaftarkan Elemen Kustom.

 "scripts": [{ "input": "node_modules/document-register-element/build/document-register-element.js" }] 

App.module.ts yang dihasilkan:

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule, Injector } from '@angular/core'; import { createCustomElement } from '@angular/elements'; import { AvatarComponent } from './avatar.component'; import { AvatarModule } from 'ngx-avatar'; @NgModule({ declarations: [AvatarComponent], imports: [AvatarModule, BrowserModule], entryComponents: [AvatarComponent] }) export class AppModule { constructor(private injector: Injector) { //    Angular Element const avatarComponent = createCustomElement(AvatarComponent, { injector }); //     customElements.define('avatar-lib', avatarComponent); } ngDoBootstrap() {} } 

Hebat! Sekarang kita perlu mengumpulkan semua barang bagus ini. Untuk melakukan ini, buat kolektor Anda sendiri yang akan mengemas komponen kami ke dalam satu file js:

 const fs = require('fs-extra'); const concat = require('concat'); (async function build() { const files = [ './dist/avatar-lib/runtime.js', './dist/avatar-lib/polyfills.js', './dist/avatar-lib/scripts.js', './dist/avatar-lib/main.js' ]; await fs.ensureDir('elements'); await concat(files, 'elements/avatar-lib.js'); })(); 

Semuanya sudah siap! itu hanya mengumpulkan. Tambahkan skrip seperti itu ke package.json kami.

 "build:elements": "ng build --prod --output-hashing none && node build.js" 

Yah, itu dia! Kami mendapat file js `avatar-lib.js` dengan berat ~ 221kB dan ~ 60kb di gzip. Secara alami, banyak lagi yang termasuk di sini dengan sudut / inti. Avatar ngx itu sendiri berbobot sekitar 16.8kB dan 5.4kB di gzip. Untuk mengurangi berat avatar-lib.js, kita perlu Ivy Compiler, tetapi ini adalah topik untuk artikel lain. (Saya harap Ivy akan dirilis pada saat ini, atau saya akan secara manual mengumpulkan dari apa yang sekarang tersedia).

Apa yang diberikan Elemen Sudut kepada kita?

Ini hanyalah api yang berguna untuk mengimplementasikan Komponen Web. Bahkan, seseorang bisa melakukannya tanpanya. Lihat apa yang dapat Anda lakukan sebelumnya: sebuah artikel oleh Jia Li (aktif menyertai Zone.js sekarang) .

Kami menanamkan komponen kami dalam kerangka kerja lain.

Pertama di Vue. Kami terhubung dengan cara apa pun yang nyaman bagi Anda dan memasukkan avatar-lib ke dalam templat, mentransfer data melalui daftar standar.

 <avatar-lib :name = 'myName'></avatar-lib> 

Mungkin juga untuk mengatur acara Output.

Demo Vue: https://github.com/Jamaks/angular-element/tree/master/ang-el-vue

Sudah waktunya untuk Bereaksi! Semuanya sesederhana:

 <avatar-lib name = {this.myName}></avatar-lib> 

Demo di Bereaksi

Nah, secara umum, proyeknya

Adapun dukungan browser saat ini:

https://angular.io/guide/elements#browser-support-for-custom-elements
https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define

Tentu saja, terserah Anda untuk memutuskan apakah akan menggunakan metode implementasi seperti itu. Saya ingin komponen UI tidak dapat dilampirkan ke apa pun dan tanpa akhiran yang sama: ng-, ngx-, v-, react-, rc-, dan sebagainya.

Bonus!

Terinspirasi oleh ukuran komponen (ngx-avatar), saya masih mencoba memberi makan ngtsc, ngcc dan kemudian merakitnya menggunakan rollup. Tetapi upaya itu tidak berhasil, karena komponen yang dipilih membutuhkan banyak modul eksternal. Putus asa, membuat beberapa kemiripan komponen ini, dan hasilnya sangat terkejut - saat ini (7.1.2), perpustakaan ~ 96kb dan ~ 26kb di gzip. Secara alami, ada banyak dependensi, dan konfigurasi rollup saya meninggalkan banyak hal yang diinginkan. Tapi tetap saja, ini bukan 3kb yang kami tunjukkan saat presentasi Ivy. Masih diharapkan ketika mereka menggunakan ngcc ke Webpack (cli) dan menulis dokumentasi.

Anda juga dapat menemukan eksperimen kecil dan orang dalam dari dunia Angular di sini .