From e505ac2618664df483cb5b1dcf52735c83ea1267 Mon Sep 17 00:00:00 2001
From: Doug Parker <dgp1130@users.noreply.github.com>
Date: Sun, 12 Mar 2023 18:28:03 -0700
Subject: [PATCH] Adds Preact support to
 `@rules_prerender/declarative_shadow_dom`.

Refs #71.

This adds a new `/preact.mjs` entry point which is implemeted via an optional peer dep on `@rules_prerender/preact`.

I tried adding `exports` to specifically support jsut `/preact.mjs`, but unfortunately that requires `moduleResolution: "Node16"` in `tsconfig.json` which introduces a whole bunch of other problems I don't want to deal with at the moment.
---
 examples/preact/component/BUILD.bazel        |  1 +
 examples/preact/component/component.tsx      |  2 ++
 packages/declarative_shadow_dom/BUILD.bazel  | 11 +++++++++--
 packages/declarative_shadow_dom/package.json |  6 ++++++
 packages/declarative_shadow_dom/preact.mts   | 10 ++++++++++
 5 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 packages/declarative_shadow_dom/preact.mts

diff --git a/examples/preact/component/BUILD.bazel b/examples/preact/component/BUILD.bazel
index d21c3230..ef259ae4 100644
--- a/examples/preact/component/BUILD.bazel
+++ b/examples/preact/component/BUILD.bazel
@@ -13,6 +13,7 @@ prerender_component(
         "//:node_modules/@rules_prerender/preact",
         "//:node_modules/preact",
     ],
+    deps = ["//:prerender_components/@rules_prerender/declarative_shadow_dom"],
 )
 
 ts_project(
diff --git a/examples/preact/component/component.tsx b/examples/preact/component/component.tsx
index b73f3eed..a7724cd9 100644
--- a/examples/preact/component/component.tsx
+++ b/examples/preact/component/component.tsx
@@ -1,3 +1,4 @@
+import { polyfillDeclarativeShadowDom } from '@rules_prerender/declarative_shadow_dom/preact.mjs';
 import { Template, includeScript, inlineStyle } from '@rules_prerender/preact';
 import { ComponentChildren, VNode } from 'preact';
 
@@ -19,6 +20,7 @@ export function Component({ text, children }: {
             <div id="replace">This text to be replaced by page JavaScript.</div>
             <slot></slot>
 
+            {polyfillDeclarativeShadowDom()}
             {includeScript('./script.mjs', import.meta)}
             {inlineStyle('./style.css', import.meta)}
         </Template>
diff --git a/packages/declarative_shadow_dom/BUILD.bazel b/packages/declarative_shadow_dom/BUILD.bazel
index f96c7264..3379eb1f 100644
--- a/packages/declarative_shadow_dom/BUILD.bazel
+++ b/packages/declarative_shadow_dom/BUILD.bazel
@@ -37,11 +37,18 @@ npm_publish(
 
 prerender_component(
     name = "declarative_shadow_dom",
-    srcs = ["declarative_shadow_dom.mts"],
+    srcs = [
+        "declarative_shadow_dom.mts",
+        "preact.mts",
+    ],
     tsconfig = "//:tsconfig",
     source_map = True,
     scripts = [":declarative_shadow_dom_polyfill"],
-    lib_deps = ["//:node_modules/rules_prerender"],
+    lib_deps = [
+        "//:node_modules/@rules_prerender/preact",
+        "//:node_modules/preact",
+        "//:node_modules/rules_prerender",
+    ],
     visibility = [
         "//:__pkg__",
         "//packages/rules_prerender:__pkg__",
diff --git a/packages/declarative_shadow_dom/package.json b/packages/declarative_shadow_dom/package.json
index a248a655..f491e782 100644
--- a/packages/declarative_shadow_dom/package.json
+++ b/packages/declarative_shadow_dom/package.json
@@ -4,6 +4,12 @@
     "type": "module",
     "main": "./declarative_shadow_dom.mjs",
     "peerDependencies": {
+        "@rules_prerender/preact": "^0.0.0-PLACEHOLDER",
         "rules_prerender": "^0.0.0-PLACEHOLDER"
+    },
+    "peerDependenciesMeta": {
+        "@rules_prerender/preact": {
+            "optional": true
+        }
     }
 }
diff --git a/packages/declarative_shadow_dom/preact.mts b/packages/declarative_shadow_dom/preact.mts
new file mode 100644
index 00000000..c3c32c14
--- /dev/null
+++ b/packages/declarative_shadow_dom/preact.mts
@@ -0,0 +1,10 @@
+import { includeScript } from '@rules_prerender/preact';
+import type { VNode } from 'preact';
+
+/**
+ * Returns a prerender annotation used by the bundler to inject the declarative
+ * shadow DOM polyfill into the document.
+ */
+export function polyfillDeclarativeShadowDom(): VNode {
+    return includeScript('./declarative_shadow_dom_polyfill.mjs', import.meta);
+}