Migrates examples/javascript/ to use Preact.

Refs #71.
dgp1130 · Mar 13, 2023 · 60d8d70 · 60d8d70
1 parent b6724c7
commit 60d8d70
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 35 deletions.
diff --git a/examples/javascript/BUILD.bazel b/examples/javascript/BUILD.bazel
@@ -1,11 +1,22 @@
-load("//tools/typescript:defs.bzl", "ts_project")
+load("@aspect_bazel_lib//lib:copy_to_bin.bzl", "copy_to_bin")
 load("//:index.bzl", "prerender_pages", "web_resources_devserver")
 load("//tools/jasmine:defs.bzl", "jasmine_web_test_suite")
+load("//tools/typescript:defs.bzl", "ts_project")
+
+copy_to_bin(
+    name = "package",
+    srcs = ["package.json"],
+)
 
 prerender_pages(
     name = "site",
     src = "site.mjs",
-    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",
+    ],
     deps = ["//examples/javascript/component"],
 )
 

diff --git a/examples/javascript/README.md b/examples/javascript/README.md
@@ -3,6 +3,8 @@
 An example which uses JavaScript source files (as opposed to TypeScript) to
 render a component and execute client-side scripts.
 
-This example uses CommonJS to load dependencies, but it should be possible to
-use ESM with the right Node version and configuration. Doing so is not fully
-tested or supported however.
+This uses Preact via the `h` function, which doesn't require any transpilation.
+`prerender_component()` doesn't provide any JSX support for JavaScript sources
+(though it does for TypeScript sources). If using Preact with JavaScript for a
+real application, you may want to invest in a more ergonomic, compiler-less API
+such as [`htm`](https://github.com/developit/htm/).
diff --git a/examples/javascript/component/BUILD.bazel b/examples/javascript/component/BUILD.bazel
@@ -6,7 +6,8 @@ prerender_component(
     srcs = ["component.mjs"],
     lib_deps = [
         ":prerender_lib",
-        "//:node_modules/rules_prerender",
+        "//:node_modules/@rules_prerender/preact",
+        "//:node_modules/preact",
     ],
     scripts = [
         ":component_script",

diff --git a/examples/javascript/component/component.mjs b/examples/javascript/component/component.mjs
@@ -1,24 +1,25 @@
-import { includeScript } from 'rules_prerender';
+import { includeScript } from '@rules_prerender/preact';
+import { h } from 'preact';
 import { content } from './prerender_lib.mjs';
 
 /** Renders an example component with a script. */
-export function renderComponent() {
-    return `
-<div id="component">${content}</div>
-<div id="component-replace">
-    This text to be overwritten by client-side JavaScript.
-</div>
-${includeScript('./component_script.mjs', import.meta)}
-    `.trim();
+export function Component() {
+    return h('', {}, [
+        h('div', { id: 'component' }, [ content ]),
+        h('div', { id: 'component-replace' }, [
+            'This text to be overwritten by client-side JavaScript.',
+        ]),
+        includeScript('./component_script.mjs', import.meta),
+    ]);
 }
 
 /**
  * Renders an example component with a script. This is never called and should
  * not be seen in the output. Used to validate tree-shaking of JS scripts.
  */
-export function renderUnused() {
-    return `
-<div>ERROR: Should never be rendered.</div>
-${includeScript('./component_script_unused.mjs', import.meta)}
-    `.trim();
+export function Unused() {
+    return h('', {}, [
+        h('div', {}, [ 'ERROR: Should never be rendered.' ]),
+        includeScript('./component_script_unused.mjs', import.meta),
+    ]);
 }
diff --git a/examples/javascript/package.json b/examples/javascript/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/examples/javascript/site.mjs b/examples/javascript/site.mjs
@@ -1,19 +1,19 @@
-import { PrerenderResource } from 'rules_prerender';
-import { renderComponent } from './component/component.mjs';
+import { PrerenderResource, renderToHtml } from '@rules_prerender/preact';
+import { h } from 'preact';
+import { Component } from './component/component.mjs';
 
 /* Renders the page. */
 export default function* () {
-    yield PrerenderResource.of('/index.html', `
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf8">
-        <title>JavaScript</title>
-    </head>
-    <body>
-        <h2>JavaScript</h2>
-        ${renderComponent()}
-    </body>
-</html>
-    `.trim());
+    yield PrerenderResource.of('/index.html', renderToHtml(
+        h('html', {}, [
+            h('head', {}, [
+                h('meta', { charSet: 'utf8' }),
+                h('title', {}, [ 'JavaScript ']),
+            ]),
+            h('body', {}, [
+                h('h2', {}, [ 'JavaScript' ]),
+                Component(),
+            ]),
+        ]),
+    ));
 }