miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

chore(react): update library versions and update RTK generated code (#3226)

Browse Source
This commit is contained in:
Jack Hsu 2020-06-24 14:02:01 -04:00 committed by GitHub
parent 2193859525
commit c47480bbc8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 167 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/react/migrations.json
View File

@ -49,6 +49,11 @@
"version": "9.4.0-beta.1",
"description": "Migrate to new babel setup for greater flexibility",
"factory": "./src/migrations/update-9-4-0/babelrc-9-4-0"
},
"update-9.5.0": {
"version": "9.5.0-beta.1",
"description": "Update libraries",
"factory": "./src/migrations/update-9-5-0/update-9-5-0"
}
},
"packageJsonUpdates": {
@ -264,6 +269,43 @@
"alwaysAddToPackageJson": false
}
}
},
"9.5.0": {
"version": "9.5.0-beta.1",
"packages": {
"@types/react": {
"version": "16.9.38",
"alwaysAddToPackageJson": false
},
"styled-components": {
"version": "5.1.1",
"alwaysAddToPackageJson": false
},
"@emotion/core": {
"version": "10.0.28",
"alwaysAddToPackageJson": false
},
"@testing-library/react": {
"version": "10.4.1",
"alwaysAddToPackageJson": false
},
"@reduxjs/toolkit": {
"version": "1.4.0",
"alwaysAddToPackageJson": false
},
"eslint-plugin-import": {
"version": "2.21.2",
"alwaysAddToPackageJson": false
},
"eslint-plugin-a11y": {
"version": "6.3.1",
"alwaysAddToPackageJson": false
},
"eslint-plugin-react-hooks": {
"version": "4.0.4",
"alwaysAddToPackageJson": false
}
}
}
}
}

43
packages/react/src/migrations/update-9-5-0/update-9-5-0.spec.ts Normal file
View File

@ -0,0 +1,43 @@
import { Tree } from '@angular-devkit/schematics';
import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
import { readJsonInTree } from '@nrwl/workspace';
import * as path from 'path';
import { createEmptyWorkspace } from '@nrwl/workspace/testing';
describe('Update 9.5.0', () => {
let tree: Tree;
let schematicRunner: SchematicTestRunner;
beforeEach(async () => {
tree = Tree.empty();
tree = createEmptyWorkspace(tree);
schematicRunner = new SchematicTestRunner(
'@nrwl/react',
path.join(__dirname, '../../../migrations.json')
);
});
it(`should update libs`, async () => {
tree.overwrite(
'package.json',
JSON.stringify({
dependencies: {},
devDependencies: {
'@testing-library/react': '10.0.4',
},
})
);
tree = await schematicRunner
.runSchematicAsync('update-9.5.0', {}, tree)
.toPromise();
const packageJson = readJsonInTree(tree, '/package.json');
expect(packageJson).toMatchObject({
dependencies: {},
devDependencies: {
'@testing-library/react': '10.4.1',
},
});
});
});

13
packages/react/src/migrations/update-9-5-0/update-9-5-0.ts Normal file
View File

@ -0,0 +1,13 @@
import { chain, Rule } from '@angular-devkit/schematics';
import { formatFiles, updatePackagesInPackageJson } from '@nrwl/workspace';
import * as path from 'path';
export default function update(): Rule {
return chain([
updatePackagesInPackageJson(
path.join(__dirname, '../../../', 'migrations.json'),
'9.5.0'
),
formatFiles(),
]);
}

8
packages/react/src/schematics/redux/files/__directory__/__fileName__.slice.spec.ts__tmpl__
View File

@ -1,4 +1,4 @@
import { <%= propertyName %>Actions, <%= propertyName %>Adapter, <%= propertyName %>Reducer } from './<%= fileName %>.slice';
import { fetch<%= className %>, <%= propertyName %>Adapter, <%= propertyName %>Reducer } from './<%= fileName %>.slice';
describe('<%= propertyName %> reducer', () => {
it('should handle initial state', () => {
@ -13,7 +13,7 @@ describe('<%= propertyName %> reducer', () => {
it('should handle fetch<%= className %>s', () => {
let state = <%= propertyName %>Reducer(
undefined,
<%= propertyName %>Actions.fetch<%= className %>s.pending(null, null)
fetch<%= className %>.pending(null, null)
);
expect(state).toEqual(
@ -26,7 +26,7 @@ describe('<%= propertyName %> reducer', () => {
state = <%= propertyName %>Reducer(
state,
<%= propertyName %>Actions.fetch<%= className %>s.fulfilled([{ id: 1 }], null, null)
fetch<%= className %>.fulfilled([{ id: 1 }], null, null)
);
expect(state).toEqual(
@ -39,7 +39,7 @@ describe('<%= propertyName %> reducer', () => {
state = <%= propertyName %>Reducer(
state,
<%= propertyName %>Actions.fetch<%= className %>s.rejected(new Error('Uh oh'), null, null)
fetch<%= className %>.rejected(new Error('Uh oh'), null, null)
);
expect(state).toEqual(

64
packages/react/src/schematics/redux/files/__directory__/__fileName__.slice.ts__tmpl__
View File

@ -1,6 +1,7 @@
import {
createAsyncThunk,
createEntityAdapter,
createSelector,
createSlice,
EntityState,
PayloadAction
@ -25,8 +26,21 @@ export const <%= propertyName %>Adapter = createEntityAdapter<<%= className %>En
/**
* Export an effect using createAsyncThunk from
* the Redux Toolkit: https://redux-toolkit.js.org/api/createAsyncThunk
*
* e.g.
* ```
* import React, { useEffect } from 'react';
* import { useDispatch } from 'react-redux';
*
* // ...
*
* const dispatch = useDispatch();
* useEffect(() => {
* dispatch(fetch<%= className %>())
* }, [dispatch]);
* ```
*/
export const fetch<%= className %>s = createAsyncThunk(
export const fetch<%= className %> = createAsyncThunk(
'<%= propertyName %>/fetchStatus',
async (_, thunkAPI) => {
/**
@ -47,19 +61,20 @@ export const <%= propertyName %>Slice = createSlice({
name: <%= constantName %>_FEATURE_KEY,
initialState: initial<%= className %>State,
reducers: {
add<%= className %>: <%= propertyName %>Adapter.addOne,
remove<%= className %>: <%= propertyName %>Adapter.removeOne
add: <%= propertyName %>Adapter.addOne,
remove: <%= propertyName %>Adapter.removeOne
// ...
},
extraReducers: builder => {
builder.addCase(fetch<%= className %>s.pending, (state: <%= className %>State) => {
builder
.addCase(fetch<%= className %>.pending, (state: <%= className %>State) => {
state.loadingStatus = 'loading';
});
builder.addCase(fetch<%= className %>s.fulfilled, (state: <%= className %>State, action: PayloadAction<<%= className %>Entity[]>) => {
<%= propertyName %>Adapter.addMany(state, action.payload);
})
.addCase(fetch<%= className %>.fulfilled, (state: <%= className %>State, action: PayloadAction<<%= className %>Entity[]>) => {
<%= propertyName %>Adapter.setAll(state, action.payload);
state.loadingStatus = 'loaded';
});
builder.addCase(fetch<%= className %>s.rejected, (state: <%= className %>State, action) => {
})
.addCase(fetch<%= className %>.rejected, (state: <%= className %>State, action) => {
state.loadingStatus = 'error';
state.error = action.error.message;
});
@ -76,28 +91,39 @@ export const <%= propertyName %>Reducer = <%= propertyName %>Slice.reducer;
*
* e.g.
* ```
* import React, { useEffect } from 'react';
* import { useDispatch } from 'react-redux';
*
* // ...
*
* const dispatch = useDispatch();
* dispatch(<%= propertyName %>Actions.add<%= className %>([{ id: 1 }]));
* useEffect(() => {
* dispatch(<%= propertyName %>Actions.add({ id: 1 }))
* }, [dispatch]);
* ```
*
* See: https://react-redux.js.org/next/api/hooks#usedispatch
*/
export const <%= propertyName %>Actions = {
...<%= propertyName %>Slice.actions,
fetch<%= className %>s
};
export const <%= propertyName %>Actions = <%= propertyName %>Slice.actions;
/*
* Export selectors to query state. For use with the `useSelector` hook.
*
* e.g.
* ```
* const entities = useSelector(select<%= className %>Entities);
* import { useSelector } from 'react-redux';
*
* // ...
*
* const entities = useSelector(selectAll<%= className %>);
* ```
*
* See: https://react-redux.js.org/next/api/hooks#useselector
*/
export const <%= propertyName %>Selectors = {
get<%= className %>State: (rootState: unknown): <%= className %>State => rootState[<%= constantName %>_FEATURE_KEY],
...<%= propertyName %>Adapter.getSelectors()
};
const { selectAll, selectEntities } = <%= propertyName %>Adapter.getSelectors();
export const get<%= className %>State = (rootState: unknown): <%= className %>State => rootState[<%= constantName %>_FEATURE_KEY];
export const selectAll<%= className %> = createSelector(get<%= className %>State, selectAll);
export const select<%= className %>Entities = createSelector(get<%= className %>State, selectEntities);

9
packages/react/src/utils/ast-utils.ts
View File

@ -356,7 +356,7 @@ export function addReduxStoreToMain(
...addGlobal(
source,
sourcePath,
`import { configureStore } from '@reduxjs/toolkit';
`import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';`
),
new InsertChange(
@ -364,7 +364,12 @@ import { Provider } from 'react-redux';`
renderStmt.getStart(),
`
const store = configureStore({
reducer: {}
reducer: {},
// Additional middleware can be passed to this array
middleware: [...getDefaultMiddleware()],
devTools: process.env.NODE_ENV !== 'production',
// Optional Redux store enhancers
enhancers: [],
});
`

16
packages/react/src/utils/versions.ts
View File

@ -2,17 +2,17 @@ export const nxVersion = '*';
export const reactVersion = '16.13.1';
export const reactDomVersion = '16.13.1';
export const typesReactVersion = '16.9.35';
export const typesReactVersion = '16.9.38';
export const typesReactDomVersion = '16.9.8';
export const styledComponentsVersion = '5.1.0';
export const styledComponentsVersion = '5.1.1';
export const typesStyledComponentsVersion = '5.1.0';
export const reactIsVersion = '16.13.1';
export const typesReactIsVersion = '16.7.1';
export const emotionStyledVersion = '10.0.27';
export const emotionCoreVersion = '10.0.27';
export const emotionCoreVersion = '10.0.28';
export const emotionBabelPresetCssPropVersion = '10.0.27';
export const styledJsxVersion = '3.3.0';
@ -21,15 +21,15 @@ export const typesStyledJsxVersion = '2.2.8';
export const reactRouterDomVersion = '5.2.0';
export const typesReactRouterDomVersion = '5.1.5';
export const testingLibraryReactVersion = '10.0.4';
export const testingLibraryReactVersion = '10.4.1';
export const reduxjsToolkitVersion = '1.3.6';
export const reduxjsToolkitVersion = '1.4.0';
export const reactReduxVersion = '7.2.0';
export const typesReactReduxVersion = '7.1.9';
export const eslintPluginImportVersion = '2.20.2';
export const eslintPluginJsxA11yVersion = '6.2.3';
export const eslintPluginImportVersion = '2.21.2';
export const eslintPluginJsxA11yVersion = '6.3.1';
export const eslintPluginReactVersion = '7.20.0';
export const eslintPluginReactHooksVersion = '4.0.2';
export const eslintPluginReactHooksVersion = '4.0.4';
export const babelPluginStyledComponentsVersion = '1.10.7';