rasti 2.0.0-alpha.8 → 2.0.0

package/lib/Component.js

@@ -4,7 +4,6 @@ exports.__esModule = true;
 exports["default"] = void 0;
 var _View2 = _interopRequireDefault(require("./View.js"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 // This options keys will be extended on view instance.
@@ -51,9 +50,9 @@ var evalExpression = function evalExpression(expression, context) {
 
 /**
  * Components are a special kind of `View` that is designed to be easily composable, 
- * making it simple to add child views and build complex user interfaces.<br />
+ * making it simple to add child views and build complex user interfaces.  
  * Unlike views, which are render-agnostic, components have a specific set of rendering 
- * guidelines that allow for a more declarative development style.<br />
+ * guidelines that allow for a more declarative development style.  
  * Components are defined with the `create` static method, which takes a tagged template.
  * @module
  * @extends Rasti.View
@@ -76,32 +75,25 @@ var evalExpression = function evalExpression(expression, context) {
  * // Increment `model.seconds` every second.
  * setInterval(() => model.seconds++, 1000);
  */
-var Component = /*#__PURE__*/function (_View) {
-  _inheritsLoose(Component, _View);
+var Component = exports["default"] = /*#__PURE__*/function (_View) {
   function Component() {
     var _this;
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    _this = _View.call(this, options) || this;
+    _this = _View.apply(this, arguments) || this;
     // Extend "this" with options, mapping componentOptions keys.
     Object.keys(options).forEach(function (key) {
       if (componentOptions[key]) _this[key] = options[key];
     });
     // Store options by default.
     _this.options = options;
-    // Ensure id.
-    _this.id = _this.attributes.id ?
-    // If id is provided, evaluate it.
-    evalExpression(_this.attributes.id, _assertThisInitialized(_this), _assertThisInitialized(_this)) :
-    // Generate a unique id and set it as id attribute.
-    Component.ID_TEMPLATE(_this.uid);
     // Bind onChange to this to be used as listener.
     // Store bound version, so it can be removed on onDestroy method.
-    _this.onChange = _this.onChange.bind(_assertThisInitialized(_this));
+    _this.onChange = _this.onChange.bind(_this);
     // Listen to model changes and call onChange.
-    if (_this.model) _this.model.on('change', _this.onChange);
-    if (_this.state) _this.state.on('change', _this.onChange);
+    if (_this.model && _this.model.on) _this.model.on('change', _this.onChange);
+    if (_this.state && _this.state.on) _this.state.on('change', _this.onChange);
     // Call life cycle method.
-    _this.onCreate.apply(_assertThisInitialized(_this), arguments);
+    _this.onCreate.apply(_this, arguments);
     return _this;
   }
 
@@ -109,10 +101,22 @@ var Component = /*#__PURE__*/function (_View) {
    * Override. We don't want to ensure an element on instantiation.
    * We will provide it later.
    */
+  _inheritsLoose(Component, _View);
   var _proto = Component.prototype;
   _proto.ensureElement = function ensureElement() {
     // If el is provided, delegate events.
-    if (this.el) this.delegateEvents();
+    if (this.el) {
+      this.delegateEvents();
+      this.id = this.el.id;
+    }
+    // Ensure id.
+    if (!this.id) {
+      this.id = this.attributes && this.attributes.id ?
+      // If id is provided, evaluate it.
+      evalExpression(this.attributes.id, this, this) :
+      // Generate a unique id and set it as id attribute.
+      Component.ID_TEMPLATE(this.uid);
+    }
   }
 
   /*
@@ -127,32 +131,34 @@ var Component = /*#__PURE__*/function (_View) {
    */;
   _proto.getAttributes = function getAttributes() {
     var _this2 = this;
-    var add = {};
+    var add = {
+      id: this.id
+    };
     var remove = {};
-    var attrs = [];
-    Object.keys(this.attributes).forEach(function (key) {
-      if (key === 'id') return;
-      // Evaluate attribute value.
-      var value = evalExpression(_this2.attributes[key], _this2, _this2);
+    var html = ["id=\"" + this.id + "\""];
+    if (this.attributes) {
+      Object.keys(this.attributes).forEach(function (key) {
+        if (key === 'id') return;
+        // Evaluate attribute value.
+        var value = evalExpression(_this2.attributes[key], _this2, _this2);
 
-      // Transform bool attribute values
-      if (value === false) {
-        remove[key] = true;
-      } else if (value === true) {
-        add[key] = '';
-        attrs.push(key);
-      } else {
-        if (value === null || typeof value === 'undefined') value = '';
-        add[key] = value;
-        attrs.push(key + "=\"" + value + "\"");
-      }
-    });
-    add.id = this.id;
-    attrs.push("id=\"" + this.id + "\"");
+        // Transform bool attribute values
+        if (value === false) {
+          remove[key] = true;
+        } else if (value === true) {
+          add[key] = '';
+          html.push(key);
+        } else {
+          if (value === null || typeof value === 'undefined') value = '';
+          add[key] = value;
+          html.push(key + "=\"" + value + "\"");
+        }
+      });
+    }
     return {
       add: add,
       remove: remove,
-      html: attrs.join(' ')
+      html: html.join(' ')
     };
   }
 
@@ -190,8 +196,8 @@ var Component = /*#__PURE__*/function (_View) {
     _View.prototype.destroy.apply(this, arguments);
     // Stop listening to `change`.
     // Set destroyed flag to prevent a last render after destroyed. TODO: Review
-    if (this.model) this.model.off('change', this.onChange);
-    if (this.state) this.state.off('change', this.onChange);
+    if (this.model && this.model.off) this.model.off('change', this.onChange);
+    if (this.state && this.state.off) this.state.off('change', this.onChange);
     this.destroyed = true;
   }
 
@@ -208,8 +214,8 @@ var Component = /*#__PURE__*/function (_View) {
    * Maybe comparing new attributes with previous ones and calling
    * render when needed. Or doing some dom transformation.
    * @param model {Rasti.Model} The model that emitted the event.
-   * @param key {string} The key that changed.
-   * @param value {any} The new value.
+   * @param changed {object} Object containing keys and values that has changed.
+   * @param [...args] {any} Any extra arguments passed to set method.
    */;
   _proto.onChange = function onChange() {
     this.render();
@@ -270,13 +276,17 @@ var Component = /*#__PURE__*/function (_View) {
     var _this5 = this;
     // Normally there won't be any children, but if there are, destroy them.
     this.destroyChildren();
-    // Replace expressions.
-    var inner = this.template.inner && this.replaceExpressions(this.template.inner, function (component) {
+    // Get tag name.
+    var tag = this.tag || 'div';
+    // Get attributes.
+    var attributes = this.getAttributes().html;
+    // Replace expressions of inner template.
+    var inner = this.template && this.template.inner && this.replaceExpressions(this.template.inner, function (component) {
       // Add child component.
       return _this5.addChild(component);
     });
     // Generate outer template.
-    return inner ? "<" + this.tag + " " + this.getAttributes().html + ">" + inner + "</" + this.tag + ">" : "<" + this.tag + " " + this.getAttributes().html + " />";
+    return inner ? "<" + tag + " " + attributes + ">" + inner + "</" + tag + ">" : "<" + tag + " " + attributes + " />";
   }
 
   /*
@@ -302,7 +312,7 @@ var Component = /*#__PURE__*/function (_View) {
       _this6.el.setAttribute(key, attributes.add[key]);
     });
     // Check for `template.inner` to see if view has innerHTML.
-    if (this.template.inner) {
+    if (this.template && this.template.inner) {
       var previousChildren = this.children;
       this.children = [];
       var nextChildren = [];
@@ -317,8 +327,10 @@ var Component = /*#__PURE__*/function (_View) {
           return previousChild.key === component.key;
         });
         if (found) {
+          var tag = found.el.tagName.toLowerCase();
+          var id = found.el.id;
           // If child already exists, replace it html by its root element.
-          out = "<" + found.tag + " id=\"" + found.id + "\"></" + found.tag + ">";
+          out = "<" + tag + " id=\"" + id + "\"></" + tag + ">";
           // Add child to recycled children.
           recycledChildren.push(found);
           // Destroy new child component. Use recycled one instead.
@@ -362,10 +374,10 @@ var Component = /*#__PURE__*/function (_View) {
   Component.extend = function extend(object) {
     var Current = this;
     var Extended = /*#__PURE__*/function (_Current) {
-      _inheritsLoose(Extended, _Current);
       function Extended() {
         return _Current.apply(this, arguments) || this;
       }
+      _inheritsLoose(Extended, _Current);
       return Extended;
     }(Current);
     Object.assign(Extended.prototype, typeof object === 'function' ? object(Current.prototype) : object);
@@ -383,10 +395,7 @@ var Component = /*#__PURE__*/function (_View) {
    * @param {boolean} hydrate If true, the view will use existing html.
    * @return {Rasti.Component}
    */;
-  Component.mount = function mount() {
-    var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var el = arguments.length > 1 ? arguments[1] : undefined;
-    var hydrate = arguments.length > 2 ? arguments[2] : undefined;
+  Component.mount = function mount(options, el, hydrate) {
     // Instantiate view.
     var view = new this(options);
     // If `el` is passed, mount component.
@@ -405,6 +414,7 @@ var Component = /*#__PURE__*/function (_View) {
     // Return view instance.
     return view;
   }
+
   /**
    * Takes a tagged template containing an HTML string, 
    * and returns a new `Component` class.
@@ -483,7 +493,6 @@ var Component = /*#__PURE__*/function (_View) {
   };
   return Component;
 }(_View2["default"]);
-exports["default"] = Component;
 Component.ID_TEMPLATE = function (uid) {
   return "rasti-component-" + uid;
 };

package/lib/Emitter.js

@@ -4,8 +4,8 @@ exports.__esModule = true;
 exports["default"] = void 0;
 /**
  * `Emitter` is a class that provides an easy way to implement the observer pattern 
- * in your applications.<br />
- * It can be extended to create new classes that have the ability to emit and bind custom named events.<br /> 
+ * in your applications.  
+ * It can be extended to create new classes that have the ability to emit and bind custom named events.   
  * Emitter is used by `Model` and `View` classes, which inherit from it to implement 
  * event-driven functionality.
  *
@@ -39,7 +39,7 @@ exports["default"] = void 0;
  * cart.addItem(item1); // Output: "Item added to cart: Smartphone - Price: $1000"
  * cart.addItem(item2); // Output: "Item added to cart: Headphones - Price: $150"
  */
-var Emitter = /*#__PURE__*/function () {
+var Emitter = exports["default"] = /*#__PURE__*/function () {
   function Emitter() {}
   var _proto = Emitter.prototype;
   /**
@@ -124,5 +124,4 @@ var Emitter = /*#__PURE__*/function () {
     });
   };
   return Emitter;
-}();
-exports["default"] = Emitter;
+}();

package/lib/Model.js

@@ -4,17 +4,16 @@ exports.__esModule = true;
 exports["default"] = void 0;
 var _Emitter2 = _interopRequireDefault(require("./Emitter.js"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 /**
  * - Orchestrates data and business logic.
  * - Emits events when data changes.
  * 
- * A `Model` manages an internal table of data attributes and triggers change events when any of its data is modified.<br />
+ * A `Model` manages an internal table of data attributes and triggers change events when any of its data is modified.  
  * Models may handle syncing data with a persistence layer. To design your models, create atomic, reusable objects 
- * that contain all the necessary functions for manipulating their specific data.<br />
- * Models should be easily passed throughout your app and used anywhere the corresponding data is needed.<br />
+ * that contain all the necessary functions for manipulating their specific data.  
+ * Models should be easily passed throughout your app and used anywhere the corresponding data is needed.  
  * Rasti models stores its attributes in `this.attributes`, which is extended from `this.defaults` and the 
  * constructor `attrs` parameter. For every attribute, a getter is generated to retrieve the model property 
  * from `this.attributes`, and a setter is created to set the model property in `this.attributes` and emit `change` 
@@ -52,20 +51,19 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Objec
  * // Apply a 10% discount to the product.
  * product.setDiscount(10); // Output: "New Price: 900"
  */
-var Model = /*#__PURE__*/function (_Emitter) {
-  _inheritsLoose(Model, _Emitter);
+var Model = exports["default"] = /*#__PURE__*/function (_Emitter) {
   function Model() {
     var _this;
     var attrs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     _this = _Emitter.call(this) || this;
     // Call preinitialize.
-    _this.preinitialize.apply(_assertThisInitialized(_this), arguments);
+    _this.preinitialize.apply(_this, arguments);
     // attributes object.
     _this.attributes = Object.assign({}, _this.defaults || {}, attrs);
     // Previous attributes.
     _this.previous = {};
     // Generate getters/setters for every attr.
-    Object.keys(_this.attributes).forEach(_this.defineAttribute.bind(_assertThisInitialized(_this)));
+    Object.keys(_this.attributes).forEach(_this.defineAttribute.bind(_this));
     return _this;
   }
 
@@ -73,6 +71,7 @@ var Model = /*#__PURE__*/function (_Emitter) {
    * If you define a preinitialize method, it will be invoked when the Model is first created, before any instantiation logic is run for the Model.
    * @param {object} attrs Object containing model attributes to extend `this.attributes`.
    */
+  _inheritsLoose(Model, _Emitter);
   var _proto = Model.prototype;
   _proto.preinitialize = function preinitialize() {}
 
@@ -105,11 +104,13 @@ var Model = /*#__PURE__*/function (_Emitter) {
   }
 
   /**
-   * Set an attribute into `this.attributes`.
-   * Emit `change` and `change:attribute` if value change.
+   * Set an attribute into `this.attributes`.  
+   * Emit `change` and `change:attribute` if a value change.  
    * Could be called in two forms, `this.set('key', value)` and
-   * `this.set({ key : value })`.
-   * This method is called internally by generated setters.
+   * `this.set({ key : value })`.  
+   * This method is called internally by generated setters.  
+   * The `change` event listener will receive the model instance, an object containing the changed attributes, and the rest of the arguments passed to `set` method.  
+   * The `change:attribute` event listener will receive the model instance, the new attribute value, and the rest of the arguments passed to `set` method.
    * @param {string} key Attribute key or object containing keys/values.
    * @param [value] Attribute value.
    * @return {this} This model.
@@ -117,19 +118,57 @@ var Model = /*#__PURE__*/function (_Emitter) {
    * @emits change:attribute
    */;
   _proto.set = function set(key, value) {
-    var _ref,
-      _this3 = this;
-    var attrs = typeof key === 'object' ? key : (_ref = {}, _ref[key] = value, _ref);
+    var _this3 = this;
+    var attrs, args;
+    // Handle both `"key", value` and `{key: value}` style arguments.
+    for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      rest[_key - 2] = arguments[_key];
+    }
+    if (typeof key === 'object') {
+      attrs = key;
+      args = [value].concat(rest);
+    } else {
+      var _attrs;
+      attrs = (_attrs = {}, _attrs[key] = value, _attrs);
+      args = rest;
+    }
+    // Are we in a nested `set` call?
+    // Calling a `set` inside a `change:attribute` or `change` event listener
+    var changing = this._changing;
+    this._changing = true;
+    // Store changed attributes.
+    var changed = {};
+    // Store previous attributes.
+    if (!changing) {
+      this.previous = Object.assign({}, this.attributes);
+    }
+    // Set attributes.
     Object.keys(attrs).forEach(function (key) {
-      var changed = key in _this3.attributes && attrs[key] !== _this3.attributes[key];
-      _this3.previous[key] = _this3.attributes[key];
-      _this3.attributes[key] = attrs[key];
-      // Emit change events.
-      if (changed) {
-        _this3.emit('change', _this3, key, attrs[key]);
-        _this3.emit("change:" + key, _this3, attrs[key]);
+      // Use equality to determine if value changed.
+      if (attrs[key] !== _this3.attributes[key]) {
+        changed[key] = attrs[key];
+        _this3.attributes[key] = attrs[key];
       }
     });
+    var changedKeys = Object.keys(changed);
+    // Pending `change` event arguments.
+    if (changedKeys.length) this._pending = ['change', this, changed].concat(args);
+    // Emit `change:attribute` events.
+    changedKeys.forEach(function (key) {
+      _this3.emit.apply(_this3, ["change:" + key, _this3, attrs[key]].concat(args));
+    });
+    // Don't emit `change` event until the end of the nested 
+    // `set` calls inside `change:attribute` event listeners.
+    if (changing) return this;
+    // Emit `change` events, that might be nested.
+    while (this._pending) {
+      var pendingChange = this._pending;
+      this._pending = null;
+      this.emit.apply(this, pendingChange);
+    }
+    // Reset flags.
+    this._pending = null;
+    this._changing = false;
     return this;
   }
 
@@ -142,5 +181,4 @@ var Model = /*#__PURE__*/function (_Emitter) {
     return this.attributes;
   };
   return Model;
-}(_Emitter2["default"]);
-exports["default"] = Model;
+}(_Emitter2["default"]);

package/lib/View.js

@@ -4,7 +4,6 @@ exports.__esModule = true;
 exports["default"] = void 0;
 var _Emitter2 = _interopRequireDefault(require("./Emitter.js"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 // This options keys will be extended on view instance.
@@ -24,10 +23,10 @@ var viewOptions = {
  * - Sends captured input to the model.
  *
  * A `View` is an atomic unit of the user interface that can render the data from a specific model or multiple models.
- * However, views can also be independent and have no associated data.<br />
+ * However, views can also be independent and have no associated data.  
  * Models must be unaware of views. Views, on the other hand, may render model data and listen to the change events 
- * emitted by the models to re-render themselves based on changes.<br />
- * Each `View` has a root element, `this.el`, which is used for event delegation.<br />
+ * emitted by the models to re-render themselves based on changes.  
+ * Each `View` has a root element, `this.el`, which is used for event delegation.  
  * All element lookups are scoped to this element, and any rendering or DOM manipulations should be done inside it. 
  * If `this.el` is not present, an element will be created using `this.tag` (defaulting to div) and `this.attributes`.
  * @module
@@ -60,14 +59,13 @@ var viewOptions = {
  * // Render view and append view's element into body.
  * document.body.appendChild(new Timer().render().el);
  */
-var View = /*#__PURE__*/function (_Emitter) {
-  _inheritsLoose(View, _Emitter);
+var View = exports["default"] = /*#__PURE__*/function (_Emitter) {
   function View() {
     var _this;
     var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     _this = _Emitter.call(this) || this;
     // Call preinitialize.
-    _this.preinitialize.apply(_assertThisInitialized(_this), arguments);
+    _this.preinitialize.apply(_this, arguments);
     // Generate unique id.
     // Useful to generate elements ids.
     _this.uid = "uid" + ++View.uid;
@@ -90,6 +88,7 @@ var View = /*#__PURE__*/function (_Emitter) {
    * If you define a preinitialize method, it will be invoked when the view is first created, before any instantiation logic is run.
    * @param {object} attrs Object containing model attributes to extend `this.attributes`.
    */
+  _inheritsLoose(View, _Emitter);
   var _proto = View.prototype;
   _proto.preinitialize = function preinitialize() {}
 
@@ -116,6 +115,7 @@ var View = /*#__PURE__*/function (_Emitter) {
   /**
    * Destroy the view.
    * Destroy children views if any, undelegate events, stop listening to events, call `onDestroy` lifecycle method.
+   * @return {Rasti.View} Return `this` for chaining.
    */;
   _proto.destroy = function destroy() {
     // Call destroy on children.
@@ -193,18 +193,21 @@ var View = /*#__PURE__*/function (_Emitter) {
 
   /**
    * Remove `this.el` from DOM.
+   * @return {Rasti.View} Return `this` for chaining.
    */;
   _proto.removeElement = function removeElement() {
     this.el.parentNode.removeChild(this.el);
+    // Return `this` for chaining.
+    return this;
   }
 
   /**
-   * Provide declarative listeners for DOM events within a view. If an events hash is not passed directly, uses `this.events` as the source.<br />
+   * Provide declarative listeners for DOM events within a view. If an events hash is not passed directly, uses `this.events` as the source.  
    * Events are written in the format `{'event selector' : 'listener'}`. The listener may be either the name of a method on the view, or a direct function body.
-   * Omitting the selector causes the event to be bound to the view's root element (`this.el`).<br />
+   * Omitting the selector causes the event to be bound to the view's root element (`this.el`).  
    * By default, `delegateEvents` is called within the View's constructor, 
-   * so if you have a simple events hash, all of your DOM events will always already be connected, and you will never have to call this function yourself. <br />
-   * All attached listeners are bound to the view automatically, so when the listeners are invoked, `this` continues to refer to the view object.<br />
+   * so if you have a simple events hash, all of your DOM events will always already be connected, and you will never have to call this function yourself.   
+   * All attached listeners are bound to the view automatically, so when the listeners are invoked, `this` continues to refer to the view object.  
    * When `delegateEvents` is run again, perhaps with a different events hash, all listeners are removed and delegated afresh.
    * @param {object} [events] Object in the format `{'event selector' : 'listener'}`. Used to bind delegated event listeners to root element.
    * @return {Rasti.View} Return `this` for chaining.
@@ -291,5 +294,4 @@ var View = /*#__PURE__*/function (_Emitter) {
 /*
  * Unique Id
  */
-exports["default"] = View;
 View.uid = 0;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rasti",
-  "version": "2.0.0-alpha.8",
-  "description": "Minimalistic, ultra-lightweight JavaScript library for building user interfaces.",
+  "version": "2.0.0",
+  "description": "Rasti is a minimalistic JavaScript library for building user interfaces.",
   "main": "lib/index.js",
   "jsnext:main": "es/index.js",
   "files": [
@@ -39,39 +39,39 @@
   "author": "Alberto Masuelli <alberto.masuelli@gmail.com> (https://github.com/8tentaculos)",
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.22.5",
-    "@babel/core": "^7.22.5",
-    "@babel/eslint-parser": "^7.22.5",
-    "@babel/plugin-transform-arrow-functions": "^7.22.5",
-    "@babel/plugin-transform-block-scoped-functions": "^7.22.5",
-    "@babel/plugin-transform-block-scoping": "^7.22.5",
-    "@babel/plugin-transform-classes": "^7.22.5",
-    "@babel/plugin-transform-computed-properties": "^7.22.5",
-    "@babel/plugin-transform-destructuring": "^7.22.5",
-    "@babel/plugin-transform-for-of": "^7.22.5",
-    "@babel/plugin-transform-function-name": "^7.22.5",
-    "@babel/plugin-transform-literals": "^7.22.5",
-    "@babel/plugin-transform-member-expression-literals": "^7.22.5",
-    "@babel/plugin-transform-modules-commonjs": "^7.22.5",
-    "@babel/plugin-transform-object-super": "^7.22.5",
-    "@babel/plugin-transform-parameters": "^7.22.5",
-    "@babel/plugin-transform-property-literals": "^7.22.5",
-    "@babel/plugin-transform-shorthand-properties": "^7.22.5",
-    "@babel/plugin-transform-spread": "^7.22.5",
-    "@babel/plugin-transform-sticky-regex": "^7.22.5",
-    "@babel/plugin-transform-template-literals": "^7.22.5",
-    "@babel/plugin-transform-unicode-regex": "^7.22.5",
-    "@babel/register": "^7.22.5",
-    "babel-loader": "^9.1.2",
-    "chai": "^4.3.7",
-    "cross-env": "^5.2.1",
-    "eslint": "^8.43.0",
-    "jsdoc-to-markdown": "^8.0.0",
-    "jsdom": "^22.1.0",
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.3",
+    "@babel/eslint-parser": "^7.24.1",
+    "@babel/plugin-transform-arrow-functions": "^7.24.1",
+    "@babel/plugin-transform-block-scoped-functions": "^7.24.1",
+    "@babel/plugin-transform-block-scoping": "^7.24.1",
+    "@babel/plugin-transform-classes": "^7.24.1",
+    "@babel/plugin-transform-computed-properties": "^7.24.1",
+    "@babel/plugin-transform-destructuring": "^7.24.1",
+    "@babel/plugin-transform-for-of": "^7.24.1",
+    "@babel/plugin-transform-function-name": "^7.24.1",
+    "@babel/plugin-transform-literals": "^7.24.1",
+    "@babel/plugin-transform-member-expression-literals": "^7.24.1",
+    "@babel/plugin-transform-modules-commonjs": "^7.24.1",
+    "@babel/plugin-transform-object-super": "^7.24.1",
+    "@babel/plugin-transform-parameters": "^7.24.1",
+    "@babel/plugin-transform-property-literals": "^7.24.1",
+    "@babel/plugin-transform-shorthand-properties": "^7.24.1",
+    "@babel/plugin-transform-spread": "^7.24.1",
+    "@babel/plugin-transform-sticky-regex": "^7.24.1",
+    "@babel/plugin-transform-template-literals": "^7.24.1",
+    "@babel/plugin-transform-unicode-regex": "^7.24.1",
+    "@babel/register": "^7.23.7",
+    "babel-loader": "^9.1.3",
+    "chai": "^4.4.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.57.0",
+    "jsdoc-to-markdown": "^8.0.1",
+    "jsdom": "^24.0.0",
     "jsdom-global": "3.0.2",
-    "mocha": "^10.2.0",
-    "rimraf": "^5.0.1",
-    "webpack": "^5.88.1",
+    "mocha": "^10.4.0",
+    "rimraf": "^5.0.5",
+    "webpack": "^5.91.0",
     "webpack-cli": "^5.1.4"
   },
   "directories": {