✨ feat: load default plugins on startup

Author: xiangechen

packages/chili-builder/src/appBuilder.ts

@@ -119,6 +119,7 @@ export class AppBuilder {
         this.ensureNecessary();
 
         const app = this.createApp();
+        await app.init();
         await this._window?.init(app);
 
         this.loadAdditionalCommands();

packages/chili-controls/src/controls.ts

@@ -21,8 +21,7 @@ export function createIcon(icon: CommandIcon): Element {
         }
         case "url":
             return img({ src: icon.value });
-        case "plugin":
-            console.trace("Plugin icon is not supported");
+        case "path":
             throw new Error("Plugin icon is not supported, please transform it to other icon type");
         default:
             return svg({ icon: "icon-chili" });

packages/chili-core/src/command/commandData.ts

@@ -10,10 +10,7 @@ export type IconPng = { type: "png"; value: Uint8Array };
 
 export type IconUrl = { type: "url"; value: string };
 
-/**
- * Only for plugin use, should transform to other type
- */
-export type IconPath = { type: "plugin"; path: string };
+export type IconPath = { type: "path"; value: string };
 
 export type CommandIcon = string | IconSvg | IconPng | IconUrl | IconPath;
 

packages/chili-core/src/plugin/manager.ts

@@ -12,16 +12,12 @@ export interface IPluginManager {
      */
     loadFromFile(pluginFile: File): Promise<void>;
     /**
-     * Load plugins from a url, the plugin file must be a zip file
+     * Load plugins from a url,
+     * if the url is a zip file, it will be loaded as a plugin, eg: https://example.com/plugin1.chiliplugin
+     * if the url is a directory, it will be loaded as a plugin folder, eg: https://example.com/plugin1, the plugin folder must have a manifest.json file inside,
      * @param pluginUrl the plugin url
      */
     loadFromUrl(pluginUrl: string): Promise<void>;
-    /**
-     * Load plugins from a folder, the index file is optional, if not specified, the default plugins.json will be used
-     * @param folderUrl the folder url
-     * @param indexName the index file name, default is plugins.json
-     */
-    loadFromFolder(folderUrl: string, indexName?: string): Promise<void>;
     unload(pluginName: string): Promise<void>;
     unloadAll(): void;
     getPlugins(): Plugin[];

packages/chili/src/application.ts

@@ -74,16 +74,13 @@ export class Application implements IApplication {
         this.dataExchange = option.dataExchange;
         this.mainWindow = option.mainWindow;
         this.pluginManager = new PluginManager(this);
+    }
 
+    async init() {
         this.services.forEach((x) => x.register(this));
         this.services.forEach((x) => x.start());
-
         this.initWindowEvents();
-        this.loadPluginsFromPublic();
-    }
-
-    private async loadPluginsFromPublic() {
-        await this.pluginManager.loadFromFolder("./plugins/");
+        await this.loadDefaultPlugins("plugins/");
     }
 
     private initWindowEvents() {
@@ -237,4 +234,21 @@ export class Application implements IApplication {
         const view = document.visual.createView("3d", Plane.XY);
         this.activeView = view;
     }
+
+    protected async loadDefaultPlugins(folderUrl: string) {
+        try {
+            const response = await fetch(folderUrl + "plugins.json");
+            if (!response.ok) {
+                return;
+            }
+            const config = await response.json();
+            const plugins = config.plugins as string[];
+            const baseUrl = folderUrl.endsWith("/") ? folderUrl : folderUrl + "/";
+            for (const plugin of plugins ?? []) {
+                await this.pluginManager.loadFromUrl(baseUrl + plugin);
+            }
+        } catch {
+            Logger.warn(`Failed to load plugins from folder: ${folderUrl}`);
+        }
+    }
 }

packages/chili/src/pluginManager.ts

@@ -10,7 +10,6 @@ import {
     Logger,
     type Plugin,
     type PluginManifest,
-    Result,
     toBase64Img,
 } from "chili-api";
 import type JSZip from "jszip";
@@ -25,101 +24,135 @@ export class PluginManager implements IPluginManager {
         const JSZip = await import("jszip");
         const zip = await JSZip.default.loadAsync(file);
 
-        const manifest = await this.readManifest(zip);
-        if (!manifest) {
-            return;
-        }
-
-        if (await this.loadPluginCode(zip, manifest)) {
-            Logger.info(`Plugin ${manifest.name} loaded successfully`);
+        const manifest = await this.readManifestFromZip(zip);
+        if (manifest) {
+            await this.loadPluginCodeFromZip(zip, manifest);
         }
     }
 
     async loadFromUrl(url: string) {
-        const response = await fetch(url);
-        if (!response.ok) {
-            alert(`Failed to fetch plugin from ${url}: ${response.statusText}`);
-            return;
-        }
-
-        const arrayBuffer = await response.arrayBuffer();
-        const blob = new Blob([arrayBuffer], { type: "application/zip" });
-        const file = new File([blob], "plugin.chiliplugin");
-
-        await this.loadFromFile(file);
-    }
-
-    async loadFromFolder(folderUrl: string, indexName: string = "plugins.json") {
-        try {
-            const response = await fetch(folderUrl + indexName);
+        if (url.endsWith(".chiliplugin")) {
+            const response = await fetch(url);
             if (!response.ok) {
+                alert(`Failed to fetch plugin from ${url}: ${response.statusText}`);
                 return;
             }
-            const config = await response.json();
-            const plugins = config.plugins as string[];
-            const baseUrl = folderUrl.endsWith("/") ? folderUrl : folderUrl + "/";
-            for (const plugin of plugins ?? []) {
-                await this.loadFromUrl(baseUrl + plugin);
+
+            const arrayBuffer = await response.arrayBuffer();
+            const blob = new Blob([arrayBuffer], { type: "application/zip" });
+            const file = new File([blob], "plugin.chiliplugin");
+
+            await this.loadFromFile(file);
+        } else {
+            if (!url.endsWith("/")) url += "/";
+            const manifest = await this.readManifestFromUrl(url + "manifest.json");
+            if (manifest) {
+                await this.loadPluginCodeFromUrl(manifest.name, url, manifest.main);
             }
-        } catch {
-            Logger.warn(`Failed to load plugins from folder: ${folderUrl}`);
         }
     }
 
-    private async readManifest(zip: JSZip) {
+    private async readManifestFromZip(zip: JSZip) {
         const manifestFile = zip.file("manifest.json");
         if (!manifestFile) {
             alert("manifest.json not found in plugin archive");
             return undefined;
         }
+
         const content = await manifestFile.async("text");
         const manifest = JSON.parse(content) as PluginManifest;
-        const validation = this.validateManifest(manifest);
-        if (!validation.isOk) {
-            alert(validation.error);
+        return this.validateManifest(manifest) ? manifest : undefined;
+    }
+
+    private async readManifestFromUrl(url: string) {
+        const response = await fetch(url);
+        if (!response.ok) {
             return undefined;
         }
-
-        return manifest;
+        const manifest: PluginManifest = await response.json();
+        return this.validateManifest(manifest) ? manifest : undefined;
     }
 
-    private async loadPluginCode(zip: JSZip, manifest: PluginManifest) {
+    private async loadPluginCodeFromZip(zip: JSZip, manifest: PluginManifest) {
         const codeFile = zip.file(manifest.main);
         if (!codeFile) {
             alert(manifest.main + " not found in plugin archive");
-            return false;
+            return;
         }
         const code = await codeFile.async("text");
+        const handlePluginIcon = async (plugin: Plugin) => {
+            await this.transformZipCommandIcon(zip, plugin);
+        };
+        await this.loadPluginCode(manifest.name, code, handlePluginIcon);
+    }
+
+    private async loadPluginCodeFromUrl(name: string, baseUrl: string, codePath: string) {
+        if (codePath.startsWith("/")) codePath = codePath.substring(1);
+
+        const fullUrl = baseUrl + codePath;
+        const response = await fetch(fullUrl);
+        if (!response.ok) {
+            return undefined;
+        }
+
+        const code = await response.text();
+        const handlePluginIcon = async (plugin: Plugin) => {
+            await this.transformUrlCommandIcon(baseUrl, plugin);
+        };
+        await this.loadPluginCode(name, code, handlePluginIcon);
+    }
+
+    private async loadPluginCode(
+        name: string,
+        code: string,
+        handlePluginIcon: (plugin: Plugin) => Promise<void>,
+    ) {
         const blob = new Blob([code], { type: "application/javascript" });
         const blobUrl = URL.createObjectURL(blob);
         await Promise.try(async () => {
             const module = await import(/*webpackIgnore: true*/ blobUrl);
-            await this.transformCommandIcon(zip, module.default);
-            this.registerPlugin(module.default);
-            this.plugins.set(manifest.name, module.default);
-        }).finally(() => {
-            URL.revokeObjectURL(blobUrl);
-        });
-        return true;
+            const plugin: Plugin = module.default;
+            await handlePluginIcon(plugin);
+            this.registerPlugin(plugin);
+            this.plugins.set(name, plugin);
+
+            Logger.info(`Plugin ${name} loaded successfully`);
+        })
+            .catch((err) => {
+                alert(`Failed to load plugin ${name}: ${err}`);
+            })
+            .finally(() => {
+                URL.revokeObjectURL(blobUrl);
+            });
     }
 
-    private async transformCommandIcon(zip: JSZip, plugin: Plugin) {
+    private async transformZipCommandIcon(zip: JSZip, plugin: Plugin) {
         for (const command of plugin.commands ?? []) {
             const data = CommandStore.getComandData(command);
             const iconData = data?.icon as IconPath;
-            if (iconData?.type === "plugin") {
-                const codeFile = zip.file(iconData?.path);
+            if (iconData?.type === "path") {
+                const codeFile = zip.file(iconData?.value);
                 if (!codeFile) {
-                    alert(`${iconData.path} not found in plugin archive`);
+                    alert(`${iconData.value} not found in plugin archive`);
                     continue;
                 }
                 const icon = await codeFile.async("base64");
-                const base64: string = toBase64Img(iconData.path, icon);
+                const base64: string = toBase64Img(iconData.value, icon);
                 data!.icon = { type: "url", value: base64 };
             }
         }
     }
 
+    private async transformUrlCommandIcon(baseUrl: string, plugin: Plugin) {
+        for (const command of plugin.commands ?? []) {
+            const data = CommandStore.getComandData(command);
+            const iconData = data?.icon as IconPath;
+            if (iconData?.type === "path") {
+                data!.icon = { type: "url", value: baseUrl + iconData.value };
+            }
+        }
+    }
+
     async unload(pluginName: string): Promise<void> {
         const plugin = this.plugins.get(pluginName);
         if (!plugin) {
@@ -152,23 +185,38 @@ export class PluginManager implements IPluginManager {
         return this.plugins.has(pluginName);
     }
 
-    private validateManifest(manifest: PluginManifest): Result<boolean> {
-        if (!manifest.name) Result.err("Missing required field: name");
-        if (!manifest.version) Result.err("Missing required field: version");
-        if (!manifest.main) Result.err("Missing required field: main");
+    private validateManifest(manifest: PluginManifest) {
+        if (this.manifests.has(manifest.name)) {
+            alert(`Plugin ${manifest.name} already loaded`);
+            return false;
+        }
 
+        const errors: string[] = [];
+        if (!manifest.name) errors.push("Missing required field: name");
+        if (!manifest.version) errors.push("Missing required field: version");
+        if (!manifest.main) errors.push("Missing required field: main");
         if (manifest.version && !this.isValidSemver(manifest.version)) {
-            Result.err("Invalid version format (expected semver like 1.0.0)");
+            errors.push("Invalid version format (expected semver like 1.0.0)");
         }
-
         if (manifest.engines?.chili3d) {
             const currentVersion = __APP_VERSION__;
             if (!this.satisfiesVersion(currentVersion, manifest.engines.chili3d)) {
-                Result.err(`Chili3D version ${currentVersion} does not satisfy ${manifest.engines.chili3d}`);
+                errors.push(`Chili3D version ${currentVersion} does not satisfy ${manifest.engines.chili3d}`);
             }
         }
 
-        return Result.ok(true);
+        if (errors.length > 0) {
+            alert(
+                "Load plugin " +
+                    manifest.name +
+                    " failed:\n" +
+                    errors.map((x, i) => `${i + 1}. ${x}`).join("\n"),
+            );
+            return false;
+        }
+
+        this.manifests.set(manifest.name, manifest);
+        return true;
     }
 
     private isValidSemver(version: string): boolean {

plugins/helloworld-js/manifest.json

@@ -2,11 +2,11 @@
     "name": "Hello World JS",
     "version": "1.0.0",
     "description": "A demo plugin for Chili3D showing plugin system capabilities",
-    "main": "extension.js",
+    "main": "src/extension.js",
     "author": {
         "name": "Chili3D Team"
     },
     "engines": {
-        "chili3d": ">=0.7"
+        "chili3d": ">=0.6"
     }
 }

plugins/helloworld-js/package.json

@@ -5,7 +5,7 @@
     "main": "extension.js",
     "type": "module",
     "scripts": {
-        "package": "node ../scripts/package-plugin.mjs --entry src/extension.js --output dist/helloworld-js.chiliplugin"
+        "package": "node ../scripts/package-plugin.mjs dist/helloworld-js.chiliplugin src/extension.js manifest.json icons"
     },
     "keywords": [
         "chili3d",