From 8da651584bc8d9401de834c24ff5ad24fb14a2ac Mon Sep 17 00:00:00 2001 From: christophercr Date: Fri, 22 Mar 2019 13:35:55 +0100 Subject: [PATCH] feat(stark-demo): adapt polyfills (app and tests) according to the new structure in core-js 3.0.0 --- docs/POLYFILLS.md | 18 +++++++++++ package-lock.json | 30 +++++++++++++++--- package.json | 1 + packages/stark-core/base.spec.ts | 5 ++- packages/stark-core/tsconfig-build.json | 6 ++-- packages/stark-rbac/base.spec.ts | 6 ++-- packages/stark-rbac/tsconfig-build.json | 12 ++++--- packages/stark-ui/base.spec.ts | 6 ++-- packages/stark-ui/tsconfig-build.json | 16 +++++----- showcase/base.spec.ts | 6 ++-- showcase/package-lock.json | 6 ++-- .../getting-started/starter-structure.ts | 31 +++++++++++++++++++ showcase/src/polyfills.browser.ts | 10 +++--- showcase/tsconfig.json | 4 ++- starter/base.spec.ts | 6 ++-- starter/src/polyfills.browser.ts | 14 +++++---- starter/tsconfig.json | 4 ++- 17 files changed, 125 insertions(+), 56 deletions(-) diff --git a/docs/POLYFILLS.md b/docs/POLYFILLS.md index a7a2922356..b6f8b076fb 100644 --- a/docs/POLYFILLS.md +++ b/docs/POLYFILLS.md @@ -39,8 +39,11 @@ The following polyfills are suitable for most of the cases, especially when targ * IE11 requires all of the following polyfills. * * Polyfill: https://github.com/zloirock/core-js + * Add the specific lines below corresponding to the version of core-js you want to use: 2.x or 3.x */ /* tslint:disable:no-import-side-effect */ + +/******************** core-js 2.x ********************/ import "core-js/es6"; import "core-js/es7/reflect"; import "core-js/es7/string"; @@ -51,6 +54,21 @@ import "core-js/stage/4"; * More info: https://github.com/angular/angular/issues/27887 */ import "core-js/modules/web.dom.iterable"; +/*****************************************************/ + +/******************** core-js 3.x ******************** + * Make sure you add the 'paths' workaround to the tsconfig.json to support core-js 3.x with Angular CLI 7.x + * See: https://github.com/angular/angular-cli/issues/13954#issuecomment-475452588 + */ +import "core-js/es"; +import "core-js/proposals/reflect-metadata"; +/** + * IE11 does not support iteration on certain DOM collections (NodeList). + * This polyfill is specifically needed for the animation on mat-menu used in stark-table. + * More info: https://github.com/angular/angular/issues/27887 + */ +import "core-js/modules/web.dom-collections.iterator"; +/*****************************************************/ /** * IE11 and Edge require this to support Server-sent events diff --git a/package-lock.json b/package-lock.json index 96666b53d0..5a85268e88 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1346,6 +1346,12 @@ "regenerator-runtime": "^0.10.5" }, "dependencies": { + "core-js": { + "version": "2.6.5", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz", + "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==", + "dev": true + }, "regenerator-runtime": { "version": "0.10.5", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz", @@ -1362,6 +1368,14 @@ "requires": { "core-js": "^2.4.0", "regenerator-runtime": "^0.11.0" + }, + "dependencies": { + "core-js": { + "version": "2.6.5", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz", + "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==", + "dev": true + } } }, "bail": { @@ -3133,9 +3147,9 @@ "dev": true }, "core-js": { - "version": "2.6.5", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz", - "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.0.1.tgz", + "integrity": "sha512-sco40rF+2KlE0ROMvydjkrVMMG1vYilP2ALoRXcYR4obqbYIuV3Bg+51GEDW+HF8n7NRA+iaA4qD0nD9lo9mew==", "dev": true }, "core-util-is": { @@ -7967,6 +7981,12 @@ "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=", "dev": true }, + "core-js": { + "version": "2.6.5", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz", + "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==", + "dev": true + }, "external-editor": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz", @@ -9418,8 +9438,8 @@ "version": "2.6.0", "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.6.0.tgz", "integrity": "sha512-aGQwspEF8oPKvg37u3p7h0cYNwmJR1sCBMZGZ5b9qy8HGtETknqjzcxrDRrcAnJNXN18lBH4Q9vZYth/p4n8jQ==", - "dev": true, - "requires": { + "dev": true, + "requires": { "estree-walker": "^0.6.0", "micromatch": "^3.1.10" } diff --git a/package.json b/package.json index e21e2e0d24..b2369c8b97 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "codelyzer": "^4.5.0", "commitizen": "^3.0.5", "conventional-changelog-cli": "^2.0.11", + "core-js": "^3.0.0", "cz-customizable": "^6.0.0", "hammerjs": "^2.0.8", "husky": "^1.3.1", diff --git a/packages/stark-core/base.spec.ts b/packages/stark-core/base.spec.ts index 50ed6a96c7..fa2bf0cefb 100644 --- a/packages/stark-core/base.spec.ts +++ b/packages/stark-core/base.spec.ts @@ -1,8 +1,7 @@ "use strict"; -import "core-js/es6"; -import "core-js/es7/reflect"; -import "core-js/stage/4"; +import "core-js/es"; +import "core-js/proposals/reflect-metadata"; /* tslint:disable:no-import-side-effect */ // FIXME: change when https://github.com/monounity/karma-typescript/issues/320 is resolved diff --git a/packages/stark-core/tsconfig-build.json b/packages/stark-core/tsconfig-build.json index 373a0096fc..fa15161e8f 100644 --- a/packages/stark-core/tsconfig-build.json +++ b/packages/stark-core/tsconfig-build.json @@ -9,9 +9,11 @@ "@angular/common": ["../../node_modules/@angular/common"], "@angular/core": ["../../node_modules/@angular/core"], "@angular/router": ["../../node_modules/@angular/router"], - "rxjs/*": ["../../node_modules/rxjs/*"], + "@nationalbankbelgium/stark-core": ["."], + "core-js/*": ["../../node_modules/core-js/*"], "environments/environment": ["./src/common/environment"], - "@nationalbankbelgium/stark-core": ["."] + "rxjs/*": ["../../node_modules/rxjs/*"], + "zone.js/*": ["../../node_modules/zone.js/*"] }, "outDir": "../../dist/packages/stark-core" }, diff --git a/packages/stark-rbac/base.spec.ts b/packages/stark-rbac/base.spec.ts index 0c240e50b6..b7f72b8368 100644 --- a/packages/stark-rbac/base.spec.ts +++ b/packages/stark-rbac/base.spec.ts @@ -1,9 +1,7 @@ "use strict"; -import "core-js/es6"; -import "core-js/es7/reflect"; -import "core-js/es7/string"; -import "core-js/stage/4"; +import "core-js/es"; +import "core-js/proposals/reflect-metadata"; // IE polyfills diff --git a/packages/stark-rbac/tsconfig-build.json b/packages/stark-rbac/tsconfig-build.json index 0712456ee4..cb7bfe3399 100644 --- a/packages/stark-rbac/tsconfig-build.json +++ b/packages/stark-rbac/tsconfig-build.json @@ -11,19 +11,21 @@ "@angular/common": ["../../node_modules/@angular/common"], "@angular/core": ["../../node_modules/@angular/core"], "@angular/router": ["../../node_modules/@angular/router"], + "@nationalbankbelgium/stark-core": ["../../dist/packages/stark-core"], + "@nationalbankbelgium/stark-rbac": ["."], "@ng-idle/*": ["../stark-core/node_modules/@ng-idle/*"], "@ngrx/*": ["../stark-core/node_modules/@ngrx/*"], "@ngx-translate/*": ["../stark-core/node_modules/@ngx-translate/*"], "@uirouter/*": ["../stark-core/node_modules/@uirouter/*"], "cerialize": ["../stark-core/node_modules/cerialize"], "class-validator": ["../stark-core/node_modules/class-validator"], - "moment": ["../stark-core/node_modules/moment"], + "core-js/*": ["../../node_modules/core-js/*"], + "environments/environment": ["../../dist/packages/stark-core/src/common/environment"], "ibantools": ["../stark-core/node_modules/ibantools"], - "lodash": ["../stark-core/node_modules/lodash"], + "lodash-es/*": ["../stark-core/node_modules/lodash-es/*"], + "moment": ["../stark-core/node_modules/moment"], "rxjs/*": ["../../node_modules/rxjs/*"], - "environments/environment": ["../../dist/packages/stark-core/src/common/environment"], - "@nationalbankbelgium/stark-core": ["../../dist/packages/stark-core"], - "@nationalbankbelgium/stark-rbac": ["."] + "zone.js/*": ["../../node_modules/zone.js/*"] }, "outDir": "../../dist/packages/stark-rbac" }, diff --git a/packages/stark-ui/base.spec.ts b/packages/stark-ui/base.spec.ts index 0c240e50b6..b7f72b8368 100644 --- a/packages/stark-ui/base.spec.ts +++ b/packages/stark-ui/base.spec.ts @@ -1,9 +1,7 @@ "use strict"; -import "core-js/es6"; -import "core-js/es7/reflect"; -import "core-js/es7/string"; -import "core-js/stage/4"; +import "core-js/es"; +import "core-js/proposals/reflect-metadata"; // IE polyfills diff --git a/packages/stark-ui/tsconfig-build.json b/packages/stark-ui/tsconfig-build.json index f492df12ec..7e31b435f9 100644 --- a/packages/stark-ui/tsconfig-build.json +++ b/packages/stark-ui/tsconfig-build.json @@ -3,11 +3,7 @@ "compilerOptions": { "baseUrl": ".", "rootDir": ".", - "typeRoots": [ - "./node_modules/@types", - "../stark-build/typings", - "./typings" - ], + "typeRoots": ["./node_modules/@types", "../stark-build/typings", "./typings"], "lib": ["dom", "dom.iterable", "es2017"], "paths": { "@angularclass/hmr": ["../stark-core/node_modules/@angularclass/hmr"], @@ -17,19 +13,21 @@ "@angular/core": ["../../node_modules/@angular/core"], "@angular/material": ["../../node_modules/@angular/material"], "@angular/router": ["../../node_modules/@angular/router"], + "@nationalbankbelgium/stark-core": ["../../dist/packages/stark-core"], + "@nationalbankbelgium/stark-ui": ["."], "@ng-idle/*": ["../stark-core/node_modules/@ng-idle/*"], "@ngrx/*": ["../stark-core/node_modules/@ngrx/*"], "@ngx-translate/*": ["../stark-core/node_modules/@ngx-translate/*"], "@uirouter/*": ["../stark-core/node_modules/@uirouter/*"], "cerialize": ["../stark-core/node_modules/cerialize"], "class-validator": ["../stark-core/node_modules/class-validator"], - "moment": ["../stark-core/node_modules/moment"], + "core-js/*": ["../../node_modules/core-js/*"], + "environments/environment": ["../../dist/packages/stark-core/src/common/environment"], "ibantools": ["../stark-core/node_modules/ibantools"], "lodash-es/*": ["../stark-core/node_modules/lodash-es/*"], + "moment": ["../stark-core/node_modules/moment"], "rxjs/*": ["../../node_modules/rxjs/*"], - "environments/environment": ["../../dist/packages/stark-core/src/common/environment"], - "@nationalbankbelgium/stark-core": ["../../dist/packages/stark-core"], - "@nationalbankbelgium/stark-ui": ["."] + "zone.js/*": ["../../node_modules/zone.js/*"] }, "outDir": "../../dist/packages/stark-ui" }, diff --git a/showcase/base.spec.ts b/showcase/base.spec.ts index 2ef8db4508..e61b3e1fc6 100644 --- a/showcase/base.spec.ts +++ b/showcase/base.spec.ts @@ -1,9 +1,7 @@ "use strict"; -import "core-js/es6"; -import "core-js/es7/reflect"; -import "core-js/es7/string"; -import "core-js/stage/4"; +import "core-js/es"; +import "core-js/proposals/reflect-metadata"; // IE polyfills diff --git a/showcase/package-lock.json b/showcase/package-lock.json index 105d6759c5..3b2bf191be 100644 --- a/showcase/package-lock.json +++ b/showcase/package-lock.json @@ -4913,9 +4913,9 @@ } }, "core-js": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.0.0.tgz", - "integrity": "sha512-WBmxlgH2122EzEJ6GH8o9L/FeoUKxxxZ6q6VUxoTlsE4EvbTWKJb447eyVxTEuq0LpXjlq/kCB2qgBvsYRkLvQ==" + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.0.1.tgz", + "integrity": "sha512-sco40rF+2KlE0ROMvydjkrVMMG1vYilP2ALoRXcYR4obqbYIuV3Bg+51GEDW+HF8n7NRA+iaA4qD0nD9lo9mew==" }, "core-js-compat": { "version": "3.0.0", diff --git a/showcase/src/app/welcome/pages/getting-started/starter-structure.ts b/showcase/src/app/welcome/pages/getting-started/starter-structure.ts index 733fc88730..c78df673ab 100644 --- a/showcase/src/app/welcome/pages/getting-started/starter-structure.ts +++ b/showcase/src/app/welcome/pages/getting-started/starter-structure.ts @@ -183,6 +183,7 @@ export const starkStylesCss = ` @import "~@nationalbankbelgium/stark-ui/src/modules/session-ui/pages/login/login-page.component"; @import "~@nationalbankbelgium/stark-ui/src/modules/session-ui/pages/preloading/preloading-page.component"; `; + export const polyfillsBrowsersContent = ` /** * This file includes polyfills needed by Angular and is loaded before the app. @@ -199,21 +200,48 @@ export const polyfillsBrowsersContent = ` * * Learn more in https://angular.io/guide/browser-support */ + /*************************************************************************************************** * BROWSER POLYFILLS * * See: https://angular.io/guide/browser-support#optional-browser-features-to-polyfill */ + /** * IE11 requires all of the following polyfills. * * Polyfill: https://github.com/zloirock/core-js + * Add the specific lines below corresponding to the version of core-js you want to use: 2.x or 3.x */ /* tslint:disable:no-import-side-effect */ + +/******************** core-js 2.x ********************/ import "core-js/es6"; import "core-js/es7/reflect"; import "core-js/es7/string"; import "core-js/stage/4"; +/** + * IE11 does not support iteration on certain DOM collections (NodeList). + * This polyfill is specifically needed for the animation on mat-menu used in stark-table. + * More info: https://github.com/angular/angular/issues/27887 + */ +import "core-js/modules/web.dom.iterable"; +/*****************************************************/ + +/******************** core-js 3.x ******************** + * Make sure you add the 'paths' workaround to the tsconfig.json to support core-js 3.x with Angular CLI 7.x + * See: https://github.com/angular/angular-cli/issues/13954#issuecomment-475452588 + */ +import "core-js/es"; +import "core-js/proposals/reflect-metadata"; +/** + * IE11 does not support iteration on certain DOM collections (NodeList). + * This polyfill is specifically needed for the animation on mat-menu used in stark-table. + * More info: https://github.com/angular/angular/issues/27887 + */ +import "core-js/modules/web.dom-collections.iterator"; +/*****************************************************/ + /** * IE11 and Edge require this to support Server-sent events * https://caniuse.com/#feat=eventsource @@ -221,6 +249,7 @@ import "core-js/stage/4"; * Polyfill: https://github.com/Yaffle/EventSource */ import "event-source-polyfill"; + /** * IE11 requires Element.classList for NgClass support on SVG elements * See: https://caniuse.com/#feat=classlist @@ -230,6 +259,7 @@ import "event-source-polyfill"; * Polyfill: https://github.com/eligrey/classList.js */ import "eligrey-classlist-js-polyfill"; + /** * Web Animations polyfill is no longer needed for standard animation support as of Angular 6 * IMPORTANT: It is only needed in case you use the AnimationBuilder from '@angular/animations' in the application @@ -239,6 +269,7 @@ import "eligrey-classlist-js-polyfill"; * Polyfill: https://github.com/web-animations/web-animations-js */ // import "web-animations-js"; + /*************************************************************************************************** * Zone JS is required by Angular itself. */ diff --git a/showcase/src/polyfills.browser.ts b/showcase/src/polyfills.browser.ts index 6b8de09389..f3a22b6478 100755 --- a/showcase/src/polyfills.browser.ts +++ b/showcase/src/polyfills.browser.ts @@ -26,16 +26,16 @@ * Polyfill: https://github.com/zloirock/core-js */ /* tslint:disable:no-import-side-effect */ -import "core-js/es6"; -import "core-js/es7/reflect"; -import "core-js/es7/string"; -import "core-js/stage/4"; +// FIXME: remove the workaround added to the tsconfig.json to support core-js 3.0.0 with Angular CLI 7.x (https://github.com/angular/angular-cli/issues/13954#issuecomment-475452588) +// it will be fixed most likely in Angular 8 +import "core-js/es"; +import "core-js/proposals/reflect-metadata"; /** * IE11 does not support iteration on certain DOM collections (NodeList). * This polyfill is specifically needed for the animation on mat-menu used in stark-table. * More info: https://github.com/angular/angular/issues/27887 */ -import "core-js/modules/web.dom.iterable"; +import "core-js/modules/web.dom-collections.iterator"; /** * IE11 and Edge require this to support Server-sent events diff --git a/showcase/tsconfig.json b/showcase/tsconfig.json index 8743281ade..25bb2b8385 100644 --- a/showcase/tsconfig.json +++ b/showcase/tsconfig.json @@ -12,7 +12,9 @@ ], "paths": { "@angular/*": ["../node_modules/@angular/*"], - "@nationalbankbelgium/*": ["../node_modules/@nationalbankbelgium/*"] + "@nationalbankbelgium/*": ["../node_modules/@nationalbankbelgium/*"], + "core-js/es7/reflect": ["../node_modules/core-js/proposals/reflect-metadata"], + "core-js/es6/*": ["../node_modules/core-js/es/*"] } }, "exclude": ["node_modules", "dist", "src/assets"] diff --git a/starter/base.spec.ts b/starter/base.spec.ts index 2ef8db4508..e61b3e1fc6 100644 --- a/starter/base.spec.ts +++ b/starter/base.spec.ts @@ -1,9 +1,7 @@ "use strict"; -import "core-js/es6"; -import "core-js/es7/reflect"; -import "core-js/es7/string"; -import "core-js/stage/4"; +import "core-js/es"; +import "core-js/proposals/reflect-metadata"; // IE polyfills diff --git a/starter/src/polyfills.browser.ts b/starter/src/polyfills.browser.ts index 5b22bd0e9e..f3a22b6478 100755 --- a/starter/src/polyfills.browser.ts +++ b/starter/src/polyfills.browser.ts @@ -26,16 +26,17 @@ * Polyfill: https://github.com/zloirock/core-js */ /* tslint:disable:no-import-side-effect */ -import "core-js/es6"; -import "core-js/es7/reflect"; -import "core-js/es7/string"; -import "core-js/stage/4"; +// FIXME: remove the workaround added to the tsconfig.json to support core-js 3.0.0 with Angular CLI 7.x (https://github.com/angular/angular-cli/issues/13954#issuecomment-475452588) +// it will be fixed most likely in Angular 8 +import "core-js/es"; +import "core-js/proposals/reflect-metadata"; /** * IE11 does not support iteration on certain DOM collections (NodeList). * This polyfill is specifically needed for the animation on mat-menu used in stark-table. * More info: https://github.com/angular/angular/issues/27887 */ -import "core-js/modules/web.dom.iterable"; +import "core-js/modules/web.dom-collections.iterator"; + /** * IE11 and Edge require this to support Server-sent events * https://caniuse.com/#feat=eventsource @@ -43,6 +44,7 @@ import "core-js/modules/web.dom.iterable"; * Polyfill: https://github.com/Yaffle/EventSource */ import "event-source-polyfill"; + /** * IE11 requires Element.classList for NgClass support on SVG elements * See: https://caniuse.com/#feat=classlist @@ -52,7 +54,6 @@ import "event-source-polyfill"; * Polyfill: https://github.com/eligrey/classList.js */ import "eligrey-classlist-js-polyfill"; -import "zone.js/dist/zone"; /** * Web Animations polyfill is no longer needed for standard animation support as of Angular 6 @@ -69,6 +70,7 @@ import "zone.js/dist/zone"; */ // workaround for IE11 before loading zone.ks (see: https://github.com/angular/zone.js/issues/933) (window as any).__Zone_enable_cross_context_check = true; +import "zone.js/dist/zone"; // async stack traces with zone.js included for dev // import 'zone.js/dist/long-stack-trace-zone' /* tslint:enable */ diff --git a/starter/tsconfig.json b/starter/tsconfig.json index 8743281ade..25bb2b8385 100644 --- a/starter/tsconfig.json +++ b/starter/tsconfig.json @@ -12,7 +12,9 @@ ], "paths": { "@angular/*": ["../node_modules/@angular/*"], - "@nationalbankbelgium/*": ["../node_modules/@nationalbankbelgium/*"] + "@nationalbankbelgium/*": ["../node_modules/@nationalbankbelgium/*"], + "core-js/es7/reflect": ["../node_modules/core-js/proposals/reflect-metadata"], + "core-js/es6/*": ["../node_modules/core-js/es/*"] } }, "exclude": ["node_modules", "dist", "src/assets"]