Adds Declarative Shadow DOM component.

Refs #38.

TODO

.vscode/settings.json

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

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,8 @@ publish_files(
     name = "publish_files",
     files = glob(["**/*.bzl"]) + [
         "rollup-default.config.js",
+        "declarative_shadow_dom.ts",
+        "declarative_shadow_dom_polyfill.ts",
     ],
     visibility = ["//:__pkg__"],
 )
@@ -190,3 +193,32 @@ jasmine_node_test(
     name = "styles_test",
     deps = [":styles_test_lib"],
 )
+
+
+prerender_component(
+    name = "declarative_shadow_dom",
+    srcs = ["declarative_shadow_dom.ts"],
+    scripts = [":declarative_shadow_dom_polyfill"],
+    lib_deps = [":rules_prerender"],
+    visibility = ["//visibility:public"],
+)
+
+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/BUILD.publish

@@ -1,4 +1,22 @@
+load(":prerender_component.bzl", "prerender_component")
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
 exports_files(
     ["rollup-default.config.js"],
     visibility = ["//visibility:public"],
 )
+
+# TESTME
+# TODO(#39): Don't ship TypeScript code to NPM and compile it on the user's cpu.
+prerender_component(
+    name = "declarative_shadow_dom",
+    srcs = ["declarative_shadow_dom.ts"],
+    scripts = [":declarative_shadow_dom_polyfill"],
+    lib_deps = ["@npm//rules_prerender"],
+    visibility = ["//visibility:public"],
+)
+
+ts_library(
+    name = "declarative_shadow_dom_polyfill",
+    srcs = ["declarative_shadow_dom_polyfill.ts"],
+)

packages/rules_prerender/declarative_shadow_dom.ts

@@ -0,0 +1,10 @@
+import { includeScript } from 'rules_prerender';
+
+/**
+ * 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_polyfill');
+}

packages/rules_prerender/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_test.ts

@@ -0,0 +1,11 @@
+import 'jasmine';
+import { polyfillDeclarativeShadowDom } from 'rules_prerender/packages/rules_prerender/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_polyfill"} -->');
+        });
+    });
+});