Refactor for TS bundle

src/abstract/Module.ts

@@ -130,8 +130,7 @@ export abstract class ItemManagerModule<
   abstract storageKey: string;
   abstract destroy(): void;
   postLoad(key: any): void {}
-  // @ts-ignore
+  render(opts?: any) {}
-  render() {}
 
   getProjectData(data?: any) {
     const obj: any = {};

src/abstract/ModuleCollection.ts

@@ -1,11 +1,11 @@
-import Backbone, { AddOptions } from 'backbone';
 import { isArray, isUndefined } from 'underscore';
+import { AddOptions, Collection } from '../common';
 import ModuleModel from './ModuleModel';
 
 type ModuleExt<TModel extends ModuleModel> = TModel extends ModuleModel<infer M> ? M : unknown;
 type ModelConstructor<TModel extends ModuleModel> = { new (mod: ModuleExt<TModel>, attr: any): TModel };
 
-export default class ModuleCollection<TModel extends ModuleModel = ModuleModel> extends Backbone.Collection<TModel> {
+export default class ModuleCollection<TModel extends ModuleModel = ModuleModel> extends Collection<TModel> {
   module!: ModuleExt<TModel>;
   private newModel!: ModelConstructor<TModel>;
 

src/abstract/ModuleDomainViews.ts

@@ -1,7 +1,7 @@
-import Backbone from 'backbone';
 import ModuleView from './ModuleView';
 import ModuleCollection from './ModuleCollection';
 import ModuleModel from './ModuleModel';
+import { View } from '../common';
 
 export default abstract class ModuleDomainViews<
   TCollection extends ModuleCollection,
@@ -84,7 +84,7 @@ export default abstract class ModuleDomainViews<
     const { viewCollection } = this;
     this.onRemoveBefore(viewCollection, opts);
     this.clearItems();
-    Backbone.View.prototype.remove.apply(this, opts);
+    View.prototype.remove.apply(this, opts);
     this.onRemove(viewCollection, opts);
     return this;
   }

src/abstract/ModuleModel.ts

@@ -1,12 +1,14 @@
 import Backbone from 'backbone';
+import { Model, ObjectHash, SetOptions } from '../common';
+import EditorModel from '../editor/model/Editor';
 import Module, { IBaseModule } from './Module';
 
 export default class ModuleModel<
   TModule extends IBaseModule<any> = Module,
-  T extends Backbone.ObjectHash = any,
+  T extends ObjectHash = any,
-  S = Backbone.ModelSetOptions,
+  S = SetOptions,
   E = any
-> extends Backbone.Model<T, S, E> {
+> extends Model<T, S, E> {
   private _module: TModule;
 
   constructor(module: TModule, attributes?: T, options?: Backbone.CombinedModelConstructorOptions<E>) {
@@ -22,7 +24,7 @@ export default class ModuleModel<
     return this._module.config;
   }
 
-  public get em() {
+  public get em(): EditorModel {
     return this._module.em;
   }
 }

src/abstract/ModuleView.ts

@@ -1,7 +1,8 @@
-import Backbone from 'backbone';
 import ModuleCollection from './ModuleCollection';
 import ModuleModel from './ModuleModel';
 import { IBaseModule } from './Module';
+import { View } from '../common';
+import EditorModel from '../editor/model/Editor';
 
 type ModuleFromModel<TModel extends ModuleModel> = TModel extends ModuleModel<infer M> ? M : unknown;
 type ModuleModelExt<TItem extends ModuleModel | ModuleCollection> = TItem extends ModuleCollection<infer M>
@@ -15,7 +16,7 @@ type ModuleModelExt<TItem extends ModuleModel | ModuleCollection> = TItem extend
 export default class ModuleView<
   TModel extends ModuleModel | ModuleCollection = ModuleModel,
   TElement extends Element = HTMLElement
-> extends Backbone.View<TModel extends ModuleModel ? TModel : undefined, TElement> {
+> extends View<TModel extends ModuleModel ? TModel : undefined, TElement> {
   protected get pfx() {
     return this.ppfx + (this.config as any).stylePrefix || '';
   }
@@ -30,7 +31,7 @@ export default class ModuleView<
     return (this.model as any)?.module ?? this.collection.module;
   }
 
-  protected get em() {
+  protected get em(): EditorModel {
     return this.module.em;
   }
 

src/block_manager/index.ts

@@ -332,7 +332,6 @@ export default class BlockManager extends ItemManagerModule<BlockManagerConfig,
    * const newBlocksEl = blockManager.render(filtered, { external: true });
    * document.getElementById('some-id').appendChild(newBlocksEl);
    */
-  // @ts-ignore
   render(blocks: Block[], opts: { external?: boolean } = {}) {
     const { categories, config, em } = this;
     const toRender = blocks || this.getAll().models;

src/block_manager/view/BlocksView.ts

@@ -1,4 +1,5 @@
 import { isString, isObject, bindAll } from 'underscore';
+import BlockManager from '..';
 import { View } from '../../common';
 import Component from '../../dom_components/model/Component';
 import EditorModel from '../../editor/model/Editor';
@@ -49,7 +50,7 @@ export default class BlocksView extends View {
     }
   }
 
-  __getModule() {
+  __getModule(): BlockManager {
     return this.em.Blocks;
   }
 

src/block_manager/view/CategoryView.ts

@@ -35,7 +35,7 @@ export default class CategoryView extends View<Category> {
     `;
   }
 
-  // @ts-ignore
+  /** @ts-ignore */
   attributes() {
     return this.model.get('attributes') || {};
   }

src/canvas/model/Frame.ts

@@ -5,6 +5,7 @@ import ComponentWrapper from '../../dom_components/model/ComponentWrapper';
 import { isComponent, isObject } from '../../utils/mixins';
 import FrameView from '../view/FrameView';
 import Frames from './Frames';
+import Page from '../../pages/model/Page';
 
 const keyAutoW = '__aw';
 const keyAutoH = '__ah';
@@ -173,7 +174,7 @@ export default class Frame extends ModuleModel<CanvasModule> {
     this.removeHeadByAttr('src', src, 'script');
   }
 
-  getPage() {
+  getPage(): Page | undefined {
     return (this.collection as unknown as Frames)?.page;
   }
 

src/canvas/view/FrameView.ts

@@ -9,11 +9,11 @@ import Canvas from '../model/Canvas';
 import FrameWrapView from './FrameWrapView';
 
 export default class FrameView extends ModuleView<Frame, HTMLIFrameElement> {
-  //@ts-ignore
+  /** @ts-ignore */
   get tagName() {
     return 'iframe';
   }
-  //@ts-ignore
+  /** @ts-ignore */
   get attributes() {
     return { allowfullscreen: 'allowfullscreen' };
   }

src/common/Collection.ts

@@ -1 +0,0 @@
-export { Collection as default } from 'backbone';

src/common/Model.ts

@@ -1 +0,0 @@
-export { Model as default } from 'backbone';

src/common/View.ts

@@ -1 +0,0 @@
-export { View as default } from 'backbone';

src/common/index.ts

@@ -1,6 +1,6 @@
-export { default as Model } from './Model';
+import Backbone from 'backbone';
-export { default as Collection } from './Collection';
+
-export { default as View } from './View';
+export type Debounced = Function & { cancel(): void };
 
 export type SetOptions = Backbone.ModelSetOptions & { avoidStore?: boolean };
 
@@ -8,6 +8,10 @@ export type AddOptions = Backbone.AddOptions & { temporary?: boolean };
 
 export type RemoveOptions = Backbone.Silenceable;
 
+export type EventHandler = Backbone.EventHandler;
+
+export type ObjectHash = Backbone.ObjectHash;
+
 export type ObjectAny = Record<string, any>;
 
 export type ObjectStrings = Record<string, string>;
@@ -16,3 +20,9 @@ export type Position = {
   x: number;
   y: number;
 };
+
+export class Model<T extends ObjectHash = any, S = SetOptions, E = any> extends Backbone.Model<T, S, E> {}
+
+export class Collection<T extends Model = Model> extends Backbone.Collection<T> {}
+
+export class View<T extends Model | undefined = Model, E extends Element = HTMLElement> extends Backbone.View<T, E> {}

src/css_composer/index.ts

@@ -178,7 +178,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
     return this.rules.find(rule => rule.compare(slc, state, width, ruleProps)) || null;
   }
 
-  getAll(): CssRules {
+  getAll() {
     return this.rules;
   }
 

src/css_composer/model/CssRules.ts

@@ -32,7 +32,7 @@ export default class CssRules extends Collection<CssRule> {
     em.UndoManager.remove(removed);
   }
 
-  // @ts-ignore
+  /** @ts-ignore */
   add(models: any, opt: any = {}) {
     if (typeof models === 'string') {
       models = this.editor.get('Parser').parseCss(models);

src/dom_components/model/Component.ts

@@ -112,7 +112,7 @@ export const keyUpdateInside = `${keyUpdate}-inside`;
  * @module docsjs.Component
  */
 export default class Component extends StyleableModel<ComponentProperties> {
-  // @ts-ignore
+  /** @ts-ignore */
   get defaults(): ComponentDefinitionDefined {
     return {
       tagName: 'div',
@@ -195,7 +195,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
   prevColl?: Components;
   __hasUm?: boolean;
   __symbReady?: boolean;
-  // @ts-ignore
+  /** @ts-ignore */
   collection!: Components;
 
   initialize(props = {}, opt: ComponentOptions = {}) {
@@ -2055,135 +2055,3 @@ export default class Component extends StyleableModel<ComponentProperties> {
     });
   }
 }
-
-// Component.getDefaults = function () {
-//   return result(this.prototype, 'defaults');
-// };
-
-/**
- * Detect if the passed element is a valid component.
- * In case the element is valid an object abstracted
- * from the element will be returned
- * @param {HTMLElement}
- * @return {Object}
- * @private
- */
-// Component.isComponent = el => {
-//   return { tagName: toLowerCase(el.tagName) };
-// };
-
-// Component.ensureInList = model => {
-//   const list = Component.getList(model);
-//   const id = model.getId();
-//   const current = list[id];
-
-//   if (!current) {
-//     // Insert in list
-//     list[id] = model;
-//   } else if (current !== model) {
-//     // Create new ID
-//     const nextId = Component.getIncrementId(id, list);
-//     model.setId(nextId);
-//     list[nextId] = model;
-//   }
-
-//   model.components().forEach(i => Component.ensureInList(i));
-// };
-
-/**
- * Relying simply on the number of components becomes a problem when you
- * store and load them back, you might hit collisions with new components
- * @param  {Model} model
- * @return {string}
- * @private
- */
-// Component.createId = (model, opts = {}) => {
-//   const list = Component.getList(model);
-//   const { idMap = {} } = opts;
-//   let { id } = model.get('attributes');
-//   let nextId;
-
-//   if (id) {
-//     nextId = Component.getIncrementId(id, list, opts);
-//     model.setId(nextId);
-//     if (id !== nextId) idMap[id] = nextId;
-//   } else {
-//     nextId = Component.getNewId(list);
-//   }
-
-//   list[nextId] = model;
-//   return nextId;
-// };
-
-// Component.getNewId = list => {
-//   const count = Object.keys(list).length;
-//   // Testing 1000000 components with `+ 2` returns 0 collisions
-//   const ilen = count.toString().length + 2;
-//   const uid = (Math.random() + 1.1).toString(36).slice(-ilen);
-//   let newId = `i${uid}`;
-
-//   while (list[newId]) {
-//     newId = Component.getNewId(list);
-//   }
-
-//   return newId;
-// };
-
-// Component.getIncrementId = (id, list, opts = {}) => {
-//   const { keepIds = [] } = opts;
-//   let counter = 1;
-//   let newId = id;
-
-//   if (keepIds.indexOf(id) < 0) {
-//     while (list[newId]) {
-//       counter++;
-//       newId = `${id}-${counter}`;
-//     }
-//   }
-
-//   return newId;
-// };
-
-/**
- * The list of components is taken from the Components module.
- * Initially, the list, was set statically on the Component object but it was
- * not ok, as it was shared between multiple editor instances
- * @private
- */
-// Component.getList = model => {
-//   const { opt = {} } = model;
-//   const { domc, em } = opt;
-//   const dm = domc || (em && em.get('DomComponents'));
-//   return dm ? dm.componentsById : {};
-// };
-
-/**
- * This method checks, for each parsed component and style object
- * (are not Components/CSSRules yet), for duplicated id and fixes them
- * This method is used in Components.js just after the parsing
- * @private
- */
-// Component.checkId = (components, styles = [], list = {}, opts = {}) => {
-//   const comps = isArray(components) ? components : [components];
-//   const { keepIds = [] } = opts;
-//   comps.forEach(comp => {
-//     const { attributes = {}, components } = comp;
-//     const { id } = attributes;
-
-//     // Check if we have collisions with current components
-//     if (id && list[id] && keepIds.indexOf(id) < 0) {
-//       const newId = Component.getIncrementId(id, list);
-//       attributes.id = newId;
-//       // Update passed styles
-//       isArray(styles) &&
-//         styles.forEach(style => {
-//           const { selectors } = style;
-//           selectors.forEach((sel, idx) => {
-//             if (sel === `#${id}`) selectors[idx] = `#${newId}`;
-//           });
-//         });
-//     }
-
-//     components && Component.checkId(components, styles, list, opts);
-//   });
-// };

src/dom_components/model/ComponentMap.ts

@@ -2,7 +2,7 @@ import ComponentImage from './ComponentImage';
 import { toLowerCase } from '../../utils/mixins';
 
 export default class ComponentMap extends ComponentImage {
-  // @ts-ignore
+  /** @ts-ignore */
   get defaults() {
     // @ts-ignore
     const defs = super.defaults;

src/dom_components/model/Components.ts

@@ -5,7 +5,6 @@ import { AddOptions, Collection, ObjectAny } from '../../common';
 import { DomComponentsConfig } from '../config/config';
 import EditorModel from '../../editor/model/Editor';
 import ComponentManager from '..';
-import CssRules from '../../css_composer/model/CssRules';
 import CssRule from '../../css_composer/model/CssRule';
 import { ComponentAdd, ComponentDefinitionDefined, ComponentProperties } from './types';
 
@@ -69,8 +68,8 @@ export interface ComponentsOptions {
   domc?: ComponentManager;
 }
 
-// @ts-ignore
+export default class Components extends Collection</** @ts-ignore */
-export default class Components extends Collection<Component> {
+Component> {
   opt!: ComponentsOptions;
   config?: DomComponentsConfig;
   em!: EditorModel;
@@ -186,7 +185,7 @@ export default class Components extends Collection<Component> {
     removed.__postRemove();
   }
 
-  // @ts-ignore
+  /** @ts-ignore */
   model(attrs: Partial<ComponentProperties>, options: any) {
     const { opt } = options.collection;
     const em = opt.em as EditorModel;
@@ -237,7 +236,7 @@ export default class Components extends Collection<Component> {
     return parsed.html;
   }
 
-  // @ts-ignore
+  /** @ts-ignore */
   add(models: ComponentAdd, opt: AddOptions & { previousModels?: Component[]; keepIds?: string[] } = {}) {
     opt.keepIds = [...(opt.keepIds || []), ...getComponentIds(opt.previousModels)];
 

src/dom_components/view/ComponentView.ts

@@ -9,6 +9,7 @@ import { ObjectAny, View } from '../../common';
 import { ComponentOptions } from '../model/types';
 import EditorModel from '../../editor/model/Editor';
 import { DomComponentsConfig } from '../config/config';
+import Editor from '../../editor';
 
 type ClbObj = ReturnType<ComponentView['_clbObj']>;
 
@@ -19,17 +20,17 @@ interface Rect {
   right?: number;
 }
 
-// @ts-ignore
+export default class ComponentView extends View</** @ts-ignore */
-export default class ComponentView extends View<Component> {
+Component> {
-  // @ts-ignore
+  /** @ts-ignore */
   model!: Component;
 
-  // @ts-ignore
+  /** @ts-ignore */
   className() {
     return this.getClasses();
   }
 
-  // @ts-ignore
+  /** @ts-ignore */
   tagName() {
     return this.model.get('tagName')!;
   }
@@ -93,7 +94,7 @@ export default class ComponentView extends View<Component> {
   _clbObj() {
     const { em, model, el } = this;
     return {
-      editor: em && em.getEditor(),
+      editor: em?.getEditor() as Editor,
       model,
       el,
     };

src/dom_components/view/ComponentsView.ts

@@ -142,8 +142,7 @@ export default class ComponentsView extends View {
     models.each(model => this.addToCollection(model));
   }
 
-  // @ts-ignore
+  render(parent?: HTMLElement) {
-  render(parent: HTMLElement) {
     const el = this.el;
     const frag = document.createDocumentFragment();
     this.parentEl = parent || this.el;

src/domain_abstract/model/StyleableModel.ts

@@ -1,8 +1,7 @@
 import { isString, isArray, keys } from 'underscore';
 import { shallowDiff } from '../../utils/mixins';
 import ParserHtml from '../../parser/model/ParserHtml';
-import { Model, ObjectAny } from '../../common';
+import { Model, ObjectAny, ObjectHash } from '../../common';
-import { ObjectHash } from 'backbone';
 import Selectors from '../../selector_manager/model/Selectors';
 
 const parserHtml = ParserHtml();

src/editor/index.ts

@@ -54,12 +54,37 @@
  * ## Methods
  * @module docsjs.Editor
  */
-import { EventHandler } from 'backbone';
 import { IBaseModule } from '../abstract/Module';
+import AssetManager from '../asset_manager';
+import BlockManager from '../block_manager';
+import CanvasModule from '../canvas';
+import CodeManagerModule from '../code_manager';
+import CommandsModule from '../commands';
+import { EventHandler } from '../common';
+import CssComposer from '../css_composer';
+import CssRule from '../css_composer/model/CssRule';
+import CssRules from '../css_composer/model/CssRules';
+import DeviceManager from '../device_manager';
+import ComponentManager from '../dom_components';
 import Component from '../dom_components/model/Component';
+import Components from '../dom_components/model/Components';
+import ComponentWrapper from '../dom_components/model/ComponentWrapper';
+import I18nModule from '../i18n';
+import KeymapsModule from '../keymaps';
+import ModalModule from '../modal_dialog';
+import LayerManager from '../navigator';
+import PageManager from '../pages';
+import PanelManager from '../panels';
+import ParserModule from '../parser';
 import { CustomParserCss } from '../parser/config/config';
+import RichTextEditorModule from '../rich_text_editor';
+import SelectorManager from '../selector_manager';
+import StorageManager from '../storage_manager';
 import { ProjectData } from '../storage_manager/model/IStorage';
-import cash from '../utils/cash-dom';
+import StyleManager from '../style_manager';
+import TraitManager from '../trait_manager';
+import UndoManagerModule from '../undo_manager';
+import UtilsModule from '../utils';
 import html from '../utils/html';
 import defaults, { EditorConfig, EditorConfigKeys } from './config/config';
 import EditorModel from './model/Editor';
@@ -79,7 +104,7 @@ type EditorModelParam<T extends keyof EditorModel, N extends number> = Parameter
 export default class Editor implements IBaseModule<EditorConfig> {
   editorView?: EditorView;
   editor: EditorModel;
-  $: typeof cash;
+  $: any;
   em: EditorModel;
   config: EditorConfigType;
 
@@ -100,100 +125,100 @@ export default class Editor implements IBaseModule<EditorConfig> {
   get Config() {
     return this.em.config;
   }
-  get I18n() {
+  get I18n(): I18nModule {
     return this.em.I18n;
   }
-  get Utils() {
+  get Utils(): UtilsModule {
     return this.em.Utils;
   }
-  get Commands() {
+  get Commands(): CommandsModule {
     return this.em.Commands;
   }
-  get Keymaps() {
+  get Keymaps(): KeymapsModule {
     return this.em.Keymaps;
   }
-  get Modal() {
+  get Modal(): ModalModule {
     return this.em.Modal;
   }
-  get Panels() {
+  get Panels(): PanelManager {
     return this.em.Panels;
   }
-  get Canvas() {
+  get Canvas(): CanvasModule {
     return this.em.Canvas;
   }
-  get Parser() {
+  get Parser(): ParserModule {
     return this.em.Parser;
   }
-  get CodeManager() {
+  get CodeManager(): CodeManagerModule {
     return this.em.CodeManager;
   }
-  get UndoManager() {
+  get UndoManager(): UndoManagerModule {
     return this.em.UndoManager;
   }
-  get RichTextEditor() {
+  get RichTextEditor(): RichTextEditorModule {
     return this.em.RichTextEditor;
   }
-  get Pages() {
+  get Pages(): PageManager {
     return this.em.Pages;
   }
-  get Components() {
+  get Components(): ComponentManager {
     return this.em.Components;
   }
-  get DomComponents() {
+  get DomComponents(): ComponentManager {
     return this.em.Components;
   }
-  get Layers() {
+  get Layers(): LayerManager {
     return this.em.Layers;
   }
-  get LayerManager() {
+  get LayerManager(): LayerManager {
     return this.em.Layers;
   }
-  get Css() {
+  get Css(): CssComposer {
     return this.em.Css;
   }
-  get CssComposer() {
+  get CssComposer(): CssComposer {
     return this.em.Css;
   }
-  get Storage() {
+  get Storage(): StorageManager {
     return this.em.Storage;
   }
-  get StorageManager() {
+  get StorageManager(): StorageManager {
     return this.em.Storage;
   }
-  get Assets() {
+  get Assets(): AssetManager {
     return this.em.Assets;
   }
-  get AssetManager() {
+  get AssetManager(): AssetManager {
     return this.em.Assets;
   }
-  get Blocks() {
+  get Blocks(): BlockManager {
     return this.em.Blocks;
   }
-  get BlockManager() {
+  get BlockManager(): BlockManager {
     return this.em.Blocks;
   }
-  get Traits() {
+  get Traits(): TraitManager {
     return this.em.Traits;
   }
-  get TraitManager() {
+  get TraitManager(): TraitManager {
     return this.em.Traits;
   }
-  get Selectors() {
+  get Selectors(): SelectorManager {
     return this.em.Selectors;
   }
-  get SelectorManager() {
+  get SelectorManager(): SelectorManager {
     return this.em.Selectors;
   }
-  get Styles() {
+  get Styles(): StyleManager {
     return this.em.Styles;
   }
-  get StyleManager() {
+  get StyleManager(): StyleManager {
     return this.em.Styles;
   }
-  get Devices() {
+  get Devices(): DeviceManager {
     return this.em.Devices;
   }
-  get DeviceManager() {
+  get DeviceManager(): DeviceManager {
     return this.em.Devices;
   }
 
@@ -251,7 +276,7 @@ export default class Editor implements IBaseModule<EditorConfig> {
    * Return the complete tree of components. Use `getWrapper` to include also the wrapper
    * @return {Components}
    */
-  getComponents() {
+  getComponents(): Components {
     return this.Components.getComponents();
   }
 
@@ -259,7 +284,7 @@ export default class Editor implements IBaseModule<EditorConfig> {
    * Return the wrapper and its all components
    * @return {Component}
    */
-  getWrapper() {
+  getWrapper(): ComponentWrapper | undefined {
     return this.Components.getWrapper();
   }
 
@@ -307,7 +332,7 @@ export default class Editor implements IBaseModule<EditorConfig> {
    * Returns style in JSON format object
    * @return {Object}
    */
-  getStyle() {
+  getStyle(): CssRules {
     return this.em.Css.getAll();
   }
 
@@ -335,7 +360,7 @@ export default class Editor implements IBaseModule<EditorConfig> {
    * @example
    * editor.addStyle('.cls{color: red}');
    */
-  addStyle(style: any, opts = {}) {
+  addStyle(style: any, opts = {}): CssRule[] {
     return this.em.addStyle(style, opts);
   }
 

src/editor/model/Editor.ts

@@ -38,8 +38,9 @@ import { HTMLGeneratorBuildOptions } from '../../code_manager/model/HtmlGenerato
 import { CssGeneratorBuildOptions } from '../../code_manager/model/CssGenerator';
 import ComponentView from '../../dom_components/view/ComponentView';
 import { ProjectData } from '../../storage_manager/model/IStorage';
+import CssRules from '../../css_composer/model/CssRules';
+import Frame from '../../canvas/model/Frame';
 
-//@ts-ignore
 Backbone.$ = $;
 
 const deps = [
@@ -70,8 +71,6 @@ const deps = [
 const ts_deps: any[] = [];
 
 Extender({
-  //@ts-ignore
-  Backbone: Backbone,
   $: Backbone.$,
 });
 
@@ -740,7 +739,7 @@ export default class EditorModel extends Model {
    * @return {Rules}
    * @private
    */
-  getStyle() {
+  getStyle(): CssRules {
     return this.Css.getAll();
   }
 
@@ -945,7 +944,7 @@ export default class EditorModel extends Model {
     return this.get('currentFrame');
   }
 
-  getCurrentFrameModel() {
+  getCurrentFrameModel(): Frame {
     return (this.getCurrentFrame() || {}).model;
   }
 

src/keymaps/index.ts

@@ -53,7 +53,7 @@ import defaults, { Keymap, KeymapOptions, KeymapsConfig } from './config';
 hasWin() && keymaster.init(window);
 
 export default class KeymapsModule extends Module<KeymapsConfig & { name?: string }> {
-  keymaster = keymaster;
+  keymaster: any = keymaster;
   keymaps: Record<string, Keymap>;
 
   constructor(em: EditorModel) {

src/modal_dialog/index.ts

@@ -33,7 +33,6 @@
  * @module Modal
  */
 
-import { EventHandler } from 'backbone';
 import { debounce, isFunction, isString } from 'underscore';
 import { Module } from '../abstract';
 import EditorView from '../editor/view/EditorView';
@@ -42,6 +41,7 @@ import { createText } from '../utils/dom';
 import defaults, { ModalConfig } from './config/config';
 import ModalM from './model/Modal';
 import ModalView from './view/ModalView';
+import { EventHandler } from '../common';
 
 export default class ModalModule extends Module<ModalConfig> {
   modal?: ModalView;

src/navigator/view/ItemView.ts

@@ -91,7 +91,7 @@ export default class ItemView extends View {
   module: any;
   config: any;
   sorter: any;
-  // @ts-ignore
+  /** @ts-ignore */
   model!: Component;
   parentView: ItemView;
   items?: ItemsView;

src/pages/index.ts

@@ -51,6 +51,7 @@ import { ItemManagerModule, ModuleConfig } from '../abstract/Module';
 import Pages from './model/Pages';
 import Page from './model/Page';
 import EditorModel from '../editor/model/Editor';
+import ComponentWrapper from '../dom_components/model/ComponentWrapper';
 
 export const evAll = 'page';
 export const evPfx = `${evAll}:`;
@@ -226,7 +227,7 @@ export default class PageManager extends ItemManagerModule<PageManagerConfig, Pa
    * // Get all `image` components from the project
    * const allImages = wrappers.map(wrp => wrp.findType('image')).flat();
    */
-  getAllWrappers() {
+  getAllWrappers(): ComponentWrapper[] {
     const pages = this.getAll();
     return unique(flatten(pages.map(page => page.getAllFrames().map(frame => frame.getComponent()))));
   }

src/pages/model/Page.ts

@@ -4,6 +4,7 @@ import Frames from '../../canvas/model/Frames';
 import Frame from '../../canvas/model/Frame';
 import EditorModel from '../../editor/model/Editor';
 import { PageManagerConfig } from '..';
+import ComponentWrapper from '../../dom_components/model/ComponentWrapper';
 
 export default class Page extends Model {
   defaults() {
@@ -73,8 +74,7 @@ export default class Page extends Model {
    * @example
    * const arrayOfFrames = page.getAllFrames();
    */
-  getAllFrames(): Frame[] {
+  getAllFrames() {
-    //@ts-ignore
     return this.getFrames().models || [];
   }
 
@@ -84,7 +84,7 @@ export default class Page extends Model {
    * @example
    * const mainFrame = page.getMainFrame();
    */
-  getMainFrame(): Frame {
+  getMainFrame() {
     return this.getFrames().at(0);
   }
 
@@ -95,7 +95,7 @@ export default class Page extends Model {
    * const rootComponent = page.getMainComponent();
    * console.log(rootComponent.toHTML());
    */
-  getMainComponent() {
+  getMainComponent(): ComponentWrapper {
     const frame = this.getMainFrame();
     return frame?.getComponent();
   }

src/selector_manager/index.ts

@@ -74,7 +74,7 @@
 
 import { isString, debounce, isObject, isArray, bindAll } from 'underscore';
 import { isComponent, isRule } from '../utils/mixins';
-import { Model, Collection, RemoveOptions } from '../common';
+import { Model, Collection, RemoveOptions, Debounced } from '../common';
 import defaults, { SelectorManagerConfig } from './config/config';
 import Selector from './model/Selector';
 import Selectors from './model/Selectors';
@@ -84,6 +84,7 @@ import EditorModel from '../editor/model/Editor';
 import Component from '../dom_components/model/Component';
 import { ItemManagerModule } from '../abstract/Module';
 import { StyleModuleParam } from '../style_manager';
+import StyleableModel from '../domain_abstract/model/StyleableModel';
 
 const isId = (str: string) => isString(str) && str[0] == '#';
 const isClass = (str: string) => isString(str) && str[0] == '.';
@@ -120,7 +121,7 @@ export default class SelectorManager extends ItemManagerModule<SelectorManagerCo
   selected: Selectors;
   all: Selectors;
   storageKey = '';
-  __update: ReturnType<typeof debounce>;
+  __update: Debounced;
 
   /**
    * Get configuration object
@@ -161,7 +162,6 @@ export default class SelectorManager extends ItemManagerModule<SelectorManagerCo
     this.em.trigger(this.events.custom, this.__customData(opts));
   }
 
-  // @ts-ignore
   getAll<T extends { array?: boolean }>(opts: T = {} as T) {
     return (this.all ? (opts.array ? [...this.all.models] : this.all) : []) as T['array'] extends true
       ? Selector[]
@@ -428,7 +428,7 @@ export default class SelectorManager extends ItemManagerModule<SelectorManagerCo
    * const targetsToStyle = selectorManager.getSelectedTargets();
    * console.log(targetsToStyle.map(target => target.getSelectorsString()))
    */
-  getSelectedTargets() {
+  getSelectedTargets(): StyleableModel[] {
     return this.em.Styles.getSelectedAll();
   }
 
@@ -475,7 +475,6 @@ export default class SelectorManager extends ItemManagerModule<SelectorManagerCo
    * @return {HTMLElement}
    * @private
    */
-  // @ts-ignore
   render(selectors: any[]) {
     const { selectorTags } = this;
     const config = this.getConfig();

src/storage_manager/index.ts

@@ -265,7 +265,7 @@ export default class StorageManager extends Module<
     });
   }
 
-  getRecovery() {
+  getRecovery(): StorageManagerConfig['recovery'] {
     return this.config.recovery;
   }
 

src/style_manager/index.ts

@@ -65,7 +65,7 @@
 
 import { isUndefined, isArray, isString, debounce, bindAll } from 'underscore';
 import { isComponent } from '../utils/mixins';
-import { AddOptions, Model } from '../common';
+import { AddOptions, Debounced, Model } from '../common';
 import defaults, { StyleManagerConfig } from './config/config';
 import Sector, { SectorProperties } from './model/Sector';
 import Sectors from './model/Sectors';
@@ -115,11 +115,11 @@ const events = {
 
 export default class StyleManager extends ItemManagerModule<
   StyleManagerConfig,
-  // @ts-ignore
+  /** @ts-ignore */
   Sectors
 > {
   builtIn: PropertyFactory;
-  upAll: ReturnType<typeof debounce>;
+  upAll: Debounced;
   properties: typeof Properties;
   sectors: Sectors;
   SectView!: SectorsView;

src/style_manager/model/Property.ts

@@ -106,7 +106,7 @@ export default class Property<T extends Record<string, any> = PropertyProps> ext
     return result(this.prototype, 'defaults');
   }
 
-  // @ts-ignore
+  /** @ts-ignore */
   defaults() {
     return {
       name: '',

src/style_manager/model/Sectors.ts

@@ -13,7 +13,7 @@ export default class Sectors extends Collection<Sector> {
     this.listenTo(this, 'reset', this.onReset);
   }
 
-  // @ts-ignore
+  /** @ts-ignore */
   model(props, opts = {}) {
     // @ts-ignore
     const { em } = opts.collection;

src/trait_manager/model/Traits.ts

@@ -33,7 +33,7 @@ export default class Traits extends Collection<Trait> {
     this.target = target;
   }
 
-  // @ts-ignore
+  /** @ts-ignore */
   add(models: string | Trait | TraitProperties | (string | Trait | TraitProperties)[], opt?: AddOptions) {
     const em = this.em;
 

src/trait_manager/view/TraitView.ts

@@ -27,7 +27,7 @@ export default class TraitView extends View<Trait> {
 
   appendInput = true;
 
-  // @ts-ignore
+  /** @ts-ignore */
   attributes() {
     return this.model.get('attributes') || {};
   }

src/utils/Sorter.ts

@@ -111,7 +111,7 @@ export default class Sorter extends View {
   $plh?: any;
   toMove?: Model | Model[];
 
-  // @ts-ignore todo move to simple class
+  /** @ts-ignore */
   initialize(opt: SorterOptions = {}) {
     this.opt = opt || {};
     bindAll(this, 'startSort', 'onMove', 'endMove', 'rollback', 'updateOffset', 'moveDragHelper');

src/utils/cash-dom.ts

@@ -1386,4 +1386,4 @@ fn.siblings = function () {
 // @optional offset/index.js
 // @optional traversal/index.js
 // @require core/index.js
-export default cash;
+export default cash as any;

src/utils/extender.ts

@@ -20,37 +20,6 @@ export default ({ $ }: { $: any }) => {
       return this;
     };
 
-    // For SVGs in IE
-    // (fn.removeClass = function(c) {
-    //   if (!arguments.length) {
-    //     return this.attr('class', '');
-    //   }
-    //   const classes = isString(c) && c.match(/\S+/g);
-    //   return classes
-    //     ? this.each(function(el) {
-    //         each(classes, function(c) {
-    //           if (el.classList) {
-    //             el.classList.remove(c);
-    //           } else {
-    //             const val = el.className;
-    //             const bval = el.className.baseVal;
-
-    //             if (!isUndefined(bval)) {
-    //               val.baseVal = bval.replace(c, '');
-    //             } else {
-    //               el.className = val.replace(c, '');
-    //             }
-    //           }
-    //         });
-    //       })
-    //     : this;
-    // }),
-    //   (fn.remove = function() {
-    //     return this.each(node => {
-    //       return node.parentNode && node.parentNode.removeChild(node);
-    //     });
-    //   }),
-
     // For spectrum compatibility
 
     fn.bind = function (ev: any, h: any) {