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

@@ -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(

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",
+    },
+)

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();
+}

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);

examples/external/component/style.css

@@ -0,0 +1,7 @@
+:host {
+    display: block;
+}
+
+span {
+    color: red;
+}

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());

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",
+  }
+}