staballoy - npm Package Compare versions

Comparing version 1.0.4 to 1.1.0

package.json

 {
   "name": "staballoy",
   "description": "Reactive Library for binding data to UI elements in Titanium Alloy",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "main": "staballoy.js",
@@ -6,0 +6,0 @@ "keywords": ["titanium","reactive","titanium-module"],

README.md

@@ -10,3 +10,3 @@ # Staballoy
 
-| :warning:  Breaking changes :warning:  |
+| :warning:  Breaking changes |
 |------------------------|
@@ -74,5 +74,5 @@ | Version 1.0.0 introduced massive breaking changes as opposed to any 0.x version. Staballoy also no longer overrides the `Alloy.createController` method and therefore is completely compatible with any other framework. |
 
-Once this is set, dive into your `tss` and add subscriptions, using a path to the property you want to set it to, and the property you want to update. 
+Once this is set, dive into your `tss` and add subscriptions, using a path to the property you want to set it to, and the property you want to update. There are 2 methods of subscribing, simple or with a transform method.
 
-### Example 1
+### Simple Subscribe
 You want to set the color and text property of a `<Label>` based on a user profile:
@@ -100,4 +100,44 @@
 
-This will automatically change the color and text of the Label, on the fly.
+This will automatically change the color and text of the Label, on the fly, and anything you set is stored so you only need to do this once.
 
+### Subscribing with dataTransform
+If you want to tranform the data prior to setting it, you can add the transform method to the subscription. We're taking the example above and altering it to support transformation.
+
+First, in tss set transform to true this way:
+```js
+"#myLabel": {
+    staballoy: {
+        text: {
+            value: "user.name",
+            transform: true
+        },
+        color: "user.favoriteColor"
+    }
+}
+```
+
+This will disable staballoy to automatically set the text value for you, but it will still automatically set the color. Instead it will trigger the tranform event on the UI element. So, time to subscribe to the UI element.
+
+```xml
+<Label id="myLabel" module="staballoy" onTransform="handleLabelTransform" />
+```
+
+And then in the controller you need to create your transform handler:
+
+```js
+function handleLabelTransform(e) {
+    e.source[e.key] = e.value;
+}
+```
+
+As you can see, the event contains the source, the key of what needs changing, and the value. In our situation the source is the `<Label>`, the key is `text` and the value is `John Doe`. But now you can do anything you want with the value you wish, just don't forget to apply the property to the UI element as Staballoy **won't do this automatically** anymore.
+
+For example you now could do this:
+
+```js
+function handleLabelTransform(e) {
+    e.source[e.key] = `Your name is: + ${e.value}`
+}
+```
+
 ## Debug
@@ -115,5 +155,6 @@ Want to get more logging? Enable debug mode! Add this line to `alloy.js` and you should be good
 
-Want to support my work? Send a donation my way via the Ko-Fi button on [TiSlack.org](http://tislack.org). Any support is appreciated.
+Want to support my work? Send a donation my way via the Ko-Fi button on [TiSlack.org](https://tislack.org). Any support is appreciated.
 
 ## Changelog
+- **1.1.0** - (20210205) Added ability to add a dataTransform to subscription
 - **1.0.4** - (20210128) Fixed property search when property value was falsy
@@ -120,0 +161,0 @@ - **1.0.1** - (20210127) Added garbage-collection and debug mode

staballoy.js

 /**
  * Staballoy is created by Rene Pot (2021)
- * Version 1.0.4 -- 2021-01-28
+ * Version 1.1.0 -- 2021-02-05
  * The latest version can be found at Github: https://github.com/topener/staballoy
@@ -28,4 +28,4 @@ * Or npmjs: https://www.npmjs.com/package/staballoy
     let sub = {UI: UI, subscription: args.staballoy};
+    subscriptions[UI.staballoyGuid] = sub;
     parseSubscriptions(UI);
-    subscriptions[UI.staballoyGuid] = sub;
     return UI;
@@ -35,3 +35,2 @@ }
 function PLHandler(e) {
-    // sanity check
     if (!e.source.hasOwnProperty('staballoyGuid')) return false;
@@ -42,2 +41,8 @@ let parentWindow = findParentWindow(e.source);
         subscriptions[e.source.staballoyGuid].UI.removeEventListener('postlayout', PLHandler);
+        if (subscriptions[e.source.staballoyGuid].pendingEvents) {
+            subscriptions[e.source.staballoyGuid].pendingEvents.forEach((event) => {
+                event.source.fireEvent('transform', event);
+            });
+            delete subscriptions[e.source.staballoyGuid].pendingEvents;
+        }
     }
@@ -79,4 +84,27 @@ }
     Object.keys(UI.staballoy).forEach((key) => {
-        let res = find(data, UI.staballoy[key]);
+        let res;
+
+        if (typeof UI.staballoy[key] === 'string')
+            res = find(data, UI.staballoy[key]);
+        if (typeof UI.staballoy[key] === 'object')
+            res = find(data, UI.staballoy[key].value);
+
         if (res !== undefined) {
+            if (typeof UI.staballoy[key] === 'object' && UI.staballoy[key].transform) {
+                let timeout = 0;
+                if (!subscriptions[UI.staballoyGuid].hasOwnProperty('parentWindow')) {
+
+                    if (!subscriptions[UI.staballoyGuid].hasOwnProperty('pendingEvents')) {
+                        subscriptions[UI.staballoyGuid].pendingEvents = [];
+                    }
+
+                    return subscriptions[UI.staballoyGuid].pendingEvents.push({
+                        key: key,
+                        value: res,
+                        source: UI
+                    })
+                }
+
+                return UI.fireEvent('transform', {value: res, source: UI, key: key});
+            }
             if (key.indexOf('set') === 0) {
@@ -83,0 +111,0 @@ UI[key](res);

No alert changes

Improved metrics

Total package byte prevSize

14841

increased by23.25%

Lines of code

157

increased by17.16%

Number of lines in readme file

167

increased by32.54%

No dependency changes