Various improvements

Author: thoughtsunificator

README.md

@@ -74,15 +74,19 @@ Finally, install the userscript from OpenUserJS :
 
 I recommend using [Violentmonkey](https://violentmonkey.github.io/) or similar and enable userscript autoreloading as explained in here https://violentmonkey.github.io/posts/how-to-edit-scripts-with-your-favorite-editor/ 
 
-Install all dependencies:
+Install dependencies:
 - ``npm install``
 
-Start rollup with the watch flag:
+To both serve and build with autoreloading:
 - ``npm start``
 
+> This will also start an HTTP server and allow autoreloading of the userscript as changes are made.
+
 You can also do a one-time build with:
 - ``npm run build``
 
+> The script will build to ``dist/idmu.user.js`` by default.
+
 ## This might not work
 
 Instagram web app is serving different UIs probably based on the user location. [Yours might not be supported](https://github.com/thoughtsunificator/instagram-dm-unsender/issues/1)

package-lock.json

@@ -22,6 +22,7 @@
     "eslint": "^8.43.0",
     "husky": "^8.0.3",
     "jsdom": "^22.1.0",
-    "rollup": "^3.25.3"
+    "rollup": "^3.25.3",
+    "rollup-plugin-serve": "^1.1.1"
   }
 }

package.json

@@ -2,8 +2,12 @@
 
 import fs from "fs"
 import nodeResolve from "@rollup/plugin-node-resolve"
+import serve from "rollup-plugin-serve"
 import pkg from "./package.json" assert { type: "json" }
 
+const isProduction = process.env.BUILD === "production"
+const isDevelopment = !isProduction
+
 export default {
 	input: "./src/runtime/userscript/main.js",
 	output: {
@@ -28,5 +32,9 @@ export default {
 			}
 		},
 		nodeResolve(),
+		isDevelopment && serve({
+			contentBase: "dist",
+			port: process.env.PORT || 3000
+		}),
 	]
 }

rollup.userscript.config.js

@@ -20,7 +20,7 @@ export function waitForElement(target, getElement, controller=new AbortControlle
 	return new Promise((resolve, reject) => {
 		let mutationObserver
 		const abortHandler = () => {
-			console.log("abortController")
+			console.debug("abortController")
 			reject(new DOMException("Aborted", "AbortError"))
 			if(mutationObserver) {
 				mutationObserver.disconnect()

src/dom/async-events.js

@@ -10,10 +10,12 @@ class IDMU {
 	/**
 	 *
 	 * @param {Window} window
+	 * @param {callback} onStatusText
 	 */
-	constructor(window) {
+	constructor(window, onStatusText) {
 		this.window = window
 		this.uipi = null
+		this.onStatusText = onStatusText
 	}
 
 	/**
@@ -24,6 +26,14 @@ class IDMU {
 		return this.#getUIPI().createUIPIMessages()
 	}
 
+	/**
+	 *
+	 * @param {string} text
+	 */
+	setStatusText(text) {
+		this.onStatusText(text)
+	}
+
 
 	/**
 	 *
@@ -39,10 +49,11 @@ class IDMU {
 	 */
 	#getUIPI() {
 		if(this.uipi === null) {
-			this.uipi = UIPI.create(this.window, this.UI)
+			this.uipi = UIPI.create(this.window)
 		}
 		return this.uipi
 	}
 
+
 }
 export default IDMU

src/idmu/idmu.js

@@ -14,7 +14,7 @@ test("IDMU", t => {
 test("IDMU fetchAndRenderThreadNextMessagePage", async t => {
 	t.context.mountElement.append(createMessagesWrapperElement(t.context.document))
 	const messagesWrapperElement = findMessagesWrapper(t.context.window)
-	const idmu = new IDMU(t.context.window)
+	const idmu = new IDMU(t.context.window, () => {})
 	messagesWrapperElement.innerHTML += `<div role="progressbar"></div>`
 	const result = idmu.fetchAndRenderThreadNextMessagePage()
 	messagesWrapperElement.querySelector("[role=progressbar]").remove()
@@ -25,9 +25,20 @@ test("IDMU createUIPIMessages", async t => {
 	const messagesWrapperElement = createMessagesWrapperElement(t.context.document)
 	t.context.mountElement.append(messagesWrapperElement)
 	const messageElement = createMessageElement(t.context.document, "cxzc423Testsdfdsfsdfsdfds")
-	const idmu = new IDMU(t.context.window)
+	const idmu = new IDMU(t.context.window, () => {})
 	findMessagesWrapper(t.context.window).appendChild(messageElement)
 	const uipiMessages = await idmu.createUIPIMessages()
 	t.is(uipiMessages.length, 1)
 	t.is(uipiMessages[0].uiMessage.root.querySelector("span").textContent, "cxzc423Testsdfdsfsdfsdfds")
 })
+
+
+test("IDMU onStatusText", t => {
+	let text = ""
+	const callback = () => {
+		text = "text"
+	}
+	const idmu = new IDMU(t.context.window, callback)
+	idmu.onStatusText("text")
+	t.is(text, "text")
+})

src/idmu/idmu.test.js

@@ -6,11 +6,13 @@
  */
 export function createMenuElement(document) {
 	const menuElement = document.createElement("div")
+	menuElement.id = "idmu-menu"
 	menuElement.style.top = "20px"
 	menuElement.style.right = "430px"
 	menuElement.style.position = "fixed"
 	menuElement.style.zIndex = 999
 	menuElement.style.display = "flex"
 	menuElement.style.gap = "10px"
+	menuElement.style.placeItems = "center"
 	return menuElement
 }