Skip to content

Commit 7e71946

Browse files
committed
react-scripts-ts
0 parents  commit 7e71946

File tree

164 files changed

+7392
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

164 files changed

+7392
-0
lines changed

.circleci/config.yml

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
version: 2
2+
jobs:
3+
test-template:
4+
docker:
5+
- image: circleci/node:12.18.2-browsers
6+
working_directory: ~/template
7+
steps:
8+
- checkout
9+
- run: yarn
10+
- run: yarn pack:rename
11+
- run: npx create-react-app ~/template/test-template --scripts-version=/home/circleci/template/nexbit.io-react-scripts-ts.tgz
12+
- run: cd ~/template/test-template && yarn test
13+
14+
test-kitchensink:
15+
docker:
16+
- image: circleci/node:12.18.2-browsers
17+
working_directory: ~/kitchensink
18+
steps:
19+
- checkout
20+
- run: yarn
21+
- run: yarn pack:rename
22+
- run: E2E_TEST='true' npx create-react-app ~/kitchensink/test-kitchensink --scripts-version=/home/circleci/kitchensink/jpavon-react-scripts-ts.tgz --internal-testing-template=/home/circleci/kitchensink/fixtures/kitchensink
23+
- run: cd ~/kitchensink/test-kitchensink && yarn test --maxWorkers=2
24+
- run: cd ~/kitchensink/test-kitchensink && yarn e2e:dev
25+
- run: cd ~/kitchensink/test-kitchensink && yarn e2e:build
26+
27+
workflows:
28+
version: 2
29+
tests:
30+
jobs:
31+
- test-template
32+
- test-kitchensink

.gitignore

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.idea
2+
node_modules
3+
4+
template/build
5+
template/node_modules
6+
template/package.json
7+
template/yarn.lock
8+
9+
npm-debug.log*
10+
yarn-debug.log*
11+
yarn-error.log*

.npmignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/fixtures

.prettierrc

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"tabWidth": 2,
3+
"useTabs": false,
4+
"semi": true,
5+
"singleQuote": true,
6+
"arrowParens": "always"
7+
}

CHANGELOG.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Change Log
2+
3+
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4+
5+
## [5.0.1] react-scripts-ts (2020-08-11)
6+
7+
8+
### Bug Fixes
9+
10+
* revert to eval-source-map https://github.com/facebook/create-react-app/pull/6444 ([043b9c2](https://github.com/jpavon/react-scripts-ts/commit/043b9c2))
11+
* update all modules
12+
* upgrade build process
13+
* use typescript 3.9.7
14+
* use webpack@4.x.x
15+
* forked from react-scripts-ts [stale from 2018 ]
16+
17+

LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2013-present, Facebook, Inc.
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

README.md

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
## ![react-scripts-ts](template/src/logo.svg)&nbsp;&nbsp;&nbsp;<span>+</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://github.com/remojansen/logo.ts/raw/master/ts.png" width="70" height="70" />
2+
3+
![License](https://img.shields.io/github/license/nexbitio/react-scripts-ts.svg)
4+
[![NPM](https://img.shields.io/npm/v/@nexbit.io/react-scripts-ts.svg)](https://www.npmjs.com/package/@nexbit.io/react-scripts-ts)
5+
[![CircleCI Status](https://circleci.com/gh/nexbitio/react-scripts-ts.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/nexbitio/react-scripts-ts)
6+
7+
# @nexbit.io/react-scripts-ts
8+
9+
Modern build setup with no configuration for React + TypeScript projects.
10+
11+
### Main differences with create react app:
12+
13+
- [Faster build times](https://github.com/nexbitio/react-scripts-ts/issues/7#issue-394549780)
14+
- [Namespaces support](https://www.typescriptlang.org/docs/handbook/namespaces.html)
15+
- [Module resolution support (baseUrl/paths)](https://www.typescriptlang.org/docs/handbook/module-resolution.html)
16+
- Type checking on a separate proccess
17+
- Transpilation using [ts-loader](https://github.com/TypeStrong/ts-loader)
18+
- Provide compile-time information for styled components [typescript-plugin-styled-components](https://github.com/Igorbek/typescript-plugin-styled-components)
19+
20+
Found any problem or bug? Please [create a new issue](https://github.com/nexbitio/react-scripts-ts/issues).
21+
22+
## Features
23+
24+
- Webpack 4
25+
- TypeScript compilation [ts-loader](https://github.com/TypeStrong/ts-loader)
26+
- Type and tslint errors on a separate process [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin)
27+
- Sass, Less and Css Modules [css-modules](https://github.com/css-modules/css-modules)
28+
- Generate TypeScript typings for CSS modules [typings-for-css-modules-loader](https://github.com/nexbitio/typings-for-css-modules-loader)
29+
- Tranform SVG into React components [svgr](https://github.com/smooth-code/svgr)
30+
- Use `.js|.jsx` and `.ts|.tsx` files together.
31+
32+
Check out the [template files](template) for usage examples.
33+
34+
# Getting started
35+
36+
## Create a new project:
37+
38+
```bash
39+
npx create-react-app my-app --scripts-version=@nexbit.io/react-scripts-ts
40+
cd my-app/
41+
yarn start
42+
```
43+
44+
45+
## Already using create-react-app / react-scripts?
46+
47+
Install this package in yout project:
48+
49+
```bash
50+
yarn add @nexbit.io/react-scripts-ts
51+
```
52+
53+
Change your package.json configuration to use react-scripts-ts
54+
55+
```json
56+
{
57+
"scripts": {
58+
"start": "react-scripts-ts start",
59+
"build": "react-scripts-ts build",
60+
"test": "react-scripts-ts test --env=jsdom",
61+
}
62+
}
63+
```
64+
65+
# Ejecting
66+
67+
Ejecting is not supported in this project, you have 2 options:
68+
69+
- Fork this project and create your own react-scripts-ts package.
70+
71+
- Use [react-app-rewired](https://github.com/timarney/react-app-rewired) with [custom scripts versions](https://github.com/timarney/react-app-rewired#2-custom-scripts-versions):
72+
73+
```json
74+
{
75+
"scripts": {
76+
"start": "react-app-rewired start --scripts-version @nexbit.io/react-scripts-ts",
77+
"build": "react-app-rewired build --scripts-version @nexbit.io/react-scripts-ts",
78+
"test": "react-app-rewired test --scripts-version @nexbit.io/react-scripts-ts --env=jsdom"
79+
}
80+
}
81+
```

bin/react-scripts-ts.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
#!/usr/bin/env node
2+
/**
3+
* Copyright (c) 2015-present, Facebook, Inc.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
'use strict';
10+
11+
const spawn = require('react-dev-utils/crossSpawn');
12+
const args = process.argv.slice(2);
13+
14+
const scriptIndex = args.findIndex(
15+
x => x === 'build' || x === 'eject' || x === 'start' || x === 'test'
16+
);
17+
const script = scriptIndex === -1 ? args[0] : args[scriptIndex];
18+
const nodeArgs = scriptIndex > 0 ? args.slice(0, scriptIndex) : [];
19+
20+
switch (script) {
21+
case 'build':
22+
case 'eject':
23+
case 'start':
24+
case 'test': {
25+
const result = spawn.sync(
26+
'node',
27+
nodeArgs
28+
.concat(require.resolve('../scripts/' + script))
29+
.concat(args.slice(scriptIndex + 1)),
30+
{ stdio: 'inherit' }
31+
);
32+
if (result.signal) {
33+
if (result.signal === 'SIGKILL') {
34+
console.log(
35+
'The build failed because the process exited too early. ' +
36+
'This probably means the system ran out of memory or someone called ' +
37+
'`kill -9` on the process.'
38+
);
39+
} else if (result.signal === 'SIGTERM') {
40+
console.log(
41+
'The build failed because the process exited too early. ' +
42+
'Someone might have called `kill` or `killall`, or the system could ' +
43+
'be shutting down.'
44+
);
45+
}
46+
process.exit(1);
47+
}
48+
process.exit(result.status);
49+
break;
50+
}
51+
default:
52+
console.log('Unknown script "' + script + '".');
53+
console.log('Perhaps you need to update react-scripts-ts?');
54+
break;
55+
}

config/env.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
// @remove-on-eject-begin
2+
/**
3+
* Copyright (c) 2015-present, Facebook, Inc.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
// @remove-on-eject-end
9+
'use strict';
10+
11+
const fs = require('fs');
12+
const path = require('path');
13+
const paths = require('./paths');
14+
15+
// Make sure that including paths.js after env.js will read .env variables.
16+
delete require.cache[require.resolve('./paths')];
17+
18+
const NODE_ENV = process.env.NODE_ENV;
19+
if (!NODE_ENV) {
20+
throw new Error(
21+
'The NODE_ENV environment variable is required but was not specified.'
22+
);
23+
}
24+
25+
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
26+
var dotenvFiles = [
27+
`${paths.dotenv}.${NODE_ENV}.local`,
28+
`${paths.dotenv}.${NODE_ENV}`,
29+
// Don't include `.env.local` for `test` environment
30+
// since normally you expect tests to produce the same
31+
// results for everyone
32+
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
33+
paths.dotenv,
34+
].filter(Boolean);
35+
36+
// Load environment variables from .env* files. Suppress warnings using silent
37+
// if this file is missing. dotenv will never modify any environment variables
38+
// that have already been set.
39+
// https://github.com/motdotla/dotenv
40+
dotenvFiles.forEach(dotenvFile => {
41+
if (fs.existsSync(dotenvFile)) {
42+
require('dotenv').config({
43+
path: dotenvFile,
44+
});
45+
}
46+
});
47+
48+
// We support resolving modules according to `NODE_PATH`.
49+
// This lets you use absolute paths in imports inside large monorepos:
50+
// https://github.com/facebookincubator/create-react-app/issues/253.
51+
// It works similar to `NODE_PATH` in Node itself:
52+
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
53+
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
54+
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
55+
// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
56+
// We also resolve them to make sure all tools using them work consistently.
57+
const appDirectory = fs.realpathSync(process.cwd());
58+
process.env.NODE_PATH = (process.env.NODE_PATH || '')
59+
.split(path.delimiter)
60+
.filter(folder => folder && !path.isAbsolute(folder))
61+
.map(folder => path.resolve(appDirectory, folder))
62+
.join(path.delimiter);
63+
64+
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
65+
// injected into the application via DefinePlugin in Webpack configuration.
66+
const REACT_APP = /^REACT_APP_/i;
67+
68+
function getClientEnvironment(publicUrl) {
69+
const raw = Object.keys(process.env)
70+
.filter(key => REACT_APP.test(key))
71+
.reduce(
72+
(env, key) => {
73+
env[key] = process.env[key];
74+
return env;
75+
},
76+
{
77+
// Useful for determining whether we’re running in production mode.
78+
// Most importantly, it switches React into the correct mode.
79+
NODE_ENV: process.env.NODE_ENV || 'development',
80+
// Useful for resolving the correct path to static assets in `public`.
81+
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
82+
// This should only be used as an escape hatch. Normally you would put
83+
// images into the `src` and `import` them in code to get their paths.
84+
PUBLIC_URL: publicUrl,
85+
}
86+
);
87+
// Stringify all values so we can feed into Webpack DefinePlugin
88+
const stringified = {
89+
'process.env': Object.keys(raw).reduce(
90+
(env, key) => {
91+
env[key] = JSON.stringify(raw[key]);
92+
return env;
93+
},
94+
{}
95+
),
96+
};
97+
98+
return { raw, stringified };
99+
}
100+
101+
module.exports = getClientEnvironment;

config/jest/babelTransform.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// @remove-file-on-eject
2+
/**
3+
* Copyright (c) 2014-present, Facebook, Inc.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
'use strict';
9+
10+
const babelJest = require('babel-jest');
11+
12+
module.exports = babelJest.createTransformer({
13+
presets: [require.resolve('babel-preset-react-app')],
14+
babelrc: false,
15+
configFile: false,
16+
});

0 commit comments

Comments
 (0)