From 2433c22b3daedc5cdfa18a7e4eacbeb77e4ac7b7 Mon Sep 17 00:00:00 2001 From: Emin Khateeb Date: Tue, 5 Mar 2019 12:20:25 +0100 Subject: [PATCH 1/7] prepared for RN 0.59 release --- App.tsx | 4 ++-- README.md | 21 ++++++-------------- __tests__/{App.tsx => App-test.tsx} | 2 +- devDependencies.json | 1 - jest.config.js | 4 ++++ jest.json | 8 -------- package.json | 2 +- setup.js | 30 +++++++---------------------- 8 files changed, 21 insertions(+), 51 deletions(-) rename __tests__/{App.tsx => App-test.tsx} (98%) create mode 100644 jest.config.js delete mode 100644 jest.json diff --git a/App.tsx b/App.tsx index af5ed194..fc62f2eb 100644 --- a/App.tsx +++ b/App.tsx @@ -4,7 +4,7 @@ * * Generated with the TypeScript template * https://github.com/emin93/react-native-template-typescript - * + * * @format */ @@ -48,4 +48,4 @@ const styles = StyleSheet.create({ color: '#333333', marginBottom: 5, }, -}); +}); \ No newline at end of file diff --git a/README.md b/README.md index 5a0afb6d..4a2bfe07 100644 --- a/README.md +++ b/README.md @@ -13,39 +13,30 @@ Clean and minimalist React Native template for a quick start with TypeScript. ## :arrow_forward: Quick Start ```bash -react-native init MyApp --template typescript && node MyApp/setup.js +react-native init MyApp --template typescript ``` ## :question: FAQ -### Why this template when React Native 0.57+ supports TypeScript out of the box? - -Actually, when React Native 0.57 was announced, I planned to stop maintenance on this template. But after further evaluation, there's still quite a lot of manual work to do (add type definitions for React & React Native, create a `.tsconfig` for type checking, etc.) to properly set up a React Native 0.57+ TypeScript project. And that's where this template comes in and does that work for you. :raised_hands: - ### What additional dependencies are included in this template? - [TypeScript](https://github.com/Microsoft/TypeScript) - [Type definitions for React & React Native](https://github.com/DefinitelyTyped/DefinitelyTyped) -- [ts-jest](https://github.com/kulshekhar/ts-jest) This template always uses the latest versions of the dependencies at the time when the `react-native init` command is being executed. This means you don't have to worry about old versions. Lots of :heart: and credits to the owners and maintainers of those packages. -### Why the setup script? - -It deletes obsolete files like the `.flowconfig` and the `setup.js` itself after the setup. - -### How to do type checking? - -`npm run tsc` - ### Does debugging work? -Yes it does. +Yes it does. :tada: [![Demonstration of working breakpoints in Visual Studio Code](https://cdn-images-1.medium.com/max/1600/1*ZXfzgq1xKz1B3chYy9xE7w.png)](https://medium.com/@emin93/react-native-typescript-b965059109d3) +### How to do type checking? + +`npx tsc` + ## :globe_with_meridians: Links - ["Using React Native with TypeScript just became simple" on Medium](https://medium.com/@emin93/react-native-typescript-b965059109d3) diff --git a/__tests__/App.tsx b/__tests__/App-test.tsx similarity index 98% rename from __tests__/App.tsx rename to __tests__/App-test.tsx index 17847669..a5f5c837 100644 --- a/__tests__/App.tsx +++ b/__tests__/App-test.tsx @@ -11,4 +11,4 @@ import renderer from 'react-test-renderer'; it('renders correctly', () => { renderer.create(); -}); +}); \ No newline at end of file diff --git a/devDependencies.json b/devDependencies.json index 08f4720b..4846c544 100644 --- a/devDependencies.json +++ b/devDependencies.json @@ -3,6 +3,5 @@ "@types/react-native": "latest", "@types/react-test-renderer": "latest", "@types/react": "latest", - "ts-jest": "latest", "typescript": "latest" } diff --git a/jest.config.js b/jest.config.js new file mode 100644 index 00000000..2e0df3dd --- /dev/null +++ b/jest.config.js @@ -0,0 +1,4 @@ +module.exports = { + preset: 'react-native', + moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], +} diff --git a/jest.json b/jest.json deleted file mode 100644 index 236f081a..00000000 --- a/jest.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "transform": { - "^.+\\.tsx?$": "ts-jest" - }, - "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$", - "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"], - "modulePaths": [""] -} diff --git a/package.json b/package.json index e8494287..48d4377d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-template-typescript", - "version": "0.0.1", + "version": "4.1.10", "description": "Clean and minimalist React Native template for a quick start with TypeScript.", "scripts": { "test": "standard setup.js", diff --git a/setup.js b/setup.js index f987c1b7..599cdc96 100644 --- a/setup.js +++ b/setup.js @@ -1,29 +1,13 @@ const fs = require('fs') const path = require('path') -const packageJson = require('./package.json') -const jestConfig = require('./jest.json') +const projectFilesToDelete = ['.flowconfig', 'App.js', '__tests__/App-test.js'] -if (!packageJson.jest) { - process.exit() -} +const templateFilesToDelete = ['setup.js', 'README.md', 'LICENSE'] -const deleteFile = fileName => fs.unlinkSync(path.join(__dirname, fileName)) -const writeFile = (fileName, data) => fs.writeFileSync(path.join(__dirname, fileName), data) +const projectPath = path.join(__dirname, '..', '..') +const deleteProjectFile = fileName => fs.unlinkSync(path.join(projectPath, fileName)) +const deleteTemplateFile = fileName => fs.unlinkSync(path.join(__dirname, fileName)) -console.log('🔄 Setting up...') - -packageJson.scripts.tsc = 'tsc' -packageJson.jest = Object.assign(packageJson.jest, jestConfig) - -writeFile('package.json', JSON.stringify(packageJson, null, 2)) - -deleteFile('.flowconfig') -deleteFile('App.js') -deleteFile('__tests__/App.js') -deleteFile('jest.json') -deleteFile('LICENSE') -deleteFile('README.md') -deleteFile('setup.js') - -console.log(`✅ Setup completed!`) +projectFilesToDelete.forEach(deleteProjectFile) +templateFilesToDelete.forEach(deleteTemplateFile) From f8369603f402718970d0dc07d26eae2eb152edfe Mon Sep 17 00:00:00 2001 From: Emin Khateeb Date: Tue, 5 Mar 2019 12:23:03 +0100 Subject: [PATCH 2/7] reverted package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 48d4377d..e8494287 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-template-typescript", - "version": "4.1.10", + "version": "0.0.1", "description": "Clean and minimalist React Native template for a quick start with TypeScript.", "scripts": { "test": "standard setup.js", From e2b4039a30c1409ea7808994501e98c0377bf8cf Mon Sep 17 00:00:00 2001 From: Emin Khateeb Date: Tue, 5 Mar 2019 12:34:22 +0100 Subject: [PATCH 3/7] updated license year --- LICENSE | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/LICENSE b/LICENSE index 0d08078e..15c23b08 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2018 Emin Khateeb +Copyright (c) 2019 Emin Khateeb Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal From 1bed6944294753dcfcbde3477c06d0dbf16252e4 Mon Sep 17 00:00:00 2001 From: Emin Khateeb Date: Tue, 5 Mar 2019 12:36:55 +0100 Subject: [PATCH 4/7] updated contributing document --- CONTRIBUTING.md | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index dbf5c3ae..1727292b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,8 +1,6 @@ # Contributing -Cool, I'm glad you decided to contribute to React Native Template TypeScript. - -Don't worry, I won't bother you with thousands of rules. I want to make contributing to this project as easy and transparent as possible. +Contributing to this project should be as easy and transparent as possible. ## Workflow @@ -15,7 +13,3 @@ We use [GitHub Flow](https://guides.github.com/introduction/flow/), so all code ## License By contributing, you agree that your contributions will be licensed under the [MIT License](https://choosealicense.com/licenses/mit/). - -## Code style - -Currently there is no lint configuration, but you should try to stay consistent with the existing code. From c9184ffc0652c214defeffc603a02ac7c3a51819 Mon Sep 17 00:00:00 2001 From: Emin Khateeb Date: Tue, 5 Mar 2019 12:53:12 +0100 Subject: [PATCH 5/7] added check if package is being installed as a dependency --- setup.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/setup.js b/setup.js index 599cdc96..0268a977 100644 --- a/setup.js +++ b/setup.js @@ -1,6 +1,10 @@ const fs = require('fs') const path = require('path') +if (fs.existsSync(path.join(__dirname, '.travis.yml'))) { + process.exit() +} + const projectFilesToDelete = ['.flowconfig', 'App.js', '__tests__/App-test.js'] const templateFilesToDelete = ['setup.js', 'README.md', 'LICENSE'] From 33cc10614417cf2f735cf5324e2d8a95a019cee4 Mon Sep 17 00:00:00 2001 From: Emin Khateeb Date: Thu, 7 Mar 2019 13:19:46 +0100 Subject: [PATCH 6/7] Added jest config to ts excludes --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index f185f6ec..1bfc717a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,5 +11,5 @@ "strict": true, "target": "esnext" }, - "exclude": ["node_modules", "babel.config.js", "metro.config.js"] + "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"] } From 5ce07d7e6c57fc5224708ce65ccac3bcf5ebe990 Mon Sep 17 00:00:00 2001 From: Emin Khateeb Date: Tue, 12 Mar 2019 18:21:11 +0100 Subject: [PATCH 7/7] minor space addition to prevent comparison issues --- App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/App.tsx b/App.tsx index fc62f2eb..32cb8f69 100644 --- a/App.tsx +++ b/App.tsx @@ -4,7 +4,7 @@ * * Generated with the TypeScript template * https://github.com/emin93/react-native-template-typescript - * + * * @format */