build: group examples by package and entry-point name (#16822)

Groups the examples by package and entry-point name. This
allows us have a bazel build target for each group and also
allows us to separate MDC prototypes from standard implementations.

Author: devversion

.circleci/bazel.rc

@@ -9,3 +9,11 @@ common --announce_rc
 # Save downloaded repositories in a location that can be cached by CircleCI. This helps us
 # speeding up the analysis time significantly with Bazel managed node dependencies on the CI.
 build --repository_cache=/home/circleci/bazel_repository_cache
+
+# Workaround https://github.com/bazelbuild/bazel/issues/3645. Bazel doesn't calculate the
+# memory ceiling correctly when running under Docker. Limit Bazel to consuming resources that
+# fit in CircleCI "xlarge" class. https://circleci.com/docs/2.0/configuration-reference/#resource_class
+# Note that we use less than the available RAM as bazel only estimates memory for actions
+# and we don't want to accidentally run out of memory.
+build --local_ram_resources=14336
+build --local_cpu_resources=8

.circleci/config.yml

@@ -151,7 +151,7 @@ jobs:
       - *yarn_install
       - *setup_bazel_binary
 
-      - run: bazel build src/... --build_tag_filters=-docs-package
+      - run: bazel build src/...
 
   # --------------------------------------------------------------------------------------------
   # Job that runs ts-api-guardian against our API goldens in "tools/public_api_guard".

src/material-examples/BUILD.bazel

@@ -1,39 +1,72 @@
 package(default_visibility = ["//visibility:public"])
 
-load("//:packages.bzl", "CDK_EXPERIMENTAL_TARGETS", "CDK_TARGETS", "MATERIAL_EXPERIMENTAL_TARGETS", "MATERIAL_PACKAGES", "ROLLUP_GLOBALS")
+load("//:packages.bzl", "ROLLUP_GLOBALS")
 load("//tools:defaults.bzl", "ng_module", "ng_package")
 load("//tools/highlight-files:index.bzl", "highlight_files")
 load("//tools/package-docs-content:index.bzl", "package_docs_content")
 
+EXAMPLE_PACKAGES = [
+    # TODO(devversion): try to have for each entry-point a bazel package so that
+    # we can automate this using the "package.bzl" variables.
+    "//src/material-examples/cdk/a11y",
+    "//src/material-examples/cdk/drag-drop",
+    "//src/material-examples/cdk/platform",
+    "//src/material-examples/cdk/popover-edit",
+    "//src/material-examples/cdk/portal",
+    "//src/material-examples/cdk/scrolling",
+    "//src/material-examples/cdk/stepper",
+    "//src/material-examples/cdk/table",
+    "//src/material-examples/cdk/text-field",
+    "//src/material-examples/cdk/tree",
+    "//src/material-examples/material/autocomplete",
+    "//src/material-examples/material/badge",
+    "//src/material-examples/material/bottom-sheet",
+    "//src/material-examples/material/button",
+    "//src/material-examples/material/button-toggle",
+    "//src/material-examples/material/card",
+    "//src/material-examples/material/checkbox",
+    "//src/material-examples/material/chips",
+    "//src/material-examples/material/core",
+    "//src/material-examples/material/datepicker",
+    "//src/material-examples/material/dialog",
+    "//src/material-examples/material/divider",
+    "//src/material-examples/material/expansion",
+    "//src/material-examples/material/form-field",
+    "//src/material-examples/material/grid-list",
+    "//src/material-examples/material/icon",
+    "//src/material-examples/material/input",
+    "//src/material-examples/material/list",
+    "//src/material-examples/material/menu",
+    "//src/material-examples/material/paginator",
+    "//src/material-examples/material/popover-edit",
+    "//src/material-examples/material/progress-bar",
+    "//src/material-examples/material/progress-spinner",
+    "//src/material-examples/material/radio",
+    "//src/material-examples/material/select",
+    "//src/material-examples/material/sidenav",
+    "//src/material-examples/material/slide-toggle",
+    "//src/material-examples/material/slider",
+    "//src/material-examples/material/snack-bar",
+    "//src/material-examples/material/sort",
+    "//src/material-examples/material/stepper",
+    "//src/material-examples/material/table",
+    "//src/material-examples/material/tabs",
+    "//src/material-examples/material/toolbar",
+    "//src/material-examples/material/tooltip",
+    "//src/material-examples/material/tree",
+]
+
 ng_module(
     name = "examples",
     # TODO(paul): re-add the example-module genfile once angular/angular#30259 is resolved.
     srcs = glob(["**/*.ts"]),
-    assets = glob([
-        "**/*.html",
-        "**/*.css",
-    ]),
     module_name = "@angular/material-examples",
-    # Specify the tsconfig that is also used by Gulp. We need to explicitly use this tsconfig
-    # because in order to import Moment with TypeScript, some specific options need to be set.
-    tsconfig = ":tsconfig-build.json",
-    deps = [
-        "@npm//@angular/animations",
-        "@npm//@angular/common",
-        "@npm//@angular/core",
-        "@npm//@angular/forms",
-        "@npm//moment",
-        "//src/material-moment-adapter",
-    ] + CDK_TARGETS + CDK_EXPERIMENTAL_TARGETS + MATERIAL_EXPERIMENTAL_TARGETS + ["//src/material/%s" % p for p in MATERIAL_PACKAGES],
+    deps = EXAMPLE_PACKAGES,
 )
 
 filegroup(
     name = "example-source-files",
-    srcs = glob([
-        "*/*.html",
-        "*/*.css",
-        "*/*.ts",
-    ]),
+    srcs = ["%s:source-files" % pkg for pkg in EXAMPLE_PACKAGES],
 )
 
 highlight_files(

src/material-examples/cdk/a11y/BUILD.bazel

@@ -0,0 +1,25 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "a11y",
+    srcs = glob(["**/*.ts"]),
+    assets = glob([
+        "**/*.html",
+        "**/*.css",
+    ]),
+    deps = [
+        "//src/cdk/a11y",
+        "//src/material/select",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob([
+        "*/*.html",
+        "*/*.css",
+        "*/*.ts",
+    ]),
+)

src/material-examples/focus-monitor-directives/focus-monitor-directives-example.css renamed to src/material-examples/cdk/a11y/focus-monitor-directives/focus-monitor-directives-example.css

@@ -0,0 +1,27 @@
+import {A11yModule} from '@angular/cdk/a11y';
+import {NgModule} from '@angular/core';
+import {MatSelectModule} from '@angular/material/select';
+import {
+  FocusMonitorDirectivesExample
+} from './focus-monitor-directives/focus-monitor-directives-example';
+import {
+  FocusMonitorFocusViaExample
+} from './focus-monitor-focus-via/focus-monitor-focus-via-example';
+import {FocusMonitorOverviewExample} from './focus-monitor-overview/focus-monitor-overview-example';
+
+const EXAMPLES = [
+  FocusMonitorDirectivesExample,
+  FocusMonitorFocusViaExample,
+  FocusMonitorOverviewExample,
+];
+
+@NgModule({
+  imports: [
+    A11yModule,
+    MatSelectModule,
+  ],
+  declarations: EXAMPLES,
+  exports: EXAMPLES,
+})
+export class CdkA11yExamplesModule {
+}

src/material-examples/focus-monitor-directives/focus-monitor-directives-example.html renamed to src/material-examples/cdk/a11y/focus-monitor-directives/focus-monitor-directives-example.html

@@ -0,0 +1,26 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "drag-drop",
+    srcs = glob(["**/*.ts"]),
+    assets = glob([
+        "**/*.html",
+        "**/*.css",
+    ]),
+    deps = [
+        "//src/cdk/drag-drop",
+        "//src/cdk/overlay",
+        "//src/cdk/portal",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob([
+        "*/*.html",
+        "*/*.css",
+        "*/*.ts",
+    ]),
+)

src/material-examples/focus-monitor-directives/focus-monitor-directives-example.ts renamed to src/material-examples/cdk/a11y/focus-monitor-directives/focus-monitor-directives-example.ts

@@ -0,0 +1,71 @@
+import {DragDropModule} from '@angular/cdk/drag-drop';
+import {OverlayModule} from '@angular/cdk/overlay';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {
+  CdkDragDropAxisLockExample
+} from './cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example';
+import {CdkDragDropBoundaryExample} from './cdk-drag-drop-boundary/cdk-drag-drop-boundary-example';
+import {
+  CdkDragDropConnectedSortingGroupExample
+} from './cdk-drag-drop-connected-sorting-group/cdk-drag-drop-connected-sorting-group-example';
+import {
+  CdkDragDropConnectedSortingExample
+} from './cdk-drag-drop-connected-sorting/cdk-drag-drop-connected-sorting-example';
+import {
+  CdkDragDropCustomPlaceholderExample
+} from './cdk-drag-drop-custom-placeholder/cdk-drag-drop-custom-placeholder-example';
+import {
+  CdkDragDropCustomPreviewExample
+} from './cdk-drag-drop-custom-preview/cdk-drag-drop-custom-preview-example';
+import {CdkDragDropDelayExample} from './cdk-drag-drop-delay/cdk-drag-drop-delay-example';
+import {
+  CdkDragDropDisabledSortingExample
+} from './cdk-drag-drop-disabled-sorting/cdk-drag-drop-disabled-sorting-example';
+import {CdkDragDropDisabledExample} from './cdk-drag-drop-disabled/cdk-drag-drop-disabled-example';
+import {
+  CdkDragDropEnterPredicateExample
+} from './cdk-drag-drop-enter-predicate/cdk-drag-drop-enter-predicate-example';
+import {
+  CdkDragDropFreeDragPositionExample
+} from './cdk-drag-drop-free-drag-position/cdk-drag-drop-free-drag-position-example';
+import {CdkDragDropHandleExample} from './cdk-drag-drop-handle/cdk-drag-drop-handle-example';
+import {
+  CdkDragDropHorizontalSortingExample
+} from './cdk-drag-drop-horizontal-sorting/cdk-drag-drop-horizontal-sorting-example';
+import {CdkDragDropOverviewExample} from './cdk-drag-drop-overview/cdk-drag-drop-overview-example';
+import {
+  CdkDragDropRootElementExample
+} from './cdk-drag-drop-root-element/cdk-drag-drop-root-element-example';
+import {CdkDragDropSortingExample} from './cdk-drag-drop-sorting/cdk-drag-drop-sorting-example';
+
+const EXAMPLES = [
+  CdkDragDropAxisLockExample,
+  CdkDragDropBoundaryExample,
+  CdkDragDropConnectedSortingExample,
+  CdkDragDropConnectedSortingGroupExample,
+  CdkDragDropCustomPlaceholderExample,
+  CdkDragDropCustomPreviewExample,
+  CdkDragDropDelayExample,
+  CdkDragDropDisabledExample,
+  CdkDragDropDisabledSortingExample,
+  CdkDragDropEnterPredicateExample,
+  CdkDragDropFreeDragPositionExample,
+  CdkDragDropHandleExample,
+  CdkDragDropHorizontalSortingExample,
+  CdkDragDropOverviewExample,
+  CdkDragDropRootElementExample,
+  CdkDragDropSortingExample,
+];
+
+@NgModule({
+  imports: [
+    DragDropModule,
+    OverlayModule,
+    CommonModule,
+  ],
+  declarations: EXAMPLES,
+  exports: EXAMPLES,
+})
+export class CdkDragDropExamplesModule {
+}

src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.css renamed to src/material-examples/cdk/a11y/focus-monitor-focus-via/focus-monitor-focus-via-example.css

@@ -0,0 +1,24 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "platform",
+    srcs = glob(["**/*.ts"]),
+    assets = glob([
+        "**/*.html",
+        "**/*.css",
+    ]),
+    deps = [
+        "//src/cdk/platform",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob([
+        "*/*.html",
+        "*/*.css",
+        "*/*.ts",
+    ]),
+)

src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.html renamed to src/material-examples/cdk/a11y/focus-monitor-focus-via/focus-monitor-focus-via-example.html

@@ -0,0 +1,15 @@
+import {PlatformModule} from '@angular/cdk/platform';
+import {NgModule} from '@angular/core';
+import {CdkPlatformOverviewExample} from './cdk-platform-overview/cdk-platform-overview-example';
+
+const EXAMPLES = [CdkPlatformOverviewExample];
+
+@NgModule({
+  imports: [
+    PlatformModule,
+  ],
+  declarations: EXAMPLES,
+  exports: EXAMPLES,
+})
+export class CdkPlatformExamplesModule {
+}

src/material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts renamed to src/material-examples/cdk/a11y/focus-monitor-focus-via/focus-monitor-focus-via-example.ts

@@ -0,0 +1,27 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "popover-edit",
+    srcs = glob(["**/*.ts"]),
+    assets = glob([
+        "**/*.html",
+        "**/*.css",
+    ]),
+    deps = [
+        "//src/cdk-experimental/popover-edit",
+        "//src/cdk/collections",
+        "//src/cdk/table",
+        "@npm//@angular/forms",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob([
+        "*/*.html",
+        "*/*.css",
+        "*/*.ts",
+    ]),
+)

src/material-examples/focus-monitor-overview/focus-monitor-overview-example.css renamed to src/material-examples/cdk/a11y/focus-monitor-overview/focus-monitor-overview-example.css

@@ -0,0 +1,42 @@
+import {CdkPopoverEditModule} from '@angular/cdk-experimental/popover-edit';
+import {CdkTableModule} from '@angular/cdk/table';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {
+  CdkPopoverEditCdkTableFlexExample
+} from './cdk-popover-edit-cdk-table-flex/cdk-popover-edit-cdk-table-flex-example';
+import {
+  CdkPopoverEditCdkTableExample
+} from './cdk-popover-edit-cdk-table/cdk-popover-edit-cdk-table-example';
+import {
+  CdkPopoverEditCellSpanVanillaTableExample
+} from
+    './cdk-popover-edit-cell-span-vanilla-table/cdk-popover-edit-cell-span-vanilla-table-example';
+import {
+  CdkPopoverEditTabOutVanillaTableExample
+} from './cdk-popover-edit-tab-out-vanilla-table/cdk-popover-edit-tab-out-vanilla-table-example';
+import {
+  CdkPopoverEditVanillaTableExample
+} from './cdk-popover-edit-vanilla-table/cdk-popover-edit-vanilla-table-example';
+
+const EXAMPLES = [
+  CdkPopoverEditCdkTableExample,
+  CdkPopoverEditCdkTableFlexExample,
+  CdkPopoverEditCellSpanVanillaTableExample,
+  CdkPopoverEditTabOutVanillaTableExample,
+  CdkPopoverEditVanillaTableExample,
+];
+
+@NgModule({
+  imports: [
+    CdkPopoverEditModule,
+    CdkTableModule,
+    FormsModule,
+    CommonModule,
+  ],
+  declarations: EXAMPLES,
+  exports: EXAMPLES,
+})
+export class CdkPopoverEditExamplesModule {
+}