Convert Selector into ts

src/abstract/Model.ts

@@ -22,7 +22,11 @@ export default class Model<
     return this._module;
   }
 
-  public get config(): TModule extends IBaseModule<infer C>? C: unknown{
-    return this._module.config
+  public get config(): TModule extends IBaseModule<infer C> ? C : unknown {
+    return this._module.config;
+  }
+
+  protected get em() {
+    return this._module.em;
   }
 }

src/selector_manager/index.ts

@@ -210,7 +210,7 @@ export default class SelectorManager extends Module {
     name: string | { name: string; label?: string },
     opts = {},
     cOpts = {}
-  ) {
+  ): Selector {
     let props: any = { ...opts };
 
     if (isObject(name)) {
@@ -233,10 +233,11 @@ export default class SelectorManager extends Module {
     const cname = props.name;
     const config = this.getConfig();
     const all = this.getAll();
+    const em = this.em;
     const selector = cname ? this.get(cname, props.type) : all.where(props)[0];
 
     if (!selector) {
-      return all.add(props, { ...cOpts, config });
+      return all.add(new Selector(props, { ...cOpts, config, em }));
     }
 
     return selector;

src/selector_manager/model/Selector.js → src/selector_manager/model/Selector.ts

@@ -1,5 +1,6 @@
-import { result, forEach, keys } from 'underscore';
-import { Model } from '../../common';
+import { result, forEach, keys } from "underscore";
+import { Model } from "../../common";
+import EditorModel from "../../editor/model/Editor";
 
 const TYPE_CLASS = 1;
 const TYPE_ID = 2;
@@ -16,8 +17,8 @@ const TYPE_ID = 2;
 export default class Selector extends Model {
   defaults() {
     return {
-      name: '',
-      label: '',
+      name: "",
+      label: "",
       type: TYPE_CLASS,
       active: true,
       private: false,
@@ -26,43 +27,52 @@ export default class Selector extends Model {
     };
   }
 
-  initialize(props, opts = {}) {
+  // Type selectors: https://developer.mozilla.org/it/docs/Web/CSS/CSS_Selectors
+  static readonly TYPE_CLASS = TYPE_CLASS;
+  static readonly TYPE_ID = TYPE_ID;
+
+  em: EditorModel;
+
+  constructor(props: any, opts: any = {}) {
+    super(props, opts);
     const { config = {} } = opts;
-    const name = this.get('name');
-    const label = this.get('label');
+    const name = this.get("name");
+    const label = this.get("label");
 
     if (!name) {
-      this.set('name', label);
+      this.set("name", label);
     } else if (!label) {
-      this.set('label', name);
+      this.set("label", name);
     }
 
-    const namePreEsc = this.get('name');
+    const namePreEsc = this.get("name");
     const { escapeName } = config;
-    const nameEsc = escapeName ? escapeName(namePreEsc) : Selector.escapeName(namePreEsc);
-    this.set('name', nameEsc);
-    this.em = config.em;
+    const nameEsc = escapeName
+      ? escapeName(namePreEsc)
+      : Selector.escapeName(namePreEsc);
+    this.set("name", nameEsc);
+    this.em = opts.em;
   }
 
   isId() {
-    return this.get('type') === TYPE_ID;
+    return this.get("type") === TYPE_ID;
   }
 
   isClass() {
-    return this.get('type') === TYPE_CLASS;
+    return this.get("type") === TYPE_CLASS;
   }
 
-  getFullName(opts = {}) {
+  getFullName(opts: any = {}) {
     const { escape } = opts;
-    const name = this.get('name');
-    let pfx = '';
+    const name = this.get("name");
+    let pfx = "";
 
-    switch (this.get('type')) {
+    switch (this.get("type")) {
       case TYPE_CLASS:
-        pfx = '.';
+        pfx = ".";
         break;
       case TYPE_ID:
-        pfx = '#';
+        pfx = "#";
         break;
     }
 
@@ -90,7 +100,7 @@ export default class Selector extends Model {
    * // -> `My selector`
    */
   getLabel() {
-    return this.get('label');
+    return this.get("label");
   }
 
   /**
@@ -102,30 +112,30 @@ export default class Selector extends Model {
    * console.log(selector.getLabel());
    * // -> `New Label`
    */
-  setLabel(label) {
-    return this.set('label', label);
+  setLabel(label: string) {
+    return this.set("label", label);
   }
 
   /**
    * Get selector active state.
    * @returns {Boolean}
    */
-  getActive() {
-    return this.get('active');
+  getActive(): boolean {
+    return this.get("active");
   }
 
   /**
    * Update selector active state.
    * @param {Boolean} value New active state
    */
-  setActive(value) {
-    return this.set('active', value);
+  setActive(value: boolean) {
+    return this.set("active", value);
   }
 
   toJSON(opts = {}) {
     const { em } = this;
     let obj = Model.prototype.toJSON.call(this, [opts]);
-    const defaults = result(this, 'defaults');
+    const defaults = result(this, "defaults");
 
     if (em && em.getConfig().avoidDefaults) {
       forEach(defaults, (value, key) => {
@@ -151,20 +161,16 @@ export default class Selector extends Model {
 
     return obj;
   }
-}
 
-Selector.prototype.idAttribute = 'name';
-
-// Type selectors: https://developer.mozilla.org/it/docs/Web/CSS/CSS_Selectors
-Selector.TYPE_CLASS = TYPE_CLASS;
-Selector.TYPE_ID = TYPE_ID;
+  /**
+   * Escape string
+   * @param {string} name
+   * @return {string}
+   * @public
+   */
+  static escapeName(name: string) {
+    return `${name}`.trim().replace(/([^a-z0-9\w-\:]+)/gi, "-");
+  }
+}
 
-/**
- * Escape string
- * @param {string} name
- * @return {string}
- * @private
- */
-Selector.escapeName = name => {
-  return `${name}`.trim().replace(/([^a-z0-9\w-\:]+)/gi, '-');
-};
+Selector.prototype.idAttribute = "name";