Skip to content

Commit 0279754

Browse files
christianalfonichristianalfoni
committed
feat(proxy-state-tree): fix issues and add tracking on react and vue
1 parent e061c07 commit 0279754

File tree

15 files changed

+200
-279
lines changed

15 files changed

+200
-279
lines changed

‎packages/node_modules/overmind-devtools/src/components/ActionsList/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ const ActionsList: SFC = () => {
4242
<div key={item.id}>
4343
<div
4444
className={styles.actionItem}
45-
key={item.id}
4645
onClick={() => actions.selectAction(item.id)}
4746
>
4847
<span

‎packages/node_modules/overmind-react/src/index.test.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Overmind, TAction } from 'overmind'
22
import * as React from 'react'
33
import * as renderer from 'react-test-renderer'
4-
/*
54
import { TConnect, createConnect } from './'
65

76
describe('React', () => {
@@ -136,4 +135,3 @@ describe('React', () => {
136135
expect(ConnectedBar.name).toBe('BarComponent')
137136
})
138137
})
139-
*/

‎packages/node_modules/overmind-react/src/index.ts‎

Lines changed: 94 additions & 171 deletions
Original file line numberDiff line numberDiff line change
@@ -60,41 +60,51 @@ export const createHook = <A extends Overmind<Configuration>>(
6060
typeof component.__componentId === 'undefined'
6161
? nextComponentId++
6262
: component.__componentId
63-
const [tree] = useState<any>(() =>
63+
const [tree, updateComponent] = useState<any>(() =>
6464
(overmind as any).proxyStateTree.getTrackStateTree()
6565
)
66-
const [componentInstanceId, updateComponent] = useState<any>(
67-
() => currentComponentInstanceId++
68-
)
66+
const [debugging] = useState<any>(() => ({
67+
isFirstRender: true,
68+
currentFlushId: 0,
69+
currentComponentsInstaceId: currentComponentInstanceId++,
70+
}))
6971

7072
tree.track((mutations, paths, flushId) => {
71-
overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
72-
componentId: component.__componentId,
73-
componentInstanceId: componentInstanceId,
74-
name,
75-
flushId,
76-
paths,
77-
})
73+
debugging.currentFlushId = flushId
7874
updateComponent((state) => state)
7975
})
8076

81-
useEffect(() => {
82-
overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
83-
componentId: component.__componentId,
84-
componentInstanceId: componentInstanceId,
85-
name,
86-
paths: Array.from(tree.pathDependencies) as any,
87-
})
77+
useLayoutEffect(() => {
78+
if (debugging.isFirstRender) {
79+
overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
80+
componentId: component.__componentId,
81+
componentInstanceId: debugging.componentInstanceId,
82+
name,
83+
paths: Array.from(tree.pathDependencies) as any,
84+
})
85+
debugging.isFirstRender = false
86+
} else {
87+
overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
88+
componentId: component.__componentId,
89+
componentInstanceId: debugging.componentInstanceId,
90+
name,
91+
flushId: debugging.currentFlushId,
92+
paths: Array.from(tree.pathDependencies as Set<string>),
93+
})
94+
}
95+
})
8896

89-
return () => {
97+
useEffect(
98+
() => () => {
9099
;(overmind as any).proxyStateTree.disposeTree(tree)
91100
overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
92101
componentId: component.__componentId,
93-
componentInstanceId,
102+
componentInstanceId: debugging.componentInstanceId,
94103
name,
95104
})
96-
}
97-
}, [])
105+
},
106+
[]
107+
)
98108

99109
return {
100110
state: tree.state,
@@ -103,180 +113,93 @@ export const createHook = <A extends Overmind<Configuration>>(
103113
}
104114
}
105115

106-
/*
107116
export const createConnect = <A extends Overmind<Configuration>>(
108117
overmind: A
109118
) => {
110119
return <Props>(
111-
Component: IReactComponent<Props & TConnect<A>>
120+
component: IReactComponent<
121+
Props & { overmind: { state: A['state']; actions: A['actions'] } }
122+
>
112123
): IReactComponent<Omit<Props & TConnect<A>, keyof TConnect<A>>> => {
113124
let componentInstanceId = 0
125+
const name = component.name
126+
const populatedComponent = component as any
127+
populatedComponent.__componentId =
128+
typeof populatedComponent.__componentId === 'undefined'
129+
? nextComponentId++
130+
: populatedComponent.__componentId
114131
const isClassComponent =
115-
Component.prototype && typeof Component.prototype.render === 'function'
132+
component.prototype && typeof component.prototype.render === 'function'
116133

117134
if (isClassComponent) {
118-
const originalRender = Component.prototype.render
119-
const originalWillUnmount = Component.prototype.componentWillUnmount
120-
121-
Component.prototype.componentWillUnmount = function() {
122-
if (!this.props.overmind) {
123-
return originalWillUnmount && originalWillUnmount.call(this)
124-
}
125-
126-
this.__isUnmounting = true
127-
if (this.__mutationListener) {
128-
overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
129-
componentId: this.__componentId,
130-
componentInstanceId: this.props.overmind.__componentInstanceId,
131-
name: Component.name || '',
132-
})
133-
134-
this.__mutationListener.dispose()
135-
}
136-
originalWillUnmount && originalWillUnmount.call(this)
137-
}
138-
Component.prototype.render = function() {
139-
if (!this.props.overmind) {
140-
return originalRender.call(this)
141-
}
142-
143-
if (typeof this.__componentId === 'undefined') {
144-
this.__componentId = nextComponentId++
145-
}
146-
const trackId = overmind.trackState()
147-
const value = originalRender.call(this)
148-
const paths = overmind.clearTrackState(trackId)
149-
150-
if (this.__mutationListener) {
151-
this.__mutationListener.update(paths)
152-
overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
153-
componentId: this.__componentId,
154-
componentInstanceId: this.props.overmind.__componentInstanceId,
155-
name: Component.name || '',
156-
paths: Array.from(paths),
157-
})
158-
} else {
159-
overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
160-
componentId: this.__componentId,
161-
componentInstanceId: this.props.overmind.__componentInstanceId,
162-
name: Component.name || '',
163-
paths: Array.from(paths),
164-
})
165-
this.__mutationListener = overmind.addFlushListener(
166-
paths,
167-
(flushId) => {
168-
if (this.__isUnmounting) {
169-
return
170-
}
171-
overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
172-
componentId: this.__componentId,
173-
componentInstanceId: this.props.overmind.__componentInstanceId,
174-
name: Component.name || '',
175-
paths: Array.from(paths),
176-
flushId,
177-
})
178-
this.forceUpdate()
179-
}
180-
)
181-
}
182-
183-
return value
135+
const originalRender = component.prototype.render
136+
component.prototype.render = function() {
137+
this.tree.track(this.props.overmind.onUpdate)
138+
return originalRender()
184139
}
185140
}
186141

187-
const klass = class extends PureComponent<
188-
Omit<Props & TConnect<A>, keyof TConnect<A>>
189-
> {
190-
__mutationListener: any
191-
__isUnmounting: boolean
192-
__componentId: number
193-
__componentInstanceId = componentInstanceId++
142+
class HOC extends PureComponent {
143+
tree = (overmind as any).proxyStateTree.getTrackStateTree()
144+
componentInstanceId = componentInstanceId++
145+
currentFlushId = 0
146+
componentDidMount() {
147+
overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
148+
componentId: populatedComponent.__componentId,
149+
componentInstanceId: this.componentInstanceId,
150+
name,
151+
paths: Array.from(this.tree.pathDependencies) as any,
152+
})
153+
}
154+
componentDidUpdate() {
155+
overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
156+
componentId: populatedComponent.__componentId,
157+
componentInstanceId: this.componentInstanceId,
158+
name,
159+
flushId: this.currentFlushId,
160+
paths: Array.from(this.tree.pathDependencies as Set<string>),
161+
})
162+
}
194163
componentWillUnmount() {
195-
this.__isUnmounting = true
196-
if (this.__mutationListener) {
197-
overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
198-
componentId: this.__componentId,
199-
componentInstanceId: this.__componentInstanceId,
200-
name: Component.name || '',
201-
})
202-
this.__mutationListener.dispose()
203-
}
164+
;(overmind as any).proxyStateTree.disposeTree(this.tree)
165+
overmind.eventHub.emitAsync(EventType.COMPONENT_REMOVE, {
166+
componentId: populatedComponent.__componentId,
167+
componentInstanceId: this.componentInstanceId,
168+
name,
169+
})
170+
}
171+
onUpdate = (mutatons, paths, flushId) => {
172+
this.currentFlushId = flushId
173+
this.forceUpdate()
204174
}
205-
renderStatelessComponent() {
206-
const trackId = overmind.trackState()
207-
const value = (Component as any)(
208-
Object.assign({}, this.props, {
175+
render() {
176+
if (isClassComponent) {
177+
return createElement(component, {
178+
...this.props,
209179
overmind: {
210-
state: overmind.state,
180+
state: this.tree.state,
211181
actions: overmind.actions,
212-
__componentInstanceId: this.__componentInstanceId,
182+
onUpdate: this.onUpdate,
213183
},
214-
}),
215-
this.context
216-
)
217-
const paths = overmind.clearTrackState(trackId)
218-
219-
if (this.__mutationListener) {
220-
this.__mutationListener.update(paths)
221-
overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
222-
componentId: this.__componentId,
223-
componentInstanceId: this.__componentInstanceId,
224-
name: Component.name || '',
225-
paths: Array.from(paths),
226-
})
227-
} else {
228-
overmind.eventHub.emitAsync(EventType.COMPONENT_ADD, {
229-
componentId: this.__componentId,
230-
componentInstanceId: this.__componentInstanceId,
231-
name: Component.name || '',
232-
paths: Array.from(paths),
233-
})
234-
this.__mutationListener = overmind.addFlushListener(
235-
paths,
236-
(flushId) => {
237-
if (this.__isUnmounting) {
238-
return
239-
}
240-
overmind.eventHub.emitAsync(EventType.COMPONENT_UPDATE, {
241-
componentId: this.__componentId,
242-
componentInstanceId: this.__componentInstanceId,
243-
name: Component.name || '',
244-
paths: Array.from(paths),
245-
flushId,
246-
})
247-
this.forceUpdate()
248-
}
249-
)
184+
} as any)
250185
}
251186

252-
return value
253-
}
254-
renderClassComponent() {
255-
return createElement(Component, Object.assign({}, this.props, {
187+
this.tree.track(this.onUpdate)
188+
189+
return createElement(component, {
190+
...this.props,
256191
overmind: {
257-
state: overmind.state,
192+
state: this.tree.state,
258193
actions: overmind.actions,
259-
__componentInstanceId: this.__componentInstanceId,
260194
},
261-
}) as any)
262-
}
263-
render() {
264-
if (isClassComponent) {
265-
return this.renderClassComponent()
266-
}
267-
268-
if (typeof this.__componentId === 'undefined') {
269-
this.__componentId = nextComponentId++
270-
}
271-
272-
return this.renderStatelessComponent()
195+
} as any)
273196
}
274197
}
275198

276-
Object.defineProperties(klass, {
277-
name: { value: Component.displayName || Component.name || '' },
199+
Object.defineProperties(HOC, {
200+
name: { value: component.displayName || component.name || '' },
278201
})
279-
return klass
202+
203+
return HOC as any
280204
}
281205
}
282-
*/

0 commit comments

Comments
 (0)