{"id":13417481,"url":"https://github.com/preactjs/preset-vite","last_synced_at":"2025-05-14T21:05:57.137Z","repository":{"id":37813308,"uuid":"347163755","full_name":"preactjs/preset-vite","owner":"preactjs","description":"Preset for using Preact with the vite bundler","archived":false,"fork":false,"pushed_at":"2025-03-23T09:17:12.000Z","size":407,"stargazers_count":270,"open_issues_count":6,"forks_count":30,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-05-03T15:38:16.987Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://npm.im/@preact/preset-vite","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/preactjs.png","metadata":{"funding":{"github":["preactjs"],"open_collective":"preact"},"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-03-12T18:39:41.000Z","updated_at":"2025-04-22T13:14:44.000Z","dependencies_parsed_at":"2023-12-14T20:06:12.387Z","dependency_job_id":"5ddbd491-b292-4fd2-8559-e6915d62268d","html_url":"https://github.com/preactjs/preset-vite","commit_stats":{"total_commits":166,"total_committers":21,"mean_commits":7.904761904761905,"dds":0.6385542168674698,"last_synced_commit":"bbf68b8197e367c025bacf522d29d70746b0ad5b"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fpreset-vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fpreset-vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fpreset-vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/preactjs%2Fpreset-vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/preactjs","download_url":"https://codeload.github.com/preactjs/preset-vite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253727897,"owners_count":21954313,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T22:00:37.960Z","updated_at":"2025-05-14T21:05:57.072Z","avatar_url":"https://github.com/preactjs.png","language":"TypeScript","funding_links":["https://github.com/sponsors/preactjs","https://opencollective.com/preact"],"categories":["Plugins","TypeScript"],"sub_categories":["Preact"],"readme":"# @preact/preset-vite\n\nAn all in one preset for writing Preact apps with the [vite](https://github.com/vitejs/vite) bundler.\n\nFeatures:\n\n- Sets up Hot Module Replacement via [prefresh](https://github.com/JoviDeCroock/prefresh/tree/main/packages/vite)\n- Enables [Preact Devtools](https://preactjs.github.io/preact-devtools/) bridge during development\n- Aliases React to `preact/compat`\n\n## Installation\n\nFirst intall the preset package from npm:\n\n```bash\nnpm install --save-dev @preact/preset-vite\n# or\nyarn add -D @preact/preset-vite\n```\n\nEnhance your vite config with the Preact preset plugin in your `vite.config.ts` or `vite.config.js`:\n\n```js\nimport { defineConfig } from \"vite\";\nimport preact from \"@preact/preset-vite\";\n\nexport default defineConfig({\n  plugins: [preact()]\n});\n```\n\n## Options\n\nOptions can be passed to our preset plugin via the first argument:\n\n```js\nexport default defineConfig({\n  plugins: [\n    preact({ devtoolsInProd: true })\n  ]\n});\n```\n\n### Available options\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| `devtoolsInProd` | `boolean` | `false` | Inject devtools bridge in production bundle instead of only in development mode |\n| `devToolsEnabled` | `boolean` | `true` | Inject devtools bridge |\n| `prefreshEnabled` | `boolean` | `true` | Inject [Prefresh](https://github.com/preactjs/prefresh) for HMR |\n| `reactAliasesEnabled` | `boolean` | `true` | Aliases `react`, `react-dom` to `preact/compat` |\n| `babel` | `object` | | See [Babel configuration](#babel-configuration) |\n| `prerender` | `object` | | See [Prerendering configuration](#prerendering-configuration) |\n\n#### Babel configuration\n\nThe `babel` option lets you add plugins, presets, and [other configuration](https://babeljs.io/docs/en/options) to the Babel transformation performed on each JSX/TSX file.\n\n```js\npreact({\n  babel: {\n    presets: [...],\n    // Your plugins run before any built-in transform (eg: Fast Refresh)\n    plugins: [...],\n    // Use .babelrc files\n    babelrc: true,\n    // Use babel.config.js files\n    configFile: true,\n  }\n})\n```\n\n#### Prerendering configuration\n\n| Option | Type | Default | Description |\n|---|---|---|---|\n| `enabled` | `boolean` | `false` | Enables prerendering |\n| `renderTarget` | `string` | `\"body\"` | Query selector for where to insert prerender result in your HTML template |\n| `prerenderScript` | `string` | `undefined` | Absolute path to script containing exported `prerender()` function. If not provided, will try to find the prerender script in the scripts listed in your HTML entrypoint |\n| `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 |\n| `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 |\n| `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` |\n\nTo prerender your app, you'll need to do these things:\n1. Enable prerendering in the plugin options\n2. Specify your render target, if you want the HTML to be inserted anywhere other than the `document.body`. This location likely should match `render()`, i.e., `render(\u003cApp /\u003e, document.querySelector('#app'))` -\u003e `'#app'`\n4. 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\n5. Specify where your `prerender()` function is by either a) adding a `prerender` attribute to the script tag that contains it in your entry HTML (`\u003cscript prerender src=\"./my-prerender-script.js\"\u003e`) or b) use the `prerenderScript` plugin option to specify the location with an absolute path\n\nThe 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 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), but whatever you choose, the minimum you'll need to return is an object containing an `html` property with your HTML string which will then be inserted according to your `renderTarget`.\n\nYour `prerender()` 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.\n\n[For a full example implementation, see our demo](./demo/src/index.tsx)\n\n```js\nimport { prerender as ssr } from 'preact-iso';\n\nfunction App() {\n    return \u003ch1\u003eHello World!\u003c/h1\u003e\n}\n\nexport async function prerender(data) {\n    const { html, links: discoveredLinks } = ssr(\u003cApp /\u003e);\n\n    return {\n        html,\n        // Optionally add additional links that should be\n        // prerendered (if they haven't already been)\n        links: new Set([...discoveredLinks, '/foo', '/bar']),\n        // Optional data to serialize into a script tag for use on the client:\n        //   \u003cscript type=\"application/json\" id=\"preact-prerender-data\"\u003e{\"url\":\"/\"}\u003c/script\u003e\n        data: { url: data.url },\n        // Optionally configure and add elements to the `\u003chead\u003e` of\n        // the prerendered HTML document\n        head: {\n            // Sets the \"lang\" attribute: `\u003chtml lang=\"en\"\u003e`\n            lang: 'en',\n            // Sets the title for the current page: `\u003ctitle\u003eMy cool page\u003c/title\u003e`\n            title: 'My cool page',\n            // Sets any additional elements you want injected into the `\u003chead\u003e`:\n            //   \u003clink rel=\"stylesheet\" href=\"foo.css\"\u003e\n            //   \u003cmeta property=\"og:title\" content=\"Social media title\"\u003e\n            elements: new Set([\n                { type: 'link', props: { rel: 'stylesheet', href: 'foo.css' } },\n                { type: 'meta', props: { property: 'og:title', content: 'Social media title' } }\n            ])\n        }\n    };\n}\n```\n\n## License\n\nMIT, see [the license file](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpreactjs%2Fpreset-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpreactjs%2Fpreset-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpreactjs%2Fpreset-vite/lists"}