Skip to content

build: update MDC to latest canary and simplify bazel setup #23235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 27, 2021
Merged

build: update MDC to latest canary and simplify bazel setup #23235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
73f8bc0
build: remove unused sass transpile bazel macro
devversion Jul 23, 2021
52e1df9
build: switch to `extract_js_module_output` rule from dev-infra
devversion Jul 23, 2021
eeb4968
build: update MDC to latest canary and simplify bazel setup
devversion Jul 23, 2021
7e16ea5
build: remove `expand_template` bazel rule with dev-infra rule
devversion Jul 23, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion integration/size-test/index.bzl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
load("@npm//@angular/dev-infra-private/bazel:expand_template.bzl", "expand_template")
load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary", "nodejs_test")
load("@bazel_skylib//lib:paths.bzl", "paths")
load("@npm//@bazel/rollup:index.bzl", "rollup_bundle")
load("@npm//@bazel/terser:index.bzl", "terser_minified")
load("//tools:defaults.bzl", "ng_module")
load("//tools:expand_template.bzl", "expand_template")

"""
Performs size measurements for the specified file. The file will be built as part
Expand Down
98 changes: 49 additions & 49 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
"@types/googlemaps": "^3.43.1",
"@types/youtube": "^0.0.42",
"core-js-bundle": "^3.8.2",
"material-components-web": "12.0.0-canary.22d29cbb4.0",
"material-components-web": "12.0.0-canary.5f00e454a.0",
"rxjs": "^6.5.3",
"rxjs-tslint-rules": "^4.33.1",
"systemjs": "0.19.43",
Expand Down Expand Up @@ -96,54 +96,54 @@
"@bazel/terser": "4.0.0-beta.0",
"@bazel/typescript": "4.0.0-beta.0",
"@firebase/app-types": "^0.6.1",
"@material/animation": "12.0.0-canary.22d29cbb4.0",
"@material/auto-init": "12.0.0-canary.22d29cbb4.0",
"@material/banner": "12.0.0-canary.22d29cbb4.0",
"@material/base": "12.0.0-canary.22d29cbb4.0",
"@material/button": "12.0.0-canary.22d29cbb4.0",
"@material/card": "12.0.0-canary.22d29cbb4.0",
"@material/checkbox": "12.0.0-canary.22d29cbb4.0",
"@material/chips": "12.0.0-canary.22d29cbb4.0",
"@material/circular-progress": "12.0.0-canary.22d29cbb4.0",
"@material/data-table": "12.0.0-canary.22d29cbb4.0",
"@material/density": "12.0.0-canary.22d29cbb4.0",
"@material/dialog": "12.0.0-canary.22d29cbb4.0",
"@material/dom": "12.0.0-canary.22d29cbb4.0",
"@material/drawer": "12.0.0-canary.22d29cbb4.0",
"@material/elevation": "12.0.0-canary.22d29cbb4.0",
"@material/fab": "12.0.0-canary.22d29cbb4.0",
"@material/feature-targeting": "12.0.0-canary.22d29cbb4.0",
"@material/floating-label": "12.0.0-canary.22d29cbb4.0",
"@material/form-field": "12.0.0-canary.22d29cbb4.0",
"@material/icon-button": "12.0.0-canary.22d29cbb4.0",
"@material/image-list": "12.0.0-canary.22d29cbb4.0",
"@material/layout-grid": "12.0.0-canary.22d29cbb4.0",
"@material/line-ripple": "12.0.0-canary.22d29cbb4.0",
"@material/linear-progress": "12.0.0-canary.22d29cbb4.0",
"@material/list": "12.0.0-canary.22d29cbb4.0",
"@material/menu": "12.0.0-canary.22d29cbb4.0",
"@material/menu-surface": "12.0.0-canary.22d29cbb4.0",
"@material/notched-outline": "12.0.0-canary.22d29cbb4.0",
"@material/radio": "12.0.0-canary.22d29cbb4.0",
"@material/ripple": "12.0.0-canary.22d29cbb4.0",
"@material/rtl": "12.0.0-canary.22d29cbb4.0",
"@material/segmented-button": "12.0.0-canary.22d29cbb4.0",
"@material/select": "12.0.0-canary.22d29cbb4.0",
"@material/shape": "12.0.0-canary.22d29cbb4.0",
"@material/slider": "12.0.0-canary.22d29cbb4.0",
"@material/snackbar": "12.0.0-canary.22d29cbb4.0",
"@material/switch": "12.0.0-canary.22d29cbb4.0",
"@material/tab": "12.0.0-canary.22d29cbb4.0",
"@material/tab-bar": "12.0.0-canary.22d29cbb4.0",
"@material/tab-indicator": "12.0.0-canary.22d29cbb4.0",
"@material/tab-scroller": "12.0.0-canary.22d29cbb4.0",
"@material/textfield": "12.0.0-canary.22d29cbb4.0",
"@material/theme": "12.0.0-canary.22d29cbb4.0",
"@material/tooltip": "12.0.0-canary.22d29cbb4.0",
"@material/top-app-bar": "12.0.0-canary.22d29cbb4.0",
"@material/touch-target": "12.0.0-canary.22d29cbb4.0",
"@material/typography": "12.0.0-canary.22d29cbb4.0",
"@octokit/rest": "18.6.7",
"@material/animation": "12.0.0-canary.5f00e454a.0",
"@material/auto-init": "12.0.0-canary.5f00e454a.0",
"@material/banner": "12.0.0-canary.5f00e454a.0",
"@material/base": "12.0.0-canary.5f00e454a.0",
"@material/button": "12.0.0-canary.5f00e454a.0",
"@material/card": "12.0.0-canary.5f00e454a.0",
"@material/checkbox": "12.0.0-canary.5f00e454a.0",
"@material/chips": "12.0.0-canary.5f00e454a.0",
"@material/circular-progress": "12.0.0-canary.5f00e454a.0",
"@material/data-table": "12.0.0-canary.5f00e454a.0",
"@material/density": "12.0.0-canary.5f00e454a.0",
"@material/dialog": "12.0.0-canary.5f00e454a.0",
"@material/dom": "12.0.0-canary.5f00e454a.0",
"@material/drawer": "12.0.0-canary.5f00e454a.0",
"@material/elevation": "12.0.0-canary.5f00e454a.0",
"@material/fab": "12.0.0-canary.5f00e454a.0",
"@material/feature-targeting": "12.0.0-canary.5f00e454a.0",
"@material/floating-label": "12.0.0-canary.5f00e454a.0",
"@material/form-field": "12.0.0-canary.5f00e454a.0",
"@material/icon-button": "12.0.0-canary.5f00e454a.0",
"@material/image-list": "12.0.0-canary.5f00e454a.0",
"@material/layout-grid": "12.0.0-canary.5f00e454a.0",
"@material/line-ripple": "12.0.0-canary.5f00e454a.0",
"@material/linear-progress": "12.0.0-canary.5f00e454a.0",
"@material/list": "12.0.0-canary.5f00e454a.0",
"@material/menu": "12.0.0-canary.5f00e454a.0",
"@material/menu-surface": "12.0.0-canary.5f00e454a.0",
"@material/notched-outline": "12.0.0-canary.5f00e454a.0",
"@material/radio": "12.0.0-canary.5f00e454a.0",
"@material/ripple": "12.0.0-canary.5f00e454a.0",
"@material/rtl": "12.0.0-canary.5f00e454a.0",
"@material/segmented-button": "12.0.0-canary.5f00e454a.0",
"@material/select": "12.0.0-canary.5f00e454a.0",
"@material/shape": "12.0.0-canary.5f00e454a.0",
"@material/slider": "12.0.0-canary.5f00e454a.0",
"@material/snackbar": "12.0.0-canary.5f00e454a.0",
"@material/switch": "12.0.0-canary.5f00e454a.0",
"@material/tab": "12.0.0-canary.5f00e454a.0",
"@material/tab-bar": "12.0.0-canary.5f00e454a.0",
"@material/tab-indicator": "12.0.0-canary.5f00e454a.0",
"@material/tab-scroller": "12.0.0-canary.5f00e454a.0",
"@material/textfield": "12.0.0-canary.5f00e454a.0",
"@material/theme": "12.0.0-canary.5f00e454a.0",
"@material/tooltip": "12.0.0-canary.5f00e454a.0",
"@material/top-app-bar": "12.0.0-canary.5f00e454a.0",
"@material/touch-target": "12.0.0-canary.5f00e454a.0",
"@material/typography": "12.0.0-canary.5f00e454a.0",
"@octokit/rest": "18.3.5",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^18.0.0",
"@schematics/angular": "12.1.2",
Expand Down
38 changes: 37 additions & 1 deletion packages.bzl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
# version for the placeholders.
ANGULAR_PACKAGE_VERSION = "^12.0.0 || ^13.0.0-0"
MDC_PACKAGE_VERSION = "12.0.0-canary.22d29cbb4.0"
MDC_PACKAGE_VERSION = "12.0.0-canary.5f00e454a.0"
TSLIB_PACKAGE_VERSION = "^2.2.0"
RXJS_PACKAGE_VERSION = "^6.5.3"

Expand All @@ -22,6 +22,42 @@ VERSION_PLACEHOLDER_REPLACEMENTS = {
"0.0.0-RXJS": RXJS_PACKAGE_VERSION,
}

# Map of MDC packages and their UMD bundles. These are used for unit tests and the dev-app.
MDC_PACKAGE_UMD_BUNDLES = {
"@material/animation": "@npm//:node_modules/@material/animation/dist/mdc.animation.js",
"@material/auto-init": "@npm//:node_modules/@material/auto-init/dist/mdc.autoInit.js",
"@material/base": "@npm//:node_modules/@material/base/dist/mdc.base.js",
"@material/checkbox": "@npm//:node_modules/@material/checkbox/dist/mdc.checkbox.js",
"@material/chips": "@npm//:node_modules/@material/chips/dist/mdc.chips.js",
"@material/circular-progress": "@npm//:node_modules/@material/circular-progress/dist/mdc.circularProgress.js",
"@material/data-table": "@npm//:node_modules/@material/data-table/dist/mdc.dataTable.js",
"@material/dialog": "@npm//:node_modules/@material/dialog/dist/mdc.dialog.js",
"@material/dom": "@npm//:node_modules/@material/dom/dist/mdc.dom.js",
"@material/drawer": "@npm//:node_modules/@material/drawer/dist/mdc.drawer.js",
"@material/floating-label": "@npm//:node_modules/@material/floating-label/dist/mdc.floatingLabel.js",
"@material/form-field": "@npm//:node_modules/@material/form-field/dist/mdc.formField.js",
"@material/icon-button": "@npm//:node_modules/@material/icon-button/dist/mdc.iconButton.js",
"@material/line-ripple": "@npm//:node_modules/@material/line-ripple/dist/mdc.lineRipple.js",
"@material/linear-progress": "@npm//:node_modules/@material/linear-progress/dist/mdc.linearProgress.js",
"@material/list": "@npm//:node_modules/@material/list/dist/mdc.list.js",
"@material/menu-surface": "@npm//:node_modules/@material/menu-surface/dist/mdc.menuSurface.js",
"@material/menu": "@npm//:node_modules/@material/menu/dist/mdc.menu.js",
"@material/notched-outline": "@npm//:node_modules/@material/notched-outline/dist/mdc.notchedOutline.js",
"@material/radio": "@npm//:node_modules/@material/radio/dist/mdc.radio.js",
"@material/ripple": "@npm//:node_modules/@material/ripple/dist/mdc.ripple.js",
"@material/select": "@npm//:node_modules/@material/select/dist/mdc.select.js",
"@material/slider": "@npm//:node_modules/@material/slider/dist/mdc.slider.js",
"@material/snackbar": "@npm//:node_modules/@material/snackbar/dist/mdc.snackbar.js",
"@material/switch": "@npm//:node_modules/@material/switch/dist/mdc.switch.js",
"@material/tab-bar": "@npm//:node_modules/@material/tab-bar/dist/mdc.tabBar.js",
"@material/tab-indicator": "@npm//:node_modules/@material/tab-indicator/dist/mdc.tabIndicator.js",
"@material/tab-scroller": "@npm//:node_modules/@material/tab-scroller/dist/mdc.tabScroller.js",
"@material/tab": "@npm//:node_modules/@material/tab/dist/mdc.tab.js",
"@material/textfield": "@npm//:node_modules/@material/textfield/dist/mdc.textfield.js",
"@material/tooltip": "@npm//:node_modules/@material/tooltip/dist/mdc.tooltip.js",
"@material/top-app-bar": "@npm//:node_modules/@material/top-app-bar/dist/mdc.topAppBar.js",
}

# List of default Angular library UMD bundles which are not processed by ngcc.
ANGULAR_NO_NGCC_BUNDLES = [
("@angular/compiler", ["compiler.umd.js"]),
Expand Down
48 changes: 13 additions & 35 deletions rollup-globals.bzl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ load(
"MATERIAL_EXPERIMENTAL_ENTRYPOINTS",
"MATERIAL_EXPERIMENTAL_TESTING_ENTRYPOINTS",
)
load("//:packages.bzl", "MDC_PACKAGE_UMD_BUNDLES")

# Base rollup globals for everything in the repo. Note that we want to disable
# sorting of the globals as we manually group dict entries.
Expand Down Expand Up @@ -37,42 +38,9 @@ ROLLUP_GLOBALS = {
"@angular/material-luxon-adapter": "ng.materialLuxonAdapter",
"@angular/youtube-player": "ng.youtubePlayer",

# MDC Web
"@material/animation": "mdc.animation",
"@material/auto-init": "mdc.autoInit",
"@material/base": "mdc.base",
# This UMD module name would not match with anything that MDC provides, but we just
# add this to make the linter happy. This module resolves to a type-only file anyways.
"@material/base/types": "mdc.base.types",
"@material/checkbox": "mdc.checkbox",
"@material/circular-progress": "mdc.circularProgress",
"@material/chips": "mdc.chips",
"@material/dialog": "mdc.dialog",
"@material/dom": "mdc.dom",
"@material/drawer": "mdc.drawer",
"@material/floating-label": "mdc.floatingLabel",
"@material/form-field": "mdc.formField",
"@material/grid-list": "mdc.gridList",
"@material/icon-button": "mdc.iconButton",
"@material/line-ripple": "mdc.lineRipple",
"@material/linear-progress": "mdc.linearProgress",
"@material/list": "mdc.list",
"@material/menu": "mdc.menu",
"@material/menu-surface": "mdc.menuSurface",
"@material/notched-outline": "mdc.notchedOutline",
"@material/radio": "mdc.radio",
"@material/ripple": "mdc.ripple",
"@material/select": "mdc.select",
"@material/slider": "mdc.slider",
"@material/snackbar": "mdc.snackbar",
"@material/switch": "mdc.switch",
"@material/tab": "mdc.tab",
"@material/tab-bar": "mdc.tabBar",
"@material/tab-indicator": "mdc.tabIndicator",
"@material/tab-scroller": "mdc.tabScroller",
"@material/textfield": "mdc.textfield",
"@material/tooltip": "mdc.tooltip",
"@material/top-app-bar": "mdc.topAppBar",

# Third-party libraries.
"kagekiri": "kagekiri",
Expand All @@ -87,15 +55,23 @@ ROLLUP_GLOBALS = {
}

# Converts a string from dash-case to lower camel case.
def to_camel_case(input):
def to_lower_camel_case(input):
segments = input.split("-")
return segments[0] + "".join([x.title() for x in segments[1:]])

# Configures the rollup globals for all MDC packages.
def setup_mdc_globals():
for pkg_name in MDC_PACKAGE_UMD_BUNDLES:
entry_point_name = pkg_name[len("@material/"):]
pkg_umd_name = "mdc.%s" % to_lower_camel_case(entry_point_name)

ROLLUP_GLOBALS.update({pkg_name: pkg_umd_name})

# Converts an entry-point name to a UMD module name.
# e.g. "snack-bar/testing" will become "snackBar.testing".
def to_umd_name(name):
segments = name.split("/")
return ".".join([to_camel_case(x) for x in segments])
return ".".join([to_lower_camel_case(x) for x in segments])

# Creates globals for a given package and its entry-points.
def create_globals(packageName, entryPoints):
Expand All @@ -104,6 +80,8 @@ def create_globals(packageName, entryPoints):
for ep in entryPoints
})

setup_mdc_globals()

create_globals("cdk", CDK_ENTRYPOINTS)
create_globals("cdk-experimental", CDK_EXPERIMENTAL_ENTRYPOINTS)
create_globals("material", MATERIAL_ENTRYPOINTS + MATERIAL_TESTING_ENTRYPOINTS)
Expand Down
46 changes: 11 additions & 35 deletions src/dev-app/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
load("@npm//@angular/dev-infra-private/bazel:extract_js_module_output.bzl", "extract_js_module_output")
load("@build_bazel_rules_nodejs//:index.bzl", "pkg_web")
load("//:packages.bzl", "MDC_PACKAGE_UMD_BUNDLES")
load("//tools:create-system-config.bzl", "create_system_config")
load("//tools:defaults.bzl", "ng_module", "sass_binary")
load("//tools:es5-module-output.bzl", "es5_module_output")
load("//tools/dev-server:index.bzl", "dev_server")

package(default_visibility = ["//visibility:public"])
Expand Down Expand Up @@ -142,45 +143,13 @@ filegroup(
":variables",
"//src/dev-app/icon:icon_demo_assets",
"//tools:system-rxjs-operators.js",
"@npm//:node_modules/@material/animation/dist/mdc.animation.js",
"@npm//:node_modules/@material/auto-init/dist/mdc.autoInit.js",
"@npm//:node_modules/@material/base/dist/mdc.base.js",
"@npm//:node_modules/@material/checkbox/dist/mdc.checkbox.js",
"@npm//:node_modules/@material/chips/dist/mdc.chips.js",
"@npm//:node_modules/@material/circular-progress/dist/mdc.circularProgress.js",
"@npm//:node_modules/@material/data-table/dist/mdc.dataTable.js",
"@npm//:node_modules/@material/dialog/dist/mdc.dialog.js",
"@npm//:node_modules/@material/dom/dist/mdc.dom.js",
"@npm//:node_modules/@material/drawer/dist/mdc.drawer.js",
"@npm//:node_modules/@material/floating-label/dist/mdc.floatingLabel.js",
"@npm//:node_modules/@material/form-field/dist/mdc.formField.js",
"@npm//:node_modules/@material/icon-button/dist/mdc.iconButton.js",
"@npm//:node_modules/@material/line-ripple/dist/mdc.lineRipple.js",
"@npm//:node_modules/@material/linear-progress/dist/mdc.linearProgress.js",
"@npm//:node_modules/@material/list/dist/mdc.list.js",
"@npm//:node_modules/@material/menu-surface/dist/mdc.menuSurface.js",
"@npm//:node_modules/@material/menu/dist/mdc.menu.js",
"@npm//:node_modules/@material/notched-outline/dist/mdc.notchedOutline.js",
"@npm//:node_modules/@material/radio/dist/mdc.radio.js",
"@npm//:node_modules/@material/ripple/dist/mdc.ripple.js",
"@npm//:node_modules/@material/select/dist/mdc.select.js",
"@npm//:node_modules/@material/slider/dist/mdc.slider.js",
"@npm//:node_modules/@material/snackbar/dist/mdc.snackbar.js",
"@npm//:node_modules/@material/switch/dist/mdc.switch.js",
"@npm//:node_modules/@material/tab-bar/dist/mdc.tabBar.js",
"@npm//:node_modules/@material/tab-indicator/dist/mdc.tabIndicator.js",
"@npm//:node_modules/@material/tab-scroller/dist/mdc.tabScroller.js",
"@npm//:node_modules/@material/tab/dist/mdc.tab.js",
"@npm//:node_modules/@material/textfield/dist/mdc.textfield.js",
"@npm//:node_modules/@material/tooltip/dist/mdc.tooltip.js",
"@npm//:node_modules/@material/top-app-bar/dist/mdc.topAppBar.js",
"@npm//:node_modules/core-js-bundle/index.js",
"@npm//:node_modules/moment/min/moment-with-locales.min.js",
"@npm//:node_modules/rxjs/bundles/rxjs.umd.min.js",
"@npm//:node_modules/systemjs/dist/system.js",
"@npm//:node_modules/tslib/tslib.js",
"@npm//:node_modules/zone.js/dist/zone.js",
],
] + MDC_PACKAGE_UMD_BUNDLES.values(),
)

dev_server(
Expand All @@ -200,8 +169,15 @@ dev_server(

# Collects all ES5 JavaScript files which are required to serve the dev-app. By default,
# ts_library and ng_module targets only expose the type definition files as outputs.
es5_module_output(
extract_js_module_output(
name = "dev_app_js_sources",
include_declarations = False,
include_default_files = True,
# `JSModuleInfo` resolves to the ES5 sources from TypeScript targets. See:
# https://github.com/bazelbuild/rules_nodejs/blob/stable/packages/typescript/internal/build_defs.bzl#L334-L337
# Note: We cannot use the named JS module provider because not all dependencies are
# necessarily captured as named module. See: https://github.com/angular/components/commit/94289397cac94ca86a292b2cd64945df52bbb7fb.
provider = "JSModuleInfo",
tags = ["manual"],
deps = [":dev-app"],
)
Expand Down
4 changes: 2 additions & 2 deletions src/e2e-app/BUILD.bazel
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
load("@npm//@bazel/concatjs:index.bzl", "concatjs_devserver")
load("//:packages.bzl", "getAngularUmdTargets")
load("//:packages.bzl", "MDC_PACKAGE_UMD_BUNDLES", "getAngularUmdTargets")
load("//tools:defaults.bzl", "ng_module", "sass_binary")

package(default_visibility = ["//visibility:public"])
Expand Down Expand Up @@ -109,7 +109,7 @@ concatjs_devserver(
":devserver-configure.js",
"//tools/rxjs:rxjs_umd_modules",
"@npm//:node_modules/tslib/tslib.js",
] + getAngularUmdTargets(),
] + getAngularUmdTargets() + MDC_PACKAGE_UMD_BUNDLES.values(),
# Name of the generated `concatjs` bundle that is built based on the labels in `deps` and `scripts`.
serving_path = "/bundle.js",
static_files = devserverIndexHtmlDependencies,
Expand Down
Loading