Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork32
Preset for using Preact with the vite bundler
License
preactjs/preset-vite
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
An all in one preset for writing Preact apps with thevite bundler.
Features:
- Sets up Hot Module Replacement viaprefresh
- EnablesPreact Devtools bridge during development
- Aliases React to
preact/compat
If you want to look into testing Preact with Vitest Browser modecheck out vitest-browser-preact
First intall the preset package from npm:
npm install --save-dev @preact/preset-vite# oryarn add -D @preact/preset-viteEnhance your vite config with the Preact preset plugin in yourvite.config.ts orvite.config.js:
import{defineConfig}from"vite";importpreactfrom"@preact/preset-vite";exportdefaultdefineConfig({plugins:[preact()]});
Options can be passed to our preset plugin via the first argument:
exportdefaultdefineConfig({plugins:[preact({devtoolsInProd:true})]});
| Option | Type | Default | Description |
|---|---|---|---|
devtoolsInProd | boolean | false | Inject devtools bridge in production bundle instead of only in development mode |
devToolsEnabled | boolean | true | Inject devtools bridge |
prefreshEnabled | boolean | true | InjectPrefresh for HMR |
reactAliasesEnabled | boolean | true | Aliasesreact,react-dom topreact/compat |
babel | object | SeeBabel configuration | |
prerender | object | SeePrerendering configuration |
Thebabel option lets you add plugins, presets, andother configuration to the Babel transformation performed on each JSX/TSX file.
preact({babel:{presets:[...],// Your plugins run before any built-in transform (eg: Fast Refresh)plugins:[...],// Use .babelrc filesbabelrc:true,// Use babel.config.js filesconfigFile:true,}})
| Option | Type | Default | Description |
|---|---|---|---|
enabled | boolean | false | Enables prerendering |
renderTarget | string | "body" | Query selector for where to insert prerender result in your HTML template |
prerenderScript | string | undefined | Absolute path to script containing exportedprerender() function. If not provided, will try to find the prerender script in the scripts listed in your HTML entrypoint |
additionalPrerenderRoutes | string[] | undefined | Prerendering will crawl your site automatically, but you'd like to prerender some pages that may not be found (such as a/404 page), use this option to specify them |
previewMiddlewareEnabled | boolean | false | Vite's preview server as of v5 will not use our prerendered HTML documents automatically. This option enables a middleware that will correct this, allowing you to test the result of prerendering locally |
previewMiddlewareFallback | string | /index.html | Fallback path to be used when an HTML document cannot be found via the preview middleware, e.g.,/404 or/not-found will be used when the user requests/some-path-that-does-not-exist |
To prerender your app, you'll need to do these things:
- Enable prerendering in the plugin options
- Specify your render target, if you want the HTML to be inserted anywhere other than the
document.body. This location likely should matchrender(), i.e.,render(<App />, document.querySelector('#app'))->'#app' - Create and export a
prerender()function from a script. You could add this to your app entrypoint or create a completely separate file for it, either will work. See below for a usage example - Specify where your
prerender()function is by either a) adding aprerenderattribute to the script tag that contains it in your entry HTML (<script prerender src="./my-prerender-script.js">) or b) use theprerenderScriptplugin option to specify the location with an absolute path
The plugin simply calls the prerender function you provide so it's up to you to determine how your app should be prerendered. You'll likely want to usepreact-render-to-string, or a wrapper around it such aspreact-iso'sprerender, but whatever you choose, the minimum you'll need to return is an object containing anhtml property with your HTML string which will then be inserted according to yourrenderTarget.
Yourprerender() function can be asynchronous, so feel free to make HTTP requests to retrieve data (fetch(...)), read files from disk (fs.readFile(...)), or similar things to set up your app.
For a full example implementation, see our demo
import{prerenderasssr}from'preact-iso';functionApp(){return<h1>Hello World!</h1>}exportasyncfunctionprerender(data){const{ html,links:discoveredLinks}=ssr(<App/>);return{ html,// Optionally add additional links that should be// prerendered (if they haven't already been)links:newSet([...discoveredLinks,'/foo','/bar']),// Optional data to serialize into a script tag for use on the client:// <script type="application/json">{"url":"/"}</script>data:{url:data.url},// Optionally configure and add elements to the `<head>` of// the prerendered HTML documenthead:{// Sets the "lang" attribute: `<html lang="en">`lang:'en',// Sets the title for the current page: `<title>My cool page</title>`title:'My cool page',// Sets any additional elements you want injected into the `<head>`:// <link rel="stylesheet" href="foo.css">// <meta property="og:title" content="Social media title">elements:newSet([{type:'link',props:{rel:'stylesheet',href:'foo.css'}},{type:'meta',props:{property:'og:title',content:'Social media title'}}])}};}
MIT, seethe license file.
About
Preset for using Preact with the vite bundler
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.