build(@angular-devkit/build-webpack): build and test using Bazel

Author: filipesilva

package.json

@@ -148,6 +148,7 @@
     "typescript": "3.8.3",
     "verdaccio": "4.4.4",
     "webpack": "4.42.0",
+    "webpack-dev-server": "3.10.3",
     "webpack-sources": "1.4.3"
   },
   "husky": {

packages/angular_devkit/build_webpack/BUILD

@@ -0,0 +1,102 @@
+# Copyright Google Inc. 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
+
+licenses(["notice"])  # MIT
+
+load("@npm_bazel_jasmine//:index.bzl", "jasmine_node_test")
+load("@npm_bazel_typescript//:index.bzl", "ts_library")
+load("@build_bazel_rules_nodejs//:index.bzl", "pkg_npm")
+load("//tools:ts_json_schema.bzl", "ts_json_schema")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_json_schema(
+    name = "webpack_schema",
+    src = "src/webpack/schema.json",
+)
+
+ts_json_schema(
+    name = "webpack_dev_server_schema",
+    src = "src/webpack-dev-server/schema.json",
+)
+
+ts_library(
+    name = "build_webpack",
+    srcs = glob(
+        include = ["src/**/*.ts"],
+        exclude = [
+            "src/test-utils.ts",
+            "src/**/*_spec.ts",
+        ],
+    ),
+    data = glob(
+        include = [
+          "package.json",
+          "builders.json",
+          "src/webpack/schema.json",
+          "src/webpack-dev-server/schema.json",
+        ],
+    ),
+    module_name = "@angular-devkit/build-webpack",
+    module_root = "src/index.d.ts",    
+    deps = [
+        ":webpack_schema",
+        ":webpack_dev_server_schema",
+        "//packages/angular_devkit/architect",
+        "//packages/angular_devkit/core",      
+        "@npm//@types/node",
+        "@npm//@types/webpack",
+        "@npm//@types/webpack-dev-server",
+        "@npm//rxjs",
+        "@npm//webpack",
+        "@npm//webpack-dev-server",
+    ],
+)
+
+ts_library(
+    name = "build_webpack_test_lib",
+    testonly = True,
+    srcs = glob(
+        include = [
+            "src/test-utils.ts",
+            "src/**/*_spec.ts",
+            "src/**/*_spec_large.ts",
+        ],
+    ),
+    data = glob(
+        include = [
+          "test/**/*",
+        ],
+    ),
+    tsconfig = "//:tsconfig-test.json",
+    deps = [
+        ":build_webpack",
+        "//packages/angular_devkit/core",
+        "//packages/angular_devkit/core:node",
+        "//packages/angular_devkit/architect",
+        "//packages/angular_devkit/architect:node",
+        "//packages/angular_devkit/architect:testing",
+        "@npm//@types/jasmine",
+        "@npm//@types/node",
+        "@npm//@types/node-fetch",
+        "@npm//node-fetch",
+    ],
+)
+
+jasmine_node_test(
+    name = "build_webpack_test",
+    srcs = [":build_webpack_test_lib"],
+    deps = [
+        "@npm//jasmine",
+        "@npm//source-map",
+    ],
+)
+
+pkg_npm(
+    name = "npm_package",
+    deps = [
+        ":build_webpack",
+    ],
+)

packages/angular_devkit/build_webpack/package.json

@@ -16,7 +16,9 @@
     "webpack-dev-server": "^3.1.4"
   },
   "devDependencies": {
+    "@types/node-fetch": "^2.1.6",
+    "node-fetch": "^2.2.0",
     "webpack": "4.42.0",
-    "webpack-dev-server": "^3.1.4"
+    "webpack-dev-server": "3.10.3"
   }
 }

packages/angular_devkit/build_webpack/src/test-utils.ts

@@ -10,12 +10,10 @@ import { WorkspaceNodeModulesArchitectHost } from '@angular-devkit/architect/nod
 import { TestingArchitectHost } from '@angular-devkit/architect/testing';
 import { schema, workspaces } from '@angular-devkit/core';
 import { NodeJsSyncHost } from '@angular-devkit/core/node';
-import fetch from 'node-fetch';  // tslint:disable-line:no-implicit-dependencies
+import fetch from 'node-fetch';
 import * as path from 'path';
 import { DevServerBuildOutput } from './index';
 
-const devkitRoot = (global as any)._DevKitRoot; // tslint:disable-line:no-any
-
 
 describe('Dev Server Builder', () => {
   let testArchitectHost: TestingArchitectHost;
@@ -41,7 +39,9 @@ describe('Dev Server Builder', () => {
   }
 
   beforeEach(async () => {
-    await createArchitect(path.join(devkitRoot, 'tests/angular_devkit/build_webpack/basic-app/'));
+    const ngJsonPath = path.join(path.dirname(__filename), '../../test/basic-app/angular.json');
+    const workspaceRoot = path.dirname(require.resolve(ngJsonPath));
+    await createArchitect(workspaceRoot);
   });
 
   it('works', async () => {

packages/angular_devkit/build_webpack/src/webpack-dev-server/index_spec_large.ts renamed to packages/angular_devkit/build_webpack/src/webpack-dev-server/index_spec.ts

@@ -13,8 +13,6 @@ import { NodeJsSyncHost } from '@angular-devkit/core/node';
 import * as path from 'path';
 import { BuildResult } from './index';
 
-const devkitRoot = (global as any)._DevKitRoot; // tslint:disable-line:no-any
-
 
 describe('Webpack Builder basic test', () => {
   let testArchitectHost: TestingArchitectHost;
@@ -38,7 +36,8 @@ describe('Webpack Builder basic test', () => {
   }
 
   describe('basic app', () => {
-    const workspaceRoot = path.join(devkitRoot, 'tests/angular_devkit/build_webpack/basic-app/');
+    const ngJsonPath = path.join(path.dirname(__filename), '../../test/basic-app/angular.json');
+    const workspaceRoot = path.dirname(require.resolve(ngJsonPath));
     const outputPath = join(normalize(workspaceRoot), 'dist');
 
     beforeEach(async () => {
@@ -70,36 +69,4 @@ describe('Webpack Builder basic test', () => {
       await run.stop();
     });
   });
-
-  describe('Angular app', () => {
-    const workspaceRoot = path.join(devkitRoot, 'tests/angular_devkit/build_webpack/angular-app/');
-    const outputPath = join(normalize(workspaceRoot), 'dist/');
-
-    beforeEach(async () => {
-      await createArchitect(workspaceRoot);
-    });
-
-    it('works', async () => {
-      const run = await architect.scheduleTarget({ project: 'app', target: 'build-webpack' });
-      const output = await run.result;
-
-      expect(output.success).toBe(true);
-      expect(await vfHost.exists(join(outputPath, 'main.js')).toPromise()).toBe(true);
-      expect(await vfHost.exists(join(outputPath, 'polyfills.js')).toPromise()).toBe(true);
-      await run.stop();
-    });
-
-    it('works and returns emitted files', async () => {
-      const run = await architect.scheduleTarget({ project: 'app', target: 'build-webpack' });
-      const output = await run.result as BuildResult;
-
-      expect(output.success).toBe(true);
-      expect(output.emittedFiles).toContain(
-        { id: 'main', name: 'main', initial: true, file: 'main.js', extension: '.js' },
-        { id: 'polyfills', name: 'polyfills', initial: true, file: 'polyfills.js', extension: '.js' },
-      );
-
-      await run.stop();
-    });
-  });
 });

packages/angular_devkit/build_webpack/src/webpack/index_spec_large.ts renamed to packages/angular_devkit/build_webpack/src/webpack/index_spec.ts

@@ -1,5 +1,5 @@
 {
-  "$schema": "../../../../packages/angular_devkit/core/src/workspace/workspace-schema.json",
+  "$schema": "../../../core/src/workspace/workspace-schema.json",
   "version": 1,
   "newProjectRoot": "./projects",
   "cli": {},
@@ -13,13 +13,13 @@
       "schematics": {},
       "targets": {
         "build": {
-          "builder": "../../../../packages/angular_devkit/build_webpack:webpack",
+          "builder": "../../:webpack",
           "options": {
             "webpackConfig": "webpack.config.js"
           }
         },
         "serve": {
-          "builder": "../../../../packages/angular_devkit/build_webpack:webpack-dev-server",
+          "builder": "../../:webpack-dev-server",
           "options": {
             "webpackConfig": "webpack.config.js"
           }