To workaround the issue described here (framework7io/framework7#4244)
rollup-plugin-framework7 is a plugin for Rollup and Vite that allows you to author Framework7 Router components in a format called Single-File Components:
<!-- my-page.f7.html (or my-page.f7) -->
<template>
<div class="page">${msg}</div>
</template>
<script>
export default () => {
const msg = 'Hello world';
return $render;
};
</script>Install the plugin itself:
npm i rollup-plugin-framework7 --save-dev
If we use JSX component, then we also need to install Babel plugins:
npm i @rollup/plugin-babel @babel/preset-react @babel/preset-env --save-dev
Configure rollup:
const { rollup } = require('rollup');
const { babel } = require('@rollup/plugin-babel');
const framework7 = require('../lib/index');
rollup({
input: './path/to/app.js',
plugins: [
// enable Framework7 plugin
// it will will process .f7.html and .f7.js(x) files
framework7({ emitCss: true }),
// css plugin for bundling content of component styles (`<style>`)
css({ output: 'app-bundle.css' }),
// babel plugin if you use JSX components
babel({
presets: [
'@babel/preset-react',
[
'@babel/preset-env',
{
modules: false,
},
],
],
}),
],
});Install the plugin:
npm i rollup-plugin-framework7 --save-dev
In Vite config (vite.config.js):
import framework7 from 'rollup-plugin-framework7';
export default {
esbuild: {
jsxFactory: '$jsx',
},
plugins: [framework7({ emitCss: false })],
};Framework7 v6 single file components also support JSX:
<!-- my-page.f7.html (or my-page.f7) -->
<script>
export default () => {
const msg = 'Hello world';
return () => <div class="page">{msg}</div>;
};
</script>// my-page.f7.js
export default () => {
const msg = 'Hello world';
return () => <div class="page">{msg}</div>;
};