From 6694e6a401d7929d9a0e562a5b73a4cf88050017 Mon Sep 17 00:00:00 2001
From: Doug Parker <dgp1130@users.noreply.github.com>
Date: Sat, 11 Feb 2023 21:28:32 -0800
Subject: [PATCH] Refactors external example to use a separate component.

Refs #48.

Need to refactor the way that `tsconfig.json` was managed and also realized that I needed to have a separate `tsconfig.client.json` to make sure it was compiled targetting ESM.
---
 examples/external/BUILD.bazel              |  43 ++++++++-------------
 examples/external/component/BUILD.bazel    |  40 +++++++++++++++++++
 examples/external/component/component.ts   |  18 +++++++++
 examples/external/{ => component}/logo.png | Bin
 examples/external/component/script.ts      |   9 +++++
 examples/external/component/style.css      |   7 ++++
 examples/external/script.ts                |   1 -
 examples/external/site.ts                  |  14 ++-----
 examples/external/style.css                |   3 --
 examples/external/tsconfig.client.json     |   7 ++++
 10 files changed, 100 insertions(+), 42 deletions(-)
 create mode 100644 examples/external/component/BUILD.bazel
 create mode 100644 examples/external/component/component.ts
 rename examples/external/{ => component}/logo.png (100%)
 create mode 100644 examples/external/component/script.ts
 create mode 100644 examples/external/component/style.css
 delete mode 100644 examples/external/script.ts
 delete mode 100644 examples/external/style.css
 create mode 100644 examples/external/tsconfig.client.json

diff --git a/examples/external/BUILD.bazel b/examples/external/BUILD.bazel
index db86df30..94472c92 100644
--- a/examples/external/BUILD.bazel
+++ b/examples/external/BUILD.bazel
@@ -1,14 +1,12 @@
 load("@aspect_rules_js//js:defs.bzl", "js_binary", "js_run_binary")
 load("@aspect_rules_js//npm:defs.bzl", "npm_link_package")
-load("@aspect_rules_ts//ts:defs.bzl", "ts_project")
+load("@aspect_rules_ts//ts:defs.bzl", "ts_config", "ts_project")
 load("@bazel_skylib//rules:build_test.bzl", "build_test")
 load("@npm_user//:defs.bzl", "npm_link_all_packages")
 load(
     "@rules_prerender//:index.bzl",
-    "css_library",
     "link_prerender_component",
     "prerender_pages",
-    "web_resources",
     "web_resources_devserver",
 )
 
@@ -30,35 +28,26 @@ link_prerender_component(
     visibility = ["//visibility:public"],
 )
 
+ts_config(
+    name = "tsconfig",
+    src = "tsconfig.json",
+    visibility = ["//visibility:public"],
+)
+
+ts_config(
+    name = "tsconfig_client",
+    src = "tsconfig.client.json",
+    visibility = ["//visibility:public"],
+    deps = [":tsconfig"],
+)
+
 prerender_pages(
     name = "site",
     src = "site.ts",
-    scripts = [":script"],
-    styles = [":styles"],
-    resources = [":resources"],
     source_map = True, # TODO(#48): This doesn't seem to work?
-    tsconfig = "//:tsconfig.json",
+    tsconfig = "//:tsconfig",
     lib_deps = ["//:node_modules/rules_prerender"],
-    deps = ["//:prerender_components/@rules_prerender/declarative_shadow_dom"],
-)
-
-ts_project(
-    name = "script",
-    srcs = ["script.ts"],
-    declaration = True,
-    source_map = True,
-)
-
-css_library(
-    name = "styles",
-    srcs = ["style.css"],
-)
-
-web_resources(
-    name = "resources",
-    entries = {
-        "/logo": "logo.png",
-    },
+    deps = ["//component"],
 )
 
 web_resources_devserver(
diff --git a/examples/external/component/BUILD.bazel b/examples/external/component/BUILD.bazel
new file mode 100644
index 00000000..0ff2bc59
--- /dev/null
+++ b/examples/external/component/BUILD.bazel
@@ -0,0 +1,40 @@
+load("@aspect_rules_ts//ts:defs.bzl", "ts_project")
+load(
+    "@rules_prerender//:index.bzl",
+    "css_library",
+    "prerender_component",
+    "web_resources",
+)
+
+prerender_component(
+    name = "component",
+    srcs = ["component.ts"],
+    scripts = [":script"],
+    styles = [":style"],
+    resources = [":resources"],
+    source_map = True,
+    tsconfig = "//:tsconfig",
+    visibility = ["//:__subpackages__"],
+    lib_deps = ["//:node_modules/rules_prerender"],
+    deps = ["//:prerender_components/@rules_prerender/declarative_shadow_dom"],
+)
+
+ts_project(
+    name = "script",
+    srcs = ["script.ts"],
+    declaration = True,
+    source_map = True,
+    tsconfig = "//:tsconfig_client",
+)
+
+css_library(
+    name = "style",
+    srcs = ["style.css"],
+)
+
+web_resources(
+    name = "resources",
+    entries = {
+        "/logo": "logo.png",
+    },
+)
diff --git a/examples/external/component/component.ts b/examples/external/component/component.ts
new file mode 100644
index 00000000..6fc04d2e
--- /dev/null
+++ b/examples/external/component/component.ts
@@ -0,0 +1,18 @@
+import { includeScript, inlineStyle } from 'rules_prerender';
+import { polyfillDeclarativeShadowDom } from '@rules_prerender/declarative_shadow_dom';
+
+export function renderComponent(): string {
+  return `
+<my-component>
+  <template shadowroot="open">
+    <img src="/logo" />
+    <div>Component</div>
+    <div id="replace">This text to be replaced by JavaScript.</div>
+
+    ${polyfillDeclarativeShadowDom()}
+    ${includeScript('component/script.js')}
+    ${inlineStyle('external/component/style.css')}
+  </template>
+</my-component>
+  `.trim();
+}
diff --git a/examples/external/logo.png b/examples/external/component/logo.png
similarity index 100%
rename from examples/external/logo.png
rename to examples/external/component/logo.png
diff --git a/examples/external/component/script.ts b/examples/external/component/script.ts
new file mode 100644
index 00000000..1e2582b9
--- /dev/null
+++ b/examples/external/component/script.ts
@@ -0,0 +1,9 @@
+export class MyComponent extends HTMLElement {
+    connectedCallback(): void {
+        const el = this.shadowRoot.querySelector('#replace');
+        if (!el) throw new Error('Could not find `#replace` element.');
+        el.textContent = 'This text rendered by page JavaScript!';
+    }
+}
+
+customElements.define('my-component', MyComponent);
diff --git a/examples/external/component/style.css b/examples/external/component/style.css
new file mode 100644
index 00000000..86d762b5
--- /dev/null
+++ b/examples/external/component/style.css
@@ -0,0 +1,7 @@
+:host {
+    display: block;
+}
+
+span {
+    color: red;
+}
diff --git a/examples/external/script.ts b/examples/external/script.ts
deleted file mode 100644
index eb065f93..00000000
--- a/examples/external/script.ts
+++ /dev/null
@@ -1 +0,0 @@
-console.log('Hello, World!');
diff --git a/examples/external/site.ts b/examples/external/site.ts
index cccd661a..dbb6e6e6 100644
--- a/examples/external/site.ts
+++ b/examples/external/site.ts
@@ -1,5 +1,5 @@
-import { includeScript, inlineStyle, PrerenderResource } from 'rules_prerender';
-import { polyfillDeclarativeShadowDom } from '@rules_prerender/declarative_shadow_dom';
+import { PrerenderResource } from 'rules_prerender';
+import { renderComponent } from './component/component';
 
 export default function*(): Generator<PrerenderResource, void, void> {
     yield PrerenderResource.of('/index.html', `
@@ -11,16 +11,8 @@ export default function*(): Generator<PrerenderResource, void, void> {
     </head>
     <body>
         <h2>Hello, World!</h2>
-        <img src="/logo">
 
-        <div>
-            <template shadowroot="open">
-                ${polyfillDeclarativeShadowDom()}
-                <h2>Component</h2>
-                ${includeScript('script.js')}
-                ${inlineStyle('external/style.css')}
-            </template>
-        </div>
+        ${renderComponent()}
     </body>
 </html>
     `.trim());
diff --git a/examples/external/style.css b/examples/external/style.css
deleted file mode 100644
index d7d3458a..00000000
--- a/examples/external/style.css
+++ /dev/null
@@ -1,3 +0,0 @@
-h2 {
-    color: red;
-}
diff --git a/examples/external/tsconfig.client.json b/examples/external/tsconfig.client.json
new file mode 100644
index 00000000..1460426f
--- /dev/null
+++ b/examples/external/tsconfig.client.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    // Override module so `tsc` generates JS with ESM `import` instead of CommonJS `require()`.
+    "module": "ES2020",
+  }
+}