Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(react): update @types/react and other packages #9767

Merged
merged 1 commit into from Apr 12, 2022
Merged

feat(react): update @types/react and other packages #9767

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
25 changes: 3 additions & 22 deletions e2e/react/src/react.test.ts
View file
Open in desktop
Expand Up @@ -87,29 +87,10 @@ describe('React Applications', () => {
const appName = uniq('app');
const libName = uniq('lib');

runCLI(`generate @nrwl/react:app ${appName} --no-interactive`);
runCLI(`generate @nrwl/react:lib ${libName} --no-interactive`);
runCLI(`generate @nrwl/react:app ${appName} --no-interactive --js`);
runCLI(`generate @nrwl/react:lib ${libName} --no-interactive --js`);

renameFile(`apps/${appName}/src/main.tsx`, `apps/${appName}/src/main.jsx`);
renameFile(
`apps/${appName}/src/app/app.tsx`,
`apps/${appName}/src/app/app.jsx`
);
renameFile(
`apps/${appName}/src/app/app.spec.tsx`,
`apps/${appName}/src/app/app.spec.jsx`
);
renameFile(
`apps/${appName}/src/polyfills.ts`,
`apps/${appName}/src/polyfills.js`
);
updateProjectConfig(appName, (config) => {
config.targets.build.options.main = `apps/${appName}/src/main.jsx`;
config.targets.build.options.polyfills = `apps/${appName}/src/polyfills.js`;
return config;
});

const mainPath = `apps/${appName}/src/main.jsx`;
const mainPath = `apps/${appName}/src/main.js`;
updateFile(
mainPath,
`import '@${proj}/${libName}';\n${readFile(mainPath)}`
Expand Down
37 changes: 37 additions & 0 deletions packages/react/migrations.json
View file
Open in desktop
Expand Up @@ -287,6 +287,43 @@
"alwaysAddToPackageJson": false
}
}
},
"13.10.1": {
"version": "13.10.1-beta.1",
"packages": {
"@types/react": {
"version": "18.0.0",
"alwaysAddToPackageJson": false
},
"@types/react-dom": {
"version": "18.0.0",
"alwaysAddToPackageJson": false
},
"@types/styled-components": {
"version": "5.1.25",
"alwaysAddToPackageJson": false
},
"@emotion/react": {
"version": "11.9.0",
"alwaysAddToPackageJson": false
},
"@testing-library/react": {
"version": "13.0.0",
"alwaysAddToPackageJson": false
},
"@reduxjs/toolkit": {
"version": "1.8.1",
"alwaysAddToPackageJson": false
},
"react-redux": {
"version": "7.2.8",
"alwaysAddToPackageJson": false
},
"eslint-plugin-import": {
"version": "2.26.0",
"alwaysAddToPackageJson": false
}
}
}
}
}
7 changes: 5 additions & 2 deletions packages/react/src/generators/application/files/common/src/main.tsx__tmpl__
View file
Open in desktop
@@ -1,7 +1,10 @@
<% if (strict) { %>import { StrictMode } from 'react';<% } %>
import * as ReactDOM from 'react-dom';
import * as ReactDOMClient from 'react-dom/client';
<% if (routing) { %>import { BrowserRouter } from 'react-router-dom';<% } %>

import App from './app/<%= fileName %>';

ReactDOM.render(<% if (strict) { %><StrictMode><% } %><% if (routing) { %><BrowserRouter><% } %><App /><% if (routing) { %></BrowserRouter><% } %><% if (strict) { %></StrictMode><% } %>, document.getElementById('root'));
const root = ReactDOMClient.createRoot(document.getElementById('root') as HTMLElement);
root.render(
<% if (strict) { %><StrictMode><% } %><% if (routing) { %><BrowserRouter><% } %><App /><% if (routing) { %></BrowserRouter><% } %><% if (strict) { %></StrictMode><% } %>
);
21 changes: 20 additions & 1 deletion packages/react/src/utils/ast-utils.spec.ts
View file
Open in desktop
Expand Up @@ -219,7 +219,7 @@ describe('findMainRenderStatement', () => {
tree = createTreeWithEmptyWorkspace();
});

it('should return render(...)', () => {
it('should return ReactDOM.render(...)', () => {
const sourceCode = `
import React from 'react';
import ReactDOM from 'react-dom';
Expand All @@ -237,6 +237,25 @@ ReactDOM.render(<div/>, document.getElementById('root'));
expect(node).toBeTruthy();
});

it('should return root.render(...)', () => {
const sourceCode = `
import React from 'react';
import ReactDOMClient from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<div/>);
`;
tree.write('/main.tsx', sourceCode);
const source = ts.createSourceFile(
'/main.tsx',
sourceCode,
ts.ScriptTarget.Latest,
true
);

const node = utils.findMainRenderStatement(source);
expect(node).toBeTruthy();
});

it('should return render(...)', () => {
const sourceCode = `
import React from 'react';
Expand Down
12 changes: 11 additions & 1 deletion packages/react/src/utils/ast-utils.ts
View file
Open in desktop
Expand Up @@ -43,13 +43,23 @@ export function findMainRenderStatement(

for (const expr of calls) {
const inner = expr.expression;
// React 17 and below
if (
ts.isPropertyAccessExpression(inner) &&
/ReactDOM/i.test(inner.expression.getText()) &&
inner.name.getText() === 'render'
) {
return expr;
}

// React 18
if (
ts.isPropertyAccessExpression(inner) &&
/root/.test(inner.expression.getText()) &&
inner.name.getText() === 'render'
) {
return expr;
}
}

// 2. Try to find render from 'react-dom'.
Expand Down Expand Up @@ -358,7 +368,7 @@ export function addReduxStoreToMain(
): StringChange[] {
const renderStmt = findMainRenderStatement(source);
if (!renderStmt) {
logger.warn(`Could not find ReactDOM.render in ${sourcePath}`);
logger.warn(`Could not find render(...) in ${sourcePath}`);
return [];
}
const jsx = renderStmt.arguments[0];
Expand Down
16 changes: 8 additions & 8 deletions packages/react/src/utils/versions.ts
View file
Open in desktop
Expand Up @@ -3,30 +3,30 @@ export const nxVersion = '*';
export const reactVersion = '18.0.0';
export const reactDomVersion = '18.0.0';
export const reactIsVersion = '18.0.0';
export const typesReactVersion = '17.0.43';
export const typesReactDomVersion = '17.0.14';
export const typesReactVersion = '18.0.0';
export const typesReactDomVersion = '18.0.0';
export const typesReactIsVersion = '17.0.3';

export const styledComponentsVersion = '5.3.5';
export const typesStyledComponentsVersion = '5.1.24';
export const typesStyledComponentsVersion = '5.1.25';

export const emotionStyledVersion = '11.8.1';
export const emotionReactVersion = '11.8.2';
export const emotionReactVersion = '11.9.0';
export const emotionBabelPlugin = '11.7.2';

export const styledJsxVersion = '5.0.2';

export const reactRouterDomVersion = '5.3.0';
export const typesReactRouterDomVersion = '5.3.3';

export const testingLibraryReactVersion = '12.1.4';
export const testingLibraryReactVersion = '13.0.0';
export const testingLibraryReactHooksVersion = '7.0.2';

export const reduxjsToolkitVersion = '1.8.0';
export const reactReduxVersion = '7.2.6';
export const reduxjsToolkitVersion = '1.8.1';
export const reactReduxVersion = '7.2.8';
export const reactTestRendererVersion = '18.0.0';

export const eslintPluginImportVersion = '2.25.4';
export const eslintPluginImportVersion = '2.26.0';
export const eslintPluginJsxA11yVersion = '6.5.1';
export const eslintPluginReactVersion = '7.29.4';
export const eslintPluginReactHooksVersion = '4.4.0';
Expand Down