editor-js · slaveeks · May 5, 2023 · May 5, 2023 · May 5, 2023 · May 5, 2023
diff --git a/dev-stand/src/templates/stand-template.js b/dev-stand/src/templates/stand-template.js
@@ -1,6 +1,6 @@
 import config from '../editorjs.config';
 import StandAPI from './src/StandAPI/StandAPI';
-import StandCreator from "./src/StandCreator/StandCreator";
+import StandCreator from './src/StandCreator/StandCreator';
 
 // {{{ Tools }}}
 

diff --git a/editorjs.config.sample.ts b/editorjs.config.sample.ts
@@ -22,7 +22,11 @@ export default function config(): unknown {
         quote: '@editorjs/quote',
         header: '@editorjs/header',
         checklist: {
-          path: './checklist/dist/bundle.js',
+          path: 'https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest',
+          exportName: 'Checklist',
+        },
+        image: {
+          path: './simple-image/dist/bundle.js',
         },
       },
     },

diff --git a/package.json b/package.json
@@ -1,28 +1,32 @@
 {
   "name": "@editorjs/dev-tools",
-  "version": "0.0.1-rc.0",
+  "version": "0.0.1-rc.1",
   "type": "module",
   "main": "./build/setup/index.js",
   "files": [
     "build"
   ],
   "scripts": {
-    "build": "tsc",
+    "copy-styles": "copyfiles -u 1 dev-stand/stand.css ./build/dev-stand/",
+    "copy-templates": "copyfiles -u 1 dev-stand/src/templates/* ./build/dev-stand/",
+    "build": "tsc && yon copy-styles && yon copy-templates",
     "start-stand": "vite build && vite preview",
     "start": "node ./build/setup/index.js && yon start-stand",
+    "dev-stand": "yon build && yon start",
     "lint": "eslint ."
   },
   "packageManager": "[email protected]",
   "devDependencies": {
+    "@editorjs/editorjs": "2.26.5",
     "@types/node": "^18.15.1",
+    "copyfiles": "^2.4.1",
     "eslint": "^8.34.0",
     "eslint-config-codex": "^1.7.2",
     "typescript": "^4.9.5",
     "yarn-or-npm": "^3.0.1"
   },
   "dependencies": {
     "@codexteam/icons": "^0.3.0",
-    "@editorjs/editorjs": "2.26.5",
     "esbuild": "^0.17.16",
     "vite": "^4.2.1",
     "zod": "^3.20.6"

diff --git a/setup/Stand/Stand.ts b/setup/Stand/Stand.ts
@@ -5,8 +5,8 @@ import { Plugin } from '../types/editorjs/Plugin.js';
 import FileData from '../utils/FileData.js';
 
 // Templates for html and script files
-const STAND_TEMPLATE = path.resolve('./dev-stand/src/templates/stand-template.html');
-const STAND_SCRIPT_TEMPLATE = path.resolve('./dev-stand/src/templates/stand-template.js');
+const STAND_TEMPLATE = path.resolve('./build/dev-stand/src/templates/stand-template.html');
+const STAND_SCRIPT_TEMPLATE = path.resolve('./build/dev-stand/src/templates/stand-template.js');
 
 /**
  * Stand is the environment for testing editor.js and its plugins
@@ -62,10 +62,20 @@ export default class Stand {
     /**
      * Add plugins imports to script
      */
-    for (let i = 0; i < plugins.length; i++) {
-      const toolClassName = `Tool${i}`;
-
-      this.addImportToScript(plugins[i], toolClassName);
+    for (const [index, plugin] of plugins.entries()) {
+      /**
+       * Check if plugin is from CDN
+       */
+      if (plugin.sourceType === SourceType.CDN && plugin.path) {
+        /**
+         * Add plugin script to index.html
+         */
+        this.addScript(plugin.path, false);
+      } else {
+        const toolClassName = `Tool${index}`;
+
+        this.addImportToScript(plugin, toolClassName);
+      }
     }
 
     this.addPluginsToEditorConfig();
@@ -97,9 +107,10 @@ export default class Stand {
    * Add script to index.html file
    *
    * @param {string} scriptPath - script path
+   * @param {boolean} isModule - is script has type module
    */
-  private addScript(scriptPath: string): void {
-    const script =`<script src="${scriptPath}" type="module"></script>`;
+  private addScript(scriptPath: string, isModule = true): void {
+    const script =`<script src="${scriptPath}" ${isModule ? `type="module"`: ``}></script>`;
 
     this.HTMLFileData.insert(script, '<body>');
   }
@@ -117,7 +128,19 @@ export default class Stand {
      * Set import source to tool name if source type is registry
      */
     if (tool.sourceType === SourceType.Registry) {
-      importSource = tool.packageName;
+      /**
+       * Set version to latest if it is not set
+       */
+      const version = tool.version ? `${tool.version}` : 'latest';
+
+      importSource = `https://cdn.skypack.dev/${tool.packageName}@${version}`;
+    }
+
+    /**
+     * Make named import if tool has export name
+     */
+    if (tool.exportName != 'default') {
+      className = `{ ${className} }`;
     }
 
     const str = `import ${className} from '${importSource}'`;
@@ -138,16 +161,27 @@ export default class Stand {
     /**
      * Add plugins to tools object
      */
-    for (let i = 0; i < this.plugins.length; i++) {
+    for (const [index, plugin] of this.plugins.entries()) {
       /**
        * Get tool key
        */
-      const toolName = this.plugins[i].name;
+      const toolName = plugin.name;
+
+      let className: string;
+
+      /**
+       * Set class name to plugin export name if it is not default
+       */
+      if (plugin.exportName != 'default') {
+        className = plugin.exportName;
+      } else {
+        className = `Tool${index}`;
+      }
 
       /**
        * Add tool to tools object in editorConfig
        */
-      const data = `tools.push({ key: '${toolName}', class: Tool${i} });`;
+      const data = `tools.push({ key: '${toolName}', class: ${className} });`;
 
       this.JSData.insert(data, '// {{{ Tools configuration }}}');
     }

diff --git a/setup/index.ts b/setup/index.ts
@@ -1,5 +1,4 @@
 import { Config } from './types/config.js';
-import { PackageInstaller } from './utils/PackageInstaller.js';
 import { z } from 'zod';
 import { Plugin } from './types/editorjs/Plugin.js';
 import { Core } from './types/editorjs/Core.js';
@@ -14,7 +13,6 @@ class DevTools {
    * Development stand
    */
   public stand: Stand;
-
   /**
    * Editor.js core
    */
@@ -27,12 +25,6 @@ class DevTools {
    * Parsed 'editorjs.config.ts'
    */
   private readonly parsedConfig: z.infer<typeof Config>;
-  /**
-   * Util for installing packages
-   *
-   * @private
-   */
-  private readonly installer: PackageInstaller;
 
   /**
    * Initiate editor.js dev tools
@@ -41,32 +33,20 @@ class DevTools {
    */
   constructor(configData: unknown) {
     this.parsedConfig = Config.parse(configData);
-    this.installer = new PackageInstaller(this.parsedConfig.setup.packageManager);
     this.plugins = [];
 
     /**
-     * Get core path, version and package name from config
+     * Get core path, version, package name and export name from config
      */
     const corePath = this.parsedConfig.setup.core.path;
     const coreVersion = this.parsedConfig.setup.core.version;
     const corePackageName = this.parsedConfig.setup.core.name;
+    const coreExportName = this.parsedConfig.setup.core.exportName;
 
-    this.core = new Core('core', corePackageName, corePath, coreVersion);
+    this.core = new Core('core', coreExportName, corePackageName, corePath, coreVersion);
 
     this.addTools();
 
-    /**
-     *  Install core
-     */
-    this.core.install(this.installer);
-
-    /**
-     * Install all tools
-     */
-    for (const plugin of this.plugins) {
-      plugin.install(this.installer);
-    }
-
     this.stand = new Stand(this.core, this.plugins);
   }
 
@@ -97,6 +77,7 @@ class DevTools {
             tool = new Plugin({
               name: toolName,
               path: sourceConfig.path,
+              exportName: sourceConfig.exportName,
             });
           } else {
             /**
@@ -106,6 +87,7 @@ class DevTools {
               name: toolName,
               packageName: sourceConfig.name,
               version: sourceConfig.version,
+              exportName: sourceConfig.exportName,
             });
           }
         } else {
@@ -114,6 +96,7 @@ class DevTools {
            */
           tool = new Plugin({ name: toolName,
             packageName: sourceConfig,
+            exportName: 'default',
           });
         }
         this.plugins.push(tool);

diff --git a/setup/types/config.ts b/setup/types/config.ts
@@ -1,5 +1,4 @@
 import { z } from 'zod';
-import { PackageManager } from '../utils/packageInstaller.js';
 
 /**
  * Regex for string as version
@@ -12,13 +11,15 @@ const versionRegex = /(^|~)*\d+\.\d+\.\d+$/;
 const ToolFromRegistry = z.object({
   name: z.string(),
   version: z.optional(z.string().regex(versionRegex)),
+  exportName: z.string().default('default'),
 });
 
 /**
  * Configuration for editor.js tool by path
  */
 const ToolFromPath = z.object({
   path: z.string(),
+  exportName: z.string().default('default'),
 });
 
 /**
@@ -28,14 +29,14 @@ const Core = z.object({
   name: z.string().default('@editorjs/editorjs'),
   version: z.optional(z.string().regex(versionRegex)),
   path: z.optional(z.string()),
+  exportName: z.string().default('default'),
 });
 
 /**
  * Configuration for editor.js setup
  */
 const Setup = z.object({
   core: Core,
-  packageManager: z.optional(z.nativeEnum(PackageManager)),
   tools: z.optional(z.record(z.string(), z.union([ToolFromRegistry, z.string(), ToolFromPath]))),
 });
 

diff --git a/setup/types/editorjs/Core.ts b/setup/types/editorjs/Core.ts
@@ -8,11 +8,12 @@ export class Core extends InstallableTool {
    * Initiate editor.js core
    *
    * @param {string} name - core name.
+   * @param {string} exportName - core export class name.
    * @param {string} packageName - core package name.
    * @param {string} path - core local or CDN path.
    * @param {string} version - core version in registry.
    */
-  constructor(name: string, packageName: string, path?: string, version?: string) {
-    super(name, packageName, path, version);
+  constructor(name: string, exportName: string, packageName: string, path?: string, version?: string) {
+    super(name, exportName, packageName, path, version);
   }
 }