Skip to content
This repository has been archived by the owner on Feb 3, 2021. It is now read-only.

Commit

Permalink
first realesation few instances
Browse files Browse the repository at this point in the history
  • Loading branch information
Edgar committed Apr 12, 2019
1 parent 7f20ddb commit a16476e
Show file tree
Hide file tree
Showing 4 changed files with 203 additions and 24 deletions.
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

54 changes: 41 additions & 13 deletions src/Comparator.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,55 @@
class Comparator {
constructor(logger) {
this._renderCount = 0;
this._logger = logger;
this._instances = {};
}

this._prevProps = null;
this._prevState = null;
_registration(id) {
this._instances[id] = {
id,
renderCount: 0,
prevProps: null,
prevState: null,
};
}

this._logger = logger;
_saveCall(props, state) {
const id = this._getInstanceId(props);
const instance = this._getInstance(id);

instance.renderCount += 1;
instance.prevState = state;
instance.prevProps = props;
}

_getInstanceId(props) {
return props.clearRenderId || null;
}

_getInstance(id) {
return this._instances[id];
}

processChanges(nextProps, nextState) {
const isFirstRender = !this._renderCount;
if (isFirstRender) {
this._logger.printInit();
const id = this._getInstanceId(nextProps);
const instance = this._getInstance(id);

if (!instance) {
this._registration(id);
this._logger.printInit(id);
} else {
const propsChanges = this._shallowCompare(this._prevProps, nextProps);
const stateChanges = this._shallowCompare(this._prevState, nextState);
const propsChanges = this._shallowCompare(instance.prevProps, nextProps);
const stateChanges = this._shallowCompare(instance.prevState, nextState);

this._logger.printComparisonsResults(this._renderCount, propsChanges, stateChanges);
this._logger.printComparisonsResults(
id,
instance.renderCount,
propsChanges,
stateChanges
);
}

this._renderCount += 1;
this._prevState = nextState;
this._prevProps = nextProps;
this._saveCall(nextProps, nextState);
}

_shallowCompare(oldObj = {}, nextObj = {}) {
Expand Down
142 changes: 142 additions & 0 deletions src/__tests__/patch.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ test('Checkbox, detect changed state', () => {
expect(fakeLogger.printInit.mock.calls.length).toBe(1);
expect(fakeLogger.printComparisonsResults.mock.calls.length).toBe(1);
expect(fakeLogger.printComparisonsResults.mock.calls[0]).toEqual([
null,
1,
[],
[{ key: 'isChecked', nextValue: true, oldValue: false, type: 'boolean' }],
]);
Expand All @@ -68,13 +70,83 @@ test('Checkbox, detect changed props', () => {
expect(fakeLogger.printInit.mock.calls.length).toBe(1);
expect(fakeLogger.printComparisonsResults.mock.calls.length).toBe(1);
expect(fakeLogger.printComparisonsResults.mock.calls[0]).toEqual([
null,
1,
[{ key: 'title', type: 'string', oldValue: 'ping', nextValue: 'pong' }],
[],
]);

expect(getByTestId('props-title').textContent).toBe('pong');
});

test('Checkbox, should separate instances, detect changed props', () => {
// Arrange
const fakeLogger = {
printInit: jest.fn(),
printComparisonsResults: jest.fn(),
};
const comparator = new Comparator(fakeLogger);
const PatchedCheckbox = patch(Checkbox, comparator);

// Act
const { rerender } = render(
<React.Fragment>
<PatchedCheckbox {...defaultProps} key="1" clearRenderId="1" />
<PatchedCheckbox {...defaultProps} key="2" clearRenderId="2" />
</React.Fragment>
);

rerender(
<React.Fragment>
<PatchedCheckbox
{...defaultProps}
key="1"
title="pong"
clearRenderId="1"
/>
<PatchedCheckbox
{...defaultProps}
key="2"
title="bong"
clearRenderId="2"
/>
</React.Fragment>
);

// Assert
expect(fakeLogger.printInit.mock.calls.length).toBe(2);
expect(fakeLogger.printInit.mock.calls[0]).toEqual(['1']);
expect(fakeLogger.printInit.mock.calls[1]).toEqual(['2']);

expect(fakeLogger.printComparisonsResults.mock.calls.length).toBe(2);
expect(fakeLogger.printComparisonsResults.mock.calls[0]).toEqual([
'1',
1,
[
{
key: 'title',
type: 'string',
oldValue: 'ping',
nextValue: 'pong',
},
],
[],
]);
expect(fakeLogger.printComparisonsResults.mock.calls[1]).toEqual([
'2',
1,
[
{
key: 'title',
type: 'string',
oldValue: 'ping',
nextValue: 'bong',
},
],
[],
]);
});

test('Counter, detect changed props re-render', () => {
// Arrange
const fakeLogger = {
Expand All @@ -95,6 +167,8 @@ test('Counter, detect changed props re-render', () => {
expect(fakeLogger.printInit.mock.calls.length).toBe(1);
expect(fakeLogger.printComparisonsResults.mock.calls.length).toBe(1);
expect(fakeLogger.printComparisonsResults.mock.calls[0]).toEqual([
null,
1,
[{ key: 'title', type: 'string', oldValue: 'ping', nextValue: 'pong' }],
[],
]);
Expand Down Expand Up @@ -122,6 +196,72 @@ test('Counter, used hooks', () => {
expect(fakeLogger.printComparisonsResults.mock.calls.length).toBe(1);
});

test('Counter, should separate instances, detect changed props', () => {
// Arrange
const fakeLogger = {
printInit: jest.fn(),
printComparisonsResults: jest.fn(),
};
const comparator = new Comparator(fakeLogger);
const PatchedCounter = patch(Counter, comparator);

// Act
const { rerender } = render(
<React.Fragment>
<PatchedCounter {...defaultProps} key="1" clearRenderId="1" />
<PatchedCounter {...defaultProps} key="2" clearRenderId="2" />
</React.Fragment>
);

rerender(
<React.Fragment>
<PatchedCounter
{...defaultProps}
key="1"
title="pong"
clearRenderId="1"
/>
<PatchedCounter
{...defaultProps}
key="2"
title="bong"
clearRenderId="2"
/>
</React.Fragment>
);

// Assert
expect(fakeLogger.printInit.mock.calls.length).toBe(2);
expect(fakeLogger.printComparisonsResults.mock.calls.length).toBe(2);

expect(fakeLogger.printComparisonsResults.mock.calls[0]).toEqual([
'1',
1,
[
{
key: 'title',
type: 'string',
oldValue: 'ping',
nextValue: 'pong',
},
],
[],
]);
expect(fakeLogger.printComparisonsResults.mock.calls[1]).toEqual([
'2',
1,
[
{
key: 'title',
type: 'string',
oldValue: 'ping',
nextValue: 'bong',
},
],
[],
]);
});

test('Input, detect changed props re-render', () => {
// Arrange
const fakeLogger = {
Expand All @@ -147,6 +287,8 @@ test('Input, detect changed props re-render', () => {
expect(fakeLogger.printInit.mock.calls.length).toBe(1);
expect(fakeLogger.printComparisonsResults.mock.calls.length).toBe(1);
expect(fakeLogger.printComparisonsResults.mock.calls[0]).toEqual([
null,
1,
[{ key: 'value', type: 'string', oldValue: '', nextValue: 'i type ...' }],
[],
]);
Expand Down
29 changes: 19 additions & 10 deletions src/logger.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,25 @@ class Logger {
this._log = log;
}

printInit() {
_getComponentLabel(id) {
const componentName = this._componentName;

if (!id) {
return componentName;
}

return componentName + ` [id: ${id}]`;
}

printInit(id) {
const componentLabel = this._getComponentLabel(id);

this._log.log(
'%c[clear-render] init for',
'color: #848d95;',
this._componentName
);
this._log.log(
'%c[clear-render] render',
'color: #848d95;',
this._componentName
componentLabel
);
this._log.log('%c[clear-render] render', 'color: #848d95;', componentLabel);
}

_printChange(change) {
Expand All @@ -39,11 +47,13 @@ class Logger {
}
}

printComparisonsResults(renderCount, propsChanges, stateChanges) {
printComparisonsResults(id, renderCount, propsChanges, stateChanges) {
const componentLabel = this._getComponentLabel(id);

this._log.group(
`%c[clear-render] re-render #${renderCount}`,
'color: #848d95;',
this._componentName
componentLabel
);
this._printComparisonResult('props', propsChanges);
this._printComparisonResult('state', stateChanges);
Expand All @@ -63,7 +73,6 @@ class Logger {
changes.forEach(this._printChange.bind(this));
this._log.groupEnd();
}

}

export default Logger;

0 comments on commit a16476e

Please sign in to comment.