Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: Determine prerender script through script attr, rather than lexer #97

Merged
merged 3 commits into from
Jan 2, 2024
Merged

refactor: Determine prerender script through script attr, rather than lexer #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f5fbfff
refactor: Determine prerender script through script attr, rather than…
rschristian Jan 2, 2024
cf499b3
chore: Update lock file
rschristian Jan 2, 2024
25f37de
chore: Missed import
rschristian Jan 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ preact({
| `renderTarget` | `string` | `"body"` | Query selector for where to insert prerender result in your HTML template |
| `additionalPrerenderRoutes` | `string` | `undefined` | Prerendering will automatically discover links to prerender, but if there are unliked pages that you want to prererender (such as a `/404` page), use this option to specify them |

To prerender your app, you'll need to set `prerender.enabled` to `true` and export a `prerender()` function one of the scripts listed in your HTML entry point (or the script specified through `prerender.prerenderScript`). How precisely you generate an HTML string from your app is up to you, but you'll likely want to use [`preact-render-to-string`](https://github.com/preactjs/preact-render-to-string) or a wrapper around it such as [`preact-iso`'s `prerender`](https://github.com/preactjs/preact-iso). Whatever you choose, you simply need to return an object from your `prerender()` function containing an `html` property with your HTML string.
To prerender your app, you'll need to set `prerender.enabled` to `true` in the plugin options (`vite.config.js`), export a `prerender()` function one of the scripts listed in your HTML entry point (or the script specified through `prerender.prerenderScript`), and add a `prerender` attribute to that script tag in your HTML entry point (`<script prerender src="...">`). How precisely you generate an HTML string from your app is up to you, but you'll likely want to use [`preact-render-to-string`](https://github.com/preactjs/preact-render-to-string) or a wrapper around it such as [`preact-iso`'s `prerender`](https://github.com/preactjs/preact-iso). Whatever you choose, you simply need to return an object from your `prerender()` function containing an `html` property with your HTML string.

[For an example implementation, see our demo](./demo/src/index.tsx)

Expand Down
2 changes: 1 addition & 1 deletion demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,6 @@
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/index.tsx"></script>
<script prerender type="module" src="/src/index.tsx"></script>
</body>
</html>
228 changes: 1 addition & 227 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,7 @@
"kolorist": "^1.8.0",
"magic-string": "0.30.5",
"node-html-parser": "^6.1.10",
"resolve": "^1.22.8",
"rs-module-lexer": "^2.1.1"
"resolve": "^1.22.8"
},
"peerDependencies": {
"@babel/core": "7.x",
Expand Down
38 changes: 11 additions & 27 deletions src/prerender.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { promises as fs } from "node:fs";

import MagicString from "magic-string";
import { parse as htmlParse } from "node-html-parser";
import rsModuleLexer from "rs-module-lexer";

import type { Plugin, ResolvedConfig } from "vite";

Expand Down Expand Up @@ -95,36 +94,21 @@ export function PrerenderPlugin({
if (!entryHtml) throw new Error("Unable to detect entry HTML");

const htmlDoc = htmlParse(await fs.readFile(entryHtml, "utf-8"));
const scripts = htmlDoc

const entryScriptTag = htmlDoc
.getElementsByTagName("script")
.map(s => s.getAttribute("src"))
.filter((src): src is string => !!src && !/^https:/.test(src));

if (scripts.length === 0)
throw new Error("No local scripts found in entry HTML");

const { output } = await rsModuleLexer.parseAsync({
input: await Promise.all(
scripts.map(async script => ({
filename: script,
code: await fs.readFile(path.join(viteConfig.root, script), "utf-8"),
})),
),
});

let entryScript;
for (const module of output) {
const entry = module.exports.find(exp => exp.n === "prerender");
if (entry) {
entryScript = module.filename;
break;
}
}
.find(s => s.hasAttribute("prerender"));

if (!entryScript)
if (!entryScriptTag)
throw new Error("Unable to detect prerender entry script");

return path.join(viteConfig.root, entryScript);
const entrySrc = entryScriptTag.getAttribute("src");
if (!entrySrc || /^https:/.test(entrySrc))
throw new Error(
"Prerender entry script must have a `src` attribute and be local",
);

return path.join(viteConfig.root, entrySrc);
};

return {
Expand Down