Merge pull request #132 from JOTSR/refactor/improve-js-bridge

refactor, fix and add feat to js bridge

.github/workflows/build.yml

@@ -14,6 +14,8 @@ jobs:
       - name: Windows-WebUI
         shell: cmd
         run: |
+          npm install --save-exact -g esbuild
+          esbuild --bundle --target="chrome90,firefox90,safari15" --format=esm --log-level=silent --outdir=./src/client ./src/client/webui.ts
           cd src
           xxd -i client\webui.js client\webui.h
           cd ..
@@ -30,6 +32,8 @@ jobs:
       - uses: actions/checkout@v2
       - name: Linux-WebUI
         run: |
+          npm install --save-exact -g esbuild
+          esbuild --bundle --target="chrome90,firefox90,safari15" --format=esm --log-level=silent --outdir=./src/client ./src/client/webui.ts
           cd src
           xxd -i client/webui.js client/webui.h
           cd ..
@@ -47,6 +51,8 @@ jobs:
       - uses: actions/checkout@v2
       - name: macOS-WebUI
         run: |
+          npm install --save-exact -g esbuild
+          esbuild --bundle --target="chrome90,firefox90,safari15" --format=esm --log-level=silent --outdir=./src/client ./src/client/webui.ts
           cd src
           xxd -i client/webui.js client/webui.h
           cd ..

build/linux_build.sh

@@ -23,7 +23,12 @@ echo "";
 echo "Converting JS source to C-String using xxd"
 echo "";
 
-#Converting JS source to C-String using xxd
+# Transpiling TS to JS
+echo "Transpile and bundle TS sources to webui.js";
+cd "%RootPath%"
+esbuild --bundle --target="chrome90,firefox90,safari15" --format=esm --outdir=./src/client ./src/client/webui.ts
+
+# Converting JS source to C-String using xxd
 cd "$RootPath"
 cd "src"
 xxd -i client/webui.js client/webui.h

build/macos_build.sh

@@ -32,7 +32,12 @@ echo "";
 echo "Converting JS source to C-String using xxd"
 echo "";
 
-#Converting JS source to C-String using xxd
+# Transpiling TS to JS
+echo "Transpile and bundle TS sources to webui.js";
+cd "%RootPath%"
+esbuild --bundle --target="chrome90,firefox90,safari15" --format=esm --outdir=./src/client ./src/client/webui.ts
+
+# Converting JS source to C-String using xxd
 cd "$RootPath"
 cd "src"
 xxd -i client/webui.js client/webui.h

build/windows_build.bat

@@ -19,6 +19,11 @@ echo Compiler: MSVC, GCC and TCC
 Set RootPath=%CD%\..\
 cd "%RootPath%"
 
+REM Transpiling TS to JS
+echo Transpile and bundle TS sources to webui.js
+cd "%RootPath%"
+cmd /c esbuild --bundle --target="chrome90,firefox90,safari15" --format=esm --log-level=silent --outdir=.\src\client .\src\client\webui.ts
+
 REM Converting JS source to C-String using xxd
 echo Converting JS source to C-String using xxd
 cd "%RootPath%"

src/client/.gitignore

@@ -1,3 +1,4 @@
 # Do not track xxd output files
 *.c
-*.h
+*.h
+*.js

src/client/utils.ts

@@ -0,0 +1,41 @@
+/**
+ * Allows you to automatically bind an event listener to newly added
+ * elements that match a specific selector within a given root element.
+ * Track dom update to rebind event listeners automatically.
+ *
+ * @param {HTMLElement} root - The root element to observe for changes.
+ * @param {string} targetSelector - Query selector matching elements that you want to bind the event listener to.
+ * @param {K} type - Type of event listener to bind (same as for addEventListener).
+ * @param listener - Event listener to bind (same as for addEventListener).
+ * @param {boolean | AddEventListenerOptions} [options] - Event listener options (same as for addEventListener).
+ * @returns the used observer to allow disconnect.
+ */
+export function addRefreshableEventListener<
+	K extends keyof HTMLElementEventMap
+>(
+	root: HTMLElement,
+	targetSelector: string,
+	type: K,
+	listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => unknown,
+	options?: boolean | AddEventListenerOptions
+) {
+	function rebindListener(mutations: MutationRecord[]) {
+		for (const mutation of mutations) {
+			for (const node of mutation.addedNodes) {
+				if (!(node instanceof HTMLElement)) return // Target only html elements
+				if (node.matches(targetSelector)) {
+					// Bind event on added nodes
+					node.addEventListener<K>(type, listener, options)
+				}
+				for (const child of node.querySelectorAll(targetSelector)) {
+					if (!(child instanceof HTMLElement)) continue //Target only html elements
+					child.addEventListener<K>(type, listener, options)
+				}
+			}
+		}
+	}
+
+	const observer = new MutationObserver(rebindListener) //Set mutation observer callback
+	observer.observe(root, { subtree: true, childList: true }) // Observe root element and all his children
+	return observer // Allow user to stop observer for performance issues
+}