bb-relay 0.0.31 → 0.0.32

package/dist/constant.d.mts

@@ -1,5 +1,4 @@
 export { P as PROJECT_CATEGORY } from './PROJECT_CATEGORY-BivLHtB6.mjs';
-export { C as COLOR_LIST } from './COLOR_LIST-BfSSBFUY.mjs';
 
 declare const SENTINEL_FILE = ".release.commit";
 

package/dist/constant.d.ts

@@ -1,5 +1,4 @@
 export { P as PROJECT_CATEGORY } from './PROJECT_CATEGORY-BivLHtB6.js';
-export { C as COLOR_LIST } from './COLOR_LIST-BfSSBFUY.js';
 
 declare const SENTINEL_FILE = ".release.commit";
 

package/dist/constant.js

@@ -45,35 +45,9 @@ var PROJECT_CATEGORY = [
 ];
 var PROJECT_CATEGORY_default = PROJECT_CATEGORY;
 
-// src/constants/COLOR_LIST.ts
-var COLOR_LIST = [
-  "red",
-  "slate",
-  "stone",
-  "zinc",
-  "gray",
-  "orange",
-  "amber",
-  "yellow",
-  "lime",
-  "green",
-  "emerald",
-  "teal",
-  "cyan",
-  "sky",
-  "blue",
-  "indigo",
-  "violet",
-  "purple",
-  "fuchsia",
-  "pink",
-  "rose"
-];
-
-
 
 
 
 
 
-exports.COLOR_LIST = COLOR_LIST; exports.DATA_ALIAS = DATA_ALIAS; exports.PLUGIN_URL = PLUGIN_URL_default; exports.PROJECT_CATEGORY = PROJECT_CATEGORY_default; exports.SENTINEL_FILE = SENTINEL_FILE_default; exports.WEBSITE = WEBSITE_default;
+exports.DATA_ALIAS = DATA_ALIAS; exports.PLUGIN_URL = PLUGIN_URL_default; exports.PROJECT_CATEGORY = PROJECT_CATEGORY_default; exports.SENTINEL_FILE = SENTINEL_FILE_default; exports.WEBSITE = WEBSITE_default;

package/dist/constant.mjs

@@ -44,33 +44,7 @@ var PROJECT_CATEGORY = [
   "Other"
 ];
 var PROJECT_CATEGORY_default = PROJECT_CATEGORY;
-
-// src/constants/COLOR_LIST.ts
-var COLOR_LIST = [
-  "red",
-  "slate",
-  "stone",
-  "zinc",
-  "gray",
-  "orange",
-  "amber",
-  "yellow",
-  "lime",
-  "green",
-  "emerald",
-  "teal",
-  "cyan",
-  "sky",
-  "blue",
-  "indigo",
-  "violet",
-  "purple",
-  "fuchsia",
-  "pink",
-  "rose"
-];
 export {
-  COLOR_LIST,
   DATA_ALIAS,
   PLUGIN_URL_default as PLUGIN_URL,
   PROJECT_CATEGORY_default as PROJECT_CATEGORY,

package/dist/editor.d.mts

@@ -2,7 +2,6 @@ export { C as Commit } from './Commit-PdsjrKSG.mjs';
 export { a as FileStat, F as FolderContent, b as FolderStat } from './FolderStat-Bhmwwc0t.mjs';
 export { F as FileContent } from './FileContent-BWulmcoi.mjs';
 import { L as Language, a as Locale } from './Locale-DvFwr_9k.mjs';
-import { a as Color } from './COLOR_LIST-BfSSBFUY.mjs';
 export { R as Result } from './Result-BLbZLEgX.mjs';
 
 type CopyArg = {
@@ -44,7 +43,6 @@ type Shortcut = {
     keys: string[];
 };
 type Settings = {
-    theme: "light" | "dark" | "system";
     language?: Locale;
     sidebarWidth: number;
     baseAppFont: number;
@@ -53,7 +51,7 @@ type Settings = {
     showAllFile: boolean;
     trashBehaviour: "permanent" | "trash";
     shortcuts: Shortcut[];
-    color: Color;
+    theme: string;
     /**
      * { [fileExtension: string]: pluginId  }
      */
@@ -73,4 +71,4 @@ interface TutorialHeader {
 
 type WatchFSEvent = "updated" | "deleted" | "updated" | "add";
 
-export { Color, type CopyArg, type GitFileStatus, type IconArg, type MenuContent, type Nav, type Route, type Settings, type Shortcut, type TutorialHeader, type WatchFSEvent };
+export type { CopyArg, GitFileStatus, IconArg, MenuContent, Nav, Route, Settings, Shortcut, TutorialHeader, WatchFSEvent };

package/dist/editor.d.ts

@@ -2,7 +2,6 @@ export { C as Commit } from './Commit-PdsjrKSG.js';
 export { a as FileStat, F as FolderContent, b as FolderStat } from './FolderStat-Bhmwwc0t.js';
 export { F as FileContent } from './FileContent-BWulmcoi.js';
 import { L as Language, a as Locale } from './Locale-DvFwr_9k.js';
-import { a as Color } from './COLOR_LIST-BfSSBFUY.js';
 export { R as Result } from './Result-BLbZLEgX.js';
 
 type CopyArg = {
@@ -44,7 +43,6 @@ type Shortcut = {
     keys: string[];
 };
 type Settings = {
-    theme: "light" | "dark" | "system";
     language?: Locale;
     sidebarWidth: number;
     baseAppFont: number;
@@ -53,7 +51,7 @@ type Settings = {
     showAllFile: boolean;
     trashBehaviour: "permanent" | "trash";
     shortcuts: Shortcut[];
-    color: Color;
+    theme: string;
     /**
      * { [fileExtension: string]: pluginId  }
      */
@@ -73,4 +71,4 @@ interface TutorialHeader {
 
 type WatchFSEvent = "updated" | "deleted" | "updated" | "add";
 
-export { Color, type CopyArg, type GitFileStatus, type IconArg, type MenuContent, type Nav, type Route, type Settings, type Shortcut, type TutorialHeader, type WatchFSEvent };
+export type { CopyArg, GitFileStatus, IconArg, MenuContent, Nav, Route, Settings, Shortcut, TutorialHeader, WatchFSEvent };

package/dist/index.d.mts

@@ -43,6 +43,10 @@ type Manifest = {
     author?: string;
     homepage?: string;
     repository?: string;
+    theme?: {
+        name: string;
+        path: string;
+    };
     [key: string]: unknown;
 };
 

package/dist/index.d.ts

@@ -43,6 +43,10 @@ type Manifest = {
     author?: string;
     homepage?: string;
     repository?: string;
+    theme?: {
+        name: string;
+        path: string;
+    };
     [key: string]: unknown;
 };
 

package/dist/index.js

@@ -115,6 +115,11 @@ var validateManifest = (manifestContent) => {
       errors.push("Manifest entry must be a js file");
     } else fileChecks.push(content.entry);
   }
+  if (content.theme) {
+    if (!content.theme.name) errors.push("No name for theme");
+    if (!content.theme.path) errors.push("No css file path provided");
+    else fileChecks.push(content.theme.path);
+  }
   return {
     errors,
     fileChecks,

package/dist/index.mjs

@@ -115,6 +115,11 @@ var validateManifest = (manifestContent) => {
       errors.push("Manifest entry must be a js file");
     } else fileChecks.push(content.entry);
   }
+  if (content.theme) {
+    if (!content.theme.name) errors.push("No name for theme");
+    if (!content.theme.path) errors.push("No css file path provided");
+    else fileChecks.push(content.theme.path);
+  }
   return {
     errors,
     fileChecks,

package/dist/plugin.d.mts

@@ -17,7 +17,8 @@ type BaseInstruction<T extends InstructionTypes> = {
         click?: string;
         change?: string;
     };
-    children?: ElementInstruction | ElementInstruction[] | string;
+    children?: ElementInstruction | (ElementInstruction | null)[] | string | null;
+    scrollIntoView?: boolean;
 };
 
 interface ButtonInstruction extends BaseInstruction<"button"> {
@@ -50,7 +51,6 @@ interface InputInstruction extends BaseInstruction<"input"> {
 }
 
 interface ViewInstruction extends BaseInstruction<"view"> {
-    children: ElementInstruction[];
 }
 
 interface MenuInstruction extends BaseInstruction<"menu"> {
@@ -150,25 +150,12 @@ type PluginElement = {
     container: ContainerElement;
 };
 
-type StatusElement = {
-    type: "icon";
-    icon: IconName;
-} | {
-    type: "text";
-    text: string;
-};
-type RenderStatusType = {
-    element: StatusElement[];
-    message: string;
-    onClick: () => void;
-};
-
 type EventHandler<T = unknown> = (payload?: T) => unknown | Promise<unknown>;
 
 type Store<T extends Record<string, unknown>> = {
     get(): T;
     set(next: SetState<T>): void;
-    subscribe(listener: (state: T) => void): () => void;
+    subscribe(listener: (state: T, prevState: T) => void): () => void;
 };
 type EditorAPI = {
     /**
@@ -185,7 +172,7 @@ type EditorAPI = {
         getFileStat: (path: string) => Promise<Result<FileStat>>;
         deleteFile: (path: string) => Promise<Result>;
         copyFile: (filePath: string, destination: string) => Promise<Result<string>>;
-        listFiles: (folder: string, glob?: string) => Promise<Result<string[]>>;
+        listFiles: (glob?: string) => Promise<Result<string[]>>;
     };
 };
 type SetState<T extends Record<string, unknown>> = Partial<T> | ((arg: T) => T);
@@ -202,6 +189,7 @@ declare abstract class Plugin<T extends Record<string, unknown>> {
     private subscriptions;
     private subscribe;
     private sendMessage;
+    private eventIds;
     private index;
     /** App api, the ones available will be based on the permissions in the manifest*/
     protected editor: EditorAPI;
@@ -278,12 +266,9 @@ declare abstract class Plugin<T extends Record<string, unknown>> {
     protected on(event: "file-created", callback: (filePath: string) => void): void;
     protected on(event: "file-changed", callback: (filePath: string) => void): void;
     protected on(event: "file-deleted", callback: (filePath: string) => void): void;
-    abstract renderStatusBar(): RenderStatusType | null;
-    private registerStatusBar;
-    private onStatusLoad;
     protected setState(param: SetState<T>): void;
     protected getState(): T;
-    protected notify(message: string): void;
+    selectFile(filePath: string): void;
 }
 
 type Message = {
@@ -294,4 +279,17 @@ type Message = {
 
 declare const getPluginChannel: (event: string, pluginId: string) => string;
 
+type StatusElement = {
+    type: "icon";
+    icon: IconName;
+} | {
+    type: "text";
+    text: string;
+};
+type RenderStatusType = {
+    element: StatusElement[];
+    message: string;
+    onClick: () => void;
+};
+
 export { type EditorAPI, type ElementInstruction, type InputInstruction, type Message, type PluginElement, type RenderStatusType, type SetState, type Store, type TextVariant, type TextareaInstruction, Plugin as default, getPluginChannel };

package/dist/plugin.d.ts

@@ -17,7 +17,8 @@ type BaseInstruction<T extends InstructionTypes> = {
         click?: string;
         change?: string;
     };
-    children?: ElementInstruction | ElementInstruction[] | string;
+    children?: ElementInstruction | (ElementInstruction | null)[] | string | null;
+    scrollIntoView?: boolean;
 };
 
 interface ButtonInstruction extends BaseInstruction<"button"> {
@@ -50,7 +51,6 @@ interface InputInstruction extends BaseInstruction<"input"> {
 }
 
 interface ViewInstruction extends BaseInstruction<"view"> {
-    children: ElementInstruction[];
 }
 
 interface MenuInstruction extends BaseInstruction<"menu"> {
@@ -150,25 +150,12 @@ type PluginElement = {
     container: ContainerElement;
 };
 
-type StatusElement = {
-    type: "icon";
-    icon: IconName;
-} | {
-    type: "text";
-    text: string;
-};
-type RenderStatusType = {
-    element: StatusElement[];
-    message: string;
-    onClick: () => void;
-};
-
 type EventHandler<T = unknown> = (payload?: T) => unknown | Promise<unknown>;
 
 type Store<T extends Record<string, unknown>> = {
     get(): T;
     set(next: SetState<T>): void;
-    subscribe(listener: (state: T) => void): () => void;
+    subscribe(listener: (state: T, prevState: T) => void): () => void;
 };
 type EditorAPI = {
     /**
@@ -185,7 +172,7 @@ type EditorAPI = {
         getFileStat: (path: string) => Promise<Result<FileStat>>;
         deleteFile: (path: string) => Promise<Result>;
         copyFile: (filePath: string, destination: string) => Promise<Result<string>>;
-        listFiles: (folder: string, glob?: string) => Promise<Result<string[]>>;
+        listFiles: (glob?: string) => Promise<Result<string[]>>;
     };
 };
 type SetState<T extends Record<string, unknown>> = Partial<T> | ((arg: T) => T);
@@ -202,6 +189,7 @@ declare abstract class Plugin<T extends Record<string, unknown>> {
     private subscriptions;
     private subscribe;
     private sendMessage;
+    private eventIds;
     private index;
     /** App api, the ones available will be based on the permissions in the manifest*/
     protected editor: EditorAPI;
@@ -278,12 +266,9 @@ declare abstract class Plugin<T extends Record<string, unknown>> {
     protected on(event: "file-created", callback: (filePath: string) => void): void;
     protected on(event: "file-changed", callback: (filePath: string) => void): void;
     protected on(event: "file-deleted", callback: (filePath: string) => void): void;
-    abstract renderStatusBar(): RenderStatusType | null;
-    private registerStatusBar;
-    private onStatusLoad;
     protected setState(param: SetState<T>): void;
     protected getState(): T;
-    protected notify(message: string): void;
+    selectFile(filePath: string): void;
 }
 
 type Message = {
@@ -294,4 +279,17 @@ type Message = {
 
 declare const getPluginChannel: (event: string, pluginId: string) => string;
 
+type StatusElement = {
+    type: "icon";
+    icon: IconName;
+} | {
+    type: "text";
+    text: string;
+};
+type RenderStatusType = {
+    element: StatusElement[];
+    message: string;
+    onClick: () => void;
+};
+
 export { type EditorAPI, type ElementInstruction, type InputInstruction, type Message, type PluginElement, type RenderStatusType, type SetState, type Store, type TextVariant, type TextareaInstruction, Plugin as default, getPluginChannel };

package/dist/plugin.js

@@ -1,9 +1,10 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }// src/lib/plugin/getPluginChannel.ts
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }// src/lib/plugin/getPluginChannel.ts
 var getPluginChannel = (event, pluginId) => {
   return `plugin:${pluginId}:${event}`;
 };
 
 // src/lib/plugin/index.ts
+var _fastdeepequal = require('fast-deep-equal'); var _fastdeepequal2 = _interopRequireDefault(_fastdeepequal);
 var Plugin = class {
   /** Constructor */
   constructor({
@@ -19,7 +20,8 @@ var Plugin = class {
     this.registeredHandlers = /* @__PURE__ */ new Set();
     /** Listeners: ipc.on() */
     this.subscriptions = /* @__PURE__ */ new Map();
-    this.index = {};
+    this.eventIds = [];
+    this.index = -1;
     /** App api, the ones available will be based on the permissions in the manifest*/
     this.editor = {};
     this.element = {
@@ -45,29 +47,40 @@ var Plugin = class {
     this.editor = editor;
     this.store = store;
     const value = store.get();
-    store.set({ ...this.init(), ...value });
+    this.setState({ ...this.init(), ...value });
+    this.store.subscribe((curr, prev) => {
+      const isEqual = _fastdeepequal2.default.call(void 0, curr, prev);
+      if (isEqual) return;
+      this.index = -1;
+      this.eventIds.forEach((event) => this.off(event));
+      this.eventIds = [];
+      const sidebar = this.renderSidebar();
+      if (sidebar) this.render("sidebar", sidebar);
+    });
     this.onSidebarLoad();
-    this.onStatusLoad();
   }
   // -----------------------------
   // Element Factory
   // -----------------------------
   makeElement(construct, props) {
     const { onClick, onChange, key, ...rest } = props;
-    const elementIndex = this.index[construct] || 0;
-    const id = _nullishCoalesce(key, () => ( construct + elementIndex));
-    this.index[construct] = elementIndex + 1;
-    if (onClick) this.registerSubscription(id, onClick);
+    const id = _nullishCoalesce(key, () => ( construct + this.index));
+    this.index += 1;
+    const eventId = crypto.randomUUID();
+    const clickId = `click:${eventId}`;
+    const changeId = `change:${eventId}`;
+    this.eventIds.push(...[clickId, changeId]);
+    if (onClick) this.registerSubscription(clickId, onClick);
     if (onChange) {
-      this.registerSubscription(id, (v) => onChange(v));
+      this.registerSubscription(changeId, (v) => onChange(v));
     }
     return {
       ...rest,
       key: id,
       construct,
       action: {
-        click: onClick ? this.getPluginChannel(id) : void 0,
-        change: onChange ? this.getPluginChannel(id) : void 0
+        click: onClick ? this.getPluginChannel(clickId) : void 0,
+        change: onChange ? this.getPluginChannel(changeId) : void 0
       }
     };
   }
@@ -75,7 +88,7 @@ var Plugin = class {
     this.sendMessage({ type: message, arg });
   }
   onSidebarLoad() {
-    this.index = {};
+    this.index = -1;
     this.registerHandler("sidebar-load", () => {
       return this.renderSidebar();
     });
@@ -150,33 +163,33 @@ var Plugin = class {
   on(event, callback) {
     this.registerSubscription(event, callback);
   }
-  registerStatusBar() {
-    const arg = this.renderStatusBar();
-    if (!arg) return;
-    const { onClick, ...rest } = arg;
-    if (arg) {
-      this.sendMessage({
-        type: `status`,
-        arg: rest
-      });
-      this.off("status-click");
-      this.registerSubscription("status-click", onClick);
-    }
-  }
-  onStatusLoad() {
-    this.registerHandler("status-load", () => {
-      return this.renderStatusBar();
-    });
-  }
+  // -----------------------------
+  // Status Bar
+  // -----------------------------
+  // abstract renderStatusBar(): RenderStatusType | null;
+  // private registerStatusBar(): void {
+  //   const arg = this.renderStatusBar();
+  //   if (!arg) return;
+  //   const { onClick, ...rest } = arg;
+  //   if (arg) {
+  //     this.sendMessage({
+  //       type: `status`,
+  //       arg: rest,
+  //     });
+  //     this.off("status-click");
+  //     this.registerSubscription("status-click", onClick);
+  //   }
+  // }
+  // private onStatusLoad(): void {
+  //   this.registerHandler("status-load", () => {
+  //     return this.renderStatusBar();
+  //   });
+  // }
   // -----------------------------
   // State
   // -----------------------------
   setState(param) {
-    this.index = {};
     this.store.set(param);
-    const sidebar = this.renderSidebar();
-    if (sidebar) this.render("sidebar", sidebar);
-    this.registerStatusBar();
   }
   getState() {
     return this.store.get();
@@ -184,10 +197,21 @@ var Plugin = class {
   // -----------------------------
   // Logging
   // -----------------------------
-  notify(message) {
+  // protected notify(message: string): void {
+  //   this.sendMessage({
+  //     type: "notify",
+  //     arg: message,
+  //   });
+  // }
+  // -----------------------------
+  // Utils
+  // -----------------------------
+  selectFile(filePath) {
     this.sendMessage({
-      type: "notify",
-      arg: message
+      type: "select-file",
+      arg: {
+        filePath
+      }
     });
   }
 };

package/dist/plugin.mjs

@@ -4,6 +4,7 @@ var getPluginChannel = (event, pluginId) => {
 };
 
 // src/lib/plugin/index.ts
+import equal from "fast-deep-equal";
 var Plugin = class {
   /** Constructor */
   constructor({
@@ -19,7 +20,8 @@ var Plugin = class {
     this.registeredHandlers = /* @__PURE__ */ new Set();
     /** Listeners: ipc.on() */
     this.subscriptions = /* @__PURE__ */ new Map();
-    this.index = {};
+    this.eventIds = [];
+    this.index = -1;
     /** App api, the ones available will be based on the permissions in the manifest*/
     this.editor = {};
     this.element = {
@@ -45,29 +47,40 @@ var Plugin = class {
     this.editor = editor;
     this.store = store;
     const value = store.get();
-    store.set({ ...this.init(), ...value });
+    this.setState({ ...this.init(), ...value });
+    this.store.subscribe((curr, prev) => {
+      const isEqual = equal(curr, prev);
+      if (isEqual) return;
+      this.index = -1;
+      this.eventIds.forEach((event) => this.off(event));
+      this.eventIds = [];
+      const sidebar = this.renderSidebar();
+      if (sidebar) this.render("sidebar", sidebar);
+    });
     this.onSidebarLoad();
-    this.onStatusLoad();
   }
   // -----------------------------
   // Element Factory
   // -----------------------------
   makeElement(construct, props) {
     const { onClick, onChange, key, ...rest } = props;
-    const elementIndex = this.index[construct] || 0;
-    const id = key ?? construct + elementIndex;
-    this.index[construct] = elementIndex + 1;
-    if (onClick) this.registerSubscription(id, onClick);
+    const id = key ?? construct + this.index;
+    this.index += 1;
+    const eventId = crypto.randomUUID();
+    const clickId = `click:${eventId}`;
+    const changeId = `change:${eventId}`;
+    this.eventIds.push(...[clickId, changeId]);
+    if (onClick) this.registerSubscription(clickId, onClick);
     if (onChange) {
-      this.registerSubscription(id, (v) => onChange(v));
+      this.registerSubscription(changeId, (v) => onChange(v));
     }
     return {
       ...rest,
       key: id,
       construct,
       action: {
-        click: onClick ? this.getPluginChannel(id) : void 0,
-        change: onChange ? this.getPluginChannel(id) : void 0
+        click: onClick ? this.getPluginChannel(clickId) : void 0,
+        change: onChange ? this.getPluginChannel(changeId) : void 0
       }
     };
   }
@@ -75,7 +88,7 @@ var Plugin = class {
     this.sendMessage({ type: message, arg });
   }
   onSidebarLoad() {
-    this.index = {};
+    this.index = -1;
     this.registerHandler("sidebar-load", () => {
       return this.renderSidebar();
     });
@@ -150,33 +163,33 @@ var Plugin = class {
   on(event, callback) {
     this.registerSubscription(event, callback);
   }
-  registerStatusBar() {
-    const arg = this.renderStatusBar();
-    if (!arg) return;
-    const { onClick, ...rest } = arg;
-    if (arg) {
-      this.sendMessage({
-        type: `status`,
-        arg: rest
-      });
-      this.off("status-click");
-      this.registerSubscription("status-click", onClick);
-    }
-  }
-  onStatusLoad() {
-    this.registerHandler("status-load", () => {
-      return this.renderStatusBar();
-    });
-  }
+  // -----------------------------
+  // Status Bar
+  // -----------------------------
+  // abstract renderStatusBar(): RenderStatusType | null;
+  // private registerStatusBar(): void {
+  //   const arg = this.renderStatusBar();
+  //   if (!arg) return;
+  //   const { onClick, ...rest } = arg;
+  //   if (arg) {
+  //     this.sendMessage({
+  //       type: `status`,
+  //       arg: rest,
+  //     });
+  //     this.off("status-click");
+  //     this.registerSubscription("status-click", onClick);
+  //   }
+  // }
+  // private onStatusLoad(): void {
+  //   this.registerHandler("status-load", () => {
+  //     return this.renderStatusBar();
+  //   });
+  // }
   // -----------------------------
   // State
   // -----------------------------
   setState(param) {
-    this.index = {};
     this.store.set(param);
-    const sidebar = this.renderSidebar();
-    if (sidebar) this.render("sidebar", sidebar);
-    this.registerStatusBar();
   }
   getState() {
     return this.store.get();
@@ -184,10 +197,21 @@ var Plugin = class {
   // -----------------------------
   // Logging
   // -----------------------------
-  notify(message) {
+  // protected notify(message: string): void {
+  //   this.sendMessage({
+  //     type: "notify",
+  //     arg: message,
+  //   });
+  // }
+  // -----------------------------
+  // Utils
+  // -----------------------------
+  selectFile(filePath) {
     this.sendMessage({
-      type: "notify",
-      arg: message
+      type: "select-file",
+      arg: {
+        filePath
+      }
     });
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bb-relay",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "For managing bb-editor extension",
   "license": "ISC",
   "author": "Ade Adeola",
@@ -48,6 +48,7 @@
     "typescript-eslint": "^8.44.1"
   },
   "dependencies": {
+    "fast-deep-equal": "^3.1.3",
     "lucide-react": "^0.563.0"
   }
 }

package/src/constant.ts

@@ -3,13 +3,5 @@ import WEBSITE from "./constants/WEBSITE";
 import { DATA_ALIAS } from "./constants/DATA_ALIAS";
 import PLUGIN_URL from "./constants/PLUGIN_URL";
 import PROJECT_CATEGORY from "./constants/PROJECT_CATEGORY";
-import { COLOR_LIST } from "./constants/COLOR_LIST";
 
-export {
-  SENTINEL_FILE,
-  WEBSITE,
-  DATA_ALIAS,
-  PLUGIN_URL,
-  PROJECT_CATEGORY,
-  COLOR_LIST,
-};
+export { SENTINEL_FILE, WEBSITE, DATA_ALIAS, PLUGIN_URL, PROJECT_CATEGORY };

package/src/editor.ts

@@ -13,7 +13,6 @@ import { WatchFSEvent } from "./types/editor/WatchFSEvent";
 import FileStat from "./types/editor/FileStat";
 import Result from "./types/editor/Result";
 import { FolderStat } from "./types/editor/FolderStat";
-import Color from "./constants/COLOR_LIST";
 
 export type {
   Commit,
@@ -32,5 +31,4 @@ export type {
   FolderStat,
   Result,
   Shortcut,
-  Color,
 };

package/src/lib/plugin/ElementInstruction/BaseInstruction.ts

@@ -24,5 +24,6 @@ export type BaseInstruction<T extends InstructionTypes> = {
     click?: string;
     change?: string;
   };
-  children?: ElementInstruction | ElementInstruction[] | string;
+  children?: ElementInstruction | (ElementInstruction | null)[] | string | null;
+  scrollIntoView?: boolean
 };

package/src/lib/plugin/ElementInstruction/ViewInstruction.ts

@@ -1,6 +1,3 @@
-import { ElementInstruction } from ".";
 import { BaseInstruction } from "./BaseInstruction";
 
-export interface ViewInstruction extends BaseInstruction<"view"> {
-  children: ElementInstruction[];
-}
+export interface ViewInstruction extends BaseInstruction<"view"> {}

package/src/lib/plugin/index.ts

@@ -1,6 +1,6 @@
 import { ElementInstruction } from "./ElementInstruction";
 import { PluginElement } from "./PluginElement";
-import { RenderStatusType } from "./RenderStatusType";
+// import { RenderStatusType } from "./RenderStatusType";
 import { EventHandler } from "./EventHandler";
 import { getPluginChannel } from "./getPluginChannel";
 import {
@@ -11,11 +11,12 @@ import {
   Result,
 } from "@/editor";
 import { Project } from "@/database";
+import equal from "fast-deep-equal";
 
 export type Store<T extends Record<string, unknown>> = {
   get(): T;
   set(next: SetState<T>): void;
-  subscribe(listener: (state: T) => void): () => void;
+  subscribe(listener: (state: T, prevState: T) => void): () => void;
 };
 
 // TODO: flesh it out properly
@@ -39,7 +40,7 @@ export type EditorAPI = {
       filePath: string,
       destination: string,
     ) => Promise<Result<string>>;
-    listFiles: (folder: string, glob?: string) => Promise<Result<string[]>>;
+    listFiles: (glob?: string) => Promise<Result<string[]>>;
   };
   // project: getProjectInfo, workingDirectory
   // dialog: selectFolder, selectFile
@@ -75,8 +76,9 @@ export abstract class Plugin<T extends Record<string, unknown>> {
   private subscriptions = new Map<string, () => void>();
   private subscribe: (channel: string, handler: EventHandler) => () => void;
   private sendMessage: (arg: { type: string; arg: unknown }) => void;
+  private eventIds: string[] = [];
 
-  private index: { [key: string]: number } = {};
+  private index: number = -1;
 
   /** App api, the ones available will be based on the permissions in the manifest*/
   protected editor: EditorAPI = {};
@@ -112,10 +114,19 @@ export abstract class Plugin<T extends Record<string, unknown>> {
 
     this.store = store;
     const value = store.get();
-    store.set({ ...this.init(), ...value });
+    this.setState({ ...this.init(), ...value });
+
+    this.store.subscribe((curr, prev) => {
+      const isEqual = equal(curr, prev);
+      if (isEqual) return;
+      this.index = -1;
+      this.eventIds.forEach((event) => this.off(event));
+      this.eventIds = [];
+      const sidebar = this.renderSidebar();
+      if (sidebar) this.render("sidebar", sidebar);
+    });
 
     this.onSidebarLoad();
-    this.onStatusLoad();
   }
 
   // -----------------------------
@@ -124,13 +135,16 @@ export abstract class Plugin<T extends Record<string, unknown>> {
 
   private makeElement(construct: ElementInstruction["construct"], props: any) {
     const { onClick, onChange, key, ...rest } = props;
-    const elementIndex = this.index[construct] || 0;
-    const id = key ?? construct + elementIndex;
-    this.index[construct] = elementIndex + 1;
-
-    if (onClick) this.registerSubscription(id, onClick);
+    const id = key ?? construct + this.index;
+    this.index += 1;
+
+    const eventId = crypto.randomUUID();
+    const clickId = `click:${eventId}`;
+    const changeId = `change:${eventId}`;
+    this.eventIds.push(...[clickId, changeId]);
+    if (onClick) this.registerSubscription(clickId, onClick);
     if (onChange) {
-      this.registerSubscription(id, (v) => onChange(v));
+      this.registerSubscription(changeId, (v) => onChange(v));
     }
 
     return {
@@ -138,8 +152,8 @@ export abstract class Plugin<T extends Record<string, unknown>> {
       key: id,
       construct,
       action: {
-        click: onClick ? this.getPluginChannel(id) : undefined,
-        change: onChange ? this.getPluginChannel(id) : undefined,
+        click: onClick ? this.getPluginChannel(clickId) : undefined,
+        change: onChange ? this.getPluginChannel(changeId) : undefined,
       },
     };
   }
@@ -201,7 +215,7 @@ export abstract class Plugin<T extends Record<string, unknown>> {
   abstract renderSidebar(): ElementInstruction | null;
 
   private onSidebarLoad(): void {
-    this.index = {};
+    this.index = -1;
     this.registerHandler("sidebar-load", () => {
       return this.renderSidebar();
     });
@@ -325,40 +339,34 @@ export abstract class Plugin<T extends Record<string, unknown>> {
   // Status Bar
   // -----------------------------
 
-  abstract renderStatusBar(): RenderStatusType | null;
-
-  private registerStatusBar(): void {
-    const arg = this.renderStatusBar();
-    if (!arg) return;
-    const { onClick, ...rest } = arg;
-    if (arg) {
-      this.sendMessage({
-        type: `status`,
-        arg: rest,
-      });
-      this.off("status-click");
-      this.registerSubscription("status-click", onClick);
-    }
-  }
-
-  private onStatusLoad(): void {
-    this.registerHandler("status-load", () => {
-      return this.renderStatusBar();
-    });
-  }
+  // abstract renderStatusBar(): RenderStatusType | null;
+
+  // private registerStatusBar(): void {
+  //   const arg = this.renderStatusBar();
+  //   if (!arg) return;
+  //   const { onClick, ...rest } = arg;
+  //   if (arg) {
+  //     this.sendMessage({
+  //       type: `status`,
+  //       arg: rest,
+  //     });
+  //     this.off("status-click");
+  //     this.registerSubscription("status-click", onClick);
+  //   }
+  // }
+
+  // private onStatusLoad(): void {
+  //   this.registerHandler("status-load", () => {
+  //     return this.renderStatusBar();
+  //   });
+  // }
 
   // -----------------------------
   // State
   // -----------------------------
 
   protected setState(param: SetState<T>): void {
-    this.index = {};
     this.store.set(param);
-
-    const sidebar = this.renderSidebar();
-    if (sidebar) this.render("sidebar", sidebar);
-
-    this.registerStatusBar();
   }
 
   protected getState(): T {
@@ -369,10 +377,22 @@ export abstract class Plugin<T extends Record<string, unknown>> {
   // Logging
   // -----------------------------
 
-  protected notify(message: string): void {
+  // protected notify(message: string): void {
+  //   this.sendMessage({
+  //     type: "notify",
+  //     arg: message,
+  //   });
+  // }
+
+  // -----------------------------
+  // Utils
+  // -----------------------------
+  selectFile(filePath: string) {
     this.sendMessage({
-      type: "notify",
-      arg: message,
+      type: "select-file",
+      arg: {
+        filePath,
+      },
     });
   }
 }

package/src/lib/validate-manifest/index.ts

@@ -65,6 +65,11 @@ const validateManifest = (manifestContent: string) => {
     } else fileChecks.push(content.entry);
   }
 
+  if (content.theme) {
+    if (!content.theme.name) errors.push("No name for theme");
+    if (!content.theme.path) errors.push("No css file path provided");
+    else fileChecks.push(content.theme.path);
+  }
   return {
     errors,
     fileChecks,

package/src/types/editor/Manifest.ts

@@ -31,5 +31,9 @@ export type Manifest = {
   author?: string;
   homepage?: string;
   repository?: string;
+  theme?: {
+    name: string;
+    path: string;
+  };
   [key: string]: unknown;
 };

package/src/types/editor/Settings.ts

@@ -1,4 +1,3 @@
-import Color from "@/constants/COLOR_LIST";
 import Language from "./Language";
 import Locale from "./Locale";
 
@@ -28,7 +27,6 @@ export type Shortcut = {
 };
 
 export type Settings = {
-  theme: "light" | "dark" | "system";
   language?: Locale;
   sidebarWidth: number;
   baseAppFont: number;
@@ -37,7 +35,7 @@ export type Settings = {
   showAllFile: boolean;
   trashBehaviour: "permanent" | "trash";
   shortcuts: Shortcut[];
-  color: Color;
+  theme: string;
   /**
    * { [fileExtension: string]: pluginId  }
    */

package/dist/COLOR_LIST-BfSSBFUY.d.mts

@@ -1,4 +0,0 @@
-declare const COLOR_LIST: readonly ["red", "slate", "stone", "zinc", "gray", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
-type Color = (typeof COLOR_LIST)[number];
-
-export { COLOR_LIST as C, type Color as a };

package/dist/COLOR_LIST-BfSSBFUY.d.ts

@@ -1,4 +0,0 @@
-declare const COLOR_LIST: readonly ["red", "slate", "stone", "zinc", "gray", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"];
-type Color = (typeof COLOR_LIST)[number];
-
-export { COLOR_LIST as C, type Color as a };

package/src/constants/COLOR_LIST.ts

@@ -1,27 +0,0 @@
-export const COLOR_LIST = [
-  "red",
-  "slate",
-  "stone",
-  "zinc",
-  "gray",
-  "orange",
-  "amber",
-  "yellow",
-  "lime",
-  "green",
-  "emerald",
-  "teal",
-  "cyan",
-  "sky",
-  "blue",
-  "indigo",
-  "violet",
-  "purple",
-  "fuchsia",
-  "pink",
-  "rose",
-] as const;
-
-type Color = (typeof COLOR_LIST)[number];
-
-export default Color;