Migrates examples/tsjs/ to use Preact.

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

Hide file tree

Showing 16 changed files with 151 additions and 130 deletions.
diff --git a/examples/tsjs/BUILD.bazel b/examples/tsjs/BUILD.bazel
@@ -1,18 +1,29 @@
+load("@aspect_bazel_lib//lib:copy_to_bin.bzl", "copy_to_bin")
 load("@aspect_rules_js//js:defs.bzl", "js_library")
-load("//tools/typescript:defs.bzl", "ts_project")
 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.mts",
+    src = "site.tsx",
     tsconfig = "//:tsconfig",
     source_map = True,
     scripts = [
         ":ts_parent_script",
         ":js_parent_script",
     ],
-    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/tsjs/js_parent",
         "//examples/tsjs/ts_parent",

diff --git a/examples/tsjs/js_child/BUILD.bazel b/examples/tsjs/js_child/BUILD.bazel
@@ -7,4 +7,5 @@ prerender_component(
         "js_child.d.mts",
     ],
     visibility = ["//examples/tsjs:__subpackages__"],
+    lib_deps = ["//:node_modules/preact"],
 )
diff --git a/examples/tsjs/js_child/js_child.d.mts b/examples/tsjs/js_child/js_child.d.mts
@@ -1 +1,3 @@
-export function renderJsChild(): string;
+import { VNode } from 'preact';
+
+export function JsChild(): VNode;
diff --git a/examples/tsjs/js_child/js_child.mjs b/examples/tsjs/js_child/js_child.mjs
@@ -1,7 +1,7 @@
-export function renderJsChild() {
-    return `
-<div class="js-child">
-    <span>JS child</span>
-</div>
-    `.trim();
+import { h } from 'preact';
+
+export function JsChild() {
+    return h('div', { className: 'js-child' }, [
+        h('span', {}, [ 'JS child' ]),
+    ]);
 }
diff --git a/examples/tsjs/js_parent/BUILD.bazel b/examples/tsjs/js_parent/BUILD.bazel
@@ -7,5 +7,6 @@ prerender_component(
         "js_parent.d.mts",
     ],
     visibility = ["//examples/tsjs:__subpackages__"],
+    lib_deps = ["//:node_modules/preact"],
     deps = ["//examples/tsjs/ts_child"],
 )
diff --git a/examples/tsjs/js_parent/js_parent.d.mts b/examples/tsjs/js_parent/js_parent.d.mts
@@ -1 +1,3 @@
-export function renderJsParent(): string;
+import { VNode } from 'preact';
+
+export function JsParent(): VNode;
diff --git a/examples/tsjs/js_parent/js_parent.mjs b/examples/tsjs/js_parent/js_parent.mjs
@@ -1,10 +1,9 @@
-import { renderTsChild } from '../ts_child/ts_child.mjs';
+import { h } from 'preact';
+import { TsChild } from '../ts_child/ts_child.js';
 
-export function renderJsParent() {
-    return `
-<div class="js-parent">
-    <span>JS parent</span>
-    ${renderTsChild()}
-</div>
-    `.trim();
+export function JsParent() {
+    return h('div', { className: 'js-parent' }, [
+        h('span', {}, [ 'JS parent' ]),
+        TsChild(),
+    ]);
 }
diff --git a/examples/tsjs/package.json b/examples/tsjs/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/examples/tsjs/site.mts b/examples/tsjs/site.mts
diff --git a/examples/tsjs/site.tsx b/examples/tsjs/site.tsx
@@ -0,0 +1,93 @@
+import { PrerenderResource, includeScript, renderToHtml } from '@rules_prerender/preact';
+import { JsParent } from './js_parent/js_parent.mjs';
+import { TsParent } from './ts_parent/ts_parent.js';
+
+export default function*(): Generator<PrerenderResource, void, void> {
+    // Index page to list the various test cases.
+    yield PrerenderResource.of('/index.html', renderToHtml(
+        <html>
+            <head>
+                <title>TS/JS</title>
+                <meta charSet='utf8' />
+            </head>
+            <body>
+                <ul>
+                    <li><a href='/js-depends-on-ts.html'>JS depends on TS</a></li>
+                    <li><a href='/ts-depends-on-js.html'>TS depends on JS</a></li>
+                    <li><a href='/ts-script-depends-on-js-script.html'>
+                        TS script depends on JS script
+                    </a></li>
+                    <li><a href='/js-script-depends-on-ts-script.html'>
+                        JS script depends on TS script
+                    </a></li>
+                </ul>
+            </body>
+        </html>,
+    ));
+
+    // Test case for JS depending on TS.
+    yield PrerenderResource.of('/js-depends-on-ts.html', renderToHtml(
+        <html>
+            <head>
+                <title>JS depends on TS</title>
+                <meta charSet='utf8' />
+            </head>
+            <body>
+                <JsParent />
+            </body>
+        </html>,
+    ));
+
+    // Test case for TS depending on JS.
+    yield PrerenderResource.of('/ts-depends-on-js.html', renderToHtml(
+        <html>
+            <head>
+                <title>TS depends on JS</title>
+                <meta charSet='utf8' />
+            </head>
+            <body>
+                <TsParent />
+            </body>
+        </html>,
+    ));
+
+    // Test case for client-side TS depending on JS.
+    yield PrerenderResource.of(
+        '/ts-script-depends-on-js-script.html',
+        renderToHtml(
+            <html>
+                <head>
+                    <title>TS script depends on JS script</title>
+                    <meta charSet='utf8' />
+                </head>
+                <body>
+                    <div id='replace-ts-parent-script'>
+                        Text to be replaced by client-side JS.
+                    </div>
+
+                    {includeScript('./ts_parent_script.mjs', import.meta)}
+                </body>
+            </html>,
+        ),
+    );
+
+    // Test case for client-side JS depending on TS.
+    yield PrerenderResource.of(
+        '/js-script-depends-on-ts-script.html',
+        renderToHtml(
+            <html>
+                <head>
+                    <title>JS script depends on TS script</title>
+                    <meta charSet='utf8' />
+                </head>
+                <body>
+                    <div id='replace-js-parent-script'>
+                        Text to be replaced by client-side JS.
+                    </div>
+
+                    {includeScript('./js_parent_script.mjs', import.meta)}
+                </body>
+            </html>,
+        ),
+    );
+}
diff --git a/examples/tsjs/ts_child/BUILD.bazel b/examples/tsjs/ts_child/BUILD.bazel
@@ -2,8 +2,9 @@ load("//:index.bzl", "prerender_component")
 
 prerender_component(
     name = "ts_child",
-    srcs = ["ts_child.mts"],
+    srcs = ["ts_child.tsx"],
     tsconfig = "//:tsconfig",
     source_map = True,
     visibility = ["//examples/tsjs:__subpackages__"],
+    lib_deps = ["//:node_modules/preact"],
 )
diff --git a/examples/tsjs/ts_child/ts_child.mts b/examples/tsjs/ts_child/ts_child.mts
diff --git a/examples/tsjs/ts_child/ts_child.tsx b/examples/tsjs/ts_child/ts_child.tsx
@@ -0,0 +1,7 @@
+import { VNode } from 'preact';
+
+export function TsChild(): VNode {
+    return <div class="ts-child">
+        <span>TS child</span>
+    </div>;
+}
diff --git a/examples/tsjs/ts_parent/BUILD.bazel b/examples/tsjs/ts_parent/BUILD.bazel
@@ -2,9 +2,10 @@ load("//:index.bzl", "prerender_component")
 
 prerender_component(
     name = "ts_parent",
-    srcs = ["ts_parent.mts"],
+    srcs = ["ts_parent.tsx"],
     tsconfig = "//:tsconfig",
     source_map = True,
     visibility = ["//examples/tsjs:__subpackages__"],
+    lib_deps = ["//:node_modules/preact"],
     deps = ["//examples/tsjs/js_child"],
 )
diff --git a/examples/tsjs/ts_parent/ts_parent.mts b/examples/tsjs/ts_parent/ts_parent.mts
diff --git a/examples/tsjs/ts_parent/ts_parent.tsx b/examples/tsjs/ts_parent/ts_parent.tsx
@@ -0,0 +1,9 @@
+import { VNode } from 'preact';
+import { JsChild } from '../js_child/js_child.mjs';
+
+export function TsParent(): VNode {
+    return <div class="ts-parent">
+        <span>TS parent</span>
+        <JsChild />
+    </div>;
+}