feat: provide and use lightweight tokens for optimized treeshaking

goldens/size-test.yaml

@@ -1 +1,18 @@
+cdk/drag-drop/all-directives: 153063
+cdk/drag-drop/basic: 150321
+material-experimental/mdc-chips/basic: 147613
+material-experimental/mdc-form-field/advanced: 220865
+material-experimental/mdc-form-field/basic: 220028
+material/autocomplete/without-optgroup: 208091
+material/button-toggle/standalone: 119400
+material/chips/basic: 162733
+material/datepicker/range-picker/without-form-field: 330101
+material/expansion/without-accordion: 130562
+material/form-field/advanced: 186234
+material/form-field/basic: 185008
 material/list/nav-list: 130473
+material/menu/without-lazy-content: 210751
+material/radio/without-group: 121448
+material/select/basic: 256613
+material/tabs/advanced: 183627
+material/tabs/basic: 182824

integration/size-test/cdk/drag-drop/BUILD.bazel

@@ -0,0 +1,13 @@
+load("//integration/size-test:index.bzl", "size_test")
+
+size_test(
+    name = "basic",
+    file = "basic.ts",
+    deps = ["//src/cdk/drag-drop"],
+)
+
+size_test(
+    name = "all-directives",
+    file = "all-directives.ts",
+    deps = ["//src/cdk/drag-drop"],
+)

integration/size-test/cdk/drag-drop/all-directives.ts

@@ -0,0 +1,25 @@
+import {DragDropModule} from '@angular/cdk/drag-drop';
+import {Component, NgModule} from '@angular/core';
+
+/** Component using all parts of the drag-drop module. All directives should be preserved. */
+@Component({
+  template: `
+    <div cdkDropListGroup>
+      <div cdkDropList>
+        <div cdkDrag>
+          <span cdkDragHandle>handle</span>
+          <ng-template cdkDragPlaceholder>Placeholder</ng-template>
+          <ng-template cdkDragPreview>Preview</ng-template>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class TestComponent {}
+
+@NgModule({
+  imports: [DragDropModule],
+  declarations: [TestComponent],
+  bootstrap: [TestComponent],
+})
+export class AppModule {}

integration/size-test/cdk/drag-drop/basic.ts

@@ -0,0 +1,23 @@
+import {DragDropModule} from '@angular/cdk/drag-drop';
+import {Component, NgModule} from '@angular/core';
+
+/**
+ * Basic component using `CdkDropList` and `CdkDrag`. Other parts of the drag-drop
+ * module such as `CdkDropListGroup`, `CdkDragPlaceholder`, `CdkDragPreview` or
+ * `CdkDragHandle` are not used and should be tree-shaken away.
+ */
+@Component({
+  template: `
+    <div cdkDropList>
+      <div cdkDrag></div>
+    </div>
+  `,
+})
+export class TestComponent {}
+
+@NgModule({
+  imports: [DragDropModule],
+  declarations: [TestComponent],
+  bootstrap: [TestComponent],
+})
+export class AppModule {}

integration/size-test/check-size.ts

@@ -19,6 +19,9 @@ const ABSOLUTE_BYTE_THRESHOLD = 500;
  */
 const PERCENTAGE_DEVIATION_THRESHOLD = 1;
 
+/** Type that represents the parsed size-test golden. */
+type Golden = {[testId: string]: number};
+
 /**
  * Extracted command line arguments specified by the Bazel NodeJS binaries:
  *  - `testId`: Unique id for the given test file that is used as key in the golden.
@@ -30,14 +33,14 @@ const [testId, testFileRootpath, isApprove] = process.argv.slice(2);
 const testFilePath = require.resolve(`angular_material/${testFileRootpath}`);
 const goldenFilePath = require.resolve('../../goldens/size-test.yaml');
 
-const golden = parse(readFileSync(goldenFilePath, 'utf8')) || {};
+const golden: Golden = parse(readFileSync(goldenFilePath, 'utf8')) || {};
 const fileStat = statSync(testFilePath);
 const actualSize = fileStat.size;
 
 // If in approve mode, update the golden to reflect the new size.
 if (isApprove) {
   golden[testId] = actualSize;
-  writeFileSync(goldenFilePath, stringify(golden));
+  writeFileSync(goldenFilePath, stringify(getSortedGolden()));
   console.info(chalk.green(`Approved golden size for "${testId}"`));
   process.exit(0);
 }
@@ -74,3 +77,10 @@ function printApproveCommand() {
   console.info(chalk.yellow('You can approve the golden by running the following command:'));
   console.info(chalk.yellow(`  bazel run ${process.env.BAZEL_TARGET}.approve`));
 }
+
+/** Gets the lexicographically sorted size-test golden. */
+function getSortedGolden(): Golden {
+  return Object.keys(golden).sort().reduce((result: Golden, key: string) => {
+    return {...result, [key]: golden[key]};
+  }, {} as Golden);
+}

integration/size-test/material-experimental/mdc-chips/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//integration/size-test:index.bzl", "size_test")
+
+size_test(
+    name = "basic",
+    file = "basic.ts",
+    deps = ["//src/material-experimental/mdc-chips"],
+)

integration/size-test/material-experimental/mdc-chips/basic.ts

@@ -0,0 +1,25 @@
+import {Component, NgModule} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
+
+/**
+ * Basic component using `MatChipSet` and `MatChip`. Other supported parts of the
+ * chip module such as `MatChipRemove` are not used and should be tree-shaken away.
+ */
+@Component({
+  template: `
+    <mat-chip-set>
+      <mat-chip>First</mat-chip>
+    </mat-chip-set>
+  `,
+})
+export class TestComponent {}
+
+@NgModule({
+  imports: [MatChipsModule],
+  declarations: [TestComponent],
+  bootstrap: [TestComponent],
+})
+export class AppModule {}
+
+platformBrowser().bootstrapModule(AppModule);

integration/size-test/material-experimental/mdc-form-field/BUILD.bazel

@@ -0,0 +1,19 @@
+load("//integration/size-test:index.bzl", "size_test")
+
+size_test(
+    name = "basic",
+    file = "basic.ts",
+    deps = [
+        "//src/material-experimental/mdc-form-field",
+        "//src/material-experimental/mdc-input",
+    ],
+)
+
+size_test(
+    name = "advanced",
+    file = "advanced.ts",
+    deps = [
+        "//src/material-experimental/mdc-form-field",
+        "//src/material-experimental/mdc-input",
+    ],
+)

integration/size-test/material-experimental/mdc-form-field/advanced.ts

@@ -0,0 +1,27 @@
+import {Component, NgModule} from '@angular/core';
+import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
+import {MatInputModule} from '@angular/material-experimental/mdc-input';
+
+/**
+ * Advanced component using `MatFormField` and `MatInput` in combination with content
+ * directives such as `MatError`, `MatHint`, `MatPrefix` or `MatSuffix`.
+ */
+@Component({
+  template: `
+    <mat-form-field>
+      <div matSuffix></div>
+      <div matPrefix></div>
+      <mat-error>Error</mat-error>
+      <mat-hint>Hint</mat-hint>
+      <input matInput>
+    </mat-form-field>
+  `,
+})
+export class TestComponent {}
+
+@NgModule({
+  imports: [MatInputModule, MatFormFieldModule],
+  declarations: [TestComponent],
+  bootstrap: [TestComponent],
+})
+export class AppModule {}

integration/size-test/material-experimental/mdc-form-field/basic.ts

@@ -0,0 +1,24 @@
+import {Component, NgModule} from '@angular/core';
+import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
+import {MatInputModule} from '@angular/material-experimental/mdc-input';
+
+/**
+ * Basic component using `MatFormField` and `MatInput`. Other parts of the form-field
+ * module such as `MatError`, `MatHint`, `MatPrefix` or `MatSuffix` are not used
+ * and should be tree-shaken away.
+ */
+@Component({
+  template: `
+    <mat-form-field>
+      <input matInput>
+    </mat-form-field>
+  `,
+})
+export class TestComponent {}
+
+@NgModule({
+  imports: [MatInputModule, MatFormFieldModule],
+  declarations: [TestComponent],
+  bootstrap: [TestComponent],
+})
+export class AppModule {}

integration/size-test/material/autocomplete/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//integration/size-test:index.bzl", "size_test")
+
+size_test(
+    name = "without-optgroup",
+    file = "without-optgroup.ts",
+    deps = ["//src/material/autocomplete"],
+)

integration/size-test/material/autocomplete/without-optgroup.ts

@@ -0,0 +1,23 @@
+import {Component, NgModule} from '@angular/core';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+
+/**
+ * Basic component using `MatAutocomplete` and `MatOption`. Other supported parts of the
+ * autocomplete like `MatOptgroup` are not used and should be tree-shaken away.
+ */
+@Component({
+  template: `
+    <input [matAutocomplete]="myAutocomplete">
+    <mat-autocomplete #myAutocomplete>
+      <mat-option value="First">First</mat-option>
+    </mat-autocomplete>
+  `,
+})
+export class TestComponent {}
+
+@NgModule({
+  imports: [MatAutocompleteModule],
+  declarations: [TestComponent],
+  bootstrap: [TestComponent],
+})
+export class AppModule {}

integration/size-test/material/button-toggle/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//integration/size-test:index.bzl", "size_test")
+
+size_test(
+    name = "standalone",
+    file = "standalone.ts",
+    deps = ["//src/material/button-toggle"],
+)

integration/size-test/material/button-toggle/standalone.ts

@@ -0,0 +1,20 @@
+import {Component, NgModule} from '@angular/core';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+
+/**
+ * Basic component using a standalone `MatButtonToggle`. Other parts of the button-toggle
+ * module such as `MatButtonToggleGroup` are not used and should be tree-shaken away.
+ */
+@Component({
+  template: `
+    <mat-button-toggle>Center text</mat-button-toggle>
+  `,
+})
+export class TestComponent {}
+
+@NgModule({
+  imports: [MatButtonToggleModule],
+  declarations: [TestComponent],
+  bootstrap: [TestComponent],
+})
+export class AppModule {}

integration/size-test/material/chips/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//integration/size-test:index.bzl", "size_test")
+
+size_test(
+    name = "basic",
+    file = "basic.ts",
+    deps = ["//src/material/chips"],
+)

integration/size-test/material/chips/basic.ts

@@ -0,0 +1,25 @@
+import {Component, NgModule} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+import {MatChipsModule} from '@angular/material/chips';
+
+/**
+ * Basic component using `MatChipList` and `MatChip`. Other supported parts of the
+ * chip module such as `MatChipRemove` are not used and should be tree-shaken away.
+ */
+@Component({
+  template: `
+    <mat-chip-list>
+      <mat-chip>First</mat-chip>
+    </mat-chip-list>
+  `,
+})
+export class TestComponent {}
+
+@NgModule({
+  imports: [MatChipsModule],
+  declarations: [TestComponent],
+  bootstrap: [TestComponent],
+})
+export class AppModule {}
+
+platformBrowser().bootstrapModule(AppModule);

integration/size-test/material/datepicker/range-picker/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//integration/size-test:index.bzl", "size_test")
+
+size_test(
+    name = "without-form-field",
+    file = "without-form-field.ts",
+    deps = ["//src/material/datepicker"],
+)

integration/size-test/material/datepicker/range-picker/without-form-field.ts

@@ -0,0 +1,27 @@
+import {Component, NgModule} from '@angular/core';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+
+/**
+ * Basic component using `MatDateRangePicker` with `MatDatepickerToggle`. Form fields
+ * are optionally used in combination with the date-range input, so we expect that to
+ * be tree-shaken away in this example. Similarly the standard datepicker input directive
+ * should be omitted.
+ */
+@Component({
+  template: `
+    <mat-date-range-input [rangePicker]="picker">
+      <input matStartDate>
+      <input matEndDate>
+    </mat-date-range-input>
+    <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+    <mat-date-range-picker #picker></mat-date-range-picker>
+  `,
+})
+export class TestComponent {}
+
+@NgModule({
+  imports: [MatDatepickerModule],
+  declarations: [TestComponent],
+  bootstrap: [TestComponent],
+})
+export class AppModule {}

integration/size-test/material/expansion/BUILD.bazel

@@ -0,0 +1,7 @@
+load("//integration/size-test:index.bzl", "size_test")
+
+size_test(
+    name = "without-accordion",
+    file = "without-accordion.ts",
+    deps = ["//src/material/expansion"],
+)

integration/size-test/material/expansion/without-accordion.ts

@@ -0,0 +1,23 @@
+import {Component, NgModule} from '@angular/core';
+import {MatExpansionModule} from '@angular/material/expansion';
+
+/**
+ * Basic component using `MatExpansionPanel` and `MatExpansionPanelHeader`. Other parts of
+ * the module such as `MatAccordion` or `CdkAccordion` should be tree-shaken away.
+ */
+@Component({
+  template: `
+    <mat-expansion-panel>
+      <mat-expansion-panel-header>Title</mat-expansion-panel-header>
+      Content
+    </mat-expansion-panel>
+  `,
+})
+export class TestComponent {}
+
+@NgModule({
+  imports: [MatExpansionModule],
+  declarations: [TestComponent],
+  bootstrap: [TestComponent],
+})
+export class AppModule {}