Skip to content

Commit

Permalink
fix(react): add typings to types instead of files (#18501)
Browse files Browse the repository at this point in the history
  • Loading branch information
ndcunningham committed Aug 7, 2023
1 parent e57d42c commit 85f4737
Show file tree
Hide file tree
Showing 10 changed files with 140 additions and 49 deletions.
13 changes: 3 additions & 10 deletions packages/next/src/generators/library/library.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,17 +29,10 @@ describe('next library', () => {
...baseOptions,
name: 'myLib',
});
const tsconfigFiles = readJson(
appTree,
'libs/my-lib/tsconfig.lib.json'
).files;
const tsconfigTypes = readJson(appTree, 'libs/my-lib/tsconfig.lib.json')
.compilerOptions.types;

expect(tsconfigFiles).toContain(
'../../node_modules/@nx/next/typings/image.d.ts'
);
expect(tsconfigFiles).not.toContain(
'../../node_modules/@nx/react/typings/image.d.ts'
);
expect(tsconfigTypes).toContain('@nx/next/typings/image.d.ts');
});

it('should add jsxImportSource in tsconfig.json for @emotion/styled', async () => {
Expand Down
18 changes: 5 additions & 13 deletions packages/next/src/generators/library/library.ts
Original file line number Diff line number Diff line change
Expand Up @@ -86,18 +86,6 @@ export async function libraryGenerator(host: Tree, rawOptions: Schema) {
host,
joinPathFragments(options.projectRoot, 'tsconfig.lib.json'),
(json) => {
if (!json.files) {
json.files = [];
}
json.files = json.files.map((path: string) => {
if (path.endsWith('react/typings/image.d.ts')) {
return path.replace(
'@nx/react/typings/image.d.ts',
'@nx/next/typings/image.d.ts'
);
}
return path;
});
if (!json.compilerOptions) {
json.compilerOptions = {
types: [],
Expand All @@ -106,7 +94,11 @@ export async function libraryGenerator(host: Tree, rawOptions: Schema) {
if (!json.compilerOptions.types) {
json.compilerOptions.types = [];
}
json.compilerOptions.types.push('next');
json.compilerOptions.types = [
...json.compilerOptions.types,
'next',
'@nx/next/typings/image.d.ts',
];
return json;
}
);
Expand Down
6 changes: 6 additions & 0 deletions packages/react/migrations.json
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,12 @@
"version": "16.7.0-beta.2",
"description": "Add @babel/core to package.json if @babel/preset-react is present",
"implementation": "./src/migrations/update-16-7-0/add-babel-core"
},
"update-16-7-0-add-typings": {
"cli": "nx",
"version": "16.7.0-beta.2",
"description": "Add @nx/react types to tsconfig types array",
"implementation": "./src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings"
}
},
"packageJsonUpdates": {
Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/generators/application/application.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@ describe('app', () => {
const tsconfigApp = readJson(appTree, 'apps/my-app/tsconfig.app.json');
expect(tsconfigApp.compilerOptions.types).toEqual([
'node',
'@nx/react/typings/cssmodule.d.ts',
'@nx/react/typings/image.d.ts',
'vite/client',
]);
const tsconfigSpec = readJson(appTree, 'apps/my-app/tsconfig.spec.json');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "<%= offsetFromRoot %>dist/out-tsc",
"types": ["node"]
"types": [
"node",
<% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
"@nx/react/typings/cssmodule.d.ts",
"@nx/react/typings/image.d.ts"
]
},
"files": [
<% if (style === 'styled-jsx') { %>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<% } %>
"<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
"<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
],
"exclude": ["jest.config.ts","src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
"include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "<%= offsetFromRoot %>dist/out-tsc",
"types": ["node"]
"types": [
"node",
<% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
"@nx/react/typings/cssmodule.d.ts",
"@nx/react/typings/image.d.ts"
]
},
"files": [
<% if (style === 'styled-jsx') { %>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<% } %>
"<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
"<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
],
"exclude": ["src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
"include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "<%= offsetFromRoot %>dist/out-tsc",
"types": ["node"]
"types": [
"node",
<% if (style === 'styled-jsx') { %>"@nx/react/typings/styled-jsx.d.ts",<% } %>
"@nx/react/typings/cssmodule.d.ts",
"@nx/react/typings/image.d.ts"
]
},
"files": [
<% if (style === 'styled-jsx') { %>"<%= offsetFromRoot %>node_modules/@nx/react/typings/styled-jsx.d.ts",<% } %>
"<%= offsetFromRoot %>node_modules/@nx/react/typings/cssmodule.d.ts",
"<%= offsetFromRoot %>node_modules/@nx/react/typings/image.d.ts"
],
"exclude": ["jest.config.ts","src/**/*.spec.ts", "src/**/*.test.ts", "src/**/*.spec.tsx", "src/**/*.test.tsx", "src/**/*.spec.js", "src/**/*.test.js", "src/**/*.spec.jsx", "src/**/*.test.jsx"],
"include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
}
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,15 @@ export function updateSpecConfig(host: Tree, options: NormalizedSchema) {
}

updateJson(host, `${options.appProjectRoot}/tsconfig.spec.json`, (json) => {
const offset = offsetFromRoot(options.appProjectRoot);
json.files = [
`${offset}node_modules/@nx/react/typings/cssmodule.d.ts`,
`${offset}node_modules/@nx/react/typings/image.d.ts`,
];
json.types = json.types || [];
if (options.style === 'styled-jsx') {
json.files.unshift(
`${offset}node_modules/@nx/react/typings/styled-jsx.d.ts`
);
json.types.push('@nx/react/typings/styled-jsx.d.ts');
}
json.types = [
...json.types,
'@nx/react/typings/cssmodule.d.ts',
'@nx/react/typings/image.d.ts',
];
return json;
});

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { Tree, addProjectConfiguration } from '@nx/devkit';
import { createTreeWithEmptyWorkspace } from 'nx/src/devkit-testing-exports';
import addTypings from './update-16-7-0-add-typings';

describe('Add typings to react projects', () => {
let tree: Tree;

beforeEach(() => {
tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
});

it('should update tsconfig to include react typings', async () => {
tree.write(
'package.json',
JSON.stringify({
dependencies: {},
devDependencies: {},
})
);

addProjectConfiguration(tree, 'myapp', {
root: 'myapp',
targets: {
build: {
executor: '@nx/webpack:webpack',
},
},
});
tree.write(
'myapp/tsconfig.app.json',
JSON.stringify({
compilerOptions: {},
})
);

await addTypings(tree);
const tsconfigTypes = JSON.parse(
tree.read('myapp/tsconfig.app.json', 'utf-8')
);

expect(tsconfigTypes.compilerOptions.types).toContain(
'@nx/react/typings/cssmodule.d.ts'
);
expect(tsconfigTypes.compilerOptions.types).toContain(
'@nx/react/typings/image.d.ts'
);
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import {
Tree,
formatFiles,
getProjects,
joinPathFragments,
updateJson,
} from '@nx/devkit';

export default async function addTypings(tree: Tree) {
const projects = getProjects(tree);
const buildExecutors = [
'@nx/webpack:webpack',
'@nx/vite:build',
'@nx/rspack:rspack',
];
const relatedTsConfigs = [
'tsconfig.app.json',
'tsconfig.lib.json',
'tsconfig.spec.json',
];

const typesToAdd = [
'@nx/react/typings/cssmodule.d.ts',
'@nx/react/typings/image.d.ts',
];

for (const [, config] of projects) {
if (buildExecutors.includes(config?.targets?.build?.executor)) {
const rootPath = config.root;
relatedTsConfigs.forEach((tsConfig) => {
const tsConfigPath = joinPathFragments(rootPath, tsConfig);
if (tree.exists(tsConfigPath)) {
updateJson(tree, tsConfigPath, (json) => {
const compilerOptions = json.compilerOptions || {};
compilerOptions.types = [
...new Set([...(compilerOptions.types || []), ...typesToAdd]),
];
if (json.files?.length > 0) {
json.files = json.files.filter(
(file: string) =>
!['cssmodule.d.ts', 'image.d.ts'].includes(file)
);
}
return { ...json, compilerOptions };
});
}
});
}
}
await formatFiles(tree);
}

2 comments on commit 85f4737

@vercel
Copy link

@vercel vercel bot commented on 85f4737 Aug 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

nx-dev – ./

nx-five.vercel.app
nx.dev
nx-dev-nrwl.vercel.app
nx-dev-git-master-nrwl.vercel.app

@zackarydev
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should these types be added to non-react applications though?

Please sign in to comment.