build: restructure demo-app in favor of 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/demo-app/a11y/a11y-module.ts → 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/demo-app/a11y/routes.ts → 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/demo-app/a11y/a11y.ts → 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>`,
-})
-export class AccessibilityHome {}
-
 @Component({
   moduleId: module.id,
-  selector: 'accessibility-demo',
-  templateUrl: 'a11y.html',
-  styleUrls: ['a11y.css'],
+  templateUrl: 'a11y-demo.html',
+  styleUrls: ['a11y-demo.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 {}