docs(website): add components docs

Author: christianalfoni

logo2.psd

@@ -6,13 +6,11 @@ export class Element {
   parent: any
   context: any
   keys: any
-  events: any
   constructor(tag, props, children) {
     this.tag = tag
     this.props = props || {}
     this.children = children
     this.keys = {}
-    this.events = {}
   }
   mount(parent, context) {
     this.parent = parent
@@ -254,8 +252,10 @@ export class Element {
     return this.el
   }
   unmount() {
-    for (let eventType in this.events) {
-      this.el.removeEventListener(eventType, this.events[eventType])
+    for (let prop in this.props) {
+      if (this.context.events.isEventAttr(this.props[prop])) {
+        this.context.events.unregister(prop.substr(2).toLowerCase(), this.el)
+      }
     }
 
     return this

packages/node_modules/overmind-components/src/Element.ts

@@ -38,7 +38,8 @@ export class Events {
                 }
               },
             })
-            this.events[type].get(node)(eventToDispatch)
+            this.events[type].get(node) &&
+              this.events[type].get(node)(eventToDispatch)
 
             if (breakOut) {
               return
@@ -51,4 +52,7 @@ export class Events {
 
     this.events[type].set(element, cb)
   }
+  unregister(type, element) {
+    this.events[type].delete(element)
+  }
 }

packages/node_modules/overmind-components/src/Events.ts

@@ -74,7 +74,7 @@ export function useRef() {
   }
 
   let hook = (node) => {
-    ;(hook as any).target = node
+    ;(hook as any).current = node
   }
 
   Component.current.addHook(hook)

packages/node_modules/overmind-components/src/hooks.ts

@@ -228,13 +228,13 @@ export class Overmind<Config extends Configuration> implements Configuration {
           )
         })
       } else {
-        const execution = this.createExecution(name, action)
-        this.eventHub.emit(EventType.ACTION_START, execution)
-        this.eventHub.emit(EventType.OPERATOR_START, {
-          ...execution,
+        const execution = {
+          ...this.createExecution(name, action),
           operatorId: 0,
           type: 'action',
-        })
+        }
+        this.eventHub.emit(EventType.ACTION_START, execution)
+        this.eventHub.emit(EventType.OPERATOR_START, execution)
         const scopedTree = this.proxyStateTree.getScopedTree()
         scopedTree.startMutationTracking()
         const result = action(
@@ -247,22 +247,19 @@ export class Overmind<Config extends Configuration> implements Configuration {
         this.eventHub.emit(EventType.OPERATOR_END, {
           ...execution,
           isAsync: result instanceof Promise,
-          operatorId: 0,
           result: undefined,
         })
         this.eventHub.emit(EventType.ACTION_END, execution)
         const mutations = scopedTree.clearMutationTracking()
         mutations.length &&
           this.eventHub.emit(EventType.MUTATIONS, {
             ...execution,
-            operatorId: 0,
             mutations,
           })
         scopedTree.startMutationTracking()
         scopedTree.addMutationListener((mutation) => {
           this.eventHub.emit(EventType.MUTATIONS, {
             ...execution,
-            operatorId: 0,
             mutations: [mutation],
           })
           setTimeout(() => {

packages/node_modules/overmind/src/index.ts

@@ -0,0 +1,113 @@
+# Components
+
+Overmind ships with its own view layer, called **overmind-components**. It delivers an experience where the connection and tracking of state between Overmind and the components is completely transparent.
+
+## actions
+
+All components receives a **prop** called **actions**. These are all the actions you have defined in your Overmind application.
+
+```marksy
+h(Example, { name: "api/components_actions"})
+```
+
+## component
+
+All components are defined as plain functions.
+
+```marksy
+h(Example, { name: "api/components_component"})
+```
+
+## events
+
+Overmind components uses event delegation to optimize event management. There is only a single event listener for each type of event, but the event acts as if it was triggered on the element you defined it. That means **currentTarget** points to the element where you registered the listener and **target** points to the element that caused the event to trigger.
+
+Any event you want to manage you just prefix with **on**, like *onClick*, *onInput* or *onSubmit*.
+
+```marksy
+h(Example, { name: "api/components_events"})
+```
+
+```marksy
+h(Notice, null, "Even though event delegation is used **stopPropagation** still acts as expected")
+```
+
+## jsx
+
+The syntax used to define UI composition is called **jsx**. This is included in Typescript and can be added with the [babel plugin for jsx](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx) if using traditional Javascript.
+
+Jsx is **not** html. Actually jsx is transformed into the following Javascript:
+
+```marksy
+h(Example, { name: "api/components_jsx"})
+```
+
+That means everything is Javascript at the end of the day and that is exactly what makes jsx so powerful. There is no special template syntax and limitations of that. You can use plain Javascript to do whatever you want. Jsx is just a more declarative way of expressing the element and component composition.
+
+## keys
+
+Keys is a way to uniquely identify elements and components. This becomes useful in two scenarios:
+
+1. To cache elements and components in lists to reduce amount of reconciliation required. It is a good convention to always give keys when you work with lists
+2. Force a component to unmount and mount a new one every time the key change
+
+```marksy
+h(Example, { name: "api/components_keys"})
+```
+
+## props
+
+You can pass properties to components. The component is optimized in such a way that it will only update if any of the props change, or if any accessed state changes. You can also pass functions as props.
+
+```marksy
+h(Example, { name: "api/components_props"})
+```
+
+## render
+
+The render function allows you to render your UI structure to a target element. You also pass the render function an Overmind application instance which is how state and actions is exposed to all components.
+
+```marksy
+h(Example, { name: "api/components_render"})
+```
+
+## state
+
+All components receives a **prop** called **state**. This is all the state defined in your Overmind application instance. Any state your component accesses will cause the component to render again when changed. 
+
+```marksy
+h(Example, { name: "api/components_state"})
+```
+
+## style
+
+With **jsx** you define styles as an object. That does not mean you should define all the styling of your application this way. There are several solutions for managing CSS and styling, though when you do want to inline styles you define it as an object.
+
+```marksy
+h(Example, { name: "api/components_style"})
+```
+
+## useEffect
+
+The **useEffect** hook allows you to run arbitrary logic when the component mounts and optionally whenever it rerenders. You can also control when the effect runs again by referencing one or multiple values. If the values change, the effect runs again. You can return a function from the effect which runs whenever the effect is rererun or the component unmounts. This is typically used to clean up the effect.
+
+```marksy
+h(Example, { name: "api/components_useEffect"})
+```
+
+## useRef
+
+Sometimes you need to reference an actual element. Maybe you need to mount something from a library on the element or you want to mutate it directly. To get a reference to the element use **useRef**.
+
+```marksy
+h(Example, { name: "api/components_useRef"})
+```
+
+## useState
+
+To define and manage internal state in components you can use the **useState** hook.
+
+```marksy
+h(Example, { name: "api/components_useState"})
+```
+

packages/overmind-website/api/components.md

@@ -2,14 +2,11 @@
   {
     "title": "Simple app",
     "sandboxes": {
-      "react":
-        "https://codesandbox.io/embed/qv1n35yrlj?fontsize=12&codemirror=1&module=%2Fsrc%2FPosts.jsx",
-      "react_ts":
-        "https://codesandbox.io/embed/0yz8k00orv?fontsize=12&codemirror=1&module=%2Fsrc%2FPosts.tsx",
-      "angular":
-        "https://stackblitz.com/edit/overmind-demo1-angular-next?embed=1&file=src/app/app.component.html",
-      "vue":
-        "https://codesandbox.io/embed/k094r7rmyr?fontsize=12&codemirror=1&module=%2Fsrc%2FPosts.vue"
+      "components": "https://codesandbox.io/embed/qv1n35yrlj?fontsize=12&codemirror=1&module=%2Fsrc%2FPosts.jsx",
+      "react": "https://codesandbox.io/embed/qv1n35yrlj?fontsize=12&codemirror=1&module=%2Fsrc%2FPosts.jsx",
+      "react_ts": "https://codesandbox.io/embed/0yz8k00orv?fontsize=12&codemirror=1&module=%2Fsrc%2FPosts.tsx",
+      "angular": "https://stackblitz.com/edit/overmind-demo1-angular-next?embed=1&file=src/app/app.component.html",
+      "vue": "https://codesandbox.io/embed/k094r7rmyr?fontsize=12&codemirror=1&module=%2Fsrc%2FPosts.vue"
     }
   }
 ]

packages/overmind-website/api/log.md

@@ -1,6 +1,4 @@
-import { tsAppIndex } from '../templates'
-
-export default (ts, view) =>
+export default (ts) =>
   ts
     ? [
         {