feat(bazel): move devserver from angular/components to dev-infra

Exposes the devserver from angular components within dev-infra. This
allows us to remove duplication within the devtools folder in framework,
and also helps us with using this devserver as alternative to the Go-based
one (which does not work with M1 and Windows).

Code remains mostly untouched, except:

* Renamed the devserver to "http-server".
* Removed some Material-specific DX logic. Added `environment_variables` attribute instead.
* Replaced minimist with Yargs (as we have a dep for that already and it's easier).

Author: devversion

bazel/BUILD.bazel

@@ -9,6 +9,7 @@ filegroup(
         "//bazel/browsers:files",
         "//bazel/constraints:files",
         "//bazel/esbuild:files",
+        "//bazel/http-server:files",
         "//bazel/integration:files",
         "//bazel/remote-execution:files",
         "//bazel/spec-bundling:files",

bazel/http-server/BUILD.bazel

@@ -0,0 +1,42 @@
+load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary")
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
+package(default_visibility = ["//visibility:public"])
+
+exports_files(["launcher_template.sh"])
+
+# Make source files available for distribution via pkg_npm
+filegroup(
+    name = "files",
+    srcs = glob(["*"]),
+)
+
+ts_library(
+    name = "server_lib",
+    srcs = [
+        "ibazel.ts",
+        "main.ts",
+        "server.ts",
+    ],
+    # A tsconfig needs to be specified as otherwise `ts_library` will look for the config
+    # in `//:package.json` and this breaks when the BUILD file is copied to `@npm//`.
+    tsconfig = "//:tsconfig.json",
+    deps = [
+        "@npm//@types/browser-sync",
+        "@npm//@types/node",
+        "@npm//@types/send",
+        "@npm//@types/yargs",
+        "@npm//browser-sync",
+        "@npm//send",
+        "@npm//yargs",
+    ],
+)
+
+nodejs_binary(
+    name = "server_bin",
+    data = [
+        ":server_lib",
+    ],
+    entry_point = ":main.ts",
+    templated_args = ["--bazel_patch_module_resolver"],
+)

bazel/http-server/ibazel.ts

@@ -0,0 +1,43 @@
+/**
+ * @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 {createInterface} from 'readline';
+import {HttpServer} from './server';
+
+// ibazel will write this string after a successful build.
+const ibazelNotifySuccessMessage = 'IBAZEL_BUILD_COMPLETED SUCCESS';
+
+/**
+ * Sets up ibazel support for the specified server. ibazel communicates with
+ * an executable over the "stdin" interface. Whenever a specific message is sent
+ * over "stdin", the server can be reloaded.
+ */
+export function setupBazelWatcherSupport(server: HttpServer) {
+  // If iBazel is not configured for this process, we do not setup the watcher.
+  if (process.env['IBAZEL_NOTIFY_CHANGES'] !== 'y') {
+    return;
+  }
+
+  // ibazel communicates via the stdin interface.
+  const rl = createInterface({input: process.stdin, terminal: false});
+
+  rl.on('line', (chunk: string) => {
+    if (chunk === ibazelNotifySuccessMessage) {
+      server.reload();
+    }
+  });
+
+  rl.on('close', () => {
+    // Give ibazel some time to kill this process, otherwise we exit the process manually.
+    // TODO(devversion): re-check if this is still needed?
+    setTimeout(() => {
+      console.error('Bazel watcher did not stop the HTTP server after 5 seconds. Exiting...');
+      process.exit(1);
+    }, 5000);
+  });
+}

bazel/http-server/index.bzl

@@ -0,0 +1,162 @@
+load("@build_bazel_rules_nodejs//:providers.bzl", "JSNamedModuleInfo")
+
+def _get_workspace_name(ctx):
+    if ctx.label.workspace_root:
+        # We need the workspace_name for the target being visited.
+        # Starlark doesn't have this - instead they have a workspace_root
+        # which looks like "external/repo_name" - so grab the second path segment.
+        return ctx.label.workspace_root.split("/")[1]
+    else:
+        return ctx.workspace_name
+
+def _http_server_rule_impl(ctx):
+    """Implementation of the http server rule."""
+
+    workspace_name = _get_workspace_name(ctx)
+    package_manifest_path = "%s/%s" % (workspace_name, ctx.label.package)
+
+    # List of files which are required for the server to run. This includes the
+    # bazel runfile helpers (to resolve runfiles in bash) and the server binary
+    # with its transitive runfiles (in order to be able to run the server).
+    required_tools = ctx.files._bash_runfile_helpers + \
+                     ctx.files._server_bin + \
+                     ctx.attr._server_bin[DefaultInfo].files.to_list() + \
+                     ctx.attr._server_bin[DefaultInfo].data_runfiles.files.to_list()
+
+    # Walk through all dependencies specified in the "deps" attribute. These labels need to be
+    # unwrapped in case there are built using TypeScript-specific rules.
+    transitive_depsets = []
+    for dep in ctx.attr.deps:
+        if JSNamedModuleInfo in dep:
+            transitive_depsets.append(dep[JSNamedModuleInfo].sources)
+        elif DefaultInfo in dep:
+            transitive_depsets.append(dep[DefaultInfo].files)
+
+    root_paths = ["", package_manifest_path] + ctx.attr.additional_root_paths
+
+    # We can't use "ctx.actions.args()" because there is no way to convert the args object
+    # into a string representing the command line arguments. It looks like bazel has some
+    # internal logic to compute the string representation of "ctx.actions.args()".
+    args = ""
+
+    for root in root_paths:
+        args += "--root-paths '%s' " % root
+
+    if ctx.attr.history_api_fallback:
+        args += "--history-api-fallback=true "
+
+    if ctx.attr.enable_dev_ui:
+        args += "--enable-dev-ui=true "
+
+    for variable_name in ctx.attr.environment_variables:
+        args += "--environment-variables '%s' " % variable_name
+
+    ctx.actions.expand_template(
+        template = ctx.file._launcher_template,
+        output = ctx.outputs.launcher,
+        substitutions = {
+            "TEMPLATED_args": args,
+        },
+        is_executable = True,
+    )
+
+    runfiles = ctx.runfiles(
+        files = ctx.files.srcs + required_tools,
+        transitive_files = depset(transitive = transitive_depsets),
+        collect_data = True,
+        collect_default = True,
+    )
+
+    return [
+        DefaultInfo(
+            files = depset([ctx.outputs.launcher]),
+            runfiles = runfiles,
+        ),
+    ]
+
+http_server_rule = rule(
+    implementation = _http_server_rule_impl,
+    outputs = {
+        "launcher": "%{name}.sh",
+    },
+    attrs = {
+        "additional_root_paths": attr.string_list(
+            doc = """
+              Additional paths to serve files from. The paths should be passed
+              as manifest paths (e.g. "my_workspace/src").
+              """,
+        ),
+        "deps": attr.label_list(
+            allow_files = True,
+            doc = """
+              Dependencies that need to be available for resolution. This attribute can be
+              used for TypeScript targets which provide multiple flavors of output.
+            """,
+        ),
+        "enable_dev_ui": attr.bool(
+            default = False,
+            doc = """
+              Whether an additional UI for development should be enabled. 
+              The development UI can be helpful for throttling network and more. This
+              is a feature from the underlying browsersync implementation.
+            """,
+        ),
+        "history_api_fallback": attr.bool(
+            default = True,
+            doc = """
+              Whether the server should fallback to "/index.html" for non-file requests.
+              This is helpful for single page applications using the HTML history API.
+            """,
+        ),
+        "environment_variables": attr.string_list(
+            default = [],
+            doc = """
+              List of environment variables that will be made available in the `index.html` 
+              file. Variables can be accessed through `window.<NAME>`.
+
+              This is useful as an example when developers want to have an API key available
+              as part of their development workflow, but not hard-coding it into the sources.
+            """,
+        ),
+        "srcs": attr.label_list(
+            allow_files = True,
+            doc = """
+              Sources that should be available to the server for resolution. This attribute can
+              be used for explicit files. This attribute only uses the files exposed by the
+              `DefaultInfo` provider (i.e. TypeScript targets should be added to "deps").
+            """,
+        ),
+        "_bash_runfile_helpers": attr.label(default = Label("@bazel_tools//tools/bash/runfiles")),
+        "_server_bin": attr.label(
+            default = Label("//bazel/http-server:server_bin"),
+        ),
+        "_launcher_template": attr.label(
+            allow_single_file = True,
+            default = Label("//bazel/http-server:launcher_template.sh"),
+        ),
+    },
+)
+
+def http_server(name, testonly = False, port = 4200, tags = [], **kwargs):
+    """Creates a HTTP server that can depend on individual bazel targets. The server uses
+      bazel runfile resolution in order to work with Bazel package paths. e.g. developers can
+      request files through their manifest path: "my_workspace/src/dev-app/my-genfile"."""
+
+    http_server_rule(
+        name = "%s_launcher" % name,
+        visibility = ["//visibility:private"],
+        tags = tags,
+        testonly = testonly,
+        **kwargs
+    )
+
+    native.sh_binary(
+        name = name,
+        # The "ibazel_notify_changes" tag tells ibazel to not relaunch the executable on file
+        # changes. Rather it will communicate with the server implementation through "stdin".
+        tags = tags + ["ibazel_notify_changes"],
+        srcs = ["%s_launcher.sh" % name],
+        data = [":%s_launcher" % name],
+        args = ["--port=%s" % port],
+        testonly = testonly,
+    )

bazel/http-server/launcher_template.sh

@@ -0,0 +1,33 @@
+#!/usr/bin/env bash
+
+# --- begin runfiles.bash initialization v2 ---
+# Copy-pasted from the Bazel Bash runfiles library v2. We need to copy the runfile
+# helper code as we want to resolve Bazel targets through the runfiles (in order to
+# make the server work on windows where runfiles are not symlinked). The runfile
+# helpers expose a bash function called "rlocation" that can be used to resolve targets.
+set -uo pipefail; f=bazel_tools/tools/bash/runfiles/runfiles.bash
+source "${RUNFILES_DIR:-/dev/null}/$f" 2>/dev/null || \
+source "$(grep -sm1 "^$f " "${RUNFILES_MANIFEST_FILE:-/dev/null}" | cut -f2- -d' ')" 2>/dev/null || \
+source "$0.runfiles/$f" 2>/dev/null || \
+source "$(grep -sm1 "^$f " "$0.runfiles_manifest" | cut -f2- -d' ')" 2>/dev/null || \
+source "$(grep -sm1 "^$f " "$0.exe.runfiles_manifest" | cut -f2- -d' ')" 2>/dev/null || \
+{ echo>&2 "ERROR: cannot find $f"; exit 1; }; f=; set -e
+# --- end runfiles.bash initialization v2 ---
+
+# If we do not run the server as part of a test, we always enforce runfile
+# resolution when invoking the server NodeJS binary. This is necessary as
+# runfile trees are disabled as part of this repository. The server NodeJS
+# binary would not find a relative runfile tree directory and error out.
+if [[ -z "${TEST_SRCDIR:-""}" ]]; then
+  export RUNFILES_MANIFEST_ONLY="1"
+fi
+
+# Resolve the path of the server binary. Note: usually we either need to
+# resolve the "nodejs_binary" executable with different file extensions on
+# windows, but since we already run this launcher as part of a "sh_binary", we
+# can safely execute another shell script from the current shell.
+serverBin=$(rlocation "dev-infra/bazel/http-server/server_bin.sh")
+
+# Start the server with the given arguments. The arguments will be
+# substituted based on the rule attributes.
+${serverBin} TEMPLATED_args "$@"

bazel/http-server/main.ts

@@ -0,0 +1,34 @@
+/**
+ * @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 * as yargs from 'yargs';
+
+import {HttpServer} from './server';
+import {setupBazelWatcherSupport} from './ibazel';
+
+const {rootPaths, historyApiFallback, enableDevUi, environmentVariables, port} = yargs(
+  process.argv.slice(2),
+)
+  .strict()
+  .option('port', {type: 'number', default: 4200})
+  .option('historyApiFallback', {type: 'boolean', default: false})
+  .option('rootPaths', {type: 'array', default: ['']})
+  .option('environmentVariables', {type: 'array', default: []})
+  .option('enableDevUi', {type: 'boolean', default: false})
+  .parseSync();
+
+// In non-test executions, we will never allow for the browser-sync dev UI.
+const enableUi = process.env.TEST_TARGET === undefined && enableDevUi;
+const server = new HttpServer(port, rootPaths, enableUi, historyApiFallback, environmentVariables);
+
+// Setup ibazel support.
+setupBazelWatcherSupport(server);
+
+// Start the server. The server will always bind to the loopback and
+// the public interface of the current host.
+server.start();