OpenAuth_server/Frontend/rollup.config.mjs

115 lines
3.0 KiB
JavaScript
Raw Normal View History

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";
import commonjs from "@rollup/plugin-commonjs";
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 `<script src="${publicPath}${fileName}"${attrs}></script>`;
})
.join("\n");
const links = (files.css || [])
.map(({ fileName }) => {
const attrs = makeHtmlAttributes(attributes.link);
return `<link href="${publicPath}${fileName}" rel="stylesheet"${attrs}>`;
})
.join("\n");
const metas = meta
.map((input) => {
const attrs = makeHtmlAttributes(input);
return `<meta${attrs}>`;
})
.join("\n");
return `
<!doctype html>
<html${makeHtmlAttributes(attributes.html)}>
<head>
${metas}
<title>${title}</title>
<link rel="stylesheet" href="bundle.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"/>
${links}
</head>
<body>
${scripts}
</body>
</html>`;
};
export default VIEWS.map((view) => ({
input: `src/pages/${view}/main.ts`,
output: [
{
file: `build/${view}/bundle.min.js`,
format: "es",
sourcemap: true,
name: view,
},
],
plugins: [
svelte({
emitCss: true,
preprocess: sveltePreprocess({}),
}),
commonjs(),
esbuild({ sourceMap: dev, minify: true }),
html({
title: view,
attributes: {
html: { lang: "en" },
},
meta: [
{
name: "viewport",
content: "width=device-width",
},
],
template: htmlTemplate,
}),
resolve({
browser: true,
exportConditions: ["svelte"],
extensions: [".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(),
],
}));