Migrate to webpack for better bundeling and add codemirror

core/build.gradle.kts

@@ -4,7 +4,7 @@ import nl.javadude.gradle.plugins.license.LicenseExtension
 import org.gradle.internal.impldep.org.junit.experimental.categories.Categories.CategoryFilter.exclude
 
 group = "nl.tudelft.labrador"
-version = "1.0.2"
+version = "1.0.2-beta"
 
 repositories {
     mavenLocal()
@@ -107,9 +107,9 @@ task<Exec>("sassCompile") {
 
 task<Exec>("tsCompile") {
     if (System.getProperty("os.name").contains("windows",true)) {
-        commandLine("cmd", "/c", "npm", "run", "tsCompile")
+        commandLine("cmd", "/c", "npm", "run", "build")
     } else {
-        commandLine("npm", "run", "tsCompile")
+        commandLine("npm", "run", "build")
     }
     tasks.getByName("jar").dependsOn.add(this)
 }

core/package.json

@@ -7,6 +7,7 @@
     "src": "src"
   },
   "scripts": {
+    "build": "webpack",
     "sassCompile": "sass src/scss:build/resources/main/META-INF/resources/webjars/chihuahui/$(npm version | grep chihuahui | sed \"s/.*chihuahui: '\\([0-9]\\+\\.[0-9]\\+\\.[0-9]\\+\\).*',/\\1/\")",
     "tsCompile": "tsc src/ts/components/*.ts -t es2022 --outDir build/resources/main/META-INF/resources/webjars/chihuahui/$(npm version | grep chihuahui | sed \"s/.*chihuahui: '\\([0-9]\\+\\.[0-9]\\+\\.[0-9]\\+\\).*',/\\1/\")"
   },
@@ -17,8 +18,21 @@
   "author": "",
   "license": "AGPL-3.0-only",
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.2.1",
+    "@codemirror/lang-markdown": "^6.2.3",
+    "codemirror": "6.0.1",
+    "playwright": "latest",
+    "prosemirror": "^0.11.1",
+    "prosemirror-example-setup": "^1.2.2",
+    "prosemirror-markdown": "^1.11.2",
+    "prosemirror-schema-basic": "^1.2.2",
+    "prosemirror-schema-list": "^1.3.0",
     "sass": "1.65.1",
-    "typescript": "^5.0.0",
-    "playwright": "latest"
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/codemirror": "^5.60.15",
+    "webpack-cli": "^5.1.4"
   }
 }

core/src/ts/components/components.ts

@@ -16,20 +16,22 @@
 /// along with this program.  If not, see <https://www.gnu.org/licenses/>.
 ///
 
-import { initTabs } from "./tabs.js";
-import { initToggles } from "./toggle.js";
-import { initMenus } from "./menu.js";
-import { initDialogs } from "./dialog.js";
-import { initAccordions } from "./accordion.js";
-import { initSelects } from "./selectbox.js";
+import { initTabs } from "./tabs";
+import { initToggles } from "./toggle";
+import { initMenus } from "./menu";
+import { initDialogs } from "./dialog";
+import { initAccordions } from "./accordion";
+import { initSelects } from "./selectbox";
+import { initMardownEditors } from "./markdown_codemirror";
 
-function initComponentEvents(inElement: HTMLElement | Document) {
+export function initComponentEvents(inElement: HTMLElement | Document) {
     initTabs(inElement);
     initToggles(inElement);
     initMenus(inElement);
     initDialogs(inElement);
     initAccordions(inElement);
     initSelects(inElement);
+    initMardownEditors(inElement);
     inElement.dispatchEvent(new CustomEvent("ComponentsLoaded"));
 }
 window["initComponentEvents"] = initComponentEvents;

core/src/ts/components/markdown_codemirror.ts

+import { basicSetup, EditorView } from 'codemirror'
+import { markdown } from '@codemirror/lang-markdown'
+
+export function initMardownEditors(inElement) {
+    const targetElement = document.querySelector('#code')!
+    inElement.querySelectorAll("[data-editor-markdown]").forEach((s: any) => initMarkdownEditor(s))
+}
+
+function initMarkdownEditor(targetElement: any) {
+    const initialText = targetElement.innerText
+    new EditorView({
+        doc: initialText,
+        extensions: [
+            basicSetup,
+            markdown()
+        ],
+        parent: targetElement
+    })
+}

core/src/ts/components/selectbox.ts

@@ -370,6 +370,7 @@ function initSelect(select: HTMLSelectElement) {
         list.setAttribute("role", "list");
         wrapper.appendChild(list);
 
+        // @ts-ignore
         for (let opt of selectClone.querySelectorAll("option")) {
             list.appendChild(buildOption(wrapper, opt));
         }

core/tsconfig.json

 {
   "compilerOptions": {
-    "target": "es2022"
+    "target": "es2022",
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "lib": ["ESNext", "DOM"],
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
   }
 }

core/webpack.config.cjs

+const path = require("path")
+module.exports = {
+    mode: 'development',
+    entry: '/src/ts/components/components.ts',
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+    },
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'static'),
+    },
+}

documentation/package.json

@@ -11,11 +11,10 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
 		"format": "prettier --plugin-search-dir . --write .",
-
 		"sassWatch": "sass --watch ../core/src/scss:static/css",
 		"tsWatch": "tsc --watch ../core/src/ts/components/*.ts -t es2022 --outDir static/js/",
 		"sassCompile": "sass ../core/src/scss:static/css",
-		"tsCompile": "tsc ../core/src/ts/components/*.ts -t es2022 --outDir static/js/"
+		"tsCompile": "tsc ../core/src/ts/components/*.ts -t es2022 --moduleResolution nodenext --outDir static/js/"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.28.1",
@@ -31,9 +30,11 @@
 		"prettier-plugin-svelte": "^2.8.1",
 		"svelte": "^3.54.0",
 		"svelte-check": "^3.0.1",
+		"ts-loader": "^9.5.1",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^4.3.0"
+		"vite": "^4.3.0",
+		"webpack": "^5.89.0"
 	},
 	"dependencies": {
 		"sass": "1.65.1"

documentation/src/app.html

@@ -9,7 +9,8 @@
 		<link rel="stylesheet" href="%sveltekit.assets%/css/main.css"/>
 		<script src="%sveltekit.assets%/js/theme.js"></script>
 		<script src="%sveltekit.assets%/js/toast.js"></script>
-		<script type="module" src="%sveltekit.assets%/js/components.js"></script>
+		<script type="module" src="%sveltekit.assets%/js/bundle.js"></script>
+<!--		<script type="module" src="%sveltekit.assets%/js/components.js"></script>-->
 
 		<title>ChihuahUI</title>
 

documentation/src/routes/components/textfield/+page.svelte

@@ -31,3 +31,7 @@
     <input type="password" class="textfield" placeholder="Password field"/>
     <input type="number" class="textfield" placeholder="Number field"/>
 </div>
+<div class="flex vertical gap-3 align-start">
+    <div id="code"></div>
+</div>
+

documentation/webpack.config.cjs

+const path = require("path")
+module.exports = {
+    mode: 'development',
+    entry: '../core/src/ts/components/components.ts',
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.ts', '.js'],
+    },
+    output: {
+        filename: 'bundle.js',
+        path: path.resolve(__dirname, 'static/js'),
+    },
+}