From eecccb8fd350f039900cf0b1d94876520e70888b Mon Sep 17 00:00:00 2001 From: Daniel Wiehl Date: Tue, 6 Nov 2018 15:39:17 +0100 Subject: [PATCH] refactor: extract `sci-dimension-module` into a separate NPM library MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This will be used for the upcoming micro frontend integration to allow micro frontends to use `sci-dimension-module` without having to manifest a dependency to `@scion/workbench`. Closes #44 BREAKING CHANGE: Workbench requires `@scion/dimension` as its peer-dependency which you can install as following: `npm install --save @scion/dimension`. Why not use ResizeObserver: Web Performance Working Group is working on a W3C recommendation for natively observing changes to Element’s size. The Web API draft is still work in progress and support limited to Google Chrome and Opera. See https://wicg.github.io/ResizeObserver/ --- angular.json | 38 +++++++++++++++++ package.json | 6 ++- projects/scion/dimension/karma.conf.js | 41 +++++++++++++++++++ projects/scion/dimension/ng-package.json | 8 ++++ projects/scion/dimension/package.json | 27 ++++++++++++ .../src/lib}/dimension.directive.ts | 9 +++- .../src/lib}/dimension.module.ts | 9 +++- projects/scion/dimension/src/public_api.ts | 15 +++++++ projects/scion/dimension/src/test.ts | 32 +++++++++++++++ projects/scion/dimension/tsconfig.lib.json | 32 +++++++++++++++ projects/scion/dimension/tsconfig.spec.json | 17 ++++++++ projects/scion/dimension/tslint.json | 21 ++++++++++ projects/scion/workbench/package.json | 1 + .../src/lib/ui/viewport/viewport.component.ts | 2 +- .../src/lib/ui/viewport/viewport.module.ts | 2 +- .../view-list/view-list.component.ts | 2 +- .../workbench/src/lib/workbench.module.ts | 2 +- projects/scion/workbench/src/public_api.ts | 2 - resources/site/getting-started.md | 2 +- resources/site/how-to.md | 6 ++- tsconfig.json | 6 +++ 21 files changed, 268 insertions(+), 12 deletions(-) create mode 100644 projects/scion/dimension/karma.conf.js create mode 100644 projects/scion/dimension/ng-package.json create mode 100644 projects/scion/dimension/package.json rename projects/scion/{workbench/src/lib/ui/dimension => dimension/src/lib}/dimension.directive.ts (93%) rename projects/scion/{workbench/src/lib/ui/dimension => dimension/src/lib}/dimension.module.ts (61%) create mode 100644 projects/scion/dimension/src/public_api.ts create mode 100644 projects/scion/dimension/src/test.ts create mode 100644 projects/scion/dimension/tsconfig.lib.json create mode 100644 projects/scion/dimension/tsconfig.spec.json create mode 100644 projects/scion/dimension/tslint.json diff --git a/angular.json b/angular.json index a06696399..0b272463f 100644 --- a/angular.json +++ b/angular.json @@ -80,6 +80,44 @@ } } } + }, + "@scion/dimension": { + "root": "projects/scion/dimension", + "sourceRoot": "projects/scion/dimension/src", + "projectType": "library", + "prefix": "sci", + "architect": { + "build": { + "builder": "@angular-devkit/build-ng-packagr:build", + "options": { + "tsConfig": "projects/scion/dimension/tsconfig.lib.json", + "project": "projects/scion/dimension/ng-package.json" + }, + "configurations": { + "production": {} + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "projects/scion/dimension/src/test.ts", + "tsConfig": "projects/scion/dimension/tsconfig.spec.json", + "karmaConfig": "projects/scion/dimension/karma.conf.js" + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "projects/scion/dimension/tsconfig.lib.json", + "projects/scion/dimension/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } } }, "defaultProject": "@scion/workbench" diff --git a/package.json b/package.json index 104e96bde..ec2f334bd 100644 --- a/package.json +++ b/package.json @@ -13,14 +13,16 @@ }, "scripts": { "ng": "ng", - "build": "npm run build-mouse-dispatcher && npm run build-workbench", + "build": "npm run build-mouse-dispatcher && npm run build-dimension && npm run build-workbench", "build-workbench": "ng build --prod @scion/workbench && cp -r projects/scion/workbench/src/theme/** dist/scion/workbench", "build-mouse-dispatcher": "ng build --prod @scion/mouse-dispatcher", + "build-dimension": "ng build --prod @scion/dimension", "test": "npm run test-workbench", "test-workbench": "ng test @scion/workbench --watch=false", - "lint": "npm run lint-workbench & npm run lint-mouse-dispatcher", + "lint": "npm run lint-workbench & npm run lint-mouse-dispatcher & npm run lint-dimension", "lint-workbench": "ng lint @scion/workbench", "lint-mouse-dispatcher": "ng lint @scion/mouse-dispatcher", + "lint-dimension": "ng lint @scion/dimension", "e2e": "ng e2e" }, "private": true, diff --git a/projects/scion/dimension/karma.conf.js b/projects/scion/dimension/karma.conf.js new file mode 100644 index 000000000..0f71b5b3b --- /dev/null +++ b/projects/scion/dimension/karma.conf.js @@ -0,0 +1,41 @@ +/* + * Copyright (c) 2018 Swiss Federal Railways + * + * This program and the accompanying materials are made + * available under the terms of the Eclipse Public License 2.0 + * which is available at https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + */ + +// Karma configuration file, see link for more information +// https://karma-runner.github.io/1.0/config/configuration-file.html + +module.exports = function (config) { + config.set({ + basePath: '', + frameworks: ['jasmine', '@angular-devkit/build-angular'], + plugins: [ + require('karma-jasmine'), + require('karma-chrome-launcher'), + require('karma-jasmine-html-reporter'), + require('karma-coverage-istanbul-reporter'), + require('@angular-devkit/build-angular/plugins/karma') + ], + client: { + clearContext: false // leave Jasmine Spec Runner output visible in browser + }, + coverageIstanbulReporter: { + dir: require('path').join(__dirname, '../../../coverage'), + reports: ['html', 'lcovonly'], + fixWebpackSourcePaths: true + }, + reporters: ['progress', 'kjhtml'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: true, + browsers: ['Chrome'], + singleRun: false + }); +}; diff --git a/projects/scion/dimension/ng-package.json b/projects/scion/dimension/ng-package.json new file mode 100644 index 000000000..2381a5a01 --- /dev/null +++ b/projects/scion/dimension/ng-package.json @@ -0,0 +1,8 @@ +{ + "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json", + "dest": "../../../dist/scion/dimension", + "lib": { + "entryFile": "src/public_api.ts" + }, + "whitelistedNonPeerDependencies": ["@scion"] +} diff --git a/projects/scion/dimension/package.json b/projects/scion/dimension/package.json new file mode 100644 index 000000000..3cf50ed44 --- /dev/null +++ b/projects/scion/dimension/package.json @@ -0,0 +1,27 @@ +{ + "name": "@scion/dimension", + "version": "0.0.0-beta.11", + "description": "Allows observing changes to host element's size.", + "license": "EPL-2.0", + "homepage": "https://github.com/SchweizerischeBundesbahnen/scion-workbench", + "bugs": { + "url": "https://github.com/SchweizerischeBundesbahnen/scion-workbench/issues" + }, + "author": { + "name": "SCION Workbench contributors", + "url": "https://github.com/SchweizerischeBundesbahnen/scion-workbench" + }, + "dependencies": { + }, + "peerDependencies": { + "@angular/common": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0-rc.0 || ^7.0.0", + "@angular/core": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0-rc.0 || ^7.0.0", + "rxjs": "^6.0.0" + }, + "keywords": [ + ], + "repository": { + "type": "git", + "url": "git+https://github.com/SchweizerischeBundesbahnen/scion-workbench.git" + } +} diff --git a/projects/scion/workbench/src/lib/ui/dimension/dimension.directive.ts b/projects/scion/dimension/src/lib/dimension.directive.ts similarity index 93% rename from projects/scion/workbench/src/lib/ui/dimension/dimension.directive.ts rename to projects/scion/dimension/src/lib/dimension.directive.ts index abc65a947..5013fe4cd 100644 --- a/projects/scion/workbench/src/lib/ui/dimension/dimension.directive.ts +++ b/projects/scion/dimension/src/lib/dimension.directive.ts @@ -15,7 +15,11 @@ import { takeUntil } from 'rxjs/operators'; export const NULL_DIMENSION: SciDimension = {offsetWidth: 0, offsetHeight: 0, clientWidth: 0, clientHeight: 0}; /** - * Notifies upon dimension change of the host element. + * Allows observing changes to host element's size. + * + * --- + * Usage: + *
*/ @Directive({ selector: '[sciDimension]' @@ -89,6 +93,9 @@ export class SciDimensionDirective implements OnInit, DoCheck, OnDestroy { } } +/** + * Emitted upon a host element size change. + */ export interface SciDimension { offsetWidth: number; offsetHeight: number; diff --git a/projects/scion/workbench/src/lib/ui/dimension/dimension.module.ts b/projects/scion/dimension/src/lib/dimension.module.ts similarity index 61% rename from projects/scion/workbench/src/lib/ui/dimension/dimension.module.ts rename to projects/scion/dimension/src/lib/dimension.module.ts index 5e24ee702..1f75400f9 100644 --- a/projects/scion/workbench/src/lib/ui/dimension/dimension.module.ts +++ b/projects/scion/dimension/src/lib/dimension.module.ts @@ -13,7 +13,14 @@ import { CommonModule } from '@angular/common'; import { SciDimensionDirective } from './dimension.directive'; /** - * {SciDimensionDirective} notifies upon a component dimension change. + * Provides a directive for observing changes to host element's size. + * + * Note: + * Web Performance Working Group is working on a W3C recommendation for natively observing changes to Element’s size. + * The Web API draft is still work in progress and support limited to Google Chrome and Opera. + * + * @see https://wicg.github.io/ResizeObserver/ + * @see https://caniuse.com/#feat=resizeobserver */ @NgModule({ imports: [ diff --git a/projects/scion/dimension/src/public_api.ts b/projects/scion/dimension/src/public_api.ts new file mode 100644 index 000000000..29945c477 --- /dev/null +++ b/projects/scion/dimension/src/public_api.ts @@ -0,0 +1,15 @@ +/* + * Copyright (c) 2018 Swiss Federal Railways + * + * This program and the accompanying materials are made + * available under the terms of the Eclipse Public License 2.0 + * which is available at https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + */ + +/** + * Entry point for all public APIs of this package. + */ +export { SciDimensionModule } from './lib/dimension.module'; +export * from './lib/dimension.directive'; diff --git a/projects/scion/dimension/src/test.ts b/projects/scion/dimension/src/test.ts new file mode 100644 index 000000000..13603645c --- /dev/null +++ b/projects/scion/dimension/src/test.ts @@ -0,0 +1,32 @@ +/* + * Copyright (c) 2018 Swiss Federal Railways + * + * This program and the accompanying materials are made + * available under the terms of the Eclipse Public License 2.0 + * which is available at https://www.eclipse.org/legal/epl-2.0/ + * + * SPDX-License-Identifier: EPL-2.0 + */ + +// This file is required by karma.conf.js and loads recursively all the .spec and framework files + +import 'core-js/es7/reflect'; +import 'zone.js/dist/zone'; +import 'zone.js/dist/zone-testing'; +import { getTestBed } from '@angular/core/testing'; +import { + BrowserDynamicTestingModule, + platformBrowserDynamicTesting +} from '@angular/platform-browser-dynamic/testing'; + +declare const require: any; + +// First, initialize the Angular testing environment. +getTestBed().initTestEnvironment( + BrowserDynamicTestingModule, + platformBrowserDynamicTesting() +); +// Then we find all the tests. +const context = require.context('./', true, /\.spec\.ts$/); +// And load the modules. +context.keys().map(context); diff --git a/projects/scion/dimension/tsconfig.lib.json b/projects/scion/dimension/tsconfig.lib.json new file mode 100644 index 000000000..2d5dd8664 --- /dev/null +++ b/projects/scion/dimension/tsconfig.lib.json @@ -0,0 +1,32 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "outDir": "../../../out-tsc/lib", + "target": "es2015", + "module": "es2015", + "moduleResolution": "node", + "declaration": true, + "sourceMap": true, + "inlineSources": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "importHelpers": true, + "types": [], + "lib": [ + "dom", + "es2018" + ] + }, + "angularCompilerOptions": { + "annotateForClosureCompiler": true, + "skipTemplateCodegen": true, + "strictMetadataEmit": true, + "fullTemplateTypeCheck": true, + "strictInjectionParameters": true, + "enableResourceInlining": true + }, + "exclude": [ + "src/test.ts", + "**/*.spec.ts" + ] +} diff --git a/projects/scion/dimension/tsconfig.spec.json b/projects/scion/dimension/tsconfig.spec.json new file mode 100644 index 000000000..4acf9413c --- /dev/null +++ b/projects/scion/dimension/tsconfig.spec.json @@ -0,0 +1,17 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "outDir": "../../../out-tsc/spec", + "types": [ + "jasmine", + "node" + ] + }, + "files": [ + "src/test.ts" + ], + "include": [ + "**/*.spec.ts", + "**/*.d.ts" + ] +} diff --git a/projects/scion/dimension/tslint.json b/projects/scion/dimension/tslint.json new file mode 100644 index 000000000..fdb2ef514 --- /dev/null +++ b/projects/scion/dimension/tslint.json @@ -0,0 +1,21 @@ +{ + "extends": "../../../tslint.json", + "rules": { + "directive-selector": [ + true, + "attribute", + [ + "sci" + ], + "camelCase" + ], + "component-selector": [ + true, + "element", + [ + "sci" + ], + "kebab-case" + ] + } +} diff --git a/projects/scion/workbench/package.json b/projects/scion/workbench/package.json index be739c6f9..2e40066df 100644 --- a/projects/scion/workbench/package.json +++ b/projects/scion/workbench/package.json @@ -21,6 +21,7 @@ "@angular/animations": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0-rc.0 || ^7.0.0", "@angular/forms": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0-rc.0 || ^7.0.0", "@angular/router": "^6.0.0-rc.0 || ^6.0.0 || ^7.0.0-rc.0 || ^7.0.0", + "@scion/dimension": "0.0.0-beta.11", "rxjs": "^6.0.0" }, "keywords": [ diff --git a/projects/scion/workbench/src/lib/ui/viewport/viewport.component.ts b/projects/scion/workbench/src/lib/ui/viewport/viewport.component.ts index 056b75b84..d97e5e813 100644 --- a/projects/scion/workbench/src/lib/ui/viewport/viewport.component.ts +++ b/projects/scion/workbench/src/lib/ui/viewport/viewport.component.ts @@ -9,7 +9,7 @@ */ import { Component, DoCheck, ElementRef, EventEmitter, Input, KeyValueDiffer, KeyValueDiffers, Output, ViewChild } from '@angular/core'; -import { NULL_DIMENSION, SciDimension } from '../dimension/dimension.directive'; +import { NULL_DIMENSION, SciDimension } from '@scion/dimension'; import { DomUtil } from '../../dom.util'; /** diff --git a/projects/scion/workbench/src/lib/ui/viewport/viewport.module.ts b/projects/scion/workbench/src/lib/ui/viewport/viewport.module.ts index 80e83be0f..eae1e2bfb 100644 --- a/projects/scion/workbench/src/lib/ui/viewport/viewport.module.ts +++ b/projects/scion/workbench/src/lib/ui/viewport/viewport.module.ts @@ -14,7 +14,7 @@ import { SciViewportComponent } from './viewport.component'; import { SciScrollbarComponent } from './scrollbar/scrollbar.component'; import { SciScrollableDirective } from './scrollable.directive'; import { ScrollDispatchModule } from '@angular/cdk/scrolling'; -import { SciDimensionModule } from '../dimension/dimension.module'; +import { SciDimensionModule } from '@scion/dimension'; /** * Provides a viewport with its `` as its native scrollable viewport client diff --git a/projects/scion/workbench/src/lib/view-part/view-list/view-list.component.ts b/projects/scion/workbench/src/lib/view-part/view-list/view-list.component.ts index 68517fb97..012cf7c93 100644 --- a/projects/scion/workbench/src/lib/view-part/view-list/view-list.component.ts +++ b/projects/scion/workbench/src/lib/view-part/view-list/view-list.component.ts @@ -14,7 +14,7 @@ import { OverlayRef } from '@angular/cdk/overlay'; import { animate, AnimationBuilder, style } from '@angular/animations'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { SciDimension } from '../../ui/dimension/dimension.directive'; +import { SciDimension } from '@scion/dimension'; @Component({ selector: 'wb-view-list', diff --git a/projects/scion/workbench/src/lib/workbench.module.ts b/projects/scion/workbench/src/lib/workbench.module.ts index 0ac19b2c6..988485262 100644 --- a/projects/scion/workbench/src/lib/workbench.module.ts +++ b/projects/scion/workbench/src/lib/workbench.module.ts @@ -58,7 +58,7 @@ import { ViewRegistrySynchronizer } from './routing/view-registry-synchronizer.s import { WbActivityRouteReuseProvider } from './routing/wb-activity-route-reuse-provider.service'; import { WbRouteReuseStrategy } from './routing/wb-route-reuse-strategy.service'; import { SciViewportModule } from './ui/viewport/viewport.module'; -import { SciDimensionModule } from './ui/dimension/dimension.module'; +import { SciDimensionModule } from '@scion/dimension'; import { ActivityResolver } from './routing/activity.resolver'; import { ContentHostRef } from './content-projection/content-host-ref.service'; import { WorkbenchAuxiliaryRoutesRegistrator } from './routing/workbench-auxiliary-routes-registrator.service'; diff --git a/projects/scion/workbench/src/public_api.ts b/projects/scion/workbench/src/public_api.ts index 498807480..ce31b826a 100644 --- a/projects/scion/workbench/src/public_api.ts +++ b/projects/scion/workbench/src/public_api.ts @@ -20,8 +20,6 @@ export { WorkbenchAuxiliaryRoutesRegistrator } from './lib/routing/workbench-aux export { WorkbenchComponent } from './lib/workbench.component'; export { SciViewportModule } from './lib/ui/viewport/viewport.module'; export { SciViewportComponent } from './lib/ui/viewport/viewport.component'; -export { SciDimensionModule } from './lib/ui/dimension/dimension.module'; -export { SciDimensionDirective, SciDimension } from './lib/ui/dimension/dimension.directive'; export { RemoteSiteComponent } from './lib/remote-site/remote-site.component'; export { OverlayHostRef } from './lib/overlay-host-ref.service'; export { WbActivityDirective } from './lib/activity-part/wb-activity.directive'; diff --git a/resources/site/getting-started.md b/resources/site/getting-started.md index 2729a6dc7..c7d012774 100644 --- a/resources/site/getting-started.md +++ b/resources/site/getting-started.md @@ -28,7 +28,7 @@ This 'Getting Started' tutorial explains how to install SCION workbench, configu Use npm command-line tool to install SCION Workbench and Angular CDK packages. ``` -npm install --save @scion/workbench @angular/cdk +npm install --save @scion/workbench @scion/dimension @angular/cdk ``` > SCION Workbench requires Angular CDK to be installed. By using the above commands, Angular CDK is installed as well. diff --git a/resources/site/how-to.md b/resources/site/how-to.md index 3ca7e7de8..b157c7ae4 100644 --- a/resources/site/how-to.md +++ b/resources/site/how-to.md @@ -191,7 +191,11 @@ export class PersonComponent implements WbBeforeDestroy { return this.messageBoxService.open({ content: 'Do you want to save changes?', severity: 'info', - actions: ['yes', 'no', 'cancel'] + actions: { + yes: 'Yes', + no: 'No', + cancel: 'Cancel' + } }).then(action => { switch (action) { case 'yes': diff --git a/tsconfig.json b/tsconfig.json index 29aef289b..6ae292b49 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -28,6 +28,12 @@ ], "@scion/mouse-dispatcher/*": [ "dist/scion/mouse-dispatcher/*" + ], + "@scion/dimension": [ + "dist/scion/dimension" + ], + "@scion/dimension/*": [ + "dist/scion/dimension/*" ] } }