import svelte from "rollup-plugin-svelte"; import esbuild from "rollup-plugin-esbuild"; import html from "@rollup/plugin-html"; import resolve from "@rollup/plugin-node-resolve"; import image from "@rollup/plugin-image"; import sizes from "rollup-plugin-sizes"; import { visualizer } from "rollup-plugin-visualizer"; import postcss from "rollup-plugin-postcss"; import livereload from "rollup-plugin-livereload"; import sveltePreprocess from "svelte-preprocess"; const VIEWS = ["home", "login", "popup", "user"]; const dev = process.env.NODE_ENV !== "production"; const htmlTemplate = ({ attributes, meta, files, publicPath, title }) => { const makeHtmlAttributes = (attributes) => { if (!attributes) { return ""; } const keys = Object.keys(attributes); // eslint-disable-next-line no-param-reassign return keys.reduce( (result, key) => (result += ` ${key}="${attributes[key]}"`), "" ); }; const scripts = (files.js || []) .map(({ fileName }) => { const attrs = makeHtmlAttributes(attributes.script); return ``; }) .join("\n"); const links = (files.css || []) .map(({ fileName }) => { const attrs = makeHtmlAttributes(attributes.link); return ``; }) .join("\n"); const metas = meta .map((input) => { const attrs = makeHtmlAttributes(input); return ``; }) .join("\n"); return ` ${metas} ${title} ${links} ${scripts} `; }; export default VIEWS.map((view) => ({ input: `src/pages/${view}/main.ts`, output: [ dev ? { file: `build/${view}/bundle.js`, format: "iife", sourcemap: true, name: view, } : { file: `build/${view}/bundle.min.js`, format: "iife", name: view, plugins: [ esbuild({ minify: true, }), ], }, ], plugins: [ svelte({ emitCss: true, preprocess: sveltePreprocess({}), }), esbuild({ sourceMap: dev }), html({ title: view, attributes: { html: { lang: "en" }, }, meta: [ { name: "viewport", content: "width=device-width", }, ], template: htmlTemplate, }), resolve({ browser: true, dedupe: ["svelte"], exportConditions: ["svelte"], }), image(), sizes(), visualizer({ filename: `build/stats/${view}.html`, title: `Rullup bundle for ${view}`, }), postcss({ extract: `bundle.css`, //TODO: Check if it should be enabled // inject: true, }), // dev && livereload(), ], }));