feat(examples): update examples/angular to new rollup_bundle (#1238)

examples/BUILD.bazel

@@ -20,6 +20,8 @@ example_integration_test(
     npm_packages = {
         "//packages/karma:npm_package": "@bazel/karma",
         "//packages/protractor:npm_package": "@bazel/protractor",
+        "//packages/rollup:npm_package": "@bazel/rollup",
+        "//packages/terser:npm_package": "@bazel/terser",
         "//packages/typescript:npm_package": "@bazel/typescript",
     },
     tags = [

examples/angular/package.json

@@ -29,19 +29,28 @@
         "@angular/cli": "9.0.0-next.6",
         "@angular/compiler": "9.0.0-next.8",
         "@angular/compiler-cli": "9.0.0-next.8",
+        "@babel/cli": "^7.6.0",
+        "@babel/core": "^7.6.0",
+        "@babel/preset-env": "^7.6.0",
         "@bazel/bazel": "^0.29.0",
         "@bazel/benchmark-runner": "0.1.0",
         "@bazel/buildifier": "0.28.0",
         "@bazel/ibazel": "0.10.3",
         "@bazel/karma": "^0.38.0",
         "@bazel/protractor": "^0.38.0",
+        "@bazel/rollup": "^0.38.0",
+        "@bazel/terser": "^0.38.0",
         "@bazel/typescript": "^0.38.0",
         "@types/jasmine": "3.4.0",
         "@types/node": "6.14.6",
         "core-js": "2.6.9",
         "firebase-tools": "7.1.0",
         "history-server": "^1.3.1",
         "patch-package": "^6.2.0",
+        "rollup": "^1.21.4",
+        "rollup-plugin-node-resolve": "^5.2.0",
+        "rollup-plugin-commonjs": "^10.1.0",
+        "terser": "4.3.1",
         "typescript": "3.4.5"
     },
     "scripts": {

examples/angular/patches/@angular+bazel+9.0.0-next.8.patch

@@ -11,11 +11,32 @@ index 667f601..7907c12 100755
 
      # short_path is meant to be used when accessing runfiles in a binary, where
      # the CWD is inside the current repo. Therefore files in external repo have a
+diff --git a/node_modules/@angular/bazel/src/modify_tsconfig.js b/node_modules/@angular/bazel/src/modify_tsconfig.js
+index 9d3c491..3c99746 100755
+--- a/node_modules/@angular/bazel/src/modify_tsconfig.js
++++ b/node_modules/@angular/bazel/src/modify_tsconfig.js
+@@ -44,7 +44,7 @@ function main(args) {
+     // ngc-wrapped is expecting POSIX paths and the TypeScript Bazel rules by default only pass
+     // POSIX paths as well.
+     angularCompilerOptions['expectedOut'] = angularCompilerOptions['expectedOut'].map(
+-        f => f.replace(/\.closure\.js$/, '.js').replace(binDir, newOutputBase));
++        f => f.replace(/\.mjs$/, '.js').replace(binDir, newOutputBase));
+   }
+   fs.writeFileSync(output, JSON.stringify(data));
+ }
 diff --git a/node_modules/@angular/bazel/src/ng_module.bzl b/node_modules/@angular/bazel/src/ng_module.bzl
-index 9b88fbb..d2eb8aa 100755
+index 9b88fbb..68217d0 100755
 --- a/node_modules/@angular/bazel/src/ng_module.bzl
 +++ b/node_modules/@angular/bazel/src/ng_module.bzl
-@@ -237,7 +237,7 @@ def _expected_outs(ctx):
+@@ -20,6 +20,7 @@ load(
+     "ts_providers_dict_to_struct",
+     "tsc_wrapped_tsconfig",
+ )
++load("@build_bazel_rules_nodejs//:providers.bzl", "transitive_js_ecma_script_module_info")
+
+ _FLAT_DTS_FILE_SUFFIX = ".bundle.d.ts"
+ _R3_SYMBOLS_DTS_FILE = "src/r3_symbols.d.ts"
+@@ -237,7 +238,7 @@ def _expected_outs(ctx):
              continue
 
          filter_summaries = ctx.attr.filter_summaries
@@ -24,7 +45,7 @@ index 9b88fbb..d2eb8aa 100755
          declarations = [f.replace(".js", ".d.ts") for f in devmode_js]
 
          devmode_js_files += [ctx.actions.declare_file(basename + ext) for ext in devmode_js]
-@@ -262,7 +262,7 @@ def _expected_outs(ctx):
+@@ -262,7 +263,7 @@ def _expected_outs(ctx):
      if _should_produce_flat_module_outs(ctx):
          flat_module_out = _flat_module_out_file(ctx)
          devmode_js_files.append(ctx.actions.declare_file("%s.js" % flat_module_out))
@@ -33,3 +54,22 @@ index 9b88fbb..d2eb8aa 100755
          bundle_index_typings = ctx.actions.declare_file("%s.d.ts" % flat_module_out)
          declaration_files.append(bundle_index_typings)
          if is_legacy_ngc:
+@@ -603,7 +604,17 @@ def ng_module_impl(ctx, ts_compile_actions):
+     return providers
+
+ def _ng_module_impl(ctx):
+-    return ts_providers_dict_to_struct(ng_module_impl(ctx, compile_ts))
++    ts_providers = ng_module_impl(ctx, compile_ts)
++
++    # Add in new JS providers
++    ts_providers["providers"].extend([
++        transitive_js_ecma_script_module_info(
++            sources = ts_providers["typescript"]["es6_sources"],
++            deps = ctx.attr.deps,
++        ),
++    ])
++
++    return ts_providers_dict_to_struct(ts_providers)
+
+ local_deps_aspects = [collect_node_modules_aspect, _collect_summaries_aspect]
+

examples/angular/src/BUILD.bazel

@@ -1,10 +1,12 @@
-load("@build_bazel_rules_nodejs//:index.bzl", "rollup_bundle")
 load("@build_bazel_rules_nodejs//internal/web_package:web_package.bzl", "web_package")
 load("@io_bazel_rules_docker//container:container.bzl", "container_image")
 load("@io_bazel_rules_docker//nodejs:image.bzl", "nodejs_image")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("@npm//@babel/cli:index.bzl", "babel")
 load("@npm//history-server:index.bzl", "history_server")
 load("@npm_angular_bazel//:index.bzl", "ng_module")
+load("@npm_bazel_rollup//:index.bzl", "rollup_bundle")
+load("@npm_bazel_terser//:index.bzl", "terser_minified")
 load("@npm_bazel_typescript//:index.bzl", "ts_config", "ts_devserver", "ts_library")
 
 package(default_visibility = ["//:__subpackages__"])
@@ -99,7 +101,7 @@ ts_devserver(
     # Start from the development version of the main
     entry_module = "angular_bazel_example/src/main.dev",
     # <script> and <link> tags will be automatically injected into this index file
-    index_html = "//src/example:assets",
+    index_html = "//src/example:index.dev.html",
     # These scripts will be included in the JS bundle after require.js
     # They should have only named UMD modules, or require.js will throw.
     scripts = [
@@ -120,17 +122,37 @@ ts_devserver(
 
 rollup_bundle(
     name = "bundle",
+    config_file = "rollup.config.js",
     entry_point = ":main.prod.ts",
-    deps = [
-        "//src",
-        "@npm//@angular/common",
-        "@npm//@angular/core",
-        "@npm//@angular/material",
-        "@npm//@angular/platform-browser",
-        "@npm//@angular/router",
-        "@npm//@ngrx/store",
-        "@npm//rxjs",
+    output_dir = True,
+    deps = ["//src"],
+)
+
+babel(
+    name = "bundle.es2015",
+    args = [
+        "$(location :bundle)",
+        "--no-babelrc",
+        "--source-maps",
+        "--presets=@babel/preset-env",
+        "--out-dir",
+        "$@",
     ],
+    data = [
+        ":bundle",
+        "@npm//@babel/preset-env",
+    ],
+    output_dir = True,
+)
+
+terser_minified(
+    name = "bundle.min",
+    src = ":bundle",
+)
+
+terser_minified(
+    name = "bundle.min.es2015",
+    src = ":bundle.es2015",
 )
 
 web_package(
@@ -143,21 +165,18 @@ web_package(
     ],
     # do not sort
     assets = _ASSETS + [
-        # For differential loading, we supply both an ESModule entry point and an es5 entry point
-        # The injector will put two complimentary script tags in the example.html
-        ":bundle.min.js",
-        ":bundle.min.es2015.js",
+        ":bundle.min",
+        ":bundle.min.es2015",
     ],
     data = [
-        ":bundle",
         "//src/assets",
         # Include polyfills that will be requested by old browsers
         "@npm//:node_modules/systemjs/dist/system.js",
         "@npm//:node_modules/core-js/client/core.min.js",
         "index.html",
     ],
     # <script> and <link> tags will be automatically injected into this index.
-    index_html = "//src/example:assets",
+    index_html = "//src/example:index.html",
 )
 
 history_server(

examples/angular/src/example/BUILD.bazel

@@ -1,11 +1,9 @@
 package(default_visibility = ["//:__subpackages__"])
 
-filegroup(
-    name = "assets",
-    srcs = [
-        "index.html",
-    ],
-)
+exports_files([
+    "index.html",
+    "index.dev.html",
+])
 
 # For testing from the root workspace of this repository with bazel_integration_test.
 filegroup(

examples/angular/src/example/index.dev.html

@@ -0,0 +1,14 @@
+<!doctype html>
+
+<html>
+  <head>
+    <title>Angular Bazel Example</title>
+    <base href="/example">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  </head>
+  <body>
+    <!-- The Angular application will be bootstrapped into this element. -->
+    <app-component></app-component>
+  </body>
+</html>

examples/angular/src/example/index.html

@@ -14,5 +14,10 @@
     <!-- in browsers that don't support ESModules, we polyfill with system.js-->
     <script nomodule src="/core.min.js"></script>
     <script nomodule src="/system.js"></script>
+
+    <!-- TODO: figure out how diff. loading interacts with 
+    https://www.npmjs.com/package/rollup-plugin-bundle-html -->
+    <script type="module" src="/bundle.min/bundle.js"></script>
+    <script nomodule="" src="/bundle.min.es2015/bundle.js"></script>     
   </body>
 </html>

examples/angular/src/lib/shorten/BUILD.bazel

@@ -2,11 +2,12 @@ load("@npm_bazel_typescript//:index.bzl", "ts_library")
 
 package(default_visibility = ["//:__subpackages__"])
 
+# TODO: change entry to something other than index.js & add a package.json here
+# with a main field to show how to create a first-party npm lib with a package.json
 ts_library(
     name = "shorten",
-    srcs = ["shorten.ts"],
+    srcs = ["index.ts"],
     module_name = "@bazel/shorten",
-    module_root = "shorten",
 )
 
 # TODO(alexeagle): show how it can be deployed to npm

examples/angular/src/rollup.config.js

@@ -0,0 +1,11 @@
+const node = require('rollup-plugin-node-resolve');
+const commonjs = require('rollup-plugin-commonjs');
+
+module.exports = {
+  plugins: [
+    node({
+      mainFields: ['browser', 'es2015', 'module', 'jsnext:main', 'main'],
+    }),
+    commonjs(),
+  ],
+};