high-order-widget-react
Version:
External widget classes for managing react components
193 lines (178 loc) • 7.14 kB
JavaScript
import { useSyncExternalStore, useEffect } from 'react';
var Publisher = /** @class */ (function () {
function Publisher() {
this.__observers = [];
}
Object.defineProperty(Publisher.prototype, "observersList", {
get: function () {
return this.__observers;
},
enumerable: false,
configurable: true
});
Publisher.prototype.notify = function (payload) {
var listOfObservers = this._getListOfObservers(payload);
for (var _i = 0, listOfObservers_1 = listOfObservers; _i < listOfObservers_1.length; _i++) {
var o = listOfObservers_1[_i];
o.onNotified(payload);
}
};
Publisher.prototype.subscribe = function (observer) {
this.__observers.push(observer);
};
Publisher.prototype.unsubscribe = function (observer) {
this.__observers = this.__observers.filter(function (o) { return o !== observer; });
};
Publisher.prototype.removeAllObservers = function () {
this.__observers.forEach(this.unsubscribe.bind(this));
this.__observers = [];
};
Publisher.prototype._getListOfObservers = function (_) {
return this.__observers;
};
return Publisher;
}());
var Observer = /** @class */ (function () {
function Observer() {
}
return Observer;
}());
/******************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
var extendStatics = function(d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
var e = new Error(message);
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};
var StateObserver = /** @class */ (function (_super) {
__extends(StateObserver, _super);
function StateObserver(key, executeFunction) {
var _this = _super.call(this) || this;
_this.__key = key;
_this.__executeFunction = executeFunction;
return _this;
}
Object.defineProperty(StateObserver.prototype, "key", {
get: function () {
return this.__key;
},
enumerable: false,
configurable: true
});
StateObserver.prototype.onNotified = function (payload) {
this.__executeFunction(payload.value);
};
return StateObserver;
}(Observer));
var StatePublisher = /** @class */ (function (_super) {
__extends(StatePublisher, _super);
function StatePublisher() {
return _super !== null && _super.apply(this, arguments) || this;
}
StatePublisher.prototype._getListOfObservers = function (payload) {
return this.observersList.filter(function (item) { return item.key === payload.key; });
};
return StatePublisher;
}(Publisher));
var AbstractState = /** @class */ (function () {
function AbstractState(initialStateObject) {
this.__stateObject = Object.assign({}, initialStateObject);
this.__publisher = new StatePublisher();
}
Object.defineProperty(AbstractState.prototype, "stateObject", {
get: function () {
return this.__stateObject;
},
enumerable: false,
configurable: true
});
AbstractState.prototype.mount = function () { };
AbstractState.prototype.unmount = function () { };
AbstractState.prototype.getSnapshot = function (key) {
return this.__stateObject[key];
};
AbstractState.prototype.subscribe = function (key, callback) {
var _this = this;
var observer = new StateObserver(key, callback);
this.__publisher.subscribe(observer);
return function () { return _this.__publisher.unsubscribe(observer); };
};
AbstractState.prototype.removeAllObservers = function () {
this.__publisher.removeAllObservers();
};
AbstractState.prototype.updateStateObject = function (key, value) {
var previousValue = this.__stateObject[key];
this.__stateObject[key] = typeof value === 'function' ? value(previousValue) : value;
var notifyPayload = this.getSnapshot(key);
this.__publisher.notify({ key: key, value: notifyPayload });
};
return AbstractState;
}());
var useSyncState = function (state) {
return function (key) {
var onSubscribe = function (listener) {
var unsubscribe = state.subscribe(key, listener);
return unsubscribe.bind(state);
};
return useSyncExternalStore(onSubscribe, state.getSnapshot.bind(state, key));
};
};
var Widget = /** @class */ (function () {
function Widget(payload) {
this._state = payload.state;
}
Widget.prototype.render = function () {
var props = this._getWidgetViewProps();
return this._getWidget(props);
};
Widget.prototype._mount = function () { };
Widget.prototype._unmount = function () { };
Widget.prototype.__componentMount = function () {
this._state.mount();
this._mount();
};
Widget.prototype.__componentUnmount = function () {
this._state.unmount();
this._unmount();
this._state.removeAllObservers();
};
Widget.prototype._getWidgetViewProps = function () {
return {
state: this._state,
mount: this.__componentMount.bind(this),
unmount: this.__componentUnmount.bind(this)
};
};
return Widget;
}());
var useWidgetRegister = function (props) {
useEffect(function () {
props.mount();
return function () { return props.unmount(); };
}, []);
};
export { AbstractState, Observer, Publisher, StateObserver, StatePublisher, Widget, useSyncState, useWidgetRegister };
//# sourceMappingURL=index.js.map