Refactor TS

src/abstract/Module.ts

@@ -174,14 +174,15 @@ export abstract class ItemManagerModule<
     return this;
   }
 
-  getAll(): TCollection extends Collection<infer C> ? C[] : unknown[] {
-    return [...this.all.models] as any;
+  // getAll(): TCollection extends Collection<infer C> ? C[] : TCollection {
+  getAll() {
+    return [...this.all.models] as TCollection | any;
   }
 
   getAllMap(): {
     [key: string]: TCollection extends Collection<infer C> ? C : unknown;
   } {
-    return this.getAll().reduce((acc, i) => {
+    return this.getAll().reduce((acc: any, i: any) => {
       acc[i.get(i.idAttribute)] = i;
       return acc;
     }, {} as any);

src/abstract/Collection.ts → src/abstract/ModuleCollection.ts

@@ -1,12 +1,12 @@
 import Backbone, { AddOptions } from 'backbone';
-import { isArray, isObject, isUndefined } from 'underscore';
-import Model from './Model';
+import { isArray, isUndefined } from 'underscore';
+import ModuleModel from './ModuleModel';
 
-type Module<TModel extends Model> = TModel extends Model<infer M> ? M : unknown;
-type ModelConstructor<TModel extends Model> = { new (mod: Module<TModel>, attr: any): TModel };
+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 Collection<TModel extends Model = Model> extends Backbone.Collection<TModel> {
-  module!: Module<TModel>;
+export default class ModuleCollection<TModel extends ModuleModel = ModuleModel> extends Backbone.Collection<TModel> {
+  module!: ModuleExt<TModel>;
   private newModel!: ModelConstructor<TModel>;
 
   add(model: Array<Record<string, any>> | TModel, options?: AddOptions): TModel;
@@ -21,7 +21,7 @@ export default class Collection<TModel extends Model = Model> extends Backbone.C
   }
 
   constructor(
-    module: Module<TModel>,
+    module: ModuleExt<TModel>,
     models: TModel[] | Array<Record<string, any>>,
     modelConstructor: ModelConstructor<TModel>
   ) {

src/abstract/DomainViews.ts → src/abstract/ModuleDomainViews.ts

@@ -1,13 +1,12 @@
-import { includes } from 'underscore';
 import Backbone from 'backbone';
-import View from './View';
-import Collection from './Collection';
-import Model from './Model';
-
-export default abstract class DomainViews<
-  TCollection extends Collection,
-  TItemView extends View
-> extends View<TCollection> {
+import ModuleView from './ModuleView';
+import ModuleCollection from './ModuleCollection';
+import ModuleModel from './ModuleModel';
+
+export default abstract class ModuleDomainViews<
+  TCollection extends ModuleCollection,
+  TItemView extends ModuleView
+> extends ModuleView<TCollection> {
   // Defines the View per type
   itemsView = '';
 
@@ -23,10 +22,10 @@ export default abstract class DomainViews<
 
   /**
    * Add new model to the collection
-   * @param {Model} model
+   * @param {ModuleModel} model
    * @private
    * */
-  private addTo(model: Model) {
+  private addTo(model: ModuleModel) {
     this.add(model);
   }
 
@@ -35,15 +34,15 @@ export default abstract class DomainViews<
     const warn = `${ns ? `[${ns}]: ` : ''}'${type}' type not found`;
     em?.logWarning(warn);*/
   }
-  protected abstract renderView(model: Model, itemType: string): TItemView;
+  protected abstract renderView(model: ModuleModel, itemType: string): TItemView;
 
   /**
    * Render new model inside the view
-   * @param {Model} model
+   * @param {ModuleModel} model
    * @param {Object} fragment Fragment collection
    * @private
    * */
-  private add(model: Model, fragment?: DocumentFragment) {
+  private add(model: ModuleModel, fragment?: DocumentFragment) {
     const { reuseView, viewCollection, itemsView = {} } = this;
     var frag = fragment || null;
     var typeField = model.get(this.itemType);

src/abstract/Model.ts → src/abstract/ModuleModel.ts

@@ -1,7 +1,7 @@
 import Backbone from 'backbone';
 import Module, { IBaseModule } from './Module';
 
-export default class Model<
+export default class ModuleModel<
   TModule extends IBaseModule<any> = Module,
   T extends Backbone.ObjectHash = any,
   S = Backbone.ModelSetOptions,
@@ -9,11 +9,7 @@ export default class Model<
 > extends Backbone.Model<T, S, E> {
   private _module: TModule;
 
-  constructor(
-    module: TModule,
-    attributes?: T,
-    options?: Backbone.CombinedModelConstructorOptions<E>
-  ) {
+  constructor(module: TModule, attributes?: T, options?: Backbone.CombinedModelConstructorOptions<E>) {
     super(attributes, options);
     this._module = module;
   }

src/abstract/ModuleView.ts

@@ -0,0 +1,46 @@
+import Backbone from 'backbone';
+import ModuleCollection from './ModuleCollection';
+import ModuleModel from './ModuleModel';
+import { IBaseModule } from './Module';
+
+type ModuleFromModel<TModel extends ModuleModel> = TModel extends ModuleModel<infer M> ? M : unknown;
+type ModuleModelExt<TItem extends ModuleModel | ModuleCollection> = TItem extends ModuleCollection<infer M>
+  ? ModuleFromModel<M>
+  : TItem extends ModuleModel<infer M>
+  ? M
+  : unknown;
+
+// type TCollection<TItem extends ModuleModel | ModuleCollection> = TItem extends ModuleCollection ? TItem : unknown;
+
+export default class ModuleView<
+  TModel extends ModuleModel | ModuleCollection = ModuleModel,
+  TElement extends Element = HTMLElement
+> extends Backbone.View<TModel extends ModuleModel ? TModel : undefined, TElement> {
+  protected get pfx() {
+    return this.ppfx + (this.config as any).stylePrefix || '';
+  }
+
+  protected get ppfx() {
+    return this.em.config.stylePrefix || '';
+  }
+
+  collection!: TModel extends ModuleModel ? ModuleCollection<ModuleModel> : TModel;
+
+  protected get module(): ModuleModelExt<TModel> {
+    return (this.model as any)?.module ?? this.collection.module;
+  }
+
+  protected get em() {
+    return this.module.em;
+  }
+
+  protected get config(): ModuleModelExt<TModel> extends IBaseModule<infer C> ? C : unknown {
+    return this.module.config as any;
+  }
+
+  public className!: string;
+
+  preinitialize(options?: any) {
+    this.className = '';
+  }
+}

src/abstract/View.ts

@@ -1,46 +0,0 @@
-import Backbone from 'backbone';
-import Collection from './Collection';
-import Model from './Model';
-import { IBaseModule } from './Module';
-
-type ModuleFromModel<TModel extends Model> = TModel extends Model<infer M> ? M : unknown;
-type Module<TItem extends Model | Collection> = TItem extends Collection<infer M>
-  ? ModuleFromModel<M>
-  : TItem extends Model<infer M>
-  ? M
-  : unknown;
-
-type TCollection<TItem extends Model | Collection> = TItem extends Collection ? TItem : unknown;
-
-export default class View<
-  TModel extends Model | Collection = Model,
-  TElement extends Element = HTMLElement
-> extends Backbone.View<TModel extends Model ? TModel : undefined, TElement> {
-  protected get pfx() {
-    return this.ppfx + (this.config as any).stylePrefix || '';
-  }
-
-  protected get ppfx() {
-    return this.em.config.stylePrefix || '';
-  }
-
-  collection!: TModel extends Model ? Collection<Model> : TModel;
-
-  protected get module(): Module<TModel> {
-    return (this.model as any)?.module ?? this.collection.module;
-  }
-
-  protected get em() {
-    return this.module.em;
-  }
-
-  protected get config(): Module<TModel> extends IBaseModule<infer C> ? C : unknown {
-    return this.module.config as any;
-  }
-
-  public className!: string;
-
-  preinitialize(options?: any) {
-    this.className = '';
-  }
-}

src/abstract/index.ts

@@ -1,4 +1,4 @@
-export { default as Model } from './Model';
-export { default as Collection } from './Collection';
-export { default as View } from './View';
+export { default as ModuleModel } from './ModuleModel';
+export { default as ModuleCollection } from './ModuleCollection';
+export { default as ModuleView } from './ModuleView';
 export { default as Module } from './Module';

src/asset_manager/index.ts

@@ -50,7 +50,7 @@ import defaults, { AssetManagerConfig } from './config/config';
 import Asset from './model/Asset';
 import Assets from './model/Assets';
 import AssetsView from './view/AssetsView';
-import FileUpload from './view/FileUploader';
+import FileUploaderView from './view/FileUploader';
 
 export const evAll = 'asset';
 export const evPfx = `${evAll}:`;
@@ -100,7 +100,7 @@ export default class AssetManager extends ItemManagerModule<AssetManagerConfig,
   Assets = Assets;
   assetsVis: Assets;
   am?: AssetsView;
-  fu?: FileUpload;
+  fu?: FileUploaderView;
   _bhv?: any;
 
   /**
@@ -147,7 +147,7 @@ export default class AssetManager extends ItemManagerModule<AssetManagerConfig,
   __customData() {
     const bhv = this.__getBehaviour();
     return {
-      am: this,
+      am: this as AssetManager,
       open: this.isOpen(),
       assets: this.getAll().models,
       types: bhv.types || [],
@@ -256,7 +256,6 @@ export default class AssetManager extends ItemManagerModule<AssetManagerConfig,
    * Return the global collection, containing all the assets
    * @returns {Collection<[Asset]>}
    */
-  // @ts-ignore
   getAll() {
     return this.all;
   }
@@ -344,7 +343,7 @@ export default class AssetManager extends ItemManagerModule<AssetManagerConfig,
       collection: this.assetsVis, // Collection visible in asset manager
       globalCollection: this.all,
       config: this.config,
-      module: this,
+      module: this as AssetManager,
       fu: undefined as any,
     };
   }
@@ -395,7 +394,7 @@ export default class AssetManager extends ItemManagerModule<AssetManagerConfig,
 
   FileUploader() {
     if (!this.fu) {
-      this.fu = new FileUpload(this.__viewParams());
+      this.fu = new FileUploaderView(this.__viewParams());
     }
     return this.fu;
   }

src/block_manager/config/config.ts

@@ -1,4 +1,4 @@
-import EditorModule from '../../editor';
+import Editor from '../../editor';
 import Block, { BlockProperties } from '../model/Block';
 
 export interface BlockManagerConfig {
@@ -29,7 +29,7 @@ export interface BlockManagerConfig {
    *    editor.getWrapper().append(block.get('content'))
    * }
    */
-  appendOnClick?: boolean | ((block: Block, editor: EditorModule, opts: { event: Event }) => void);
+  appendOnClick?: boolean | ((block: Block, editor: Editor, opts: { event: Event }) => void);
   /**
    * Avoid rendering the default block manager UI.
    * More about it here: https://grapesjs.com/docs/modules/Blocks.html#customization

src/block_manager/index.ts

@@ -126,7 +126,7 @@ export default class BlockManager extends ItemManagerModule<BlockManagerConfig,
   __customData() {
     const bhv = this.__getBehaviour();
     return {
-      bm: this,
+      bm: this as BlockManager,
       blocks: this.getAll().models,
       container: bhv.container,
       dragStart: (block: Block, ev: Event) => this.startDrag(block, ev),
@@ -261,7 +261,6 @@ export default class BlockManager extends ItemManagerModule<BlockManagerConfig,
    * console.log(JSON.stringify(blocks));
    * // [{label: 'Heading', content: '<h1>Put your ...'}, ...]
    */
-  // @ts-ignore
   getAll() {
     return this.blocks;
   }

src/block_manager/model/Block.ts

@@ -1,6 +1,6 @@
 import { Model } from '../../common';
 import { isFunction } from 'underscore';
-import EditorModule from '../../editor';
+import Editor from '../../editor';
 import { BlockCategoryProperties } from './Category';
 import { ComponentDefinition } from '../../dom_components/model/types';
 
@@ -49,7 +49,7 @@ export interface BlockProperties {
    * @example
    * onClick: (block, editor) => editor.getWrapper().append(block.get('content'))
    */
-  onClick?: (block: Block, editor: EditorModule) => void;
+  onClick?: (block: Block, editor: Editor) => void;
   /**
    * Block attributes
    */

src/canvas/model/Canvas.ts

@@ -1,11 +1,11 @@
-import { Model } from '../../abstract';
+import { ModuleModel } from '../../abstract';
 import { evPageSelect } from '../../pages';
 import { evUpdate as evDeviceUpdate } from '../../device_manager';
 import Frames from './Frames';
 import Page from '../../pages/model/Page';
 import CanvasModule from '..';
 
-export default class Canvas extends Model<CanvasModule> {
+export default class Canvas extends ModuleModel<CanvasModule> {
   defaults() {
     return {
       frame: '',

src/canvas/model/Frame.ts

@@ -1,5 +1,5 @@
 import { result, forEach, isEmpty, isString } from 'underscore';
-import { Model } from '../../abstract';
+import { ModuleModel } from '../../abstract';
 import CanvasModule from '..';
 import ComponentWrapper from '../../dom_components/model/ComponentWrapper';
 import { isComponent, isObject } from '../../utils/mixins';
@@ -17,7 +17,7 @@ const keyAutoH = '__ah';
  * @property {Number} [y=0] Vertical position of the frame in the canvas.
  *
  */
-export default class Frame extends Model<CanvasModule> {
+export default class Frame extends ModuleModel<CanvasModule> {
   defaults() {
     return {
       x: 0,
@@ -182,7 +182,7 @@ export default class Frame extends Model<CanvasModule> {
   }
 
   toJSON(opts: any = {}) {
-    const obj = Model.prototype.toJSON.call(this, opts);
+    const obj = ModuleModel.prototype.toJSON.call(this, opts);
     const defaults = result(this, 'defaults');
 
     if (opts.fromUndo) delete obj.component;

src/canvas/model/Frames.ts

@@ -1,10 +1,10 @@
 import { bindAll } from 'underscore';
 import CanvasModule from '..';
-import { Collection } from '../../abstract';
+import { ModuleCollection } from '../../abstract';
 import Page from '../../pages/model/Page';
 import Frame from './Frame';
 
-export default class Frames extends Collection<Frame> {
+export default class Frames extends ModuleCollection<Frame> {
   loadedItems = 0;
   itemsToLoad = 0;
   page?: Page;

src/canvas/view/CanvasView.ts

@@ -1,5 +1,5 @@
 import { bindAll } from 'underscore';
-import { View } from '../../abstract';
+import { ModuleView } from '../../abstract';
 import { on, off, getElement, getKeyChar, isTextNode, getElRect, getUiClass } from '../../utils/mixins';
 import { createEl } from '../../utils/dom';
 import FramesView from './FramesView';
@@ -8,7 +8,7 @@ import FrameView from './FrameView';
 import ComponentView from '../../dom_components/view/ComponentView';
 import Component from '../../dom_components/model/Component';
 
-interface MarginPaddingOffsets {
+export interface MarginPaddingOffsets {
   marginTop?: number;
   marginRight?: number;
   marginBottom?: number;
@@ -18,7 +18,8 @@ interface MarginPaddingOffsets {
   paddingBottom?: number;
   paddingLeft?: number;
 }
-export default class CanvasView extends View<Canvas> {
+
+export default class CanvasView extends ModuleView<Canvas> {
   events() {
     return {
       wheel: 'onWheel',
@@ -104,7 +105,7 @@ export default class CanvasView extends View<Canvas> {
     this.frames?.remove();
     //@ts-ignore
     this.frames = undefined;
-    View.prototype.remove.apply(this, args);
+    ModuleView.prototype.remove.apply(this, args);
     this.toggleListeners(false);
     return this;
   }
@@ -314,7 +315,7 @@ export default class CanvasView extends View<Canvas> {
 
   /**
    * Update javascript of a specific component passed by its View
-   * @param {View} view Component's View
+   * @param {ModuleView} view Component's View
    * @private
    */
   //TODO change type after the ComponentView was updated to ts

src/canvas/view/FrameView.ts

@@ -1,15 +1,14 @@
 import { bindAll, isString, debounce, isUndefined } from 'underscore';
 import { appendVNodes, append, createEl, createCustomEvent, motionsEv } from '../../utils/dom';
 import { on, off, setViewEl, hasDnd, getPointerEvent } from '../../utils/mixins';
-import { View } from '../../abstract';
+import { ModuleView } from '../../abstract';
 import CssRulesView from '../../css_composer/view/CssRulesView';
 import Droppable from '../../utils/Droppable';
 import Frame from '../model/Frame';
 import Canvas from '../model/Canvas';
-import ComponentWrapper from '../../dom_components/model/ComponentWrapper';
 import FrameWrapView from './FrameWrapView';
 
-export default class FrameView extends View<Frame, HTMLIFrameElement> {
+export default class FrameView extends ModuleView<Frame, HTMLIFrameElement> {
   //@ts-ignore
   get tagName() {
     return 'iframe';
@@ -184,7 +183,7 @@ export default class FrameView extends View<Frame, HTMLIFrameElement> {
     this._toggleEffects(false);
     this.tools = {};
     wrp && wrp.remove();
-    View.prototype.remove.apply(this, args);
+    ModuleView.prototype.remove.apply(this, args);
     return this;
   }
 

src/canvas/view/FrameWrapView.ts

@@ -1,12 +1,12 @@
 import { bindAll, isNumber, isNull, debounce } from 'underscore';
-import { View } from '../../abstract';
+import { ModuleView } from '../../abstract';
 import FrameView from './FrameView';
 import { createEl, removeEl } from '../../utils/dom';
 import Dragger from '../../utils/Dragger';
 import CanvasView from './CanvasView';
 import Frame from '../model/Frame';
 
-export default class FrameWrapView extends View<Frame> {
+export default class FrameWrapView extends ModuleView<Frame> {
   events() {
     return {
       'click [data-action-remove]': 'remove',
@@ -77,7 +77,7 @@ export default class FrameWrapView extends View<Frame> {
 
   remove(opts?: any) {
     this.__clear(opts);
-    View.prototype.remove.apply(this, opts);
+    ModuleView.prototype.remove.apply(this, opts);
     //@ts-ignore
     ['frame', 'dragger', 'cv', 'elTools'].forEach(i => (this[i] = 0));
     return this;

src/canvas/view/FramesView.ts

@@ -1,18 +1,18 @@
 import CanvasModule from '..';
-import DomainViews from '../../abstract/DomainViews';
+import ModuleDomainViews from '../../abstract/ModuleDomainViews';
 import Frames from '../model/Frames';
 import CanvasView from './CanvasView';
 import FrameWrapView from './FrameWrapView';
 
-export default class FramesView extends DomainViews<Frames, FrameWrapView> {
+export default class FramesView extends ModuleDomainViews<Frames, FrameWrapView> {
   canvasView: CanvasView;
   private _module: CanvasModule;
-  
+
   constructor(opts = {}, config: any) {
     super(opts, true);
     //console.log(this.collection)
     this.listenTo(this.collection, 'reset', this.render);
-    this.canvasView = config.canvasView
+    this.canvasView = config.canvasView;
     this._module = config.module;
   }
 
@@ -24,5 +24,7 @@ export default class FramesView extends DomainViews<Frames, FrameWrapView> {
     const { $el, ppfx } = this;
     $el.attr({ class: `${ppfx}frames` });
   }
-  protected renderView(item: any, type: string){return new FrameWrapView(item, this.canvasView)}
+  protected renderView(item: any, type: string) {
+    return new FrameWrapView(item, this.canvasView);
+  }
 }

src/code_manager/index.ts

@@ -24,7 +24,7 @@ import gCss from './model/CssGenerator';
 import gJson from './model/JsonGenerator';
 import gJs from './model/JsGenerator';
 import eCM from './model/CodeMirrorEditor';
-import editorView from './view/EditorView';
+import CodeEditorView from './view/EditorView';
 import { Module } from '../abstract';
 import EditorModel from '../editor/model/Editor';
 
@@ -36,7 +36,7 @@ export default class CodeManagerModule extends Module<CodeManagerConfig & { pSty
   generators: Record<string, any>;
   viewers: Record<string, any>;
 
-  EditorView = editorView;
+  EditorView = CodeEditorView;
 
   constructor(em: EditorModel) {
     super(em, 'CodeManager', defaults);

src/code_manager/view/EditorView.ts

@@ -1,7 +1,7 @@
 import { View } from '../../common';
 import html from '../../utils/html';
 
-export default class EditorView extends View {
+export default class CodeEditorView extends View {
   pfx?: string;
   config!: Record<string, any>;
 

src/commands/index.ts

@@ -43,17 +43,12 @@
  */
 
 import { isFunction, includes } from 'underscore';
-import CommandAbstract, {
-  Command,
-  CommandOptions,
-  CommandObject,
-  CommandFunction,
-  AnyObject,
-} from './view/CommandAbstract';
+import CommandAbstract, { Command, CommandOptions, CommandObject, CommandFunction } from './view/CommandAbstract';
 import defaults, { CommandsConfig } from './config/config';
 import { Module } from '../abstract';
 import { eventDrag } from '../dom_components/model/Component';
 import Editor from '../editor/model/Editor';
+import { ObjectAny } from '../common';
 
 const commandsDef = [
   ['preview', 'Preview', 'preview'],
@@ -237,7 +232,7 @@ export default class CommandsModule extends Module<CommandsConfig & { pStylePref
    * // As a function
    * commands.add('myCommand2', editor => { ... });
    * */
-  add<T extends AnyObject = {}>(id: string, command: CommandFunction | CommandObject<any, T>) {
+  add<T extends ObjectAny = {}>(id: string, command: CommandFunction | CommandObject<any, T>) {
     let result: CommandObject = isFunction(command) ? { run: command } : command;
 
     if (!result.stop) {

src/commands/view/CommandAbstract.ts

@@ -1,32 +1,30 @@
 import CanvasModule from '../../canvas';
-import { Model } from '../../common';
+import { Model, ObjectAny } from '../../common';
 import Editor from '../../editor';
 import EditorModel from '../../editor/model/Editor';
 
-interface ICommand<O extends AnyObject = any> {
+interface ICommand<O extends ObjectAny = any> {
   run?: CommandAbstract<O>['run'];
   stop?: CommandAbstract<O>['stop'];
   id?: string;
   [key: string]: unknown;
 }
 
-export type CommandFunction<O extends AnyObject = any> = CommandAbstract<O>['run'];
+export type CommandFunction<O extends ObjectAny = any> = CommandAbstract<O>['run'];
 
 export type Command = CommandObject | CommandFunction;
 
 export type CommandOptions = Record<string, any>;
 
-export type AnyObject = Record<string, any>;
-
-export type CommandObject<O extends AnyObject = any, T extends AnyObject = {}> = ICommand<O> &
+export type CommandObject<O extends ObjectAny = any, T extends ObjectAny = {}> = ICommand<O> &
   T &
   ThisType<T & CommandAbstract<O>>;
 
-export function defineCommand<O extends AnyObject = any, T extends AnyObject = {}>(def: CommandObject<O, T>) {
+export function defineCommand<O extends ObjectAny = any, T extends ObjectAny = {}>(def: CommandObject<O, T>) {
   return def;
 }
 
-export default class CommandAbstract<O extends AnyObject = any> extends Model {
+export default class CommandAbstract<O extends ObjectAny = any> extends Model {
   config: any;
   em: EditorModel;
   pfx: string;

src/common/index.ts

@@ -11,3 +11,8 @@ export type RemoveOptions = Backbone.Silenceable;
 export type ObjectAny = Record<string, any>;
 
 export type ObjectStrings = Record<string, string>;
+
+export type Position = {
+  x: number;
+  y: number;
+};

src/css_composer/index.ts

@@ -38,6 +38,7 @@ import CssRulesView from './view/CssRulesView';
 import { ItemManagerModule } from '../abstract/Module';
 import EditorModel from '../editor/model/Editor';
 import Component from '../dom_components/model/Component';
+import { ObjectAny } from '../common';
 
 type RuleOptions = {
   atRuleType?: string;
@@ -45,7 +46,6 @@ type RuleOptions = {
 };
 
 type CssRuleStyle = Required<CssRuleProperties>['style'];
-type AnyObject = Record<string, any>;
 
 export default class CssComposer extends ItemManagerModule<CssComposerConfig & { pStylePrefix?: string }> {
   rules: CssRules;
@@ -178,8 +178,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
     return this.rules.find(rule => rule.compare(slc, state, width, ruleProps)) || null;
   }
 
-  // @ts-ignore
-  getAll() {
+  getAll(): CssRules {
     return this.rules;
   }
 
@@ -354,7 +353,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    * // #myid { color: red }
    * // #myid:hover { color: blue }
    */
-  setIdRule(name: string, style: CssRuleStyle = {}, opts: AnyObject = {}) {
+  setIdRule(name: string, style: CssRuleStyle = {}, opts: ObjectAny = {}) {
     const { addOpts = {}, mediaText } = opts;
     const state = opts.state || '';
     const media = !isUndefined(mediaText) ? mediaText : this.em.getCurrentMedia();
@@ -375,7 +374,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    * const rule = css.getIdRule('myid');
    * const ruleHover = css.setIdRule('myid', { state: 'hover' });
    */
-  getIdRule(name: string, opts: AnyObject = {}) {
+  getIdRule(name: string, opts: ObjectAny = {}) {
     const { mediaText } = opts;
     const state = opts.state || '';
     const media = !isUndefined(mediaText) ? mediaText : this.em.getCurrentMedia();
@@ -397,7 +396,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    * // .myclass { color: red }
    * // .myclass:hover { color: blue }
    */
-  setClassRule(name: string, style: CssRuleStyle = {}, opts: AnyObject = {}) {
+  setClassRule(name: string, style: CssRuleStyle = {}, opts: ObjectAny = {}) {
     const state = opts.state || '';
     const media = opts.mediaText || this.em.getCurrentMedia();
     const sm = this.em.Selectors;
@@ -417,7 +416,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
    * const rule = css.getClassRule('myclass');
    * const ruleHover = css.getClassRule('myclass', { state: 'hover' });
    */
-  getClassRule(name: string, opts: AnyObject = {}) {
+  getClassRule(name: string, opts: ObjectAny = {}) {
     const state = opts.state || '';
     const media = opts.mediaText || this.em.getCurrentMedia();
     const selector = this.em.Selectors.get(name, Selector.TYPE_CLASS);
@@ -450,7 +449,7 @@ export default class CssComposer extends ItemManagerModule<CssComposerConfig & {
     return this;
   }
 
-  getComponentRules(cmp: Component, opts: AnyObject = {}) {
+  getComponentRules(cmp: Component, opts: ObjectAny = {}) {
     let { state, mediaText, current } = opts;
     if (current) {
       state = this.em.get('state') || '';

src/css_composer/model/CssRule.ts

@@ -1,5 +1,5 @@
 import { isEmpty, forEach, isString, isArray } from 'underscore';
-import { Model } from '../../common';
+import { Model, ObjectAny } from '../../common';
 import StyleableModel from '../../domain_abstract/model/StyleableModel';
 import Selectors from '../../selector_manager/model/Selectors';
 import { getMediaLength } from '../../code_manager/model/CssGenerator';
@@ -69,8 +69,6 @@ export interface CssRuleJSON extends Omit<CssRuleProperties, 'selectors'> {
   selectors: (string | SelectorProps)[];
 }
 
-type AnyObject = Record<string, any>;
-
 // @ts-ignore
 const { CSS } = hasWin() ? window : {};
 
@@ -187,7 +185,7 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
    * cssRule.selectorsToString(); // ".class1:hover"
    * cssRule.selectorsToString({ skipState: true }); // ".class1"
    */
-  selectorsToString(opts: AnyObject = {}) {
+  selectorsToString(opts: ObjectAny = {}) {
     const result = [];
     const state = this.get('state');
     const addSelector = this.get('selectorsAdd');
@@ -213,7 +211,7 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
    * });
    * cssRule.getDeclaration() // ".class1{color:red;}"
    */
-  getDeclaration(opts: AnyObject = {}) {
+  getDeclaration(opts: ObjectAny = {}) {
     let result = '';
     const { important } = this.attributes;
     const selectors = this.selectorsToString(opts);
@@ -284,7 +282,7 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
    * });
    * cssRule.toCSS() // "@media (min-width: 500px){.class1{color:red;}}"
    */
-  toCSS(opts: AnyObject = {}) {
+  toCSS(opts: ObjectAny = {}) {
     let result = '';
     const atRule = this.getAtRule();
     const block = this.getDeclaration(opts);

src/device_manager/index.ts

@@ -202,7 +202,6 @@ export default class DeviceManager extends ItemManagerModule<
     return this.get(this.em.get('device'));
   }
 
-  // @ts-ignore
   getAll() {
     return this.devices;
   }

src/dom_components/index.ts

@@ -97,10 +97,7 @@ import ComponentFrame from './model/ComponentFrame';
 import ComponentFrameView from './view/ComponentFrameView';
 import { ItemManagerModule } from '../abstract/Module';
 import EditorModel from '../editor/model/Editor';
-import { Model } from 'backbone';
-
-// TODO update once components are migrated to TS
-type ComponentDefinition = Record<string, any>;
+import { ComponentAdd } from './model/types';
 
 export default class ComponentManager extends ItemManagerModule {
   componentTypes = [
@@ -374,7 +371,7 @@ export default class ComponentManager extends ItemManagerModule {
    *   attributes: { title: 'here' }
    * });
    */
-  addComponent(component: Component | string | ComponentDefinition, opt = {}) {
+  addComponent(component: ComponentAdd, opt = {}) {
     return this.getComponents().add(component, opt);
   }
 

src/dom_components/model/Component.ts

@@ -34,7 +34,7 @@ import { DomComponentsConfig } from '../config/config';
 import ComponentView from '../view/ComponentView';
 import { AddOptions, ObjectAny, ObjectStrings, SetOptions } from '../../common';
 import CssRule, { CssRuleJSON, CssRuleProperties } from '../../css_composer/model/CssRule';
-import { TraitProperties } from '../../trait_manager/model/Trait';
+import Trait, { TraitProperties } from '../../trait_manager/model/Trait';
 import { ToolbarButtonProps } from './ToolbarButton';
 
 const escapeRegExp = (str: string) => {
@@ -1224,7 +1224,7 @@ export default class Component extends StyleableModel<ComponentProperties> {
    * console.log(traits);
    * // [Trait, Trait, Trait, ...]
    */
-  getTraits() {
+  getTraits(): Trait[] {
     this.__loadTraits();
     return [...this.traits.models];
   }

src/dom_components/model/ComponentSvgIn.ts

@@ -3,7 +3,7 @@ import ComponentSvg from './ComponentSvg';
 /**
  * Component for inner SVG elements
  */
-export default class ComponentSvgln extends ComponentSvg {
+export default class ComponentSvgIn extends ComponentSvg {
   get defaults() {
     return {
       // @ts-ignore

src/dom_components/model/Components.ts

@@ -216,7 +216,7 @@ export default class Components extends Collection<Component> {
         });
     }
 
-    return new model(attrs, options);
+    return new model(attrs, options) as Component;
   }
 
   parseString(value: string, opt: AddOptions & { temporary?: boolean; keepIds?: string[] } = {}) {

src/domain_abstract/model/StyleableModel.ts

@@ -1,12 +1,10 @@
 import { isString, isArray, keys } from 'underscore';
 import { shallowDiff } from '../../utils/mixins';
 import ParserHtml from '../../parser/model/ParserHtml';
-import { Model } from '../../common';
+import { Model, ObjectAny } from '../../common';
 import { ObjectHash } from 'backbone';
 import Selectors from '../../selector_manager/model/Selectors';
 
-type AnyObject = Record<string, any>;
-
 const parserHtml = ParserHtml();
 
 export default class StyleableModel<T extends ObjectHash = any> extends Model<T> {
@@ -25,7 +23,7 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
    * @param {Object} prop
    * @return {Object}
    */
-  extendStyle(prop: AnyObject): AnyObject {
+  extendStyle(prop: ObjectAny): ObjectAny {
     return { ...this.getStyle(), ...prop };
   }
 
@@ -33,9 +31,9 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
    * Get style object
    * @return {Object}
    */
-  getStyle(prop?: string | AnyObject) {
+  getStyle(prop?: string | ObjectAny) {
     const style = this.get('style') || {};
-    const result: AnyObject = { ...style };
+    const result: ObjectAny = { ...style };
     return prop && isString(prop) ? result[prop] : result;
   }
 
@@ -45,7 +43,7 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
    * @param {Object} opts
    * @return {Object} Applied properties
    */
-  setStyle(prop: string | AnyObject = {}, opts: AnyObject = {}) {
+  setStyle(prop: string | ObjectAny = {}, opts: ObjectAny = {}) {
     if (isString(prop)) {
       prop = this.parseStyle(prop);
     }
@@ -85,7 +83,7 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
    * this.addStyle({color: 'red'});
    * this.addStyle('color', 'blue');
    */
-  addStyle(prop: string | AnyObject, value = '', opts = {}) {
+  addStyle(prop: string | ObjectAny, value = '', opts = {}) {
     if (typeof prop == 'string') {
       prop = {
         prop: value,
@@ -113,7 +111,7 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
    * @param {Object} [opts={}] Options
    * @return {String}
    */
-  styleToString(opts: AnyObject = {}) {
+  styleToString(opts: ObjectAny = {}) {
     const result = [];
     const style = this.getStyle(opts);
 
@@ -132,7 +130,7 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
     return (this.get('selectors') || this.get('classes')) as Selectors;
   }
 
-  getSelectorsString(opts?: AnyObject) {
+  getSelectorsString(opts?: ObjectAny) {
     // @ts-ignore
     return this.selectorsToString ? this.selectorsToString(opts) : this.getSelectors().getFullString();
   }

src/domain_abstract/model/TypeableCollection.ts

@@ -2,7 +2,7 @@
 import { isFunction } from 'underscore';
 import { View, Model } from '../../common';
 
-export default {
+const TypeableCollection = {
   types: [],
 
   initialize(models, opts = {}) {
@@ -140,3 +140,5 @@ export default {
     }
   },
 };
+
+export default TypeableCollection;

src/editor/config/config.ts

@@ -21,8 +21,7 @@ import { StyleManagerConfig } from '../../style_manager/config/config';
 import { DomComponentsConfig } from '../../dom_components/config/config';
 import { HTMLGeneratorBuildOptions } from '../../code_manager/model/HtmlGenerator';
 import { CssGeneratorBuildOptions } from '../../code_manager/model/CssGenerator';
-
-type AnyObject = Record<string, any>;
+import { ObjectAny } from '../../common';
 
 export interface EditorConfig {
   /**
@@ -63,7 +62,7 @@ export interface EditorConfig {
   /**
    * Initial project data (JSON containing your components/styles/etc) to load.
    */
-  projectData?: AnyObject;
+  projectData?: ObjectAny;
 
   /**
    * HTML string or object of components
@@ -299,7 +298,7 @@ export interface EditorConfig {
    * Experimental: don't use.
    * Editor icons
    */
-  icons?: AnyObject;
+  icons?: ObjectAny;
 
   /**
    * Configurations for I18n.
@@ -420,7 +419,7 @@ export interface EditorConfig {
   /**
    * Color picker options.
    */
-  colorPicker?: AnyObject;
+  colorPicker?: ObjectAny;
   pStylePrefix?: string;
 }
 

src/editor/index.ts

@@ -52,16 +52,17 @@
  * Check the [Pages](/api/pages.html) module.
  *
  * ## Methods
- * @module Editor
+ * @module docsjs.Editor
  */
 import { EventHandler } from 'backbone';
 import { IBaseModule } from '../abstract/Module';
 import Component from '../dom_components/model/Component';
 import { CustomParserCss } from '../parser/config/config';
+import { ProjectData } from '../storage_manager/model/IStorage';
 import cash from '../utils/cash-dom';
 import html from '../utils/html';
 import defaults, { EditorConfig, EditorConfigKeys } from './config/config';
-import EditorModel, { ProjectData } from './model/Editor';
+import EditorModel from './model/Editor';
 import EditorView from './view/EditorView';
 
 export type ParsedRule = {
@@ -75,7 +76,7 @@ type EditorConfigType = EditorConfig & { pStylePrefix?: string };
 
 type EditorModelParam<T extends keyof EditorModel, N extends number> = Parameters<EditorModel[T]>[N];
 
-export default class EditorModule implements IBaseModule<EditorConfig> {
+export default class Editor implements IBaseModule<EditorConfig> {
   editorView?: EditorView;
   editor: EditorModel;
   $: typeof cash;

src/editor/model/Editor.ts

@@ -6,7 +6,7 @@ import { getModel, hasWin, isEmptyObj } from '../../utils/mixins';
 import { Model } from '../../common';
 import Selected from './Selected';
 import FrameView from '../../canvas/view/FrameView';
-import EditorModule from '..';
+import Editor from '..';
 import EditorView from '../view/EditorView';
 import { IModule } from '../../abstract/Module';
 import CanvasModule from '../../canvas';
@@ -37,10 +37,7 @@ import CssRule from '../../css_composer/model/CssRule';
 import { HTMLGeneratorBuildOptions } from '../../code_manager/model/HtmlGenerator';
 import { CssGeneratorBuildOptions } from '../../code_manager/model/CssGenerator';
 import ComponentView from '../../dom_components/view/ComponentView';
-
-export interface ProjectData {
-  [key: string]: any;
-}
+import { ProjectData } from '../../storage_manager/model/IStorage';
 
 //@ts-ignore
 Backbone.$ = $;
@@ -172,7 +169,7 @@ export default class EditorModel extends Model {
     return this.get('Canvas');
   }
 
-  get Editor(): EditorModule {
+  get Editor(): Editor {
     return this.get('Editor');
   }
 
@@ -435,7 +432,7 @@ export default class EditorModel extends Model {
    * @return {this}
    * @public
    */
-  init(editor: EditorModule, opts = {}) {
+  init(editor: Editor, opts = {}) {
     if (this.destroyed) {
       this.initialize(opts);
       this.destroyed = false;
@@ -443,7 +440,7 @@ export default class EditorModel extends Model {
     this.set('Editor', editor);
   }
 
-  getEditor(): EditorModule {
+  getEditor(): Editor {
     return this.get('Editor');
   }
 

src/keymaps/index.ts

@@ -44,7 +44,7 @@
  */
 
 import { isFunction, isString } from 'underscore';
-import { hasWin, isObject } from '../utils/mixins';
+import { hasWin } from '../utils/mixins';
 import keymaster from '../utils/keymaster';
 import { Module } from '../abstract';
 import EditorModel from '../editor/model/Editor';

src/modal_dialog/index.ts

@@ -82,7 +82,9 @@ export default class ModalModule extends Module<ModalConfig> {
       title: isString(titl) ? createText(titl) : titl,
       //@ts-ignore
       content: isString(cnt) ? createText(cnt) : cnt.get ? cnt.get(0) : cnt,
-      close: () => this.close(),
+      close: () => {
+        this.close();
+      },
     };
   }
 

src/modal_dialog/model/Modal.ts

@@ -1,7 +1,7 @@
-import ModalManager from '..';
-import { Model } from '../../abstract';
+import ModalModule from '..';
+import { ModuleModel } from '../../abstract';
 
-export default class Modal extends Model<ModalManager> {
+export default class Modal extends ModuleModel<ModalModule> {
   defaults() {
     return {
       title: '',

src/modal_dialog/view/ModalView.ts

@@ -1,7 +1,7 @@
-import { View } from '../../abstract';
+import { ModuleView } from '../../abstract';
 import Modal from '../model/Modal';
 
-export default class ModalView extends View<Modal> {
+export default class ModalView extends ModuleView<Modal> {
   template({ pfx, ppfx, content, title }: any) {
     return `<div class="${pfx}dialog ${ppfx}one-bg ${ppfx}two-color">
       <div class="${pfx}header">

src/navigator/index.ts

@@ -40,7 +40,7 @@
  */
 
 import { isString, bindAll } from 'underscore';
-import { Model } from '../abstract';
+import { ModuleModel } from '../abstract';
 import Module from '../abstract/Module';
 import Component from '../dom_components/model/Component';
 import EditorModel from '../editor/model/Editor';
@@ -82,7 +82,7 @@ const isStyleHidden = (style: any = {}) => {
 };
 
 export default class LayerManager extends Module<LayerManagerConfig> {
-  model!: Model;
+  model!: ModuleModel;
 
   view?: View;
 
@@ -91,7 +91,7 @@ export default class LayerManager extends Module<LayerManagerConfig> {
   constructor(em: EditorModel) {
     super(em, 'LayerManager', defaults);
     bindAll(this, 'componentChanged', '__onRootChange', '__onComponent');
-    this.model = new Model(this, { opened: {} });
+    this.model = new ModuleModel(this, { opened: {} });
     // @ts-ignore
     this.config.stylePrefix = this.config.pStylePrefix;
     return this;

src/pages/index.ts

@@ -46,7 +46,7 @@
 
 import { isString, bindAll, unique, flatten } from 'underscore';
 import { createId } from '../utils/mixins';
-import { Model, Module } from '../abstract';
+import { ModuleModel } from '../abstract';
 import { ItemManagerModule, ModuleConfig } from '../abstract/Module';
 import Pages from './model/Pages';
 import Page from './model/Page';
@@ -85,7 +85,12 @@ export default class PageManager extends ItemManagerModule<PageManagerConfig, Pa
     return this.all;
   }
 
-  model: Model;
+  model: ModuleModel;
+
+  getAll() {
+    // this avoids issues during the TS build (some getAll are inconsistent)
+    return [...this.all.models];
+  }
 
   /**
    * Get all pages
@@ -104,7 +109,7 @@ export default class PageManager extends ItemManagerModule<PageManagerConfig, Pa
   constructor(em: EditorModel) {
     super(em, 'PageManager', new Pages([], em), events);
     bindAll(this, '_onPageChange');
-    const model = new Model({ _undo: true } as any);
+    const model = new ModuleModel({ _undo: true } as any);
     this.model = model;
     this.pages.on('reset', coll => coll.at(0) && this.select(coll.at(0)));
     this.pages.on('all', this.__onChange, this);

src/panels/model/Button.ts

@@ -1,9 +1,8 @@
 import PanelManager from '..';
-import { Model } from '../../abstract';
-import EditorModel from '../../editor/model/Editor';
+import { ModuleModel } from '../../abstract';
 import Buttons from './Buttons';
 
-export default class Button extends Model<PanelManager> {
+export default class Button extends ModuleModel<PanelManager> {
   defaults() {
     return {
       id: '',

src/panels/model/Buttons.ts

@@ -1,8 +1,8 @@
 import PanelManager from '..';
-import { Collection } from '../../abstract';
+import { ModuleCollection } from '../../abstract';
 import Button from './Button';
 
-export default class Buttons extends Collection<Button> {
+export default class Buttons extends ModuleCollection<Button> {
   constructor(module: PanelManager, models: Button[]) {
     super(module, models, Button);
   }

src/panels/model/Panel.ts

@@ -1,8 +1,8 @@
 import PanelManager from '..';
-import { Model } from '../../abstract';
+import { ModuleModel } from '../../abstract';
 import Buttons from './Buttons';
 
-export default class Panel extends Model<PanelManager> {
+export default class Panel extends ModuleModel<PanelManager> {
   defaults() {
     return {
       id: '',

src/panels/model/Panels.ts

@@ -1,8 +1,8 @@
 import PanelManager from '..';
-import { Collection } from '../../abstract';
+import { ModuleCollection } from '../../abstract';
 import Panel from './Panel';
 
-export default class Panels extends Collection<Panel> {
+export default class Panels extends ModuleCollection<Panel> {
   constructor(module: PanelManager, models: Panel[] | Array<Record<string, any>>) {
     super(module, models, Panel);
   }

src/panels/view/ButtonView.ts

@@ -1,9 +1,9 @@
 import { isString, isObject, isFunction } from 'underscore';
-import { View } from '../../abstract';
+import { ModuleView } from '../../abstract';
 import Button from '../model/Button';
 import Buttons from '../model/Buttons';
 
-export default class ButtonView extends View<Button> {
+export default class ButtonView extends ModuleView<Button> {
   //@ts-ignore
   tagName() {
     return this.model.get('tagName');

src/panels/view/ButtonsView.ts

@@ -1,10 +1,10 @@
 import { result } from 'underscore';
-import { View } from '../../abstract';
+import { ModuleView } from '../../abstract';
 import Button from '../model/Button';
 import Buttons from '../model/Buttons';
 import ButtonView from './ButtonView';
 
-export default class ButtonsView extends View<Buttons> {
+export default class ButtonsView extends ModuleView<Buttons> {
   constructor(collection: Buttons) {
     super({ collection });
     this.listenTo(this.collection, 'add', this.addTo);

src/panels/view/PanelView.ts

@@ -1,10 +1,9 @@
-import { View } from '../../abstract';
-import EditorModule from '../../editor';
+import { ModuleView } from '../../abstract';
 import Resizer from '../../utils/Resizer';
 import Panel from '../model/Panel';
 import ButtonsView from './ButtonsView';
 
-export default class PanelView extends View<Panel> {
+export default class PanelView extends ModuleView<Panel> {
   constructor(model: Panel) {
     super({ model, el: model.get('el') });
     this.className = this.pfx + 'panel';
@@ -44,7 +43,7 @@ export default class PanelView extends View<Panel> {
 
   initResize() {
     const { em } = this;
-    const editor = em?.get('Editor') as EditorModule;
+    const editor = em?.Editor;
     const resizable = this.model.get('resizable');
 
     if (editor && resizable) {

src/panels/view/PanelsView.ts

@@ -1,9 +1,9 @@
-import { View } from '../../abstract';
+import { ModuleView } from '../../abstract';
 import Panel from '../model/Panel';
 import Panels from '../model/Panels';
 import PanelView from './PanelView';
 
-export default class PanelsView extends View<Panels> {
+export default class PanelsView extends ModuleView<Panels> {
   constructor(target: Panels) {
     super({ collection: target });
     this.listenTo(target, 'add', this.addTo);

src/parser/config/config.ts

@@ -1,4 +1,4 @@
-import EditorModule from '../../editor';
+import Editor from '../../editor';
 
 export interface ParsedCssRule {
   selectors: string;
@@ -7,7 +7,7 @@ export interface ParsedCssRule {
   params?: string;
 }
 
-export type CustomParserCss = (input: string, editor: EditorModule) => ParsedCssRule[];
+export type CustomParserCss = (input: string, editor: Editor) => ParsedCssRule[];
 
 export type CustomParserHtml = (input: string, options: HTMLParserOptions) => HTMLElement;
 

src/parser/index.ts

@@ -27,18 +27,18 @@
 import { Module } from '../abstract';
 import EditorModel from '../editor/model/Editor';
 import defaults, { HTMLParserOptions, ParserConfig } from './config/config';
-import parserCss from './model/ParserCss';
-import parserHtml from './model/ParserHtml';
+import ParserCss from './model/ParserCss';
+import ParserHtml from './model/ParserHtml';
 
 export default class ParserModule extends Module<ParserConfig & { name?: string }> {
-  parserHtml: ReturnType<typeof parserHtml>;
-  parserCss: ReturnType<typeof parserCss>;
+  parserHtml: ReturnType<typeof ParserHtml>;
+  parserCss: ReturnType<typeof ParserCss>;
 
   constructor(em: EditorModel) {
     super(em, 'Parser', defaults);
     const { config } = this;
-    this.parserCss = parserCss(em, config);
-    this.parserHtml = parserHtml(em, config);
+    this.parserCss = ParserCss(em, config);
+    this.parserHtml = ParserHtml(em, config);
   }
 
   /**

src/parser/model/ParserCss.ts

@@ -1,10 +1,10 @@
 import { isString } from 'underscore';
-import { CssRuleJSON, CssRuleProperties } from '../../css_composer/model/CssRule';
+import { CssRuleJSON } from '../../css_composer/model/CssRule';
 import EditorModel from '../../editor/model/Editor';
 import { ParsedCssRule, ParserConfig } from '../config/config';
 import BrowserCssParser, { parseSelector, createNode } from './BrowserParserCss';
 
-export default (em?: EditorModel, config: ParserConfig = {}) => ({
+const ParserCss = (em?: EditorModel, config: ParserConfig = {}) => ({
   /**
    * Parse CSS string to a desired model object
    * @param  {String} str CSS string
@@ -57,3 +57,5 @@ export default (em?: EditorModel, config: ParserConfig = {}) => ({
     return result;
   },
 });
+
+export default ParserCss;

src/parser/model/ParserHtml.ts

@@ -1,12 +1,11 @@
-import { each, isString, isFunction, isUndefined } from 'underscore';
-import { CssRuleJSON, CssRuleProperties } from '../../css_composer/model/CssRule';
+import { each, isFunction, isUndefined } from 'underscore';
+import { ObjectAny } from '../../common';
+import { CssRuleJSON } from '../../css_composer/model/CssRule';
 import { ComponentDefinitionDefined } from '../../dom_components/model/types';
 import EditorModel from '../../editor/model/Editor';
 import { HTMLParserOptions, ParserConfig } from '../config/config';
 import BrowserParserHtml from './BrowserParserHtml';
 
-type AnyObject = Record<string, any>;
-
 type StringObject = Record<string, string>;
 
 type HTMLParseResult = {
@@ -17,7 +16,7 @@ type HTMLParseResult = {
 const modelAttrStart = 'data-gjs-';
 const event = 'parse:html';
 
-export default (em?: EditorModel, config: ParserConfig = {}) => {
+const ParserHtml = (em?: EditorModel, config: ParserConfig = {}) => {
   return {
     compTypes: '',
 
@@ -49,8 +48,8 @@ export default (em?: EditorModel, config: ParserConfig = {}) => {
      * @param {Object} attr
      * @returns {Object} An object containing props and attributes without them
      */
-    splitPropsFromAttr(attr: AnyObject = {}) {
-      const props: AnyObject = {};
+    splitPropsFromAttr(attr: ObjectAny = {}) {
+      const props: ObjectAny = {};
       const attrs: StringObject = {};
 
       each(attr, (value, key) => {
@@ -118,7 +117,7 @@ export default (em?: EditorModel, config: ParserConfig = {}) => {
      * @param  {HTMLElement} el DOM element to traverse
      * @return {Array<Object>}
      */
-    parseNode(el: HTMLElement, opts: AnyObject = {}) {
+    parseNode(el: HTMLElement, opts: ObjectAny = {}) {
       const result: ComponentDefinitionDefined[] = [];
       const nodes = el.childNodes;
 
@@ -284,7 +283,7 @@ export default (em?: EditorModel, config: ParserConfig = {}) => {
     parse(str: string, parserCss: any, opts: HTMLParserOptions = {}) {
       const conf = em?.get('Config') || {};
       const res: HTMLParseResult = {};
-      const cf: AnyObject = { ...config, ...opts };
+      const cf: ObjectAny = { ...config, ...opts };
       const options = {
         ...config.optionsHtml,
         // @ts-ignore Support previous `configParser.htmlType` option
@@ -345,3 +344,5 @@ export default (em?: EditorModel, config: ParserConfig = {}) => {
     },
   };
 };
+
+export default ParserHtml;

src/storage_manager/model/RemoteStorage.ts

@@ -2,15 +2,14 @@ import Editor from '../../editor';
 import { isUndefined, isFunction, isString } from 'underscore';
 import fetch from '../../utils/fetch';
 import IStorage, { ProjectData } from './IStorage';
-
-type AnyObject = Record<string, any>;
+import { ObjectAny } from '../../common';
 
 export interface RemoteStorageConfig {
   /**
    * Custom headers.
    * @default {}
    */
-  headers?: AnyObject;
+  headers?: ObjectAny;
 
   /**
    * Endpoint URL where to store data project.
@@ -77,7 +76,7 @@ export default class RemoteStorage implements IStorage<RemoteStorageConfig> {
         const isOk = ((res.status / 200) | 0) === 1;
         return isOk ? result : result.then(Promise.reject);
       })
-      .then(text => {
+      .then((text: string) => {
         const parsable = text && isString(text);
         return opts.contentTypeJson && parsable ? JSON.parse(text) : text;
       });

src/style_manager/model/Properties.ts

@@ -19,7 +19,7 @@ import PropertyView from './../view/PropertyView';
 
 const TypeableCollectionExt = Collection.extend(TypeableCollection);
 
-export default TypeableCollectionExt.extend({
+const Properties = TypeableCollectionExt.extend({
   extendViewApi: 1,
 
   init() {
@@ -133,3 +133,5 @@ export default TypeableCollectionExt.extend({
     },
   ],
 });
+
+export default Properties;

src/style_manager/model/Property.ts

@@ -10,7 +10,7 @@ export interface PropertyProps {
   name?: string;
   label?: string;
   id?: string;
-  property: string;
+  property?: string;
   type?: string;
   defaults?: string;
   default?: string;

src/style_manager/model/PropertyComposite.ts

@@ -1,12 +1,12 @@
 import { isString, isUndefined, keys } from 'underscore';
-import Property, { OptionsStyle, OptionsUpdate, PropertyProps } from './Property';
+import Property, { OptionsStyle, OptionsUpdate, PropertyProps, StyleProps } from './Property';
 import Properties from './Properties';
 import { camelCase } from '../../utils/mixins';
+import { PropertyNumberProps } from './PropertyNumber';
+import { PropertySelectProps } from './PropertySelect';
 
 export const isNumberType = (type: string) => type === 'integer' || type === 'number';
 
-export type StyleProps = Record<string, string>;
-
 export type PropValues = Record<string, any>;
 
 export type OptionByName = { byName?: boolean };
@@ -25,7 +25,7 @@ export interface PropertyCompositeProps extends PropertyProps {
   /**
    * Array of sub properties, eg. `[{ type: 'number', property: 'margin-top' }, ...]`
    */
-  properties: PropertyProps[];
+  properties: (PropertyProps | PropertyNumberProps | PropertySelectProps)[];
 
   /**
    * Value used to split property values, default `" "`.

src/style_manager/model/PropertyFactory.ts

@@ -1,19 +1,23 @@
 import { isFunction, isString } from 'underscore';
+import { PropertyProps } from './Property';
 import { PropertyCompositeProps } from './PropertyComposite';
+import { PropertyNumberProps } from './PropertyNumber';
+import { PropertySelectProps } from './PropertySelect';
+import { PropertyStackProps } from './PropertyStack';
 
 type Option = {
   id: string;
   label?: string;
 };
 
-type Property = Record<string, any>;
-
-type PartialProps = Partial<Property | PropertyCompositeProps>;
+type PartialProps = Partial<
+  PropertyProps | PropertyStackProps | PropertyNumberProps | PropertySelectProps | { properties?: any }
+>;
 
 const getOptions = (items: string[]): Option[] => items.map(item => ({ id: item }));
 
 export default class PropertyFactory {
-  props: Record<string, Property | undefined> = {};
+  props: Record<string, PropertyProps | undefined> = {};
   typeNumber: string;
   typeColor: string;
   typeRadio: string;
@@ -172,13 +176,13 @@ export default class PropertyFactory {
     this.init();
   }
 
-  __sub(items: (string | Property)[]) {
+  __sub(items: (string | PropertyProps)[]) {
     return () =>
       items.map(p => {
         if (isString(p)) return this.get(p)!;
         const { extend, ...rest } = p;
         return {
-          ...this.get(extend),
+          ...this.get(extend!),
           ...rest,
         };
       });
@@ -518,7 +522,7 @@ export default class PropertyFactory {
   add(property: string, def: Record<string, any> = {}, opts: { from?: string } = {}) {
     const from = opts.from || '';
     const fromRes = this.props[from || property] || {};
-    const result: Property = { ...fromRes, property, ...def };
+    const result: any = { ...fromRes, property, ...def };
     if (result.properties && isFunction(result.properties)) {
       result.properties = result.properties();
     }
@@ -536,7 +540,7 @@ export default class PropertyFactory {
    * @return {Array<Object>}
    */
   build(props: string | string[]) {
-    const result: Property[] = [];
+    const result: PropertyProps[] = [];
     const propsArr = isString(props) ? [props] : props;
 
     propsArr.forEach(prop => {

src/style_manager/model/PropertySelect.ts

@@ -1,4 +1,5 @@
 import { isString } from 'underscore';
+import { ObjectAny } from '../../common';
 import { isDef } from '../../utils/mixins';
 import Property, { PropertyProps } from './Property';
 
@@ -10,6 +11,7 @@ type SelectOption = {
   className?: string;
   title?: string;
   style?: string;
+  propValue?: ObjectAny;
 };
 
 /** @private */

src/style_manager/model/PropertyStack.ts

@@ -6,11 +6,10 @@ import PropertyComposite, {
   isNumberType,
   PropertyCompositeProps,
   PropValues,
-  StyleProps,
   ToStyle,
   ToStyleData,
 } from './PropertyComposite';
-import PropertyBase, { OptionsStyle, OptionsUpdate } from './Property';
+import PropertyBase, { OptionsStyle, OptionsUpdate, StyleProps } from './Property';
 import Layers from './Layers';
 import Layer, { LayerProps, LayerValues } from './Layer';
 import PropertyNumber from './PropertyNumber';

src/style_manager/view/PropertyView.ts

@@ -2,8 +2,7 @@ import { bindAll, isUndefined, debounce } from 'underscore';
 import { View } from '../../common';
 import EditorModel from '../../editor/model/Editor';
 import { isObject } from '../../utils/mixins';
-import Property from '../model/Property';
-import { StyleProps } from '../model/PropertyComposite';
+import Property, { StyleProps } from '../model/Property';
 
 const clearProp = 'data-clear-style';
 

src/trait_manager/model/Trait.ts

@@ -1,7 +1,7 @@
 import { isUndefined } from 'underscore';
 import { Model, SetOptions } from '../../common';
 import Component from '../../dom_components/model/Component';
-import EditorModule from '../../editor';
+import Editor from '../../editor';
 import EditorModel from '../../editor/model/Editor';
 import TraitView from '../view/TraitView';
 
@@ -46,7 +46,7 @@ export interface TraitProperties {
   target?: Component;
   default?: any;
   placeholder?: string;
-  command?: string | ((editor: EditorModule, trait: Trait) => any);
+  command?: string | ((editor: Editor, trait: Trait) => any);
   options?: Record<string, any>[];
   labelButton?: string;
   text?: string;

src/undo_manager/index.ts

@@ -42,7 +42,7 @@ const getChanged = (obj: any) => Object.keys(obj.changedAttributes());
 
 export default class UndoManagerModule extends Module<UndoManagerConfig & { name?: string; _disable?: boolean }> {
   beforeCache?: any;
-  um: UndoManager;
+  um: any;
 
   constructor(em: EditorModel) {
     super(em, 'UndoManager', defaults);

src/utils/Dragger.ts

@@ -1,13 +1,10 @@
 import { bindAll, isFunction, result, isUndefined } from 'underscore';
+import { Position } from '../common';
 import { on, off, isEscKey, getPointerEvent } from './mixins';
 
-type Position = {
-  x: number;
-  y: number;
-  end?: boolean;
-};
+type DraggerPosition = Position & { end?: boolean };
 
-type PositionXY = keyof Omit<Position, 'end'>;
+type PositionXY = keyof Omit<DraggerPosition, 'end'>;
 
 type Guide = {
   x: number;
@@ -52,7 +49,7 @@ interface DraggerOptions {
   /**
    * Indicate a callback where to pass an object with new coordinates
    */
-  setPosition?: (position: Position) => void;
+  setPosition?: (position: DraggerPosition) => void;
 
   /**
    * Indicate a callback where to get initial coordinates.
@@ -62,12 +59,12 @@ interface DraggerOptions {
    *   return { x: 10, y: 100 }
    * }
    */
-  getPosition?: () => Position;
+  getPosition?: () => DraggerPosition;
 
   /**
    * Indicate a callback where to get pointer coordinates.
    */
-  getPointerPosition?: (ev: Event) => Position;
+  getPointerPosition?: (ev: Event) => DraggerPosition;
 
   /**
    * Static guides to be snapped.
@@ -103,14 +100,14 @@ const xyArr: PositionXY[] = ['x', 'y'];
 
 export default class Dragger {
   opts: DraggerOptions;
-  startPointer: Position;
-  delta: Position;
-  lastScroll: Position;
-  lastScrollDiff: Position;
-  startPosition: Position;
-  globScrollDiff: Position;
-  currentPointer: Position;
-  position: Position;
+  startPointer: DraggerPosition;
+  delta: DraggerPosition;
+  lastScroll: DraggerPosition;
+  lastScrollDiff: DraggerPosition;
+  startPosition: DraggerPosition;
+  globScrollDiff: DraggerPosition;
+  currentPointer: DraggerPosition;
+  position: DraggerPosition;
   el?: HTMLElement;
   guidesStatic: Guide[];
   guidesTarget: Guide[];
@@ -230,7 +227,7 @@ export default class Dragger {
       delta.y = startPointer.y;
     }
 
-    const moveDelta = (delta: Position) => {
+    const moveDelta = (delta: DraggerPosition) => {
       xyArr.forEach(co => (delta[co] = delta[co] * result(opts, 'scale')));
       this.delta = delta;
       this.move(delta.x, delta.y);
@@ -254,7 +251,7 @@ export default class Dragger {
   /**
    * Check if the delta hits some guide
    */
-  snapGuides(delta: Position) {
+  snapGuides(delta: DraggerPosition) {
     const newDelta = delta;
     let { trgX, trgY } = this;
 

src/utils/Resizer.ts

@@ -1,11 +1,7 @@
 import { bindAll, isFunction, each } from 'underscore';
+import { Position } from '../common';
 import { on, off, normalizeFloat } from './mixins';
 
-type Position = {
-  x: number;
-  y: number;
-};
-
 type RectDim = {
   t: number;
   l: number;

src/utils/dom.ts

@@ -1,10 +1,9 @@
 import { each, isUndefined, isString } from 'underscore';
-
-type AnyObject = Record<string, any>;
+import { ObjectAny } from '../common';
 
 type vNode = {
   tag?: string;
-  attributes?: AnyObject;
+  attributes?: ObjectAny;
   children?: vNode[];
 };
 
@@ -25,7 +24,7 @@ export const removeEl = (el?: HTMLElement) => {
 
 export const find = (el: HTMLElement, query: string) => el.querySelectorAll(query);
 
-export const attrUp = (el?: HTMLElement, attrs: AnyObject = {}) =>
+export const attrUp = (el?: HTMLElement, attrs: ObjectAny = {}) =>
   el && el.setAttribute && each(attrs, (value, key) => el.setAttribute(key, value));
 
 export const isVisible = (el?: HTMLElement) => {
@@ -61,7 +60,7 @@ export const appendAtIndex = (parent: HTMLElement | DocumentFragment, child: Chi
 
 export const append = (parent: HTMLElement, child: ChildHTML) => appendAtIndex(parent, child);
 
-export const createEl = (tag: string, attrs: AnyObject = {}, child?: ChildHTML) => {
+export const createEl = (tag: string, attrs: ObjectAny = {}, child?: ChildHTML) => {
   const el = document.createElement(tag);
   attrs && each(attrs, (value, key) => el.setAttribute(key, value));
 

src/utils/fetch.ts

@@ -1,3 +1,4 @@
+// @ts-ignore avoid errors during TS build
 import Promise from 'promise-polyfill';
 import { hasWin } from './mixins';
 
@@ -9,6 +10,7 @@ export default typeof fetch == 'function'
   ? // @ts-ignore
     fetch.bind()
   : (url: string, options: Record<string, any>) => {
+      // @ts-ignore avoid errors during TS build
       return new Promise((res, rej) => {
         const req = new XMLHttpRequest();
         req.open(options.method || 'get', url);