found a solution to lazy-load the spreadsheet js and css

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

core/src/main/java/de/srsoftware/umbrella/core/Util.java

@@ -37,12 +37,51 @@ import org.json.JSONObject;
 public class Util {
 	public static final System.Logger LOG = System.getLogger("Util");
 	private static final Pattern UML_PATTERN = Pattern.compile("@start(\\w+)(.*?)@end(\\1)",Pattern.DOTALL);
+	private static final Pattern SPREADSHEET_PATTERN = Pattern.compile("@startsheet(.*?)@endsheet",Pattern.DOTALL);
 	private static File plantumlJar = null;
 	private static final JParsedown MARKDOWN = new JParsedown();
 	public static final String SHA1 = "SHA-1";
 	private static final MessageDigest SHA1_DIGEST;
 	private static final Map<Integer,String> umlCache = new HashMap<>();
 
+	private static final String SCRIPT = """
+<script src="http://127.0.0.1:8080/js/jspreadsheet-ce.js"></script>
+<div id="spreadsheet"></div>
+<script type="application/javascript">
+alert('Test');
+jspreadsheet(document.getElementById('spreadsheet'), {
+    worksheets: [
+        {
+            data: [
+                ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
+                ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
+            ],
+            columns: [
+                { type: 'text', title: 'Car', width: 120 },
+                {
+                    type: 'dropdown',
+                    title: 'Make',
+                    width: 200,
+                    source: ['Alfa Romeo', 'Audi', 'Bmw', 'Honda'],
+                },
+                { type: 'calendar', title: 'Available', width: 200 },
+                { type: 'image', title: 'Photo', width: 120 },
+                { type: 'checkbox', title: 'Stock', width: 80 },
+                {
+                    type: 'numeric',
+                    title: 'Price',
+                    width: 100,
+                    mask: '$ #.##,00',
+                    decimal: ',',
+                },
+                { type: 'color', width: 100, render: 'square' },
+            ],
+        },
+    ],
+});
+</script>
+			""";
+
 	static {
 		try {
 			SHA1_DIGEST = MessageDigest.getInstance(SHA1);
@@ -79,8 +118,16 @@ public class Util {
 	public static String markdown(String source){
 		if (source == null) return source;
 		try {
+			var matcher = SPREADSHEET_PATTERN.matcher(source);
+			while (matcher.find()){
+				var sheetData = matcher.group(0).trim();
+				var start = matcher.start(0);
+				var end = matcher.end(0);
+				source = source.substring(0, start) + SCRIPT + source.substring(end);
+				matcher = SPREADSHEET_PATTERN.matcher(source);
+			}
 			if (plantumlJar != null && plantumlJar.exists()) {
-				var matcher = UML_PATTERN.matcher(source);
+				matcher = UML_PATTERN.matcher(source);
 				while (matcher.find()) {
 					var uml = matcher.group(0).trim();
 					var start = matcher.start(0);

frontend/package-lock.json

@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "jspreadsheet-ce": "^5.0.4",
         "svelte-tiny-router": "^1.0.5"
       },
       "devDependencies": {
@@ -488,6 +489,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@jspreadsheet/formula": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@jspreadsheet/formula/-/formula-2.0.2.tgz",
+      "integrity": "sha512-PDQYf9REQA53I7tVYkvkeyQxrd5jcjUeHgItYnRpjN2QiIQwawSqBDtGGEVQTSboTG+JwgGCuhvOpj7FxeKwew=="
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.44.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.44.1.tgz",
@@ -951,6 +957,20 @@
         "@types/estree": "^1.0.6"
       }
     },
+    "node_modules/jspreadsheet-ce": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/jspreadsheet-ce/-/jspreadsheet-ce-5.0.4.tgz",
+      "integrity": "sha512-ra1JI1n+tEGgRMzTzNkPZjG0HZz8W6bFGAiTiHl+eYarXdRmS5qDc/ua3l2ev7oZ6Og9kjfrXYHVLUWiVc308w==",
+      "dependencies": {
+        "@jspreadsheet/formula": "^2.0.2",
+        "jsuites": "^5.12.0"
+      }
+    },
+    "node_modules/jsuites": {
+      "version": "5.13.5",
+      "resolved": "https://registry.npmjs.org/jsuites/-/jsuites-5.13.5.tgz",
+      "integrity": "sha512-cvkcpy/v5I3+IAcNPE4UP38PFCEfUQw9JI5NN61dlcXLwkD+2UTIOsRPvgMLeqI1eDWHL4AHfrbcE/+TFciUsw=="
+    },
     "node_modules/kleur": {
       "version": "4.1.5",
       "dev": true,

frontend/package.json

@@ -14,6 +14,7 @@
     "vite": "^6.3.5"
   },
   "dependencies": {
+    "jspreadsheet-ce": "^5.0.4",
     "svelte-tiny-router": "^1.0.5"
   }
 }

frontend/src/App.svelte

@@ -33,6 +33,7 @@
     import ResetPw     from "./routes/user/ResetPw.svelte";
     import Search      from "./routes/search/Search.svelte";
     import SendDoc     from "./routes/document/Send.svelte";
+    import Spreadsheet from "./routes/calc.svelte";
     import Stock       from './routes/stock/Index.svelte';
     import TagList     from "./routes/tags/Index.svelte";
     import TagUses     from "./routes/tags/TagUses.svelte";
@@ -89,6 +90,7 @@
         <Route path="/"                            component={User} />
         <Route path="/bookmark"                    component={Bookmarks} />
         <Route path="/bookmark/:id/view"           component={Bookmark} />
+        <Route path="/calc"                        component={Spreadsheet} />
         <Route path="/company"                     component={Companies} />
         <Route path="/contact"                     component={ContactList} />
         <Route path="/document"                    component={DocList} />

frontend/src/routes/calc.svelte

@@ -0,0 +1,58 @@
+<script>
+	import { onMount } from 'svelte';
+
+	var spreadsheet = null;
+
+	const config = {
+	    worksheets: [{
+	            data: [
+	                ["1","Sum of A:","=SUM(A1:A99)"],
+	                ["2"],
+	                ["3"],
+	                ["4"]
+	            ],
+	            columns: [
+	                { type: 'autonumber', title: 'amount' },
+	                { type: 'text', width: '350px', title: 'description', align: 'right' },
+	                { type: 'text', width: '250px', title: 'value' },
+	            ],
+	            // Name of the worksheet
+	            worksheetName: 'Albums'
+	    }],
+	    onchange: update
+	};
+
+
+	function update(instance, cell, x, y, value) {
+		console.log({instance,cell,x,y,value});
+		console.log(spreadsheet[0].getData());
+	}
+
+	let loading = true;
+
+	async function load(){
+	    try {
+			const module = await import('jspreadsheet-ce'); // path or package name
+		    await import('jspreadsheet-ce/dist/jspreadsheet.css');
+
+			let jspreadsheet = module.default ?? module;
+			let element = document.getElementById('spreadsheet');
+			console.log(element);
+			spreadsheet = jspreadsheet(element, config);
+	    } catch (e) {
+			console.log(e);
+	    } finally {
+			loading = false;
+	    }
+	}
+
+
+	onMount(load);
+</script>
+
+{#if loading}
+Loading…
+{:else}
+
+{/if}
+<div id="spreadsheet">Spreadsheet loading…</div>

web/build.gradle.kts

@@ -11,3 +11,20 @@ tasks.processResources {
     }
     duplicatesStrategy = DuplicatesStrategy.EXCLUDE
 }
+
+fun download(url : String, destination : String){
+    var destFile = projectDir.toPath().resolve(destination).toFile();
+    destFile.parentFile.mkdirs()
+    if (!destFile.exists()) {
+        System.out.println("Downloading "+url)
+        ant.invokeMethod("get", mapOf("src" to url, "dest" to destFile))
+    }
+}
+
+tasks.register("downloadLib"){
+    download("https://bossanova.uk/jspreadsheet/v5/jspreadsheet.js", "src/main/resources/web/js/jspreadsheet-ce.js")
+}
+
+tasks.named("compileJava") {
+    dependsOn("downloadLib")
+}