refactor(views): expose overmind as overmind instead of app

Author: christianalfoni

packages/node_modules/overmind-angular/src/index.ts

@@ -1,22 +1,23 @@
-import { BaseApp, EventType, Overmind } from 'overmind'
+import { EventType, Overmind, TApp, Configuration } from 'overmind'
+
 // @ts-ignore
 import { NgZone } from '@angular/core'
 
-export type TConnect<App extends BaseApp> = {
-  app: {
-    state: App['state']
-    actions: App['actions']
+export type TConnect<Config extends Configuration> = {
+  overmind: {
+    state: TApp<Config>['state']
+    actions: TApp<Config>['actions']
     reaction: (
       name: string,
-      stateCb: (state: App['state']) => any,
+      stateCb: (state: TApp<Config>['state']) => any,
       Function
     ) => void
   }
 }
 
 let nextComponentId = 0
 
-export const createConnect = <App extends Overmind<any>>(app: App) => () => {
+export const createConnect = <A extends Overmind<any>>(overmind: A) => () => {
   const componentId = nextComponentId++
   let componentInstanceId = 0
 
@@ -26,12 +27,14 @@ export const createConnect = <App extends Overmind<any>>(app: App) => () => {
     const targetNgAfterContentInit = target.prototype.ngAfterContentInit
     const targetNgAfterViewInit = target.prototype.ngAfterViewInit
     const targetNgAfterViewChecked = target.prototype.ngAfterViewChecked
-    const reactionFactory = app.createReactionFactory(target.constructor.name)
+    const reactionFactory = overmind.createReactionFactory(
+      target.constructor.name
+    )
 
     target.prototype.ngOnInit = function() {
-      this.app = {
-        state: app.state,
-        actions: app.actions,
+      this.overmind = {
+        state: overmind.state,
+        actions: overmind.actions,
         reaction: reactionFactory.add,
       }
       this.__componentInstanceId = componentInstanceId++
@@ -55,7 +58,7 @@ export const createConnect = <App extends Overmind<any>>(app: App) => () => {
     }
 
     target.prototype.ngAfterContentInit = function() {
-      this.__currentTrackId = app.trackState()
+      this.__currentTrackId = overmind.trackState()
 
       if (targetNgAfterContentInit) {
         targetNgAfterContentInit.apply(target)
@@ -64,22 +67,22 @@ export const createConnect = <App extends Overmind<any>>(app: App) => () => {
 
     target.prototype.ngAfterViewInit = function() {
       const ngZ = new NgZone({ enableLongStackTrace: false })
-      const paths = app.clearTrackState(this.__currentTrackId)
+      const paths = overmind.clearTrackState(this.__currentTrackId)
 
-      app.eventHub.emitAsync(EventType.COMPONENT_ADD, {
+      overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
         componentId,
         componentInstanceId: this.__componentInstanceId,
         name: this.constructor.name || '',
         paths: Array.from(paths),
       })
-      this.__listener = app.addMutationListener(paths, (flushId) => {
+      this.__listener = overmind.addMutationListener(paths, (flushId) => {
         this.__shouldUpdatePaths = true
         if (this.cdr) {
           this.cdr.markForCheck()
         }
         ngZ.run(() => {})
 
-        app.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+        overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
           componentId,
           componentInstanceId: this.__componentInstanceId,
           name: this.constructor.name || '',
@@ -94,7 +97,7 @@ export const createConnect = <App extends Overmind<any>>(app: App) => () => {
 
     target.prototype.ngDoCheck = function() {
       if (this.__shouldUpdatePaths) {
-        this.__currentTrackId = app.trackState()
+        this.__currentTrackId = overmind.trackState()
       }
       if (targetNgDoCheck) {
         targetNgDoCheck.apply(target)
@@ -103,10 +106,10 @@ export const createConnect = <App extends Overmind<any>>(app: App) => () => {
 
     target.prototype.ngAfterViewChecked = function() {
       if (this.__shouldUpdatePaths) {
-        const paths = app.clearTrackState(this.__currentTrackId)
+        const paths = overmind.clearTrackState(this.__currentTrackId)
         this.__listener.update(paths)
         this.__shouldUpdatePaths = false
-        app.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
+        overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
           componentId,
           componentInstanceId: this.__componentInstanceId,
           name: this.constructor.name || '',
@@ -124,7 +127,7 @@ export const createConnect = <App extends Overmind<any>>(app: App) => () => {
       if (targetNgOnDestroy) {
         targetNgOnDestroy.apply(target)
       }
-      app.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
+      overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
         componentId,
         componentInstanceId: this.__componentInstanceId,
         name: this.constructor.name || '',

packages/node_modules/overmind-components/src/Component.test.tsx

@@ -1,7 +1,6 @@
 import { Overmind } from 'overmind'
 import { testRender } from './testRender'
-import { h } from './'
-import { TComponent } from './Component'
+import { Component, h, useOvermind } from './'
 import { Null } from './Null'
 
 describe('COMPONENT', () => {
@@ -91,7 +90,6 @@ describe('COMPONENT', () => {
       </div>
     )
 
-    console.log(test.getUpdates())
     expect(test.getUpdates().length).toBe(2)
 
     expect(target.children[0].children[0].vtree).toBeInstanceOf(Null)
@@ -111,7 +109,7 @@ describe('COMPONENT', () => {
     expect(target.children[0].vtree.vtree.children[0].el.nodeValue).toBe('foo')
   })
   test('should update on state changes', () => {
-    const app = new Overmind({
+    const config = {
       state: {
         foo: true,
       },
@@ -120,14 +118,18 @@ describe('COMPONENT', () => {
           state.foo = false
         },
       },
-    })
+    }
+    const app = new Overmind(config)
+
+    const TestComp: Component = () => {
+      const { state } = useOvermind<typeof config>()
+      return state.foo ? <span>foo</span> : <div>bar</div>
+    }
 
-    const TestComp: TComponent<typeof app> = ({ state }) =>
-      state.foo ? <span>foo</span> : <div>bar</div>
     const test = testRender(app, <TestComp />)
     const target = test.getTargetElement()
 
-    app.actions.changeFoo({})
+    app.actions.changeFoo()
 
     expect(test.getUpdates().length).toBe(8)
 

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

@@ -1,17 +1,4 @@
 import { Null } from './Null'
-import { TApp, Configuration } from 'overmind'
-
-export type TComponent<Config extends Configuration, Props = {}> = (
-  props: Props extends { children: any }
-    ? {
-        state: TApp<Config>['state']
-        actions: TApp<Config>['actions']
-      } & Props
-    : {
-        state: TApp<Config>['state']
-        actions: TApp<Config>['actions']
-      } & Props & { children: any }
-) => any
 
 export type FormEvent<T> = {
   bubbles: boolean
@@ -80,8 +67,6 @@ export class Component {
     this.vtree =
       this.tag({
         ...this.props,
-        state: app.state,
-        actions: app.actions,
         children: this.children.length === 1 ? this.children[0] : this.children,
       }) || new Null()
     const paths = app.clearTrackState(trackId)
@@ -184,8 +169,6 @@ export class Component {
     const newVTree =
       this.tag({
         ...next.props,
-        state: app.state,
-        actions: app.actions,
         children: this.children.length === 1 ? this.children[0] : this.children,
       }) || new Null()
     const paths = app.clearTrackState(trackId)

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

@@ -1,4 +1,17 @@
 import { Component } from './Component'
+import { TApp, IConfig } from 'overmind'
+
+export function useOvermind<Config extends IConfig>(): {
+  state: TApp<Config>['state']
+  actions: TApp<Config>['actions']
+} {
+  const component = Component.current
+
+  return {
+    state: component.context.app.state,
+    actions: component.context.app.actions,
+  }
+}
 
 export function useState<T>(initialState: T): [T, (update: T) => void] {
   const component = Component.current

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

@@ -4,7 +4,11 @@ import { Null } from './Null'
 import { Literal } from './Literal'
 import { Events } from './Events'
 
-export { TComponent, FormEvent } from './Component'
+export { FormEvent } from './Component'
+
+export type Component<Props = object> = (
+  props: Props extends { children: any } ? Props : Props & { children?: any }
+) => JSX.Element
 
 export * from './hooks'
 

packages/node_modules/overmind-components/src/render.test.tsx

@@ -1,7 +1,7 @@
 import { Overmind } from 'overmind'
 import { testRender } from './testRender'
 import { h } from './'
-import { Null } from 'overmind-components/src/Null'
+import { Null } from './Null'
 
 describe('RENDER', () => {
   test.only('should create element', () => {

packages/node_modules/overmind-devtools/src/app/index.ts

@@ -1,5 +1,4 @@
 import { Overmind, TConfig } from 'overmind'
-import { TComponent } from 'overmind-components'
 
 import * as actions from './actions'
 import * as effects from './effects'
@@ -16,10 +15,6 @@ declare module 'overmind' {
   interface IConfig extends TConfig<typeof config> {}
 }
 
-export type Component<Props = {}> = TComponent<typeof config, Props>
-
-const app = new Overmind(config, {
+export default new Overmind(config, {
   devtools: false,
 })
-
-export default app

packages/node_modules/overmind-devtools/src/components/Action/index.tsx

@@ -1,12 +1,12 @@
-import { h } from 'overmind-components'
-import { Component } from '../../app'
+import { h, Component, useOvermind } from 'overmind-components'
 import * as styles from './styles'
 import ActionOperator from '../ActionOperator'
 import Flush from '../ActionFlush'
 import { getActionId, getOperatorId } from '../../app/utils'
 import { css } from 'emotion'
 
-const Action: Component = ({ state, actions }) => {
+const Action: Component = () => {
+  const { state, actions } = useOvermind()
   const flushReference =
     state.currentApp.flushByActionId[getActionId(state.currentAction)]
   const flush =

packages/node_modules/overmind-devtools/src/components/ActionFlush/index.tsx

@@ -1,5 +1,4 @@
-import { h } from 'overmind-components'
-import { Component } from '../../app'
+import { h, Component, useOvermind } from 'overmind-components'
 import { Flush as FlushType } from '../../app/types'
 import * as actionStyles from '../Action/styles'
 import * as styles from './styles'
@@ -11,7 +10,8 @@ type Props = {
   flush: FlushType
 }
 
-const ActionFlush: Component<Props> = ({ flush, state, actions }) => {
+const ActionFlush: Component<Props> = ({ flush }) => {
+  const { state, actions } = useOvermind()
   const isExpanded = state.expandAllActionDetails || !flush.isCollapsed
 
   return flush.components.length || flush.derived.length ? (

packages/node_modules/overmind-devtools/src/components/ActionFlush/styles.ts

@@ -4,7 +4,7 @@ export const flush = css`
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 0 var(--padding-2);
+  padding: 0 var(--padding-3);
   cursor: pointer;
   border: 1px solid var(--color-black-1);
   background-color: #fff;