Module cleanup (#4985)

* module cleanup

* Fix ??

---------

Co-authored-by: Artur Arseniev <artur.catch@hotmail.it>

src/abstract/Module.ts

@@ -2,13 +2,12 @@ import { isElement, isUndefined, isString } from 'underscore';
 import { Collection, View } from '../common';
 import { EditorConfigKeys } from '../editor/config/config';
 import EditorModel from '../editor/model/Editor';
+import { ProjectData } from '../storage_manager/model/IStorage';
 import { createId, isDef, deepMerge } from '../utils/mixins';
 
-export interface IModule<TConfig extends any = any> extends IBaseModule<TConfig> {
+export interface IModule<TConfig extends ModuleConfig = ModuleConfig> extends IBaseModule<TConfig> {
-  init(cfg: any): void;
   destroy(): void;
   postLoad(key: any): any;
-  config: TConfig;
   onLoad?(): void;
   name: string;
   postRender?(view: any): void;
@@ -25,11 +24,15 @@ export interface ModuleConfig {
   appendTo?: string | HTMLElement;
 }
 
-export interface IStorableModule extends IModule {
+export interface IStorableModule {
   storageKey: string[] | string;
   store(result: any): any;
-  load(keys: string[]): void;
+  load(keys: ProjectData): void;
-  postLoad(key: any): any;
+  clear(): void;
+}
+
+export interface ILoadableModule {
+  onLoad(): void;
 }
 
 export default abstract class Module<T extends ModuleConfig = ModuleConfig> implements IModule<T> {
@@ -63,10 +66,7 @@ export default abstract class Module<T extends ModuleConfig = ModuleConfig> impl
   public get config() {
     return this._config;
   }
-  //abstract name: string;
+
-  isPrivate: boolean = false;
-  onLoad?(): void;
-  init(cfg: T) {}
   abstract destroy(): void;
   render(opts?: any): HTMLElement | JQuery<HTMLElement> | void {}
   postLoad(key: any): void {}
@@ -104,7 +104,7 @@ export default abstract class Module<T extends ModuleConfig = ModuleConfig> impl
 }
 
 export abstract class ItemManagerModule<
-  TConf extends ModuleConfig = any,
+  TConf extends ModuleConfig = ModuleConfig,
   TCollection extends Collection = Collection
 > extends Module<TConf> {
   cls: any[] = [];

src/block_manager/index.ts

@@ -55,7 +55,13 @@ import { ItemManagerModule } from '../abstract/Module';
 import EditorModel from '../editor/model/Editor';
 import Component from '../dom_components/model/Component';
 
-export type BlockEvent = 'block:add' | 'block:remove' | 'block:drag:start' | 'block:drag' | 'block:drag:stop' | 'block:custom';
+export type BlockEvent =
+  | 'block:add'
+  | 'block:remove'
+  | 'block:drag:start'
+  | 'block:drag'
+  | 'block:drag:stop'
+  | 'block:custom';
 
 export const evAll = 'block';
 export const evPfx = `${evAll}:`;

src/canvas/index.ts

@@ -94,7 +94,6 @@ export default class CanvasModule extends Module<CanvasConfig> {
     this.stopAutoscroll = this.stopAutoscroll.bind(this);
     return this;
   }
-  init() {}
 
   onLoad() {
     this.model.init();

src/dom_components/index.ts

@@ -53,7 +53,7 @@
  * @module Components
  */
 import { isEmpty, isObject, isArray, isFunction, isString, result, debounce } from 'underscore';
-import defaults from './config/config';
+import defaults, { DomComponentsConfig } from './config/config';
 import Component, { keyUpdate, keyUpdateInside } from './model/Component';
 import Components from './model/Components';
 import ComponentView from './view/ComponentView';
@@ -117,7 +117,7 @@ export type ComponentEvent =
   | 'component:drag'
   | 'component:drag:end';
 
-export default class ComponentManager extends ItemManagerModule {
+export default class ComponentManager extends ItemManagerModule<DomComponentsConfig, any> {
   componentTypes = [
     {
       id: 'cell',
@@ -251,6 +251,7 @@ export default class ComponentManager extends ItemManagerModule {
     super(em, 'DomComponents', new Components(undefined, { em }));
 
     if (em) {
+      //@ts-ignore
       this.config.components = em.config.components || this.config.components;
     }
 
@@ -264,8 +265,6 @@ export default class ComponentManager extends ItemManagerModule {
 
     // Load dependencies
     if (em) {
-      this.config.modal = em.Modal || '';
-      this.config.am = em.Assets || '';
       em.get('Parser').compTypes = this.componentTypes;
       em.on('change:componentHovered', this.componentHovered, this);
 

src/editor/index.ts

@@ -125,8 +125,6 @@ export default class Editor implements IBaseModule<EditorConfig> {
   em: EditorModel;
   config: EditorConfigType;
 
-  modules = [];
-
   constructor(config: EditorConfig = {}, opts: any = {}) {
     this.config = {
       ...defaults,

src/editor/model/Editor.ts

@@ -8,7 +8,7 @@ import Selected from './Selected';
 import FrameView from '../../canvas/view/FrameView';
 import Editor from '..';
 import EditorView from '../view/EditorView';
-import Module from '../../abstract/Module';
+import { ILoadableModule, IModule, IStorableModule } from '../../abstract/Module';
 import CanvasModule from '../../canvas';
 import ComponentManager from '../../dom_components';
 import CssComposer from '../../css_composer';
@@ -43,7 +43,7 @@ import Frame from '../../canvas/model/Frame';
 
 Backbone.$ = $;
 
-const deps: (new (em: EditorModel) => Module)[] = [
+const deps: (new (em: EditorModel) => IModule)[] = [
   UtilsModule,
   I18nModule,
   KeymapsModule,
@@ -57,16 +57,18 @@ const deps: (new (em: EditorModel) => Module)[] = [
   CodeManagerModule,
   PanelManager,
   RichTextEditorModule,
-  AssetManager,
-  CssComposer,
-  PageManager,
   TraitManager,
-  ComponentManager,
   LayerManager,
   CanvasModule,
   CommandsModule,
   BlockManager,
 ];
+const storableDeps: (new (em: EditorModel) => IModule & IStorableModule)[] = [
+  AssetManager,
+  CssComposer,
+  PageManager,
+  ComponentManager,
+];
 
 Extender({ $ });
 
@@ -99,21 +101,21 @@ export default class EditorModel extends Model {
   defaultRunning = false;
   destroyed = false;
   _config: EditorConfig;
-  _storageTimeout?: NodeJS.Timeout;
+  _storageTimeout?: ReturnType<typeof setTimeout>;
   attrsOrig: any;
-  timedInterval?: number;
+  timedInterval?: ReturnType<typeof setTimeout>;
-  updateItr?: number;
+  updateItr?: ReturnType<typeof setTimeout>;
   view?: EditorView;
 
-  get storables(): any[] {
+  get storables(): IStorableModule[] {
     return this.get('storables');
   }
 
-  get modules(): Module[] {
+  get modules(): IModule[] {
     return this.get('modules');
   }
 
-  get toLoad(): any[] {
+  get toLoad(): ILoadableModule[] {
     return this.get('toLoad');
   }
 
@@ -248,7 +250,8 @@ export default class EditorModel extends Model {
     }
 
     // Load modules
-    deps.forEach(name => this.loadModule(name));
+    deps.forEach(constr => this.loadModule(constr));
+    storableDeps.forEach(constr => this.loadStorableModule(constr));
     this.on('change:componentHovered', this.componentHovered, this);
     this.on('change:changesCount', this.updateChanges, this);
     this.on('change:readyLoad change:readyCanvas', this._checkReady, this);
@@ -308,7 +311,7 @@ export default class EditorModel extends Model {
     const sm = this.get('StorageManager');
 
     // In `onLoad`, the module will try to load the data from its configurations.
-    this.toLoad.forEach(mdl => mdl.onLoad());
+    this.toLoad.reverse().forEach(mdl => mdl.onLoad());
 
     // Stuff to do post load
     const postLoad = () => {
@@ -356,7 +359,6 @@ export default class EditorModel extends Model {
     const stm = this.get('StorageManager');
     const changes = this.getDirtyCount();
     this.updateItr && clearTimeout(this.updateItr);
-    //@ts-ignore
     this.updateItr = setTimeout(() => this.trigger('update'));
 
     if (this.config.noticeOnUnload) {
@@ -370,34 +372,19 @@ export default class EditorModel extends Model {
 
   /**
    * Load generic module
-   * @param {String} moduleName Module name
-   * @return {this}
-   * @private
    */
-  loadModule(Module: any) {
+  private loadModule(InitModule: new (em: EditorModel) => IModule) {
-    const { config } = this;
+    const Mod = new InitModule(this);
-    const Mod = new Module(this);
+    this.set(Mod.name, Mod);
-    const name = (Mod.name.charAt(0).toLowerCase() + Mod.name.slice(1)) as EditorConfigKeys;
+    Mod.onLoad && this.toLoad.push(Mod as ILoadableModule);
-    const cfgParent = !isUndefined(config[name]) ? config[name] : config[Mod.name as EditorConfigKeys];
-    const cfg = (cfgParent === true ? {} : cfgParent || {}) as Record<string, any>;
-    cfg.pStylePrefix = config.pStylePrefix || '';
-
-    if (!isUndefined(cfgParent) && !cfgParent) {
-      cfg._disable = 1;
-    }
-
-    if (Mod.storageKey && Mod.store && Mod.load) {
-      this.storables.push(Mod);
-    }
-
-    cfg.em = this;
-    Mod.init({ ...cfg });
-
-    // Bind the module to the editor model if public
-    !Mod.private && this.set(Mod.name, Mod);
-    Mod.onLoad && this.toLoad.push(Mod);
     this.modules.push(Mod);
-    return this;
+    return Mod;
+  }
+
+  private loadStorableModule(InitModule: new (em: EditorModel) => IModule & IStorableModule) {
+    const Mod = this.loadModule(InitModule) as IModule & IStorableModule;
+    this.storables.push(Mod);
+    return Mod;
   }
 
   /**
@@ -433,7 +420,6 @@ export default class EditorModel extends Model {
     }
 
     this.timedInterval && clearTimeout(this.timedInterval);
-    //@ts-ignore
     this.timedInterval = setTimeout(() => {
       const curr = this.getDirtyCount() || 0;
       const { unset, ...opts } = opt;
@@ -975,7 +961,7 @@ export default class EditorModel extends Model {
     // @ts-ignore
     const { editors = [] } = config.grapesjs || {};
     const shallow = this.get('shallow');
-    clearTimeout(this._storageTimeout);
+    this._storageTimeout && clearTimeout(this._storageTimeout);
     shallow?.destroyAll();
     this.stopListening();
     this.stopDefault();

src/pages/index.ts

@@ -105,7 +105,6 @@ export default class PageManager extends ItemManagerModule<PageManagerConfig, Pa
   /**
    * Initialize module
    * @param {Object} config Configurations
-   * @private
    */
   constructor(em: EditorModel) {
     super(em, 'PageManager', new Pages([], em), events);
@@ -115,8 +114,6 @@ export default class PageManager extends ItemManagerModule<PageManagerConfig, Pa
     this.pages.on('reset', coll => coll.at(0) && this.select(coll.at(0)));
     this.pages.on('all', this.__onChange, this);
     model.on(chnSel, this._onPageChange);
-
-    return this;
   }
 
   __onChange(event: string, page: Page, coll: Pages, opts?: any) {

test/specs/asset_manager/index.js

@@ -15,7 +15,6 @@ describe('Asset Manager', () => {
         height: 102,
       };
       obj = new AssetManager(new Editor());
-      obj.init();
       document.body.querySelector('#asset-c').appendChild(obj.render());
     });
 

test/specs/dom_components/model/Component.js

@@ -28,7 +28,6 @@ describe('Component', () => {
       domc: dcomp,
     };
     obj = new Component({}, compOpts);
-    dcomp.init({ em });
   });
 
   afterEach(() => {
@@ -651,7 +650,6 @@ describe('Components', () => {
     const em = new Editor({});
     dcomp = em.get('DomComponents');
     em.get('PageManager').onLoad();
-    dcomp.init({ em });
     const id = 'myid';
     const idB = 'myid2';
     const block = `