refactor. Use a separate ContentChildren for each property (collection option)

+ update making bundle in demos

Author: GoodDayForSurf

apps/demos/configs/Angular/config.bundle.js

@@ -41,6 +41,7 @@ const bundleConfig = {
       'devextreme-angular/common/core/*',
       'devextreme-angular/common/export/*',
       'devextreme-angular/core/*',
+      'devextreme-angular/tokens/*',
       'devexpress-gantt',
       'devexpress-diagram',
       'rxjs/*',

apps/demos/configs/Angular/config.js

@@ -195,6 +195,7 @@ window.config = {
     'devextreme-angular/common/grids': 'bundles:devextreme-angular/devextreme-angular-common-grids.umd.js',
     'devextreme-angular/common': 'bundles:devextreme-angular/devextreme-angular-common.umd.js',
     'devextreme-angular/http': 'bundles:devextreme-angular/devextreme-angular-http.umd.js',
+    'devextreme-angular/tokens': 'bundles:devextreme-angular/devextreme-angular-tokens.umd.js',
     ...componentNames.reduce((acc, name) => {
       acc[`devextreme-angular/ui/${name}`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}.umd.js`;
       acc[`devextreme-angular/ui/${name}/nested`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}-nested.umd.js`;

apps/demos/rollup.devextreme-angular.umd.config.mjs

@@ -16,6 +16,7 @@ const inputs = {
     'devextreme-angular': `${baseDir}devextreme-angular.mjs`,
     'devextreme-angular-core': `${baseDir}devextreme-angular-core.mjs`,
     'devextreme-angular-http': `${baseDir}devextreme-angular-http.mjs`,
+    'devextreme-angular-tokens': `${baseDir}devextreme-angular-tokens.mjs`,
     ...fileNames.reduce((acc, name) => {
         acc[name] = `${baseDir}${name}.mjs`;
 

apps/demos/utils/bundle/index.js

@@ -146,6 +146,7 @@ const prepareConfigs = (framework)=> {
       additionPaths = {
         'devextreme-angular': `${bundlesRoot}/devextreme-angular.umd.js`,
         'devextreme-angular/core': `${bundlesRoot}/devextreme-angular-core.umd.js`,
+        'devextreme-angular/tokens': `${bundlesRoot}/devextreme-angular-tokens.umd.js`,
         ...componentNames.reduce((items, item) => {
           // eslint-disable-next-line no-param-reassign
           items[`devextreme-angular/ui/${item.replace('-nested', '/nested')}`] = `${bundlesRoot}/devextreme-angular-ui-${item}.umd.js`;

packages/devextreme-angular/src/core/nested-option.ts

@@ -1,5 +1,5 @@
 import {
-  Component, QueryList, ElementRef, Renderer2, EventEmitter, InjectionToken, Directive,
+  Component, QueryList, ElementRef, Renderer2, EventEmitter, Directive,
 } from '@angular/core';
 
 import render from 'devextreme/core/renderer';
@@ -22,43 +22,12 @@ export interface INestedOptionContainer {
 
 export type IOptionPathGetter = () => string;
 
-export const СOLLECTION_NESTED_OPTION_TOKEN = new InjectionToken<string>('collection-nested-option-token');
-
 @Directive()
 export abstract class DxBaseClass {
-  private _activatedProps: string[] = [];
-
   private _activatedQueries = {};
 
   protected abstract _setOption(name: string, value: any): void;
 
-  protected _setCollectionOptionChildren(value: QueryList<{ propertyName: string; component: CollectionNestedOption }>) {
-    const groupedItems: Record<string, CollectionNestedOption[]> = {};
-
-    value.forEach(({ propertyName, component }) => {
-      groupedItems[propertyName] = groupedItems[propertyName] || [];
-      groupedItems[propertyName].push(component);
-    });
-
-    const notEmptyProps: string[] = [];
-
-    Object.entries(groupedItems).forEach(([propertyName, items]) => {
-      const q = new QueryList<CollectionNestedOption>();
-      q.reset(items);
-
-      this.setChildren(propertyName, q);
-      notEmptyProps.push(propertyName);
-    });
-
-    this._activatedProps.forEach((propertyName) => {
-      if (!notEmptyProps.includes(propertyName)) {
-        this.setChildren(propertyName, new QueryList<CollectionNestedOption>());
-      }
-    });
-
-    this._activatedProps = notEmptyProps;
-  }
-
   setChildren(propertyName: string, items: QueryList<CollectionNestedOption>) {
     if (items.length) {
       this._activatedQueries[propertyName] = true;

packages/devextreme-angular/src/tokens/index.ts

@@ -0,0 +1,43 @@
+import { InjectionToken } from '@angular/core';
+
+export const PROPERTY_TOKEN_items = new InjectionToken<string>('property-token-items');
+export const PROPERTY_TOKEN_buttons = new InjectionToken<string>('property-token-buttons');
+export const PROPERTY_TOKEN_toolbarItems = new InjectionToken<string>('property-token-toolbarItems');
+export const PROPERTY_TOKEN_validationRules = new InjectionToken<string>('property-token-validationRules');
+export const PROPERTY_TOKEN_changes = new InjectionToken<string>('property-token-changes');
+export const PROPERTY_TOKEN_columns = new InjectionToken<string>('property-token-columns');
+export const PROPERTY_TOKEN_customOperations = new InjectionToken<string>('property-token-customOperations');
+export const PROPERTY_TOKEN_fields = new InjectionToken<string>('property-token-fields');
+export const PROPERTY_TOKEN_tabs = new InjectionToken<string>('property-token-tabs');
+export const PROPERTY_TOKEN_annotations = new InjectionToken<string>('property-token-annotations');
+export const PROPERTY_TOKEN_breaks = new InjectionToken<string>('property-token-breaks');
+export const PROPERTY_TOKEN_constantLines = new InjectionToken<string>('property-token-constantLines');
+export const PROPERTY_TOKEN_panes = new InjectionToken<string>('property-token-panes');
+export const PROPERTY_TOKEN_series = new InjectionToken<string>('property-token-series');
+export const PROPERTY_TOKEN_strips = new InjectionToken<string>('property-token-strips');
+export const PROPERTY_TOKEN_valueAxis = new InjectionToken<string>('property-token-valueAxis');
+export const PROPERTY_TOKEN_alerts = new InjectionToken<string>('property-token-alerts');
+export const PROPERTY_TOKEN_typingUsers = new InjectionToken<string>('property-token-typingUsers');
+export const PROPERTY_TOKEN_ranges = new InjectionToken<string>('property-token-ranges');
+export const PROPERTY_TOKEN_groupItems = new InjectionToken<string>('property-token-groupItems');
+export const PROPERTY_TOKEN_sortByGroupSummaryInfo = new InjectionToken<string>('property-token-sortByGroupSummaryInfo');
+export const PROPERTY_TOKEN_totalItems = new InjectionToken<string>('property-token-totalItems');
+export const PROPERTY_TOKEN_commands = new InjectionToken<string>('property-token-commands');
+export const PROPERTY_TOKEN_connectionPoints = new InjectionToken<string>('property-token-connectionPoints');
+export const PROPERTY_TOKEN_customShapes = new InjectionToken<string>('property-token-customShapes');
+export const PROPERTY_TOKEN_groups = new InjectionToken<string>('property-token-groups');
+export const PROPERTY_TOKEN_fileSelectionItems = new InjectionToken<string>('property-token-fileSelectionItems');
+export const PROPERTY_TOKEN_stripLines = new InjectionToken<string>('property-token-stripLines');
+export const PROPERTY_TOKEN_mentions = new InjectionToken<string>('property-token-mentions');
+export const PROPERTY_TOKEN_menuItems = new InjectionToken<string>('property-token-menuItems');
+export const PROPERTY_TOKEN_locations = new InjectionToken<string>('property-token-locations');
+export const PROPERTY_TOKEN_markers = new InjectionToken<string>('property-token-markers');
+export const PROPERTY_TOKEN_routes = new InjectionToken<string>('property-token-routes');
+export const PROPERTY_TOKEN_cols = new InjectionToken<string>('property-token-cols');
+export const PROPERTY_TOKEN_location = new InjectionToken<string>('property-token-location');
+export const PROPERTY_TOKEN_rows = new InjectionToken<string>('property-token-rows');
+export const PROPERTY_TOKEN_resources = new InjectionToken<string>('property-token-resources');
+export const PROPERTY_TOKEN_views = new InjectionToken<string>('property-token-views');
+export const PROPERTY_TOKEN_layers = new InjectionToken<string>('property-token-layers');
+export const PROPERTY_TOKEN_legends = new InjectionToken<string>('property-token-legends');
+export const PROPERTY_TOKEN_center = new InjectionToken<string>('property-token-center');

packages/devextreme-angular/src/tokens/ng-package.json

@@ -0,0 +1,5 @@
+{
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

packages/devextreme-angular/src/ui/accordion/index.ts

@@ -40,12 +40,14 @@ import {
     IterableDifferHelper,
     WatcherHelper,
     CollectionNestedOption,
-    СOLLECTION_NESTED_OPTION_TOKEN,
 } from 'devextreme-angular/core';
 
 import { DxiItemModule } from 'devextreme-angular/ui/nested';
 
 import { DxiAccordionItemModule } from 'devextreme-angular/ui/accordion/nested';
+import { 
+           PROPERTY_TOKEN_items,
+     } from 'devextreme-angular/tokens';
 
 
 /**
@@ -67,9 +69,9 @@ import { DxiAccordionItemModule } from 'devextreme-angular/ui/accordion/nested';
 })
 export class DxAccordionComponent<TItem = any, TKey = any> extends DxComponent implements OnDestroy, OnChanges, DoCheck {
 
-    @ContentChildren(СOLLECTION_NESTED_OPTION_TOKEN)
-    set _CollectionOptionChildren(value: QueryList<{ propertyName: string, component: CollectionNestedOption }>) {
-        this._setCollectionOptionChildren(value);
+    @ContentChildren(PROPERTY_TOKEN_items)
+    set _itemsContentChildren(value: QueryList<CollectionNestedOption>) {
+        this.setChildren('items', value);
     }
 
     instance: DxAccordion<TItem, TKey> = null;

packages/devextreme-angular/src/ui/accordion/nested/item-dxi.ts

@@ -24,10 +24,12 @@ import {
     DxTemplateDirective,
     IDxTemplateHost,
     DxTemplateHost,
-    СOLLECTION_NESTED_OPTION_TOKEN,
 } from 'devextreme-angular/core';
 import { CollectionNestedOption } from 'devextreme-angular/core';
 
+import { PROPERTY_TOKEN_items } from 'devextreme-angular/tokens';
+
+
 @Component({
     selector: 'dxi-accordion-item',
     standalone: true,
@@ -37,14 +39,10 @@ import { CollectionNestedOption } from 'devextreme-angular/core';
     providers: [
         NestedOptionHost,
         DxTemplateHost,
-         {
-            provide: СOLLECTION_NESTED_OPTION_TOKEN,
-            useFactory: (component: DxiAccordionItemComponent) => ({
-               propertyName: 'items',
-               component
-            }),
-            deps: [DxiAccordionItemComponent],
-         }
+        {
+           provide: PROPERTY_TOKEN_items,
+           useExisting: DxiAccordionItemComponent,
+        }
     ],
 })
 export class DxiAccordionItemComponent extends CollectionNestedOption implements AfterViewInit,

packages/devextreme-angular/src/ui/action-sheet/index.ts

@@ -40,12 +40,14 @@ import {
     IterableDifferHelper,
     WatcherHelper,
     CollectionNestedOption,
-    СOLLECTION_NESTED_OPTION_TOKEN,
 } from 'devextreme-angular/core';
 
 import { DxiItemModule } from 'devextreme-angular/ui/nested';
 
 import { DxiActionSheetItemModule } from 'devextreme-angular/ui/action-sheet/nested';
+import { 
+           PROPERTY_TOKEN_items,
+     } from 'devextreme-angular/tokens';
 
 
 /**
@@ -67,9 +69,9 @@ import { DxiActionSheetItemModule } from 'devextreme-angular/ui/action-sheet/nes
 })
 export class DxActionSheetComponent<TItem = any, TKey = any> extends DxComponent implements OnDestroy, OnChanges, DoCheck {
 
-    @ContentChildren(СOLLECTION_NESTED_OPTION_TOKEN)
-    set _CollectionOptionChildren(value: QueryList<{ propertyName: string, component: CollectionNestedOption }>) {
-        this._setCollectionOptionChildren(value);
+    @ContentChildren(PROPERTY_TOKEN_items)
+    set _itemsContentChildren(value: QueryList<CollectionNestedOption>) {
+        this.setChildren('items', value);
     }
 
     instance: DxActionSheet<TItem, TKey> = null;