Skip to content

Commit fcd9bf7

Browse files
devversionjelbourn
devversion
authored and
jelbourn
committed
build: fine-grain examples for dev-app pages (#17608)
We should not use the kitchen-sink `ExampleModule` for showing a subset of examples in a dev-app page. This slows down the loading page significantly since each example is loaded. Instead we should use fine-grained examples which will be lazy-loaded. This opens up the possibility to speed up the dev-app turnaround overall. i.e. by dropping the dependency on the kitchen-sink `ExampleModule` eventually.
1 parent 69ccd34 commit fcd9bf7

23 files changed

+185
-50
lines changed

‎src/dev-app/popover-edit/BUILD.bazel

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ ng_module(
77
srcs = glob(["**/*.ts"]),
88
deps = [
99
"//src/dev-app/example",
10-
"//src/material-examples:examples",
10+
"//src/material-examples/cdk-experimental/popover-edit",
11+
"//src/material-examples/material-experimental/popover-edit",
1112
"@npm//@angular/forms",
1213
"@npm//@angular/router",
1314
],

‎src/dev-app/popover-edit/popover-edit-demo-module.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,19 @@
88

99
import {NgModule} from '@angular/core';
1010
import {FormsModule} from '@angular/forms';
11+
import {
12+
CdkPopoverEditExamplesModule
13+
} from '@angular/material-examples/cdk-experimental/popover-edit/module';
14+
import {
15+
PopoverEditExamplesModule
16+
} from '@angular/material-examples/material-experimental/popover-edit/module';
1117
import {RouterModule} from '@angular/router';
12-
import {ExampleModule} from '../example/example-module';
1318
import {PopoverEditDemo} from './popover-edit-demo';
1419

1520
@NgModule({
1621
imports: [
17-
ExampleModule,
22+
CdkPopoverEditExamplesModule,
23+
PopoverEditExamplesModule,
1824
FormsModule,
1925
RouterModule.forChild([{path: '', component: PopoverEditDemo}]),
2026
],

‎src/dev-app/popover-edit/popover-edit-demo.ts

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,30 @@
77
*/
88

99
import {Component} from '@angular/core';
10-
import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
11-
1210

1311
@Component({
1412
moduleId: module.id,
15-
template: '<material-example-list [ids]="examples"></material-example-list>',
13+
template: `
14+
<h3>CDK popover-edit with cdk-table</h3>
15+
<cdk-popover-edit-cdk-table-example></cdk-popover-edit-cdk-table-example>
16+
<h3>CDK popover-edit with cdk-table flex</h3>
17+
<cdk-popover-edit-cdk-table-flex-example></cdk-popover-edit-cdk-table-flex-example>
18+
<h3>CDK popover-edit with vanilla table</h3>
19+
<cdk-popover-edit-cell-span-vanilla-table-example>
20+
</cdk-popover-edit-cell-span-vanilla-table-example>
21+
<h3>CDK popover-edit with vanilla table and tab out</h3>
22+
<cdk-popover-edit-tab-out-vanilla-table-example>
23+
</cdk-popover-edit-tab-out-vanilla-table-example>
24+
<h3>CDK popover-edit with vanilla table</h3>
25+
<cdk-popover-edit-vanilla-table-example></cdk-popover-edit-vanilla-table-example>
26+
<h3>Material popover-edit with mat-table and cell span</h3>
27+
<popover-edit-cell-span-mat-table-example></popover-edit-cell-span-mat-table-example>
28+
<h3>Material popover-edit with mat-table</h3>
29+
<popover-edit-mat-table-example></popover-edit-mat-table-example>
30+
<h3>Material popover-edit with mat-table flex</h3>
31+
<popover-edit-mat-table-flex-example></popover-edit-mat-table-flex-example>
32+
<h3>Material popover-edit with mat</h3>
33+
<popover-edit-tab-out-mat-table-example></popover-edit-tab-out-mat-table-example>
34+
`,
1635
})
17-
export class PopoverEditDemo {
18-
examples = Object.keys(EXAMPLE_COMPONENTS)
19-
.filter(example => example.startsWith('popover-edit-') ||
20-
example.startsWith('cdk-popover-edit-'));
21-
}
36+
export class PopoverEditDemo {}

‎src/dev-app/ripple/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ ng_module(
1111
],
1212
deps = [
1313
"//src/dev-app/example",
14+
"//src/material-examples/material/core",
1415
"//src/material/button",
1516
"//src/material/checkbox",
1617
"//src/material/icon",

‎src/dev-app/ripple/ripple-demo-module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,17 @@
88

99
import {NgModule} from '@angular/core';
1010
import {FormsModule} from '@angular/forms';
11+
import {CoreExamplesModule} from '@angular/material-examples/material/core/module';
1112
import {MatButtonModule} from '@angular/material/button';
1213
import {MatCheckboxModule} from '@angular/material/checkbox';
1314
import {MatIconModule} from '@angular/material/icon';
1415
import {MatInputModule} from '@angular/material/input';
1516
import {RouterModule} from '@angular/router';
16-
import {ExampleModule} from '../example/example-module';
1717
import {RippleDemo} from './ripple-demo';
1818

1919
@NgModule({
2020
imports: [
21-
ExampleModule,
21+
CoreExamplesModule,
2222
FormsModule,
2323
MatButtonModule,
2424
MatCheckboxModule,

‎src/dev-app/ripple/ripple-demo.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,6 @@
1313

1414
<hr>
1515

16-
<material-example id="ripple-overview"></material-example>
16+
<h3>Ripple overview example</h3>
17+
<ripple-overview-example></ripple-overview-example>
1718
</div>

‎src/dev-app/table/BUILD.bazel

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ load("//tools:defaults.bzl", "ng_module")
55
ng_module(
66
name = "table",
77
srcs = glob(["**/*.ts"]),
8+
assets = ["table-demo.html"],
89
deps = [
910
"//src/dev-app/example",
10-
"//src/material-examples:examples",
11+
"//src/material-examples/cdk/table",
12+
"//src/material-examples/material/table",
1113
"@npm//@angular/router",
1214
],
1315
)

‎src/dev-app/table/table-demo-module.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,14 @@
88

99
import {NgModule} from '@angular/core';
1010
import {RouterModule} from '@angular/router';
11-
import {ExampleModule} from '../example/example-module';
11+
import {CdkTableExamplesModule} from '@angular/material-examples/cdk/table/module';
12+
import {TableExamplesModule} from '@angular/material-examples/material/table/module';
1213
import {TableDemo} from './table-demo';
1314

1415
@NgModule({
1516
imports: [
16-
ExampleModule,
17+
CdkTableExamplesModule,
18+
TableExamplesModule,
1719
RouterModule.forChild([{path: '', component: TableDemo}]),
1820
],
1921
declarations: [TableDemo],

‎src/dev-app/table/table-demo.html

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<h3>Cdk table basic</h3>
2+
<cdk-table-basic-example></cdk-table-basic-example>
3+
4+
<h3>Cdk table basic flex</h3>
5+
<cdk-table-basic-flex-example></cdk-table-basic-flex-example>
6+
7+
<h3>Table basic</h3>
8+
<table-basic-example></table-basic-example>
9+
10+
<h3>Table basic flex</h3>
11+
<table-basic-flex-example></table-basic-flex-example>
12+
13+
<h3>Table dynamic columns</h3>
14+
<table-dynamic-columns-example></table-dynamic-columns-example>
15+
16+
<h3>Table expandable rows</h3>
17+
<table-expandable-rows-example></table-expandable-rows-example>
18+
19+
<h3>Table filtering</h3>
20+
<table-filtering-example></table-filtering-example>
21+
22+
<h3>Table footer row</h3>
23+
<table-footer-row-example></table-footer-row-example>
24+
25+
<h3>Table with http</h3>
26+
<table-http-example></table-http-example>
27+
28+
<h3>Table with multiple headers and footers</h3>
29+
<table-multiple-header-footer-example></table-multiple-header-footer-example>
30+
31+
<h3>Table overview</h3>
32+
<table-overview-example></table-overview-example>
33+
34+
<h3>Table row context</h3>
35+
<table-row-context-example></table-row-context-example>
36+
37+
<h3>Table with pagination</h3>
38+
<table-pagination-example></table-pagination-example>
39+
40+
<h3>Table with selection</h3>
41+
<table-selection-example></table-selection-example>
42+
43+
<h3>Table with sorting</h3>
44+
<table-sorting-example></table-sorting-example>
45+
46+
<h3>Table with sticky columns</h3>
47+
<table-sticky-columns-example></table-sticky-columns-example>
48+
49+
<h3>Table with sticky headers, footers and columns</h3>
50+
<table-sticky-complex-example></table-sticky-complex-example>
51+
52+
<h3>Table flex with sticky headers, footers and columns</h3>
53+
<table-sticky-complex-flex-example></table-sticky-complex-flex-example>
54+
55+
<h3>Table with sticky footer</h3>
56+
<table-sticky-footer-example></table-sticky-footer-example>
57+
58+
<h3>Table with sticky header</h3>
59+
<table-sticky-header-example></table-sticky-header-example>
60+
61+
<h3>Table with mat-text-column</h3>
62+
<table-text-column-example></table-text-column-example>
63+
64+
<h3>Table with mat-text-column advanced</h3>
65+
<table-text-column-advanced-example></table-text-column-advanced-example>
66+
67+
<h3>Table wrapped in reusable component</h3>
68+
<table-wrapped-example></table-wrapped-example>

‎src/dev-app/table/table-demo.ts

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,9 @@
77
*/
88

99
import {Component} from '@angular/core';
10-
import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
11-
1210

1311
@Component({
1412
moduleId: module.id,
15-
template: '<material-example-list [ids]="examples"></material-example-list>',
13+
templateUrl: './table-demo.html',
1614
})
17-
export class TableDemo {
18-
examples = Object.keys(EXAMPLE_COMPONENTS)
19-
.filter(example => example.startsWith('table-') || example.startsWith('cdk-table-'));
20-
}
15+
export class TableDemo {}

‎src/dev-app/tabs/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ ng_module(
88
assets = ["tabs-demo.html"],
99
deps = [
1010
"//src/dev-app/example",
11-
"//src/material-examples:examples",
11+
"//src/material-examples/material/tabs",
1212
"//src/material/tabs",
1313
"@npm//@angular/router",
1414
],

‎src/dev-app/tabs/tabs-demo-module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
import {NgModule} from '@angular/core';
1010
import {MatTabsModule} from '@angular/material/tabs';
1111
import {RouterModule} from '@angular/router';
12-
import {ExampleModule} from '../example/example-module';
12+
import {TabGroupExamplesModule} from '@angular/material-examples/material/tabs/module';
1313
import {TabsDemo} from './tabs-demo';
1414

1515
@NgModule({
1616
imports: [
17-
ExampleModule,
17+
TabGroupExamplesModule,
1818
MatTabsModule,
1919
RouterModule.forChild([{path: '', component: TabsDemo}]),
2020
],

‎src/dev-app/tabs/tabs-demo.html

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,22 @@
1-
<material-example-list [ids]="examples"></material-example-list>
1+
<h3>Tab group alignment</h3>
2+
<tab-group-align-example></tab-group-align-example>
3+
<h3>Tab group animations</h3>
4+
<tab-group-animations-example></tab-group-animations-example>
5+
<h3>Tab group async</h3>
6+
<tab-group-async-example></tab-group-async-example>
7+
<h3>Tab group basic</h3>
8+
<tab-group-basic-example></tab-group-basic-example>
9+
<h3>Tab group with custom label</h3>
10+
<tab-group-custom-label-example></tab-group-custom-label-example>
11+
<h3>Tab group dynamic</h3>
12+
<tab-group-dynamic-example></tab-group-dynamic-example>
13+
<h3>Tab group with dynamic height</h3>
14+
<tab-group-dynamic-height-example></tab-group-dynamic-height-example>
15+
<h3>Tab group with lazy loaded content</h3>
16+
<tab-group-lazy-loaded-example></tab-group-lazy-loaded-example>
17+
<h3>Tab group stretched</h3>
18+
<tab-group-stretched-example></tab-group-stretched-example>
19+
<h3>Tab group theming</h3>
20+
<tab-group-theme-example></tab-group-theme-example>
21+
<h3>Tab Navigation Bar basic</h3>
22+
<tab-nav-bar-basic-example></tab-nav-bar-basic-example>

‎src/dev-app/tabs/tabs-demo.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,10 @@
77
*/
88

99
import {Component} from '@angular/core';
10-
import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
1110

1211
@Component({
1312
moduleId: module.id,
1413
selector: 'tabs-demo',
1514
templateUrl: 'tabs-demo.html',
1615
})
17-
export class TabsDemo {
18-
examples = Object.keys(EXAMPLE_COMPONENTS).filter(example => example.startsWith('tab-'));
19-
}
16+
export class TabsDemo {}

‎src/dev-app/tooltip/BUILD.bazel

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ ng_module(
88
assets = ["tooltip-demo.html"],
99
deps = [
1010
"//src/dev-app/example",
11-
"//src/material-examples:examples",
11+
"//src/material-examples/material/tooltip",
1212
"@npm//@angular/router",
1313
],
1414
)

‎src/dev-app/tooltip/tooltip-demo-module.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88

99
import {NgModule} from '@angular/core';
1010
import {RouterModule} from '@angular/router';
11-
import {ExampleModule} from '../example/example-module';
11+
import {TooltipExamplesModule} from '@angular/material-examples/material/tooltip/module';
1212
import {TooltipDemo} from './tooltip-demo';
1313

1414
@NgModule({
1515
imports: [
16-
ExampleModule,
16+
TooltipExamplesModule,
1717
RouterModule.forChild([{path: '', component: TooltipDemo}]),
1818
],
1919
declarations: [TooltipDemo],

‎src/dev-app/tooltip/tooltip-demo.html

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,26 @@
1-
<material-example-list [ids]="examples" expandAll></material-example-list>
1+
<h3>Tooltip auto hide</h3>
2+
<tooltip-auto-hide-example></tooltip-auto-hide-example>
3+
4+
<h3>Tooltip custom class</h3>
5+
<tooltip-custom-class-example></tooltip-custom-class-example>
6+
7+
<h3>Tooltip with delay</h3>
8+
<tooltip-delay-example></tooltip-delay-example>
9+
10+
<h3>Tooltip disabled</h3>
11+
<tooltip-disabled-example></tooltip-disabled-example>
12+
13+
<h3>Tooltip manual</h3>
14+
<tooltip-manual-example></tooltip-manual-example>
15+
16+
<h3>Tooltip message</h3>
17+
<tooltip-message-example></tooltip-message-example>
18+
19+
<h3>Tooltip modified defaults</h3>
20+
<tooltip-modified-defaults-example></tooltip-modified-defaults-example>
21+
22+
<h3>Tooltip overview</h3>
23+
<tooltip-overview-example></tooltip-overview-example>
24+
25+
<h3>Tooltip positioning</h3>
26+
<tooltip-position-example></tooltip-position-example>

‎src/dev-app/tooltip/tooltip-demo.ts

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,10 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88
import {Component} from '@angular/core';
9-
import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
109

1110
@Component({
1211
moduleId: module.id,
1312
selector: 'tooltip-demo',
1413
templateUrl: 'tooltip-demo.html',
1514
})
16-
export class TooltipDemo {
17-
examples = Object.keys(EXAMPLE_COMPONENTS).filter(example => example.startsWith('tooltip-'));
18-
}
15+
export class TooltipDemo {}

‎src/dev-app/tree/BUILD.bazel

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ ng_module(
1616
],
1717
deps = [
1818
"//src/cdk/tree",
19-
"//src/dev-app/example",
19+
"//src/material-examples/cdk/tree",
20+
"//src/material-examples/material/tree",
2021
"//src/material/button",
2122
"//src/material/checkbox",
2223
"//src/material/expansion",

‎src/dev-app/tree/tree-demo-module.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ import {MatInputModule} from '@angular/material/input';
1818
import {MatProgressBarModule} from '@angular/material/progress-bar';
1919
import {MatTreeModule} from '@angular/material/tree';
2020
import {RouterModule} from '@angular/router';
21-
22-
import {ExampleModule} from '../example/example-module';
21+
import {CdkTreeExamplesModule} from '@angular/material-examples/cdk/tree/module';
22+
import {TreeExamplesModule} from '@angular/material-examples/material/tree/module';
2323

2424
import {ChecklistNestedTreeDemo} from './checklist-tree-demo/checklist-nested-tree-demo';
2525
import {ChecklistTreeDemo} from './checklist-tree-demo/checklist-tree-demo';
@@ -30,8 +30,10 @@ import {TreeDemo} from './tree-demo';
3030
@NgModule({
3131
imports: [
3232
CdkTreeModule,
33+
CdkTreeExamplesModule,
3334
CommonModule,
3435
FormsModule,
36+
TreeExamplesModule,
3537
MatButtonModule,
3638
MatExpansionModule,
3739
MatCheckboxModule,
@@ -40,7 +42,6 @@ import {TreeDemo} from './tree-demo';
4042
MatInputModule,
4143
MatTreeModule,
4244
MatProgressBarModule,
43-
ExampleModule,
4445
RouterModule.forChild([{path: '', component: TreeDemo}]),
4546
],
4647
declarations:

0 commit comments

Comments
 (0)