actml - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

lib/Pipeline.js

		@@ -43,3 +43,3 @@ 'use strict';

		var normalizedProps = props;
		var normalizedProps = _extends({}, props);

		@@ -54,3 +54,9 @@ if (props) {
		if (typeof value !== 'undefined') {
		normalizedProps[typeof props[propName] === 'string' ? props[propName] : prop] = value;
		if (typeof props[propName] === 'string') {
		normalizedProps[props[propName]] = value;
		} else if (typeof props[propName] === 'function') {
		normalizedProps = _extends({}, normalizedProps, props[propName](value));
		} else {
		normalizedProps[prop] = value;
		}
		delete normalizedProps[propName];
		@@ -57,0 +63,0 @@ }

package.json

		{
		"name": "actml",
		"version": "0.7.0",
		"version": "0.7.1",
		"description": "Like jsx but for your business logic",
		@@ -5,0 +5,0 @@ "main": "lib",

README.md

		@@ -7,3 +7,6 @@ # <ActML /> :rocket: <!-- omit in toc -->
		- [What you need to use ActML](#what-you-need-to-use-actml)
		- [What is a ActML element](#what-is-a-actml-element)
		- [What is an ActML element](#what-is-an-actml-element)
		- [Getting in and out of your function/element](#getting-in-and-out-of-your-functionelement)
		- [Context API](#context-api)
		- [Setting in and getting out from the context](#setting-in-and-getting-out-from-the-context)

		@@ -88,3 +91,3 @@ ## Concept

		## What is a ActML element
		## What is an ActML element

		@@ -141,1 +144,77 @@ In the context of ActML the _element_ is a JavaScript function. The code below defines two different ActML elements:

		## Getting in and out of your function/element

		The input to your ActML is the attributes that we pass to the tag. They come as `props` to your function. For example:

		```js
		const Foo = function (props) {
		console.log(`Hello ${ props.name }`);
		}

		run(<Foo name='John' />); // outputs "Hello John"
		```

		The output or in other words the returned value of your element is available to its children via the [FACC (function as children pattern)](https://github.com/krasimir/react-in-patterns/blob/master/book/chapter-4/README.md#function-as-a-children-render-prop):

		```js
		const Foo = function (props) {
		return `Hello ${ props.name }`;
		}

		run(
		<Foo name='John'>
		{ message => console.log(message) }
		</Foo>
		);
		// outputs again "Hello John"
		```

		Also the returned by a function value gets injected into the ActML's runner context and it can be fetched from there via the context API.

		## Context API

		Using the FACC pattern everywhere is not very convenient. So, there's a context object which is shared through all the elements in the currently executed set of elements. Think about it as a JavaScript object with `set` and `get` method. In one side we are registering stuff inside by using the `set` method and from another we are getting them using the `get` method.

		### Setting in and getting out from the context

		In order to register a variable inside the context we have to use the special prop `exports`. As a value we add the name of our variable. For example:

		```js
		const IKnowTheAnswer = function () {
		return 42;
		}
		const Print = function ({ answer }) {
		console.log(`The answer is ${ answer }`);
		}

		run(
		<A>
		<IKnowTheAnswer exports='answer' />
		<Print $answer />
		</A>
		);
		```

		`exports='answer'` creates a variable with name `answer` and value whatever `IKnowTheAnswer` returns. Then later we use the `$` (dollar sign) plus the name of the variable to inject its value to the `Print` function.

		Sometimes we don't want to use the same name of a variable so we can change it by setting an attribute value:

		```js
		const Print = function ({ data }) {
		console.log(`The answer is ${ data }`);
		}

		run(
		<A>
		<IKnowTheAnswer exports='answer' />
		<Print $answer='data' />
		</A>
		);
		```

		We can go even further and provide a function which receives the value and returns a props object:

		```js

		```

actml - npm Package Compare versions

Improved metrics