holders - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

elements.d.ts

@@ -1,2 +0,2 @@
-import { Component, HTMLAttributes, ComponentElement } from "react";
+import { Component, HTMLAttributes } from "react";
 import { Holder } from './hold';
@@ -116,2 +116,7 @@ export * from './hold';
 }
+/** TypeScript 3.x can no longer infer T when TextInputAttributes<T> is used. Using this instead. */
+export declare type TextInputAttributesWorkaround<T> = TextInputAttributes_<T> & {
+    parse?: Parse<T>;
+    stringify?: (t: T) => string;
+};
 /** Attributes supported by TextBox and its underlying `<input>` element. */
@@ -159,2 +164,7 @@ export declare type TextInputAttributes<T> = TextInputAttributes_<T> & ConvertsToString<T>;
 }
+/** TypeScript 3.x can no longer infer T when TextAreaAttributes<T> is used. Using this instead. */
+export declare type TextAreaAttributesWorkaround<T> = TextAreaAttributes_<T> & {
+    parse?: Parse<T>;
+    stringify?: (t: T) => string;
+};
 /** Attributes supported for TextArea and its underlying `<textarea>` element. */
@@ -175,3 +185,3 @@ export declare type TextAreaAttributes<T> = TextAreaAttributes_<T> & ConvertsToString<T>;
 }
-declare abstract class TextBase<T, Props extends TextAttributesBase<T>> extends Component<Props, {
+declare abstract class TextBase<T extends {}, Props extends TextAttributesBase<T>> extends Component<Props, {
     tempText?: string;
@@ -196,3 +206,3 @@ }> {
 */
-export declare class TextBox<T> extends TextBase<T, TextInputAttributes<T>> {
+export declare class TextBox<T> extends TextBase<T, TextInputAttributesWorkaround<T>> {
     protected chooseType(p2: any): string;
@@ -204,3 +214,3 @@ }
  */
-export declare class TextArea<T> extends TextBase<T, TextAreaAttributes<T>> {
+export declare class TextArea<T> extends TextBase<T, TextAreaAttributesWorkaround<T>> {
     protected chooseType(p2: any): string;
@@ -215,3 +225,3 @@ }
  **/
-export declare function DateBox(props: DateInputAttributes): ComponentElement<any, Component<any, any, any>>;
+export declare function DateBox(props: DateInputAttributes): import("react").CElement<any, Component<any, any, any>>;
 /** Parses a date if it is in the form YYYY-MM-DD, as it will be
@@ -235,3 +245,3 @@ *  if it was produced by `<input type="date"/>`. If a second Date is
  */
-export declare function TimeBox(props: TimeInputAttributes): ComponentElement<any, Component<any, any, any>>;
+export declare function TimeBox(props: TimeInputAttributes): import("react").CElement<any, Component<any, any, any>>;
 /** Gets a 24-hour time string suitable for use in `<input type="time"/>` */
@@ -238,0 +248,0 @@ export declare function timeTo24hString(time: Date | undefined, utc?: boolean): string;

elements.js

@@ -7,3 +7,3 @@ var __extends = (this && this.__extends) || (function () {
         return extendStatics(d, b);
-    }
+    };
     return function (d, b) {
@@ -15,2 +15,9 @@ extendStatics(d, b);
 })();
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 (function (factory) {
@@ -46,3 +53,3 @@ if (typeof module === "object" && typeof module.exports === "object") {
     function Label(p) {
-        var label = react_1.createElement.apply(void 0, ["label", omit(p, LabelAttrs)].concat((p.labelAfter ? [p.children, LabelSpan(p)] : [LabelSpan(p), p.children])));
+        var label = react_1.createElement.apply(void 0, __spreadArrays(["label", omit(p, LabelAttrs)], (p.labelAfter ? [p.children, LabelSpan(p)] : [LabelSpan(p), p.children])));
         return p.p ? react_1.createElement("p", null, label) : label;
@@ -49,0 +56,0 @@ }

elements.min.js

@@ -1,1 +0,1 @@
-var __extends=this&&this.__extends||function(){var r=function(e,t){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};return function(e,t){function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}}();!function(e){if("object"==typeof module&&"object"==typeof module.exports){var t=e(require,exports);void 0!==t&&(module.exports=t)}else"function"==typeof define&&define.amd&&define(["require","exports","react","./hold"],e)}(function(e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var u=e("react");!function(e){for(var t in e)n.hasOwnProperty(t)||(n[t]=e[t])}(e("./hold"));u.createElement;function t(e){var t=u.createElement.apply(void 0,["label",x(e,l)].concat(e.labelAfter?[e.children,r(e)]:[r(e),e.children]));return e.p?u.createElement("p",null,t):t}function r(e){var t=!(e.labelStyle||e.labelClass||e.labelAfter);return u.createElement("span",{className:t?n.DefaultLabelSpan.class:e.labelClass,style:t?n.DefaultLabelSpan.style:e.labelStyle},e.label)}function a(e){return e.p&&void 0===e.label?u.createElement("p",null,e.children):t(e)}n.DefaultLabelSpan={class:"labelspan",style:void 0},n.Label=t,n.LabelSpan=r;var l=["label","labelStyle","labelClass","labelAfter","p"],o=l.concat("parse","stringify"),i=l.concat("is"),c=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.state={},e}return __extends(e,t),e.prototype.render=function(){var e,t,a=this,l=this.props,n=x(l,o);n.value=null!=this.state.tempText?this.state.tempText:(e=l.value.get,(t=l.stringify)?t(e):null!=e?e.toString():""),n.onBlur=function(e){a.setState({tempText:void 0})},n.onChange=function(e){var t=e.target.value;if(l.parse){a.setState({tempText:t});try{var n=l.parse(e.target.value,l.value.get)}catch(e){n=e}var r=e.target.setCustomValidity;n instanceof Error?r&&r.call(e.target,n.message):(l.value.set(n),r&&r.call(e.target,""))}else l.value.set(t)},n.onBlur=function(e){a.setState({tempText:void 0})};var r=this.chooseType(n);return f(l,u.createElement(r,n,l.children))},e}(u.Component);function s(e,t,n,r,a){var l=x(e,n);return t&&(l.type||(l.type=t)),_(l,a),f(e,u.createElement("input",l,e.children),r)}function f(e,t,n){return void 0!==e.label||e.p?u.createElement(a,{labelClass:e.labelClass,labelStyle:e.labelStyle,labelAfter:void 0!==e.labelAfter?e.labelAfter:n,label:e.label,p:e.p},t):t}var p=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return __extends(t,e),t.prototype.chooseType=function(e){return e.type||(e.type="text"),"input"},t}(c);n.TextBox=p;var v=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return __extends(t,e),t.prototype.chooseType=function(e){return"textarea"},t}(c);function y(e,t,n){if(e&&"-"==e[4]&&"-"==e[7]){var r=parseInt(e.slice(0,4)),a=parseInt(e.slice(5,7)),l=parseInt(e.slice(8,10));if(r==r||a==a||l==l){var u=n?new Date(n.valueOf()):new Date;return n||u.setUTCHours(12,0,0,0),u.setFullYear(r,a-1,l),u}}}function d(e){return("0"+e).slice(-2)}function h(e,t){if(e)return t?e.toISOString().substr(0,10):e.getFullYear()+"-"+d(e.getMonth()+1)+"-"+d(e.getDate())}function b(e,t){if(!e)return"";var n=t?[e.getUTCHours(),e.getUTCMinutes()]:[e.getHours(),e.getMinutes()],r=n[1];return e?d(n[0])+":"+d(r):""}function g(e,t,n){if(e&&":"===e[2]){var r=parseInt(e.slice(0,2)),a=parseInt(e.slice(3));if(0<=r&&r<24&&0<=a&&a<60){var l=t?new Date(t.valueOf()):new Date;return n?l.setUTCHours(r,a,0,0):l.setHours(r,a,0,0),l}}}function m(t){return s(t,"range",l,!1,{value:t.value.get,onChange:function(e){t.value.set(parseFloat(e.target.value))}})}function x(e,t){var n={};for(var r in e)0<=t.indexOf(r)||(n[r]=e[r]);return n}n.TextArea=v,n.DateBox=function(n){var e=x(n,["utc"]);return e.type||(e.type="date"),e.parse=function(e,t){return y(e,n.utc,t)},e.stringify=function(e){return h(e,n.utc)||""},u.createElement(p,e)},n.parseDate=y,n.dateToString=h,n.TimeBox=function(n){var e=x(n,["utc"]);return e.type||(e.type="time"),e.parse=function(e,t){return g(e,t||n.day,n.utc)},e.stringify=function(e){return b(e,n.utc)},u.createElement(p,e)},n.timeTo24hString=b,n.parse24hTime=g,n.CheckBox=function(t){return s(t,"checkbox",l,!0,{checked:t.value.get,onChange:function(e){t.value.set(e.target.checked)}})},n.Radio=function(t){return s(t,"radio",i,!0,{checked:void 0!==t.is?t.value.get==t.is:!!t.value.get,onChange:function(e){e.target.checked?t.value.set(void 0===t.is||t.is):void 0===t.is&&t.value.set(!1)}})},n.Button=function(e){var t=x(e,l);return f(e,u.createElement(e.type?"input":"button",t,e.children),!1)},n.FileButton=function(e){return s(e,"file",l,!1)},n.Range=function(e){return m(e)},n.Slider=m;var _=Object.assign||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}});
+var __extends=this&&this.__extends||function(){var r=function(e,t){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};return function(e,t){function n(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}}(),__spreadArrays=this&&this.__spreadArrays||function(){for(var e=0,t=0,n=arguments.length;t<n;t++)e+=arguments[t].length;var r=Array(e),a=0;for(t=0;t<n;t++)for(var l=arguments[t],o=0,u=l.length;o<u;o++,a++)r[a]=l[o];return r};!function(e){if("object"==typeof module&&"object"==typeof module.exports){var t=e(require,exports);void 0!==t&&(module.exports=t)}else"function"==typeof define&&define.amd&&define(["require","exports","react","./hold"],e)}(function(e,n){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=e("react");!function(e){for(var t in e)n.hasOwnProperty(t)||(n[t]=e[t])}(e("./hold"));o.createElement;function t(e){var t=o.createElement.apply(void 0,__spreadArrays(["label",_(e,l)],e.labelAfter?[e.children,r(e)]:[r(e),e.children]));return e.p?o.createElement("p",null,t):t}function r(e){var t=!(e.labelStyle||e.labelClass||e.labelAfter);return o.createElement("span",{className:t?n.DefaultLabelSpan.class:e.labelClass,style:t?n.DefaultLabelSpan.style:e.labelStyle},e.label)}function a(e){return e.p&&void 0===e.label?o.createElement("p",null,e.children):t(e)}n.DefaultLabelSpan={class:"labelspan",style:void 0},n.Label=t,n.LabelSpan=r;var l=["label","labelStyle","labelClass","labelAfter","p"],u=l.concat("parse","stringify"),i=l.concat("is"),s=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.state={},e}return __extends(e,t),e.prototype.render=function(){var e,t,a=this,l=this.props,n=_(l,u);n.value=null!=this.state.tempText?this.state.tempText:(e=l.value.get,(t=l.stringify)?t(e):null!=e?e.toString():""),n.onBlur=function(e){a.setState({tempText:void 0})},n.onChange=function(e){var t=e.target.value;if(l.parse){a.setState({tempText:t});try{var n=l.parse(e.target.value,l.value.get)}catch(e){n=e}var r=e.target.setCustomValidity;n instanceof Error?r&&r.call(e.target,n.message):(l.value.set(n),r&&r.call(e.target,""))}else l.value.set(t)},n.onBlur=function(e){a.setState({tempText:void 0})};var r=this.chooseType(n);return f(l,o.createElement(r,n,l.children))},e}(o.Component);function c(e,t,n,r,a){var l=_(e,n);return t&&(l.type||(l.type=t)),x(l,a),f(e,o.createElement("input",l,e.children),r)}function f(e,t,n){return void 0!==e.label||e.p?o.createElement(a,{labelClass:e.labelClass,labelStyle:e.labelStyle,labelAfter:void 0!==e.labelAfter?e.labelAfter:n,label:e.label,p:e.p},t):t}var p=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return __extends(t,e),t.prototype.chooseType=function(e){return e.type||(e.type="text"),"input"},t}(s);n.TextBox=p;var v=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return __extends(t,e),t.prototype.chooseType=function(e){return"textarea"},t}(s);function y(e,t,n){if(e&&"-"==e[4]&&"-"==e[7]){var r=parseInt(e.slice(0,4)),a=parseInt(e.slice(5,7)),l=parseInt(e.slice(8,10));if(r==r||a==a||l==l){var o=n?new Date(n.valueOf()):new Date;return n||o.setUTCHours(12,0,0,0),o.setFullYear(r,a-1,l),o}}}function d(e){return("0"+e).slice(-2)}function h(e,t){if(e)return t?e.toISOString().substr(0,10):e.getFullYear()+"-"+d(e.getMonth()+1)+"-"+d(e.getDate())}function g(e,t){if(!e)return"";var n=t?[e.getUTCHours(),e.getUTCMinutes()]:[e.getHours(),e.getMinutes()],r=n[1];return e?d(n[0])+":"+d(r):""}function b(e,t,n){if(e&&":"===e[2]){var r=parseInt(e.slice(0,2)),a=parseInt(e.slice(3));if(0<=r&&r<24&&0<=a&&a<60){var l=t?new Date(t.valueOf()):new Date;return n?l.setUTCHours(r,a,0,0):l.setHours(r,a,0,0),l}}}function m(t){return c(t,"range",l,!1,{value:t.value.get,onChange:function(e){t.value.set(parseFloat(e.target.value))}})}function _(e,t){var n={};for(var r in e)0<=t.indexOf(r)||(n[r]=e[r]);return n}n.TextArea=v,n.DateBox=function(n){var e=_(n,["utc"]);return e.type||(e.type="date"),e.parse=function(e,t){return y(e,n.utc,t)},e.stringify=function(e){return h(e,n.utc)||""},o.createElement(p,e)},n.parseDate=y,n.dateToString=h,n.TimeBox=function(n){var e=_(n,["utc"]);return e.type||(e.type="time"),e.parse=function(e,t){return b(e,t||n.day,n.utc)},e.stringify=function(e){return g(e,n.utc)},o.createElement(p,e)},n.timeTo24hString=g,n.parse24hTime=b,n.CheckBox=function(t){return c(t,"checkbox",l,!0,{checked:t.value.get,onChange:function(e){t.value.set(e.target.checked)}})},n.Radio=function(t){return c(t,"radio",i,!0,{checked:void 0!==t.is?t.value.get==t.is:!!t.value.get,onChange:function(e){e.target.checked?t.value.set(void 0===t.is||t.is):void 0===t.is&&t.value.set(!1)}})},n.Button=function(e){var t=_(e,l);return f(e,o.createElement(e.type?"input":"button",t,e.children),!1)},n.FileButton=function(e){return c(e,"file",l,!1)},n.Range=function(e){return m(e)},n.Slider=m;var x=Object.assign||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e}});

hold.d.ts

@@ -12,2 +12,13 @@ /** A wrapper around a value. */
 };
+/** A wrapper around a value, implementing Holder<T> and providing change notification. */
+export declare class ValueHolder<T> implements Holder<T> {
+    value: T;
+    onChanging?: ((newValue: T, holder: Holder<T>) => T | undefined) | undefined;
+    /** Initializes the ValueHolder. The onChanging handler is called before the change is
+     *  actually made. It can return `undefined` to allow the proposed value to be stored,
+     *  or it can return something else to cause that to be stored. */
+    constructor(value: T, onChanging?: ((newValue: T, holder: Holder<T>) => T | undefined) | undefined);
+    get get(): T;
+    set(newValue: T): void;
+}
 /** A helper function that bundles a getter and setter into a Holder object.
@@ -28,10 +39,20 @@ *  For example, `hold(model, "foo").get` returns the value of `model.foo`,
  *  @param attr  The name of a property of `model` that you want to bind.
- *  @param onChange A function that will be called later, when the return
+ *  @param onChanging A function that will be called later, when the return
  *         value's `val` property is changed. The first argument is the
  *         value of `attr` (usually a string), and the second argument is
- *         the value assigned to the Holder's val. `onChange` can return
- *         `true` to cause the default change behavior, i.e.
- *         `model[attr] = newValue`.
+ *         the value assigned to the Holder's val. `onChanging` can change
+ *         the value to be assigned by returning the desired value, or it
+ *         can return `undefined` to cause default change behavior, which
+ *         is `model[attr] = newValue`.
  */
-export declare function hold<T, Attr extends keyof T>(model: T, attr: Attr, onChange: ((attr: Attr, newValue: T[Attr]) => void | boolean) | undefined): Holder<T[Attr]>;
+export declare function hold<T, Attr extends keyof T>(model: T, attr: Attr, onChanging: ((attr: Attr, newValue: T[Attr], holder: Holder<T[Attr]>) => T[Attr] | void) | undefined): Holder<T[Attr]>;
+/** A reference to a property of an object (see hold(), which returns this type). */
+export declare class PropHolder<T, Attr extends keyof T> implements Holder<T[Attr]> {
+    model: T;
+    attr: Attr;
+    onChanging?: ((attr: Attr, newValue: T[Attr], holder: Holder<T[Attr]>) => void | T[Attr]) | undefined;
+    constructor(model: T, attr: Attr, onChanging?: ((attr: Attr, newValue: T[Attr], holder: Holder<T[Attr]>) => void | T[Attr]) | undefined);
+    get get(): T[Attr];
+    set(newValue: any): void;
+}
 /**
@@ -60,3 +81,3 @@ * A helper function for using `hold()` a component's state in React.
  *  object with a Holder wrapping each property of the object. */
-export declare function holdProps<T, Props extends keyof T>(model: T, propNames: Props[], onChange: ((attr: Props, newValue: T[Props]) => void | boolean) | undefined): {
+export declare function holdProps<T, Props extends keyof T>(model: T, propNames: Props[], onChange?: ((attr: Props, newValue: T[Props], holder: Holder<T[Props]>) => T[Props] | void)): {
     [P in Props]-?: Holder<T[P]>;
@@ -66,2 +87,2 @@ };
  *  enumerable property of the original object. */
-export declare function holdAllProps<T>(model: T, onChange: (<A extends keyof T>(attr: A, newValue: T[A]) => void | boolean) | undefined): Holders<T>;
+export declare function holdAllProps<T extends {}>(model: T, onChange?: (<A extends keyof T>(attr: A, newValue: T[A], holder: Holder<T[A]>) => T[A] | void)): Holders<T>;

hold.js

@@ -12,2 +12,31 @@ (function (factory) {
     Object.defineProperty(exports, "__esModule", { value: true });
+    /** A wrapper around a value, implementing Holder<T> and providing change notification. */
+    var ValueHolder = /** @class */ (function () {
+        /** Initializes the ValueHolder. The onChanging handler is called before the change is
+         *  actually made. It can return `undefined` to allow the proposed value to be stored,
+         *  or it can return something else to cause that to be stored. */
+        function ValueHolder(value, onChanging) {
+            this.value = value;
+            this.onChanging = onChanging;
+        }
+        Object.defineProperty(ValueHolder.prototype, "get", {
+            get: function () {
+                return this.value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        ValueHolder.prototype.set = function (newValue) {
+            if (this.onChanging) {
+                var result = this.onChanging(newValue, this);
+                if (result !== undefined) {
+                    this.value = result;
+                    return;
+                }
+            }
+            this.value = newValue;
+        };
+        return ValueHolder;
+    }());
+    exports.ValueHolder = ValueHolder;
     /** A helper function that bundles a getter and setter into a Holder object.
@@ -28,32 +57,42 @@ *  For example, `hold(model, "foo").get` returns the value of `model.foo`,
      *  @param attr  The name of a property of `model` that you want to bind.
-     *  @param onChange A function that will be called later, when the return
+     *  @param onChanging A function that will be called later, when the return
      *         value's `val` property is changed. The first argument is the
      *         value of `attr` (usually a string), and the second argument is
-     *         the value assigned to the Holder's val. `onChange` can return
-     *         `true` to cause the default change behavior, i.e.
-     *         `model[attr] = newValue`.
+     *         the value assigned to the Holder's val. `onChanging` can change
+     *         the value to be assigned by returning the desired value, or it
+     *         can return `undefined` to cause default change behavior, which
+     *         is `model[attr] = newValue`.
      */
-    function hold(model, attr, onChange) {
-        var Hold = /** @class */ (function () {
-            function Hold(model, attr, onChange) {
-                this.model = model;
-                this.attr = attr;
-                this.onChange = onChange;
-            }
-            Object.defineProperty(Hold.prototype, "get", {
-                get: function () {
-                    return this.model[this.attr];
-                },
-                enumerable: true,
-                configurable: true
-            });
-            Hold.prototype.set = function (newValue) {
-                if (!this.onChange || this.onChange(this.attr, newValue))
-                    this.model[this.attr] = newValue;
-            };
-            return Hold;
-        }());
-        return new Hold(model, attr, onChange);
+    function hold(model, attr, onChanging) {
+        return new PropHolder(model, attr, onChanging);
     }
     exports.hold = hold;
+    /** A reference to a property of an object (see hold(), which returns this type). */
+    var PropHolder = /** @class */ (function () {
+        function PropHolder(model, attr, onChanging) {
+            this.model = model;
+            this.attr = attr;
+            this.onChanging = onChanging;
+        }
+        Object.defineProperty(PropHolder.prototype, "get", {
+            get: function () {
+                return this.model[this.attr];
+            },
+            enumerable: true,
+            configurable: true
+        });
+        PropHolder.prototype.set = function (newValue) {
+            if (this.onChanging) {
+                var result = this.onChanging(this.attr, newValue, this);
+                if (result !== undefined) {
+                    if (this.model[this.attr] !== result)
+                        this.model[this.attr] = result;
+                    return;
+                }
+            }
+            this.model[this.attr] = newValue;
+        };
+        return PropHolder;
+    }());
+    exports.PropHolder = PropHolder;
     /**
@@ -80,3 +119,2 @@ * A helper function for using `hold()` a component's state in React.
                 var _a;
-                console.log("component.setState for " + a);
                 component.setState((_a = {}, _a[a] = newValue, _a));
@@ -83,0 +121,0 @@ });

hold.min.js

@@ -1,1 +0,1 @@
-!function(t){if("object"==typeof module&&"object"==typeof module.exports){var e=t(require,exports);void 0!==e&&(module.exports=e)}else"function"==typeof define&&define.amd&&define(["require","exports"],t)}(function(t,e){"use strict";function r(t,e,n){return new(function(){function t(t,e,n){this.model=t,this.attr=e,this.onChange=n}return Object.defineProperty(t.prototype,"get",{get:function(){return this.model[this.attr]},enumerable:!0,configurable:!0}),t.prototype.set=function(t){this.onChange&&!this.onChange(this.attr,t)||(this.model[this.attr]=t)},t}())(t,e,n)}function n(n,t,o){return t.reduce(function(t,e){return t[e]=r(n,e,o),t},{})}Object.defineProperty(e,"__esModule",{value:!0}),e.hold=r,e.holdState=function(o){return function(t){return r(o.state,t,function(t,e){var n;console.log("component.setState for "+t),o.setState(((n={})[t]=e,n))})}},e.holdProps=n,e.holdAllProps=function(t,e){return n(t,Object.keys(t),e)}});
+!function(t){if("object"==typeof module&&"object"==typeof module.exports){var e=t(require,exports);void 0!==e&&(module.exports=e)}else"function"==typeof define&&define.amd&&define(["require","exports"],t)}(function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=function(){function t(t,e){this.value=t,this.onChanging=e}return Object.defineProperty(t.prototype,"get",{get:function(){return this.value},enumerable:!0,configurable:!0}),t.prototype.set=function(t){if(this.onChanging){var e=this.onChanging(t,this);if(void 0!==e)return void(this.value=e)}this.value=t},t}();function i(t,e,n){return new o(t,e,n)}e.ValueHolder=n,e.hold=i;var o=function(){function t(t,e,n){this.model=t,this.attr=e,this.onChanging=n}return Object.defineProperty(t.prototype,"get",{get:function(){return this.model[this.attr]},enumerable:!0,configurable:!0}),t.prototype.set=function(t){if(this.onChanging){var e=this.onChanging(this.attr,t,this);if(void 0!==e)return void(this.model[this.attr]!==e&&(this.model[this.attr]=e))}this.model[this.attr]=t},t}();function r(n,t,o){return t.reduce(function(t,e){return t[e]=i(n,e,o),t},{})}e.PropHolder=o,e.holdState=function(o){return function(t){return i(o.state,t,function(t,e){var n;o.setState(((n={})[t]=e,n))})}},e.holdProps=r,e.holdAllProps=function(t,e){return r(t,Object.keys(t),e)}});

package.json

 {
   "name": "holders",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "A tiny library to help you construct React user interfaces quickly & easily",
@@ -8,5 +8,11 @@ "main": "elements",
   "files": [
-    "hold.js", "hold.min.js", "hold.d.ts",
-    "elements.js", "elements.min.js", "elements.d.ts",
-    "readme.md", "demo.html", "demo.tsx"
+    "hold.js",
+    "hold.min.js",
+    "hold.d.ts",
+    "elements.js",
+    "elements.min.js",
+    "elements.d.ts",
+    "readme.md",
+    "demo.html",
+    "demo.tsx"
   ],
@@ -40,4 +46,5 @@ "scripts": {
     "@types/react": "^16.4.11",
+    "react": "^16.4.2",
     "react-dom": "^16.4.2",
-    "typescript": "^3.0.1",
+    "typescript": "^3.7.5",
     "uglify-js": "^3.4.7"
@@ -44,0 +51,0 @@ },

readme.md

@@ -34,2 +34,3 @@ Holders
 - Includes d.ts files (written in TypeScript)
+- Elements are expected to be compatible with Preact as well as React
 
@@ -36,0 +37,0 @@ To Learn More

New alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

60881

increased by8.52%

Lines of code

1012

increased by7.89%

Number of lines in readme file

39

increased by2.63%

Worsened metrics

Dev dependency count

5

increased by25%

Number of medium maintenance alerts

1

increased byInfinity%

No dependency changes