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

fix(react): prevent generating empty props since setting strict in tsconfig is not compatible with it (#26428)

Browse Source 
This PR updates the React components so that interface for props is not
generated. Some components don't have them, and users know how to add
them if needed. This makes the generated component pass type checking if
`strict: true` is used in tsconfig.

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #
This commit is contained in:
Jack Hsu 2024-06-06 16:40:07 -04:00 committed by GitHub
parent cc023c91f9
commit ec5461fa85
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 13 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/next/src/generators/page/page.spec.ts
View File

@ -56,7 +56,6 @@ describe('component', () => {
const content = tree
.read('my-app/pages/posts/[dynamic]/index.tsx')
.toString();
expect(content).toMatch(/DynamicProps/);
});
});
@ -97,7 +96,6 @@ describe('component', () => {
const content = tree
.read(`${appRouterProjectName}/app/posts/[dynamic]/page.tsx`)
.toString();
expect(content).toMatch(/DynamicProps/);
});
});
});

33
packages/react/src/generators/component-test/__snapshots__/component-test.spec.ts.snap
View File

@ -64,19 +64,12 @@ describe(AnotherCmp2.name, () => {
exports[`componentTestGenerator multiple components per file should handle no props 1`] = `
"import * as React from 'react'
import SomeLib, { SomeLibProps, AnotherCmp } from './some-lib'
import SomeLib, { AnotherCmp } from './some-lib'
describe(SomeLib.name, () => {
let props: SomeLibProps;
beforeEach(() => {
props = {
}
})
it('renders', () => {
cy.mount(<SomeLib {...props}/>)
cy.mount(<SomeLib />)
})
})
@ -91,19 +84,12 @@ describe(AnotherCmp.name, () => {
exports[`componentTestGenerator multiple components per file should handle props 1`] = `
"import * as React from 'react'
import SomeLib, { SomeLibProps, AnotherCmpProps, AnotherCmp } from './some-lib'
import SomeLib, { AnotherCmpProps, AnotherCmp } from './some-lib'
describe(SomeLib.name, () => {
let props: SomeLibProps;
beforeEach(() => {
props = {
}
})
it('renders', () => {
cy.mount(<SomeLib {...props}/>)
cy.mount(<SomeLib />)
})
})
@ -179,19 +165,12 @@ describe(AnotherCmp.name, () => {
exports[`componentTestGenerator single component per file should handle no props 1`] = `
"import * as React from 'react'
import SomeLib, { SomeLibProps } from './some-lib'
import SomeLib from './some-lib'
describe(SomeLib.name, () => {
let props: SomeLibProps;
beforeEach(() => {
props = {
}
})
it('renders', () => {
cy.mount(<SomeLib {...props}/>)
cy.mount(<SomeLib />)
})
})

10
packages/react/src/generators/component/files/__fileName__.tsx__tmpl__
View File

@ -23,10 +23,6 @@ import { Route, Link } from 'react-router-dom';
var extras = '';
} %>
/* eslint-disable-next-line */
export interface <%= className %>Props {
}
<% if (styledModule && styledModule !== 'styled-jsx') { %>
const Styled<%= className %> = styled.div`
color: pink;
@ -34,7 +30,7 @@ const Styled<%= className %> = styled.div`
<% }%>
<% if(!isNextPage) { %>
<% if (classComponent) { %>
export class <%= className %> extends Component<<%= className %>Props> {
export class <%= className %> extends Component<{}> {
override render() {
return (
<<%= wrapper %><%- extras %>>
@ -51,7 +47,7 @@ const Styled<%= className %> = styled.div`
}
}
<% } else { %>
export function <%= className %>(props: <%= className %>Props) {
export function <%= className %>() {
return (
<<%= wrapper %><%- extras %>>
<% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>
@ -69,7 +65,7 @@ const Styled<%= className %> = styled.div`
export default <%= className %>;
<% } else { %>
export default function <%= className %>(props: <%= className %>Props) {
export default function <%= className %>() {
return (
<<%= wrapper %><%- extras %>>
<% if (styledModule === 'styled-jsx') { %><style jsx>{`div { color: pink; }`}</style><% } %>

20
packages/react/src/generators/cypress-component-configuration/__snapshots__/cypress-component-configuration.spec.ts.snap
View File

@ -66,17 +66,11 @@ describe(AnotherCmp.name, () => {
exports[`React:CypressComponentTestConfiguration should generate tests for existing tsx components 1`] = `
"import * as React from 'react';
import SomeLib, { SomeLibProps } from './some-lib';
import SomeLib from './some-lib';
describe(SomeLib.name, () => {
let props: SomeLibProps;
beforeEach(() => {
props = {};
});
it('renders', () => {
cy.mount(<SomeLib {...props} />);
cy.mount(<SomeLib />);
});
});
"
@ -84,17 +78,11 @@ describe(SomeLib.name, () => {
exports[`React:CypressComponentTestConfiguration should generate tests for existing tsx components 2`] = `
"import * as React from 'react';
import AnotherCmp, { AnotherCmpProps } from './another-cmp';
import AnotherCmp from './another-cmp';
describe(AnotherCmp.name, () => {
let props: AnotherCmpProps;
beforeEach(() => {
props = {};
});
it('renders', () => {
cy.mount(<AnotherCmp {...props} />);
cy.mount(<AnotherCmp />);
});
});
"