refactor: move injector feature to own rule

BREAKING CHANGE: ts_devserver and web_package no longer have an index_html attribute. They expect an index.html file to be among the assets, and to already have the script and link tags needed for the app to work. The feature where those tags were injected into the html dynamically has been moved to its own rule, inject_html.
bazel-contrib · Nov 21, 2019 · be06d23 · be06d23
1 parent 5cd4848
commit be06d23
Show file tree

Hide file tree

Showing 49 changed files with 389 additions and 248 deletions.
diff --git a/BUILD.bazel b/BUILD.bazel
@@ -91,7 +91,6 @@ npm_package(
         "//third_party/github.com/bazelbuild/bazel-skylib:package_contents",
         "//third_party/github.com/buffer-from:package_contents",
         "//third_party/github.com/gjtorikian/isBinaryFile:package_contents",
-        "//third_party/github.com/inikulin/parse5:package_contents",
         "//third_party/github.com/juanjoDiaz/removeNPMAbsolutePaths:package_contents",
         "//third_party/github.com/source-map:package_contents",
         "//third_party/github.com/source-map-support:package_contents",

diff --git a/e2e/BUILD.bazel b/e2e/BUILD.bazel
@@ -83,6 +83,7 @@ e2e_integration_test(
     name = "e2e_ts_devserver",
     npm_packages = {
         "//packages/hide-bazel-files:npm_package": "@bazel/hide-bazel-files",
+        "//packages/inject-html:npm_package": "@bazel/inject-html",
         "//packages/protractor:npm_package": "@bazel/protractor",
         "//packages/typescript:npm_package": "@bazel/typescript",
     },

diff --git a/e2e/ts_devserver/package.json b/e2e/ts_devserver/package.json
@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@bazel/hide-bazel-files": "^0.40.0",
+    "@bazel/inject-html": "^0.40.0",
     "@bazel/protractor": "^0.40.0",
     "@bazel/typescript": "^0.40.0",
     "@types/jasmine": "2.8.2",

diff --git a/e2e/ts_devserver/subpackage/BUILD.bazel b/e2e/ts_devserver/subpackage/BUILD.bazel
@@ -12,13 +12,22 @@
 # See the License for the specific language governing permissions and
 # limitations under the License.
 
+load("@npm_bazel_inject_html//:index.bzl", "inject_html")
 load("@npm_bazel_protractor//:index.bzl", "protractor_web_test_suite")
 load("@npm_bazel_typescript//:index.bzl", "ts_devserver", "ts_library")
 
+inject_html(
+    name = "inject",
+    src = "index.html",
+    assets = ["//:red-body-style.css"],
+)
+
 ts_devserver(
     name = "devserver",
-    index_html = "index.html",
-    static_files = ["//:red-body-style.css"],
+    static_files = [
+        "inject",
+        "//:red-body-style.css",
+    ],
 )
 
 ts_library(

diff --git a/examples/BUILD.bazel b/examples/BUILD.bazel
@@ -18,6 +18,7 @@ example_integration_test(
     name = "examples_angular",
     timeout = "long",
     npm_packages = {
+        "//packages/inject-html:npm_package": "@bazel/inject-html",
         "//packages/karma:npm_package": "@bazel/karma",
         "//packages/protractor:npm_package": "@bazel/protractor",
         "//packages/rollup:npm_package": "@bazel/rollup",
@@ -51,6 +52,7 @@ example_integration_test(
     name = "examples_angular_view_engine",
     timeout = "long",
     npm_packages = {
+        "//packages/inject-html:npm_package": "@bazel/inject-html",
         "//packages/karma:npm_package": "@bazel/karma",
         "//packages/protractor:npm_package": "@bazel/protractor",
         "//packages/rollup:npm_package": "@bazel/rollup",
@@ -90,6 +92,7 @@ example_integration_test(
     name = "examples_app",
     npm_packages = {
         "//packages/hide-bazel-files:npm_package": "@bazel/hide-bazel-files",
+        "//packages/inject-html:npm_package": "@bazel/inject-html",
         "//packages/protractor:npm_package": "@bazel/protractor",
         "//packages/rollup:npm_package": "@bazel/rollup",
         "//packages/terser:npm_package": "@bazel/terser",
@@ -115,6 +118,7 @@ example_integration_test(
 example_integration_test(
     name = "examples_kotlin",
     npm_packages = {
+        "//packages/inject-html:npm_package": "@bazel/inject-html",
         "//packages/jasmine:npm_package": "@bazel/jasmine",
         "//packages/rollup:npm_package": "@bazel/rollup",
         "//packages/terser:npm_package": "@bazel/terser",

diff --git a/examples/angular/package.json b/examples/angular/package.json
@@ -36,6 +36,7 @@
         "@bazel/benchmark-runner": "^0.1.0",
         "@bazel/buildifier": "^0.29.0",
         "@bazel/ibazel": "^0.10.3",
+        "@bazel/inject-html": "^0.40.0",
         "@bazel/karma": "^0.40.0",
         "@bazel/protractor": "^0.40.0",
         "@bazel/rollup": "^0.40.0",

diff --git a/examples/angular/src/BUILD.bazel b/examples/angular/src/BUILD.bazel
@@ -5,6 +5,7 @@ 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_inject_html//:index.bzl", "inject_html")
 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")
@@ -85,23 +86,22 @@ _ASSETS = [
     "@npm//:node_modules/zone.js/dist/zone.min.js",
 ]
 
+inject_html(
+    name = "inject_scripts_for_dev",
+    src = "//src:example/index.html",
+    assets = _ASSETS + ["_/ts_scripts.js"],
+)
+
 # This devserver is written in Go and is super-fast.
 # It doesn't run any bundler or code splitter. Instead, it concatenates
 # named UMD and named AMD JavaScript code on-the-fly in-memory.
 # This scales really well for massive codebases.
 ts_devserver(
     name = "devserver",
-    # Serve these files but don't inject tags for them into the index file
-    # This might be because we only want to lazy-load these scripts on-demand,
-    # or because they aren't compatible with Require.js so we must use a runtime
-    # loader to load them.
-    data = [
-        "//src/assets",
-    ],
-    # Start from the development version of the main
+    # Serve src/example/index.html at /index.html
+    additional_root_paths = ["src/example"],
+    # Run the program from the development version of the main
     entry_module = "examples_angular/src/main.dev",
-    # <script> and <link> tags will be automatically injected into this index file
-    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 = [
@@ -114,8 +114,10 @@ ts_devserver(
         "@npm//date-fns:date-fns.umd.js",
     ],
     # Serve these files in addition to the JavaScript bundle
-    # The corresponding <script> or <link> tags will be injected into the index_html
-    static_files = _ASSETS,
+    static_files = _ASSETS + [
+        ":inject_scripts_for_dev",
+        "//src/assets",
+    ],
     # Tell Bazel to build the sources first
     deps = ["//src"],
 )
@@ -161,28 +163,40 @@ terser_minified(
     src = ":bundle-es5",
 )
 
+inject_html(
+    name = "inject_scripts_for_prod",
+    src = "//src:example/index.prod.html",
+    # we can't produce "example/index.html" since that collides with the devmode file
+    # web_package rule will re-root this path because it starts with _prodapp
+    out = "_prodapp/src/example/index.html",
+    assets = _ASSETS,
+)
+
 web_package(
     name = "prodapp",
     # In production mode we serve some polyfills with script tags that have hard-coded paths in the index.html
     # so we must serve them at that path, by stripping a prefix
     additional_root_paths = [
         "npm/node_modules/core-js/client",
         "npm/node_modules/systemjs/dist",
+        "src/_prodapp",
     ],
-    # do not sort
     assets = _ASSETS + [
         ":bundle-es2015.min",
         ":bundle-es5.min",
-    ],
-    data = [
+        ":inject_scripts_for_prod",
         "//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:index.html",
+    # In production mode we serve some polyfills with script tags that have hard-coded paths in the index.html
+    # so we must serve them at that path, by stripping a prefix
+    additional_root_paths = [
+        "npm/node_modules/core-js/client",
+        "npm/node_modules/systemjs/dist",
+    ],
 )
 
 history_server(

diff --git a/examples/angular/src/example/BUILD.bazel b/examples/angular/src/example/BUILD.bazel
diff --git a/examples/angular/src/example/index.dev.html b/examples/angular/src/example/index.dev.html
diff --git a/examples/angular/src/example/index.html b/examples/angular/src/example/index.html
@@ -9,15 +9,6 @@
   </head>
   <body>
     <!-- The Angular application will be bootstrapped into this element. -->
-    <app-component></app-component>
-
-    <!-- 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-es2015.min/index.js"></script>
-    <script nomodule="" src="/bundle-es5.min/index.js"></script>     
+    <app-component></app-component>    
   </body>
 </html>
diff --git a/examples/angular/src/example/index.prod.html b/examples/angular/src/example/index.prod.html
@@ -0,0 +1,23 @@
+<!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>
+
+    <!-- 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-es2015.min/index.js"></script>
+    <script nomodule="" src="/bundle-es5.min/index.js"></script>     
+  </body>
+</html>
diff --git a/examples/angular_view_engine/package.json b/examples/angular_view_engine/package.json
@@ -36,6 +36,7 @@
         "@bazel/benchmark-runner": "^0.1.0",
         "@bazel/buildifier": "^0.29.0",
         "@bazel/ibazel": "^0.10.3",
+        "@bazel/inject-html": "^0.40.0",
         "@bazel/karma": "^0.40.0",
         "@bazel/protractor": "^0.40.0",
         "@bazel/rollup": "^0.40.0",

diff --git a/examples/angular_view_engine/src/BUILD.bazel b/examples/angular_view_engine/src/BUILD.bazel
@@ -3,6 +3,7 @@ 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_inject_html//:index.bzl", "inject_html")
 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")
@@ -83,23 +84,22 @@ _ASSETS = [
     "@npm//:node_modules/zone.js/dist/zone.min.js",
 ]
 
+inject_html(
+    name = "inject_scripts_for_dev",
+    src = "//src:example/index.html",
+    assets = _ASSETS + ["_/ts_scripts.js"],
+)
+
 # This devserver is written in Go and is super-fast.
 # It doesn't run any bundler or code splitter. Instead, it concatenates
 # named UMD and named AMD JavaScript code on-the-fly in-memory.
 # This scales really well for massive codebases.
 ts_devserver(
     name = "devserver",
-    # Serve these files but don't inject tags for them into the index file
-    # This might be because we only want to lazy-load these scripts on-demand,
-    # or because they aren't compatible with Require.js so we must use a runtime
-    # loader to load them.
-    data = [
-        "//src/assets",
-    ],
-    # Start from the development version of the main
+    # Serve src/example/index.html at /index.html
+    additional_root_paths = ["src/example"],
+    # Run the program from the development version of the main
     entry_module = "examples_angular_view_engine/src/main.dev",
-    # <script> and <link> tags will be automatically injected into this index file
-    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 = [
@@ -112,8 +112,10 @@ ts_devserver(
         "@npm//date-fns:date-fns.umd.js",
     ],
     # Serve these files in addition to the JavaScript bundle
-    # The corresponding <script> or <link> tags will be injected into the index_html
-    static_files = _ASSETS,
+    static_files = _ASSETS + [
+        ":inject_scripts_for_dev",
+        "//src/assets",
+    ],
     # Tell Bazel to build the sources first
     deps = ["//src"],
 )
@@ -161,28 +163,33 @@ terser_minified(
     src = ":bundle-es5",
 )
 
+inject_html(
+    name = "inject_scripts_for_prod",
+    src = "//src:example/index.prod.html",
+    # we can't produce "example/index.html" since that collides with the devmode file
+    # web_package rule will re-root this path because it starts with _prodapp
+    out = "_prodapp/src/example/index.html",
+    assets = _ASSETS,
+)
+
 web_package(
     name = "prodapp",
-    # In production mode we serve some polyfills with script tags that have hard-coded paths in the index.html
-    # so we must serve them at that path, by stripping a prefix
-    additional_root_paths = [
-        "npm/node_modules/core-js/client",
-        "npm/node_modules/systemjs/dist",
-    ],
-    # do not sort
-    assets = _ASSETS + [
+    srcs = _ASSETS + [
         ":bundle-es2015.min",
         ":bundle-es5.min",
-    ],
-    data = [
+        ":inject_scripts_for_prod",
         "//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:index.html",
+    # In production mode we serve some polyfills with script tags that have hard-coded paths in the index.html
+    # so we must serve them at that path, by stripping a prefix
+    additional_root_paths = [
+        "npm/node_modules/core-js/client",
+        "npm/node_modules/systemjs/dist",
+    ],
 )
 
 history_server(

diff --git a/examples/angular_view_engine/src/example/BUILD.bazel b/examples/angular_view_engine/src/example/BUILD.bazel
diff --git a/examples/angular_view_engine/src/example/index.dev.html b/examples/angular_view_engine/src/example/index.dev.html
diff --git a/examples/angular_view_engine/src/example/index.html b/examples/angular_view_engine/src/example/index.html
@@ -9,15 +9,6 @@
   </head>
   <body>
     <!-- The Angular application will be bootstrapped into this element. -->
-    <app-component></app-component>
-
-    <!-- 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-es2015.min/index.js"></script>
-    <script nomodule="" src="/bundle-es5.min/index.js"></script>     
+    <app-component></app-component>    
   </body>
 </html>