ننفذ المكونات الزاوية في React و Vue وحتى مسج إذا كنت تريد

إذا وجدت مكونًا رائعًا في npm ، ولكن باستخدام البادئة ng و ngx والزاوي وما إلى ذلك ، فلا تنزعج من ذلك. هناك العديد من الحلول للحصول على هذا المكون. في هذه المقالة ، سننظر في حل يتم دعمه رسميًا من قبل الفريق الزاوي ، أي العناصر الزاوي.

للممارسة ، اختر أي مكون من Awesome Angular .

اخترت بسيطة ، ولكن مثيرة للاهتمام للغاية - ngx الرمزية . والذي ، بدوره ، يعرض الصور الرمزية من مختلف الشبكات الاجتماعية أو يعرض ببساطة الأحرف الأولى للمستخدم.
شيء مثل هذا:


ولديه واجهة برمجة تطبيقات بسيطة ، إليك مثال صغير:

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

وهكذا ، قم بإنشاء مشروع Angular لهذا وقم بتوصيل المكتبة.

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

ربط الحزمة إلى وحدة لدينا.

 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 { } 

الآن لنقم بإنشاء مكون بسيط ، لأنه "بشكل افتراضي" لا يقوم AvatarModule بتصدير المكون الوحيد للخارج.

 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() { } } 

من أجل البساطة ، استخدمنا واحدًا فقط من معلمات الإدخال.

سنقوم بإنشاء مكون عالمي من كل هذا. لكي تعمل عناصرنا ، تحتاج إلى إضافة عناصر Angular إلى مشروعنا.

 ng add @angular/elements 

من بين أشياء أخرى ، سوف يتضمن هذا الأمر أيضًا في قسم البرامج النصية إصدارًا لايت لتسجيل العناصر المخصصة.

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

app.module.ts الناتجة:

 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() {} } 

عظيم! الآن نحن بحاجة إلى جمع كل هذا الخير. للقيام بذلك ، قم بإنشاء أداة التجميع الخاصة بك والتي ستقوم بتعبئة مكوننا في ملف 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'); })(); 

كل شيء جاهز! يبقى فقط لجمع. إضافة مثل هذا البرنامج النصي لدينا package.json.

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

حسنا ، هذا كل شيء! لقد حصلنا على ملف js `avatar-lib.js` يزن ~ 221 كيلو بايت و ~ 60 كيلو بايت في gzip. وبطبيعة الحال ، يتم تضمين الكثير غيرها هنا مع الزاوي / الأساسية. يزن ngx-avatar نفسه حوالي 16.8 كيلو بايت و 5.4 كيلو بايت في gzip. لتقليل وزن avatar-lib.js بشكل كبير ، نحتاج إلى برنامج Ivy Compiler ، لكن هذا موضوع لمقال آخر. (آمل أن يتم إطلاق Ivy بحلول هذه اللحظة ، أو سأجمعها يدويًا مما هو متاح الآن).

ماذا العناصر الزاوي تعطينا؟

هذا مجرد تطبيق مفيد لتطبيق Web Components. في الواقع ، يمكن للمرء الاستغناء عنه. تعرف على ما يمكنك فعله مسبقًا: مقال بقلم جيا لي (يرافق بنشاط Zone.js الآن) .

قمنا بتضمين مكوننا في أطر أخرى.

الأول في فيو. نقوم بالاتصال بأي طريقة مناسبة لك وإدراج الصورة الرمزية في القالب ، ونقل البيانات من خلال bue vue القياسية.

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

سيكون من الممكن أيضًا تنظيم أحداث الإخراج.

عرض Vue demo: https://github.com/Jamaks/angular-element/tree/master/ang-el-vue

حان الوقت لرد الفعل! كل شيء بسيط مثل:

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

التجريبي على رد الفعل

حسنا ، بشكل عام ، المشروع

أما بالنسبة لدعم المتصفح في الوقت الحالي:

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

بالطبع ، الأمر متروك لك لتقرر ما إذا كنت تريد استخدام طريقة التنفيذ هذه. أود ألا يتم ربط مكونات واجهة المستخدم بأي شيء وعدم وجود لاحقات مماثلة: ng- ، ngx- ، v- ، react- ، rc- وما إلى ذلك.

مكافأة!

مستوحاة من حجم المكون (ngx-avatar) ، ما زلت أحاول إطعام ngtsc ، ngcc ثم تجميعه باستخدام مجموعة التحديثات. لكن المحاولات باءت بالفشل ، لأن المكون المحدد تطلب العديد من الوحدات الخارجية. يائسة ، جعلت بعض ما يشبه هذا المكون ، وكانت النتائج مفاجأة لي - في الوقت الراهن (7.1.2) ، كانت المكتبة ~ 96 كيلو بايت و ~ 26 كيلو بايت في gzip. وبطبيعة الحال ، كان هناك الكثير من التبعيات ، وترك تكوين التراكمي الكثير مما هو مرغوب فيه. ولكن لا يزال ، ليس هذا هو 3 كيلو بايت التي تم عرضها خلال عرض اللبلاب. يبقى أن نتوقع عند نشر ngcc إلى Webpack (cli) وكتابة الوثائق.

يمكنك أيضا العثور على التجارب الصغيرة والمطلعين من العالم الزاوي هنا .