gem-hunter

Rollup Framework7 Component Loader

What is Framework7 Component Loader?

<!-- 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>

Usage with Rollup

npm i rollup-plugin-framework7 --save-dev

npm i @rollup/plugin-babel @babel/preset-react @babel/preset-env --save-dev

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,
          },
        ],
      ],
    }),
  ],
});

Usage with Vite

npm i rollup-plugin-framework7 --save-dev

import framework7 from 'rollup-plugin-framework7';

export default {
  plugins: [framework7({ emitCss: false })],
};

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>;
};