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 3, 2023
1 parent 914cb1d commit 4055e8b
Show file tree
Hide file tree
Showing 17 changed files with 361 additions and 45 deletions.
3 changes: 3 additions & 0 deletions e2e/react-core/src/react.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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`);
});
});

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.3.0-beta.2",
"description": "Remove @types/react-router-dom from package.json",
"implementation": "./src/migrations/update-16-3-0/remove-types-react-router-dom-package"
},
"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": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Up @@ -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
Expand Up @@ -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
Expand Up @@ -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,
Expand Down
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
Expand Up @@ -6,8 +6,6 @@
},
"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"]
Expand Down
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
Expand Up @@ -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: [
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
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 file and remove typings from tsconfig', () => {
let tree: Tree;
beforeEach(() => {
tree = createTreeWithEmptyWorkspace();
});

it('should add typings file', async () => {
tree.write(
'package.json',
JSON.stringify({
dependencies: {},
devDependencies: {},
})
);

addProjectConfiguration(tree, 'myapp', {
root: 'myapp',
targets: {
build: {
executor: '@nx/webpack:webpack',
},
},
});

await addTypings(tree);

expect(tree.exists('myapp/src/typings/cssmodule.d.ts')).toBeTruthy();
expect(tree.exists('myapp/src/typings/image.d.ts')).toBeTruthy();
});
});
Loading

0 comments on commit 4055e8b

Please sign in to comment.