refactor(ngrid): move most of utils to @pebula/ngrid/core

Utils that are used internally within the grid are left inside the main package however, utils that might be used by plugins have been moved to `@pebula/ngrid/core`. BREAKING CHANGE: If you've used `unrx` in your code, it is not located in `@pebula/ngrid/core` since it is not for used by "regular" users, only required for plugin authoring.
shlomiassaf · Dec 21, 2020 · 2990511 · 2990511
1 parent cad0f5b
commit 2990511
Show file tree

Hide file tree

Showing 54 changed files with 563 additions and 503 deletions.
diff --git a/apps/libs/docs-app-lib/lib/components/app-search-results/app-search-results.component.ts b/apps/libs/docs-app-lib/lib/components/app-search-results/app-search-results.component.ts
@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, Output, EventEmitter, OnChanges, SimpleChanges, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 
-import { utils } from '@pebula/ngrid';
+import { unrx } from '@pebula/ngrid/core';
 import { SearchResults, SearchResult, SearchArea, SearchService } from '../../services/search';
 import { MarkdownPagesMenuService } from '../../services/markdown-pages-menu.service';
 import { ViewLayoutObserver } from '../../services/view-layout-observer.service';
@@ -52,7 +52,7 @@ export class AppSearchResults implements OnChanges, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    utils.unrx.kill(this);
+    unrx.kill(this);
   }
 
   onResultSelected(page: SearchResult, event: MouseEvent) {
@@ -63,9 +63,9 @@ export class AppSearchResults implements OnChanges, OnDestroy {
   }
 
   doSearch(query: string) {
-    utils.unrx.kill(this, this.searchService);
+    unrx.kill(this, this.searchService);
     this.searchService.queryIndex(query)
-      .pipe(utils.unrx(this, this.searchService))
+      .pipe(unrx(this, this.searchService))
       .subscribe( results => {
         this.searchResults = results;
         if (this.searchResults) {

diff --git a/apps/libs/docs-app-lib/lib/components/content-chunk-view/content-chunk-view.component.ts b/apps/libs/docs-app-lib/lib/components/content-chunk-view/content-chunk-view.component.ts
@@ -7,7 +7,7 @@ import {
   OnDestroy,
 } from '@angular/core';
 
-import { utils } from '@pebula/ngrid';
+import { unrx } from '@pebula/ngrid/core';
 import { MarkdownDynamicComponentPortal } from '../markdown-dynamic-component-portal';
 
 export const CONTENT_CHUNKS_COMPONENTS = new InjectionToken('CONTENT_CHUNKS_COMPONENTS');
@@ -36,6 +36,6 @@ export class ContentChunkViewComponent extends MarkdownDynamicComponentPortal im
   }
 
   ngOnDestroy(): void {
-    utils.unrx.kill(this);
+    unrx.kill(this);
   }
 }
diff --git a/apps/libs/docs-app-lib/lib/components/exapmle-view/example-view.component.ts b/apps/libs/docs-app-lib/lib/components/exapmle-view/example-view.component.ts
@@ -10,7 +10,7 @@ import {
 import { trigger, transition, animate, style } from '@angular/animations'
 import { Angulartics2 } from 'angulartics2';
 
-import { utils } from '@pebula/ngrid';
+import { unrx } from '@pebula/ngrid/core';
 import { ExampleFileAsset } from '@pebula-internal/webpack-markdown-code-examples';
 
 import { MarkdownDynamicComponentPortal } from '../markdown-dynamic-component-portal';
@@ -93,6 +93,6 @@ export class ExampleViewComponent extends MarkdownDynamicComponentPortal impleme
 
   ngOnDestroy(): void {
     this.sourceCode.complete();
-    utils.unrx.kill(this);
+    unrx.kill(this);
   }
 }
diff --git a/apps/libs/docs-app-lib/lib/components/markdown-dynamic-component-portal.ts b/apps/libs/docs-app-lib/lib/components/markdown-dynamic-component-portal.ts
@@ -3,7 +3,7 @@ import { filter, mapTo } from 'rxjs/operators';
 import { ComponentRef, Inject, INJECTOR, Injector, Type } from '@angular/core';
 import { ComponentPortal, CdkPortalOutletAttachedRef } from '@angular/cdk/portal';
 import { Directionality } from '@angular/cdk/bidi';
-import { utils } from '@pebula/ngrid';
+import { unrx } from '@pebula/ngrid/core';
 import { LazyModuleStoreService } from '../services/lazy-module-store';
 
 const COMPONENT_WAIT_TIMEOUT = 1000 * 60; // 60 secs
@@ -23,7 +23,7 @@ export abstract class MarkdownDynamicComponentPortal {
   abstract getRenderTypes(selector: string): { component?: Type<any>; moduleType?: Type<any>; } | undefined;
 
   render(): void {
-    utils.unrx.kill(this, 'render');
+    unrx.kill(this, 'render');
     const { component, moduleType } = this.getRenderTypes(this.componentName) || <any>{};
     const lazyModuleStore = this._injector.get(LazyModuleStoreService, null);
     if (component) {
@@ -38,14 +38,14 @@ export abstract class MarkdownDynamicComponentPortal {
       this.selectedPortal$.next(null);
       if (lazyModuleStore) {
         const timeout = {};
-        const time$ = timer(COMPONENT_WAIT_TIMEOUT).pipe(mapTo(timeout), utils.unrx(this, 'render'));
+        const time$ = timer(COMPONENT_WAIT_TIMEOUT).pipe(mapTo(timeout), unrx(this, 'render'));
         const init$ = lazyModuleStore.moduleInit.pipe(
           filter( () => !!this.getRenderTypes(this.componentName) ),
-          utils.unrx(this, 'render')
+          unrx(this, 'render')
         );
 
         race(init$, time$)
-          .pipe(utils.unrx(this, 'render'))
+          .pipe(unrx(this, 'render'))
           .subscribe( event => {
             if (event === timeout) {
               this.logCantRender();

diff --git a/.../docs-app-lib/lib/components/markdown-page-container/markdown-page-container.component.ts b/.../docs-app-lib/lib/components/markdown-page-container/markdown-page-container.component.ts
@@ -5,7 +5,7 @@ import { ActivatedRoute } from '@angular/router';
 import { Directionality } from '@angular/cdk/bidi';
 import { MatDrawer, MatDrawerMode } from '@angular/material/sidenav';
 
-import { utils } from '@pebula/ngrid';
+import { unrx } from '@pebula/ngrid/core';
 import { TocAreaDirective } from '@pebula/apps/docs-app-lib/toc.module';
 
 import { MarkdownPagesMenuService, NavEntry } from '../../services/markdown-pages-menu.service';
@@ -59,12 +59,12 @@ export class MarkdownPageContainerComponent implements AfterViewInit, OnDestroy
       .pipe(
         debounceTime(1),
         map( urlSegments => urlSegments.map(u => u.path) ),
-        utils.unrx(this)
+        unrx(this)
       )
       .subscribe( paths => this.handleUrlUpdate(paths) );
 
     this.viewLayout.isWeb$
-      .pipe(utils.unrx(this))
+      .pipe(unrx(this))
       .subscribe( isWeb => {
         if (isWeb) {
           this.mode = 'side';
@@ -78,7 +78,7 @@ export class MarkdownPageContainerComponent implements AfterViewInit, OnDestroy
 
   ngOnDestroy(): void {
     this.menu$.complete();
-    utils.unrx.kill(this);
+    unrx.kill(this);
   }
 
   getRouterLink(path: string): any[] {

diff --git a/apps/libs/docs-app-lib/lib/components/markdown-page-viewer/markdown-page-viewer.component.ts b/apps/libs/docs-app-lib/lib/components/markdown-page-viewer/markdown-page-viewer.component.ts
@@ -21,7 +21,7 @@ import { ActivatedRoute } from '@angular/router';
 import { ComponentPortal, DomPortalOutlet } from '@angular/cdk/portal';
 import { MetaService } from '@ngx-meta/core';
 
-import { utils } from '@pebula/ngrid';
+import { unrx } from '@pebula/ngrid/core';
 import { PageFileAsset } from '@pebula-internal/webpack-markdown-pages';
 import { ExampleViewComponent } from '../exapmle-view/example-view.component';
 import { ContentChunkViewComponent } from '../content-chunk-view/content-chunk-view.component';
@@ -65,7 +65,7 @@ export class MarkdownPageViewerComponent implements OnDestroy {
               private _ngZone: NgZone,
               @Optional() container: MarkdownPageContainerComponent) {
     this.hasContainer = !!container;
-    route.data.pipe(utils.unrx(this)).subscribe( data => {
+    route.data.pipe(unrx(this)).subscribe( data => {
       if (data.documentUrl) {
         this.updateDocument(data.documentUrl);
       }
@@ -146,6 +146,6 @@ export class MarkdownPageViewerComponent implements OnDestroy {
 
   ngOnDestroy(): void {
     this._clearLiveExamples();
-    utils.unrx.kill(this);
+    unrx.kill(this);
   }
 }
diff --git a/apps/ngrid-docs-app/content/extending-ngrid/index.md b/apps/ngrid-docs-app/content/extending-ngrid/index.md
@@ -228,7 +228,6 @@ Because this is a simple example, we will use the same class for the plugin and
 
 ```typescript
 @Directive({ selector: 'pbl-ngrid[clipboard]', exportAs: 'pblNgridClipboard' })
-@UnRx()
 export class PblNgridClipboardPlugin implements OnDestroy {
 
   static create(grid: PblNgridComponent, injector: Injector): PblNgridClipboardPlugin {
@@ -240,7 +239,6 @@ export class PblNgridClipboardPlugin implements OnDestroy {
   }
 
   ngOnDestroy(): void {
-
   }
 }
 
@@ -271,14 +269,19 @@ In the constructor we use the injector to get the `Clipboard` service, which we
 Next, we call the `init()` method:
 
 ```typescript
+
+  ngOnDestroy(): void {
+    unrx.kill(this);
+  }
+
   private init(): void {
     this._removePlugin = this.pluginCtrl.setPlugin(PLUGIN_KEY, this);
 
     this.pluginCtrl.ensurePlugin('targetEvents');
 
     const targetEvents = this.pluginCtrl.getPlugin('targetEvents');
     targetEvents.keyDown
-      .pipe(UnRx(this))
+      .pipe(unrx(this))
       .subscribe( event => this.checkCopy(event) );
   }
 ```
@@ -295,6 +298,7 @@ Last thing to remember is to un-register the plugin un destruction:
 
 ```typescript
   ngOnDestroy(): void {
+    unrx.kill(this);
     this._removePlugin(this.grid);
   }
 ```

diff --git a/libs/ngrid-material/cell-tooltip/src/lib/cell-tooltip.directive.ts b/libs/ngrid-material/cell-tooltip/src/lib/cell-tooltip.directive.ts
@@ -16,7 +16,8 @@ import { ScrollDispatcher } from '@angular/cdk/scrolling';
 import { Platform} from '@angular/cdk/platform';
 import { TooltipPosition, MatTooltipDefaultOptions, MatTooltip, MAT_TOOLTIP_SCROLL_STRATEGY, MAT_TOOLTIP_DEFAULT_OPTIONS } from '@angular/material/tooltip';
 
-import { PblNgridComponent, PblNgridPluginController, PblNgridConfigService, utils } from '@pebula/ngrid';
+import { unrx } from '@pebula/ngrid/core';
+import { PblNgridComponent, PblNgridPluginController, PblNgridConfigService } from '@pebula/ngrid';
 import { PblNgridCellEvent } from '@pebula/ngrid/target-events';
 
 declare module '@pebula/ngrid/lib/grid/services/config' {
@@ -107,7 +108,7 @@ export class PblNgridCellTooltipDirective<T> implements CellTooltipOptions, OnDe
     ];
 
     configService.onUpdate('cellTooltip')
-      .pipe(utils.unrx(this))
+      .pipe(unrx(this))
       .subscribe( cfg => this.lastConfig = cfg.curr );
 
     pluginCtrl.onInit().subscribe( () => this.init(pluginCtrl) );
@@ -120,19 +121,19 @@ export class PblNgridCellTooltipDirective<T> implements CellTooltipOptions, OnDe
   ngOnDestroy(): void {
     this._removePlugin(this.table);
     this.killTooltip();
-    utils.unrx.kill(this);
+    unrx.kill(this);
   }
 
   private init(pluginCtrl: PblNgridPluginController): void {
     // Depends on target-events plugin
     // if it's not set, create it.
     const targetEventsPlugin = pluginCtrl.getPlugin('targetEvents') || pluginCtrl.createPlugin('targetEvents');
     targetEventsPlugin.cellEnter
-      .pipe(utils.unrx(this))
+      .pipe(unrx(this))
       .subscribe( event => this.cellEnter(event) );
 
     targetEventsPlugin.cellLeave
-      .pipe(utils.unrx(this))
+      .pipe(unrx(this))
       .subscribe( event => this.cellLeave(event) );
   }
 

diff --git a/libs/ngrid-material/paginator/src/lib/table-paginator.component.ts b/libs/ngrid-material/paginator/src/lib/table-paginator.component.ts
@@ -10,8 +10,8 @@ import {
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { MatPaginatorIntl } from '@angular/material/paginator';
 
-import { PblPagingPaginator, PblPaginatorChangeEvent } from '@pebula/ngrid/core';
-import { PblNgridComponent, utils } from '@pebula/ngrid';
+import { unrx } from '@pebula/ngrid/core';
+import { PblNgridComponent, PblPaginator, PblPaginatorChangeEvent } from '@pebula/ngrid';
 
 const DEFAULT_PAGE_SIZE_OPTIONS = [5, 10, 20, 50, 100];
 
@@ -36,19 +36,19 @@ export class PblPaginatorComponent implements OnDestroy {
     this.updatePageSizes();
   }
 
-  @Input() get paginator(): PblPagingPaginator { return this._paginator; }
-  set paginator(value: PblPagingPaginator) {
+  @Input() get paginator(): PblPaginator<number> { return this._paginator; }
+  set paginator(value: PblPaginator<number>) {
     if (this._paginator === value) {
       return;
     }
     if (this._paginator) {
-      utils.unrx.kill(this, this._paginator);
+      unrx.kill(this, this._paginator);
     }
     this._paginator = value;
     if (value) {
       // pagination.onChange is BehaviorSubject so handlePageChange will trigger
       value.onChange
-        .pipe(utils.unrx(this, value))
+        .pipe(unrx(this, value))
         .subscribe( event => this.handlePageChange(event) );
       this.updatePageSizes();
     }
@@ -63,7 +63,7 @@ export class PblPaginatorComponent implements OnDestroy {
   set hideRangeSelect(value: boolean) { this._hideRangeSelect = coerceBooleanProperty(value); }
 
   private _pageSizeOptions: number[];
-  private _paginator: PblPagingPaginator;
+  private _paginator: PblPaginator<number>;
   private _hidePageSize = false;
   private _hideRangeSelect = false;
 
@@ -74,12 +74,12 @@ export class PblPaginatorComponent implements OnDestroy {
       this.table = table;
     }
     _intl.changes
-      .pipe(utils.unrx(this))
+      .pipe(unrx(this))
       .subscribe(() => this.cdr.markForCheck());
   }
 
   ngOnDestroy(): void {
-    utils.unrx.kill(this);
+    unrx.kill(this);
   }
 
   private updatePageSizes(): void {

diff --git a/libs/ngrid-material/selection-column/src/lib/table-checkbox.component.ts b/libs/ngrid-material/selection-column/src/lib/table-checkbox.component.ts
@@ -2,13 +2,13 @@ import { Component, Input, ViewChild, ViewEncapsulation, AfterViewInit, OnDestro
 import { SelectionModel } from '@angular/cdk/collections';
 import { ThemePalette } from '@angular/material/core';
 
+import { unrx } from '@pebula/ngrid/core';
 import {
   PblNgridComponent,
   PblNgridHeaderCellDefDirective,
   PblNgridCellDefDirective,
   PblNgridFooterCellDefDirective,
   PblNgridPluginController,
-  utils,
 } from '@pebula/ngrid';
 
 const ALWAYS_FALSE_FN = () => false;
@@ -93,7 +93,7 @@ export class PblNgridCheckboxComponent implements AfterViewInit, OnDestroy {
   constructor(public table: PblNgridComponent<any>, private cdr: ChangeDetectorRef) {
     const pluginCtrl = PblNgridPluginController.find(table);
     pluginCtrl.events
-      .pipe(utils.unrx(this))
+      .pipe(unrx(this))
       .subscribe( e => {
         if (e.kind === 'onDataSource') {
           this.selection = e.curr.selection;
@@ -114,7 +114,7 @@ export class PblNgridCheckboxComponent implements AfterViewInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    utils.unrx.kill(this);
+    unrx.kill(this);
   }
 
   masterToggle(): void {
@@ -137,15 +137,15 @@ export class PblNgridCheckboxComponent implements AfterViewInit, OnDestroy {
   }
 
   private setupSelection(): void {
-    utils.unrx.kill(this, this.table);
+    unrx.kill(this, this.table);
     if (this._selection) {
       this.length = this.selection.selected.length;
       this.selection.changed
-        .pipe(utils.unrx(this, this.table))
+        .pipe(unrx(this, this.table))
         .subscribe(() => this.handleSelectionChanged());
       const changeSource = this.bulkSelectMode === 'view' ? this.table.ds.onRenderedDataChanged : this.table.ds.onSourceChanged;
       changeSource
-        .pipe(utils.unrx(this, this.table))
+        .pipe(unrx(this, this.table))
         .subscribe(() => this.handleSelectionChanged());
     } else {
       this.length = 0;