Updating Jails for v4

Author: Javiani

_sidebar.md

@@ -14,7 +14,6 @@
 	- [Events](events.md)
 	- [Pub/Sub](pubsub.md)
 	- [Expose/Get](expose-get.md)
-	- [Props](props.md)
 	- [Dependency Injection](dependencies.md)
 
 - Template System
@@ -32,7 +31,4 @@
 	- [Introduction](store.md)
 
 - Packages
-	- [Introduction](packages.md)
-
-- Examples
-	- [Introduction](examples.md)
+	- [Introduction](packages.md)

dependencies.md

@@ -7,15 +7,14 @@ The **DI** system can be used to share singleton instances between components, a
 You can even make your components more abstract by making them behave accordandly with dependencies they receive, like a validation component that can expect a set of functions for validations which can vary from one project to another.
 
 *home.js*
+
 ```js
 import jails from 'jails-js'
 import * as validation from 'components/validation'
 import validators from 'helpers/validators'
 
 const dependencies = {
-    injection :{
-        validators
-    }
+    validators
 }
 
 jails.register('validation', validation, dependencies)
@@ -27,11 +26,11 @@ jails.start()
 *components/validation.js*
 
 ```js 
-export default ({ main, injection }) => {
+export default function validation ({ main, injection }) {
 
     const {validators} = injection
 
-    main(() => [
+    main( _ => [
         // ... Do UI validations using validators
     ])
 }

elm.md

@@ -27,9 +27,9 @@ jails.register('my-component', mycomponent)
 
 ```js
 
-export default ({ main, elm }) => {
+export default function mycomponent ({ main, elm }) {
 
-    main(() => [
+    main( _ => [
         whoami
     ])
 

events.md

@@ -8,22 +8,22 @@ Events are a powerful tool to sending messages from children to parent nodes, it
 A function helper to add event listener that support `event delegation`.
 
 ```js
-export default ({ main }) => {
+export default function mycomponent ({ main }) {
 
-    main(() => [
+    main( _ => [
         events
     ])
 
     const events = ({ on }) => {
         on('click', componentClick)
-        on('click', {'a':linkClick})
+        on('click', 'a', linkClick)
     }
 
     const componentClick = (event) => {
         console.log( 'Clicking in the component area', event.target )
     }
 
-    const linkClick = event => {
+    const linkClick = (event) => {
         console.log( 'Clicking in a child link element', event.target )
     }
 }
@@ -39,7 +39,7 @@ Use that when possible to make the component function definition cleaner.
 A helper that removes a event listener.
 
 ```js
-export default ({ main, off }) => {
+export default function mycomponent ({ main, off }) {
 
     main(() => [
         events
@@ -69,9 +69,9 @@ The first parameter is any string you want, the second parameter optional data t
 **Parent Component**
 
 ```js
-export default ({ main }) => {
+export default function parentcomponent ({ main }) {
 
-    main(() => [
+    main( _ => [
         events
     ])
 
@@ -88,9 +88,9 @@ export default ({ main }) => {
 **Child Component**
 
 ```js
-export default ({ main, emit }) => {
+export default function childcomponent ({ main, emit }){
 
-    main(() => [
+    main( _ => [
         events
     ])
 

expose-get.md

@@ -10,18 +10,20 @@ All component's functions are private by default, in order to have access to a c
 *components/button/index.js*
 
 ```js
-export default ({ main, elm }) => {
+export default function button ({ main, elm })  {
 
-    main(()=>[
+    main( _ => [
         exposing
     ])
 
     // Making changeColor() public
-    const exposing = ({ expose }) =>
-        expose( {changeColor} )
-
-    const changeColor = ( color ) =>
+    const exposing = ({ expose }) => {
+        expose({ changeColor })
+    }
+        
+    const changeColor = ( color ) => {
         elm.style.backgroundColor = color
+    }        
 }
 ```
 
@@ -36,11 +38,11 @@ The example below is a parent component of the component created in the previous
 *components/parentOfButtonCP/index.js*
 
 ```js
-export default ({ main }) => {
+export default function parentOfButton ({ main }) {
 
     const buttonComponents = get('button')
 
-    main(() => [
+    main( _ => [
         changeButtonsColors
     ])
 
@@ -57,11 +59,11 @@ The default behavior is to find all components named as `button`, in the example
 If you need to specify which component you want to change, you can do so by passing a **CssSelector** as second parameter to get a specific component:
 
 ```js
-export default ({ main }) => {
+export default function parentComponent({ main }) {
 
     const buttonComponents = get('button', '.with-this-class')
 
-    main(() => [
+    main( _ => [
         changeButtonsColors
     ])
 

images/logo.png

@@ -5,7 +5,7 @@
 
 Adding with `yarn` :
 ```
-yarn add jails-js
+yarn add jails-org/jails-js#@next
 ```
 
 Installing with `npm` :

images/logo.svg

@@ -7,9 +7,9 @@ Every Jails components are a high level function that gets a set of helpers that
 **The `main` function is used to setup your component definitions when it's mounted.**
 
 ```js
-export default ({ main }) => {
+export default function ({ main }) {
 
-    main(() => [
+    main( _ => [
         log
     ])
 
@@ -28,9 +28,9 @@ You can compose different behaviors/logic with another component to separate dif
 ```js
 import trackings from './tracking'
 
-export default ({ main }) => {
+export default function tracking ({ main }) {
 
-    main(() => [
+    main( _ => [
         trackings,
         log
     ])

installing.md

@@ -20,13 +20,4 @@ These modules can be installed and imported on your application just like any ot
         "jails.packages":"jails-org/packages"
     }
 }
-```
-
-*my-app.js*
-
-```js
-import jails from 'jails-js'
-import logger from 'jails.packages/logger'
-
-jails.use( logger() ).start()
-```
+```