Adds shared chunks example.

dgp1130 · dgp1130 · commit 85d3cf7f64b3 · 2023-02-27T00:04:56.000-08:00
Refs #26. This verifies that common code shared between multiple entry points is actually split into a common module and imported by all the referenced entry points at runtime. This is good for caching, since a user who starts on one page and navigates to another will already have any common code downloaded and get cache hits for it.
diff --git a/examples/shared_chunks/BUILD.bazel b/examples/shared_chunks/BUILD.bazel
@@ -0,0 +1,53 @@
+load("//:index.bzl", "prerender_pages", "web_resources_devserver")
+load("//tools/jasmine:defs.bzl", "jasmine_node_test")
+load("//tools/typescript:defs.bzl", "ts_project")
+
+prerender_pages(
+    name = "site",
+    src = "site.ts",
+    scripts = [":hello", ":goodbye"],
+    tsconfig = "//:tsconfig",
+    source_map = True,
+    lib_deps = ["//:node_modules/rules_prerender"],
+)
+
+ts_project(
+    name = "hello",
+    srcs = ["hello.ts"],
+    tsconfig = "//:tsconfig_client",
+    deps = [":shared"],
+)
+
+ts_project(
+    name = "goodbye",
+    srcs = ["goodbye.ts"],
+    tsconfig = "//:tsconfig_client",
+    deps = [":shared"],
+)
+
+ts_project(
+    name = "shared",
+    srcs = ["shared.ts"],
+    tsconfig = "//:tsconfig_client",
+)
+
+web_resources_devserver(
+    name = "devserver",
+    resources = ":site",
+)
+
+ts_project(
+    name = "test_lib",
+    srcs = ["test.ts"],
+    testonly = True,
+    data = [":site"],
+    deps = [
+        "//:node_modules/@types/jasmine",
+        "//:node_modules/@types/node",
+    ],
+)
+
+jasmine_node_test(
+    name = "test",
+    deps = [":test_lib"],
+)
diff --git a/examples/shared_chunks/README.md b/examples/shared_chunks/README.md
@@ -0,0 +1,4 @@
+# Shared Chunks
+
+An example which bundles multiple entry points using a common dependency and
+verifies that the dependency is not duplicated.
diff --git a/examples/shared_chunks/goodbye.ts b/examples/shared_chunks/goodbye.ts
@@ -0,0 +1,3 @@
+import { name } from './shared';
+
+console.log(`Goodbye, ${name}!`);
diff --git a/examples/shared_chunks/hello.ts b/examples/shared_chunks/hello.ts
@@ -0,0 +1,3 @@
+import { name } from './shared';
+
+console.log(`Hello, ${name}!`);
diff --git a/examples/shared_chunks/shared.ts b/examples/shared_chunks/shared.ts
@@ -0,0 +1 @@
+export const name = 'World';
diff --git a/examples/shared_chunks/site.ts b/examples/shared_chunks/site.ts
@@ -0,0 +1,47 @@
+import { includeScript, PrerenderResource } from 'rules_prerender';
+
+export default function*(): Generator<PrerenderResource, void, void> {
+    yield PrerenderResource.of('/index.html', `
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Shared Chunks</title>
+        <meta charset="utf8">
+    </head>
+    <body>
+        <ul>
+            <li><a href="/hello.html">Hello</a></li>
+            <li><a href="/goodbye.html">Goodbye</a></li>
+        </ul>
+    </body>
+</html>
+    `.trim());
+
+    yield PrerenderResource.of('/hello.html', `
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Shared Chunks</title>
+        <meta charset="utf8">
+    </head>
+    <body>
+        <h2>Check console</h2>
+        ${includeScript('examples/shared_chunks/hello')}
+    </body>
+</html>
+    `.trim());
+
+    yield PrerenderResource.of('/goodbye.html', `
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Shared Chunks</title>
+        <meta charset="utf8">
+    </head>
+    <body>
+        <h2>Check console</h2>
+        ${includeScript('examples/shared_chunks/goodbye')}
+    </body>
+</html>
+    `.trim());
+}
diff --git a/examples/shared_chunks/test.ts b/examples/shared_chunks/test.ts
@@ -0,0 +1,29 @@
+import { promises as fs } from 'fs';
+
+const site = 'examples/shared_chunks/site';
+
+describe('Shared Chunks', () => {
+    it('generates `/hello.js` without inlining `shared.js`', async () => {
+        const hello = await fs.readFile(`${site}/hello.js`, 'utf8');
+        expect(hello).not.toContain('World');
+    });
+
+    it('generates `/goodbye.js` without inlining `shared.js`', async () => {
+        const goodbye = await fs.readFile(`${site}/goodbye.js`, 'utf8');
+        expect(goodbye).not.toContain('World');
+    });
+
+    it('generates a shared chunk containing `shared.js`', async () => {
+        // Should generate exactly three JavaScript files: `hello.js`,
+        // `goodbye.js`, and one other shared chunk with a generated name.
+        const entries = await fs.readdir(site);
+        const sharedChunks = entries
+            .filter((entry) => entry.endsWith('.js'))
+            .filter((entry) => entry !== 'hello.js' && entry !== 'goodbye.js');
+        expect(sharedChunks.length).toBe(1);
+        const [ shared ] = sharedChunks;
+
+        const sharedJs = await fs.readFile(`${site}/${shared}`, 'utf8');
+        expect(sharedJs).toContain('World');
+    });
+});

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { name } from './shared';`
	`2`	`+`
	`3`	+console.log(`Goodbye, ${name}!`);
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+import { name } from './shared';`
	`2`	`+`
	`3`	+console.log(`Hello, ${name}!`);