@smartface/contx - npm Package Compare versions

Comparing version 1.0.0-rc.8 to 1.0.0-rc.9

lib/core/Actor.js

 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["module", "exports"], factory);
+    define(['module', 'exports'], factory);
   } else if (typeof exports !== "undefined") {
@@ -14,3 +14,3 @@ factory(module, exports);
 })(this, function (module, exports) {
-  "use strict";
+  'use strict';
 
@@ -50,9 +50,11 @@ Object.defineProperty(exports, "__esModule", {
     this.onError = function (err) {
-      if (_this._actorInternal_.component.onError) _this._actorInternal_.component.onError(err);
-      // else
-      //   console.log(err.message);
+      if (_this._actorInternal_.component.onError) return _this._actorInternal_.component.onError(err);
+      return false;
     };
 
-    this.onContextInit = function (dispatcher) {
-      // console.log("dispatcher : "+this.name+" : "+this._actorInternal_.component.setContextDispatcher+": "+dispatcher);
+    this.didComponentLeave = function () {
+      typeof _this._actorInternal_.component.didComponentLeave === 'function' && _this._actorInternal_.component.didComponentLeave();
+    };
+
+    this.didComponentEnter = function (dispatcher) {
       _this._dispatcher = dispatcher;
@@ -73,3 +75,3 @@ _this._actorInternal_.component.setContextDispatcher ? _this._actorInternal_.component.setContextDispatcher(function (action) {
   exports.default = Actor;
-  module.exports = exports["default"];
+  module.exports = exports['default'];
 });

lib/core/Context.js

@@ -53,4 +53,2 @@ (function (global, factory) {
         this.setActors = function (actors) {
-          // const oldActors = this.actors;
-          // this.actors = [];
           Object.keys(actors).forEach(function (name) {
@@ -85,2 +83,6 @@ // if(oldActors.collection[name]){
 
+        this.find = function (name, notValue) {
+          return _this.actors.collection[name] || notValue;
+        };
+
         this.addTree = function (tree) {
@@ -100,3 +102,3 @@ Object.keys(tree).forEach(function (name) {
           actor.hook = hookMaybe;
-          actor.onContextInit(function (action, target) {
+          actor.didComponentEnter(function (action, target) {
             return _this.dispatch(action, target);
@@ -110,3 +112,4 @@ });
               var actor = _this.actors.collection[nm];
-              actor && actor.dispose && actor.dispose();
+              actor.didComponentLeave();
+              actor.dispose();
               delete _this.actors.collection[nm];
@@ -127,2 +130,3 @@ }
             _this.actors.$$map = Object.keys(_this.actors.collection);
+            actor.didComponentLeave();
             actor.dispose();
@@ -129,0 +133,0 @@ }

lib/core/util/raiseErrorMaybe.js

@@ -21,5 +21,3 @@ (function (global, factory) {
   function raiseErrorMaybe(e, fn) {
-    if (fn) {
-      fn(e);
-    } else {
+    if (fn && fn(e) === false || !fn) {
       throw e;
@@ -26,0 +24,0 @@ }

lib/smartface/action/addChild.js

@@ -26,3 +26,4 @@ (function (global, factory) {
      * @param {string} classnames - Component classnames
-     * @param {Object} initialProps - Initial properties of the specified component
+     * @param {Object} userProps - Initial properties of the specified component
+     * 
      * @returns {Object}
@@ -32,3 +33,3 @@ */
         var classNames = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "";
-        var initialProps = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+        var userStyle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
 
@@ -40,3 +41,3 @@ return {
             classNames: classNames,
-            initialProps: initialProps
+            userStyle: userStyle
         };
@@ -43,0 +44,0 @@ };

lib/smartface/fromSFComponent.js

@@ -64,6 +64,6 @@ (function (global, factory) {
     var classNames = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : "";
-    var props = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+    var userProps = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : null;
 
     superAddChild(child);
-    name && this.dispatch((0, _addChild2.default)(name, child, classNames, props));
+    name && this.dispatch((0, _addChild2.default)(name, child, classNames, userProps));
   }
@@ -113,3 +113,3 @@
    * @param {?function} hookList - callback function to capture context's hooks
-   * @param {?Object} acc [={}] - Accumulator
+   * @param {?Object} acc [={}] - Initial Accumulator value
    * 
@@ -137,2 +137,3 @@ * @return {function} - context helper
           createOriginals(component.layout);
+
           Object.defineProperty(component.layout, "addChild", {
@@ -185,3 +186,3 @@ value: addChild.bind(component, component.layout.__original_addChild.bind(component.layout)),
 
-        (0, _raiseErrorMaybe2.default)(new Error(e), component.onError);
+        (0, _raiseErrorMaybe2.default)(e, component.onError);
       }
@@ -197,3 +198,3 @@
           classNames: classNames,
-          initialProps: componentVars.initialProps,
+          userStyle: componentVars.userProps,
           name: name
@@ -200,0 +201,0 @@ };

lib/smartface/pageContext.js

@@ -116,6 +116,6 @@ (function (global, factory) {
 			switch (hook) {
-				case 'beforeAssignComponentStyles':
-					return function beforeAssignComponentStyles(name, className) {
-						return className;
-					};
+				// case 'beforeAssignComponentStyles':
+				// 	return function beforeAssignComponentStyles(name, className) {
+				// 		return className;
+				// 	};
 				case 'beforeStyleDiffAssign':
@@ -212,2 +212,10 @@ return function beforeStyleDiffAssign(styles) {
 		switch (action.type) {
+			case "updateUserStyle":
+				context.find(target, { updateUserStyle: function updateUserStyle() {} }).updateUserStyle(action.userStyle);
+
+				return newState;
+			case "changeUserStyle":
+				context.find(target, { setUserStyle: function setUserStyle() {} }).setUserStyle(action.userStyle);
+
+				return newState;
 			case "invalidate":
@@ -220,3 +228,5 @@ context.map(function (actor) {
 			case 'addChild':
-				var ctree = (0, _fromSFComponent.createActorTreeFromSFComponent)(action.component, target + "_" + action.name);
+				var rootName = target + "_" + action.name;
+				var ctree = (0, _fromSFComponent.createActorTreeFromSFComponent)(action.component, rootName);
+
 				if (action.classNames && typeof action.classNames !== 'string' && !Array.isArray(action.classNames)) {
@@ -226,3 +236,5 @@ throw new Error(action.classNames + " classNames must be String or Array");
 
-				ctree[target + "_" + action.name] && action.classNames && Array.isArray(action.classNames) ? ctree[target + "_" + action.name].pushClassNames(action.classNames) : ctree[target + "_" + action.name].pushClassNames(action.classNames.split(" "));
+				ctree[target + "_" + action.name] && action.classNames && Array.isArray(action.classNames) ? ctree[rootName].pushClassNames(action.classNames) : ctree[rootName].pushClassNames(action.classNames.split(" "));
+
+				action.userStyle && ctree[rootName].setUserStyle(action.userStyle);
 				context.addTree(ctree);
@@ -229,0 +241,0 @@

lib/smartface/pageContextPatch.js

@@ -38,3 +38,3 @@ (function (global, factory) {
     page.onHide = (0, _patchMethod2.default)(page, "onHide", onHide);
-    page.onContextInit = (0, _patchMethod2.default)(page, "onContextInit", onContextInit);
+    page.didComponentEnter = (0, _patchMethod2.default)(page, "onContextInit", didComponentEnter);
     page.onOrientationChange = (0, _patchMethod2.default)(page, "onOrientationChange", onOrientationChange);
@@ -90,4 +90,4 @@ page.themeContext = Application.theme();
 
-    function onContextInit(onContextInit, dispatcher) {
-      onContextInit && onContextInit(dispatcher) || (this.dispatch = dispatcher);
+    function didComponentEnter(didComponentEnter, dispatcher) {
+      didComponentEnter && didComponentEnter(dispatcher) || (this.dispatch = dispatcher);
     }
@@ -94,0 +94,0 @@

lib/smartface/sfCorePropFactory.js

@@ -120,4 +120,9 @@ (function (global, factory) {
       res = _image2.default.createFromFile("images://" + value);
+
+      if (res === null) {
+        throw new Error('Image [' + value + '] cannot be found');
+      }
     } else if (key === "font") {
-      res = _font2.default.create(value && value.family || "Font.DEFAULT", value && value.size || 16, getFontStyle(value));
+      var family = !value.family || value.family === "Default" ? _font2.default.DEFAULT : value.family;
+      res = _font2.default.create(family, value.size || 16, getFontStyle(value));
     } else {
@@ -134,3 +139,5 @@ res = value === null ? NaN : value;
     Object.keys(objectVal).forEach(function (key) {
-      if (objectVal[key] !== null) props[key] = createSFCoreProp(key, objectVal[key]);
+      if (objectVal[key] !== null) {
+        props[key] = createSFCoreProp(key, objectVal[key]);
+      }
     });
@@ -137,0 +144,0 @@

lib/styling/Stylable.js

@@ -75,8 +75,8 @@ (function (global, factory) {
         classNames = _ref$classNames === undefined ? "" : _ref$classNames,
-        _ref$initialProps = _ref.initialProps,
-        initialProps = _ref$initialProps === undefined ? {} : _ref$initialProps,
+        _ref$userStyle = _ref.userStyle,
+        userStyle = _ref$userStyle === undefined ? {} : _ref$userStyle,
         name = _ref.name;
 
     var initialClassNames = classNames && classNames.split(" ") || [];
-    initialProps = (0, _merge2.default)(initialProps);
+    userStyle = (0, _merge2.default)(userStyle);
 
@@ -95,2 +95,16 @@ /**
 
+        _this.getUserStyle = function () {
+          return (0, _merge2.default)(userStyle);
+        };
+
+        _this.updateUserStyle = function (props) {
+          userStyle = (0, _merge2.default)(userStyle, props);
+          _this.isDirty = true;
+        };
+
+        _this.setUserStyle = function (props) {
+          userStyle = (0, _merge2.default)(props);
+          _this.isDirty = true;
+        };
+
         _this.getName = function () {
@@ -102,3 +116,3 @@ return name;
           var reduceDiffStyleHook = _this.hook("reduceDiffStyleHook");
-
+          style = (0, _merge2.default)(style, userStyle);
           var diffReducer = reduceDiffStyleHook ? reduceDiffStyleHook(_this.styles || {}, style) : function (acc, key) {
@@ -118,3 +132,3 @@ if (_this.styles[key] !== undefined) {
 
-          _this.styles === initialProps && (diff = (0, _merge2.default)(diff, initialProps));
+          // this.styles === userStyle && (diff = merge(diff, userStyle));
 
@@ -127,19 +141,43 @@ var beforeHook = _this.hook("beforeStyleDiffAssign");
 
+          //TODO: extract all specified area @cenk
+          // ------------->
+
+          var componentObjectProps = {
+            "android": {},
+            "ios": {},
+            "layout": {}
+          };
+
+          var SCW_LAYOUT_PROPS = {
+            "alignContent": "alignContent",
+            "alignItems": "alignItems",
+            "direction": "direction",
+            "flexDirection": "flexDirection",
+            "justifyContent": "justifyContent",
+            "flexWrap": "flexWrap",
+            "paddingLeft": "paddingLeft",
+            "paddingTop": "paddingTop",
+            "paddingRight": "paddingRight",
+            "paddingBottom": "paddingBottom",
+            "layoutHeight": "height",
+            "layoutWidth": "width"
+          };
+
+          function componentAssign(component, key, value) {
+            if (value !== null && value instanceof Object && componentObjectProps[key]) {
+              Object.keys(value).forEach(function (k) {
+                return componentAssign(component[key], k, value[k]);
+              });
+            } else {
+              component[key] = value;
+            }
+          }
+
           typeof component.subscribeContext === "function" ? hasDiff && component.subscribeContext({ type: "new-styles", data: Object.assign({}, diff) }) : hasDiff && Object.keys(diff).forEach(function (key) {
             try {
-              /*if (key == "scrollEnabled") {
-                comp.ios && (comp.ios.scrollEnabled = diff[key]);
-              } else */
-              if (key === "layoutHeight") {
-                // component.layout.height
-                comp.layout['height'] = diff[key];
-              } else if (key === "layoutWidth") {
-                // component.layout.width
-                comp.layout['width'] = diff[key];
-              } else if (key !== "font" && style[key] instanceof Object) {
-                Object.keys(diff[key]).forEach(function (k) {
-                  comp[key][k] = diff[key][k];
-                });
+              if (component.layout && SCW_LAYOUT_PROPS[key]) {
+                // component.layout[SCW_LAYOUT_PROPS[key]] = diff[key];
+                componentAssign(component.layout, SCW_LAYOUT_PROPS[key], diff[key]);
               } else {
-                comp[key] = diff[key];
+                componentAssign(component, key, diff[key]);
               }
@@ -150,2 +188,3 @@ } catch (e) {
           });
+          // <-------------------
 
@@ -223,3 +262,4 @@ var afterHook = _this.hook("afterStyleDiffAssign");
         _this.classNames = [].concat(initialClassNames);
-        _this.styles = initialProps;
+        _this.styles = {};
+        _this.inlinestyles = {};
         _this.isDirty = true;
@@ -226,0 +266,0 @@ return _this;

package.json

 {
   "name": "@smartface/contx",
-  "version": "1.0.0-rc.8",
+  "version": "1.0.0-rc.9",
   "description": "Context Manager",
@@ -5,0 +5,0 @@ "scripts": {

README.md

@@ -1,11 +0,10 @@
-<<<<<<< HEAD
-# contxjs
+# Contxjs
 
 ## Styling
 
-**Style Objects**
+### Style Objects
 A style object is similar to the CSS definitions. We create style-objects with selectors then we can use whenever we want to assign them to components. For example:
 
-**Selectors**
-Styling Selectors are also similar to the CSS selectors. There are 2 kind of selectors in the StylingObject.
+### Selectors
+Styling Selectors are also similar to the CSS selectors. There are 2 kinds of selectors in the StylingObject.
 
@@ -29,2 +28,3 @@ - "." ClassName selector
    }
+}
 ```
@@ -109,3 +109,3 @@
 ### Run-time Directives
-Run-time directives are run every time when making request to style by Styler and override the owner selector's properties.
+Run-time directives are ran at every style request by @smartface/styler, when making request to style by Styler and override the owner selector's properties.
 
@@ -118,8 +118,8 @@ ```js
     "+anyRuleCreatedByUser:rule-params":{
-	    "width": 400
-	},
+      "width": 400
+    },
     "+anotherRuleCreatedByUser:rule-params":{
-	    "width": 400,
-	    "height": 500
-	}
+      "width": 400,
+      "height": 500
+    }
   }
@@ -155,5 +155,5 @@ }
 
-/* or */
+/* or with modifiers*/
 
-searchBlock_searchInput{
+searchBlock_searchInputE{
 }
@@ -165,3 +165,3 @@ searchBlock_searchInput-activated{
 
-/* or with variable */
+/* or with modifiers as variable */
 searchBlock_searchInput-isActivated--true{
@@ -188,3 +188,3 @@ ...
 ### Contx/Smartface/pageContext
-Page context create style-able Smartface pages and components so that we can manipulate them using style-objects and selectors. Smartface UIEditor Transpiler generates connection between Pages and PageContext and automatically add static components via Smartface UIEditor. Dynamic Components for instance they might be images that should be created after an api call are able to only manually added. 
+PageContext create style-able Smartface pages and components so that we can manipulate them using style-objects and selectors. Smartface UIEditor Transpiler generates connection between Pages and PageContext and automatically adds components that they are created via Smartface UIEditor. To add Components dynamically, for instance they might be images that should be created after an api, you must use PageContext's actions.
 
@@ -198,3 +198,3 @@ #### Contx/Smartface/pageContext API
 
-#####  Contx/Smartface/Actions/
+##### Contx/Smartface/Actions/
 
@@ -240,237 +240,9 @@ -  **Action::type = addPageContextChild**
 
-##### Component::onContextInit(dispatch:function)**
+##### Component::onContextInit(dispatch:function)
 
-When a component initialized in the Context and If the component has onContextInit method then it's triggered by passing the its dispatch method. If not dispatch method is assigned to component directly.
+When a component initialized in the Context and If the component has onContextInit method and then it's triggered by passing its dispatch method. If not, dispatch method will be assigned to component directly.
 
+##### Component::onError(error:Error)
 
-       }
-     }
-   };
-
-```
-
-Different from CSS, The Nested Selectors inherit properties from parents and override them if they contain same properties.
-
-#### "&" Parent Selector
-
-Parent Selector is an useful tool. For instance you want to use naming conventions like BEM(Block, Element, Modifier) then parent selector helps you to create well documented selectors. For example:
-
-I have a component that name is header and it contains other components that are named **navbar**, **yearLabel** and **arrow**. In the BEM convention, **header** component is our block and these nested components are its elements. Then we can create style-object as below. 
-
-```js
-const styleObject = {
-	"#header":{
-		"&_monthLabel":{
-			"textColor":"#1775D0"
-		},
-		"&_yearLabel":{
-			"textColor":"#B1B1B4"
-		},
-		"&_arrow":{
-			"flexProps":{
-				"flexGrow":1,
-				"textColor":"#B1B1B4"
-			  }
-		}  
-	}
-```
-
-### Build-time Directives
-Build-time directives are run once while style-objects are compiled by Styler.
-
-#### @extend Rule
-
-Extend rule provides inheritance between selectors so that selectors can inherit properties from another selectors.  **@extend** rule affects all nested-selectors of a selector but not with parent-selector rule(&). For example:
-
-```js
-const styles = {
-  ".baseComponent":{
-    width: 100,
-    height: 200,
-  },
-  ".anotherBaseComponent":{
-    width: 100,
-    height: 200,
-  },
-  "childComponent":{
-    "@extend": ".baseComponent,.anotherBaseComponent"
-  }
-}
-```
-#### Creating Build-time Rules
-TODO: Extending Build-time Rules
-
-### Run-time Directives
-Run-time directives are run every time when making request to style by Styler and override the owner selector's properties.
-
-```js
-const styles = {
-  ".baseComponent":{
-    width: 100,
-    height: 200
-    "+anyRuleCreatedByUser:rule-params":{
-	    "width": 400
-	},
-    "+anotherRuleCreatedByUser:rule-params":{
-	    "width": 400,
-	    "height": 500
-	}
-  }
-}
-```
-
-#### Creating Runtime Rules
-TODO: Creating Run-time Rules
-
-## Styling Conventions and Best Practices
-We assumes you know that what The [BEM](http://getbem.com/) convention is. As a summary, according to the [BEM](http://getbem.com/), pages are built with Blocks, Blocks are built with Elements and another Blocks. And Elements and Blocks have Modifiers that are using to manipulate their display properties. 
-
-In order to imply which one is for the blocks we can use "\__" or "\_" and for the elements we can use "\__" or "\_" and for the modifiers we can use "\--" or "\-".
-
-For example:
-In the CSS 
-```css
-parentBlock {
-...
-}
-parentBlock_element {
-...
-}
-
-parentBlock_element-modifier {
-...
-}
-
-parentBlock_childBlock--modifier {
-...
-}
-
-/* or */
-
-searchBlock_searchInput{
-}
-searchBlock_searchInput-activated{
-}
-searchBlock_searchInput-deactivated{
-}
-
-/* or with variable */
-searchBlock_searchInput-isActivated--true{
-...
-}
-searchBlock_searchInput-isActivated--false{
-...
-}
-searchBlock_searchInput-color{
-...
-}
-searchBlock_searchInput-color--red{
-...
-}
-
-```
-
-This method make styles more readable and easier understanding.
-
-## Context Management
-Each context encapsulates behaviors and apply theme to decorated components that come from outside of the context via Context's Actors and Reducers.
-
-### Contx/Smartface/pageContext
-Page context create style-able Smartface pages and components so that we can manipulate them using style-objects and selectors. Smartface UIEditor Transpiler generates connection between Pages and PageContext and automatically add static components via Smartface UIEditor. Dynamic Components for instance they might be images that should be created after an api call are able to only manually added. 
-
-#### Contx/Smartface/pageContext API
-**FlexLayout::children: object**
-When PageContext is initialized for the first time then it creates component view-tree recursively using FlexLayout's children property.
-
-**Component::dispatch(action:object)**
-To manipulate Context's states and behaviors using explicitly defined built-in or custom actions that trigger Context's reducers in order to run behaviors. It's same all pages and components only in a PageContext.
-
-**Contx/Smartface/Actions/**
-
--  **Action::type = addPageContextChild**
-Adds the specified Component and their children to the PageContext and applies styles by class-name selectors.
-	- *Action::contextName: string* - Unique context name to use as Component ID. It must be unique only for same container components.
-	- *Action::childComponent: object* - Component instance that will be added to context, 
-	- *Action::classNames: string* - Class-name selectors of the specified component.
-	- *initialProps: object* - Initial properties of the specified component.
-
-- **Action::type = removeChild** : 
-Removes target component and it's children from context.
-- **Action::type = removeChildren** : 
-Removes target component's children from context.
-- **Action::type = pushClassNames** : 
-Pushes new className selectors to the target component in order to manipulate component properties.
-	- *Action::classNames:string*
-- **Action::type = removeClassName** :
-Removes className selector from the specified component's actor in the Context.
-	- *Action::classNames:string* 
-- **Action::type = invalidate** : 
-Forces to update Context's Actors and applies styles if they are changed.
-- **Action::type = updateContext** : 
-Adds new components to Context or removes ones that doesn't exists in the updated FlexLayout::children.
-
-**FlexLayout::addChild(childComponent:*, ?contextName: string, ?className: string, ?initialProps:StyleObject)**
-
-Adds specified component to the FlexLayout instance and if contextName is specified then dispatches **addPageContextChild** action to the Context.
-
-**FlexLayout::removeChild(childComponent:object)**
-
-Removes specified component from FlexLayout instance then dispatches **removeChild** action to the Context.
-
-**FlexLayout::removeAll()**
-
-Removes specified component's children then dispatches **removeChildren** action to the Context.
-
-#### Life-Cycle Events
-**Component::onDispose**
-
-When a component is removed from the Context and If the component has onDipose method then it's triggered.
-
-**Component::onContextInit(dispatch:function)**
-
-When a component initialized in the Context and If the component has onContextInit method then it's triggered by passing the its dispatch method. If not dispatch method is assigned to component directly.
-=======
-# Contxjs 
-
-Contxjs is a micro-framework that manages Conceptual Contexts and their states of the Javascript applications.
-
-##Built-in Contexts
-###StyleContext
-Creates stylingContext and manage components stylings that would be added.
-		Application Styles as a State with StyleContext
-		
-		Manipulating StyleContext’s Styles State
-		Actions
-		
-	PageContext
-		PageContext Component Shortcuts
-			addChild
-			removeChild
-			removeAll
-		Management of The Page Components
-		Actions
-
-	ThemeContext
-		Switching Themes
-
-
-# Styling 
-	Selectors
-		., #
-	
-	Directives and Rules
-		Nested Rules
-		Parent-selector Rule
-			&
-		Runtime Rules
-			Built-in Rules
-				Device rule
-			Extending Rules
-
-		Compile Time Directives
-			Built-in Rules
-				extend
-			Extending Rules
-	Styling Conventions
->>>>>>> Add classnames to layout children
-
+If an error is occcured while an operation is running for a component, for example new properties assignment, and the component has onError method then the error is passed to onError method of the component. If not and then the content throws the error.
+ 

No alert changes

Improved metrics

Lines of code

1813

increased by2.89%

Worsened metrics

Total package byte prevSize

79661

decreased by-5.75%

Number of lines in readme file

241

decreased by-48.61%

No dependency changes