Switch melon head from parcel to webpack (#99)

Parcel is full of weird & annoying issued so it will be better to use webpack.
ictunion · Sep 24, 2023 · d180819 · d180819
1 parent 82c9ee3
commit d180819
Show file tree

Hide file tree

Showing 16 changed files with 3,626 additions and 2,832 deletions.
diff --git a/melon-head/default.nix b/melon-head/default.nix
@@ -14,7 +14,7 @@ buildNpmPackage {
     python39
   ];
   src = nix-gitignore.gitignoreSource [] ./.;
-  npmDepsHash = "sha256-IqOwTXMR3GOQ1fv3rSZY5S3kk7WAQDAoL6O0WjrzVxM=";
+  npmDepsHash = "sha256-swrQScHzpNxMslvXEzgp5Ggj7dZxu5ZBFUb28jKFs/Y=";
 
   configurePhase = ''
     echo '${config-json}' > config.json

diff --git a/melon-head/package-lock.json b/melon-head/package-lock.json
diff --git a/melon-head/package.json b/melon-head/package.json
@@ -3,9 +3,8 @@
   "version": "0.1.0",
   "description": "Oeca web clinet",
   "scripts": {
-    "build": "rescript && parcel build src/index.html",
-    "clean": "rm -rf .parcel-cache",
-    "start": "parcel serve src/index.html",
+    "build": "rescript && webpack --mode production",
+    "start": "webpack-dev-server",
     "watch": "rescript build -w",
     "format": "rescript format -all",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -14,17 +13,24 @@
   "license": "AGPL-3.0-or-later",
   "devDependencies": {
     "@glennsl/rescript-json-combinators": "^1.2.1",
-    "@parcel/transformer-sass": "^2.9.3",
     "@rescript/react": "^0.11.0",
-    "keycloak-js": "^22.0.3",
-    "parcel": "^2.9.3",
-    "process": "^0.11.10",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.8.1",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.5.3",
     "rescript": "^10.1.4",
     "rescript-future": "^2.1.0",
-    "rescript-request": "^3.0.1"
+    "rescript-request": "^3.0.1",
+    "sass": "^1.68.0",
+    "sass-loader": "^13.3.2",
+    "style-loader": "^3.3.3",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "keycloak-js": "^22.0.3"
   }
 }
diff --git a/melon-head/src/App.res b/melon-head/src/App.res
@@ -25,7 +25,7 @@ module ConfiguredApp = {
     <SessionContext.Provider value={sessionState}>
       <div className={styles["root"]}>
         <AppNavigation isOpen={isNavOpen} session=sessionState />
-        <div className={styles["main-container"]}>
+        <div className={styles["mainContainer"]}>
           <AppHeader
             toggleNav={_ => setIsNavOpen(v => !v)}
             isNavOpen={isNavOpen}

diff --git a/melon-head/src/AppHeader.res b/melon-head/src/AppHeader.res
@@ -9,14 +9,14 @@ let make = (
 ) => {
   let openHome = _ => RescriptReactRouter.push("/")
   <header className={styles["root"]}>
-    <button className={styles["nav-btn"]} onClick={toggleNav}>
+    <button className={styles["navBtn"]} onClick={toggleNav}>
       <Icons.Hamburger isOpen={isNavOpen} />
     </button>
-    <h1 className={styles["app-title"]} onClick={openHome}>
+    <h1 className={styles["appTitle"]} onClick={openHome}>
       <img src={melonSvg} />
       {React.string("Orca's Melon Head Manager")}
     </h1>
-    <button className={styles["profile-btn"]} onClick={openProfile}>
+    <button className={styles["profileBtn"]} onClick={openProfile}>
       <Icons.Profile />
     </button>
   </header>

diff --git a/melon-head/src/AppNavigation.res b/melon-head/src/AppNavigation.res
@@ -13,7 +13,7 @@ module NavItem = {
     }
 
     if accessible {
-      <li className={styles["nav-item"]} onClick={openRoute}>
+      <li className={styles["navItem"]} onClick={openRoute}>
         <a> {React.string(text)} </a>
       </li>
     } else {
@@ -33,7 +33,7 @@ let make = (~isOpen: bool, ~session: Api.webData<Session.t>) => {
     <nav className={styles["root"]}>
       {switch session {
       | Success(session) =>
-        <ul className={styles["nav-list"]}>
+        <ul className={styles["navList"]}>
           <NavItem key="1" path="/" text="Dashboard" session />
           <NavSeprator key="2" />
           <NavItem

diff --git a/melon-head/src/Dashboard.res b/melon-head/src/Dashboard.res
@@ -18,21 +18,21 @@ module RowBasedTable = {
 
     let viewRows = rows->Array.mapWithIndex(viewRow)->React.array
 
-    <div className={styles["row-table-wrapper"]}>
+    <div className={styles["rowTableWrapper"]}>
       {switch title {
-      | Some(str) => <h2 className={styles["row-table-title"]}> {React.string(str)} </h2>
+      | Some(str) => <h2 className={styles["rowTableTitle"]}> {React.string(str)} </h2>
       | None => React.null
       }}
-      <table className={styles["row-table-table"]}>
+      <table className={styles["rowTableTable"]}>
         <tbody> viewRows </tbody>
       </table>
       {switch data {
       | Loading =>
-        <div className={styles["row-table-loading"]}>
+        <div className={styles["rowTableLoading"]}>
           <Icons.Loading variant=Icons.Dark />
         </div>
       | Failure(err) =>
-        <div className={styles["row-table-error"]}>
+        <div className={styles["rowTableRrror"]}>
           <h4> {React.string("Error loading data")} </h4>
           <pre> {React.string(Api.showError(err))} </pre>
         </div>
@@ -76,7 +76,7 @@ let make = (~session: Api.webData<Session.t>, ~api: Api.t) => {
 
   <Page>
     <Page.Title> {React.string("Dashboard")} </Page.Title>
-    <div className={styles["stats-grid"]}>
+    <div className={styles["statsGrid"]}>
       <RowBasedTable rows=applicationsRows data=basicStats title=Some("Current Applications") />
       <RowBasedTable rows=permissionsRows data=session title=Some("Your Permissions/Roles") />
       <RowBasedTable rows=statusRows data=status title=Some("Api Status") />

diff --git a/melon-head/src/DataTable.res b/melon-head/src/DataTable.res
@@ -11,7 +11,7 @@ type column<'t> = {
 module HeadCell = {
   @react.component
   let make = (~column: column<'t>) => {
-    <div className={styles["head-cell"]}> {React.string(column.name)} </div>
+    <div className={styles["headCell"]}> {React.string(column.name)} </div>
   }
 }
 
@@ -56,7 +56,7 @@ let make = (~data: Api.webData<array<'t>>, ~columns: array<column<'t>>) => {
     ReactDOM.Style.make()->ReactDOM.Style.unsafeAddProp("--grid-template-columns", gridTemplate)
 
   <div className={styles["root"]} style>
-    <div className={styles["scroll-container"]}>
+    <div className={styles["scrollContainer"]}>
       <THead columns />
       {switch data {
       | Success(rows) =>

diff --git a/melon-head/src/Icons.res b/melon-head/src/Icons.res
@@ -9,7 +9,7 @@ type variant =
 module Hamburger = {
   @react.component
   let make = (~isOpen: bool) => {
-    let classNames = styles["hamburger"] ++ (isOpen ? " " ++ styles["hamburger-open"] : "")
+    let classNames = styles["hamburger"] ++ (isOpen ? " " ++ styles["hamburgerOpen"] : "")
 
     <span className={classNames}>
       <i />
@@ -21,8 +21,8 @@ module Profile = {
   @react.component
   let make = (~variant: variant=Dark) => {
     let cssClass = switch variant {
-    | Dark => styles["profile-dark"]
-    | Light => styles["profile-light"]
+    | Dark => styles["profileDark"]
+    | Light => styles["profileLight"]
     }
 
     <span className={cssClass}>
@@ -42,8 +42,8 @@ module Loading = {
   @react.component
   let make = (~variant: variant=Light) => {
     let className = switch variant {
-    | Light => styles["loading-light"]
-    | Dark => styles["loading-dark"]
+    | Light => styles["loadingLight"]
+    | Dark => styles["loadingDark"]
     }
     <div className>
       <div />

diff --git a/melon-head/src/Link.res b/melon-head/src/Link.res
@@ -43,7 +43,7 @@ module Uuid = {
     }
     <a className={styles["uuid"]} onClick={openPath}>
       {React.string(shorten)}
-      <span className={styles["uuid-full"]}> {React.string(Data.Uuid.toString(uuid))} </span>
+      <span className={styles["uuidFull"]}> {React.string(Data.Uuid.toString(uuid))} </span>
     </a>
   }
 }
diff --git a/melon-head/src/Link/styles.module.scss b/melon-head/src/Link/styles.module.scss
@@ -14,6 +14,7 @@
     color: $ternary;
     text-decoration: underline;
     cursor: pointer;
+    font-weight: 600;
 
     &:hover > span {
         display: block;

diff --git a/melon-head/src/Profile.res b/melon-head/src/Profile.res
@@ -16,19 +16,19 @@ let make = (
 ) =>
   <div className={styles["root"]}>
     <div onClick={closeProfile} />
-    <aside className={styles["side-pane"]}>
+    <aside className={styles["sidePane"]}>
       <header className={styles["header"]}>
         <Icons.Profile variant=Icons.Light />
         <h4 className={styles["nav-title"]}> {React.string("Profile")} </h4>
-        <button onClick={closeProfile} className={styles["close-btn"]}>
+        <button onClick={closeProfile} className={styles["closeBtn"]}>
           <Icons.Close />
         </button>
       </header>
-      <section className={styles["profile-detail"]}>
+      <section className={styles["profileDetail"]}>
         <h4 className={styles["profile-title"]}> {React.string("Profile details")} </h4>
         {switch session {
         | Success(ses) =>
-          <table className={styles["profile-table"]}>
+          <table className={styles["profileTable"]}>
             <tbody>
               <tr title={ses.tokenClaims.sub->Data.Uuid.toString}>
                 <td> {React.string("sub")} </td>
@@ -72,7 +72,7 @@ let make = (
         }}
       </section>
       <nav>
-        <ul className={styles["nav-list"]}>
+        <ul className={styles["navList"]}>
           <li key="1">
             <a href={config.profileUrl} target="_blank"> {React.string("Profile")} </a>
           </li>
@@ -81,9 +81,9 @@ let make = (
               {React.string("Account Settings")}
             </a>
           </li>
-          <li key="3" className={styles["nav-divider"]} />
-          <li key="4" className={styles["centered-li"]}>
-            <button className={styles["sign-out-btn"]} onClick={_ => Keycloak.logout(keycloak)}>
+          <li key="3" className={styles["navDivider"]} />
+          <li key="4" className={styles["centeredLi"]}>
+            <button className={styles["signOutBtn"]} onClick={_ => Keycloak.logout(keycloak)}>
               {React.string("Sign Out")}
             </button>
           </li>

diff --git a/melon-head/src/Tabbed.res b/melon-head/src/Tabbed.res
@@ -7,7 +7,7 @@ let make = default => {
 module Tabs = {
   @react.component
   let make = (~children) => {
-    <div className={styles["scroll-container"]}>
+    <div className={styles["scrollContainer"]}>
       <nav className={styles["nav"]}> children </nav>
     </div>
   }
@@ -20,7 +20,7 @@ module Tab = {
     let activate = _ => setActive(_ => value)
 
     let cssClass = if active == value {
-      styles["active-tab"]
+      styles["activeTab"]
     } else {
       styles["tab"]
     }

diff --git a/melon-head/src/index.html b/melon-head/src/index.html
@@ -1,11 +1,9 @@
 <!doctype html>
 <head>
   <title>Melon Head</title>
-  <link rel="stylesheet" href="/static/css/main.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta charset="utf-8">
 </head>
 <body>
   <div id="app"></div>
-  <script src="index.js" type="module"></script>
 </body>
diff --git a/melon-head/src/index.js b/melon-head/src/index.js
@@ -4,6 +4,8 @@ import { createRoot } from 'react-dom/client';
 import * as React from "react";
 const config = require("../config.json");
 
+import "../static/css/main.css";
+
 const keycloak = new Keycloak({
     url: config.keycloak_url,
     realm: config.keycloak_realm,

diff --git a/melon-head/webpack.config.js b/melon-head/webpack.config.js
@@ -0,0 +1,70 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const config = require('./config.json');
+
+module.exports = (env, argv) => {
+    const mode = argv.model === 'production' ? 'production' : 'development';
+    console.log("webpack runs in", mode, "mode");
+
+    return {
+        mode,
+        entry: path.resolve(__dirname, './src/index.js'),
+        module: {
+            rules: [
+                {
+                    test: /\.scss$/i,
+                    use: [
+                        "style-loader",
+                        {
+                            loader: "css-loader",
+                            options: {
+                                importLoaders: 1,
+                                modules: {
+                                    namedExport: true,
+                                    localIdentName: "[local]--[hash:base64:16]",
+                                    exportLocalsConvention: "camelCaseOnly",
+                                },
+                            },
+                        },
+                        "sass-loader",
+                    ],
+                },
+                {
+                    test: /\.css$/i,
+                    use: [
+                        "style-loader", "css-loader"
+                    ],
+                },
+                {
+                    test: /\.(png|jpg|gif|svg)$/,
+                    use: [{
+                        loader: 'file-loader',
+                        options: {
+                            name: '[name]--[contenthash].[ext]',
+                            esModule: false,
+                        }
+                    }]
+                },
+            ],
+        },
+        resolve: {
+            extensions: ['.js', '.bs.js'],
+        },
+        output: {
+            filename: 'bundle-[contenthash].js',
+            path: path.resolve(__dirname, 'dist'),
+        },
+        devServer: {
+            port: 1234,
+            historyApiFallback: true,
+        },
+        plugins: [
+            new CleanWebpackPlugin(),
+            new HtmlWebpackPlugin({
+                template: path.resolve(__dirname, "./src/index.html"),
+                publicPath: '/',
+            }),
+        ],
+    };
+};