Updates script bundling to use multiple entry points.

Refs #26.

Previously, we collected all the scripts referenced by `includeScript()` and bundled them together into a single JavaScript file which was injected into _every_ HTML page. This is unnecessarily broad, as not all pages use all the JavaScript. Instead, we should bundle the JavaScript for each HTML page separately, with shared chunks for common functionality.

This makes a few updates to support multiple entry points.
1. It updates annotation extractor to no longer generate a list of included scripts, but instead generate a map of HTML file -> list of included scripts. This provides enough information to know which scripts are associated with which page.
2. It updates script entry generator to generate a directory (`TreeArtifact`) of entry points instead of a single entry point. This directory contains an entry point for every HTML file which includes at least one script.
3. It replaces `rollup_bundle()` with a custom rule which invokes the `rollup` binary under the hood. This is necessary because `rollup_bundle()` supports multiple entry points _only_ if those entry points are known at analysis time. In this case, they are not because we can't know what HTML files will include scripts until execution time.
4. It updates resource injector to no longer accept a single JavaScript bundle, but instead accept a directory of JavaScript bundles. These bundles are directly copied to the output directory and also any matching HTML file gets its associated JavaScript file injected.

In the process I also updated `rollup.config.ts` so it is authored in TypeScript and includes its own plugin dependenices.

Author: dgp1130

common/models/prerender_metadata.ts

@@ -1,7 +1,7 @@
 /** Metadata about a prerendered HTML file. */
 export interface PrerenderMetadata {
-    /** Scripts to include. */
-    readonly scripts: readonly ScriptMetadata[];
+    /** Map of HTML relative path to a list of scripts it includes. */
+    readonly includedScripts: Record<string /* htmlRelPath */, ScriptMetadata[]>;
 }
 
 /** Metadata for a script to be included in a prerendered HTML file. */

common/models/prerender_metadata_mock.ts

@@ -10,7 +10,9 @@ export function mockPrerenderMetadata(
     overrides: Partial<PrerenderMetadata> = {},
 ): PrerenderMetadata {
     return {
-        scripts: [],
+        includedScripts: {
+            ...overrides.includedScripts,
+        },
         ...overrides,
     };
 }

packages/rules_prerender/BUILD.bazel

@@ -1,13 +1,23 @@
+load("@rules_prerender_npm//:rollup/package_json.bzl", "bin")
 load("@aspect_bazel_lib//lib:copy_to_bin.bzl", "copy_to_bin")
 load("@bazel_skylib//:bzl_library.bzl", "bzl_library")
 load("//:index.bzl", "prerender_component")
 load("//tools/jasmine:defs.bzl", "jasmine_node_test")
 load("//tools/typescript:defs.bzl", "ts_project")
 
-copy_to_bin(
+bin.rollup_binary(
+    name = "rollup",
+    visibility = ["//visibility:public"],
+)
+
+ts_project(
     name = "rollup_config",
-    srcs = ["rollup-default.config.js"],
+    srcs = ["rollup.config.ts"],
     visibility = ["//visibility:public"],
+    deps = [
+        "//:node_modules/@rollup/plugin-node-resolve",
+        "//:node_modules/rollup",
+    ],
 )
 
 ts_project(
@@ -103,6 +113,7 @@ bzl_library(
     deps = [
         ":multi_inject_resources",
         ":prerender_pages_unbundled",
+        ":scripts_bundle",
         ":web_resources",
     ],
 )
@@ -119,6 +130,11 @@ bzl_library(
     ],
 )
 
+bzl_library(
+    name = "scripts_bundle",
+    srcs = ["scripts_bundle.bzl"],
+)
+
 bzl_library(
     name = "web_resources",
     srcs = ["web_resources.bzl"],

packages/rules_prerender/multi_inject_resources.bzl

@@ -20,16 +20,16 @@ def _multi_inject_resources_impl(ctx):
     args = ctx.actions.args()
     args.add("--input-dir", ctx.file.input_dir.short_path)
     args.add("--config", config.short_path)
-    if ctx.attr.bundle:
-        args.add("--bundle", ctx.file.bundle.short_path)
+    if ctx.attr.bundles:
+        args.add("--bundles", ctx.file.bundles.short_path)
     args.add("--output-dir", output_dir.short_path)
     ctx.actions.run(
         mnemonic = "MultiInjectResources",
         progress_message = "Injecting resources into multiple pages",
         executable = ctx.executable._injector,
         arguments = [args],
         inputs = [ctx.file.input_dir, config] +
-                 ([ctx.file.bundle] if ctx.file.bundle else []) +
+                 ([ctx.file.bundles] if ctx.file.bundles else []) +
                  ctx.files.styles,
         outputs = [output_dir],
         env = {
@@ -49,7 +49,7 @@ multi_inject_resources = rule(
             mandatory = True,
             allow_single_file = True,
         ),
-        "bundle": attr.label(allow_single_file = True),
+        "bundles": attr.label(allow_single_file = True),
         "scripts": attr.string_list(),
         "styles": attr.label(),
         "_injector": attr.label(

packages/rules_prerender/prerender_pages.bzl

@@ -1,8 +1,8 @@
 """Defines `prerender_pages()` functionality."""
 
-load("@aspect_rules_rollup//rollup:defs.bzl", "rollup_bundle")
 load(":multi_inject_resources.bzl", "multi_inject_resources")
 load(":prerender_pages_unbundled.bzl", "prerender_pages_unbundled")
+load(":scripts_bundle.bzl", "scripts_bundle")
 load(":web_resources.bzl", "web_resources")
 
 visibility(["//"])
@@ -124,25 +124,20 @@ def prerender_pages(
 
     bundle = "%s_bundle" % name
     if bundle_js:
-        # Bundle all client-side scripts at `%{name}_bundle.js`.
-        rollup_bundle(
+        # Bundle all client-side scripts in a `TreeArtifact` at `%{name}_bundle`.
+        scripts_bundle(
             name = bundle,
-            entry_point = ":%s_scripts.js" % prerender_name,
-            config_file = Label("//packages/rules_prerender:rollup_config"),
-            silent = True,
+            entry_points = ":%s_scripts_entries" % prerender_name,
             testonly = testonly,
-            deps = [
-                ":%s_scripts" % prerender_name,
-                "//:node_modules/@rollup/plugin-node-resolve",
-            ],
+            deps = [":%s_scripts" % prerender_name],
         )
 
     # Inject bundled JS and CSS into the HTML.
     injected_dir = "%s_injected" % name
     multi_inject_resources(
         name = injected_dir,
         input_dir = ":%s" % prerender_name,
-        bundle = ":%s" % bundle if bundle_js else None,
+        bundles = ":%s" % bundle if bundle_js else None,
         styles = ":%s_styles" % prerender_name,
         testonly = testonly,
     )

packages/rules_prerender/prerender_pages_unbundled.bzl

@@ -4,7 +4,7 @@ load("@aspect_rules_js//js:defs.bzl", "js_library")
 load("//common:label.bzl", "absolute", "file_path_of", "rel_path")
 load(":prerender_component.bzl", "prerender_component")
 load(":prerender_resources.bzl", "prerender_resources_internal")
-load(":script_entry_point.bzl", "script_entry_point")
+load(":script_entry_point.bzl", "script_entry_points")
 load(":web_resources.bzl", "WebResourceInfo", "web_resources")
 
 visibility(["//"])
@@ -60,10 +60,12 @@ def prerender_pages_unbundled(
     Outputs:
         %{name}: A `web_resources()` target containing all the files generated
             by the `src` file at their corresponding locations.
-        %{name}_scripts: A `js_library()` rule containing all the client-side
+        %{name}_scripts: A `js_library()` target containing all the client-side
             scripts used by the page. This includes a generated file
             `%{name}_scripts.js` which acts as an entry point, importing all
             scripts that were included in the page via `includeScript()`.
+        %{name}_scripts_entries: A `TreeArtifact` containing all the entry points
+            used for bundling laid out in the generated directory format.
         %{name}_resources: A `web_resources()` target containing all the
             transitively used resources.
         %{name}_prerender_for_test: An alias to the `ts_project()` target which
@@ -144,11 +146,9 @@ def prerender_pages_unbundled(
 
     # Generate the entry point importing all included scripts.
     client_scripts = "%s_scripts" % name
-    script_entry = "%s.js" % client_scripts
-    script_entry_point(
-        name = "%s_entry" % client_scripts,
+    script_entry_points(
+        name = "%s_entries" % client_scripts,
         metadata = metadata,
-        output_entry_point = script_entry,
         testonly = testonly,
         # Export this file so Rollup can have a direct, label reference to the
         # entry point, since including the file in a `depset()` with other files
@@ -157,10 +157,9 @@ def prerender_pages_unbundled(
     )
 
     # Reexport all included scripts at `%{name}_scripts`.
-    js_library(
+    native.alias(
         name = client_scripts,
-        srcs = [script_entry],
-        deps = [":%s" % component_scripts],
+        actual = ":%s" % component_scripts,
         testonly = testonly,
         visibility = visibility,
     )

…rules_prerender/rollup-default.config.js packages/rules_prerender/rollup.config.tspackages/rules_prerender/rollup-default.config.js renamed to packages/rules_prerender/rollup.config.ts packages/rules_prerender/rollup-default.config.js renamed to packages/rules_prerender/rollup.config.ts

@@ -1,4 +1,5 @@
 import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { RollupOptions } from 'rollup';
 
 export default {
     plugins: [
@@ -19,4 +20,4 @@ export default {
 
         throw new Error(warning.message);
     },
-};
+} as RollupOptions;

packages/rules_prerender/script_entry_point.bzl

@@ -1,40 +1,66 @@
 """Defines functionality to generate entry points for JS and CSS."""
 
+load("@aspect_bazel_lib//lib:paths.bzl", "to_output_relative_path")
 load("@aspect_rules_js//js:defs.bzl", "js_run_binary")
 load("//common:label.bzl", "absolute", "file_path_of")
 
 visibility(["//"])
 
-def script_entry_point(
-    name,
-    metadata,
-    output_entry_point,
-    testonly = None,
-    visibility = None,
-):
-    """Generates an entry point for scripts with the given metadata.
-    
-    Args:
-        name: Name of this target.
-        metadata: A metadata JSON file containing information about the scripts
-            to bundle.
-        output_entry_point: Location to write the generated script entry point.
-        testonly: https://bazel.build/reference/be/common-definitions#common-attributes
-        visibility: https://bazel.build/reference/be/common-definitions#common-attributes
-    """
-    package_depth = len(native.package_name().split("/")) if native.package_name() != "" else 0
-    js_run_binary(
-        name = name,
-        mnemonic = "GenerateScriptEntryPoint",
-        progress_message = "Generating script entry point %{label}",
-        srcs = [metadata],
-        outs = [output_entry_point],
-        tool = Label("//tools/binaries/script_entry_generator"),
-        args = [
-            "--metadata", file_path_of(absolute(metadata)),
-            "--import-depth", str(package_depth),
-            "--output", file_path_of(absolute(output_entry_point)),
-        ],
-        testonly = testonly,
-        visibility = visibility,
+def _script_entry_points_impl(ctx):
+    output = ctx.actions.declare_directory(ctx.label.name)
+
+    args = ctx.actions.args()
+    args.add("--metadata", to_output_relative_path(ctx.file.metadata))
+    args.add("--output-dir", to_output_relative_path(output))
+
+    ctx.actions.run(
+        mnemonic = "GenerateScriptEntryPoints",
+        progress_message = "Generating script entry points %{label}",
+        executable = ctx.executable._script_entry_generator,
+        arguments = [args],
+        inputs = [ctx.file.metadata],
+        outputs = [output],
+        env = {"BAZEL_BINDIR": ctx.bin_dir.path},
     )
+
+    return DefaultInfo(files = depset([output]))
+
+script_entry_points = rule(
+    implementation = _script_entry_points_impl,
+    attrs = {
+        "metadata": attr.label(
+            mandatory = True,
+            allow_single_file = True,
+            doc = """
+                A metadata JSON file containing information about the scripts
+                to bundle.
+            """
+        ),
+        "_script_entry_generator": attr.label(
+            default = "//tools/binaries/script_entry_generator",
+            executable = True,
+            cfg = "exec",
+        ),
+    },
+    doc = """
+        Generates a `TreeArtifact` at `%{name}` with a `.js` file generated for
+        every HTML file with included scripts as defined in the given `metadata`
+        file. For example, if the user generates the following HTML files and
+        includes the associated JavaScript files:
+
+        ```
+        * /index.html - [ path/to/pkg/foo.js, path/to/pkg/baz.js ]
+        * /dir/other.html - [ path/to/pkg/bar.js, path/to/pkg/baz.js ]
+        ```
+
+        Then `script_entry_points` will generate a `TreeArtifact` with:
+
+        ```
+        * /index.js - `import './path/to/pkg/foo.js'; import './path/to/pkg/baz.js';`
+        * /dir/other.js - `import './path/to/pkg/bar.js'; import './path/to/pkg/baz.js';`
+        ```
+
+        These can serve as entry points for the JavaScript bundles necessary for
+        each HTML page.
+    """,
+)