JNG-4576 better dependencies support (#19)

* JNG-4576: initial commit

* JNG-4576: update lock file

* JNG-4576: improve dependency support

judo-ui-react/src/main/resources/actor/inventory.json

@@ -0,0 +1,105 @@
+{
+  "@emotion/react": {
+    "dist/emotion-react.umd.min.js": {"tags": ["importMap", "npm"], "exports": "@emotion/react"}
+  },
+  "@emotion/styled": {
+    "dist/emotion-styled.umd.min.js": {"tags": ["importMap", "npm"], "exports": "@emotion/styled"}
+  },
+  "@fontsource/roboto": {
+    "300.css": {"tags": ["css", "npm"]},
+    "400.css": {"tags": ["css", "npm"]},
+    "500.css": {"tags": ["css", "npm"]},
+    "700.css": {"tags": ["css", "npm"]},
+    "files/roboto-all-300-normal.woff": {"tags": ["font", "npm"]},
+    "files/roboto-all-400-normal.woff": {"tags": ["font", "npm"]},
+    "files/roboto-all-500-normal.woff": {"tags": ["font", "npm"]},
+    "files/roboto-all-700-normal.woff": {"tags": ["font", "npm"]},
+    "files/roboto-latin-300-normal.woff2": {"tags": ["font", "npm"]},
+    "files/roboto-latin-400-normal.woff2": {"tags": ["font", "npm"]},
+    "files/roboto-latin-500-normal.woff2": {"tags": ["font", "npm"]},
+    "files/roboto-latin-700-normal.woff2": {"tags": ["font", "npm"]}
+  },
+  "@judo/data-api-common": {
+    "umd/judo-data-api-common.min.js": {"tags": ["importMap", "external"], "exports": "@judo/data-api-common"}
+  },
+  "@mdi/font": {
+    "css/materialdesignicons.min.css": {"tags": ["css", "npm"]},
+    "fonts/materialdesignicons-webfont.eot": {"tags": ["font", "npm"]},
+    "fonts/materialdesignicons-webfont.ttf": {"tags": ["font", "npm"]},
+    "fonts/materialdesignicons-webfont.woff": {"tags": ["font", "npm"]},
+    "fonts/materialdesignicons-webfont.woff2": {"tags": ["font", "npm"]}
+  },
+  "@mui/material": {
+    "umd/mui-material.min.js": {"tags": ["importMap", "external"], "exports": "@mui/material"}
+  },
+  "@mui/material/locale": {
+    "umd/mui-material-locale.min.js": {"tags": ["importMap", "external"], "exports": "@mui/material/locale"}
+  },
+  "@mui/system": {
+    "umd/mui-system.min.js": {"tags": ["importMap", "external"], "exports": "@mui/system"}
+  },
+  "@mui/x-data-grid": {
+    "umd/mui-x-data-grid.min.js": {"tags": ["importMap", "external"], "exports": "@mui/x-data-grid"}
+  },
+  "@mui/x-date-pickers": {
+    "umd/mui-x-date-pickers.min.js": {"tags": ["importMap", "external"], "exports": "@mui/x-date-pickers"},
+    "umd/mui-x-date-pickers-adapter-day-js.min.js": {"tags": ["importMap", "external"], "exports": "@mui/x-date-pickers/AdapterDayjs"}
+  },
+  "@pandino/loader-configuration-dom": {
+    "dist/system/loader-configuration-dom.min.js": {"tags": ["importMap", "npm"], "exports": "@pandino/loader-configuration-dom"}
+  },
+  "@pandino/pandino": {
+    "dist/system/pandino.min.js": {"tags": ["importMap", "npm"], "exports": "@pandino/pandino"}
+  },
+  "@pandino/pandino-api": {
+    "dist/system/pandino-api.min.js": {"tags": ["importMap", "npm"], "exports": "@pandino/pandino-api"}
+  },
+  "@pandino/react-hooks": {
+    "dist/system/react-hooks.min.js": {"tags": ["importMap", "npm"], "exports": "@pandino/react-hooks"}
+  },
+  "@remix-run/router": {
+    "dist/router.umd.min.js": {"tags": ["importMap", "npm"], "exports": "@remix-run/router"}
+  },
+  "axios": {
+    "dist/axios.min.js": {"tags": ["importMap", "npm"], "exports": "axios"}
+  },
+  "dayjs": {
+    "dayjs.min.js": {"tags": ["importMap", "npm"], "exports": "dayjs"},
+    "locale/en.js": {"tags": ["importMap", "npm"], "exports": "dayjs/locale/en"},
+    "locale/hu.js": {"tags": ["importMap", "npm"], "exports": "dayjs/locale/hu"}
+  },
+  "i18next": {
+    "dist/umd/i18next.min.js": {"tags": ["importMap", "npm"], "exports": "i18next"}
+  },
+  "oidc-client-ts": {
+    "umd/oidc-client-ts.min.js": {"tags": ["importMap", "external"], "exports": "oidc-client-ts"}
+  },
+  "react": {
+    "umd/react.production.min.js": {"tags": ["importMap", "npm"], "exports": "react"}
+  },
+  "react-dom": {
+    "umd/react-dom.production.min.js": {"tags": ["importMap", "npm"], "exports": "react-dom"}
+  },
+  "react-dom/client": {
+    "umd/react-dom-client.min.js": {"tags": ["importMap", "external"], "exports": "react-dom/client"}
+  },
+  "react-i18next": {
+    "dist/umd/react-i18next.min.js": {"tags": ["importMap", "npm"], "exports": "react-i18next"}
+  },
+  "react-is": {
+    "umd/react-is.min.js": {"tags": ["importMap", "external"], "exports": "react-is"}
+  },
+  "react-router": {
+    "dist/umd/react-router.production.min.js": {"tags": ["importMap", "npm"], "exports": "react-router"}
+  },
+  "react-router-dom": {
+    "dist/umd/react-router-dom.production.min.js": {"tags": ["importMap", "npm"], "exports": "react-router-dom"}
+  },
+  "react/jsx-runtime": {
+    "umd/react-jsx-runtime.min.js": {"tags": ["importMap", "external"], "exports": "react/jsx-runtime"}
+  },
+  "systemjs": {
+    "dist/system.min.js": {"tags": ["script", "npm"]},
+    "dist/extras/amd.min.js": {"tags": ["script", "npm"]}
+  }
+}

judo-ui-react/src/main/resources/actor/package.json.dev-dependencies.fragment.hbs

@@ -1,6 +1,7 @@
 "@judo/data-api-common": "0.4.2",
 "@pandino/pandino-api": "0.8.26",
 "@rollup/plugin-commonjs": "24.0.0",
+"@rollup/plugin-html": "1.0.2",
 "@rollup/plugin-node-resolve": "15.0.1",
 "@rollup/plugin-replace": "5.0.2",
 "@types/node": "16.18.4",

judo-ui-react/src/main/resources/actor/rollup.config.mjs.hbs

@@ -1,9 +1,11 @@
 import * as dotenv from 'dotenv';
 import replace from '@rollup/plugin-replace';
+import html from '@rollup/plugin-html';
 import clear from 'rollup-plugin-clear';
 import copy from 'rollup-plugin-copy';
 import esbuild from 'rollup-plugin-esbuild';
-import { npmExternalsToCopy } from './rollup/utils.js';
+import { copyTasks, loadInventory } from './rollup/utils.mjs';
+import { template } from './rollup/html-template.mjs';
 
 dotenv.config();
 
@@ -12,71 +14,48 @@ const API_DEFAULT_BASE_URL = process.env.API_DEFAULT_BASE_URL;
 const FILE_DEFAULT_BASE_URL = process.env.FILE_DEFAULT_BASE_URL;
 const API_RELATIVE_PATH = process.env.API_RELATIVE_PATH;
 
-export default [
-    {
-        input: 'src/main.tsx',
-        output: {
-            dir: 'dist',
-            format: 'system',
-            sourcemap: ENV === 'production',
-        },
-        plugins: [
-            clear({
-                targets: ['dist'],
-            }),
-            replace({
+const isProduction = ENV === 'production';
+
+const inventory = loadInventory();
+
+export default {
+    input: 'src/main.tsx',
+    output: {
+        dir: 'dist',
+        entryFileNames: `[name]-[hash]${isProduction ? '.min' : ''}.js`,
+        chunkFileNames: `[name]-[hash]${isProduction ? '.min' : ''}.js`,
+        format: 'system',
+        sourcemap: isProduction,
+    },
+    plugins: [
+        clear({
+            targets: ['dist'],
+        }),
+        replace({
+            preventAssignment: false,
+            values: {
                 'process.env.API_DEFAULT_BASE_URL': JSON.stringify(API_DEFAULT_BASE_URL || '{{ emptyStringFallback apiDefaultBaseURL }}'),
                 'process.env.FILE_DEFAULT_BASE_URL': JSON.stringify(FILE_DEFAULT_BASE_URL || '{{ emptyStringFallback fileDefaultBaseURL }}'),
                 'process.env.API_RELATIVE_PATH': JSON.stringify(API_RELATIVE_PATH || '{{ emptyStringFallback apiRelativePath }}'),
-            }),
-            esbuild({
-                minify: ENV === 'production',
-            }),
-            copy({
-                targets: [
-                    { src: 'public/*', dest: 'dist' },
-                    { src: 'externals', dest: 'dist' },
-                    ...npmExternalsToCopy([
-                        ['systemjs', '/dist'],
-                        ['axios', '/dist'],
-                        ['@mdi/font', '/fonts'],
-                        ['@mdi/font', '/css'],
-                        ['@fontsource/roboto', ''],
-                        ['dayjs', '/dayjs.min.js', true],
-                        ['dayjs', '/locale'],
-                        ['react', '/umd'],
-                        ['react-dom', '/umd'],
-                        ['i18next', '/dist/umd'],
-                        ['@pandino/loader-configuration-dom', '/dist/system'],
-                        ['@pandino/pandino', '/dist/system'],
-                        ['@pandino/pandino-api', '/dist/system'],
-                        ['@pandino/react-hooks', '/dist/system'],
-                        ['react-i18next', '/dist/umd'],
-                        ['@remix-run/router', '/dist'],
-                        ['react-router', '/dist/umd'],
-                        ['react-router-dom', '/dist/umd'],
-                        ['@emotion/react', '/dist'],
-                        ['@emotion/styled', '/dist'],
-                    ]),
-                ],
-            }),
-        ],
-        external: [
-            'react/jsx-runtime',
-            'react-dom/client',
-            'react-router-dom',
-            'react',
-            'axios',
-            'dayjs',
-            '@mui/material',
-            '@mui/x-date-pickers',
-            '@mui/x-date-pickers/AdapterDayjs',
-            '@mui/x-data-grid',
-            'oidc-client-ts',
-            'react-oidc-context',
-            'react-i18next',
-            'i18next',
-            '@judo/data-api-common',
-        ],
-    },
-];
+            },
+        }),
+        esbuild({
+            minify: isProduction,
+        }),
+        html({
+            template: (props) => template({ ...props, inventory }),
+            title: 'Application',
+            meta: [
+                { 'charset': 'utf-8' },
+                { 'http-equiv': 'X-UA-Compatible', 'content': 'IE=edge' },
+                { 'name': 'viewport', 'content': 'width=device-width, initial-scale=1' },
+            ]
+        }),
+        copy({
+            targets: [
+                { src: 'public/*', dest: 'dist' },
+                ...copyTasks(inventory),
+            ],
+        }),
+    ],
+};

judo-ui-react/src/main/resources/actor/rollup/html-template.mjs

@@ -0,0 +1,67 @@
+import { EOL } from 'node:os';
+import { createImportMap, getCSSLinks, getScriptLinks } from './utils.mjs';
+
+export const makeHtmlAttributes = (attributes) => {
+  if (!attributes) {
+    return '';
+  }
+
+  const keys = Object.keys(attributes);
+  return keys.reduce((result, key) => (result += ` ${key}="${attributes[key]}"`), '');
+};
+
+export const template = async ({ attributes, files, meta, publicPath, title, inventory }) => {
+  const generateCssLink = (fileName) => {
+    const attrs = makeHtmlAttributes(attributes.link);
+    return `<link href="${publicPath}${fileName}" rel="stylesheet"${attrs}>`;
+  };
+
+  const generateJSScript = (fileName) => {
+      const attrs = makeHtmlAttributes(attributes.script);
+      return `<script src="${publicPath}${fileName}"${attrs}></script>`;
+  };
+
+  const mainScript = files.js.find(f => f.name === 'main' && f.type === 'chunk');
+  const scripts = [mainScript]
+    .map(({fileName}) => {
+      const attrs = makeHtmlAttributes(attributes.script);
+      return `<script type="systemjs-module" src="${publicPath}${fileName}"${attrs}></script>`;
+    })
+    .join(EOL);
+
+  const cssFiles = getCSSLinks(inventory)
+    .map(generateCssLink)
+    .join(EOL);
+
+  const headScripts = getScriptLinks(inventory)
+    .map(generateJSScript)
+    .join(EOL);
+
+  const metas = meta
+    .map((input) => {
+      const attrs = makeHtmlAttributes(input);
+      return `<meta${attrs}>`;
+    })
+    .join(EOL);
+
+  return `
+<!doctype html>
+<html${makeHtmlAttributes(attributes.html)}>
+  <head>
+    ${metas}
+    <link rel="icon" href="favicon.ico" />
+    <link rel="apple-touch-icon" href="logo192.png" />
+    <title>${title}</title>
+    ${cssFiles}
+    ${headScripts}
+    <script type="systemjs-importmap">
+${JSON.stringify({ imports: createImportMap(inventory) }, null, 4)}
+    </script>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    ${scripts}
+  </body>
+</html>`;
+};