Adds Declarative Shadow DOM component.

Refs #38.

This component simply includes the Declarative Shadow DOM polyfill in the resulting JavaScript bundle.

I left out tests for the polyfill because we don't have a Karma/browser test setup yet and even then it may be difficult to test since the browser would automatically processes any declared shadow roots. It may be possible to work around, but that's something to deal with later.

Most of the complexity here is around making the component publishable to NPM. This requires an additional component at the root of the workspace just to re-export the real implementation so users can import it at `rules_prerender/declarative_shadow_dom`. See [this issue](#39 (comment)) for more information on why publishing a component looks the way it does.

One awkward aspect is that there are technically two components here (`//packages/rules_prerender/declarative_shadow_dom` and `//:declarative_shadow_dom`), the former is the real implementation and the latter is the re-export. This means that both components need to be published, but both also need hand-written `BUILD.publish` files. As a result, we use `prerender_component_publish_files()` twice, even though it is a bit redundant to have two and they heavily overlap. Regardless, I think it makes more sense for managing the `BUILD.publish` files, even if one of the `prerender_component_publish_files()` isn't strictly necessary to include.

.vscode/settings.json

@@ -20,6 +20,7 @@
         "readonly",
         "runfile",
         "semver",
+        "shadowroot",
         "testonly",
         "transpiled",
         "tsjs",

BUILD.bazel

@@ -3,6 +3,7 @@ load("@bazel_skylib//lib:dicts.bzl", "dicts")
 load("@bazel_skylib//rules:build_test.bzl", "build_test")
 load("@build_bazel_rules_nodejs//:index.bzl", "pkg_npm")
 load("//tools:publish.bzl", "publish_files")
+load("//:index.bzl", "prerender_component", "prerender_component_publish_files")
 
 exports_files(["tsconfig.json"], visibility = ["//visibility:public"])
 
@@ -26,13 +27,28 @@ bzl_library(
     ],
 )
 
+# Re-export the `declarative_shadow_dom` component at the root of the package
+# for easy import by consumers.
+prerender_component(
+    name = "declarative_shadow_dom",
+    srcs = ["declarative_shadow_dom.ts"],
+    visibility = ["//visibility:public"],
+    deps = ["//packages/rules_prerender/declarative_shadow_dom"],
+)
+
+prerender_component_publish_files(
+    name = "declarative_shadow_dom_publish_files",
+    dep = ":declarative_shadow_dom",
+)
+
 publish_files(
     name = "publish_files",
     files = [
         "README.md",
         "index.bzl",
         "package.bzl",
         "package.json",
+        ":declarative_shadow_dom_publish_files",
     ],
 )
 

BUILD.publish

@@ -1 +1,28 @@
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
+load("@npm//rules_prerender:index.bzl", "prerender_component")
+
 exports_files(glob(["**/*.bzl"]), visibility = ["//visibility:public"])
+
+prerender_component(
+    name = "declarative_shadow_dom",
+    srcs = [
+        "declarative_shadow_dom.js",
+        "declarative_shadow_dom.d.ts",
+    ],
+    deps = ["//packages/rules_prerender/declarative_shadow_dom"],
+    visibility = ["//visibility:public"],
+)
+
+# `js_library()` for client-side scripts must be in the workspace root so the
+# `path` attribute links correctly and Rollup will resolve and bundle the script
+# as expected.
+js_library(
+    name = "_declarative_shadow_dom_scripts_lib",
+    srcs = [
+        "@npm//:node_modules/rules_prerender/packages/rules_prerender/declarative_shadow_dom/declarative_shadow_dom_polyfill.mjs",
+        "@npm//:node_modules/rules_prerender/packages/rules_prerender/declarative_shadow_dom/declarative_shadow_dom_polyfill.d.ts",
+    ],
+    # Link under `external/npm/rules_prerender/...`.
+    package_name = "rules_prerender",
+    visibility = ["@npm//rules_prerender/packages/rules_prerender/declarative_shadow_dom:__pkg__"],
+)

declarative_shadow_dom.ts

@@ -0,0 +1,7 @@
+/**
+ * @fileoverview Re-exports Declarative Shadow DOM library at the root of the
+ * `rules_prerender` package so consumers can use it by importing
+ * `rules_prerender/declarative_shadow_dom`.
+ */
+
+export * from './packages/rules_prerender/declarative_shadow_dom/declarative_shadow_dom';

packages/rules_prerender/BUILD.bazel

@@ -1,5 +1,6 @@
 load("@bazel_skylib//:bzl_library.bzl", "bzl_library")
 load("@npm//@bazel/typescript:index.bzl", "ts_library")
+load("//:index.bzl", "prerender_component")
 load("//tools:jasmine.bzl", "jasmine_node_test")
 load("//tools:publish.bzl", "publish_files")
 
@@ -24,6 +25,7 @@ publish_files(
     name = "publish_files",
     files = glob(["**/*.bzl"]) + [
         "rollup-default.config.js",
+        "//packages/rules_prerender/declarative_shadow_dom:publish_files",
     ],
     visibility = ["//:__pkg__"],
 )
@@ -147,6 +149,7 @@ bzl_library(
 ts_library(
     name = "scripts",
     srcs = ["scripts.ts"],
+    visibility = ["//packages/rules_prerender/declarative_shadow_dom:__pkg__"],
     deps = ["//common/models:prerender_annotation"],
 )
 

packages/rules_prerender/declarative_shadow_dom/BUILD.bazel

@@ -0,0 +1,50 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+load(
+    "//packages/rules_prerender:prerender_component.bzl",
+    "prerender_component",
+)
+load(
+    "//packages/rules_prerender:prerender_component_publish_files.bzl",
+    "prerender_component_publish_files",
+)
+load("//tools:jasmine.bzl", "jasmine_node_test")
+load("//tools:publish.bzl", "publish_files")
+
+publish_files(
+    name = "publish_files",
+    files = [":declarative_shadow_dom_publish_files"],
+    visibility = ["//packages/rules_prerender:__pkg__"],
+)
+
+prerender_component_publish_files(
+    name = "declarative_shadow_dom_publish_files",
+    dep = ":declarative_shadow_dom",
+)
+
+prerender_component(
+    name = "declarative_shadow_dom",
+    srcs = ["declarative_shadow_dom.ts"],
+    scripts = [":declarative_shadow_dom_polyfill"],
+    lib_deps = ["//packages/rules_prerender:scripts"],
+    visibility = ["//:__pkg__"],
+)
+
+ts_library(
+    name = "declarative_shadow_dom_test_lib",
+    srcs = ["declarative_shadow_dom_test.ts"],
+    testonly = True,
+    deps = [
+        ":declarative_shadow_dom_prerender_for_test",
+        "@npm//@types/jasmine",
+    ],
+)
+
+jasmine_node_test(
+    name = "declarative_shadow_dom_test",
+    deps = [":declarative_shadow_dom_test_lib"],
+)
+
+ts_library(
+    name = "declarative_shadow_dom_polyfill",
+    srcs = ["declarative_shadow_dom_polyfill.ts"],
+)

packages/rules_prerender/declarative_shadow_dom/BUILD.publish

@@ -0,0 +1,11 @@
+load("@npm//rules_prerender:index.bzl", "prerender_component")
+
+prerender_component(
+    name = "declarative_shadow_dom",
+    srcs = [
+        "declarative_shadow_dom.js",
+        "declarative_shadow_dom.d.ts",
+    ],
+    scripts = ["@npm//rules_prerender:_declarative_shadow_dom_scripts_lib"],
+    visibility = ["@npm//rules_prerender:__pkg__"],
+)

packages/rules_prerender/declarative_shadow_dom/declarative_shadow_dom.ts

@@ -0,0 +1,10 @@
+import { includeScript } from 'rules_prerender/packages/rules_prerender/scripts';
+
+/**
+ * Returns a prerender annotation used by the bundler to inject the declarative
+ * shadow DOM polyfill into the document.
+ */
+export function polyfillDeclarativeShadowDom(): string {
+    return includeScript(
+        'rules_prerender/packages/rules_prerender/declarative_shadow_dom/declarative_shadow_dom_polyfill');
+}

packages/rules_prerender/declarative_shadow_dom/declarative_shadow_dom_polyfill.ts

@@ -0,0 +1,23 @@
+/**
+ * @fileoverview Polyfills declarative shadow DOM by searching for templates
+ *     which match its attributes and attaching them as real shadow roots.
+ * 
+ * Shamelessly stolen from: https://web.dev/declarative-shadow-dom/#polyfill and
+ * adapted for TypeScript.
+ */
+
+const templates = document.querySelectorAll('template[shadowroot]') as
+        NodeListOf<HTMLTemplateElement>;
+for (const template of Array.from(templates)) {
+    const mode = template.getAttribute('shadowroot');
+    if (mode !== 'open' && mode !== 'closed') {
+        console.error(
+            `Found declarative shadow root with invalid mode: ${mode}.`);
+        continue;
+    }
+
+    const parent = template.parentNode as Element;
+    const shadowRoot = parent.attachShadow({ mode });
+    shadowRoot.appendChild(template.content);
+    template.remove();
+}

packages/rules_prerender/declarative_shadow_dom/declarative_shadow_dom_test.ts

@@ -0,0 +1,11 @@
+import 'jasmine';
+import { polyfillDeclarativeShadowDom } from 'rules_prerender/packages/rules_prerender/declarative_shadow_dom/declarative_shadow_dom';
+
+describe('declarative_shadow_dom', () => {
+    describe('polyfillDeclarativeShadowDom()', () => {
+        it('returns an annotation to include the declarative shadow DOM polyfill', () => {
+            expect(polyfillDeclarativeShadowDom())
+                .toBe('<!-- bazel:rules_prerender:PRIVATE_DO_NOT_DEPEND_OR_ELSE - {"type":"script","path":"rules_prerender/packages/rules_prerender/declarative_shadow_dom/declarative_shadow_dom_polyfill"} -->');
+        });
+    });
+});