Added prototype for bundling files.

ui/.gitignore

@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+pad.html

ui/copyPadHtml.js

@@ -0,0 +1,24 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import {fileURLToPath} from 'url';
+import {dirname} from 'path';
+
+const scriptToInsert = '<script type="module" src="/src/pad/main.js"></script></body>'
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const padHtml = fs.readFileSync(path.join(__dirname, "..", "src", "templates", "pad_template.html"), 'utf8');
+let fileContent = padHtml.replaceAll(/<%[\s\S]*?%>/g, '');
+fileContent = fileContent.replaceAll("<%=encodeURI(settings.skinName)%>", "colibris");
+
+fileContent = fileContent.replace("PLACEHOLDER_FOR_PAD_JS", "");
+
+
+const result = fileContent.split("</body>")
+result[1] = scriptToInsert + result[1]
+
+fileContent = result.join("")
+
+fs.writeFileSync("pad.html", fileContent);
+
+

ui/copyProdPadFiles.js

@@ -0,0 +1,21 @@
+import {fileURLToPath} from "url";
+import {dirname} from "path";
+import fs from "node:fs";
+import path from "node:path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+let padHtml = fs.readFileSync(path.join(__dirname, "..", "src", "templates", "pad_template.html"), 'utf8');
+const OUTPUT_PATH = path.join(__dirname, "..", "src", "templates", "pad.html");
+// Walk directory and find pad js file
+let padJsFile = "";
+const walkSync = (dir) => {
+  fs.readdirSync(dir).forEach(file => {
+    if (file.startsWith("pad-")) {
+      padJsFile = file;
+    }
+  })}
+walkSync(path.join(__dirname, "..", "src", "static", "oidc", "assets"))
+console.log(padJsFile)
+padHtml = padHtml.replace("PLACEHOLDER_FOR_PAD_JS", `../../views/assets/${padJsFile}?callback=require.define`);
+fs.writeFileSync(OUTPUT_PATH, padHtml);

ui/package.json

@@ -4,12 +4,21 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
+    "dev": "node copyPadHtml.js && vite",
+    "build": "tsc && vite build &&  node copyProdPadFiles.js",
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
     "typescript": "^5.4.5",
-    "vite": "^5.2.12"
+    "vite": "^5.2.12",
+    "socket.io-client": "^4.7.5",
+    "ep_etherpad-lite": "workspace:../src",
+    "js-cookie": "^3.0.5",
+    "security": "^1.0.0",
+    "tinycon": "^0.6.8",
+    "underscore": "^1.13.6",
+    "unorm": "^1.6.0",
+    "vite-plugin-require": "^1.1.14"
   }
 }

ui/src/pad/main.js

@@ -0,0 +1,43 @@
+// @license magnet:?xt=urn:btih:8e4f440f4c65981c5bf93c76d35135ba5064d8b7&dn=apache-2.0.txt
+window.clientVars = {
+  // This is needed to fetch /pluginfw/plugin-definitions.json, which happens before the
+  // server sends the CLIENT_VARS message.
+  randomVersionString: "test",
+};
+(function () {
+  const pathComponents = location.pathname.split('/');
+
+  // Strip 'p' and the padname from the pathname and set as baseURL
+  const baseURL = pathComponents.slice(0, pathComponents.length - 2).join('/') + '/';
+
+  window.$ = require('ep_etherpad-lite/static/js/rjquery').jQuery; // Expose jQuery #HACK
+  window.jQuery = require('ep_etherpad-lite/static/js/rjquery').jQuery;
+  window.browser = require('ep_etherpad-lite/static/js/vendors/browser');
+
+  var plugins = require('ep_etherpad-lite/static/js/pluginfw/client_plugins');
+  var hooks = require('ep_etherpad-lite/static/js/pluginfw/hooks');
+
+  plugins.baseURL = baseURL;
+  plugins.update(function () {
+    // Mechanism for tests to register hook functions (install fake plugins).
+    window._postPluginUpdateForTestingDone = false;
+    if (window._postPluginUpdateForTesting != null) window._postPluginUpdateForTesting();
+    window._postPluginUpdateForTestingDone = true;
+    // Call documentReady hook
+    $(function() {
+      hooks.aCallAll('documentReady');
+    });
+
+    const pad = require('ep_etherpad-lite/static/js/pad');
+    pad.baseURL = baseURL;
+    pad.init();
+  });
+
+  /* TODO: These globals shouldn't exist. */
+  window.pad = require('ep_etherpad-lite/static/js/pad').pad;
+  window.chat = require('ep_etherpad-lite/static/js/chat').chat;
+  window.padeditbar = require('ep_etherpad-lite/static/js/pad_editbar').padeditbar;
+  window.padimpexp = require('ep_etherpad-lite/static/js/pad_impexp').padimpexp;
+  window.io = require('socket.io-client');
+  require('ep_etherpad-lite/static/js/skin_variants');
+}());

ui/vite.config.ts

@@ -1,15 +1,33 @@
 // vite.config.js
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
+import commonjs from '@rollup/plugin-commonjs';
 
 export default defineConfig({
     base: '/views/',
+  server:{
+    proxy:{
+      "/static":{
+        changeOrigin: true,
+        target: "http://localhost:9001",
+      }
+    }
+  },
+  plugins: [
+    commonjs({
+      requireReturnsDefault: 'auto', // <---- this solves default issue
+    }),
+
+    // vite4
+    // vitePluginRequire.default()
+  ],
     build: {
         outDir: resolve(__dirname, '../src/static/oidc'),
         rollupOptions: {
             input: {
                 main: resolve(__dirname, 'consent.html'),
                 nested: resolve(__dirname, 'login.html'),
+                pad: resolve(__dirname, 'pad.html'),
             },
         },
         emptyOutDir: true,