Skip to content

build: serve dev-app with bazel #16829

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.

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 1 commit into from
Aug 21, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
19 changes: 0 additions & 19 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -251,21 +251,6 @@ jobs:

- run: ./scripts/circleci/run-saucelabs-tests.sh

# -----------------------------------------------------------------------------------------
# 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_devapp_aot:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we still build the devapp as a test?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It will be built as part of the bazel build job.

<<: *job_defaults
steps:
- *checkout_code
- *restore_cache
- *yarn_download
- *yarn_install
- *attach_release_output

- run: yarn gulp ci:aot

# -------------------------------------------------------------------------
# Job that pre-render's the universal app with `@angular/platform-server`.
# This verifies that Angular Material can be rendered within Node.
Expand Down Expand Up @@ -495,10 +480,6 @@ workflows:
jobs:
- build_release_packages:
filters: *ignore_presubmit_branch_filter
- build_devapp_aot:
filters: *ignore_presubmit_branch_filter
requires:
- build_release_packages
- publish_snapshots:
filters: *publish_branches_filter
requires:
Expand Down
7 changes: 2 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@
"build": "gulp build-release-packages",
"bazel:buildifier": "find . -type f \\( -name \"*.bzl\" -or -name WORKSPACE -or -name BUILD -or -name BUILD.bazel \\) ! -path \"*/node_modules/*\" | xargs buildifier -v --warnings=attr-cfg,attr-license,attr-non-empty,attr-output-default,attr-single-file,constant-glob,ctx-args,depset-iteration,depset-union,dict-concatenation,duplicated-name,filetype,git-repository,http-archive,integer-division,load,load-on-top,native-build,native-package,output-group,package-name,package-on-top,redefined-variable,repository-name,same-origin-load,string-iteration,unused-variable",
"bazel:format-lint": "yarn -s bazel:buildifier --lint=warn --mode=check",
"dev-app": "gulp serve:devapp",
"dev-app": "bazel run //src/dev-app:devserver",
"test": "bazel test //src/... --test_tag_filters=-e2e,-browser:firefox-local --build_tag_filters=-browser:firefox-local --build_tests_only",
"test-firefox": "bazel test //src/... --test_tag_filters=-e2e,-browser:chromium-local --build_tag_filters=-browser:chromium-local --build_tests_only",
"lint": "gulp lint && yarn -s bazel:format-lint",
"e2e": "bazel test //src/... --test_tag_filters=e2e",
"deploy": "gulp deploy:devapp",
"deploy": "echo 'Not supported yet. Tracked with COMP-230'",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I moved this to the queue since I want to keep this deploy functional; we'll likely want to do some amount of IE and mobile testing with the MDC components as we progress

"webdriver-manager": "webdriver-manager",
"breaking-changes": "gulp breaking-changes",
"gulp": "gulp",
Expand Down Expand Up @@ -75,7 +75,6 @@
"@firebase/app-types": "^0.3.2",
"@octokit/rest": "^16.28.7",
"@schematics/angular": "^8.2.1",
"@types/browser-sync": "^0.0.42",
"@types/chalk": "^0.4.31",
"@types/fs-extra": "^4.0.3",
"@types/glob": "^5.0.33",
Expand All @@ -93,7 +92,6 @@
"@types/run-sequence": "^0.0.29",
"autoprefixer": "^6.7.6",
"axe-webdriverjs": "^1.1.1",
"browser-sync": "^2.26.3",
"chalk": "^1.1.3",
"clang-format": "^1.2.4",
"codelyzer": "^5.1.0",
Expand All @@ -114,7 +112,6 @@
"gulp-util": "^3.0.8",
"hammerjs": "^2.0.8",
"highlight.js": "^9.11.0",
"http-rewrite-middleware": "^0.1.6",
"husky": "^1.3.1",
"inquirer": "^6.2.0",
"jasmine-core": "^3.3.0",
Expand Down
61 changes: 60 additions & 1 deletion src/dev-app/BUILD.bazel
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
package(default_visibility = ["//visibility:public"])

load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
load("@npm_bazel_typescript//:defs.bzl", "ts_devserver")
load("//:packages.bzl", "CDK_EXPERIMENTAL_TARGETS", "CDK_TARGETS", "GOOGLE_MAPS_TARGETS", "MATERIAL_EXPERIMENTAL_SCSS_LIBS", "MATERIAL_EXPERIMENTAL_TARGETS", "MATERIAL_TARGETS")
load("//tools:defaults.bzl", "ng_module")
load("//tools:sass_generate_binaries.bzl", "sass_generate_binaries")
Expand All @@ -27,7 +28,10 @@ ng_module(
"system-rxjs-operators.ts",
],
),
assets = glob(["**/*.html"]) + [
assets = glob(
["**/*.html"],
exclude = ["index.html"],
) + [
":dev_app_scss",
":theme",
],
Expand Down Expand Up @@ -63,3 +67,58 @@ sass_binary(
"//src/material/core:all_themes",
] + MATERIAL_EXPERIMENTAL_SCSS_LIBS,
)

ts_devserver(
name = "devserver",
additional_root_paths = [
"npm/node_modules",
],
port = 4200,
static_files = [
":theme",
"@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/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/grid-list/dist/mdc.gridList.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/top-app-bar/dist/mdc.topAppBar.js",
"@npm//:node_modules/@webcomponents/custom-elements/custom-elements.min.js",
"@npm//:node_modules/core-js/client/core.js",
"@npm//:node_modules/hammerjs/hammer.min.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/zone.js/dist/zone.js",
"@npm//material-components-web",
"index.html",
"system-config.js",
"system-rxjs-operators.js",
],
deps = [
":dev-app",
],
)
23 changes: 12 additions & 11 deletions src/dev-app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,24 @@
window.customElements.forcePolyfill = true;
}
</script>
<script src="node_modules/@webcomponents/custom-elements/custom-elements.min.js"></script>
<script src="@webcomponents/custom-elements/custom-elements.min.js"></script>

<!-- FontAwesome for mat-icon demo. -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<dev-app>Loading...</dev-app>
</body>
<script src="core-js/client/core.js"></script>
<script src="zone.js/dist/zone.js"></script>
<script src="hammerjs/hammer.min.js"></script>

<script src="node_modules/core-js/client/core.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/hammerjs/hammer.min.js"></script>
<script src="systemjs/dist/system.js"></script>
<script src="system-config.js"></script>
<script>
// Workaround until https://github.com/angular/components/issues/13883 has been addressed.
var module = {id: ''};

<script>
System.import('system-config.js').then(function () {
System.import('main');
}).catch(console.error.bind(console));
</script>
</body>
System.import('main').catch(console.error.bind(console));
</script>
</html>
16 changes: 0 additions & 16 deletions src/dev-app/main-aot.ts

This file was deleted.

10 changes: 7 additions & 3 deletions src/dev-app/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@
* found in the LICENSE file at https://angular.io/license
*/

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {MainModule} from './main-module';
/**
* This is the main entry-point for the AOT compilation. File will be used to test AOT support.
*/

import {platformBrowser} from '@angular/platform-browser';
import {MainModuleNgFactory} from './main-module.ngfactory';

platformBrowserDynamic().bootstrapModule(MainModule);
platformBrowser().bootstrapModuleFactory(MainModuleNgFactory);
175 changes: 175 additions & 0 deletions src/dev-app/system-config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
/**
* @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
*/

const CDK_PACKAGES = [
'a11y',
'accordion',
'bidi',
'coercion',
'collections',
'drag-drop',
'keycodes',
'layout',
'observers',
'overlay',
'platform',
'portal',
'scrolling',
'stepper',
'table',
'text-field',
'tree',
];

const CDK_EXPERIMENTAL_PACKAGES = [
'dialog',
'popover-edit',
'scrolling',
];

const MATERIAL_PACKAGES = [
'autocomplete', 'badge',
'bottom-sheet', 'button',
'button-toggle', 'card',
'checkbox', 'chips',
'core', 'datepicker',
'dialog', 'divider',
'expansion', 'form-field',
'grid-list', 'icon',
'input', 'list',
'menu', 'paginator',
'progress-bar', 'progress-spinner',
'radio', 'select',
'sidenav', 'slide-toggle',
'slider', 'snack-bar',
'sort', 'stepper',
'table', 'tabs',
'toolbar', 'tooltip',
'tree',
];

const GOOGLE_MAPS_PACKAGES = [
'google-map',
];

const MATERIAL_EXPERIMENTAL_PACKAGES = [
'mdc-button',
'mdc-card',
'mdc-checkbox',
'mdc-chips',
'mdc-tabs',
'mdc-helpers',
'mdc-menu',
'mdc-radio',
'mdc-slide-toggle',
'popover-edit',
];

/** Bazel runfile path referring to the "src/" folder of the project. */
const srcRunfilePath = 'angular_material/src';

/** Path mappings that will be registered in SystemJS. */
const pathMapping = {};

/** Package configurations that will be used in SystemJS. */
const packagesConfig = {};

// Configure all primary entry-points.
configureEntryPoint('cdk');
configureEntryPoint('cdk-experimental');
configureEntryPoint('material');
configureEntryPoint('material-experimental');
configureEntryPoint('material-examples');
configureEntryPoint('material-moment-adapter');

// Configure all secondary entry-points.
CDK_PACKAGES.forEach(pkgName => configureEntryPoint('cdk', pkgName));
CDK_EXPERIMENTAL_PACKAGES.forEach(pkgName => configureEntryPoint('cdk-experimental', pkgName));
MATERIAL_EXPERIMENTAL_PACKAGES.forEach(
pkgName => configureEntryPoint('material-experimental', pkgName));
MATERIAL_PACKAGES.forEach(pkgName => configureEntryPoint('material', pkgName));
GOOGLE_MAPS_PACKAGES.forEach(pkgName => configureEntryPoint('google-maps', pkgName));

/** Configures the specified package and its entry-point. */
function configureEntryPoint(pkgName, entryPoint) {
if (entryPoint === undefined) {
pathMapping[`@angular/${pkgName}`] = `${srcRunfilePath}/${pkgName}`;
packagesConfig[`${srcRunfilePath}/${pkgName}`] = {main: 'index.js'};
} else {
pathMapping[`@angular/${pkgName}/${entryPoint}`] = `${srcRunfilePath}/${pkgName}/${entryPoint}`;
packagesConfig[`${srcRunfilePath}/${pkgName}/${entryPoint}`] = {main: 'index.js'};
}
}

// Configure the base path and map the different node packages.
System.config({
map: {
'main': 'main.js',
'tslib': 'tslib/tslib.js',
'moment': 'moment/min/moment-with-locales.min.js',

'rxjs': 'rxjs/bundles/rxjs.umd.min.js',
'rxjs/operators': 'system-rxjs-operators.js',

// MDC Web
'@material/animation': '@material/animation/dist/mdc.animation.js',
'@material/auto-init': '@material/auto-init/dist/mdc.autoInit.js',
'@material/base': '@material/base/dist/mdc.base.js',
'@material/checkbox': '@material/checkbox/dist/mdc.checkbox.js',
'@material/chips': '@material/chips/dist/mdc.chips.js',
'@material/dialog': '@material/dialog/dist/mdc.dialog.js',
'@material/dom': '@material/dom/dist/mdc.dom.js',
'@material/drawer': '@material/drawer/dist/mdc.drawer.js',
'@material/floating-label': '@material/floating-label/dist/mdc.floatingLabel.js',
'@material/form-field': '@material/form-field/dist/mdc.formField.js',
'@material/grid-list': '@material/grid-list/dist/mdc.gridList.js',
'@material/icon-button': '@material/icon-button/dist/mdc.iconButton.js',
'@material/line-ripple': '@material/line-ripple/dist/mdc.lineRipple.js',
'@material/linear-progress': '@material/linear-progress/dist/mdc.linearProgress.js',
'@material/list': '@material/list/dist/mdc.list.js',
'@material/menu': '@material/menu/dist/mdc.menu.js',
'@material/menu-surface': '@material/menu-surface/dist/mdc.menuSurface.js',
'@material/notched-outline': '@material/notched-outline/dist/mdc.notchedOutline.js',
'@material/radio': '@material/radio/dist/mdc.radio.js',
'@material/ripple': '@material/ripple/dist/mdc.ripple.js',
'@material/select': '@material/select/dist/mdc.select.js',
'@material/slider': '@material/slider/dist/mdc.slider.js',
'@material/snackbar': '@material/snackbar/dist/mdc.snackbar.js',
'@material/switch': '@material/switch/dist/mdc.switch.js',
'@material/tab': '@material/tab/dist/mdc.tab.js',
'@material/tab-bar': '@material/tab-bar/dist/mdc.tabBar.js',
'@material/tab-indicator': '@material/tab-indicator/dist/mdc.tabIndicator.js',
'@material/tab-scroller': '@material/tab-scroller/dist/mdc.tabScroller.js',
'@material/text-field': '@material/textfield/dist/mdc.textfield.js',
'@material/top-app-bar': '@material/top-app-bar/dist/mdc.topAppBar.js',

...pathMapping,
},
packages: {
// Set the default extension for the root package, because otherwise the dev-app can't
// be built within the production mode. Due to missing file extensions.
'.': {defaultExtension: 'js'},

// Angular specific mappings.
'@angular/core': {main: 'bundles/core.umd.js'},
'@angular/common': {main: 'bundles/common.umd.js'},
'@angular/common/http': {main: '../bundles/common-http.umd.js'},
'@angular/compiler': {main: 'bundles/compiler.umd.js'},
'@angular/forms': {main: 'bundles/forms.umd.js'},
'@angular/animations': {main: 'bundles/animations.umd.js'},
'@angular/elements': {main: 'bundles/elements.umd.js'},
'@angular/router': {main: 'bundles/router.umd.js'},
'@angular/animations/browser': {main: '../bundles/animations-browser.umd.js'},
'@angular/platform-browser/animations': {main: '../bundles/platform-browser-animations.umd'},
'@angular/platform-browser': {main: 'bundles/platform-browser.umd.js'},
'@angular/platform-browser-dynamic': {main: 'bundles/platform-browser-dynamic.umd.js'},

// Project specific configurations.
...packagesConfig,
}
});
Loading