Skip to content

Commit

Permalink
fix(react): remove hard-coded typings inside tsconfig and add them to…
Browse files Browse the repository at this point in the history
… the app
  • Loading branch information
ndcunningham committed Aug 4, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent ed300d5 commit 967c359
Showing 19 changed files with 382 additions and 67 deletions.
3 changes: 3 additions & 0 deletions e2e/react-core/src/react.test.ts
Original file line number Diff line number Diff line change
@@ -265,6 +265,9 @@ describe('React Applications', () => {
expect(readFile(`dist/apps/${appName}/styles.css`)).toMatch(
/Comic Sans MS/
);
// Check typings exist
checkFilesExist(`apps/${appName}/src/typings/cssmodule.d.ts`);
checkFilesExist(`apps/${appName}/src/typings/image.d.ts`);
});
});

13 changes: 3 additions & 10 deletions packages/next/src/generators/library/library.spec.ts
Original file line number Diff line number Diff line change
@@ -29,17 +29,10 @@ describe('next library', () => {
...baseOptions,
name: 'myLib',
});
const tsconfigFiles = readJson(
appTree,
'libs/my-lib/tsconfig.lib.json'
).files;

expect(tsconfigFiles).toContain(
'../../node_modules/@nx/next/typings/image.d.ts'
);
expect(tsconfigFiles).not.toContain(
'../../node_modules/@nx/react/typings/image.d.ts'
);
expect(
appTree.exists('libs/my-lib/src/lib/typings/image.d.ts')
).toBeTruthy();
});

it('should add jsxImportSource in tsconfig.json for @emotion/styled', async () => {
27 changes: 18 additions & 9 deletions packages/next/src/generators/library/library.ts
Original file line number Diff line number Diff line change
@@ -89,15 +89,6 @@ export async function libraryGenerator(host: Tree, rawOptions: Schema) {
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: [],
@@ -111,6 +102,24 @@ export async function libraryGenerator(host: Tree, rawOptions: Schema) {
}
);

// add image.d.ts to lib src/typings
host.write(
joinPathFragments(options.projectRoot, 'src/lib', 'typings/image.d.ts'),
`
/// <reference types="next/image-types/global" />
declare module '*.svg' {
import * as React from 'react';
export const ReactComponent: React.FunctionComponent<
React.SVGProps<SVGSVGElement> & { title?: string }
>;
const content: any;
export default content;
}`
);

if (!options.skipFormat) {
await formatFiles(host);
}
6 changes: 6 additions & 0 deletions packages/react/migrations.json
Original file line number Diff line number Diff line change
@@ -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 cssmodule.d.ts and image.d.ts to support css modules and images and remove hardcoded types from tsconfig",
"implementation": "./src/migrations/update-16-7-0-add-typings/update-16-7-0-add-typings"
}
},
"packageJsonUpdates": {
Original file line number Diff line number Diff line change
@@ -4,11 +4,6 @@
"outDir": "<%= offsetFromRoot %>dist/out-tsc",
"types": ["node"]
},
"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
@@ -4,11 +4,6 @@
"outDir": "<%= offsetFromRoot %>dist/out-tsc",
"types": ["node"]
},
"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
@@ -4,11 +4,6 @@
"outDir": "<%= offsetFromRoot %>dist/out-tsc",
"types": ["node"]
},
"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
@@ -0,0 +1,24 @@
declare module '*.module.css' {
const classes: { readonly [key: string]: string };
export default classes;
}

declare module '*.module.scss' {
const classes: { readonly [key: string]: string };
export default classes;
}

declare module '*.module.sass' {
const classes: { readonly [key: string]: string };
export default classes;
}

declare module '*.module.less' {
const classes: { readonly [key: string]: string };
export default classes;
}

declare module '*.module.styl' {
const classes: { readonly [key: string]: string };
export default classes;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
/// <reference types="react" />
/// <reference types="react-dom" />

declare module '*.svg' {
import * as React from 'react';

export const ReactComponent: React.FunctionComponent<
React.SVGProps<SVGSVGElement> & { title?: string }
>;

const src: string;
export default src;
}

declare module '*.bmp' {
const src: string;
export default src;
}

declare module '*.gif' {
const src: string;
export default src;
}

declare module '*.jpg' {
const src: string;
export default src;
}

declare module '*.jpeg' {
const src: string;
export default src;
}

declare module '*.png' {
const src: string;
export default src;
}

declare module '*.avif' {
const src: string;
export default src;
}

declare module '*.webp' {
const src: string;
export default src;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import 'react';

declare module 'react' {
interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
jsx?: boolean;
global?: boolean;
}
}
Original file line number Diff line number Diff line change
@@ -139,6 +139,13 @@ export function createApplicationFiles(host: Tree, options: NormalizedSchema) {
templateVariables
);
}
// Add typings
generateFiles(
host,
join(__dirname, '../files/base'),
options.appProjectRoot,
templateVariables
);

generateFiles(
host,
Original file line number Diff line number Diff line change
@@ -1,34 +1,14 @@
import { updateJestConfigContent } from '../../../utils/jest-utils';
import { NormalizedSchema } from '../schema';
import { offsetFromRoot, Tree, updateJson } from '@nx/devkit';
import { Tree } from '@nx/devkit';

export function updateSpecConfig(host: Tree, options: NormalizedSchema) {
if (options.unitTestRunner === 'none') {
return;
if (options.unitTestRunner === 'jest') {
const configPath = `${options.appProjectRoot}/jest.config.${
options.js ? 'js' : 'ts'
}`;
const originalContent = host.read(configPath, 'utf-8');
const content = updateJestConfigContent(originalContent);
host.write(configPath, content);
}

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`,
];
if (options.style === 'styled-jsx') {
json.files.unshift(
`${offset}node_modules/@nx/react/typings/styled-jsx.d.ts`
);
}
return json;
});

if (options.unitTestRunner !== 'jest') {
return;
}

const configPath = `${options.appProjectRoot}/jest.config.${
options.js ? 'js' : 'ts'
}`;
const originalContent = host.read(configPath, 'utf-8');
const content = updateJestConfigContent(originalContent);
host.write(configPath, content);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
declare module '*.module.css' {
const classes: { readonly [key: string]: string };
export default classes;
}

declare module '*.module.scss' {
const classes: { readonly [key: string]: string };
export default classes;
}

declare module '*.module.sass' {
const classes: { readonly [key: string]: string };
export default classes;
}

declare module '*.module.less' {
const classes: { readonly [key: string]: string };
export default classes;
}

declare module '*.module.styl' {
const classes: { readonly [key: string]: string };
export default classes;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/// <reference types="react" />
/// <reference types="react-dom" />

declare module '*.svg' {
import * as React from 'react';

export const ReactComponent: React.FunctionComponent<
React.SVGProps<SVGSVGElement> & { title?: string }
>;

const src: string;
export default src;
}

declare module '*.bmp' {
const src: string;
export default src;
}

declare module '*.gif' {
const src: string;
export default src;
}

declare module '*.jpg' {
const src: string;
export default src;
}

declare module '*.jpeg' {
const src: string;
export default src;
}

declare module '*.png' {
const src: string;
export default src;
}

declare module '*.avif' {
const src: string;
export default src;
}

declare module '*.webp' {
const src: string;
export default src;
}

// convert everything above as a string
Original file line number Diff line number Diff line change
@@ -4,11 +4,6 @@
"outDir": "<%= offsetFromRoot %>dist/out-tsc",
"types": ["node"]
},
"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
@@ -0,0 +1,8 @@
import 'react';

declare module 'react' {
interface StyleHTMLAttributes<T> extends React.HTMLAttributes<T> {
jsx?: boolean;
global?: boolean;
}
}
9 changes: 9 additions & 0 deletions packages/react/src/generators/library/lib/create-files.ts
Original file line number Diff line number Diff line change
@@ -41,6 +41,15 @@ export function createFiles(host: Tree, options: NormalizedSchema) {
);
}

if (options.style === 'styled-jsx') {
generateFiles(
host,
joinPathFragments(__dirname, '../files/styled-jsx'),
options.projectRoot,
substitutions
);
}

if (options.compiler === 'babel') {
writeJson(host, joinPathFragments(options.projectRoot, '.babelrc'), {
presets: [
Loading

0 comments on commit 967c359

Please sign in to comment.