From bda1a76b72c9a3d171e8824ff406165f285dd477 Mon Sep 17 00:00:00 2001 From: Emily Xiong Date: Tue, 11 Jan 2022 09:08:19 -0500 Subject: [PATCH] fix(react-native): update typing for svg in react native (#8399) --- packages/react-native/migrations.json | 6 ++ .../react-native/plugins/jest/svg-mock.ts | 1 - packages/react-native/project.json | 9 ++- .../files/app/src/app/App.tsx.template | 4 +- .../files/app/tsconfig.json.template | 2 +- .../add-react-native-svg-12-10-0.spec.ts | 2 +- .../add-react-native-svg-12-10-0.ts | 2 +- ...ate-react-native-typing-svg-13-5-0.spec.ts | 61 +++++++++++++++++++ .../update-react-native-typing-svg-13-5-0.ts | 46 ++++++++++++++ packages/react-native/typings/svg.d.ts | 7 +++ 10 files changed, 132 insertions(+), 8 deletions(-) create mode 100644 packages/react-native/src/migrations/update-13-5-0/update-react-native-typing-svg-13-5-0.spec.ts create mode 100644 packages/react-native/src/migrations/update-13-5-0/update-react-native-typing-svg-13-5-0.ts create mode 100644 packages/react-native/typings/svg.d.ts diff --git a/packages/react-native/migrations.json b/packages/react-native/migrations.json index 66176729be..ed140c9246 100644 --- a/packages/react-native/migrations.json +++ b/packages/react-native/migrations.json @@ -11,6 +11,12 @@ "cli": "nx", "description": "Add support to display svg in react native", "factory": "./src/migrations/update-12-10-0/add-react-native-svg-12-10-0" + }, + "update-react-native-typing-svg-13-5-0": { + "version": "13.5.0-beta.0", + "cli": "nx", + "description": "Update typing for svg in react native", + "factory": "./src/migrations/update-13-5-0/update-react-native-typing-svg-13-5-0" } }, "packageJsonUpdates": { diff --git a/packages/react-native/plugins/jest/svg-mock.ts b/packages/react-native/plugins/jest/svg-mock.ts index 649a9ccbdc..5d45aae397 100644 --- a/packages/react-native/plugins/jest/svg-mock.ts +++ b/packages/react-native/plugins/jest/svg-mock.ts @@ -1,4 +1,3 @@ // From https://github.com/kristerkari/react-native-svg-transformer#usage-with-jest -// __mocks__/svgMock.js module.exports = 'SvgMock'; module.exports.ReactComponent = 'SvgMock'; diff --git a/packages/react-native/project.json b/packages/react-native/project.json index 3b52b0372f..4108a9466f 100644 --- a/packages/react-native/project.json +++ b/packages/react-native/project.json @@ -46,18 +46,23 @@ { "input": "./packages/react-native/src", "glob": "**/*.!(ts)", - "output": "./src" + "output": "/src" }, { "input": "./packages/react-native", "glob": "*.rb", - "output": "." + "output": "/" }, { "input": "./packages/react-native", "glob": "**/*.json", "ignore": ["**/tsconfig*.json"], "output": "/" + }, + { + "input": "packages/react-native", + "glob": "**/*.d.ts", + "output": "/" } ] }, diff --git a/packages/react-native/src/generators/application/files/app/src/app/App.tsx.template b/packages/react-native/src/generators/application/files/app/src/app/App.tsx.template index 2c08a66e5b..cecd30c78e 100644 --- a/packages/react-native/src/generators/application/files/app/src/app/App.tsx.template +++ b/packages/react-native/src/generators/application/files/app/src/app/App.tsx.template @@ -75,7 +75,7 @@ const App = () => { - + Learning materials @@ -371,7 +371,7 @@ const styles = StyleSheet.create({ }, monospace: { color: '#ffffff', - fontFamily: 'Courier', + fontFamily: 'Courier New', marginVertical: 4, }, comment: { diff --git a/packages/react-native/src/generators/application/files/app/tsconfig.json.template b/packages/react-native/src/generators/application/files/app/tsconfig.json.template index 19e6327af5..6038dc3da8 100644 --- a/packages/react-native/src/generators/application/files/app/tsconfig.json.template +++ b/packages/react-native/src/generators/application/files/app/tsconfig.json.template @@ -10,7 +10,7 @@ "resolveJsonModule": true }, "files": [ - "../../node_modules/@nrwl/react/typings/image.d.ts" + "../../node_modules/@nrwl/react-native/typings/svg.d.ts" ], "include": [], "references": [ diff --git a/packages/react-native/src/migrations/update-12-10-0/add-react-native-svg-12-10-0.spec.ts b/packages/react-native/src/migrations/update-12-10-0/add-react-native-svg-12-10-0.spec.ts index 7018b8e41a..7b5d7b35f2 100644 --- a/packages/react-native/src/migrations/update-12-10-0/add-react-native-svg-12-10-0.spec.ts +++ b/packages/react-native/src/migrations/update-12-10-0/add-react-native-svg-12-10-0.spec.ts @@ -50,7 +50,7 @@ describe('Add react-native-svg to dev dependencies', () => { const tsconfig = readJson(tree, 'apps/products/tsconfig.json'); expect(tsconfig.files).toEqual([ - '../../node_modules/@nrwl/react/typings/image.d.ts', + '../../node_modules/@nrwl/react-native/typings/svg.d.ts', ]); const packageJson = readJson(tree, 'apps/products/package.json'); diff --git a/packages/react-native/src/migrations/update-12-10-0/add-react-native-svg-12-10-0.ts b/packages/react-native/src/migrations/update-12-10-0/add-react-native-svg-12-10-0.ts index 69af2c1e12..c8ca620213 100644 --- a/packages/react-native/src/migrations/update-12-10-0/add-react-native-svg-12-10-0.ts +++ b/packages/react-native/src/migrations/update-12-10-0/add-react-native-svg-12-10-0.ts @@ -51,7 +51,7 @@ function addReactNativeSvgToTsconfig( const offset = offsetFromRoot(project.root); updateJson(host, tsconfigPath, (json) => { const files = json.files || []; - files.push(`${offset}node_modules/@nrwl/react/typings/image.d.ts`); + files.push(`${offset}node_modules/@nrwl/react-native/typings/svg.d.ts`); json.files = files; return json; }); diff --git a/packages/react-native/src/migrations/update-13-5-0/update-react-native-typing-svg-13-5-0.spec.ts b/packages/react-native/src/migrations/update-13-5-0/update-react-native-typing-svg-13-5-0.spec.ts new file mode 100644 index 0000000000..615c6c6b26 --- /dev/null +++ b/packages/react-native/src/migrations/update-13-5-0/update-react-native-typing-svg-13-5-0.spec.ts @@ -0,0 +1,61 @@ +import { addProjectConfiguration, readJson, Tree } from '@nrwl/devkit'; +import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing'; +import update from './update-react-native-typing-svg-13-5-0'; + +describe('Update svg typings in tsconfig for react native app', () => { + let tree: Tree; + + beforeEach(async () => { + tree = createTreeWithEmptyWorkspace(); + addProjectConfiguration(tree, 'products', { + root: 'apps/products', + sourceRoot: 'apps/products/src', + targets: { + start: { + executor: '@nrwl/react-native:start', + options: { + port: 8081, + }, + }, + test: { + executor: '@nrwl/jest:jest', + options: { + jestConfig: 'apps/products/jest.config.js', + passWithNoTests: true, + }, + }, + }, + }); + }); + + it(`should add svg typing to tsconfig.json`, async () => { + tree.write('apps/products/tsconfig.json', '{}'); + await update(tree); + + const tsconfig = readJson(tree, 'apps/products/tsconfig.json'); + expect(tsconfig.files).toEqual([ + '../../node_modules/@nrwl/react-native/typings/svg.d.ts', + ]); + }); + + it(`should update to svg typing in tsconfig.json if image typing from react exists`, async () => { + tree.write( + 'apps/products/tsconfig.json', + `{ + "files": ["../../node_modules/@nrwl/react/typings/image.d.ts"] + }` + ); + await update(tree); + + const tsconfig = readJson(tree, 'apps/products/tsconfig.json'); + expect(tsconfig.files).toEqual([ + '../../node_modules/@nrwl/react-native/typings/svg.d.ts', + ]); + }); + + it(`should update app's tsconfig.json and package.json if file does not exist`, async () => { + await update(tree); + + expect(() => readJson(tree, 'apps/products/tsconfig.json')).toThrow(); + }); +}); diff --git a/packages/react-native/src/migrations/update-13-5-0/update-react-native-typing-svg-13-5-0.ts b/packages/react-native/src/migrations/update-13-5-0/update-react-native-typing-svg-13-5-0.ts new file mode 100644 index 0000000000..68f8faf069 --- /dev/null +++ b/packages/react-native/src/migrations/update-13-5-0/update-react-native-typing-svg-13-5-0.ts @@ -0,0 +1,46 @@ +import { + Tree, + formatFiles, + getProjects, + updateJson, + offsetFromRoot, + ProjectConfiguration, +} from '@nrwl/devkit'; + +/** + * Update svg typings in tsconfig for react native app + * Replace node_modules/@nrwl/react/typings/image.d.ts with node_modules/@nrwl/react-native/typings/svg.d.ts + */ +export default async function update(tree: Tree) { + const projects = getProjects(tree); + + projects.forEach((project) => { + if (project.targets?.start?.executor !== '@nrwl/react-native:start') return; + updateReactNativeSvgTypingInTsconfig(tree, project); + }); + + await formatFiles(tree); +} + +function updateReactNativeSvgTypingInTsconfig( + host: Tree, + project: ProjectConfiguration +) { + const tsconfigPath = `${project.root}/tsconfig.json`; + if (!host.exists(tsconfigPath)) return; + const offset = offsetFromRoot(project.root); + updateJson(host, tsconfigPath, (json) => { + const files = json.files || []; + const imageTypingIndex = files.findIndex( + (file) => file === `${offset}node_modules/@nrwl/react/typings/image.d.ts` + ); + const reactNativeSvgTypingPath = `${offset}node_modules/@nrwl/react-native/typings/svg.d.ts`; + if (imageTypingIndex === -1) { + files.push(reactNativeSvgTypingPath); + } else { + files[imageTypingIndex] = reactNativeSvgTypingPath; + } + json.files = files; + return json; + }); +} diff --git a/packages/react-native/typings/svg.d.ts b/packages/react-native/typings/svg.d.ts new file mode 100644 index 0000000000..7c42ae1dd7 --- /dev/null +++ b/packages/react-native/typings/svg.d.ts @@ -0,0 +1,7 @@ +// from https://github.com/kristerkari/react-native-svg-transformer#using-typescript +declare module '*.svg' { + import React from 'react'; + import { SvgProps } from 'react-native-svg'; + const content: React.FC; + export default content; +}