aboutsummaryrefslogtreecommitdiff
path: root/packages/merchant-backend-ui/rollup.config.js
blob: 18d72e56bea2c697ada73bd4778ff1d6657b4ebb (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/*
 This file is part of GNU Taler
 (C) 2021 Taler Systems S.A.

 GNU Taler is free software; you can redistribute it and/or modify it under the
 terms of the GNU General Public License as published by the Free Software
 Foundation; either version 3, or (at your option) any later version.

 GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 A PARTICULAR PURPOSE.  See the GNU General Public License for more details.

 You should have received a copy of the GNU General Public License along with
 GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */

// rollup.config.js
import linaria from '@linaria/rollup';
import nodeResolve from "@rollup/plugin-node-resolve";
import alias from "@rollup/plugin-alias";
import image from '@rollup/plugin-image';
import json from "@rollup/plugin-json";
import ts from "@rollup/plugin-typescript";
import replace from "@rollup/plugin-replace";
import css from 'rollup-plugin-css-only';
import html from '@rollup/plugin-html';
import commonjs from "@rollup/plugin-commonjs";

const template = async ({
  files,
}) => {
  const scripts = (files.js || []).map(({ code }) => `<script>${code}</script>`).join('\n');
  const css = (files.css || []).map(({ source }) => `<style>${source}</style>`).join('\n');
  const ssr = (files.js || []).map(({ code }) => code).join('\n');
  const page = new Function(`${ssr}; return page.buildTimeRendering();`)()
  return `
<!doctype html>
<html>
  <head>
    ${page.head}
    ${css}
  </head>
  <script id="built_time_data">
  </script>
  <body>
    ${page.body}
    ${scripts}
    <script>page.mount()</script>
  </body>
</html>`;
};

const makePlugins = (name) => [
  alias({
    entries: [
      { find: 'react', replacement: 'preact/compat' },
      { find: 'react-dom', replacement: 'preact/compat' }
    ]
  }),

  replace({
    "process.env.NODE_ENV": JSON.stringify("production"),
    preventAssignment: true,
  }),

  commonjs({
    include: [/node_modules/, /dist/],
    extensions: [".js"],
    ignoreGlobal: true,
    sourceMap: true,
  }),

  nodeResolve({
    browser: true,
    preferBuiltins: true,
  }),

  json(),
  image(),

  linaria({
    sourceMap: process.env.NODE_ENV !== 'production',
  }),
  css(),
  ts({
    sourceMap: false,
    outputToFilesystem: false,
  }),
  html({ template, fileName: name }),
];

function formatHtmlName(name) {
  return name
    .replace(/^[A-Z]/, letter => `${letter.toLowerCase()}`) //first letter lowercase
    .replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`) //snake case
    .concat(".en.html"); //extension
}

const pageDefinition = (name) => ({
  input: `src/pages/${name}.tsx`,
  output: {
    file: `dist/pages/${name}.js`,
    format: "iife",
    exports: 'named',
    name: 'page',
  },
  plugins: makePlugins(formatHtmlName(name)),
});

export default [
  pageDefinition("OfferTip"),
  pageDefinition("OfferRefund"),
  pageDefinition("DepletedTip"),
  pageDefinition("RequestPayment"),
  pageDefinition("ShowOrderDetails"),
]