Up $ refs

src/abstract/ModuleModel.ts

@@ -1,5 +1,4 @@
-import Backbone from 'backbone';
-import { Model, ObjectHash, SetOptions } from '../common';
+import { Model, ObjectHash, SetOptions, CombinedModelConstructorOptions } from '../common';
 import EditorModel from '../editor/model/Editor';
 import Module, { IBaseModule } from './Module';
 
@@ -11,7 +10,7 @@ export default class ModuleModel<
 > extends Model<T, S, E> {
   private _module: TModule;
 
-  constructor(module: TModule, attributes?: T, options?: Backbone.CombinedModelConstructorOptions<E>) {
+  constructor(module: TModule, attributes?: T, options?: CombinedModelConstructorOptions<E>) {
     super(attributes, options);
     this._module = module;
   }

src/asset_manager/view/AssetView.ts

@@ -1,11 +1,11 @@
-import { View } from '../../common';
+import { View, ViewOptions } from '../../common';
 import Asset from '../model/Asset';
 import Assets from '../model/Assets';
 import { AssetManagerConfig } from '../config/config';
 import { clone } from 'underscore';
 import EditorModel from '../../editor/model/Editor';
 
-export type AssetViewProps = Backbone.ViewOptions<Asset> & {
+export type AssetViewProps = ViewOptions<Asset> & {
   collection: Assets;
   config: AssetManagerConfig;
 };

src/commands/view/DeleteComponent.ts

@@ -1,10 +1,8 @@
-import { extend, bindAll } from 'underscore';
-import Backbone from 'backbone';
-import SelectComponent from './SelectComponent';
-import { CommandObject } from './CommandAbstract';
+import { bindAll, extend } from 'underscore';
+import { $ } from '../../common';
 import Component from '../../dom_components/model/Component';
-
-const $ = Backbone.$;
+import { CommandObject } from './CommandAbstract';
+import SelectComponent from './SelectComponent';
 
 export default extend({}, SelectComponent, {
   init() {

src/commands/view/ExportTemplate.ts

@@ -1,6 +1,5 @@
-import Backbone from 'backbone';
 import { CommandObject } from './CommandAbstract';
-const $ = Backbone.$;
+import { $ } from '../../common';
 
 export default {
   run(editor, sender) {

src/commands/view/MoveComponent.ts

@@ -1,13 +1,11 @@
 import { extend, bindAll } from 'underscore';
-import Backbone from 'backbone';
+import { $ } from '../../common';
 import { on, off } from '../../utils/mixins';
 import SelectComponent from './SelectComponent';
 import SelectPosition from './SelectPosition';
 import { CommandObject } from './CommandAbstract';
 import Component from '../../dom_components/model/Component';
 
-const $ = Backbone.$;
-
 export default extend({}, SelectPosition, SelectComponent, {
   init(o: any) {
     SelectComponent.init.apply(this, arguments);

src/commands/view/OpenStyleManager.ts

@@ -1,6 +1,5 @@
-import Backbone from 'backbone';
+import { $ } from '../../common';
 import { CommandObject } from './CommandAbstract';
-const $ = Backbone.$;
 
 export default {
   run(editor, sender) {

src/commands/view/OpenTraitManager.ts

@@ -1,7 +1,5 @@
-import Backbone from 'backbone';
 import { CommandObject } from './CommandAbstract';
-
-const $ = Backbone.$;
+import { $ } from '../../common';
 
 export default {
   run(editor, sender) {

src/commands/view/SelectComponent.ts

@@ -1,13 +1,12 @@
-import Backbone from 'backbone';
-import { bindAll, isElement, debounce } from 'underscore';
-import { on, off, getUnitFromValue, isTaggableNode, getViewEl, hasWin } from '../../utils/mixins';
-import { isVisible, isDoc } from '../../utils/dom';
-import ToolbarView from '../../dom_components/view/ToolbarView';
+import { bindAll, debounce, isElement } from 'underscore';
+import { $ } from '../../common';
+import Component from '../../dom_components/model/Component';
 import Toolbar from '../../dom_components/model/Toolbar';
+import ToolbarView from '../../dom_components/view/ToolbarView';
+import { isDoc, isVisible } from '../../utils/dom';
+import { getUnitFromValue, getViewEl, hasWin, isTaggableNode, off, on } from '../../utils/mixins';
 import { CommandObject } from './CommandAbstract';
-import Component from '../../dom_components/model/Component';
 
-const $ = Backbone.$;
 let showOffsets: boolean;
 /**
  * This command is responsible for show selecting components and displaying

src/commands/view/SelectPosition.ts

@@ -1,6 +1,5 @@
-import Backbone from 'backbone';
+import { $ } from '../../common';
 import { CommandObject } from './CommandAbstract';
-const $ = Backbone.$;
 
 export default {
   /**

src/commands/view/ShowOffset.ts

@@ -1,8 +1,7 @@
-import Backbone from 'backbone';
 import { isUndefined } from 'underscore';
+import { $ } from '../../common';
 import { isTextNode } from '../../utils/mixins';
 import { CommandObject } from './CommandAbstract';
-const $ = Backbone.$;
 
 export default {
   getOffsetMethod(state: string) {

src/common/index.ts

@@ -1,4 +1,5 @@
 import Backbone from 'backbone';
+export { default as $ } from '../utils/cash-dom';
 
 export type Debounced = Function & { cancel(): void };
 
@@ -21,6 +22,14 @@ export type Position = {
   y: number;
 };
 
+export type CombinedModelConstructorOptions<
+  E,
+  M extends Model<any, any, E> = Model
+> = Backbone.ModelConstructorOptions<M> & E;
+
+export interface ViewOptions<TModel extends Model | undefined = Model, TElement extends Element = HTMLElement>
+  extends Backbone.ViewOptions<TModel, TElement> {}
+
 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> {}

src/dom_components/model/Components.ts

@@ -1,12 +1,11 @@
-import Backbone from 'backbone';
-import { isEmpty, isArray, isString, isFunction, each, includes, extend, flatten, debounce, keys } from 'underscore';
+import { isEmpty, isArray, isString, isFunction, each, includes, extend, flatten, keys } from 'underscore';
 import Component from './Component';
 import { AddOptions, Collection, ObjectAny } from '../../common';
 import { DomComponentsConfig } from '../config/config';
 import EditorModel from '../../editor/model/Editor';
 import ComponentManager from '..';
 import CssRule from '../../css_composer/model/CssRule';
-import { ComponentAdd, ComponentDefinitionDefined, ComponentProperties } from './types';
+import { ComponentAdd, ComponentProperties } from './types';
 
 export const getComponentIds = (cmp?: Component | Component[] | Components, res: string[] = []) => {
   if (!cmp) return [];
@@ -258,7 +257,7 @@ Component> {
     // @ts-ignore
     models = isMult ? flatten(models as any, 1) : models[0];
 
-    const result = Backbone.Collection.prototype.add.apply(this, [models as any, opt]);
+    const result = Collection.prototype.add.apply(this, [models as any, opt]);
     this.__firstAdd = result;
     return result;
   }

src/domain_abstract/ui/Input.ts

@@ -1,9 +1,6 @@
-import Backbone from 'backbone';
-import { View } from '../../common';
+import { View, $ } from '../../common';
 import EditorModel from '../../editor/model/Editor';
 
-const $ = Backbone.$;
-
 export default class Input extends View {
   ppfx!: string;
   em!: EditorModel;

src/domain_abstract/ui/InputColor.ts

@@ -1,9 +1,8 @@
-import Backbone from 'backbone';
 import { isUndefined } from 'underscore';
 import ColorPicker from '../../utils/ColorPicker';
+import $ from '../../utils/cash-dom';
 import Input from './Input';
 
-const { $ } = Backbone;
 $ && ColorPicker($);
 
 const getColor = (color: any) => {

src/editor/model/Editor.ts

@@ -44,35 +44,33 @@ import Frame from '../../canvas/model/Frame';
 Backbone.$ = $;
 
 const deps = [
-  require('utils'),
-  require('i18n'),
-  require('keymaps'),
-  require('undo_manager'),
-  require('storage_manager'),
-  require('device_manager'),
-  require('parser'),
-  require('style_manager'),
-  require('selector_manager'),
-  require('modal_dialog'),
-  require('code_manager'),
-  require('panels'),
-  require('rich_text_editor'),
-  require('asset_manager'),
-  require('css_composer'),
-  require('pages'),
-  require('trait_manager'),
-  require('dom_components'),
-  require('navigator'),
-  require('canvas'),
-  require('commands'),
-  require('block_manager'),
+  UtilsModule,
+  I18nModule,
+  KeymapsModule,
+  UndoManagerModule,
+  StorageManager,
+  DeviceManager,
+  ParserModule,
+  StyleManager,
+  SelectorManager,
+  ModalModule,
+  CodeManagerModule,
+  PanelManager,
+  RichTextEditorModule,
+  AssetManager,
+  CssComposer,
+  PageManager,
+  TraitManager,
+  ComponentManager,
+  LayerManager,
+  CanvasModule,
+  CommandsModule,
+  BlockManager,
 ];
 
 const ts_deps: any[] = [];
 
-Extender({
-  $: Backbone.$,
-});
+Extender({ $ });
 
 const logs = {
   debug: console.log,
@@ -378,9 +376,8 @@ export default class EditorModel extends Model {
    * @return {this}
    * @private
    */
-  loadModule(moduleName: any) {
+  loadModule(Module: any) {
     const { config } = this;
-    const Module = moduleName.default || moduleName;
     const Mod = new Module(this);
     const name = (Mod.name.charAt(0).toLowerCase() + Mod.name.slice(1)) as EditorConfigKeys;
     const cfgParent = !isUndefined(config[name]) ? config[name] : config[Mod.name as EditorConfigKeys];

src/editor/view/EditorView.ts

@@ -1,10 +1,7 @@
-import Backbone from 'backbone';
-import { View } from '../../common';
+import { View, $ } from '../../common';
 import { appendStyles } from '../../utils/mixins';
 import EditorModel from '../model/Editor';
 
-const $ = Backbone.$;
-
 export default class EditorView extends View<EditorModel> {
   constructor(model: EditorModel) {
     super({ model });

src/navigator/view/ItemView.ts

@@ -1,5 +1,5 @@
 import { isString, bindAll } from 'underscore';
-import { View } from '../../common';
+import { View, ViewOptions } from '../../common';
 import { getModel, isEscKey, isEnterKey } from '../../utils/mixins';
 import ComponentView from '../../dom_components/view/ComponentView';
 import Component, { eventDrag } from '../../dom_components/model/Component';
@@ -7,7 +7,7 @@ import ItemsView from './ItemsView';
 import EditorModel from '../../editor/model/Editor';
 import LayerManager from '../index';
 
-export type ItemViewProps = Backbone.ViewOptions & {
+export type ItemViewProps = ViewOptions & {
   ItemView: ItemView;
   level: number;
   config: any;

src/trait_manager/view/TraitSelectView.ts

@@ -1,9 +1,7 @@
-import Backbone from 'backbone';
 import { isString, isUndefined } from 'underscore';
+import { $ } from '../../common';
 import TraitView from './TraitView';
 
-const $ = Backbone.$;
-
 export default class TraitSelectView extends TraitView {
   constructor(o = {}) {
     super(o);
@@ -55,9 +53,9 @@ export default class TraitSelectView extends TraitView {
       this.$input = $(input);
       const val = model.getTargetValue();
       const valResult = values.indexOf(val) >= 0 ? val : model.get('default');
-      !isUndefined(valResult) && this.$input.val(valResult);
+      !isUndefined(valResult) && this.$input!.val(valResult);
     }
 
-    return this.$input.get(0);
+    return this.$input!.get(0);
   }
 }

src/trait_manager/view/TraitView.ts

@@ -1,12 +1,9 @@
-import Backbone from 'backbone';
-import { isUndefined, isString, isFunction } from 'underscore';
-import { SetOptions, View } from '../../common';
+import { isFunction, isString, isUndefined } from 'underscore';
+import { $, SetOptions, View } from '../../common';
+import Component from '../../dom_components/model/Component';
+import EditorModel from '../../editor/model/Editor';
 import { capitalize } from '../../utils/mixins';
 import Trait from '../model/Trait';
-import EditorModel from '../../editor/model/Editor';
-import Component from '../../dom_components/model/Component';
-
-const $ = Backbone.$;
 
 export default class TraitView extends View<Trait> {
   pfx: string;

src/utils/Sorter.ts

@@ -1,13 +1,10 @@
-import Backbone from 'backbone';
 import { isString, isFunction, isArray, result, each, bindAll } from 'underscore';
 import { on, off, matches, getElement, getPointerEvent, isTextNode, getModel } from './mixins';
-import { View, Model } from '../common';
+import { View, Model, Collection, $ } from '../common';
 import EditorModel from '../editor/model/Editor';
 import { BlockProperties } from '../block_manager/model/Block';
 import CanvasModule from '../canvas';
 
-const $ = Backbone.$;
-
 const noop = () => {};
 
 type DropContent = BlockProperties['content'];
@@ -474,7 +471,7 @@ export default class Sorter extends View {
    * @param  {Model|null} model
    */
   selectTargetModel(model?: Model, source?: Model) {
-    if (model instanceof Backbone.Collection) {
+    if (model instanceof Collection) {
       return;
     }
 
@@ -706,7 +703,7 @@ export default class Sorter extends View {
       result.dropInfo = res;
       droppable = res;
     } else {
-      droppable = droppable instanceof Backbone.Collection ? 1 : droppable;
+      droppable = droppable instanceof Collection ? 1 : droppable;
       droppable = droppable instanceof Array ? droppable.join(', ') : droppable;
       result.dropInfo = droppable;
       droppable = isString(droppable) ? this.matches(src, droppable) : droppable;
@@ -1242,7 +1239,7 @@ export default class Sorter extends View {
     const validResult = this.validTarget(dst, srcEl);
     const targetCollection = $(dst).data('collection');
     const { trgModel, srcModel, draggable } = validResult;
-    const droppable = trgModel instanceof Backbone.Collection ? 1 : validResult.droppable;
+    const droppable = trgModel instanceof Collection ? 1 : validResult.droppable;
     let modelToDrop, created;
 
     if (targetCollection && droppable && draggable) {