Migrates examples/scripts/ to use Preact.

Refs #71.
dgp1130 · Mar 13, 2023 · ab66a27 · ab66a27
1 parent cecc8a1
commit ab66a27
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 32 deletions.
diff --git a/examples/scripts/BUILD.bazel b/examples/scripts/BUILD.bazel
@@ -1,13 +1,24 @@
+load("@aspect_bazel_lib//lib:copy_to_bin.bzl", "copy_to_bin")
 load("//tools/typescript:defs.bzl", "ts_project")
 load("//:index.bzl", "prerender_pages", "web_resources_devserver")
 load("//tools/jasmine:defs.bzl", "jasmine_web_test_suite")
 
+copy_to_bin(
+    name = "package",
+    srcs = ["package.json"],
+)
+
 prerender_pages(
     name = "site",
-    src = "site.mts",
+    src = "site.tsx",
     tsconfig = "//:tsconfig",
     source_map = True,
-    lib_deps = ["//:node_modules/rules_prerender"],
+    # Need `"type": "module"` to load `*.js` files output by `*.tsx` compilation.
+    data = [":package"],
+    lib_deps = [
+        "//:node_modules/@rules_prerender/preact",
+        "//:node_modules/preact",
+    ],
     scripts = [":script"],
     deps = ["//examples/scripts/component"],
 )

diff --git a/examples/scripts/component/BUILD.bazel b/examples/scripts/component/BUILD.bazel
@@ -3,10 +3,13 @@ load("//:index.bzl", "prerender_component")
 
 prerender_component(
     name = "component",
-    srcs = ["component.mts"],
+    srcs = ["component.tsx"],
     tsconfig = "//:tsconfig",
     source_map = True,
-    lib_deps = ["//:node_modules/rules_prerender"],
+    lib_deps = [
+        "//:node_modules/@rules_prerender/preact",
+        "//:node_modules/preact",
+    ],
     scripts = [":component_script"],
     visibility = ["//examples/scripts:__subpackages__"],
     deps = ["//examples/scripts/transitive"],

diff --git a/examples/scripts/component/component.mts b/examples/scripts/component/component.mts
diff --git a/examples/scripts/component/component.tsx b/examples/scripts/component/component.tsx
@@ -0,0 +1,15 @@
+import { includeScript } from '@rules_prerender/preact';
+import { VNode } from 'preact';
+import { Transitive } from '../transitive/transitive.js';
+
+/** Renders HTML which expects a JavaScript library to be included. */
+export function Component(): VNode {
+    return <>
+        <div>I'm a component with some JavaScript!</div>
+        <div id="component-replace">
+            This text to be overwritten by client-side JavaScript.
+        </div>
+        {includeScript('./component_script.mjs', import.meta)}
+        <Transitive />
+    </>;
+}
diff --git a/examples/scripts/package.json b/examples/scripts/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/examples/scripts/site.mts → examples/scripts/site.tsx b/examples/scripts/site.mts → examples/scripts/site.tsx
@@ -1,10 +1,9 @@
-import { PrerenderResource, includeScript } from 'rules_prerender';
-import { renderComponent } from './component/component.mjs';
+import { PrerenderResource, includeScript, renderToHtml } from '@rules_prerender/preact';
+import { Component } from './component/component.js';
 
 /** Render some HTML with a `<script />` tag. */
 export default function*(): Generator<PrerenderResource, void, void> {
-    yield PrerenderResource.of('/index.html', `
-        <!DOCTYPE html>
+    yield PrerenderResource.of('/index.html', renderToHtml(
         <html>
             <head>
                 <title>Scripts</title>
@@ -14,9 +13,9 @@ export default function*(): Generator<PrerenderResource, void, void> {
                 <div id="replace">
                     This text to be overwritten by client-side JavaScript.
                 </div>
-                ${includeScript('./script.mjs', import.meta)}
-                ${renderComponent()}
+                {includeScript('./script.mjs', import.meta)}
+                <Component />
             </body>
         </html>
-    `);
+    ));
 }
diff --git a/examples/scripts/transitive/BUILD.bazel b/examples/scripts/transitive/BUILD.bazel
@@ -3,10 +3,13 @@ load("//:index.bzl", "prerender_component")
 
 prerender_component(
     name = "transitive",
-    srcs = ["transitive.mts"],
+    srcs = ["transitive.tsx"],
     tsconfig = "//:tsconfig",
     source_map = True,
-    lib_deps = ["//:node_modules/rules_prerender"],
+    lib_deps = [
+        "//:node_modules/@rules_prerender/preact",
+        "//:node_modules/preact",
+    ],
     scripts = [":transitive_script"],
     visibility = ["//examples/scripts:__subpackages__"],
 )

diff --git a/examples/scripts/transitive/transitive.mts → examples/scripts/transitive/transitive.tsx b/examples/scripts/transitive/transitive.mts → examples/scripts/transitive/transitive.tsx
@@ -1,12 +1,13 @@
-import { includeScript } from 'rules_prerender';
+import { includeScript } from '@rules_prerender/preact';
+import { VNode } from 'preact';
 
 /** Renders HTML which expects a JavaScript library to be included. */
-export function renderTransitive(): string {
-    return `
+export function Transitive(): VNode {
+    return <>
         <div>I'm a transitive component with some JavaScript!</div>
         <div id="transitive-replace">
             This text to be overwritten by client-side JavaScript.
         </div>
-        ${includeScript('./transitive_script.mjs', import.meta)}
-    `;
+        {includeScript('./transitive_script.mjs', import.meta)}
+    </>;
 }