diff --git a/src/generators/dom/index.js b/src/generators/dom/index.js index 8d4e18b488..233616e40f 100644 --- a/src/generators/dom/index.js +++ b/src/generators/dom/index.js @@ -245,22 +245,23 @@ export default function dom ( parsed, source, options ) { if ( computations.length ) { const builder = new CodeBuilder(); + const differs = generator.helper( 'differs' ); computations.forEach( ({ key, deps }) => { builder.addBlock( deindent` - if ( isInitial || ${deps.map( dep => `( '${dep}' in newState && typeof state.${dep} === 'object' || state.${dep} !== oldState.${dep} )` ).join( ' || ' )} ) { + if ( isInitial || ${deps.map( dep => `( '${dep}' in newState && ${differs}( state.${dep}, oldState.${dep} ) )` ).join( ' || ' )} ) { state.${key} = newState.${key} = ${generator.alias( 'template' )}.computed.${key}( ${deps.map( dep => `state.${dep}` ).join( ', ' )} ); } ` ); }); builders.main.addBlock( deindent` - function ${generator.alias( 'applyComputations' )} ( state, newState, oldState, isInitial ) { + function ${generator.alias( 'recompute' )} ( state, newState, oldState, isInitial ) { ${builder} } ` ); - builders._set.addLine( `${generator.alias( 'applyComputations' )}( this._state, newState, oldState, false )` ); + builders._set.addLine( `${generator.alias( 'recompute' )}( this._state, newState, oldState, false )` ); } // TODO is the `if` necessary? @@ -348,7 +349,7 @@ export default function dom ( parsed, source, options ) { if ( templateProperties.computed ) { constructorBlock.addLine( - `${generator.alias( 'applyComputations' )}( this._state, this._state, {}, true );` + `${generator.alias( 'recompute' )}( this._state, this._state, {}, true );` ); } diff --git a/src/shared/index.js b/src/shared/index.js index 7f76df1b45..529435821b 100644 --- a/src/shared/index.js +++ b/src/shared/index.js @@ -3,6 +3,10 @@ export * from './methods.js'; export function noop () {} +export function differs ( a, b ) { + return ( a !== b ) || ( a && ( typeof a === 'object' ) || ( typeof a === 'function' ) ); +} + export function dispatchObservers ( component, group, newState, oldState ) { for ( var key in group ) { if ( !( key in newState ) ) continue; diff --git a/test/generator/samples/computed-values-function-dependency/_config.js b/test/generator/samples/computed-values-function-dependency/_config.js new file mode 100644 index 0000000000..38b716b4d7 --- /dev/null +++ b/test/generator/samples/computed-values-function-dependency/_config.js @@ -0,0 +1,10 @@ +export default { + html: '

2

', + + test ( assert, component, target ) { + component.set({ y: 2 }); + assert.equal( component.get( 'x' ), 4 ); + assert.equal( target.innerHTML, '

4

' ); + component.destroy(); + } +}; diff --git a/test/generator/samples/computed-values-function-dependency/main.html b/test/generator/samples/computed-values-function-dependency/main.html new file mode 100644 index 0000000000..d385bf6da8 --- /dev/null +++ b/test/generator/samples/computed-values-function-dependency/main.html @@ -0,0 +1,28 @@ +

{{x}}

+ + \ No newline at end of file