Vite
A component written in JSX, TypeScript, a Vue or Svelte file needs a build. Vite makes it - and PAD links the result by the name of the source, so a template never names a hashed file (the islands application builds its components this way):
<div data-island="Cart" data-props="{^cart}"></div>
{vite 'src/main.js'}
In production that is the entry's stylesheet, its chunks as modulepreload and its <script type="module">, from the manifest the build wrote. While the dev server runs it is the dev server - with hot module replacement, a save in the editor shows at once.
The build
Vite writes into the application's www/ directory - build/ unless $padViteBuild says otherwise - with its manifest on, and its base the address of that directory:
// vite.config.js
import fs from 'node:fs';
import path from 'node:path';
export default {
base: '/myapp/build/',
build: {
outDir: '../../www/myapp/build',
manifest: true,
rollupOptions: { input: [ 'src/main.js' ] }
},
plugins: [ padHot() ]
}
// the dev server's address in build/hot while it runs - {vite} asks it then
function padHot () {
const file = '../../www/myapp/build/hot';
return {
name: 'pad-hot',
configureServer ( server ) {
server.httpServer.once('listening', () => {
const { port } = server.httpServer.address();
fs.mkdirSync(path.dirname(file), { recursive: true });
fs.writeFileSync(file, `http://localhost:${port}`);
});
process.once('exit', () => fs.rmSync(file, { force: true }));
for (const signal of ['SIGINT', 'SIGTERM', 'SIGHUP'])
process.once(signal, () => process.exit());
}
};
}
-
$padViteDev = 'http://localhost:5173'names the dev server outright, without the file. -
{vite 'src/main.jsx', react}writes the preamble the React plugin needs for fast refresh, when the dev server is asked. - A file goes out once a page however many entries name it; a script carries the request's nonce when
$padCspasks for one. - An entry the manifest does not have, and a build without a manifest while no dev server runs, are errors.