fractal-vite-plugin
v1.0.3
Published
This package permit to use vite as precompiler for Fractal
Downloads
3
Readme
Fractal plugin for vite
This package permit to use vite as precompiler for Fractal
To use it with fractal
- create vite.config.js :
import { defineConfig } from "vite";
import fractal from "fractal-vite-plugin";
export default defineConfig({
plugins: [
fractal({
input: ['src/js/app.js', 'src/css/app.scss'],
refresh: true
})
]
})- all files to compile need to be in a './src' foler
- create a preview file
- For Handlebars engine add this to fractal.config.js:
/*
* Require the Handlebars engine and configure it to work with Vite Js
*/
const handlebars = require('@frctl/handlebars')({
helpers: {
uppercase: function (str) {
return str.toUpperCase();
},
vite: function (str) {
if (fs.existsSync('./public/hot')) {
if (str.match('/s?css$/') !== "")
return '<link href="http://localhost:5173/' + str + '" rel="stylesheet">';
if (str.match('/js$/') !== "")
return '<script src="http://localhost:5173/' + str + '"></script>';
}
if (fs.existsSync('./public/build/manifest.json')) {
let manifest = JSON.parse(fs.readFileSync('./public/build/manifest.json'));
if (str.match('/css$/') !== "")
return '<link href="/build/' + manifest[str].file + '" rel="stylesheet">';
if (str.match('/js$/') !== "")
return '<script src="/build/' + manifest[str].file + '"></script>';
return;
}
},
viteHotReload: function () {
return (fs.existsSync('./public/hot')) ? '<script type="module" src="http://localhost:5173/@vite/client"></script>' : '';
}
}
})- Handlebars preview file (./components/_preview.hbs)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{{ _config.project.title }}}</title>
{{{vite 'src/css/app.css' }}}
{{{vite 'src/js/app.js' }}}
{{{viteHotReload }}}
</head>
<body>
{{{ yield }}}
</body>
</html>Usage
- To use with files you can use the helper 'vite' and include files that you want
{{{vite path/to/file}}}- To add autoreload function when files changes add :
{{{viteHotReload }}}