Skip to content

Commit

Permalink
Merge pull request #59 from cerebral/statecomputed
Browse files Browse the repository at this point in the history 
support state computed
  • Loading branch information
@christianalfoni
christianalfoni authored Jun 12, 2018
2 parents c35d641 + 07c6b34 commit f3a0eb5
Show file tree
Hide file tree
Showing 8 changed files with 85 additions and 13 deletions.
18 changes: 18 additions & 0 deletions src/app/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,24 @@
import computedSignalsList from '../common/computed/signalsList'
import { getActionNameByIndex } from '../common/utils'

export function setComputedStateUpdate({ props, state }) {
state.set(
`computedState.${props.data.path.replace(/\./g, '%')}`,
props.data.value
)
}

export function setComputedState({ props, state }) {
state.set(
'computedState',
Object.keys(props.data.initialComputedState).reduce((converted, key) => {
converted[key.replace(/\./g, '%')] = props.data.initialComputedState[key]

return converted
}, {})
)
}

export function updateWatchUpdates({ props, state }) {
state.set(
'watchUpdates',
Expand Down
1 change: 1 addition & 0 deletions src/app/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ export default config =>
currentMutationPath: null,
watchMap: {},
computedMap: {},
computedState: {},
watchUpdates: [],
mutationsError: false,
searchValue: '',
Expand Down
3 changes: 2 additions & 1 deletion src/app/sequences.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const updateExpandedPaths = actions.updateExpandedPaths
export const handlePayload = [
equals(props`type`),
{
init: [actions.clean, actions.setInitialPayload],
init: [actions.clean, actions.setInitialPayload, actions.setComputedState],
bulk: [actions.clean, actions.parseAndRunMessages],
executionStart: actions.addSignal,
execution: [actions.updateSignal, actions.runMutation],
Expand All @@ -48,6 +48,7 @@ export const handlePayload = [
actions.addWatchersToHistory,
],
recorderMutation: actions.runRecordedMutation,
computedUpdate: actions.setComputedStateUpdate,
otherwise: [],
},
]
Expand Down
2 changes: 1 addition & 1 deletion src/components/Debugger/History/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import connector from 'connector'
function getWatcherIcon(record) {
if (record.data.watcher.type === 'View') {
return <i className="icon icon-view" />
} else if (record.data.watcher.type === 'Computed') {
} else if (record.data.watcher.type === 'Compute') {
return <i className="icon icon-computed" />
} else if (record.data.watcher.type === 'Reaction') {
return <i className="icon icon-computed" />
Expand Down
62 changes: 56 additions & 6 deletions src/components/Debugger/Inspector/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,22 @@ function renderType(
highlightPath,
modelChanged,
pathClicked,
expandedPaths
expandedPaths,
computed,
isComputed
) {
if (value === undefined) {
return null
}

const isComputedValue = computed && path.join('%') in computed

isComputed = isComputed || isComputedValue

if (isComputedValue) {
value = computed[path.join('%')]
}

if (isArray(value)) {
return (
<ArrayValue
Expand All @@ -56,6 +66,9 @@ function renderType(
propertyKey={propertyKey}
highlightPath={highlightPath}
expandedPaths={expandedPaths}
computed={computed}
isComputed={isComputed}
isComputedParent={isComputedValue}
/>
)
}
Expand All @@ -70,6 +83,9 @@ function renderType(
propertyKey={propertyKey}
highlightPath={highlightPath}
expandedPaths={expandedPaths}
computed={computed}
isComputed={isComputed}
isComputedParent={isComputedValue}
/>
)
}
Expand All @@ -84,6 +100,9 @@ function renderType(
propertyKey={propertyKey}
highlightPath={highlightPath}
expandedPaths={expandedPaths}
computed={computed}
isComputed={isComputed}
isComputedParent={isComputedValue}
/>
)
}
Expand Down Expand Up @@ -158,7 +177,9 @@ class ObjectValue extends Component {
this.props.highlightPath,
this.props.modelChanged,
this.props.pathClicked,
this.props.expandedPaths
this.props.expandedPaths,
this.props.computed,
this.props.isComputed
)}
</div>
</div>
Expand All @@ -173,7 +194,7 @@ class ObjectValue extends Component {
return keys.join(', ')
}
render() {
const { value, hasNext } = this.props
const { value, hasNext, isComputedParent } = this.props
const isExactHighlightPath =
this.props.highlightPath &&
String(this.props.highlightPath) === String(this.props.path)
Expand All @@ -190,6 +211,9 @@ class ObjectValue extends Component {
: 'inspector-object'
}
onClick={this.onExpandClick}
style={{
opacity: isComputedParent ? 0.5 : 1,
}}
>
{this.props.propertyKey ? this.props.propertyKey + ': ' : null}
<strong>{'{ '}</strong>
Expand All @@ -210,6 +234,9 @@ class ObjectValue extends Component {
? 'inspector-object inspector-highlight'
: 'inspector-object'
}
style={{
opacity: isComputedParent ? 0.5 : 1,
}}
>
<div onClick={this.onCollapseClick}>
{this.props.propertyKey}: <strong>{'{ '}</strong>
Expand Down Expand Up @@ -241,6 +268,9 @@ class ObjectValue extends Component {
? 'inspector-object inspector-highlight'
: 'inspector-object'
}
style={{
opacity: isComputedParent ? 0.5 : 1,
}}
>
<div onClick={this.onCollapseClick}>
<strong>{'{ '}</strong>
Expand Down Expand Up @@ -319,15 +349,17 @@ class ArrayValue extends Component {
this.props.highlightPath,
this.props.modelChanged,
this.props.pathClicked,
this.props.expandedPaths
this.props.expandedPaths,
this.props.computed,
this.props.isComputed
)}
</div>
)
this.props.path.pop()
return arrayItem
}
render() {
const { value, hasNext } = this.props
const { value, hasNext, isComputedParent } = this.props
const isExactHighlightPath =
this.props.highlightPath &&
String(this.props.highlightPath) === String(this.props.path)
Expand All @@ -341,6 +373,9 @@ class ArrayValue extends Component {
: 'inspector-array'
}
onClick={this.onExpandClick}
style={{
opacity: isComputedParent ? 0.5 : 1,
}}
>
{this.props.propertyKey ? this.props.propertyKey + ': ' : null}
<strong>{'[ '}</strong>
Expand All @@ -360,6 +395,9 @@ class ArrayValue extends Component {
? 'inspector-array inspector-highlight'
: 'inspector-array'
}
style={{
opacity: isComputedParent ? 0.5 : 1,
}}
>
<div onClick={this.onCollapseClick}>
{this.props.propertyKey}: <strong>{'[ '}</strong>
Expand Down Expand Up @@ -389,6 +427,9 @@ class ArrayValue extends Component {
? 'inspector-array inspector-highlight'
: 'inspector-array'
}
style={{
opacity: isComputedParent ? 0.5 : 1,
}}
>
<div onClick={this.onCollapseClick}>
<strong>{'[ '}</strong>
Expand Down Expand Up @@ -432,6 +473,9 @@ class Value extends Component {
}
}
onClick() {
if (this.props.isComputed) {
return
}
this.setState({
isEditing: !!this.context.options.canEdit,
})
Expand Down Expand Up @@ -501,6 +545,7 @@ class Value extends Component {
}
}
render() {
const { isComputedParent } = this.props
let className = 'inspector-string'
if (isNumber(this.props.value)) className = 'inspector-number'
if (isBoolean(this.props.value)) className = 'inspector-boolean'
Expand All @@ -511,6 +556,9 @@ class Value extends Component {
this.node = node
}}
className={className}
style={{
opacity: isComputedParent ? 0.5 : 1,
}}
>
{this.renderValue(this.props.value, this.props.hasNext)}
</div>
Expand Down Expand Up @@ -538,7 +586,9 @@ class Inspector extends Component {
this.props.path,
this.props.modelChanged,
this.props.pathClicked,
this.props.expandedPaths
this.props.expandedPaths,
this.props.computed,
false
)
}
}
Expand Down
2 changes: 2 additions & 0 deletions src/components/Debugger/Model/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export default connect(
currentPage: state`currentPage`,
useragent: state`useragent`,
model: state`model`,
computedState: state`computedState`,
path: state`currentMutationPath`,
pathClicked: signal`pathClicked`,
searchValue: state`searchValue`,
Expand Down Expand Up @@ -40,6 +41,7 @@ export default connect(
>
<Inspector
value={this.props.model}
computed={this.props.computedState || {}}
expanded
canEdit
path={
Expand Down
2 changes: 1 addition & 1 deletion src/components/Debugger/StateEffects/Updates/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function Updates(props) {
(currentWatchers, watcher) => {
if (watcher.type === 'View') {
currentWatchers.views.push(watcher)
} else if (watcher.type === 'Computed') {
} else if (watcher.type === 'Compute') {
currentWatchers.computeds.push(watcher)
} else if (watcher.type === 'Reaction') {
currentWatchers.reactions.push(watcher)
Expand Down
8 changes: 4 additions & 4 deletions src/components/Debugger/StateEffects/WatchedList/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,12 @@ export default function WatchedList(props) {
const paths = Object.keys(props.map)
.map(key => {
return {
path: `state.${key}`,
path: key,
watchers: props.map[key].reduce(
(currentWatchers, watcher) => {
if (watcher.type === 'View') {
currentWatchers.views.push(watcher)
} else if (watcher.type === 'Computed') {
} else if (watcher.type === 'Compute') {
currentWatchers.computeds.push(watcher)
} else if (watcher.type === 'Reaction') {
currentWatchers.reactions.push(watcher)
Expand All @@ -38,12 +38,12 @@ export default function WatchedList(props) {
.concat(
Object.keys(props.computedMap).map(key => {
return {
path: `computed.${key}`,
path: key,
watchers: props.computedMap[key].reduce(
(currentWatchers, watcher) => {
if (watcher.type === 'View') {
currentWatchers.views.push(watcher)
} else if (watcher.type === 'Computed') {
} else if (watcher.type === 'Compute') {
currentWatchers.computeds.push(watcher)
} else if (watcher.type === 'Reaction') {
currentWatchers.reactions.push(watcher)
Expand Down

0 comments on commit f3a0eb5

Please sign in to comment.