pickle-ts - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

dist/app.d.ts

@@ -10,11 +10,27 @@ import { TimeTravel } from './timeTravel';
     private isVdomRendered;
+    /** Manages serialization of root component to local storage */
     storage: Storage;
+    /** Manages time travel - type is 'any' because component snapshots are converted to plain json objects */
     time: TimeTravel<any>;
+    /** internal use only - update tally to avoid unnecessary refereshes for nested updates */
     activeUpdates: number;
+    /**
+     * The entry point for a pickle app
+     * @param rootComponentConstructor The parameterless constructor of the root component
+     * @param containerId The element id to render the view, and local storage name
+     */
     constructor(rootComponentConstructor: new () => Component, containerId: string);
+    /** Root component of updates, view and serialization */
     readonly rootComponent: Component;
     private setRootComponent(rootComponent, deserialize?, doSave?, doTimeSnapshot?);
+    /** Whether snapshots occur by default after each update  */
     timeTravelOn: boolean;
+    /**
+     * Serialize the root component to local storage and/or time travel history
+     * @param doSave true = force save, false = do not save, undefined = use value of App.storage.autosave
+     * @param doTimeSnapshot true = force snapshot,false = do not snapshot, undefined = use value of App.timeTravelOn
+     */
     snapshot(doSave?: boolean, doTimeSnapshot?: boolean): void;
+    /** internal use only */
     refresh(deserialize?: boolean): void;
 }

dist/app.js

@@ -8,2 +8,7 @@ "use strict";
 var App = /** @class */ (function () {
+    /**
+     * The entry point for a pickle app
+     * @param rootComponentConstructor The parameterless constructor of the root component
+     * @param containerId The element id to render the view, and local storage name
+     */
     function App(rootComponentConstructor, containerId) {
@@ -14,2 +19,3 @@ var _this = this;
         this.isVdomRendered = false;
+        /** internal use only - update tally to avoid unnecessary refereshes for nested updates */
         this.activeUpdates = 0;
@@ -26,2 +32,3 @@ this.rootElement = document.getElementById(containerId);
     Object.defineProperty(App.prototype, "rootComponent", {
+        /** Root component of updates, view and serialization */
         get: function () {
@@ -40,2 +47,3 @@ return this._rootComponent;
     Object.defineProperty(App.prototype, "timeTravelOn", {
+        /** Whether snapshots occur by default after each update  */
         get: function () {
@@ -52,2 +60,7 @@ return this._timeTravelOn;
     });
+    /**
+     * Serialize the root component to local storage and/or time travel history
+     * @param doSave true = force save, false = do not save, undefined = use value of App.storage.autosave
+     * @param doTimeSnapshot true = force snapshot,false = do not snapshot, undefined = use value of App.timeTravelOn
+     */
     App.prototype.snapshot = function (doSave, doTimeSnapshot) {
@@ -64,2 +77,3 @@ var _this = this;
     };
+    /** internal use only */
     App.prototype.refresh = function (deserialize) {
@@ -66,0 +80,0 @@ var _this = this;

dist/component.d.ts

@@ -5,17 +5,35 @@ import { App } from './app';
 export declare abstract class Component {
+    /** The app associated with the component; undefined if not yet attached - use judiciously - main purpose is internal use by update method */
     app?: App;
+    /** The parent component; undefined if the root component - use judiciously - main purpose is internal use by update method */
     parent?: Component;
     private refreshQueue;
+    /** Called after construction, with a flag indicating if deserialization occured */
+    attached(deserialized: boolean): void;
+    /** Override to return a virtual DOM element that visually represents the component's state */
     view(): VElement;
+    /**
+     * Override to capture an update before it occurs, returning `false` to cancel the update
+     * @param payload Contains data associated with update - the update method will set the source property to 'this'
+     */
     beforeUpdate(payload: any): boolean;
+    /** Override to listen to an update after its occured
+     * @param payload Contains data associated with update - the update method will set the source property to 'this'
+     */
     updated(payload: any): void;
+    /** Call with action that updates the component's state, with optional payload obect */
     update(updater: () => void, payload?: any): void;
-    attached(deserialized: boolean): void;
+    /** A convenient shortcut to update a component property; wraps property change in update */
+    updateProperty(payload: KeyValue): void;
     root(): Component;
+    /** Returns the branch, inclusively from this component to the root component */
     branch(): Component[];
-    updateProperty(payload: KeyValue): void;
+    /** Returns the properties that are components, flattening out array properties of components */
     children(): Component[];
+    /** internal use only */
     attach(app: App, parent?: Component, deserialize?: boolean): void;
+    /** internal use only */
     runRefreshes(): void;
+    /** Call to run an action after the view is rendered. Think of it like setTimeout but executed at exactly at the right time in the update cycle. */
     onRefreshed(action: () => void): void;
 }

dist/component.js

@@ -20,7 +20,18 @@ "use strict";
     }
+    /** Called after construction, with a flag indicating if deserialization occured */
+    Component.prototype.attached = function (deserialized) { };
+    /** Override to return a virtual DOM element that visually represents the component's state */
     Component.prototype.view = function () {
         return html_1.div(this.constructor.name);
     };
+    /**
+     * Override to capture an update before it occurs, returning `false` to cancel the update
+     * @param payload Contains data associated with update - the update method will set the source property to 'this'
+     */
     Component.prototype.beforeUpdate = function (payload) { return true; };
+    /** Override to listen to an update after its occured
+     * @param payload Contains data associated with update - the update method will set the source property to 'this'
+     */
     Component.prototype.updated = function (payload) { };
+    /** Call with action that updates the component's state, with optional payload obect */
     Component.prototype.update = function (updater, payload) {
@@ -52,6 +63,14 @@ if (payload === void 0) { payload = {}; }
     };
-    Component.prototype.attached = function (deserialized) { };
+    /** A convenient shortcut to update a component property; wraps property change in update */
+    Component.prototype.updateProperty = function (payload) {
+        var _this = this;
+        return this.update(function () {
+            return _this[payload.key] = util_1.parseTyped(payload.value, _this[payload.key]);
+        }, payload);
+    };
+    /* Returns the root component by recursively walking through each parent */
     Component.prototype.root = function () {
         return !this.parent ? this : this.parent.root();
     };
+    /** Returns the branch, inclusively from this component to the root component */
     Component.prototype.branch = function () {
@@ -66,8 +85,3 @@ var branch = [];
     };
-    Component.prototype.updateProperty = function (payload) {
-        var _this = this;
-        return this.update(function () {
-            return _this[payload.key] = util_1.parseTyped(payload.value, _this[payload.key]);
-        }, payload);
-    };
+    /** Returns the properties that are components, flattening out array properties of components */
     Component.prototype.children = function () {
@@ -89,2 +103,3 @@ var children = [];
     };
+    /** internal use only */
     Component.prototype.attach = function (app, parent, deserialize) {
@@ -102,2 +117,3 @@ if (deserialize === void 0) { deserialize = false; }
     };
+    /** internal use only */
     Component.prototype.runRefreshes = function () {
@@ -111,2 +127,3 @@ for (var _i = 0, _a = this.children(); _i < _a.length; _i++) {
     };
+    /** Call to run an action after the view is rendered. Think of it like setTimeout but executed at exactly at the right time in the update cycle. */
     Component.prototype.onRefreshed = function (action) {
@@ -117,3 +134,5 @@ this.refreshQueue.push(action);
         class_transformer_1.Exclude(),
-        __metadata("design:type", app_1.App)
+        __metadata("design:type", app_1.App
+        /** The parent component; undefined if the root component - use judiciously - main purpose is internal use by update method */
+        )
     ], Component.prototype, "app", void 0);
@@ -120,0 +139,0 @@ __decorate([

dist/dom.js

@@ -181,3 +181,3 @@ "use strict";
 // pickle mod
-function removeElement(parent, element, velement) {
+function removeNode(parent, element, vnode) {
     return __awaiter(this, void 0, void 0, function () {
@@ -187,5 +187,6 @@ return __generator(this, function (_a) {
                 case 0:
+                    if (!isVElement(vnode)) return [3 /*break*/, 3];
                     element["removing"] = true;
-                    if (!velement.attributes.onBeforeRemove) return [3 /*break*/, 2];
-                    return [4 /*yield*/, velement.attributes.onBeforeRemove(element)];
+                    if (!vnode.attributes.onBeforeRemove) return [3 /*break*/, 2];
+                    return [4 /*yield*/, vnode.attributes.onBeforeRemove(element)];
                 case 1:
@@ -195,3 +196,5 @@ _a.sent();
                 case 2:
-                    removeChildren(element, velement);
+                    removeChildren(element, vnode);
+                    _a.label = 3;
+                case 3:
                     parent.removeChild(element);
@@ -219,3 +222,3 @@ return [2 /*return*/];
             if (oldVNode != null) {
-                removeElement(parent, node, oldVNode); // pickle mod
+                removeNode(parent, node, oldVNode); // pickle mod
             }
@@ -278,3 +281,3 @@ }
             if (getKey(oldChildren[i]) == null) {
-                removeElement(node, oldElements[i], oldChildren[i]);
+                removeNode(node, oldElements[i], oldChildren[i]);
             }
@@ -285,3 +288,3 @@ i++;
             if (!newKeyed[j]) {
-                removeElement(node, oldKeyed[j][0], oldKeyed[j][1]);
+                removeNode(node, oldKeyed[j][0], oldKeyed[j][1]);
             }
@@ -288,0 +291,0 @@ }

dist/index.d.ts

@@ -7,3 +7,3 @@ export { Component } from './component';
 export { literal, KeyValue, isNullOrEmpty, key, Let } from './util';
-export { selector, commandButton, commandLink, inputer, labeledInput, slider, radioGroup } from './widgets';
+export { selector, commandButton, commandLink, inputText, labeledInput, slider, radioGroup } from './widgets';
 export { h, HValue, HAttributes, HProps, a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, img, input, ins, kbd, label, legend, li, main, map, mark, menu, menuitem, meter, nav, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, rtc, ruby, s, samp, section, select, small, source, span, strong, sub, summary, sup, svg, table, tbody, td, textarea, tfoot, th, thead, time, tr, track, u, ul, video, vvar, wbr } from './html';

dist/index.js

@@ -24,3 +24,3 @@ "use strict";
 exports.commandLink = widgets_1.commandLink;
-exports.inputer = widgets_1.inputer;
+exports.inputText = widgets_1.inputText;
 exports.labeledInput = widgets_1.labeledInput;
@@ -27,0 +27,0 @@ exports.slider = widgets_1.slider;

dist/widgets.d.ts

 import { VElement } from './dom';
+import { HValue } from './html';
 import { KeyValue, PropertyName } from './util';
-export declare function commandButton(click: () => void, ...values: any[]): VElement;
-export declare function commandLink(click: () => void, ...values: any[]): VElement;
-export declare function inputer(propertyAccess: () => any, inputAction: (propertyChange: KeyValue) => any, ...values: any[]): VElement;
+export declare function commandButton(click: () => void, ...values: HValue[]): VElement;
+export declare function commandLink(click: () => void, ...values: HValue[]): VElement;
+export declare function inputText(propertyAccess: () => any, inputAction: (propertyChange: KeyValue) => any, ...values: HValue[]): VElement;
 export declare function handlePropertyChange(propertyAccess: () => any, action: (propertyChange: KeyValue) => void): (e: Event) => void;
-export declare function slider(propertyAccess: () => any, min: number, max: number, step: number, slideAction: (propertyChange: KeyValue) => any, ...values: any[]): VElement;
-export declare function selector(labelNode: string | VElement, propertyAccess: () => any, options: string[][] | undefined, hasEmpty: boolean | undefined, selectAction: (propertyChange: KeyValue) => any, ...values: any[]): VElement;
+export declare function slider(propertyAccess: () => any, min: number, max: number, step: number, slideAction: (propertyChange: KeyValue) => any, ...values: HValue[]): VElement;
+export declare function selector(labelNode: string | VElement, propertyAccess: () => any, options: string[][] | undefined, hasEmpty: boolean | undefined, selectAction: (propertyChange: KeyValue) => any, ...values: HValue[]): VElement;
 export declare function labeledInput(inputId: PropertyName, labelNode: any, inputNode: VElement): VElement;
-export declare function radioGroup(propertyAccess: () => any, options: string[][] | undefined, checkedAction: (propertyChange: KeyValue) => any): VElement;
+export declare function radioGroup(propertyAccess: () => any, options: string[][] | undefined, checkedAction: (propertyChange: KeyValue) => any): VElement[];

dist/widgets.js

@@ -26,3 +26,3 @@ "use strict";
 exports.commandLink = commandLink;
-function inputer(propertyAccess, inputAction) {
+function inputText(propertyAccess, inputAction) {
     var values = [];
@@ -40,3 +40,3 @@ for (var _i = 2; _i < arguments.length; _i++) {
 }
-exports.inputer = inputer;
+exports.inputText = inputText;
 function handlePropertyChange(propertyAccess, action) {
@@ -95,3 +95,3 @@ return function (e) { return action({
     if (options === void 0) { options = []; }
-    return html_1.div(options.map(function (pair) {
+    return options.map(function (pair) {
         return html_1.label(html_1.input({
@@ -107,4 +107,4 @@ value: pair[0],
         }), pair[1], html_1.br());
-    }));
+    });
 }
 exports.radioGroup = radioGroup;

package.json

 {
   "name": "pickle-ts",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "author": "pickle",
@@ -5,0 +5,0 @@ "license": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

81222

increased by6.41%

Lines of code

2199

increased by3.34%

No dependency changes