Adds rewrite example.

Refs #40. This uses `prerender_component2` and friends. It is a temporary example for testing the rewrite and will probably be deleted once the rest of the repository is migrated to the new implementation.
dgp1130 · Jul 22, 2023 · b6b8484 · b6b8484
1 parent 0d88834
commit b6b8484
Show file tree

Hide file tree

Showing 9 changed files with 125 additions and 0 deletions.
diff --git a/examples/rewrite/BUILD.bazel b/examples/rewrite/BUILD.bazel
@@ -0,0 +1,23 @@
+load("//:index.bzl", prerender_pages = "prerender_pages2", "web_resources_devserver")
+load("//tools/typescript:defs.bzl", "ts_project")
+
+prerender_pages(
+    name = "site",
+    entry_point = "./site.prerender.js",
+    prerender = ":prerender",
+)
+
+web_resources_devserver(
+    name = "devserver",
+    resources = ":site",
+)
+
+ts_project(
+    name = "prerender",
+    srcs = ["site.prerender.tsx"],
+    deps = [
+        "//examples/rewrite/component:component_prerender",
+        "//:node_modules/@rules_prerender/preact",
+        "//:node_modules/preact",
+    ],
+)
diff --git a/examples/rewrite/component/BUILD.bazel b/examples/rewrite/component/BUILD.bazel
@@ -0,0 +1,39 @@
+load("//:index.bzl", "css_library", prerender_component = "prerender_component2", "web_resources")
+load("//tools/typescript:defs.bzl", "ts_project")
+
+prerender_component(
+    name = "component",
+    prerender = ":prerender",
+    scripts = ":scripts",
+    styles = ":styles",
+    resources = ":resources",
+    visibility = ["//examples/rewrite:__subpackages__"],
+)
+
+ts_project(
+    name = "prerender",
+    srcs = ["component.prerender.tsx"],
+    deps = [
+        "//examples/rewrite/transitive:transitive_prerender",
+        "//:node_modules/@rules_prerender/preact",
+        "//:node_modules/preact",
+        "//:prerender_components/@rules_prerender/declarative_shadow_dom_prerender",
+    ],
+)
+
+ts_project(
+    name = "scripts",
+    srcs = ["component.client.mts"],
+)
+
+css_library(
+    name = "styles",
+    srcs = ["component.css"],
+)
+
+web_resources(
+    name = "resources",
+    entries = {
+        "/logo.png": "image.png",
+    },
+)
diff --git a/examples/rewrite/component/component.client.mts b/examples/rewrite/component/component.client.mts
@@ -0,0 +1 @@
+console.log('Hello, World!');
diff --git a/examples/rewrite/component/component.css b/examples/rewrite/component/component.css
@@ -0,0 +1,3 @@
+span {
+    color: red;
+}
diff --git a/examples/rewrite/component/component.prerender.tsx b/examples/rewrite/component/component.prerender.tsx
@@ -0,0 +1,20 @@
+import { polyfillDeclarativeShadowDom } from '@rules_prerender/declarative_shadow_dom/preact.mjs';
+import { Template, includeScript, inlineStyle } from '@rules_prerender/preact';
+import { Transitive } from '../transitive/transitive.prerender.js';
+import { VNode } from 'preact';
+
+export function Component({ name }: { name: string }): VNode {
+    return <div>
+        <Template shadowroot='open'>
+            <img src="/logo.png" />
+            <span>Hello to {name} from component!</span>
+            <slot></slot>
+
+            {polyfillDeclarativeShadowDom()}
+            {includeScript('./component.client.mjs', import.meta)}
+            {inlineStyle('./component.css', import.meta)}
+        </Template>
+
+        <Transitive name={name} />
+    </div>;
+}
diff --git a/examples/rewrite/component/image.png b/examples/rewrite/component/image.png
diff --git a/examples/rewrite/site.prerender.tsx b/examples/rewrite/site.prerender.tsx
@@ -0,0 +1,18 @@
+import { PrerenderResource, renderToHtml } from '@rules_prerender/preact';
+import { Component } from './component/component.prerender.js';
+
+export default function* (): Generator<PrerenderResource, void, void> {
+    yield PrerenderResource.fromHtml('/index.html', renderToHtml(
+        <html>
+            <head>
+                <title>Rewrite</title>
+                <meta charSet='utf8' />
+            </head>
+            <body>
+                <h2>Rewrite</h2>
+
+                <Component name='World' />
+            </body>
+        </html>
+    ));
+}
diff --git a/examples/rewrite/transitive/BUILD.bazel b/examples/rewrite/transitive/BUILD.bazel
@@ -0,0 +1,14 @@
+load("//:index.bzl", prerender_component = "prerender_component2")
+load("//tools/typescript:defs.bzl", "ts_project")
+
+prerender_component(
+    name = "transitive",
+    prerender = ":prerender",
+    visibility = ["//examples/rewrite:__subpackages__"],
+)
+
+ts_project(
+    name = "prerender",
+    srcs = ["transitive.prerender.tsx"],
+    deps = ["//:node_modules/preact"],
+)
diff --git a/examples/rewrite/transitive/transitive.prerender.tsx b/examples/rewrite/transitive/transitive.prerender.tsx
@@ -0,0 +1,7 @@
+import { VNode } from 'preact';
+
+export function Transitive({ name }: { name: string }): VNode {
+    return <div>
+        <span>Hello to {name} from transitive component!</span>
+    </div>;
+}