0.0.1

- Initial release

.gitignore

@@ -4,11 +4,10 @@
 
 # npm
 node_modules
-package-lock.json
 
 # build
 main.js
 *.js.map
 .DS_Store
 *build.js
-rollup.config-dev.js
+*dev.js

manifest.json

@@ -1,10 +1,10 @@
 {
-	"id": "obsidian-prominent-starred-files",
-	"name": "Prominent Starred Files",
-	"version": "0.0.1",
-	"minAppVersion": "0.11.0",
-	"description": "Prominently display starred files in Obsidian.md",
-	"author": "Jeremy Valentine",
-	"authorUrl": "",
-	"isDesktopOnly": true
-}
+    "id": "obsidian-prominent-starred-files",
+    "name": "Prominent Starred Notes",
+    "version": "0.0.1",
+    "minAppVersion": "0.12.15",
+    "description": "Prominently display starred notes in Obsidian.md",
+    "author": "Jeremy Valentine",
+    "authorUrl": "",
+    "isDesktopOnly": true
+}

package.json

@@ -1,26 +1,26 @@
 {
-	"name": "obsidian-prominent-starred-files",
-	"version": "0.0.1",
-	"description": "Prominently display starred files in Obsidian.md",
-	"main": "main.js",
-	"scripts": {
-		"dev": "rollup --config rollup.config-dev.js -w",
-		"build": "rollup --config rollup.config.js"
-	},
-	"keywords": [],
-	"author": "Jeremy Valentine",
-	"license": "MIT",
-	"devDependencies": {
-		"@fortawesome/fontawesome-svg-core": "^1.2.32",
-		"@fortawesome/free-solid-svg-icons": "^5.15.1",
-		"@rollup/plugin-commonjs": "^15.1.0",
-		"@rollup/plugin-node-resolve": "^9.0.0",
-		"@rollup/plugin-typescript": "^6.0.0",
-		"@types/node": "^14.14.2",
-		"obsidian": "https://github.com/obsidianmd/obsidian-api/tarball/master",
-		"rollup": "^2.32.1",
-		"rollup-plugin-css-only": "^3.1.0",
-		"tslib": "^2.0.3",
-		"typescript": "^4.0.3"
-	}
+    "name": "obsidian-prominent-starred-files",
+    "version": "0.0.1",
+    "description": "Prominently display starred files in Obsidian.md",
+    "main": "main.js",
+    "scripts": {
+        "dev": "webpack --config webpack.dev.js -w",
+        "build": "webpack"
+    },
+    "keywords": [],
+    "author": "Jeremy Valentine",
+    "license": "MIT",
+    "devDependencies": {
+        "@types/node": "^14.14.2",
+        "copy-webpack-plugin": "^9.0.1",
+        "css-loader": "^6.3.0",
+        "mini-css-extract-plugin": "^2.3.0",
+        "monkey-around": "^2.2.0",
+        "obsidian": "^0.12.16",
+        "ts-loader": "^9.2.6",
+        "tslib": "^2.3.1",
+        "typescript": "^4.0.3",
+        "webpack": "^5.53.0",
+        "webpack-cli": "^4.8.0"
+    }
 }

src/main.css

@@ -0,0 +1,5 @@
+.prominent-star {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+}

src/main.ts

@@ -1,50 +1,190 @@
-// @ts-nocheck
-
-import { Plugin } from "obsidian";
+import { App, Notice, Plugin, setIcon } from "obsidian";
+import { around } from "monkey-around";
 
 import "./main.css";
 
+interface InternalPlugin {
+    enabled: boolean;
+    enable: (b: boolean) => void;
+    disable: (b: boolean) => void;
+}
+interface Starred extends InternalPlugin {
+    instance: {
+        addItem: (file: StarredFile) => void;
+        removeItem: (file: StarredFile) => void;
+        items: StarredFile[];
+    };
+}
+interface FileExplorer extends InternalPlugin {}
+
+interface StarredFile {
+    type: "file";
+    title: string;
+    path: string;
+}
+interface InternalPlugins {
+    starred: Starred;
+    "file-explorer": FileExplorer;
+}
+
+declare module "obsidian" {
+    interface App {
+        internalPlugins: {
+            plugins: InternalPlugins;
+            getPluginById<T extends keyof InternalPlugins>(
+                id: T
+            ): InternalPlugins[T];
+            loadPlugin(...args: any[]): any;
+        };
+    }
+    interface WorkspaceLeaf {
+        containerEl: HTMLElement;
+    }
+}
+
 export default class ProminentStarredFiles extends Plugin {
-    items: any[];
-    async onload(): Promise<void> {
+    handler: () => void;
+    files: Set<StarredFile> = new Set();
+    get enabled() {
+        return this.app.internalPlugins.getPluginById("starred").enabled;
+    }
+    get starred() {
+        return this.app.internalPlugins.getPluginById("starred");
+    }
+    get instance() {
+        if (!this.enabled) return;
+        return this.starred.instance;
+    }
+    get fileExplorers() {
+        return this.app.workspace.getLeavesOfType("file-explorer");
+    }
+    async onload() {
         console.log("Prominent Starred Files plugin loaded");
 
-        this.app.internalPlugins.plugins.starred.instance.items = new Proxy(
-            this.app.internalPlugins.plugins.starred.instance.items,
-            {
-                get: (target, property) => {
-                    if (
-                        property === "IDENTITY" &&
-                        !target.hasOwnProperty("IDENTITY")
-                    ) {
-                        // missing '!'
-                        return target;
+        this.app.workspace.onLayoutReady(() => this.checkAndEnable());
+    }
+    checkAndEnable() {
+        setTimeout(() => {
+            const self = this;
+            if (
+                !this.app.internalPlugins.getPluginById("file-explorer").enabled
+            ) {
+                new Notice(
+                    "The File Explorer core plugin must be enabled to use this plugin."
+                );
+
+                const explorer = around(
+                    this.app.internalPlugins.getPluginById("file-explorer"),
+                    {
+                        enable: function (next) {
+                            return function (b) {
+                                const apply = next.call(this, b);
+                                explorer();
+                                self.checkAndEnable();
+                                return apply;
+                            };
+                        },
+                        disable: function (next) {
+                            return function (b) {
+                                explorer();
+                                self.checkAndEnable();
+                                return next.call(this, b);
+                            };
+                        }
                     }
-                    // property is index in this case
-                    return target[property];
-                },
-                set: (target, property, value, receiver) => {
-                    //target[property] = value;
-                    if (value.hasOwnProperty("type")) {
-                        this.items = [...target, value];
-                        this.refreshStars();
+                );
+                this.register(explorer);
+                return;
+            }
+
+            this.register(
+                around(this.starred, {
+                    enable: function (next) {
+                        return function (b) {
+                            const apply = next.call(this, b);
+                            self.registerHandlers();
+                            for (let item of self.instance?.items ?? []) {
+                                self.applyStar(item);
+                            }
+                            return apply;
+                        };
+                    },
+                    disable: function (next) {
+                        return function (b) {
+                            self.handler();
+                            for (let item of self.instance?.items ?? []) {
+                                self.removeStar(item);
+                            }
+                            return next.call(this, b);
+                        };
                     }
-                    return Reflect.set(target, property, value, receiver);
-                    // you have to return true to accept the changes
-                    //return true;
-                }
+                })
+            );
+            if (!this.enabled) {
+                new Notice(
+                    "The Starred core plugin must be enabled to use this plugin."
+                );
+            } else {
+                this.registerHandlers();
+            }
+        });
+    }
+    registerHandlers() {
+        const self = this;
+        for (let item of this.instance?.items ?? []) {
+            this.applyStar(item);
+        }
+
+        this.handler = around(this.starred.instance, {
+            addItem: function (next) {
+                return function (file) {
+                    self.applyStar(file);
+                    return next.call(this, file);
+                };
+            },
+            removeItem: function (next) {
+                return function (file) {
+                    self.removeStar(file);
+                    return next.call(this, file);
+                };
             }
-        );
+        });
+        this.register(this.handler);
     }
-    refreshStars() {
-        console.log(this.app.workspace.leftSplit);
-        let titleNodes = this.app.workspace.leftSplit.containerEl.querySelectorAll(
-            ".nav-file"
-        );
-        console.log(titleNodes);
+    applyStar(file: StarredFile) {
+        if (!this.fileExplorers.length) return;
+        if (this.files.has(file)) return;
+
+        this.files.add(file);
+
+        for (let explorer of this.fileExplorers) {
+            const element = explorer.containerEl.querySelector(
+                `.nav-file-title[data-path="${file.path}"]`
+            );
+            if (!element) continue;
+
+            setIcon(element.createDiv("prominent-star"), "star-glyph");
+        }
+    }
+    removeStar(file: StarredFile) {
+        if (!this.fileExplorers.length) return;
+
+        this.files.delete(file);
+
+        for (let explorer of this.fileExplorers) {
+            const element = explorer.containerEl.querySelector(
+                `.nav-file-title[data-path="${file.path}"]`
+            );
+            if (!element) continue;
+
+            const stars = element.querySelectorAll(".prominent-star");
+            if (stars.length) stars.forEach((star) => star.detach());
+        }
     }
     onunload() {
         console.log("Prominent Starred Files plugin unloaded");
-        this.app.internalPlugins.plugins.starred.instance.items = this.app.internalPlugins.plugins.starred.instance.items.IDENTITY;
+        for (let file of this.instance?.items ?? []) {
+            this.removeStar(file);
+        }
     }
 }

webpack.config.js

@@ -0,0 +1,67 @@
+const path = require("path");
+const CopyPlugin = require("copy-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const webpack = require("webpack");
+
+const isDevMode = process.env.NODE_ENV === "development";
+
+module.exports = {
+    entry: "./src/main.ts",
+    output: {
+        path: path.resolve(__dirname, "."),
+        filename: "main.js",
+        libraryTarget: "commonjs"
+    },
+    target: "node",
+    mode: isDevMode ? "development" : "production",
+    ...(isDevMode ? { devtool: "eval" } : {}),
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                loader: "ts-loader",
+                options: {
+                    transpileOnly: true
+                }
+            },
+            {
+                test: /\.css?$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: "css-loader",
+                        options: {
+                            url: false
+                        }
+                    }
+                ]
+            },
+            {
+                test: /\.(svg|njk|html)$/,
+                type: "asset/inline"
+            }
+        ]
+    },
+    plugins: [
+        new CopyPlugin({
+            patterns: [{ from: "./manifest.json", to: "." }]
+        }),
+        new webpack.optimize.LimitChunkCountPlugin({
+            maxChunks: 1
+        }),
+        new MiniCssExtractPlugin({
+            filename: "styles.css"
+        })
+    ],
+    resolve: {
+        extensions: [".ts", ".tsx", ".js"],
+        mainFields: ["browser", "module", "main"],
+        alias: {
+            src: path.resolve(__dirname, "src")
+        }
+    },
+    externals: {
+        electron: "commonjs2 electron",
+        obsidian: "commonjs2 obsidian"
+    }
+};