Merge pull request #63 from philoserf/add-test-vault

refactor: move styles to external CSS file and add test-vault

Author: philoserf

.github/dependabot.yml

@@ -7,4 +7,4 @@ updates:
     - package-ecosystem: "github-actions"
       directory: "/"
       schedule:
-        interval: "daily"
+          interval: "daily"

.gitignore

@@ -1,3 +1,18 @@
 main.js
 main.js.map
 node_modules/
+test-vault/.obsidian/plugins/obsidian-vault-changelog/
+!test-vault/.obsidian/plugins/journals/.hotreload
+test-vault/.obsidian/plugins/*
+!test-vault/.obsidian/plugins/hotreload/main.js
+!test-vault/.obsidian/plugins/hotreload/manifest.json
+test-vault/.obsidian/app.json
+test-vault/.obsidian/appearance.json
+test-vault/.obsidian/core-plugins-migration.json
+test-vault/.obsidian/core-plugins.json
+test-vault/.obsidian/workspace.json
+test-vault/**/*.md
+!test-vault/Change.md
+!test-vault/Changelog.md
+!test-vault/Delete.md
+!test-vault/Home.md

README.md

@@ -92,5 +92,18 @@ Practice a **"Yes, and"** worldview.
 1. Clone this repository `gh repo clone philoserf/obsidian-vault-changelog`.
 2. Install dependencies with `npm install`.
 3. Build the project with `npm run build`.
-4. Copy `manifest.json` and `main.js` into your **Obsidian plugins folder** (`.obsidian/plugins/obsidian-vault-changelog`).
-5. Reload Obsidian and enable the plugin.
+
+### Using the test-vault
+
+The project includes a test-vault for development:
+
+1. Open the test-vault in Obsidian (`File > Open another vault > Open folder as vault` and select the `test-vault` directory)
+2. Build the plugin with hot-reload: `npm run dev`
+3. Changes will automatically be applied to the plugin in the test-vault
+
+### Manual installation
+
+Alternatively, you can manually install the plugin in your own vault:
+
+1. Copy `manifest.json` and `main.js` into your **Obsidian plugins folder** (`.obsidian/plugins/obsidian-vault-changelog`).
+2. Reload Obsidian and enable the plugin.

esbuild.config.mjs

@@ -1,14 +1,32 @@
 import esbuild from "esbuild";
+import { existsSync, mkdirSync } from "fs";
+import { join } from "path";
 
 const production = process.argv[2] === "production";
 
+// Setup output paths
+const outDir = production
+	? "."
+	: "test-vault/.obsidian/plugins/obsidian-vault-changelog";
+// Ensure the directory exists
+if (!existsSync(outDir)) {
+	mkdirSync(outDir, { recursive: true });
+}
+
+// Copy manifest.json and styles.css to output directory in dev mode
+if (!production) {
+	const { copyFileSync } = await import("fs");
+	copyFileSync("manifest.json", join(outDir, "manifest.json"));
+	copyFileSync("styles.css", join(outDir, "styles.css"));
+}
+
 const context = await esbuild.context({
 	entryPoints: ["src/main.ts"],
 	bundle: true,
 	external: ["obsidian"],
 	format: "cjs",
 	target: "es2018",
-	outfile: "main.js",
+	outfile: join(outDir, "main.js"),
 	sourcemap: !production,
 	minify: production,
 });

package-lock.json

@@ -6,39 +6,8 @@ import {
 	DEFAULT_SETTINGS,
 } from "./settings";
 
-// Add styles for the excluded folders list
-// TODO: Move this to a styles.css file
-const EXCLUDED_FOLDERS_STYLES = `
-.excluded-folders-list {
-	margin-bottom: 1em;
-}
-
-.excluded-folder-item {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	background-color: var(--background-secondary);
-	border-radius: 4px;
-	padding: 4px 8px;
-	margin-bottom: 6px;
-}
-
-.excluded-folder-remove {
-	cursor: pointer;
-	border: none;
-	background: transparent;
-	color: var(--text-muted);
-	padding: 0 4px;
-	font-size: 14px;
-}
-
-.excluded-folder-remove:hover {
-	color: var(--text-error);
-}`;
-
 export default class ChangelogPlugin extends Plugin {
 	settings: ChangelogSettings = DEFAULT_SETTINGS;
-	private styleEl: HTMLStyleElement;
 
 	async onload() {
 		await this.loadSettings();
@@ -50,20 +19,28 @@ export default class ChangelogPlugin extends Plugin {
 			callback: () => this.updateChangelog(),
 		});
 
-		// Add styles for the excluded folders feature
-		this.styleEl = document.createElement("style");
-		this.styleEl.textContent = EXCLUDED_FOLDERS_STYLES;
-		document.head.appendChild(this.styleEl);
+		this.loadStyles();
 
 		this.onVaultChange = debounce(this.onVaultChange.bind(this), 200);
 		this.enableAutoUpdate();
 	}
 
 	onunload() {
-		// Remove styles when plugin is disabled
-		if (this.styleEl && this.styleEl.parentNode) {
-			this.styleEl.parentNode.removeChild(this.styleEl);
-		}
+		// Cleanup happens automatically
+	}
+
+	async loadStyles() {
+		const cssFile = await this.app.vault.adapter.read(
+			this.manifest.dir + "/styles.css",
+		);
+		this.registerStyles(cssFile);
+	}
+
+	registerStyles(cssText: string) {
+		const styleEl = document.createElement("style");
+		styleEl.textContent = cssText;
+		this.register(() => styleEl.remove());
+		document.head.appendChild(styleEl);
 	}
 
 	enableAutoUpdate() {

src/main.ts

@@ -0,0 +1,26 @@
+.excluded-folders-list {
+	margin-bottom: 1em;
+}
+
+.excluded-folder-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background-color: var(--background-secondary);
+	border-radius: 4px;
+	padding: 4px 8px;
+	margin-bottom: 6px;
+}
+
+.excluded-folder-remove {
+	cursor: pointer;
+	border: none;
+	background: transparent;
+	color: var(--text-muted);
+	padding: 0 4px;
+	font-size: 14px;
+}
+
+.excluded-folder-remove:hover {
+	color: var(--text-error);
+}

styles.css

@@ -0,0 +1,4 @@
+[
+  "hot-reload",
+  "obsidian-vault-changelog"
+]

test-vault/.obsidian/community-plugins.json

@@ -0,0 +1,10 @@
+{
+  "id": "hot-reload",
+  "name": "Hot Reload",
+  "author": "PJ Eby",
+  "authorUrl": "https://github.com/pjeby",
+  "version": "0.1.10",
+  "minAppVersion": "0.15.9",
+  "description": "Automatically reload in-development plugins when their files are changed",
+  "isDesktopOnly": true
+}

test-vault/.obsidian/plugins/hot-reload/manifest.json

@@ -0,0 +1 @@
+change me