build: restructure demo-app in favor of bazel (#13965)

Restructures the demo-app by no longer mixing up the `demo-app` name.

Currently the `demo-app` consists of two parts:

  * The demo-app
  * And the accessibility demos

As you can tell above, this is pretty much confusing because it's
technically just consisting of:

  * Accessibility demos
  * Library demos

This change cleans up the naming and makes sure that the modules are
structured in a best-practice way.

It's odd to have the `DemoAppModule` (*not the root module*) that
includes all library demos as a folder next to the actual demo
components.

This makes it extremely hard to convert the demo-app to Bazel because
we cannot target all `.ts` files through `glob` because it only matches
files inside of the same folder (or Bazel package).

In order to make it easy to run the demo-app with Bazel, and to just
clean it up, the folder structure should be as followed:

```
src/a11y-demo/
  | ...

src/dev-app/
  | ${DEMO_COMPONENT}
     | ...
     | BUILD.bazel
  | index.html
  | BUILD.bazel
```

.circleci/config.yml

@@ -157,10 +157,10 @@ jobs:
     - run: ./scripts/circleci/run-saucelabs-tests.sh
 
   # -----------------------------------------------------------------------------------------
-  # Job that builds the demo-app with AOT. In order to speed up this job, the release output
+  # Job that builds the dev-app with AOT. In order to speed up this job, the release output
   # from the workspace storage will be attached to this job.
   # -----------------------------------------------------------------------------------------
-  build_demoapp_aot:
+  build_devapp_aot:
     <<: *job_defaults
     steps:
       - *checkout_code
@@ -197,7 +197,7 @@ jobs:
 
   # -------------------------------------------------------------------------------------------
   # Job that builds all release packages with Gulp. The built packages can be then used in the
-  # same workflow to publish snapshot builds or test the demo-app with the release packages.
+  # same workflow to publish snapshot builds or test the dev-app with the release packages.
   # -------------------------------------------------------------------------------------------
   build_release_packages:
     <<: *job_defaults
@@ -298,7 +298,7 @@ workflows:
   release_output:
     jobs:
       - build_release_packages
-      - build_demoapp_aot:
+      - build_devapp_aot:
           requires:
             - build_release_packages
       - publish_snapshots:

.github/CODEOWNERS

@@ -94,58 +94,59 @@
 /guides/**                                         @jelbourn
 /src/material-examples/**                          @jelbourn
 
-# Demo app
-/src/demo-app/*                                    @jelbourn
-/src/demo-app/a11y/**                              @jelbourn
-/src/demo-app/autocomplete/**                      @crisbeto
-/src/demo-app/badge/**                             @jelbourn
-/src/demo-app/baseline/**                          @mmalerba
-/src/demo-app/bottom-sheet/**                      @jelbourn @crisbeto
-/src/demo-app/button-toggle/**                     @jelbourn
-/src/demo-app/button/**                            @jelbourn
-/src/demo-app/card/**                              @jelbourn
-/src/demo-app/checkbox/**                          @jelbourn @devversion
-/src/demo-app/chips/**                             @jelbourn
-/src/demo-app/connected-overlay/**                 @jelbourn @crisbeto
-/src/demo-app/dataset/**                           @andrewseguin
-/src/demo-app/datepicker/**                        @mmalerba
-/src/demo-app/demo-app/**                          @jelbourn
-/src/demo-app/dialog/**                            @jelbourn @crisbeto
-/src/demo-app/drawer/**                            @mmalerba
-/src/demo-app/drag-drop/**                         @crisbeto
-/src/demo-app/example/**                           @andrewseguin
-/src/demo-app/examples-page/**                     @andrewseguin
-/src/demo-app/expansion/**                         @josephperrott
-/src/demo-app/focus-origin/**                      @mmalerba
-/src/demo-app/gestures/**                          @jelbourn
-/src/demo-app/grid-list/**                         @jelbourn
-/src/demo-app/icon/**                              @jelbourn
-/src/demo-app/input/**                             @mmalerba
-/src/demo-app/list/**                              @jelbourn @crisbeto @devversion
-/src/demo-app/live-announcer/**                    @jelbourn
-/src/demo-app/menu/**                              @crisbeto
-/src/demo-app/overlay/**                           @jelbourn @crisbeto
-/src/demo-app/paginator/**                         @andrewseguin
-/src/demo-app/platform/**                          @jelbourn @devversion
-/src/demo-app/portal/**                            @jelbourn
-/src/demo-app/progress-bar/**                      @jelbourn @crisbeto @josephperrott
-/src/demo-app/progress-spinner/**                  @jelbourn @crisbeto @josephperrott
-/src/demo-app/radio/**                             @jelbourn @devversion
-/src/demo-app/ripple/**                            @devversion
-/src/demo-app/screen-type/**                       @josephperrott
-/src/demo-app/select/**                            @crisbeto
-/src/demo-app/sidenav/**                           @mmalerba
-/src/demo-app/slide-toggle/**                      @devversion
-/src/demo-app/slider/**                            @mmalerba
-/src/demo-app/snack-bar/**                         @jelbourn @crisbeto @josephperrott
-/src/demo-app/stepper/**                           @mmalerba
-/src/demo-app/table/**                             @andrewseguin
-/src/demo-app/tabs/**                              @andrewseguin
-/src/demo-app/toolbar/**                           @devversion
-/src/demo-app/tooltip/**                           @andrewseguin
-/src/demo-app/tree/**                              @jelbourn
-/src/demo-app/typography/**                        @crisbeto
-/src/demo-app/virtual-scroll/**                    @mmalerba
+# Accessibility demos
+/src/a11y-demo/**/*                                @jelbourn
+
+# Dev-app
+/src/dev-app/*                                     @jelbourn
+/src/dev-app/autocomplete/**                       @crisbeto
+/src/dev-app/badge/**                              @jelbourn
+/src/dev-app/baseline/**                           @mmalerba
+/src/dev-app/bottom-sheet/**                       @jelbourn @crisbeto
+/src/dev-app/button-toggle/**                      @jelbourn
+/src/dev-app/button/**                             @jelbourn
+/src/dev-app/card/**                               @jelbourn
+/src/dev-app/checkbox/**                           @jelbourn @devversion
+/src/dev-app/chips/**                              @jelbourn
+/src/dev-app/connected-overlay/**                  @jelbourn @crisbeto
+/src/dev-app/dataset/**                            @andrewseguin
+/src/dev-app/datepicker/**                         @mmalerba
+/src/dev-app/dialog/**                             @jelbourn @crisbeto
+/src/dev-app/drawer/**                             @mmalerba
+/src/dev-app/drag-drop/**                          @crisbeto
+/src/dev-app/example/**                            @andrewseguin
+/src/dev-app/examples-page/**                      @andrewseguin
+/src/dev-app/expansion/**                          @josephperrott
+/src/dev-app/focus-origin/**                       @mmalerba
+/src/dev-app/gestures/**                           @jelbourn
+/src/dev-app/grid-list/**                          @jelbourn
+/src/dev-app/icon/**                               @jelbourn
+/src/dev-app/input/**                              @mmalerba
+/src/dev-app/list/**                               @jelbourn @crisbeto @devversion
+/src/dev-app/menu/**                               @crisbeto
+/src/dev-app/live-announcer/**                     @jelbourn
+/src/dev-app/overlay/**                            @jelbourn @crisbeto
+/src/dev-app/paginator/**                          @andrewseguin
+/src/dev-app/platform/**                           @jelbourn @devversion
+/src/dev-app/portal/**                             @jelbourn
+/src/dev-app/progress-bar/**                       @jelbourn @crisbeto @josephperrott
+/src/dev-app/progress-spinner/**                   @jelbourn @crisbeto @josephperrott
+/src/dev-app/radio/**                              @jelbourn @devversion
+/src/dev-app/ripple/**                             @devversion
+/src/dev-app/screen-type/**                        @josephperrott
+/src/dev-app/select/**                             @crisbeto
+/src/dev-app/sidenav/**                            @mmalerba
+/src/dev-app/slide-toggle/**                       @devversion
+/src/dev-app/slider/**                             @mmalerba
+/src/dev-app/snack-bar/**                          @jelbourn @crisbeto @josephperrott
+/src/dev-app/stepper/**                            @mmalerba
+/src/dev-app/table/**                              @andrewseguin
+/src/dev-app/tabs/**                               @andrewseguin
+/src/dev-app/toolbar/**                            @devversion
+/src/dev-app/tooltip/**                            @andrewseguin
+/src/dev-app/tree/**                               @jelbourn
+/src/dev-app/typography/**                         @crisbeto
+/src/dev-app/virtual-scroll/**                     @mmalerba
 
 # E2E app
 /e2e/*                                             @jelbourn

CODE_REVIEWS.md

@@ -24,7 +24,7 @@ greatly in keeping the library stable by running against the tests of many appli
 Google. Due to the volume of tests involved, this process means that there can be some delay
 between a PR being approved and it being merged.
 
-The "merge safe" label means that the change doesn't affect the library itself (or the demo-app),
+The "merge safe" label means that the change doesn't affect the library itself (or the dev-app),
 and thus can be merged without this extra presubmit.
 
 The "presubmit failure" label means that the PR has encountered some failure during presubmit and

firebase.json

@@ -1,6 +1,6 @@
 {
   "hosting": {
-    "public": "dist/packages/demo-app",
+    "public": "dist/packages/dev-app",
     "rewrites": [
       {
         "source": "/**/!(*.@(js|ts|html|css|json|svg|png|jpg|jpeg))",

package.json

@@ -13,7 +13,7 @@
   },
   "scripts": {
     "build": "gulp :publish:build-releases",
-    "demo-app": "gulp serve:devapp",
+    "dev-app": "gulp serve:devapp",
     "test": "gulp test",
     "lint": "gulp lint",
     "e2e": "gulp e2e",

src/a11y-demo/BUILD.bazel

@@ -0,0 +1,19 @@
+package(default_visibility=["//visibility:public"])
+
+load("//:packages.bzl", "MATERIAL_TARGETS")
+load("//tools:defaults.bzl", "ng_module")
+load("//tools:sass_generate_binaries.bzl", "sass_generate_binaries")
+
+# Generate sass binaries for all nested SCSS files.
+sass_generate_binaries("a11y_demo_scss", glob(["**/*.scss"]))
+
+ng_module(
+  name = "a11y-demo",
+  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
+  assets = glob(["**/*.html"]) + [":a11y_demo_scss"],
+  deps = [
+    "@angular//packages/core",
+    "@angular//packages/router",
+    "//src/cdk/table",
+  ] + MATERIAL_TARGETS
+)

src/a11y-demo/a11y-demo-module.ts

@@ -10,8 +10,9 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
-import {DemoMaterialModule} from '../demo-material-module';
-import {AccessibilityDemo, AccessibilityHome} from './a11y';
+import {AccessibilityDemoHome, AccessibilityDemoRoot} from './a11y-demo';
+import {ACCESSIBILITY_DEMO_ROUTES} from './a11y-demo-routes';
+import {DemoMaterialModule} from './a11y-material-module';
 import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y';
 import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
 import {ButtonAccessibilityDemo} from './button/button-a11y';
@@ -36,7 +37,6 @@ import {MenuAccessibilityDemo} from './menu/menu-a11y';
 import {ProgressBarAccessibilityDemo} from './progress-bar/progress-bar-a11y';
 import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
-import {ACCESSIBILITY_DEMO_ROUTES} from './routes';
 import {SelectAccessibilityDemo} from './select/select-a11y';
 import {SidenavBasicAccessibilityDemo} from './sidenav/basic-sidenav-a11y';
 import {SidenavDualAccessibilityDemo} from './sidenav/dual-sidenav-a11y';
@@ -75,8 +75,8 @@ export class AccessibilityRoutingModule {}
     ReactiveFormsModule,
   ],
   declarations: [
-    AccessibilityDemo,
-    AccessibilityHome,
+    AccessibilityDemoHome,
+    AccessibilityDemoRoot,
     AutocompleteAccessibilityDemo,
     ButtonAccessibilityDemo,
     ButtonToggleAccessibilityDemo,

src/a11y-demo/a11y-demo-routes.ts

@@ -17,7 +17,7 @@ import {DialogAccessibilityDemo} from './dialog/dialog-a11y';
 import {ExpansionPanelAccessibilityDemo} from './expansion/expansion-a11y';
 import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
-import {AccessibilityHome} from './a11y';
+import {AccessibilityDemoHome} from './a11y-demo';
 import {ToolbarAccessibilityDemo} from './toolbar/toolbar-a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {IconAccessibilityDemo} from './icon/icon-a11y';
@@ -40,7 +40,7 @@ import {SidenavDualAccessibilityDemo} from './sidenav/dual-sidenav-a11y';
 import {SidenavMobileAccessibilityDemo} from './sidenav/mobile-sidenav-a11y';
 
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
-  {path: '', component: AccessibilityHome},
+  {path: '', component: AccessibilityDemoHome},
   {path: 'autocomplete', component: AutocompleteAccessibilityDemo},
   {path: 'button', component: ButtonAccessibilityDemo},
   {path: 'button-toggle', component: ButtonToggleAccessibilityDemo},

src/a11y-demo/a11y-demo.ts

@@ -10,23 +10,13 @@ import {Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
 import {NavigationEnd, Router} from '@angular/router';
 import {Subscription} from 'rxjs';
 
-
 @Component({
   moduleId: module.id,
-  selector: 'accessibility-home',
-  template: `<p>Welcome to the accessibility demos for Angular Material!</p>`,
+  templateUrl: 'a11y-demo.html',
+  styleUrls: ['a11y-demo.css'],
 })
-export class AccessibilityHome {}
-
-@Component({
-  moduleId: module.id,
-  selector: 'accessibility-demo',
-  templateUrl: 'a11y.html',
-  styleUrls: ['a11y.css'],
-})
-export class AccessibilityDemo implements OnDestroy {
+export class AccessibilityDemoRoot implements OnDestroy {
   currentComponent = '';
-
   fullscreen = false;
 
   private _routerSubscription = Subscription.EMPTY;
@@ -90,3 +80,10 @@ export class AccessibilityDemo implements OnDestroy {
     this._routerSubscription.unsubscribe();
   }
 }
+
+@Component({
+  moduleId: module.id,
+  selector: 'accessibility-home',
+  template: `<p>Welcome to the accessibility examples for Angular Material!</p>`,
+})
+export class AccessibilityDemoHome {}

src/a11y-demo/a11y-material-module.ts

@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CdkTableModule} from '@angular/cdk/table';
+import {NgModule} from '@angular/core';
+import {
+  MatAutocompleteModule,
+  MatButtonModule,
+  MatButtonToggleModule,
+  MatCardModule,
+  MatCheckboxModule,
+  MatChipsModule,
+  MatDatepickerModule,
+  MatDialogModule,
+  MatExpansionModule,
+  MatGridListModule,
+  MatIconModule,
+  MatInputModule,
+  MatListModule,
+  MatMenuModule,
+  MatPaginatorModule,
+  MatProgressBarModule,
+  MatProgressSpinnerModule,
+  MatRadioModule,
+  MatSelectModule,
+  MatSidenavModule,
+  MatSliderModule,
+  MatSlideToggleModule,
+  MatSnackBarModule,
+  MatTableModule,
+  MatTabsModule,
+  MatToolbarModule,
+  MatTooltipModule,
+} from '@angular/material';
+
+/**
+ * NgModule that includes all Material modules that are required to serve the dev-app.
+ */
+@NgModule({
+  exports: [
+    CdkTableModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatTableModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+  ]
+})
+export class DemoMaterialModule {}

src/a11y-demo/tooltip/tooltip-a11y.html

@@ -1,45 +1,45 @@
-<section>
-  <h2>Mouse over or tab to trigger a tooltip</h2>
-  <p>Mouse over or focus the button to show and hide the tooltip</p>
-  <button mat-raised-button matTooltip="This is an example of a tooltip">What is this?</button>
-</section>
-
-
-<section>
-  <h2>Click to trigger a tooltip</h2>
-  <button mat-raised-button (click)="tooltip.toggle(); $event.stopPropagation()">Toggle the tooltip</button>
-  <button mat-raised-button matTooltip="This is a tooltip that shows on click" #tooltip="matTooltip">I have a tooltip</button>
-</section>
-
-
-<section>
-  <h2>Different tooltip positions</h2>
-
-  <button
-    mat-raised-button
-    matTooltip="This tooltip appears below the trigger"
-    matTooltipPosition="below">Below</button>
-
-  <button
-    mat-raised-button
-    matTooltip="This tooltip appears above the trigger"
-    matTooltipPosition="above">Above</button>
-
-  <button
-    mat-raised-button
-    matTooltip="This tooltip appears to the left of the trigger"
-    matTooltipPosition="left">Left</button>
-
-  <button
-    mat-raised-button
-    matTooltip="This tooltip appears to the right of the trigger"
-    matTooltipPosition="right">Right</button>
-</section>
-
-<section>
-  <h2>Delayed tooltip</h2>
-  <button
-    mat-raised-button
-    matTooltip="This tooltip will show up after a delay"
-    [matTooltipShowDelay]="2000">What is this?</button>
-</section>
+<section>
+  <h2>Mouse over or tab to trigger a tooltip</h2>
+  <p>Mouse over or focus the button to show and hide the tooltip</p>
+  <button mat-raised-button matTooltip="This is an example of a tooltip">What is this?</button>
+</section>
+
+
+<section>
+  <h2>Click to trigger a tooltip</h2>
+  <button mat-raised-button (click)="tooltip.toggle(); $event.stopPropagation()">Toggle the tooltip</button>
+  <button mat-raised-button matTooltip="This is a tooltip that shows on click" #tooltip="matTooltip">I have a tooltip</button>
+</section>
+
+
+<section>
+  <h2>Different tooltip positions</h2>
+
+  <button
+    mat-raised-button
+    matTooltip="This tooltip appears below the trigger"
+    matTooltipPosition="below">Below</button>
+
+  <button
+    mat-raised-button
+    matTooltip="This tooltip appears above the trigger"
+    matTooltipPosition="above">Above</button>
+
+  <button
+    mat-raised-button
+    matTooltip="This tooltip appears to the left of the trigger"
+    matTooltipPosition="left">Left</button>
+
+  <button
+    mat-raised-button
+    matTooltip="This tooltip appears to the right of the trigger"
+    matTooltipPosition="right">Right</button>
+</section>
+
+<section>
+  <h2>Delayed tooltip</h2>
+  <button
+    mat-raised-button
+    matTooltip="This tooltip will show up after a delay"
+    [matTooltipShowDelay]="2000">What is this?</button>
+</section>