Skip to content
This repository was archived by the owner on May 10, 2021. It is now read-only.

Commit b71e566

Browse files
akanassakanass
authored
Merge pull request #16 from hapinessjs/next
release(version): v7.1.0
2 parents 14c56f0 + 5a3fda3 commit b71e566

File tree

9 files changed

+359
-293
lines changed

9 files changed

+359
-293
lines changed

‎package.json‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@hapiness/ng-elements-loader-cli",
3-
"version": "7.0.0",
3+
"version": "7.1.0",
44
"description": "Angular CLI project to manage @hapiness/ng-elements-loader and @hapiness/custom-elements-loader projects",
55
"scripts": {
66
"build:ng": "ng build 'ng-elements-loader' --prod",
@@ -34,31 +34,28 @@
3434
"url": "https://github.com/hapinessjs/ng-elements-loader/issues"
3535
},
3636
"dependencies": {
37-
"@angular/common": "^7.0.2",
38-
"@angular/core": "^7.0.2",
39-
"@angular/compiler": "^7.0.2",
40-
"@angular/animations": "^7.0.2",
41-
"@angular/elements": "^7.0.2",
42-
"@angular/platform-browser": "^7.0.2",
43-
"@angular/platform-browser-dynamic": "^7.0.2",
37+
"@angular/animations": "^7.0.3",
38+
"@angular/common": "^7.0.3",
39+
"@angular/compiler": "^7.0.3",
40+
"@angular/core": "^7.0.3",
41+
"@angular/elements": "^7.0.3",
42+
"@angular/platform-browser": "^7.0.3",
43+
"@angular/platform-browser-dynamic": "^7.0.3",
44+
"@webcomponents/webcomponentsjs": "^2.1.3",
4445
"core-js": "^2.5.7",
45-
"document-register-element": "~1.8.1",
46+
"document-register-element": "^1.13.1",
4647
"rxjs": "^6.3.3",
4748
"zone.js": "^0.8.26"
4849
},
4950
"devDependencies": {
50-
"@angular/compiler-cli": "^7.0.2",
51-
"@angular-devkit/build-ng-packagr": "~0.10.4",
52-
"@angular-devkit/build-angular": "~0.10.4",
53-
"ng-packagr": "^4.4.0",
54-
"tsickle": "^0.33.1",
55-
"tslib": "^1.9.3",
56-
"typescript": "~3.1.6",
57-
"@angular/cli": "^7.0.4",
58-
"@angular/language-service": "^7.0.2",
51+
"@angular-devkit/build-angular": "~0.10.5",
52+
"@angular-devkit/build-ng-packagr": "~0.10.5",
53+
"@angular/cli": "^7.0.5",
54+
"@angular/compiler-cli": "^7.0.3",
55+
"@angular/language-service": "^7.0.3",
5956
"@types/jasmine": "~2.8.9",
6057
"@types/jasminewd2": "~2.0.5",
61-
"@types/node": "~10.12.2",
58+
"@types/node": "~10.12.3",
6259
"codelyzer": "~4.5.0",
6360
"jasmine-core": "~3.3.0",
6461
"jasmine-spec-reporter": "~4.2.1",
@@ -67,8 +64,12 @@
6764
"karma-coverage-istanbul-reporter": "~2.0.4",
6865
"karma-jasmine": "~1.1.2",
6966
"karma-jasmine-html-reporter": "^1.4.0",
67+
"ng-packagr": "^4.4.0",
7068
"protractor": "~5.4.1",
7169
"ts-node": "~7.0.1",
72-
"tslint": "~5.11.0"
70+
"tsickle": "^0.33.1",
71+
"tslib": "^1.9.3",
72+
"tslint": "~5.11.0",
73+
"typescript": "~3.1.6"
7374
}
7475
}

‎projects/custom-elements-loader/README.md‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ or
4444
$ npm install --save @hapiness/custom-elements-loader
4545
```
4646

47-
**All required dependencies will be automatically installed** : `@angular/animations`, `@angular/common`, `@angular/core`, `@angular/compiler`, `@angular/elements`, `@angular/platform-browser`, `@angular/platform-browser-dynamic`, `@hapiness/ng-elements-loader`, `core-js`, `document-register-element`, `rxjs` and `zone.js`.
47+
**All required dependencies will be automatically installed** : `@angular/animations`, `@angular/common`, `@angular/core`, `@angular/compiler`, `@angular/elements`, `@angular/platform-browser`, `@angular/platform-browser-dynamic`, `@hapiness/ng-elements-loader`, `@webcomponents/webcomponentsjs`, `core-js`, `document-register-element`, `rxjs` and `zone.js`.
4848

4949
**If your custom element module must have more dependencies, you must install them by yourself**
5050

@@ -183,7 +183,7 @@ The minimum `package.json` file for your module is described below:
183183
"name": "made-with-love",
184184
"version": "1.0.0",
185185
"peerDependencies": {
186-
"@hapiness/custom-elements-loader": "^7.0.0"
186+
"@hapiness/custom-elements-loader": "^7.1.0"
187187
}
188188
}
189189
```
@@ -234,9 +234,14 @@ We create a `HTML`file with our `custom element` inside.
234234
```typescript
235235
// POLYFILLS
236236
import 'zone.js/dist/zone';
237-
import 'document-register-element';
238237
import 'core-js/es7/reflect';
239238

239+
/** In browsers that don't support Custom Elements natively **/
240+
// import 'document-register-element';
241+
242+
/** You must add this if your application will be compiled in es5 because the specification requires developers use ES2015 classes to define Custom Elements **/
243+
// import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';
244+
240245
import { ElementsLoader } from '@hapiness/custom-elements-loader';
241246
import { MadeWithLoveModule } from 'made-with-love';
242247

@@ -262,13 +267,18 @@ Loading of the component happens inside `main.ts` file.
262267

263268
```typescript
264269
import 'zone.js/dist/zone';
265-
import 'document-register-element';
266270
import 'core-js/es7/reflect';
267271
```
268272

269273
- Additional **polyfills** can be added if needed:
270274

271275
```typescript
276+
/** In browsers that don't support Custom Elements natively **/
277+
// import 'document-register-element';
278+
279+
/** You must add this if your application will be compiled in es5 because the specification requires developers use ES2015 classes to define Custom Elements **/
280+
// import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';
281+
272282
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
273283
// import 'core-js/es6/symbol';
274284
// import 'core-js/es6/object';
@@ -399,10 +409,14 @@ We set a **listener** to catch `sayHello` event and do what we want:
399409
```typescript
400410
// POLYFILLS
401411
import 'zone.js/dist/zone';
402-
import 'document-register-element';
403-
import 'core-js/es6/reflect';
404412
import 'core-js/es7/reflect';
405413

414+
/** In browsers that don't support Custom Elements natively **/
415+
// import 'document-register-element';
416+
417+
/** You must add this if your application will be compiled in es5 because the specification requires developers use ES2015 classes to define Custom Elements **/
418+
// import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';
419+
406420
import { ElementsLoader } from '@hapiness/custom-elements-loader';
407421
import { HelloWorldModule } from 'hello-world';
408422

@@ -419,6 +433,12 @@ document.querySelector('hello-world').addEventListener('sayHello', (event: any)
419433
[Back to top](#installation)
420434

421435
## Change History
436+
* v7.1.0 (2018-11-09)
437+
* `Angular v7.0.3+`
438+
* `document-register-elements v1.13.1` latest version of the `polyfill` only require if your browser doesn't support `customElement`
439+
* `@webcomponents/webcomponentsjs v2.1.3` to fix issue with `es5` compilation outside `Angular` application like explain [here](https://github.com/angular/angular/issues/24390#issuecomment-437361929)
440+
* Allow **custom elements registration** in browser even if tag isn't yet present in the `DOM` like this, it can be created or loaded asynchronously after registration
441+
* Documentation
422442
* v7.0.0 (2018-11-02)
423443
* `Angular v7.0.2+`
424444
* Documentation

‎projects/custom-elements-loader/ng-package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"@angular/platform-browser",
1515
"@angular/platform-browser-dynamic",
1616
"@hapiness/ng-elements-loader",
17+
"@webcomponents/webcomponentsjs",
1718
"core-js",
1819
"document-register-element",
1920
"rxjs",

‎projects/custom-elements-loader/ng-package.prod.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@angular/platform-browser",
1414
"@angular/platform-browser-dynamic",
1515
"@hapiness/ng-elements-loader",
16+
"@webcomponents/webcomponentsjs",
1617
"core-js",
1718
"document-register-element",
1819
"rxjs",

‎projects/custom-elements-loader/package.json‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@hapiness/custom-elements-loader",
3-
"version": "7.0.0",
3+
"version": "7.1.0",
44
"description": "Factory to load Angular Custom Elements inside JavaScript's applications like React.js, Vue.js or just standalone",
55
"private": false,
66
"repository": {
@@ -30,16 +30,17 @@
3030
"url": "https://github.com/hapinessjs/ng-elements-loader/issues"
3131
},
3232
"dependencies": {
33-
"@angular/animations": "^7.0.2",
34-
"@angular/common": "^7.0.2",
35-
"@angular/core": "^7.0.2",
36-
"@angular/compiler": "^7.0.2",
37-
"@angular/elements": "^7.0.2",
38-
"@angular/platform-browser": "^7.0.2",
39-
"@angular/platform-browser-dynamic": "^7.0.2",
40-
"@hapiness/ng-elements-loader": "^7.0.0",
33+
"@angular/animations": "^7.0.3",
34+
"@angular/common": "^7.0.3",
35+
"@angular/core": "^7.0.3",
36+
"@angular/compiler": "^7.0.3",
37+
"@angular/elements": "^7.0.3",
38+
"@angular/platform-browser": "^7.0.3",
39+
"@angular/platform-browser-dynamic": "^7.0.3",
40+
"@hapiness/ng-elements-loader": "^7.1.0",
41+
"@webcomponents/webcomponentsjs": "^2.1.3",
4142
"core-js": "^2.5.7",
42-
"document-register-element": "~1.8.1",
43+
"document-register-element": "^1.13.1",
4344
"rxjs": "^6.3.3",
4445
"zone.js": "^0.8.26"
4546
}

‎projects/ng-elements-loader/README.md‎

Lines changed: 67 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232

3333
This module exposes an `Angular's` service to load easily [custom elements](https://angular.io/guide/elements) in your `Angular` application.
3434

35-
We support `Angular` version `7.0.2+`.
35+
We support `Angular` version `7.0.3+`.
3636

3737
## Installation
3838

@@ -183,9 +183,9 @@ The minimum `package.json` file for your module is described below:
183183
"name": "made-with-love",
184184
"version": "1.0.0",
185185
"peerDependencies": {
186-
"@angular/common": "^7.0.2",
187-
"@angular/core": "^7.0.2",
188-
"@hapiness/ng-elements-loader": "^7.0.0"
186+
"@angular/common": "^7.0.3",
187+
"@angular/core": "^7.0.3",
188+
"@hapiness/ng-elements-loader": "^7.1.0"
189189
}
190190
}
191191
```
@@ -405,7 +405,70 @@ this._rd.listen(element, 'sayHello', (event: any) => this.alertHello(event.detai
405405

406406
[Back to top](#installation)
407407

408+
#### - Add custom element support in your application
409+
410+
**src/app/app.module.ts**:
411+
412+
```typescript
413+
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
414+
import { BrowserModule } from '@angular/platform-browser';
415+
416+
import { AppRoutingModule } from './app-routing.module';
417+
import { AppComponent } from './app.component';
418+
import { SayWithLoveComponent } from './say-with-love/say-with-love.component.ts';
419+
420+
@NgModule({
421+
declarations: [
422+
AppComponent,
423+
SayWithLoveComponent
424+
],
425+
imports: [
426+
BrowserModule,
427+
AppRoutingModule
428+
],
429+
providers: [],
430+
bootstrap: [ AppComponent ],
431+
schemas: [ CUSTOM_ELEMENTS_SCHEMA ] // this line must be added
432+
})
433+
export class AppModule {
434+
}
435+
```
436+
437+
**tsconfig.json**
438+
439+
````json
440+
{
441+
"compileOnSave": false,
442+
"compilerOptions": {
443+
"baseUrl": "./",
444+
"outDir": "./dist/out-tsc",
445+
"sourceMap": true,
446+
"declaration": false,
447+
"module": "es2015",
448+
"moduleResolution": "node",
449+
"emitDecoratorMetadata": true,
450+
"experimentalDecorators": true,
451+
"target": "es2015", // this line must switch target from es5 to es2015
452+
"typeRoots": [
453+
"node_modules/@types"
454+
],
455+
"lib": [
456+
"es2018",
457+
"dom"
458+
]
459+
}
460+
}
461+
````
462+
463+
**If your browser doesn't support natively `customElement` like explain [here](https://angular.io/guide/elements#browser-support-for-custom-elements), you must add `document-register-element` inside `src/polyfills.ts` file**
464+
408465
## Change History
466+
* v7.1.0 (2018-11-09)
467+
* `Angular v7.0.3+`
468+
* `document-register-elements v1.13.1` latest version of the `polyfill` only require if your browser doesn't support `customElement`
469+
* `@webcomponents/webcomponentsjs v2.1.3` to fix issue with `es5` compilation outside `Angular` application like explain [here](https://github.com/angular/angular/issues/24390#issuecomment-437361929)
470+
* Allow **custom elements registration** in browser even if tag isn't yet present in the `DOM` like this, it can be created or loaded asynchronously after registration
471+
* Documentation
409472
* v7.0.0 (2018-11-02)
410473
* `Angular v7.0.2+`
411474
* Documentation

‎projects/ng-elements-loader/package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@hapiness/ng-elements-loader",
3-
"version": "7.0.0",
3+
"version": "7.1.0",
44
"description": "Service to load Angular Custom Elements inside Angular's applications",
55
"private": false,
66
"repository": {
@@ -27,14 +27,14 @@
2727
"url": "https://github.com/hapinessjs/ng-elements-loader/issues"
2828
},
2929
"peerDependencies": {
30-
"@angular/common": "^7.0.2",
31-
"@angular/core": "^7.0.2",
32-
"@angular/compiler": "^7.0.2",
33-
"@angular/elements": "^7.0.2",
34-
"@angular/platform-browser": "^7.0.2",
35-
"@angular/platform-browser-dynamic": "^7.0.2",
30+
"@angular/common": "^7.0.3",
31+
"@angular/core": "^7.0.3",
32+
"@angular/compiler": "^7.0.3",
33+
"@angular/elements": "^7.0.3",
34+
"@angular/platform-browser": "^7.0.3",
35+
"@angular/platform-browser-dynamic": "^7.0.3",
3636
"core-js": "^2.5.7",
37-
"document-register-element": "~1.8.1",
37+
"document-register-element": "^1.13.1",
3838
"rxjs": "^6.3.3",
3939
"zone.js": "^0.8.26"
4040
}

‎projects/ng-elements-loader/src/lib/elements-loader.service.ts‎

Lines changed: 11 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { DOCUMENT } from '@angular/common';
2-
import { Compiler, Inject, Injectable, Injector, Type } from '@angular/core';
1+
import { Compiler, Injectable, Injector, Type } from '@angular/core';
32
import { createCustomElement } from '@angular/elements';
43
import { forkJoin, from, merge, Observable, of, throwError } from 'rxjs';
54
import { filter, flatMap, map, tap, toArray } from 'rxjs/operators';
@@ -13,8 +12,7 @@ export class ElementsLoaderService {
1312
private _elementsToLoad: Map<string, Type<any>>;
1413

1514
constructor(private _injector: Injector,
16-
private _compiler: Compiler,
17-
@Inject(DOCUMENT) private _doc: any) {
15+
private _compiler: Compiler) {
1816
this._elementsToLoad = new Map<string, Type<any>>();
1917
}
2018

@@ -50,38 +48,19 @@ export class ElementsLoaderService {
5048
* Main process to load custom elements
5149
*/
5250
private _customElements(): Observable<any> {
53-
return of(of(typeof this._doc))
51+
return of(of(Array.from(this._elementsToLoad.keys())))
5452
.pipe(
5553
flatMap(obs =>
5654
merge(
57-
obs
58-
.pipe(
59-
filter(_ => _ !== 'undefined'),
60-
map(_ => Array.from(this._elementsToLoad.keys()).filter((s: any) => this._doc.querySelector(s)))
61-
),
62-
obs
63-
.pipe(
64-
filter(_ => _ === 'undefined'),
65-
map(_ => [])
66-
)
67-
)
68-
),
69-
flatMap(selectors =>
70-
of(of(selectors))
71-
.pipe(
72-
flatMap(obs =>
73-
merge(
74-
obs.pipe(
75-
filter(_ => !!_ && !!_.length),
76-
flatMap(_ => forkJoin(_.map(s => this._register(s))))
77-
),
78-
obs.pipe(
79-
filter(_ => !_ || !_.length),
80-
map(_ => undefined as any)
81-
)
82-
)
83-
)
55+
obs.pipe(
56+
filter(_ => !!_ && !!_.length),
57+
flatMap(_ => forkJoin(_.map(s => this._register(s))))
58+
),
59+
obs.pipe(
60+
filter(_ => !_ || !_.length),
61+
map(_ => undefined as any)
8462
)
63+
)
8564
)
8665
);
8766
}

0 commit comments

Comments
 (0)