refactor(themes): change how the dependency tree is built and checked (#12709)

* refactor(themes): change how the dependency tree is built and checked
This PR adds support for registering theme dependencies by extension.

---------

Co-authored-by: Konstantin Dinev <[email protected]>

Author: simeonoff

projects/igniteui-angular/src/lib/core/styles/base/_functions.scss

@@ -3,14 +3,31 @@
 @use 'sass:list';
 @use 'sass:string';
 
+/// Get the difference between two lists.
+/// @access private
+/// @param {List} $list1 - The source list.
+/// @param {List} $list2 - The list to check against the source list.
+/// @return {List} - A list containing the diff items.
+@function list-diff($list1, $list2) {
+    $result: ();
+
+    @each $item in $list1 {
+        @if not list.index($list2, $item) {
+            $result: list.append($result, $item, comma);
+        }
+    }
+
+    @return $result;
+}
+
 /// @group Utilities
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 /// @access private
-@function is-used($name, $checklist) {
+@function is-used($component, $checklist) {
     $used: true;
 
-    @if list.index($checklist, $name) {
-        $deps: map.get($components, $name, 'usedBy');
+    @if list.index($checklist, $component) {
+        $deps: map.get($components, $component, 'usedBy');
         $excluded: ();
 
         @each $item in $checklist {
@@ -22,9 +39,11 @@
         $used: list.length($deps) != list.length($excluded);
 
         @if not($used) {
-            $dropped-themes: list.append($dropped-themes, $name) !global;
+            $dropped-themes: list.append($dropped-themes, $component) !global;
         } @else {
-            @warn string.unquote('You\'ve opted to exclude the "#{$name}" theme but it was held back as the following themes depend on it: "#{$deps}".');
+            $remaining: list-diff($deps, $excluded);
+
+            @warn string.unquote('You\'ve opted to exclude the "#{$component}" theme but it was held back as the following components depend on it: "#{$remaining}".');
         }
     }
 

projects/igniteui-angular/src/lib/core/styles/base/_mixins.scss

@@ -15,31 +15,65 @@
 
 /// Registers a component to the list of known components.
 /// @access private
-/// @param {String} $name - The component name to register.
+/// @param {String} $name - The component name.
+/// @param {List} $deps - A list of all components the component depends on.
 @mixin register-component($name, $deps: ()) {
     $component: map.get($components, $name);
+    $deps: if($component, map.get($component, 'deps'), $deps);
+    $usedBy: if($component, map.get($component, 'usedBy'), ());
 
-    @if $component == null {
-        $components: map.merge($components, (
-            #{$name}: (
-                usedBy: ()
-            ),
-        )) !global;
-    }
+    $components: map.merge($components, (
+        #{$name}: (
+            deps: $deps,
+            usedBy: $usedBy
+        )
+    )) !global;
+}
 
+/// Adds dependecies to a component's internal usedBy list.
+/// @access private
+/// @param {String} $component - The component name.
+/// @param {List} $deps - The dependecies to be added to the component's usedBy list.
+@mixin add-deps($component, $deps) {
     @each $dep in $deps {
-        @include register-component($dep);
+        $c: map.get($components, $dep);
+        $d: ();
+        $u: ();
+
+        @if $c != null {
+            $cu: map.get($c, 'usedBy');
 
-        @if map.has-key($components, $dep) {
-            $component: map.get($components, $dep);
-            $usedBy: map.get($component, 'usedBy');
+            $d: map.get($c, 'deps');
 
-            $components: map.merge($components, (
-                #{$dep}: map.merge($component, (
-                    usedBy: list.append($usedBy, $name, $separator: comma)
-                ))
-            )) !global;
+            @if not list.index($cu, $component) {
+                $u: list.append($cu, $component, comma);
+            } @else {
+                $u: $cu;
+            }
+        } @else {
+            $u: list.append($u, $component, comma);
         }
+
+        $components: map.merge($components, (
+            #{$dep}: (
+                deps: $d,
+                usedBy: $u
+            )
+        )) !global;
+
+        @include add-deps($component, $d);
+    }
+}
+
+/// Modifies the global components register by updating the usedBy list for each component.
+/// @access private
+/// @param {Map} $components - A map of all registered components.
+@mixin dependecy-tree($components) {
+    @each $c in $components {
+        $component: list.nth($c, 1);
+        $deps: map.get($components, $component, 'deps');
+
+        @include add-deps($component, $deps);
     }
 }
 

projects/igniteui-angular/src/lib/core/styles/spec/_functions.spec.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+@use 'sass:list';
 @use 'node_modules/sass-true' as *;
 @use '../base' as *;
 
@@ -11,10 +13,28 @@
         )
     ) !global;
 
+    @include it('should register a component') {
+        $result: (
+            'deps': (igx-drop-down),
+            'usedBy': ()
+        );
+
+        @include register-component($name: igx-test, $deps: (igx-drop-down));
+        @include assert-equal(map.get($components, igx-test), $result);
+    }
+
+    @include it('should build a dependency tree and register dependencies by extension') {
+        @include register-component($name: igx-drop-down, $deps: (igx-overlay));
+        @include dependecy-tree($components);
+
+        $usedBy: map.get($components, igx-overlay, 'usedBy');
+        @include assert-equal(list.index($usedBy, igx-test) != null, true);
+    }
+
     @include it('should include theme if other themes depend on it') {
         $excluded: (igx-checkbox, igx-combo);
         $test: is-used(
-            $name: 'igx-checkbox',
+            $component: 'igx-checkbox',
             $checklist: $excluded,
         );
         @include assert-equal($test, true);
@@ -23,7 +43,7 @@
     @include it('should exclude theme if no themes depend on it') {
         $excluded: (igx-checkbox, igx-grid, igx-combo);
         $test: is-used(
-            $name: 'igx-checkbox',
+            $component: 'igx-checkbox',
             $checklist: $excluded,
         );
 

projects/igniteui-angular/src/lib/core/styles/themes/_core.scss

@@ -3,6 +3,8 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
+@use '../base';
+
 // Used to configure color accessibility for charts
 @use 'igniteui-theming/sass/color/functions' as color;
 
@@ -169,6 +171,9 @@
     @include tree.component();
     @include watermark.component();
 
+    // Build the component dependecy-tree
+    @include base.dependecy-tree(base.$components);
+
     @if $print-layout == true {
         @include print.layout();
     }