Skip to content

Commit

Permalink
Merge pull request #12 from rstgroup/react18
Browse files Browse the repository at this point in the history 
React18
  • Loading branch information
@mprzodala
mprzodala authored Apr 18, 2022
2 parents b2159e0 + 5e918e0 commit 4b7d420
Show file tree
Hide file tree
Showing 12 changed files with 97 additions and 129 deletions.
30 changes: 17 additions & 13 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
{
"name": "eventrix",
"version": "2.4.1",
"version": "2.4.1-rc.0",
"description": "A system for managing the state of the application based on the events broadcast in the application",
"main": "dist/index.js",
"repository": "https://github.com/rstgroup/eventrix",
"homepage": "https://eventrix.js.org",
"scripts": {
"test": "jest",
"test:watch": "jest --watch",
"test:clean": "jest --clearCache",
"build": "webpack --config webpack-prod.config.js --stats-error-details",
"coverage": "jest --coverage",
"coverage:report": "cat ./coverage/lcov.info | coveralls",
Expand All @@ -25,8 +26,9 @@
"license": "MIT",
"dependencies": {
"lodash": "^4.17.4",
"react": "^16.0.0 || ^17.0.0",
"react-dom": "^16.0.0 || ^17.0.0"
"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0",
"use-sync-external-store": "^1.0.0"
},
"devDependencies": {
"@babel/cli": "^7.7.0",
Expand All @@ -42,41 +44,43 @@
"@babel/plugin-transform-runtime": "^7.6.2",
"@babel/plugin-transform-typescript": "^7.14.6",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.7.1",
"@babel/preset-react": "^7.0.0",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@babel/preset-typescript": "^7.13.0",
"@babel/runtime": "^7.6.3",
"@babel/traverse": "^7.7.0",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@types/jest": "^26.0.23",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^12.1.15 || ^13.1.1",
"@types/jest": "^27.4.1",
"@types/lodash": "^4.14.170",
"@types/react": "^17.0.11",
"@types/react": "^17.0.11 || ^18.0.0",
"@types/use-sync-external-store": "0.0.3",
"@typescript-eslint/eslint-plugin": "^4.28.0",
"@typescript-eslint/parser": "^4.28.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^27.5.1",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"clean-webpack-plugin": "^4.0.0",
"coveralls": "^3.1.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^6.14.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^25.0.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"jest": "^24.9.0",
"jest": "^27.5.1",
"loader-utils": "^2.0.0",
"pre-commit": "^1.2.2",
"prettier": "^2.4.1",
"react-proptypes": "^1.0.0",
"ts-jest": "^27.0.3",
"ts-jest": "^27.1.4",
"ts-loader": "^9.2.3",
"typescript": "^4.2.4",
"webpack": "^5.31.2",
"webpack-cli": "^4.6.0"
},
"types": "./types/index.d.ts",
"jest": {
"testEnvironment": "jsdom",
"moduleFileExtensions": [
"ts",
"tsx",
Expand Down
1 change: 1 addition & 0 deletions src/react/context/EventrixProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { EventrixI } from '../../interfaces';

export interface EventrixProviderPropsI {
eventrix: EventrixI;
children: React.ReactNode;
}

const EventrixProvider: React.FC<EventrixProviderPropsI> = ({ eventrix, children }): JSX.Element => {
Expand Down
18 changes: 13 additions & 5 deletions src/react/decorators/eventrixState.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { render } from '@testing-library/react';
import React from 'react';
import { render, waitFor } from '@testing-library/react';
import EventrixProvider from '../context/EventrixProvider';
import Eventrix from '../../Eventrix';
import eventrixComponent from './eventrixComponent';
Expand All @@ -11,7 +11,12 @@ describe('eventrixState', () => {
class ItemComponent extends React.Component<any> {
render() {
const { fooBar }: any = this.state;
return <div data-testid="stateData">{fooBar}</div>;
return (
<div data-testid="stateData">
{fooBar === 'test' && <div data-testid="testData" />}
{fooBar}
</div>
);
}
}

Expand All @@ -29,6 +34,7 @@ describe('eventrixState', () => {
const { fooBar, componentState }: any = this.state;
return (
<div data-testid="stateData">
{fooBar === 'test' && <div data-testid="testData" />}
{fooBar} {componentState}
</div>
);
Expand All @@ -37,7 +43,7 @@ describe('eventrixState', () => {

const TestContainer = ({ eventrix, children }: any) => <EventrixProvider eventrix={eventrix}>{children}</EventrixProvider>;

it('should change component state when eventrix state changed', () => {
it('should change component state when eventrix state changed', async () => {
const eventrixInstance = new Eventrix({
foo: {
bar: 'empty',
Expand All @@ -51,10 +57,11 @@ describe('eventrixState', () => {
</TestContainer>,
);
eventrixInstance.stateManager.setState('foo.bar', 'test');
await waitFor(() => getByTestId('testData'));
expect(getByTestId('stateData').textContent).toEqual('test');
});

it('should change component state when eventrix state changed and component has own state', () => {
it('should change component state when eventrix state changed and component has own state', async () => {
const eventrixInstance = new Eventrix({
foo: {
bar: 'empty',
Expand All @@ -68,6 +75,7 @@ describe('eventrixState', () => {
</TestContainer>,
);
eventrixInstance.stateManager.setState('foo.bar', 'test');
await waitFor(() => getByTestId('testData'));
expect(getByTestId('stateData').textContent).toEqual('test test');
});
});
25 changes: 8 additions & 17 deletions src/react/hocs/withEventrixState.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
import React from 'react';
import { render } from '@testing-library/react';
import { render, waitFor } from '@testing-library/react';
import { EventrixProvider } from '../context';
import Eventrix from '../../Eventrix';
import withEventrixState from './withEventrixState';

describe('withEventrixState', () => {
const ComponentTestFoo = ({ foo = '' }: { foo: string }) => {
return (
<div>
<div data-testid="testFoo">{foo}</div>
</div>
);
return <div data-testid="testFoo">{!!foo && <div data-testid="testFooValue">{foo}</div>}</div>;
};

interface FooStateI {
Expand All @@ -19,11 +15,7 @@ describe('withEventrixState', () => {
const ComponentTestFooWS = withEventrixState<FooStateI>(ComponentTestFoo, ['foo']);

const ComponentTestBarFoo = ({ barFoo = '' }: { barFoo: string }) => {
return (
<div>
<div data-testid="testBarFoo">{barFoo}</div>
</div>
);
return <div data-testid="testBarFoo">{!!barFoo && <div data-testid="testBarFooValue">{barFoo}</div>}</div>;
};

interface BarFooStateI {
Expand All @@ -34,11 +26,7 @@ describe('withEventrixState', () => {
}));

const ComponentTestBarBarFoo = ({ barBarFoo = '' }: { barBarFoo: string }) => {
return (
<div>
<div data-testid="testBarBarFoo">{barBarFoo}</div>
</div>
);
return <div data-testid="testBarBarFoo">{!!barBarFoo && <div data-testid="testBarBarFooValue">{barBarFoo}</div>}</div>;
};
interface BarBarFooStateI {
barBarFoo: string;
Expand All @@ -49,7 +37,7 @@ describe('withEventrixState', () => {

const TestContainer = ({ eventrix, children }: any) => <EventrixProvider eventrix={eventrix}>{children}</EventrixProvider>;

it('should change state when eventrix state has changed', () => {
it('should change state when eventrix state has changed', async () => {
const initialState = {
foo: '',
bar: {
Expand All @@ -73,18 +61,21 @@ describe('withEventrixState', () => {
expect(getByTestId('testBarBarFoo').textContent).toEqual(initialState.bar.bar.foo);

eventrixInstance.stateManager.setState('foo', 'newFoo');
await waitFor(() => getByTestId('testFooValue'));

expect(getByTestId('testFoo').textContent).toEqual('newFoo');
expect(getByTestId('testBarFoo').textContent).toEqual(initialState.bar.foo);
expect(getByTestId('testBarBarFoo').textContent).toEqual(initialState.bar.bar.foo);

eventrixInstance.stateManager.setState('bar.foo', 'newBarFoo');
await waitFor(() => getByTestId('testBarFooValue'));

expect(getByTestId('testFoo').textContent).toEqual('newFoo');
expect(getByTestId('testBarFoo').textContent).toEqual('newBarFoo');
expect(getByTestId('testBarBarFoo').textContent).toEqual(initialState.bar.bar.foo);

eventrixInstance.stateManager.setState('bar.bar.foo', 'newBarBarFoo');
await waitFor(() => getByTestId('testBarBarFooValue'));

expect(getByTestId('testFoo').textContent).toEqual('newFoo');
expect(getByTestId('testBarFoo').textContent).toEqual('newBarFoo');
Expand Down
7 changes: 4 additions & 3 deletions src/react/hooks/useEventState.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import React from 'react';
import { render } from '@testing-library/react';
import { render, waitFor } from '@testing-library/react';
import { EventrixProvider } from '../context';
import Eventrix from '../../Eventrix';
import useEventState from './useEventState';

describe('useEventState', () => {
const ItemComponent = () => {
const [eventData] = useEventState<string>('testEvent');
return <div data-testid="eventData">{eventData}</div>;
return <div data-testid="eventData">{!!eventData && <div data-testid="eventDataValue">{eventData}</div>}</div>;
};
const TestContainer = ({ eventrix, children }: any) => <EventrixProvider eventrix={eventrix}>{children}</EventrixProvider>;

it('should save event data in state', () => {
it('should save event data in state', async () => {
const eventrixInstance = new Eventrix({});

const { getByTestId } = render(
Expand All @@ -20,6 +20,7 @@ describe('useEventState', () => {
</TestContainer>,
);
eventrixInstance.emit('testEvent', 'testData');
await waitFor(() => getByTestId('eventDataValue'));
expect(getByTestId('eventData').textContent).toEqual('testData');
});
});
2 changes: 1 addition & 1 deletion src/react/hooks/useEventState.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ function useEventState<EventStateI>(eventName: string): [EventStateI | undefined
const { eventrix } = useContext(EventrixContext);
const [eventState, setEventState] = useState<EventStateI>();

const listener = useCallback((data) => setEventState(data), [setEventState]);
const listener = useCallback((data: EventStateI) => setEventState(data), [setEventState]);

useEffect(() => {
eventrix.listen(eventName, listener);
Expand Down
31 changes: 15 additions & 16 deletions src/react/hooks/useEventrixState.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';
import { render } from '@testing-library/react';
import { render, waitFor } from '@testing-library/react';
import '@testing-library/jest-dom';
import { EventrixProvider } from '../context';
import Eventrix from '../../Eventrix';
import useEvent from './useEvent';
Expand All @@ -9,33 +10,27 @@ describe('useEventrixState', () => {
const OtherStateComponent = () => {
const [test, setTest] = useEventrixState<string>('test');
useEvent('changeTest', (newState) => setTest(newState));
return (
<div>
<div data-testid="testData">{test}</div>
</div>
);
return <div data-testid="testData">{!!test && <div data-testid="testDataValue">{test}</div>}</div>;
};

const FooInFooComponent = () => {
const [foo = {}] = useEventrixState<any>('foo');
return (
<div>
<div data-testid="fooDescription">{foo.description}</div>
</div>
<div data-testid="fooDescription">{!!foo.description && <div data-testid="fooDescriptionValue">{foo.description}</div>}</div>
);
};

const FooBarComponent = () => {
const [fooBar] = useEventrixState<string>('foo.bar');
return <div data-testid="fooBarData">{fooBar}</div>;
return <div data-testid="fooBarData">{!!fooBar && <div data-testid="fooBarDataValue">{fooBar}</div>}</div>;
};

const FooComponent = () => {
const [foo = {}, setFoo] = useEventrixState<any>('foo');
useEvent('changeFoo', (newState) => setFoo(newState));
return (
<div>
<div data-testid="fooTitle">{foo.title}</div>
<div data-testid="fooTitle">{!!foo.title && <div data-testid="fooTitleValue">{foo.title}</div>}</div>
<FooInFooComponent />
<FooBarComponent />
<OtherStateComponent />
Expand All @@ -45,14 +40,14 @@ describe('useEventrixState', () => {

const TestContainer = ({ eventrix, children }: any) => <EventrixProvider eventrix={eventrix}>{children}</EventrixProvider>;

it('should change state when eventrix state has changed', () => {
it('should change state when eventrix state has changed', async () => {
const initialState = {
foo: {
title: 'initialTitle',
description: 'initialDescription',
bar: 'initialBar',
title: '',
description: '',
bar: '',
},
test: 'initialTest',
test: '',
};
const eventrixInstance = new Eventrix(initialState);
const secondFooData = {
Expand All @@ -73,13 +68,17 @@ describe('useEventrixState', () => {
expect(getByTestId('testData').textContent).toEqual(initialState.test);

eventrixInstance.emit('changeTest', secondTestData);
await waitFor(() => getByTestId('testDataValue'));

expect(getByTestId('fooTitle').textContent).toEqual(initialState.foo.title);
expect(getByTestId('fooDescription').textContent).toEqual(initialState.foo.description);
expect(getByTestId('fooBarData').textContent).toEqual(initialState.foo.bar);
expect(getByTestId('testData').textContent).toEqual(secondTestData);

eventrixInstance.emit('changeFoo', secondFooData);
await waitFor(() => getByTestId('fooTitleValue'));
await waitFor(() => getByTestId('fooDescriptionValue'));
await waitFor(() => getByTestId('fooBarDataValue'));

expect(getByTestId('fooTitle').textContent).toEqual(secondFooData.title);
expect(getByTestId('fooDescription').textContent).toEqual(secondFooData.description);
Expand Down
2 changes: 1 addition & 1 deletion src/react/hooks/useEventrixState.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ function useEventrixState<StateI>(stateName: string): [StateI, SetStateI<StateI>
const onSetEventrixState = useCallback(() => setState(eventrix.getState(stateName)), [setState, stateName]);

const setEventrixState = useCallback(
(value) => {
(value: StateI) => {
eventrix.emit('setState', { stateName, value });
},
[eventrix.emit, stateName],
Expand Down
Loading

0 comments on commit 4b7d420

Please sign in to comment.