@webiny/app-admin 0.0.0-mt-2 → 0.0.0-unstable.085ff6572f

package/components/RichTextEditor/tools/image/tunes.js

@@ -1,9 +1,15 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { make } from "./ui";
-import svgs from "./svgs";
-
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _ui = require("./ui");
+var _svgs = _interopRequireDefault(require("./svgs"));
 /**
  * Working with Block Tunes
  */
@@ -16,32 +22,25 @@ var Tunes = /*#__PURE__*/function () {
    */
   function Tunes(_ref) {
     var api = _ref.api,
-        actions = _ref.actions,
-        onChange = _ref.onChange;
-
-    _classCallCheck(this, Tunes);
-
-    _defineProperty(this, "api", void 0);
-
-    _defineProperty(this, "actions", void 0);
-
-    _defineProperty(this, "onChange", void 0);
-
-    _defineProperty(this, "buttons", void 0);
-
+      actions = _ref.actions,
+      onChange = _ref.onChange;
+    (0, _classCallCheck2.default)(this, Tunes);
+    (0, _defineProperty2.default)(this, "api", void 0);
+    (0, _defineProperty2.default)(this, "actions", void 0);
+    (0, _defineProperty2.default)(this, "onChange", void 0);
+    (0, _defineProperty2.default)(this, "buttons", void 0);
     this.api = api;
     this.actions = actions;
     this.onChange = onChange;
     this.buttons = [];
   }
+
   /**
    * Available Image tunes
    *
    * @returns {{name: string, icon: string, title: string}[]}
    */
-
-
-  _createClass(Tunes, [{
+  (0, _createClass2.default)(Tunes, [{
     key: "CSS",
     get:
     /**
@@ -57,51 +56,47 @@ var Tunes = /*#__PURE__*/function () {
         buttonActive: this.api.styles.settingsButtonActive
       };
     }
+
     /**
      * Makes buttons with tunes: stretch image
      *
      * @param {ImageToolData} toolData - generate Elements of tunes
      * @returns {Element}
      */
-
   }, {
     key: "render",
     value: function render(toolData) {
       var _this = this;
-
-      var wrapper = make("div", this.CSS.wrapper);
+      var wrapper = (0, _ui.make)("div", this.CSS.wrapper);
       this.buttons = [];
       var tunes = Tunes.tunes.concat(this.actions);
       tunes.forEach(function (tune) {
         var title = _this.api.i18n.t(tune.title);
-
-        var el = make("div", [_this.CSS.buttonBase, _this.CSS.button], {
+        var el = (0, _ui.make)("div", [_this.CSS.buttonBase, _this.CSS.button], {
           innerHTML: tune.icon,
           title: title
         });
         el.addEventListener("click", function () {
           _this.tuneClicked(tune.name, tune.action);
         });
-        el.dataset.tune = tune.name;
-        el.classList.toggle(_this.CSS.buttonActive, toolData[tune.name]);
-
+        el.dataset["tune"] = tune.name;
+        var name = tune.name;
+        el.classList.toggle(_this.CSS.buttonActive, !!toolData[name]);
         _this.buttons.push(el);
-
         _this.api.tooltip.onHover(el, title, {
           placement: "top"
         });
-
         wrapper.appendChild(el);
       });
       return wrapper;
     }
+
     /**
      * Clicks to one of the tunes
      *
      * @param {string} tuneName - clicked tune name
      * @param {Function} customFunction - function to execute on click
      */
-
   }, {
     key: "tuneClicked",
     value: function tuneClicked(tuneName, customFunction) {
@@ -110,25 +105,25 @@ var Tunes = /*#__PURE__*/function () {
           return false;
         }
       }
-
       var button = this.buttons.find(function (el) {
-        return el.dataset.tune === tuneName;
+        return el.dataset["tune"] === tuneName;
       });
-      button.classList.toggle(this.CSS.buttonActive, !button.classList.contains(this.CSS.buttonActive));
+      if (button) {
+        button.classList.toggle(this.CSS.buttonActive, !button.classList.contains(this.CSS.buttonActive));
+      }
       this.onChange(tuneName);
+      return true;
     }
   }], [{
     key: "tunes",
     get: function get() {
       return [{
         name: "stretched",
-        icon: svgs.stretched,
+        icon: _svgs.default.stretched,
         title: "Stretch image"
       }];
     }
   }]);
-
   return Tunes;
 }();
-
-export { Tunes as default };
+exports.default = Tunes;

package/components/RichTextEditor/tools/image/tunes.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Tunes","api","actions","onChange","buttons","wrapper","buttonBase","styles","settingsButton","button","buttonActive","settingsButtonActive","toolData","make","CSS","tunes","concat","forEach","tune","title","i18n","t","el","innerHTML","icon","addEventListener","tuneClicked","name","action","dataset","classList","toggle","push","tooltip","onHover","placement","appendChild","tuneName","customFunction","find","contains","svgs","stretched"],"sources":["tunes.ts"],"sourcesContent":["import { API } from \"@editorjs/editorjs\";\nimport { make } from \"./ui\";\nimport svgs from \"./svgs\";\nimport { ImageToolData, Tune, TuneOnChangeCallable } from \"./types\";\n\ninterface TunesParams {\n    api: API;\n    actions: Tune[];\n    onChange: TuneOnChangeCallable;\n}\n/**\n * Working with Block Tunes\n */\nexport default class Tunes {\n    private api: API;\n    private readonly actions: Tune[];\n    private readonly onChange: TuneOnChangeCallable;\n    private buttons: Array<HTMLElement>;\n    /**\n     * @param {object} tune - image tool Tunes managers\n     * @param {object} tune.api - Editor API\n     * @param {object} tune.actions - list of user defined tunes\n     * @param {Function} tune.onChange - tune toggling callback\n     */\n    constructor({ api, actions, onChange }: TunesParams) {\n        this.api = api;\n        this.actions = actions;\n        this.onChange = onChange;\n        this.buttons = [];\n    }\n\n    /**\n     * Available Image tunes\n     *\n     * @returns {{name: string, icon: string, title: string}[]}\n     */\n    static get tunes(): Tune[] {\n        return [\n            {\n                name: \"stretched\",\n                icon: svgs.stretched,\n                title: \"Stretch image\"\n            }\n        ];\n    }\n\n    /**\n     * Styles\n     *\n     * @returns {{wrapper: string, buttonBase: *, button: string, buttonActive: *}}\n     */\n    get CSS() {\n        return {\n            wrapper: \"\",\n            buttonBase: this.api.styles.settingsButton,\n            button: \"image-tool__tune\",\n            buttonActive: this.api.styles.settingsButtonActive\n        };\n    }\n\n    /**\n     * Makes buttons with tunes: stretch image\n     *\n     * @param {ImageToolData} toolData - generate Elements of tunes\n     * @returns {Element}\n     */\n    render(toolData: ImageToolData): HTMLElement {\n        const wrapper = make(\"div\", this.CSS.wrapper);\n\n        this.buttons = [];\n\n        const tunes = Tunes.tunes.concat(this.actions);\n\n        tunes.forEach(tune => {\n            const title = this.api.i18n.t(tune.title);\n            const el = make(\"div\", [this.CSS.buttonBase, this.CSS.button], {\n                innerHTML: tune.icon,\n                title\n            });\n\n            el.addEventListener(\"click\", () => {\n                this.tuneClicked(tune.name, tune.action);\n            });\n\n            el.dataset[\"tune\"] = tune.name;\n            const name = tune.name as keyof ImageToolData;\n            el.classList.toggle(this.CSS.buttonActive, !!toolData[name]);\n\n            this.buttons.push(el);\n\n            this.api.tooltip.onHover(el, title, {\n                placement: \"top\"\n            });\n\n            wrapper.appendChild(el);\n        });\n\n        return wrapper;\n    }\n\n    /**\n     * Clicks to one of the tunes\n     *\n     * @param {string} tuneName - clicked tune name\n     * @param {Function} customFunction - function to execute on click\n     */\n    tuneClicked(tuneName: string, customFunction?: TuneOnChangeCallable): boolean {\n        if (typeof customFunction === \"function\") {\n            if (!customFunction(tuneName)) {\n                return false;\n            }\n        }\n\n        const button = this.buttons.find(el => el.dataset[\"tune\"] === tuneName);\n\n        if (button) {\n            button.classList.toggle(\n                this.CSS.buttonActive,\n                !button.classList.contains(this.CSS.buttonActive)\n            );\n        }\n\n        this.onChange(tuneName);\n        return true;\n    }\n}\n"],"mappings":"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"}

package/components/RichTextEditor/tools/image/types.d.ts

@@ -0,0 +1,29 @@
+export interface TuneOnChangeCallable {
+    (tune: string): boolean | void;
+}
+export interface Tune {
+    name: string;
+    icon: string;
+    title: string;
+    action?: TuneOnChangeCallable;
+}
+export interface ImageToolData {
+    caption: string;
+    file: string;
+}
+export interface ImageToolFile {
+    src: string;
+}
+export interface GetFileSourceCallable {
+    (file: ImageToolFile | string): string;
+}
+export interface OnSelectFileCallable {
+    (file: ImageToolFile): string;
+}
+export interface ImageToolConfig {
+    getFileSrc: GetFileSourceCallable;
+    onSelectFile: OnSelectFileCallable;
+    captionPlaceholder?: string;
+    actions: Tune[];
+    context: Record<string, any>;
+}

package/components/RichTextEditor/tools/image/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/components/RichTextEditor/tools/image/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface TuneOnChangeCallable {\n    (tune: string): boolean | void;\n}\nexport interface Tune {\n    name: string;\n    icon: string;\n    title: string;\n    action?: TuneOnChangeCallable;\n}\n\nexport interface ImageToolData {\n    caption: string;\n    file: string;\n}\nexport interface ImageToolFile {\n    src: string;\n}\nexport interface GetFileSourceCallable {\n    (file: ImageToolFile | string): string;\n}\nexport interface OnSelectFileCallable {\n    (file: ImageToolFile): string;\n}\nexport interface ImageToolConfig {\n    getFileSrc: GetFileSourceCallable;\n    onSelectFile: OnSelectFileCallable;\n    captionPlaceholder?: string;\n    actions: Tune[];\n    context: Record<string, any>;\n}\n"],"mappings":""}

package/components/RichTextEditor/tools/image/ui.d.ts

@@ -1,3 +1,21 @@
+/// <reference types="react" />
+/// <reference types="web" />
+import { API } from "@editorjs/editorjs";
+import { ImageToolConfig, ImageToolData } from "./types";
+interface OnSelectFileCallable {
+    (): void;
+}
+interface UiStatus {
+    EMPTY: "empty";
+    FILLED: "filled";
+    [key: string]: string;
+}
+interface UiParams {
+    api: API;
+    config: ImageToolConfig;
+    onSelectFile: OnSelectFileCallable;
+    readOnly: boolean;
+}
 /**
  * Class for working with UI:
  *  - rendering base structure
@@ -7,28 +25,23 @@
 export default class Ui {
     private api;
     private config;
-    private readOnly;
-    private onSelectFile;
-    nodes: {
+    private readonly readOnly;
+    private readonly onSelectFile;
+    readonly nodes: {
         wrapper: HTMLElement;
         imageContainer: HTMLElement;
         fileButton: HTMLElement;
-        imageEl: HTMLElement;
+        imageEl?: HTMLElement;
         caption: HTMLElement;
     };
     /**
-     * @param {object} ui - image tool Ui module
-     * @param {object} ui.api - Editor.js API
-     * @param {ImageConfig} ui.config - user config
-     * @param {Function} ui.onSelectFile - callback for clicks on Select file button
-     * @param {boolean} ui.readOnly - read-only mode flag
+     * @param ui - image tool Ui module
+     * @param ui.api - Editor.js API
+     * @param ui.config - user config
+     * @param ui.onSelectFile - callback for clicks on Select file button
+     * @param ui.readOnly - read-only mode flag
      */
-    constructor({ api, config, onSelectFile, readOnly }: {
-        api: any;
-        config: any;
-        onSelectFile: any;
-        readOnly: any;
-    });
+    constructor({ api, config, onSelectFile, readOnly }: UiParams);
     /**
      * CSS classes
      *
@@ -53,44 +66,41 @@ export default class Ui {
      *
      * @returns {{EMPTY: string, UPLOADING: string, FILLED: string}}
      */
-    static get status(): {
-        EMPTY: string;
-        FILLED: string;
-    };
+    static get status(): UiStatus;
     /**
      * Renders tool UI
      *
      * @param {ImageToolData} toolData - saved tool data
      * @returns {Element}
      */
-    render(toolData: any): HTMLElement;
+    render(toolData: ImageToolData): HTMLElement;
     /**
      * Creates upload-file button
      *
      * @returns {Element}
      */
-    createFileButton(): any;
+    createFileButton(): HTMLElement;
     /**
      * Shows an image
      *
      * @param {string} url - image source
      * @returns {void}
      */
-    fillImage(url: any): void;
+    fillImage(url: string): void;
     /**
      * Shows caption input
      *
      * @param {string} text - caption text
      * @returns {void}
      */
-    fillCaption(text: any): void;
+    fillCaption(text: string): void;
     /**
      * Changes UI status
      *
      * @param {string} status - see {@link Ui.status} constants
      * @returns {void}
      */
-    toggleStatus(status: any): void;
+    toggleStatus(status: string): void;
     /**
      * Apply visual representation of activated tune
      *
@@ -98,7 +108,7 @@ export default class Ui {
      * @param {boolean} status - true for enable, false for disable
      * @returns {void}
      */
-    applyTune(tuneName: any, status: any): void;
+    applyTune(tuneName: string, status: boolean): void;
 }
 /**
  * Helper for making Elements with attributes
@@ -106,6 +116,7 @@ export default class Ui {
  * @param  {string} tagName           - new Element tag name
  * @param  {Array|string} classNames  - list or name of CSS class
  * @param  {object} attributes        - any attributes
- * @returns {Element}
+ * @returns {HTMLElement}
  */
-export declare const make: (tagName: any, classNames?: any, attributes?: {}) => any;
+export declare const make: (tagName: string, classNames?: string[] | string | null, attributes?: Record<string, string | number | boolean>) => HTMLElement;
+export {};

package/components/RichTextEditor/tools/image/ui.js

@@ -1,8 +1,14 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.make = exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 /**
  * Class for working with UI:
  *  - rendering base structure
@@ -11,30 +17,23 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  */
 var Ui = /*#__PURE__*/function () {
   /**
-   * @param {object} ui - image tool Ui module
-   * @param {object} ui.api - Editor.js API
-   * @param {ImageConfig} ui.config - user config
-   * @param {Function} ui.onSelectFile - callback for clicks on Select file button
-   * @param {boolean} ui.readOnly - read-only mode flag
+   * @param ui - image tool Ui module
+   * @param ui.api - Editor.js API
+   * @param ui.config - user config
+   * @param ui.onSelectFile - callback for clicks on Select file button
+   * @param ui.readOnly - read-only mode flag
    */
   function Ui(_ref) {
     var api = _ref.api,
-        config = _ref.config,
-        onSelectFile = _ref.onSelectFile,
-        readOnly = _ref.readOnly;
-
-    _classCallCheck(this, Ui);
-
-    _defineProperty(this, "api", void 0);
-
-    _defineProperty(this, "config", void 0);
-
-    _defineProperty(this, "readOnly", void 0);
-
-    _defineProperty(this, "onSelectFile", void 0);
-
-    _defineProperty(this, "nodes", void 0);
-
+      config = _ref.config,
+      onSelectFile = _ref.onSelectFile,
+      readOnly = _ref.readOnly;
+    (0, _classCallCheck2.default)(this, Ui);
+    (0, _defineProperty2.default)(this, "api", void 0);
+    (0, _defineProperty2.default)(this, "config", void 0);
+    (0, _defineProperty2.default)(this, "readOnly", void 0);
+    (0, _defineProperty2.default)(this, "onSelectFile", void 0);
+    (0, _defineProperty2.default)(this, "nodes", void 0);
     this.api = api;
     this.config = config;
     this.onSelectFile = onSelectFile;
@@ -48,6 +47,7 @@ var Ui = /*#__PURE__*/function () {
         contentEditable: !this.readOnly
       })
     };
+
     /**
      * Create base structure
      *  <wrapper>
@@ -55,27 +55,24 @@ var Ui = /*#__PURE__*/function () {
      *    <caption />
      *  </wrapper>
      */
-
-    this.nodes.caption.dataset.placeholder = this.config.captionPlaceholder;
+    this.nodes.caption.dataset["placeholder"] = this.config.captionPlaceholder;
     this.nodes.wrapper.appendChild(this.nodes.imageContainer);
     this.nodes.wrapper.appendChild(this.nodes.caption);
     this.nodes.wrapper.appendChild(this.nodes.fileButton);
   }
+
   /**
    * CSS classes
    *
    * @returns {object}
    */
-
-
-  _createClass(Ui, [{
+  (0, _createClass2.default)(Ui, [{
     key: "CSS",
     get: function get() {
       return {
         baseClass: this.api.styles.block,
         input: this.api.styles.input,
         button: this.api.styles.button,
-
         /**
          * Tool's classes
          */
@@ -85,6 +82,7 @@ var Ui = /*#__PURE__*/function () {
         caption: "image-tool__caption"
       };
     }
+
     /**
      * Ui statuses:
      * - empty
@@ -92,7 +90,6 @@ var Ui = /*#__PURE__*/function () {
      *
      * @returns {{EMPTY: string, UPLOADING: string, FILLED: string}}
      */
-
   }, {
     key: "render",
     value:
@@ -106,20 +103,18 @@ var Ui = /*#__PURE__*/function () {
       if (!toolData.file || Object.keys(toolData.file).length === 0) {
         this.toggleStatus(Ui.status.EMPTY);
       }
-
       return this.nodes.wrapper;
     }
+
     /**
      * Creates upload-file button
      *
      * @returns {Element}
      */
-
   }, {
     key: "createFileButton",
     value: function createFileButton() {
       var _this = this;
-
       var button = make("div", [this.CSS.button]);
       button.innerHTML = this.api.i18n.t("Select an Image");
       button.addEventListener("click", function () {
@@ -127,18 +122,17 @@ var Ui = /*#__PURE__*/function () {
       });
       return button;
     }
+
     /**
      * Shows an image
      *
      * @param {string} url - image source
      * @returns {void}
      */
-
   }, {
     key: "fillImage",
     value: function fillImage(url) {
       var _this2 = this;
-
       /**
        * Check for a source extension to compose element correctly: video tag for mp4, img — for others
        */
@@ -146,6 +140,7 @@ var Ui = /*#__PURE__*/function () {
       var attributes = {
         src: url
       };
+
       /**
        * We use eventName variable because IMG and VIDEO tags have different event to be called on source load
        * - IMG: load
@@ -153,12 +148,11 @@ var Ui = /*#__PURE__*/function () {
        *
        * @type {string}
        */
-
       var eventName = "load";
+
       /**
        * Update attributes and eventName if source is a mp4 video
        */
-
       if (tag === "VIDEO") {
         /**
          * Add attributes for playing muted mp4 as a gif
@@ -169,61 +163,64 @@ var Ui = /*#__PURE__*/function () {
         attributes.loop = true;
         attributes.muted = true;
         attributes.playsinline = true;
+
         /**
          * Change event to be listened
          *
          * @type {string}
          */
-
         eventName = "loadeddata";
       }
+
       /**
        * Compose tag with defined attributes
        *
        * @type {Element}
        */
-
-
       this.nodes.imageEl = make(tag, this.CSS.imageEl, attributes);
+
       /**
        * Add load event listener
        */
-
       this.nodes.imageEl.addEventListener(eventName, function () {
         _this2.toggleStatus(Ui.status.FILLED);
       });
       this.nodes.imageContainer.appendChild(this.nodes.imageEl);
     }
+
     /**
      * Shows caption input
      *
      * @param {string} text - caption text
      * @returns {void}
      */
-
   }, {
     key: "fillCaption",
     value: function fillCaption(text) {
-      if (this.nodes.caption) {
-        this.nodes.caption.innerHTML = text;
+      if (!this.nodes.caption) {
+        return;
       }
+      this.nodes.caption.innerHTML = text;
     }
+
     /**
      * Changes UI status
      *
      * @param {string} status - see {@link Ui.status} constants
      * @returns {void}
      */
-
   }, {
     key: "toggleStatus",
     value: function toggleStatus(status) {
       for (var statusType in Ui.status) {
-        if (Object.prototype.hasOwnProperty.call(Ui.status, statusType)) {
-          this.nodes.wrapper.classList.toggle("".concat(this.CSS.wrapper, "--").concat(Ui.status[statusType]), status === Ui.status[statusType]);
+        if (Object.prototype.hasOwnProperty.call(Ui.status, statusType) === false) {
+          continue;
         }
+        var newStatus = Ui.status[statusType];
+        this.nodes.wrapper.classList.toggle("".concat(this.CSS.wrapper, "--").concat(newStatus), status === newStatus);
       }
     }
+
     /**
      * Apply visual representation of activated tune
      *
@@ -231,7 +228,6 @@ var Ui = /*#__PURE__*/function () {
      * @param {boolean} status - true for enable, false for disable
      * @returns {void}
      */
-
   }, {
     key: "applyTune",
     value: function applyTune(tuneName, status) {
@@ -246,7 +242,6 @@ var Ui = /*#__PURE__*/function () {
       };
     }
   }]);
-
   return Ui;
 }();
 /**
@@ -255,27 +250,29 @@ var Ui = /*#__PURE__*/function () {
  * @param  {string} tagName           - new Element tag name
  * @param  {Array|string} classNames  - list or name of CSS class
  * @param  {object} attributes        - any attributes
- * @returns {Element}
+ * @returns {HTMLElement}
  */
-
-
-export { Ui as default };
-export var make = function make(tagName) {
+exports.default = Ui;
+var make = function make(tagName) {
   var classNames = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var attributes = arguments.length > 2 ? arguments[2] : undefined;
   var el = document.createElement(tagName);
-
   if (Array.isArray(classNames)) {
     var _el$classList;
-
-    (_el$classList = el.classList).add.apply(_el$classList, _toConsumableArray(classNames));
+    (_el$classList = el.classList).add.apply(_el$classList, (0, _toConsumableArray2.default)(classNames));
   } else if (classNames) {
     el.classList.add(classNames);
   }
-
+  if (!attributes) {
+    return el;
+  }
   for (var attrName in attributes) {
+    /**
+     * Unfortunately it is a problem to map attributes to element because element is complaining
+     * that attrName is a string, which cannot index the HTMLElement
+     */
     el[attrName] = attributes[attrName];
   }
-
   return el;
-};
+};
+exports.make = make;