Added version check, updated to support mobile

esbuild.config.mjs

@@ -4,6 +4,7 @@ import builtins from "builtin-modules";
 import { sassPlugin } from "esbuild-sass-plugin";
 import copyStaticFiles from "esbuild-copy-static-files";
 import path from "path";
+import packageJson from "./package.json" assert { type: "json" };
 
 const banner = `/*
 THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
@@ -55,6 +56,10 @@ const context = await esbuild.context({
 	outdir: outdir,
 	define: {
 		"process.env.NODE_ENV": prod ? '"production"' : '"development"',
+		"process.env.PLUGIN_VERSION": `"${packageJson.version}"`,
+		"process.env.EMULATE_MOBILE": prod
+			? "false"
+			: process.argv.includes("--mobile").toString(),
 	},
 });
 

main.ts

@@ -1,4 +1,12 @@
-import { App, Plugin, PluginSettingTab, Setting } from "obsidian";
+import {
+	App,
+	Notice,
+	Plugin,
+	PluginSettingTab,
+	Setting,
+	requestUrl,
+} from "obsidian";
+import { v4 as uuidv4 } from "uuid";
 
 interface Divider {
 	id: string;
@@ -30,6 +38,8 @@ export default class DividerPlugin extends Plugin {
 	async onload() {
 		await this.loadSettings();
 
+		this.versionCheck();
+
 		// Render the dividers based on what is already in settings
 		Object.keys(this.settings.dividers).forEach((dividerId) => {
 			const divider = this.settings.dividers[dividerId];
@@ -39,6 +49,20 @@ export default class DividerPlugin extends Plugin {
 
 		// This adds a settings tab so the user can configure various aspects of the plugin
 		this.addSettingTab(new DividerSettingTab(this.app, this));
+
+		if (process.env.NODE_ENV === "development") {
+			// @ts-ignore
+			if (process.env.EMULATE_MOBILE && !this.app.isMobile) {
+				// @ts-ignore
+				this.app.emulateMobile(true);
+			}
+
+			// @ts-ignore
+			if (!process.env.EMULATE_MOBILE && this.app.isMobile) {
+				// @ts-ignore
+				this.app.emulateMobile(false);
+			}
+		}
 	}
 
 	onunload() {}
@@ -62,6 +86,43 @@ export default class DividerPlugin extends Plugin {
 		await this.saveData(this.settings);
 	}
 
+	/**
+	 * Check the local plugin version against github. If there is a new version, notify the user.
+	 */
+	async versionCheck() {
+		const localVersion = process.env.PLUGIN_VERSION;
+		const stableVersion = await requestUrl(
+			"https://raw.githubusercontent.com/andrewmcgivery/obsidian-ribbon-divider/main/package.json"
+		).then(async (res) => {
+			if (res.status === 200) {
+				const response = await res.json;
+				return response.version;
+			}
+		});
+		const betaVersion = await requestUrl(
+			"https://raw.githubusercontent.com/andrewmcgivery/obsidian-ribbon-divider/beta/package.json"
+		).then(async (res) => {
+			if (res.status === 200) {
+				const response = await res.json;
+				return response.version;
+			}
+		});
+
+		if (localVersion?.indexOf("beta") !== -1) {
+			if (localVersion !== betaVersion) {
+				new Notice(
+					"There is a beta update available for the Ribbon Divider plugin. Please update to to the latest version to get the latest features!",
+					0
+				);
+			}
+		} else if (localVersion !== stableVersion) {
+			new Notice(
+				"There is an update available for the Ribbon Divider plugin. Please update to to the latest version to get the latest features!",
+				0
+			);
+		}
+	}
+
 	/**
 	 * Renders a divider on the ribbon. The HTMLElement is saved to this.dividerElemenets so we can remove it if the
 	 * user deletes it from the settings screen.
@@ -70,7 +131,7 @@ export default class DividerPlugin extends Plugin {
 	async renderDivider(divider: Divider) {
 		const dividerIconEl = this.addRibbonIcon(
 			"",
-			`Divider: ${divider.id}`,
+			`-`,
 			(evt: MouseEvent) => {}
 		);
 		dividerIconEl.addClass("ribbon-divider");
@@ -97,8 +158,10 @@ export default class DividerPlugin extends Plugin {
 	async removeDivider(dividerId: string) {
 		delete this.settings.dividers[dividerId];
 		this.saveSettings();
-		this.dividerElements[dividerId].remove();
-		delete this.dividerElements[dividerId];
+		if (this.dividerElements[dividerId]) {
+			this.dividerElements[dividerId].remove();
+			delete this.dividerElements[dividerId];
+		}
 	}
 }
 
@@ -127,20 +190,14 @@ class DividerSettingTab extends PluginSettingTab {
 
 		Object.keys(this.plugin.settings.dividers).forEach((dividerId) => {
 			const divider = this.plugin.settings.dividers[dividerId];
-			const dividerEl = dividersContainerEl.createEl("div", {
-				attr: {
-					"data-gate-id": divider.id,
-					class: "ribbondividers-settings-divider",
-				},
-			});
 
-			new Setting(dividerEl)
+			new Setting(dividersContainerEl)
 				.setName("Divider")
 				.setDesc(`Id: ${divider.id}`)
 				.addButton((button) => {
 					button.setButtonText("Delete").onClick(async () => {
 						await this.plugin.removeDivider(divider.id);
-						dividerEl.remove();
+						this.display();
 					});
 				});
 		});
@@ -149,7 +206,7 @@ class DividerSettingTab extends PluginSettingTab {
 			.createEl("button", { text: "New divider", cls: "mod-cta" })
 			.addEventListener("click", () => {
 				this.plugin.addDivider({
-					id: crypto.randomUUID(),
+					id: uuidv4(),
 				});
 				this.display();
 			});

manifest.json

@@ -1,11 +1,11 @@
 {
 	"id": "ribbon-divider",
 	"name": "Ribbon Divider",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"minAppVersion": "0.15.0",
 	"description": "Allows you to add dividers to the ribbon to space out your icons.",
 	"author": "Andrew McGivery",
 	"authorUrl": "https://github.com/andrewmcgivery",
 	"fundingUrl": "https://www.buymeacoffee.com/andrewmcgivery",
-	"isDesktopOnly": true
-}
+	"isDesktopOnly": false
+}

package.json

@@ -1,10 +1,11 @@
 {
 	"name": "obsidian-ribbon-divider",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "A plugin for Obsidian.MD that allows you to add dividers to the ribbon to space out your icons.",
 	"main": "dist/main.js",
 	"scripts": {
 		"dev": "node esbuild.config.mjs",
+		"dev:mobile": "node esbuild.config.mjs --mobile",
 		"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
 		"version": "node version-bump.mjs && git add manifest.json versions.json"
 	},
@@ -15,6 +16,7 @@
 		"@types/node": "^16.11.6",
 		"@types/react": "^18.2.42",
 		"@types/react-dom": "^18.2.17",
+		"@types/uuid": "^9.0.8",
 		"@typescript-eslint/eslint-plugin": "5.29.0",
 		"@typescript-eslint/parser": "5.29.0",
 		"builtin-modules": "3.3.0",
@@ -25,6 +27,7 @@
 	},
 	"dependencies": {
 		"esbuild-copy-static-files": "^0.1.0",
-		"esbuild-sass-plugin": "^2.16.0"
+		"esbuild-sass-plugin": "^2.16.0",
+		"uuid": "^9.0.1"
 	}
 }

versions.json

@@ -1,3 +1,10 @@
 {
-	"1.0.0": "0.15.0"
-}
+	"1.0.0": "0.15.0",
+	"1.1.0-beta.1": "0.15.0",
+	"1.1.0-beta.2": "0.15.0",
+	"1.1.0-beta.3": "0.15.0",
+	"1.1.0-beta.4": "0.15.0",
+	"1.1.0-beta.5": "0.15.0",
+	"1.1.0-beta.6": "0.15.0",
+	"1.1.0": "0.15.0"
+}