feat(examples): demonstrate that a macro assembles a workflow

introduce differential_loading.bzl that contains all the logic

Author: alexeagle

examples/webapp/BUILD.bazel

@@ -1,68 +1,17 @@
-# TODO(alexeagle): promote web_package rule to the public API
-load("@build_bazel_rules_nodejs//internal/web_package:web_package.bzl", "web_package")
-load("@npm//@babel/cli:index.bzl", "babel")
 load("@npm//http-server:index.bzl", "http_server")
 load("@npm_bazel_protractor//:index.bzl", "protractor_web_test_suite")
-load("@npm_bazel_rollup//:index.bzl", "rollup_bundle")
-load("@npm_bazel_terser//:index.bzl", "terser_minified")
+load(":differential_loading.bzl", "differential_loading")
 
-rollup_bundle(
-    name = "chunks",
+differential_loading(
+    name = "app",
     srcs = glob(["*.js"]),
     entry_point = "index.js",
-    output_dir = True,
-)
-
-# For older browsers, we'll transform the output chunks to es5 + systemjs loader
-babel(
-    name = "chunks_es5",
-    args = [
-        "$(location chunks)",
-        "--config-file",
-        "$(location es5.babelrc)",
-        "--out-dir",
-        "$@",
-    ],
-    data = [
-        "chunks",
-        "es5.babelrc",
-        "@npm//@babel/preset-env",
-    ],
-    output_dir = True,
-)
-
-# Run terser against both modern and legacy browser chunks
-terser_minified(
-    name = "chunks_es5.min",
-    src = "chunks_es5",
-)
-
-terser_minified(
-    name = "chunks.min",
-    src = "chunks",
-)
-
-web_package(
-    name = "package",
-    # FIXME: need something like:
-    # entry_point = "index.js",
-    assets = [
-        "styles.css",
-    ],
-    data = [
-        "favicon.png",
-        # For differential loading, we supply both ESModule chunks and es5 chunks.
-        # The injector will put two complimentary script tags in the index.html
-        ":chunks.min",
-        ":chunks_es5.min",
-    ],
-    index_html = "index.html",
 )
 
 http_server(
     name = "server",
-    data = [":package"],
-    templated_args = ["package"],
+    data = [":app"],
+    templated_args = ["app"],
 )
 
 # BazelCI docker images are missing shares libs to run a subset browser tests:

examples/webapp/differential_loading.bzl

@@ -0,0 +1,61 @@
+"Illustrates how a reusable high-level workflow can be assembled from individual tools"
+
+# TODO(alexeagle): promote web_package rule to the public API
+load("@build_bazel_rules_nodejs//internal/web_package:web_package.bzl", "web_package")
+load("@npm//@babel/cli:index.bzl", "babel")
+load("@npm_bazel_rollup//:index.bzl", "rollup_bundle")
+load("@npm_bazel_terser//:index.bzl", "terser_minified")
+
+def differential_loading(name, entry_point, srcs):
+    "Common workflow to serve native ESModules to modern browsers"
+
+    rollup_bundle(
+        name = name + "_chunks",
+        srcs = srcs,
+        entry_points = {
+            entry_point: "index",
+        },
+        output_dir = True,
+    )
+
+    # For older browsers, we'll transform the output chunks to es5 + systemjs loader
+    babel(
+        name = name + "_chunks_es5",
+        data = [
+            name + "_chunks",
+            "es5.babelrc",
+            "@npm//@babel/preset-env",
+        ],
+        output_dir = True,
+        args = [
+            "$(location %s_chunks)" % name,
+            "--config-file",
+            "$(location es5.babelrc)",
+            "--out-dir",
+            "$@",
+        ],
+    )
+
+    # Run terser against both modern and legacy browser chunks
+    terser_minified(
+        name = name + "_chunks_es5.min",
+        src = name + "_chunks_es5",
+    )
+
+    terser_minified(
+        name = name + "_chunks.min",
+        src = name + "_chunks",
+    )
+
+    web_package(
+        name = name,
+        assets = [
+            "styles.css",
+        ],
+        data = [
+            "favicon.png",
+            name + "_chunks.min",
+            name + "_chunks_es5.min",
+        ],
+        index_html = "index.html",
+    )

examples/webapp/index.html

@@ -6,6 +6,6 @@
     </head>
     <!-- TODO: figure out how diff. loading interacts with 
          https://www.npmjs.com/package/rollup-plugin-bundle-html -->
-    <script type="module" src="/chunks.min/chunks.js"></script>
-    <script nomodule="" src="/chunks_es5.min/chunks.js"></script>
+    <script type="module" src="/app_chunks.min/index.js"></script>
+    <script nomodule="" src="/app_chunks_es5.min/index.js"></script>     
 </html>

internal/node/npm_package_bin.bzl

@@ -67,7 +67,7 @@ def npm_package_bin(tool = None, package = None, package_bin = None, **kwargs):
               may also include targets that produce or reference npm packages which are needed by the tool
         outs: similar to [genrule.outs](https://docs.bazel.build/versions/master/be/general.html#genrule.outs)
         output_dir: set to True if you want the output to be a directory
-                 Exactly one of `outs`, `out_dir` may be used.
+                 Exactly one of `outs`, `output_dir` may be used.
                  If you output a directory, there can only be one output, which will be named the same as the target.
 
         args: Command-line arguments to the tool.