11 | If you would like to build this one-off for development, you can run `NODE_ENV=development npm run build` (or `NODE_ENV=development yarn build`). 12 | -------------------------------------------------------------------------------- /packages/react-error-overlay/fixtures/bundle-default.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "functionName": "App.componentDidMount", 4 | "fileName": "http://localhost:3000/static/js/bundle.js", 5 | "lineNumber": 26122, 6 | "columnNumber": 21, 7 | "_originalFunctionName": "App.componentDidMount", 8 | "_originalFileName": "webpack:///packages/react-scripts/template/src/App.js", 9 | "_originalLineNumber": 7, 10 | "_originalColumnNumber": 0, 11 | "_scriptCode": [ 12 | { 13 | "lineNumber": 26119, 14 | "content": " _createClass(App, [{", 15 | "highlight": false 16 | }, 17 | { 18 | "lineNumber": 26120, 19 | "content": " key: 'componentDidMount',", 20 | "highlight": false 21 | }, 22 | { 23 | "lineNumber": 26121, 24 | "content": " value: function componentDidMount() {", 25 | "highlight": false 26 | }, 27 | { 28 | "lineNumber": 26122, 29 | "content": " document.body.missing();", 30 | "highlight": true 31 | }, 32 | { 33 | "lineNumber": 26123, 34 | "content": " }", 35 | "highlight": false 36 | }, 37 | { 38 | "lineNumber": 26124, 39 | "content": " }, {", 40 | "highlight": false 41 | }, 42 | { 43 | "lineNumber": 26125, 44 | "content": " key: 'render',", 45 | "highlight": false 46 | } 47 | ], 48 | "_originalScriptCode": [ 49 | { 50 | "lineNumber": 4, 51 | "content": "", 52 | "highlight": false 53 | }, 54 | { 55 | "lineNumber": 5, 56 | "content": "class App extends Component {", 57 | "highlight": false 58 | }, 59 | { 60 | "lineNumber": 6, 61 | "content": " componentDidMount() {", 62 | "highlight": false 63 | }, 64 | { 65 | "lineNumber": 7, 66 | "content": " document.body.missing()", 67 | "highlight": true 68 | }, 69 | { 70 | "lineNumber": 8, 71 | "content": " }", 72 | "highlight": false 73 | }, 74 | { 75 | "lineNumber": 9, 76 | "content": "", 77 | "highlight": false 78 | }, 79 | { 80 | "lineNumber": 10, 81 | "content": " render() {", 82 | "highlight": false 83 | } 84 | ] 85 | } 86 | ] 87 | -------------------------------------------------------------------------------- /packages/react-error-overlay/fixtures/bundle2.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "functionName": "div", 4 | "fileName": "/static/js/bundle.js", 5 | "lineNumber": 41466, 6 | "columnNumber": null, 7 | "_originalFunctionName": "div", 8 | "_originalFileName": "B.js", 9 | "_originalLineNumber": 8, 10 | "_originalColumnNumber": null, 11 | "_scriptCode": [ 12 | { 13 | "lineNumber": 41466, 14 | "content": " 'div',", 15 | "highlight": true 16 | } 17 | ], 18 | "_originalScriptCode": [ 19 | { 20 | "lineNumber": 8, 21 | "content": "
{v}
",
22 | "highlight": true
23 | }
24 | ]
25 | },
26 | {
27 | "functionName": "B",
28 | "fileName": "/static/js/bundle.js",
29 | "lineNumber": 41395,
30 | "columnNumber": null,
31 | "_originalFunctionName": "B",
32 | "_originalFileName": "A.js",
33 | "_originalLineNumber": 6,
34 | "_originalColumnNumber": null,
35 | "_scriptCode": [
36 | {
37 | "lineNumber": 41395,
38 | "content": " return _react2.default.createElement(_B2.default, {",
39 | "highlight": true
40 | }
41 | ],
42 | "_originalScriptCode": [
43 | {
44 | "lineNumber": 6,
45 | "content": " return ()",
46 | "highlight": true
47 | }
48 | ]
49 | },
50 | {
51 | "functionName": "A",
52 | "fileName": "/static/js/bundle.js",
53 | "lineNumber": 26009,
54 | "columnNumber": null,
55 | "_originalFunctionName": "A",
56 | "_originalFileName": "App.js",
57 | "_originalLineNumber": 8,
58 | "_originalColumnNumber": null,
59 | "_scriptCode": [
60 | {
61 | "lineNumber": 26009,
62 | "content": " var Ac = _react2.default.createElement(_A2.default, {",
63 | "highlight": true
64 | }
65 | ],
66 | "_originalScriptCode": [
67 | {
68 | "lineNumber": 8,
69 | "content": " const Ac = ",
70 | "highlight": true
71 | }
72 | ]
73 | },
74 | {
75 | "functionName": "div",
76 | "fileName": "/static/js/bundle.js",
77 | "lineNumber": 26017,
78 | "columnNumber": null,
79 | "_originalFunctionName": "div",
80 | "_originalFileName": "App.js",
81 | "_originalLineNumber": 10,
82 | "_originalColumnNumber": null,
83 | "_scriptCode": [
84 | {
85 | "lineNumber": 26017,
86 | "content": " 'div',",
87 | "highlight": true
88 | }
89 | ],
90 | "_originalScriptCode": [
91 | {
92 | "lineNumber": 10,
93 | "content": " ",
94 | "highlight": true
95 | }
96 | ]
97 | },
98 | {
99 | "functionName": "App",
100 | "fileName": "/static/js/bundle.js",
101 | "lineNumber": 17412,
102 | "columnNumber": null,
103 | "_originalFunctionName": "App",
104 | "_originalFileName": "index.js",
105 | "_originalLineNumber": 6,
106 | "_originalColumnNumber": null,
107 | "_scriptCode": [
108 | {
109 | "lineNumber": 17412,
110 | "content": "_reactDom2.default.render(_react2.default.createElement(_App2.default, {",
111 | "highlight": true
112 | }
113 | ],
114 | "_originalScriptCode": [
115 | {
116 | "lineNumber": 6,
117 | "content": "ReactDOM.render(",
29 | "files": [
30 | "lib/",
31 | "middleware.js"
32 | ],
33 | "dependencies": {
34 | "anser": "1.2.5",
35 | "babel-code-frame": "6.22.0",
36 | "babel-runtime": "6.23.0",
37 | "react-dev-utils": "^3.0.2",
38 | "settle-promise": "1.0.0",
39 | "source-map": "0.5.6"
40 | },
41 | "devDependencies": {
42 | "babel-cli": "6.24.1",
43 | "babel-eslint": "7.2.3",
44 | "babel-preset-react-app": "^3.0.1",
45 | "cross-env": "5.0.0",
46 | "eslint": "3.19.0",
47 | "eslint-config-react-app": "^1.0.5",
48 | "eslint-plugin-flowtype": "2.33.0",
49 | "eslint-plugin-import": "2.2.0",
50 | "eslint-plugin-jsx-a11y": "5.0.3",
51 | "eslint-plugin-react": "7.0.1",
52 | "flow-bin": "0.49.1",
53 | "jest": "20.0.1",
54 | "jest-fetch-mock": "1.1.1"
55 | },
56 | "jest": {
57 | "setupFiles": [
58 | "./src/__tests__/setupJest.js"
59 | ],
60 | "collectCoverage": true,
61 | "coverageReporters": [
62 | "json"
63 | ],
64 | "testMatch": [
65 | "/src/**/__tests__/**/*.js?(x)",
66 | "/src/**/?(*.)(spec|test).js?(x)"
67 | ],
68 | "testPathIgnorePatterns": [
69 | "/node_modules/",
70 | "/fixtures/",
71 | "setupJest.js"
72 | ]
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/__snapshots__/lines-around.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`should return lines around from a string 1`] = `
4 | Array [
5 | ScriptLine {
6 | "content": "two",
7 | "highlight": false,
8 | "lineNumber": 2,
9 | },
10 | ScriptLine {
11 | "content": "three",
12 | "highlight": false,
13 | "lineNumber": 3,
14 | },
15 | ScriptLine {
16 | "content": "four",
17 | "highlight": true,
18 | "lineNumber": 4,
19 | },
20 | ScriptLine {
21 | "content": "five",
22 | "highlight": false,
23 | "lineNumber": 5,
24 | },
25 | ScriptLine {
26 | "content": "six",
27 | "highlight": false,
28 | "lineNumber": 6,
29 | },
30 | ]
31 | `;
32 |
33 | exports[`should return lines around from an array 1`] = `
34 | Array [
35 | ScriptLine {
36 | "content": "two",
37 | "highlight": false,
38 | "lineNumber": 2,
39 | },
40 | ScriptLine {
41 | "content": "three",
42 | "highlight": false,
43 | "lineNumber": 3,
44 | },
45 | ScriptLine {
46 | "content": "four",
47 | "highlight": true,
48 | "lineNumber": 4,
49 | },
50 | ScriptLine {
51 | "content": "five",
52 | "highlight": false,
53 | "lineNumber": 5,
54 | },
55 | ScriptLine {
56 | "content": "six",
57 | "highlight": false,
58 | "lineNumber": 6,
59 | },
60 | ]
61 | `;
62 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/__snapshots__/script-lines.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`script line shape 1`] = `
4 | ScriptLine {
5 | "content": "foobar",
6 | "highlight": true,
7 | "lineNumber": 5,
8 | }
9 | `;
10 |
11 | exports[`script line to provide default highlight 1`] = `
12 | ScriptLine {
13 | "content": "foobar",
14 | "highlight": false,
15 | "lineNumber": 5,
16 | }
17 | `;
18 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/__snapshots__/stack-frame.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`proper empty shape 1`] = `
4 | StackFrame {
5 | "_originalColumnNumber": null,
6 | "_originalFileName": null,
7 | "_originalFunctionName": null,
8 | "_originalLineNumber": null,
9 | "_originalScriptCode": null,
10 | "_scriptCode": null,
11 | "columnNumber": null,
12 | "fileName": null,
13 | "functionName": null,
14 | "lineNumber": null,
15 | }
16 | `;
17 |
18 | exports[`proper full shape 1`] = `
19 | StackFrame {
20 | "_originalColumnNumber": 13,
21 | "_originalFileName": "test.js",
22 | "_originalFunctionName": "apple",
23 | "_originalLineNumber": 37,
24 | "_originalScriptCode": null,
25 | "_scriptCode": null,
26 | "columnNumber": 37,
27 | "fileName": "b.js",
28 | "functionName": "a",
29 | "lineNumber": 13,
30 | }
31 | `;
32 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/__snapshots__/unmapper.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`default context & unfound source 1`] = `
4 | Array [
5 | StackFrame {
6 | "_originalColumnNumber": null,
7 | "_originalFileName": "B.js",
8 | "_originalFunctionName": "div",
9 | "_originalLineNumber": 8,
10 | "_originalScriptCode": Array [
11 | ScriptLine {
12 | "content": " return (",
13 | "highlight": false,
14 | "lineNumber": 5,
15 | },
16 | ScriptLine {
17 | "content": " :1:1)
18 | at a (file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:8:9)
19 | at file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:32:7`
20 | )
21 | ).toMatchSnapshot();
22 | });
23 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/parser/firefox.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import { parse } from '../../utils/parser';
11 |
12 | test('eval 1', () => {
13 | expect(
14 | parse(
15 | `test1@file:///C:/example.html line 7 > eval line 1 > eval:1:1
16 | test2@file:///C:/example.html line 7 > eval:1:1
17 | test3@file:///C:/example.html:7:6`.split('\n')
18 | )
19 | ).toMatchSnapshot();
20 | });
21 |
22 | test('eval 2', () => {
23 | expect(
24 | parse({
25 | stack: `anonymous@file:///C:/example.html line 7 > Function:1:1
26 | @file:///C:/example.html:7:6`,
27 | })
28 | ).toMatchSnapshot();
29 | });
30 |
31 | test('stack with eval', () => {
32 | expect(
33 | parse(
34 | `e@file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:25:9
35 | @file:///Users/joe/Documents/Development/OSS/stack-frame/index.html line 17 > eval:1:1
36 | a@file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:8:9
37 | @file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:32:7`
38 | )
39 | ).toMatchSnapshot();
40 | });
41 |
42 | test('v14 to v29', () => {
43 | expect(
44 | parse(
45 | `trace@file:///C:/example.html:9
46 | b@file:///C:/example.html:16
47 | a@file:///C:/example.html:19
48 | @file:///C:/example.html:21`
49 | )
50 | ).toMatchSnapshot();
51 | });
52 |
53 | test('v30+', () => {
54 | expect(
55 | parse(
56 | `trace@file:///C:/example.html:9:17
57 | b@file:///C:/example.html:16:13
58 | a@file:///C:/example.html:19:13
59 | @file:///C:/example.html:21:9`
60 | )
61 | ).toMatchSnapshot();
62 | });
63 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/parser/generic.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import { parse } from '../../utils/parser';
11 |
12 | test('throws on null', () => {
13 | expect.assertions(2);
14 | try {
15 | parse(null);
16 | } catch (e) {
17 | expect(e instanceof Error).toBe(true);
18 | expect(e.message).toBe('You cannot pass a null object.');
19 | }
20 | });
21 |
22 | test('throws on unparsable', () => {
23 | expect.assertions(2);
24 | try {
25 | parse({});
26 | } catch (e) {
27 | expect(e instanceof Error).toBe(true);
28 | expect(e.message).toBe(
29 | 'The error you provided does not contain a stack trace.'
30 | );
31 | }
32 | });
33 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/parser/react.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import { parse } from '../../utils/parser';
11 |
12 | test('15.y.z', () => {
13 | expect(
14 | parse(
15 | `Warning: Each child in array should have a unique "key" prop. Check render method of \`FileA\`.
16 | in div (at FileA.js:9)
17 | in FileA (at App.js:9)
18 | in div (at App.js:8)
19 | in App (at index.js:7)`
20 | )
21 | ).toMatchSnapshot();
22 | });
23 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/parser/safari.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import { parse } from '../../utils/parser';
11 |
12 | test('stack with eval', () => {
13 | expect(
14 | parse(
15 | `e@file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:25:18
16 | eval code
17 | eval@[native code]
18 | a@file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:8:10
19 | global code@file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:32:8`
20 | )
21 | ).toMatchSnapshot();
22 | });
23 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/script-lines.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import { ScriptLine } from '../utils/stack-frame';
11 |
12 | test('script line shape', () => {
13 | expect(new ScriptLine(5, 'foobar', true)).toMatchSnapshot();
14 | });
15 |
16 | test('script line to provide default highlight', () => {
17 | expect(new ScriptLine(5, 'foobar')).toMatchSnapshot();
18 | });
19 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/setupJest.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | global.fetch = require('jest-fetch-mock');
11 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/stack-frame.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import { StackFrame } from '../utils/stack-frame';
11 |
12 | test('proper empty shape', () => {
13 | const empty = new StackFrame();
14 | expect(empty).toMatchSnapshot();
15 |
16 | expect(empty.getFunctionName()).toBe(null);
17 | expect(empty.getSource()).toBe('');
18 | expect(empty.toString()).toBe('');
19 | });
20 |
21 | test('proper full shape', () => {
22 | const empty = new StackFrame(
23 | 'a',
24 | 'b.js',
25 | 13,
26 | 37,
27 | undefined,
28 | 'apple',
29 | 'test.js',
30 | 37,
31 | 13
32 | );
33 | expect(empty).toMatchSnapshot();
34 |
35 | expect(empty.getFunctionName()).toBe('a');
36 | expect(empty.getSource()).toBe('b.js:13:37');
37 | expect(empty.toString()).toBe('a (b.js:13:37)');
38 | });
39 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/unmapper.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import { unmap } from '../utils/unmapper';
11 | import { parse } from '../utils/parser';
12 | import fs from 'fs';
13 | import { resolve } from 'path';
14 |
15 | test('basic warning', async () => {
16 | expect.assertions(2);
17 | const error = `Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of \`B\`. See https://fb.me/react-warning-keys for more information.
18 | in div (at B.js:8)
19 | in B (at A.js:6)
20 | in A (at App.js:8)
21 | in div (at App.js:10)
22 | in App (at index.js:6)`;
23 |
24 | fetch.mockResponseOnce(
25 | fs
26 | .readFileSync(resolve(__dirname, '../../fixtures/bundle_u.mjs'))
27 | .toString('utf8')
28 | );
29 | fetch.mockResponseOnce(
30 | fs
31 | .readFileSync(resolve(__dirname, '../../fixtures/bundle_u.mjs.map'))
32 | .toString('utf8')
33 | );
34 | const frames = await unmap('/static/js/bundle.js', parse(error), 0);
35 |
36 | const expected = JSON.parse(
37 | fs
38 | .readFileSync(resolve(__dirname, '../../fixtures/bundle2.json'))
39 | .toString('utf8')
40 | );
41 | expect(frames).toEqual(expected);
42 |
43 | fetch.mockResponseOnce(
44 | fs
45 | .readFileSync(resolve(__dirname, '../../fixtures/bundle_u.mjs'))
46 | .toString('utf8')
47 | );
48 | fetch.mockResponseOnce(
49 | fs
50 | .readFileSync(resolve(__dirname, '../../fixtures/bundle_u.mjs.map'))
51 | .toString('utf8')
52 | );
53 | expect(await unmap('/static/js/bundle.js', expected)).toEqual(expected);
54 | });
55 |
56 | test('default context & unfound source', async () => {
57 | expect.assertions(1);
58 | const error = `Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of \`B\`. See https://fb.me/react-warning-keys for more information.
59 | in div (at B.js:8)
60 | in unknown (at blabla.js:10)`;
61 |
62 | fetch.mockResponseOnce(
63 | fs
64 | .readFileSync(resolve(__dirname, '../../fixtures/bundle_u.mjs'))
65 | .toString('utf8')
66 | );
67 | fetch.mockResponseOnce(
68 | fs
69 | .readFileSync(resolve(__dirname, '../../fixtures/bundle_u.mjs.map'))
70 | .toString('utf8')
71 | );
72 | const frames = await unmap('/static/js/bundle.js', parse(error));
73 | expect(frames).toMatchSnapshot();
74 | });
75 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/components/additional.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 | import { applyStyles } from '../utils/dom/css';
12 | import {
13 | additionalChildStyle,
14 | groupStyle,
15 | groupElemLeft,
16 | groupElemRight,
17 | } from '../styles';
18 | import { consumeEvent } from '../utils/dom/consumeEvent';
19 | import { enableTabClick } from '../utils/dom/enableTabClick';
20 |
21 | type SwitchCallback = (offset: number) => void;
22 | function updateAdditional(
23 | document: Document,
24 | additionalReference: HTMLDivElement,
25 | currentError: number,
26 | totalErrors: number,
27 | switchCallback: SwitchCallback
28 | ) {
29 | if (additionalReference.lastChild) {
30 | additionalReference.removeChild(additionalReference.lastChild);
31 | }
32 |
33 | if (totalErrors <= 1) {
34 | return;
35 | }
36 |
37 | const div = document.createElement('div');
38 | applyStyles(div, additionalChildStyle);
39 |
40 | const group = document.createElement('span');
41 | applyStyles(group, groupStyle);
42 |
43 | const left = document.createElement('button');
44 | applyStyles(left, groupElemLeft);
45 | left.addEventListener('click', function(e: MouseEvent) {
46 | consumeEvent(e);
47 | switchCallback(-1);
48 | });
49 | left.appendChild(document.createTextNode('←'));
50 | enableTabClick(left);
51 |
52 | const right = document.createElement('button');
53 | applyStyles(right, groupElemRight);
54 | right.addEventListener('click', function(e: MouseEvent) {
55 | consumeEvent(e);
56 | switchCallback(1);
57 | });
58 | right.appendChild(document.createTextNode('→'));
59 | enableTabClick(right);
60 |
61 | group.appendChild(left);
62 | group.appendChild(right);
63 | div.appendChild(group);
64 |
65 | const text = `${currentError} of ${totalErrors} errors on the page`;
66 | div.appendChild(document.createTextNode(text));
67 |
68 | additionalReference.appendChild(div);
69 | }
70 |
71 | export type { SwitchCallback };
72 | export { updateAdditional };
73 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/components/close.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 | import { applyStyles } from '../utils/dom/css';
12 | import { hintsStyle, hintStyle, closeButtonStyle } from '../styles';
13 |
14 | function createHint(document: Document, hint: string, title: string) {
15 | const span = document.createElement('span');
16 | span.appendChild(document.createTextNode(hint));
17 | span.setAttribute('title', title);
18 | applyStyles(span, hintStyle);
19 | return span;
20 | }
21 |
22 | type CloseCallback = () => void;
23 | function createClose(document: Document, callback: CloseCallback) {
24 | const hints = document.createElement('div');
25 | applyStyles(hints, hintsStyle);
26 |
27 | const close = createHint(document, '×', 'Click or press Escape to dismiss.');
28 | close.addEventListener('click', () => callback());
29 | applyStyles(close, closeButtonStyle);
30 | hints.appendChild(close);
31 | return hints;
32 | }
33 |
34 | export type { CloseCallback };
35 | export { createClose };
36 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/components/code.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 | import type { ScriptLine } from '../utils/stack-frame';
12 | import { applyStyles } from '../utils/dom/css';
13 | import { absolutifyCaret } from '../utils/dom/absolutifyCaret';
14 | import {
15 | codeStyle,
16 | primaryErrorStyle,
17 | primaryPreStyle,
18 | secondaryErrorStyle,
19 | secondaryPreStyle,
20 | } from '../styles';
21 |
22 | import generateAnsiHtml from 'react-dev-utils/ansiHTML';
23 |
24 | import codeFrame from 'babel-code-frame';
25 |
26 | function createCode(
27 | document: Document,
28 | sourceLines: ScriptLine[],
29 | lineNum: number,
30 | columnNum: number | null,
31 | contextSize: number,
32 | main: boolean,
33 | onSourceClick: ?Function
34 | ) {
35 | const sourceCode = [];
36 | let whiteSpace = Infinity;
37 | sourceLines.forEach(function(e) {
38 | const { content: text } = e;
39 | const m = text.match(/^\s*/);
40 | if (text === '') {
41 | return;
42 | }
43 | if (m && m[0]) {
44 | whiteSpace = Math.min(whiteSpace, m[0].length);
45 | } else {
46 | whiteSpace = 0;
47 | }
48 | });
49 | sourceLines.forEach(function(e) {
50 | let { content: text } = e;
51 | const { lineNumber: line } = e;
52 |
53 | if (isFinite(whiteSpace)) {
54 | text = text.substring(whiteSpace);
55 | }
56 | sourceCode[line - 1] = text;
57 | });
58 | const ansiHighlight = codeFrame(
59 | sourceCode.join('\n'),
60 | lineNum,
61 | columnNum == null ? 0 : columnNum - (isFinite(whiteSpace) ? whiteSpace : 0),
62 | {
63 | forceColor: true,
64 | linesAbove: contextSize,
65 | linesBelow: contextSize,
66 | }
67 | );
68 | const htmlHighlight = generateAnsiHtml(ansiHighlight);
69 | const code = document.createElement('code');
70 | code.innerHTML = htmlHighlight;
71 | absolutifyCaret(code);
72 | applyStyles(code, codeStyle);
73 |
74 | const ccn = code.childNodes;
75 | // eslint-disable-next-line
76 | oLoop: for (let index = 0; index < ccn.length; ++index) {
77 | const node = ccn[index];
78 | const ccn2 = node.childNodes;
79 | for (let index2 = 0; index2 < ccn2.length; ++index2) {
80 | const lineNode = ccn2[index2];
81 | const text = lineNode.innerText;
82 | if (text == null) {
83 | continue;
84 | }
85 | if (text.indexOf(' ' + lineNum + ' |') === -1) {
86 | continue;
87 | }
88 | // $FlowFixMe
89 | applyStyles(node, main ? primaryErrorStyle : secondaryErrorStyle);
90 | // eslint-disable-next-line
91 | break oLoop;
92 | }
93 | }
94 | const pre = document.createElement('pre');
95 | applyStyles(pre, main ? primaryPreStyle : secondaryPreStyle);
96 | pre.appendChild(code);
97 |
98 | if (typeof onSourceClick === 'function') {
99 | let handler = onSourceClick;
100 | pre.style.cursor = 'pointer';
101 | pre.addEventListener('click', function() {
102 | handler();
103 | });
104 | }
105 |
106 | return pre;
107 | }
108 |
109 | export { createCode };
110 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/components/footer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 | import { applyStyles } from '../utils/dom/css';
12 | import { footerStyle } from '../styles';
13 |
14 | function createFooter(document: Document) {
15 | const div = document.createElement('div');
16 | applyStyles(div, footerStyle);
17 | div.appendChild(
18 | document.createTextNode(
19 | 'This screen is visible only in development. It will not appear if the app crashes in production.'
20 | )
21 | );
22 | div.appendChild(document.createElement('br'));
23 | div.appendChild(
24 | document.createTextNode(
25 | 'Open your browser’s developer console to further inspect this error.'
26 | )
27 | );
28 | return div;
29 | }
30 |
31 | export { createFooter };
32 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/components/overlay.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 | import { applyStyles } from '../utils/dom/css';
12 | import { containerStyle, overlayStyle, headerStyle } from '../styles';
13 | import { createClose } from './close';
14 | import { createFrames } from './frames';
15 | import { createFooter } from './footer';
16 | import type { CloseCallback } from './close';
17 | import type { StackFrame } from '../utils/stack-frame';
18 | import { updateAdditional } from './additional';
19 | import type { FrameSetting } from './frames';
20 | import type { SwitchCallback } from './additional';
21 |
22 | function createOverlay(
23 | document: Document,
24 | name: ?string,
25 | message: string,
26 | frames: StackFrame[],
27 | contextSize: number,
28 | currentError: number,
29 | totalErrors: number,
30 | switchCallback: SwitchCallback,
31 | closeCallback: CloseCallback
32 | ): {
33 | overlay: HTMLDivElement,
34 | additional: HTMLDivElement,
35 | } {
36 | const frameSettings: FrameSetting[] = frames.map(() => ({ compiled: false }));
37 | // Create overlay
38 | const overlay = document.createElement('div');
39 | applyStyles(overlay, overlayStyle);
40 |
41 | // Create container
42 | const container = document.createElement('div');
43 | applyStyles(container, containerStyle);
44 | overlay.appendChild(container);
45 | container.appendChild(createClose(document, closeCallback));
46 |
47 | // Create "Errors X of Y" in case of multiple errors
48 | const additional = document.createElement('div');
49 | updateAdditional(
50 | document,
51 | additional,
52 | currentError,
53 | totalErrors,
54 | switchCallback
55 | );
56 | container.appendChild(additional);
57 |
58 | // Create header
59 | const header = document.createElement('div');
60 | applyStyles(header, headerStyle);
61 |
62 | // Make message prettier
63 | let finalMessage =
64 | message.match(/^\w*:/) || !name ? message : name + ': ' + message;
65 |
66 | finalMessage = finalMessage
67 | // TODO: maybe remove this prefix from fbjs?
68 | // It's just scaring people
69 | .replace(/^Invariant Violation:\s*/, '')
70 | // This is not helpful either:
71 | .replace(/^Warning:\s*/, '')
72 | // Break the actionable part to the next line.
73 | // AFAIK React 16+ should already do this.
74 | .replace(' Check the render method', '\n\nCheck the render method')
75 | .replace(' Check your code at', '\n\nCheck your code at');
76 |
77 | // Put it in the DOM
78 | header.appendChild(document.createTextNode(finalMessage));
79 | container.appendChild(header);
80 |
81 | // Create trace
82 | container.appendChild(
83 | createFrames(document, frames, frameSettings, contextSize, name)
84 | );
85 |
86 | // Show message
87 | container.appendChild(createFooter(document));
88 |
89 | return {
90 | overlay,
91 | additional,
92 | };
93 | }
94 |
95 | export { createOverlay };
96 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/effects/proxyConsole.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 |
12 | type ReactFrame = {
13 | fileName: string | null,
14 | lineNumber: number | null,
15 | name: string | null,
16 | };
17 | const reactFrameStack: Array = [];
18 |
19 | export type { ReactFrame };
20 |
21 | // This is a stripped down barebones version of this proposal:
22 | // https://gist.github.com/sebmarkbage/bdefa100f19345229d526d0fdd22830f
23 | // We're implementing just enough to get the invalid element type warnings
24 | // to display the component stack in React 15.6+:
25 | // https://github.com/facebook/react/pull/9679
26 | /// TODO: a more comprehensive implementation.
27 |
28 | const registerReactStack = () => {
29 | if (typeof console !== 'undefined') {
30 | // $FlowFixMe
31 | console.reactStack = frames => reactFrameStack.push(frames);
32 | // $FlowFixMe
33 | console.reactStackEnd = frames => reactFrameStack.pop();
34 | }
35 | };
36 |
37 | const unregisterReactStack = () => {
38 | if (typeof console !== 'undefined') {
39 | // $FlowFixMe
40 | console.reactStack = undefined;
41 | // $FlowFixMe
42 | console.reactStackEnd = undefined;
43 | }
44 | };
45 |
46 | type ConsoleProxyCallback = (message: string, frames: ReactFrame[]) => void;
47 | const permanentRegister = function proxyConsole(
48 | type: string,
49 | callback: ConsoleProxyCallback
50 | ) {
51 | if (typeof console !== 'undefined') {
52 | const orig = console[type];
53 | if (typeof orig === 'function') {
54 | console[type] = function __stack_frame_overlay_proxy_console__() {
55 | try {
56 | const message = arguments[0];
57 | if (typeof message === 'string' && reactFrameStack.length > 0) {
58 | callback(message, reactFrameStack[reactFrameStack.length - 1]);
59 | }
60 | } catch (err) {
61 | // Warnings must never crash. Rethrow with a clean stack.
62 | setTimeout(function() {
63 | throw err;
64 | });
65 | }
66 | return orig.apply(this, arguments);
67 | };
68 | }
69 | }
70 | };
71 |
72 | export { permanentRegister, registerReactStack, unregisterReactStack };
73 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/effects/shortcuts.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 | const SHORTCUT_ESCAPE = 'SHORTCUT_ESCAPE',
12 | SHORTCUT_LEFT = 'SHORTCUT_LEFT',
13 | SHORTCUT_RIGHT = 'SHORTCUT_RIGHT';
14 |
15 | let boundKeyHandler = null;
16 |
17 | type ShortcutCallback = (type: string) => void;
18 |
19 | function keyHandler(callback: ShortcutCallback, e: KeyboardEvent) {
20 | const { key, keyCode, which } = e;
21 | if (key === 'Escape' || keyCode === 27 || which === 27) {
22 | callback(SHORTCUT_ESCAPE);
23 | } else if (key === 'ArrowLeft' || keyCode === 37 || which === 37) {
24 | callback(SHORTCUT_LEFT);
25 | } else if (key === 'ArrowRight' || keyCode === 39 || which === 39) {
26 | callback(SHORTCUT_RIGHT);
27 | }
28 | }
29 |
30 | function registerShortcuts(target: EventTarget, callback: ShortcutCallback) {
31 | if (boundKeyHandler !== null) {
32 | return;
33 | }
34 | boundKeyHandler = keyHandler.bind(undefined, callback);
35 | target.addEventListener('keydown', boundKeyHandler);
36 | }
37 |
38 | function unregisterShortcuts(target: EventTarget) {
39 | if (boundKeyHandler === null) {
40 | return;
41 | }
42 | target.removeEventListener('keydown', boundKeyHandler);
43 | boundKeyHandler = null;
44 | }
45 |
46 | export {
47 | SHORTCUT_ESCAPE,
48 | SHORTCUT_LEFT,
49 | SHORTCUT_RIGHT,
50 | registerShortcuts as register,
51 | unregisterShortcuts as unregister,
52 | keyHandler as handler,
53 | };
54 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/effects/stackTraceLimit.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 | let stackTraceRegistered: boolean = false;
12 | // Default: https://docs.microsoft.com/en-us/scripting/javascript/reference/stacktracelimit-property-error-javascript
13 | let restoreStackTraceValue: number = 10;
14 |
15 | const MAX_STACK_LENGTH: number = 50;
16 |
17 | function registerStackTraceLimit(limit: number = MAX_STACK_LENGTH) {
18 | if (stackTraceRegistered) {
19 | return;
20 | }
21 | try {
22 | restoreStackTraceValue = Error.stackTraceLimit;
23 | Error.stackTraceLimit = limit;
24 | stackTraceRegistered = true;
25 | } catch (e) {
26 | // Not all browsers support this so we don't care if it errors
27 | }
28 | }
29 |
30 | function unregisterStackTraceLimit() {
31 | if (!stackTraceRegistered) {
32 | return;
33 | }
34 | try {
35 | Error.stackTraceLimit = restoreStackTraceValue;
36 | stackTraceRegistered = false;
37 | } catch (e) {
38 | // Not all browsers support this so we don't care if it errors
39 | }
40 | }
41 |
42 | export {
43 | registerStackTraceLimit as register,
44 | unregisterStackTraceLimit as unregister,
45 | };
46 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/effects/unhandledError.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 | let boundErrorHandler = null;
12 |
13 | type ErrorCallback = (error: Error) => void;
14 |
15 | function errorHandler(callback: ErrorCallback, e: Event): void {
16 | if (!e.error) {
17 | return;
18 | }
19 | // $FlowFixMe
20 | const { error } = e;
21 | if (error instanceof Error) {
22 | callback(error);
23 | } else {
24 | // A non-error was thrown, we don't have a trace. :(
25 | // Look in your browser's devtools for more information
26 | callback(new Error(error));
27 | }
28 | }
29 |
30 | function registerUnhandledError(target: EventTarget, callback: ErrorCallback) {
31 | if (boundErrorHandler !== null) {
32 | return;
33 | }
34 | boundErrorHandler = errorHandler.bind(undefined, callback);
35 | target.addEventListener('error', boundErrorHandler);
36 | }
37 |
38 | function unregisterUnhandledError(target: EventTarget) {
39 | if (boundErrorHandler === null) {
40 | return;
41 | }
42 | target.removeEventListener('error', boundErrorHandler);
43 | boundErrorHandler = null;
44 | }
45 |
46 | export {
47 | registerUnhandledError as register,
48 | unregisterUnhandledError as unregister,
49 | };
50 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/effects/unhandledRejection.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 | let boundRejectionHandler = null;
12 |
13 | type ErrorCallback = (error: Error) => void;
14 |
15 | function rejectionHandler(
16 | callback: ErrorCallback,
17 | e: PromiseRejectionEvent
18 | ): void {
19 | if (e == null || e.reason == null) {
20 | return callback(new Error('Unknown'));
21 | }
22 | let { reason } = e;
23 | if (reason instanceof Error) {
24 | return callback(reason);
25 | }
26 | // A non-error was rejected, we don't have a trace :(
27 | // Look in your browser's devtools for more information
28 | return callback(new Error(reason));
29 | }
30 |
31 | function registerUnhandledRejection(
32 | target: EventTarget,
33 | callback: ErrorCallback
34 | ) {
35 | if (boundRejectionHandler !== null) {
36 | return;
37 | }
38 | boundRejectionHandler = rejectionHandler.bind(undefined, callback);
39 | // $FlowFixMe
40 | target.addEventListener('unhandledrejection', boundRejectionHandler);
41 | }
42 |
43 | function unregisterUnhandledRejection(target: EventTarget) {
44 | if (boundRejectionHandler === null) {
45 | return;
46 | }
47 | // $FlowFixMe
48 | target.removeEventListener('unhandledrejection', boundRejectionHandler);
49 | boundRejectionHandler = null;
50 | }
51 |
52 | export {
53 | registerUnhandledRejection as register,
54 | unregisterUnhandledRejection as unregister,
55 | };
56 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 | import { inject, uninject } from './overlay';
12 |
13 | inject();
14 | if (module.hot && typeof module.hot.dispose === 'function') {
15 | module.hot.dispose(function() {
16 | uninject();
17 | });
18 | }
19 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/utils/dom/absolutifyCaret.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 | function removeNextBr(parent, component: ?Element) {
12 | while (component != null && component.tagName.toLowerCase() !== 'br') {
13 | component = component.nextElementSibling;
14 | }
15 | if (component != null) {
16 | parent.removeChild(component);
17 | }
18 | }
19 |
20 | function absolutifyCaret(component: Node) {
21 | const ccn = component.childNodes;
22 | for (let index = 0; index < ccn.length; ++index) {
23 | const c = ccn[index];
24 | // $FlowFixMe
25 | if (c.tagName.toLowerCase() !== 'span') {
26 | continue;
27 | }
28 | const _text = c.innerText;
29 | if (_text == null) {
30 | continue;
31 | }
32 | const text = _text.replace(/\s/g, '');
33 | if (text !== '|^') {
34 | continue;
35 | }
36 | // $FlowFixMe
37 | c.style.position = 'absolute';
38 | // $FlowFixMe
39 | removeNextBr(component, c);
40 | }
41 | }
42 |
43 | export { absolutifyCaret };
44 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/utils/dom/consumeEvent.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 | function consumeEvent(e: Event) {
12 | e.preventDefault();
13 | if (typeof e.target.blur === 'function') {
14 | e.target.blur();
15 | }
16 | }
17 |
18 | export { consumeEvent };
19 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/utils/dom/css.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 | let injectedCount = 0;
12 | const injectedCache = {};
13 |
14 | function getHead(document: Document) {
15 | return document.head || document.getElementsByTagName('head')[0];
16 | }
17 |
18 | function injectCss(document: Document, css: string): number {
19 | const head = getHead(document);
20 | const style = document.createElement('style');
21 | style.type = 'text/css';
22 | style.appendChild(document.createTextNode(css));
23 | head.appendChild(style);
24 |
25 | injectedCache[++injectedCount] = style;
26 | return injectedCount;
27 | }
28 |
29 | function removeCss(document: Document, ref: number) {
30 | if (injectedCache[ref] == null) {
31 | return;
32 | }
33 | const head = getHead(document);
34 | head.removeChild(injectedCache[ref]);
35 | delete injectedCache[ref];
36 | }
37 |
38 | function applyStyles(element: HTMLElement, styles: Object) {
39 | element.setAttribute('style', '');
40 | for (const key in styles) {
41 | if (!styles.hasOwnProperty(key)) {
42 | continue;
43 | }
44 | // $FlowFixMe
45 | element.style[key] = styles[key];
46 | }
47 | }
48 |
49 | export { getHead, injectCss, removeCss, applyStyles };
50 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/utils/dom/enableTabClick.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 | function enableTabClick(node: Element) {
12 | node.setAttribute('tabindex', '0');
13 | node.addEventListener('keydown', function(e: KeyboardEvent) {
14 | const { key, which, keyCode } = e;
15 | if (key === 'Enter' || which === 13 || keyCode === 13) {
16 | e.preventDefault();
17 | if (typeof e.target.click === 'function') {
18 | e.target.click();
19 | }
20 | }
21 | });
22 | }
23 |
24 | export { enableTabClick };
25 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/utils/errorRegister.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 | import type { StackFrame } from './stack-frame';
12 | import { parse } from './parser';
13 | import { map } from './mapper';
14 | import { unmap } from './unmapper';
15 |
16 | type ErrorRecord = {
17 | error: Error,
18 | unhandledRejection: boolean,
19 | contextSize: number,
20 | enhancedFrames: StackFrame[],
21 | };
22 | type ErrorRecordReference = number;
23 | const recorded: ErrorRecord[] = [];
24 |
25 | let errorsConsumed: ErrorRecordReference = 0;
26 |
27 | function consume(
28 | error: Error,
29 | unhandledRejection: boolean = false,
30 | contextSize: number = 3
31 | ): Promise {
32 | const parsedFrames = parse(error);
33 | let enhancedFramesPromise;
34 | if (error.__unmap_source) {
35 | enhancedFramesPromise = unmap(
36 | // $FlowFixMe
37 | error.__unmap_source,
38 | parsedFrames,
39 | contextSize
40 | );
41 | } else {
42 | enhancedFramesPromise = map(parsedFrames, contextSize);
43 | }
44 | return enhancedFramesPromise.then(enhancedFrames => {
45 | if (
46 | enhancedFrames
47 | .map(f => f._originalFileName)
48 | .filter(f => f != null && f.indexOf('node_modules') === -1).length === 0
49 | ) {
50 | return null;
51 | }
52 | enhancedFrames = enhancedFrames.filter(
53 | ({ functionName }) =>
54 | functionName == null ||
55 | functionName.indexOf('__stack_frame_overlay_proxy_console__') === -1
56 | );
57 | recorded[++errorsConsumed] = {
58 | error,
59 | unhandledRejection,
60 | contextSize,
61 | enhancedFrames,
62 | };
63 | return errorsConsumed;
64 | });
65 | }
66 |
67 | function getErrorRecord(ref: ErrorRecordReference): ErrorRecord {
68 | return recorded[ref];
69 | }
70 |
71 | function drain() {
72 | // $FlowFixMe
73 | const keys = Object.keys(recorded);
74 | for (let index = 0; index < keys.length; ++index) {
75 | delete recorded[keys[index]];
76 | }
77 | }
78 |
79 | export { consume, getErrorRecord, drain };
80 | export type { ErrorRecordReference };
81 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/utils/getLinesAround.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | //@flow
11 | import { ScriptLine } from './stack-frame';
12 |
13 | /**
14 | *
15 | * @param {number} line The line number to provide context around.
16 | * @param {number} count The number of lines you'd like for context.
17 | * @param {string[] | string} lines The source code.
18 | */
19 | function getLinesAround(
20 | line: number,
21 | count: number,
22 | lines: string[] | string
23 | ): ScriptLine[] {
24 | if (typeof lines === 'string') {
25 | lines = lines.split('\n');
26 | }
27 | const result = [];
28 | for (
29 | let index = Math.max(0, line - 1 - count);
30 | index <= Math.min(lines.length - 1, line - 1 + count);
31 | ++index
32 | ) {
33 | result.push(new ScriptLine(index + 1, lines[index], index === line - 1));
34 | }
35 | return result;
36 | }
37 |
38 | export { getLinesAround };
39 | export default getLinesAround;
40 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/utils/isInternalFile.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | /* @flow */
11 | function isInternalFile(sourceFileName: ?string, fileName: ?string) {
12 | return (
13 | sourceFileName == null ||
14 | sourceFileName === '' ||
15 | sourceFileName.indexOf('/~/') !== -1 ||
16 | sourceFileName.indexOf('/node_modules/') !== -1 ||
17 | sourceFileName.trim().indexOf(' ') !== -1 ||
18 | fileName == null ||
19 | fileName === ''
20 | );
21 | }
22 |
23 | export { isInternalFile };
24 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/utils/mapper.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | // @flow
11 | import StackFrame from './stack-frame';
12 | import { getSourceMap } from './getSourceMap';
13 | import { getLinesAround } from './getLinesAround';
14 | import { settle } from 'settle-promise';
15 |
16 | /**
17 | * Enhances a set of {
25 | const cache: any = {};
26 | const files: string[] = [];
27 | frames.forEach(frame => {
28 | const { fileName } = frame;
29 | if (fileName == null) {
30 | return;
31 | }
32 | if (files.indexOf(fileName) !== -1) {
33 | return;
34 | }
35 | files.push(fileName);
36 | });
37 | await settle(
38 | files.map(async fileName => {
39 | const fileSource = await fetch(fileName).then(r => r.text());
40 | const map = await getSourceMap(fileName, fileSource);
41 | cache[fileName] = { fileSource, map };
42 | })
43 | );
44 | return frames.map(frame => {
45 | const { functionName, fileName, lineNumber, columnNumber } = frame;
46 | let { map, fileSource } = cache[fileName] || {};
47 | if (map == null || lineNumber == null) {
48 | return frame;
49 | }
50 | const { source, line, column } = map.getOriginalPosition(
51 | lineNumber,
52 | columnNumber
53 | );
54 | const originalSource = source == null ? [] : map.getSource(source);
55 | return new StackFrame(
56 | functionName,
57 | fileName,
58 | lineNumber,
59 | columnNumber,
60 | getLinesAround(lineNumber, contextLines, fileSource),
61 | functionName,
62 | source,
63 | line,
64 | column,
65 | getLinesAround(line, contextLines, originalSource)
66 | );
67 | });
68 | }
69 |
70 | export { map };
71 | export default map;
72 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/utils/parser.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | // @flow
11 | import StackFrame from './stack-frame';
12 |
13 | const regexExtractLocation = /\(?(.+?)(?::(\d+))?(?::(\d+))?\)?$/;
14 |
15 | function extractLocation(token: string): [string, number, number] {
16 | return regexExtractLocation.exec(token).slice(1).map(v => {
17 | const p = Number(v);
18 | if (!isNaN(p)) {
19 | return p;
20 | }
21 | return v;
22 | });
23 | }
24 |
25 | const regexValidFrame_Chrome = /^\s*(at|in)\s.+(:\d+)/;
26 | const regexValidFrame_FireFox = /(^|@)\S+:\d+|.+line\s+\d+\s+>\s+(eval|Function).+/;
27 |
28 | function parseStack(stack: string[]): StackFrame[] {
29 | const frames = stack
30 | .filter(
31 | e => regexValidFrame_Chrome.test(e) || regexValidFrame_FireFox.test(e)
32 | )
33 | .map(e => {
34 | if (regexValidFrame_FireFox.test(e)) {
35 | // Strip eval, we don't care about it
36 | let isEval = false;
37 | if (/ > (eval|Function)/.test(e)) {
38 | e = e.replace(
39 | / line (\d+)(?: > eval line \d+)* > (eval|Function):\d+:\d+/g,
40 | ':$1'
41 | );
42 | isEval = true;
43 | }
44 | const data = e.split(/[@]/g);
45 | const last = data.pop();
46 | return new StackFrame(
47 | data.join('@') || (isEval ? 'eval' : null),
48 | ...extractLocation(last)
49 | );
50 | } else {
51 | // Strip eval, we don't care about it
52 | if (e.indexOf('(eval ') !== -1) {
53 | e = e.replace(/(\(eval at [^()]*)|(\),.*$)/g, '');
54 | }
55 | if (e.indexOf('(at ') !== -1) {
56 | e = e.replace(/\(at /, '(');
57 | }
58 | const data = e.trim().split(/\s+/g).slice(1);
59 | const last = data.pop();
60 | return new StackFrame(data.join(' ') || null, ...extractLocation(last));
61 | }
62 | });
63 | return frames;
64 | }
65 |
66 | /**
67 | * Turns an /node_modules/fbjs/.*
3 |
4 | [include]
5 |
6 | [libs]
7 |
8 | [options]
9 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json:
--------------------------------------------------------------------------------
1 | {
2 | "dependencies": {
3 | "babel-register": "6.22.0",
4 | "babel-plugin-transform-es2015-modules-commonjs": "6.22.0",
5 | "babel-polyfill": "6.20.0",
6 | "chai": "3.5.0",
7 | "jsdom": "9.8.3",
8 | "mocha": "3.2.0",
9 | "normalize.css": "7.0.0",
10 | "prop-types": "15.5.6",
11 | "test-integrity": "1.0.0"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/README.md:
--------------------------------------------------------------------------------
1 | # Contributing to Create React App's E2E tests
2 |
3 | This is an end to end kitchensink test suite, but has multiple usages in it.
4 |
5 | ## Running the test suite
6 |
7 | Tests are automatically run by the CI tools.
8 | In order to run them locally, without having to manually install and configure everything, the `yarn e2e:docker` CLI command can be used.
9 |
10 | This is a simple script that runs a **Docker** container, where the node version, git branch to clone, test suite, and whether to run it with `yarn` or `npm` can be chosen.
11 | Simply run `yarn e2e:docker -- --help` to get additional info.
12 |
13 | If you need guidance installing **Docker**, you should follow their [official docs](https://docs.docker.com/engine/installation/).
14 |
15 | ## Writing tests
16 |
17 | Each time a new feature is added, it is advised to add at least one test covering it.
18 |
19 | Features are categorized by their scope:
20 |
21 | - *env*, all those which deal with environment variables (e.g. `NODE_PATH`)
22 |
23 | - *syntax*, all those which showcase a single EcmaScript syntax feature that is expected to be transpiled by **Babel**
24 |
25 | - *webpack*, all those which make use of webpack settings, loaders or plugins
26 |
27 | ### Using it as Unit Tests
28 |
29 | In it's most basic for this serve as a collection of unit tests on a single functionality.
30 |
31 | Unit tests are written in a `src/features/**/*.test.js` file located in the same folder as the feature they test, and usually consist of a simple `ReactDOM.render` call.
32 |
33 | These tests are run by **jest** and the environment is `test`, so that it resembles how a **Create React App** application is tested.
34 |
35 | ### Using it as Integration Tests
36 |
37 | This suite tests how the single features as before behave while development and in production.
38 | A local HTTP server is started, then every single feature is loaded, one by one, to be tested.
39 |
40 | Test are written in `integration/{env|syntax|webpack}.test.js`, depending on their scope.
41 |
42 | For every test case added there is just a little chore to do:
43 |
44 | - a `case` statement must be added in `src/App.js`, which simply perform a dynamic `import()` of the feature
45 |
46 | - add a test case in the appropriate integration test file, which calls and awaits `initDOM` with the previous `SwitchCase` string
47 |
48 | An usual flow for the test itself is something similar to:
49 |
50 | - add an `id` attribute in a target HTML tag in the feature itself
51 |
52 | - since `initDOM` returns a `Document` element, the previous `id` attribute is used to target the feature's DOM and `expect` accordingly
53 |
54 | These tests are run by **mocha** (why not **jest**? See [this issue](https://github.com/facebook/jest/issues/2288)) and the environments used are both `development` and `production`.
55 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | node_modules
5 |
6 | # testing
7 | coverage
8 |
9 | # production
10 | build
11 |
12 | # misc
13 | .DS_Store
14 | .env
15 | npm-debug.log
16 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/integration/env.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import { expect } from 'chai';
11 | import initDOM from './initDOM';
12 |
13 | describe('Integration', () => {
14 | describe('Environment variables', () => {
15 | it('file env variables', async () => {
16 | const doc = await initDOM('file-env-variables');
17 |
18 | expect(
19 | doc.getElementById('feature-file-env-original-1').textContent
20 | ).to.equal('from-original-env-1');
21 | expect(
22 | doc.getElementById('feature-file-env-original-2').textContent
23 | ).to.equal('override-from-original-local-env-2');
24 |
25 | if (process.env.NODE_ENV === 'production') {
26 | expect(doc.getElementById('feature-file-env').textContent).to.equal(
27 | 'production'
28 | );
29 | expect(doc.getElementById('feature-file-env-x').textContent).to.equal(
30 | 'x-from-production-env'
31 | );
32 | } else {
33 | expect(doc.getElementById('feature-file-env').textContent).to.equal(
34 | 'development'
35 | );
36 | expect(doc.getElementById('feature-file-env-x').textContent).to.equal(
37 | 'x-from-development-env'
38 | );
39 | }
40 | });
41 |
42 | it('NODE_PATH', async () => {
43 | const doc = await initDOM('node-path');
44 |
45 | expect(
46 | doc.getElementById('feature-node-path').childElementCount
47 | ).to.equal(4);
48 | });
49 |
50 | it('PUBLIC_URL', async () => {
51 | const doc = await initDOM('public-url');
52 |
53 | const prefix =
54 | process.env.NODE_ENV === 'development'
55 | ? ''
56 | : 'http://www.example.org/spa';
57 | expect(doc.getElementById('feature-public-url').textContent).to.equal(
58 | `${prefix}.`
59 | );
60 | expect(
61 | doc.querySelector('head link[rel="shortcut icon"]').getAttribute('href')
62 | ).to.equal(`${prefix}/favicon.ico`);
63 | });
64 |
65 | it('shell env variables', async () => {
66 | const doc = await initDOM('shell-env-variables');
67 |
68 | expect(
69 | doc.getElementById('feature-shell-env-variables').textContent
70 | ).to.equal('fromtheshell.');
71 | });
72 | });
73 | });
74 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | const fs = require('fs');
11 | const http = require('http');
12 | const jsdom = require('jsdom');
13 | const path = require('path');
14 | const { expect } = require('chai');
15 |
16 | let getMarkup;
17 | let resourceLoader;
18 |
19 | if (process.env.E2E_FILE) {
20 | const file = path.isAbsolute(process.env.E2E_FILE)
21 | ? process.env.E2E_FILE
22 | : path.join(process.cwd(), process.env.E2E_FILE);
23 |
24 | const markup = fs.readFileSync(file, 'utf8');
25 | getMarkup = () => markup;
26 |
27 | const pathPrefix = process.env.PUBLIC_URL.replace(/^https?:\/\/[^/]+\/?/, '');
28 |
29 | resourceLoader = (resource, callback) =>
30 | callback(
31 | null,
32 | fs.readFileSync(
33 | path.join(
34 | path.dirname(file),
35 | resource.url.pathname.replace(pathPrefix, '')
36 | ),
37 | 'utf8'
38 | )
39 | );
40 | } else if (process.env.E2E_URL) {
41 | getMarkup = () =>
42 | new Promise(resolve => {
43 | http.get(process.env.E2E_URL, res => {
44 | let rawData = '';
45 | res.on('data', chunk => (rawData += chunk));
46 | res.on('end', () => resolve(rawData));
47 | });
48 | });
49 |
50 | resourceLoader = (resource, callback) => resource.defaultFetch(callback);
51 | } else {
52 | it.only(
53 | 'can run jsdom (at least one of "E2E_FILE" or "E2E_URL" environment variables must be provided)',
54 | () => {
55 | expect(
56 | new Error("This isn't the error you are looking for.")
57 | ).to.be.undefined();
58 | }
59 | );
60 | }
61 |
62 | export default feature =>
63 | new Promise(async resolve => {
64 | const markup = await getMarkup();
65 | const host = process.env.E2E_URL || 'http://www.example.org/spa:3000';
66 | const doc = jsdom.jsdom(markup, {
67 | features: {
68 | FetchExternalResources: ['script', 'css'],
69 | ProcessExternalResources: ['script'],
70 | },
71 | created: (_, win) =>
72 | win.addEventListener('ReactFeatureDidMount', () => resolve(doc), true),
73 | deferClose: true,
74 | resourceLoader,
75 | url: `${host}#${feature}`,
76 | virtualConsole: jsdom.createVirtualConsole().sendTo(console),
77 | });
78 |
79 | doc.close();
80 | });
81 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import { expect } from 'chai';
11 | import initDOM from './initDOM';
12 |
13 | describe('Integration', () => {
14 | describe('Webpack plugins', () => {
15 | it('css inclusion', async () => {
16 | const doc = await initDOM('css-inclusion');
17 |
18 | expect(
19 | doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '')
20 | ).to.match(/html\{/);
21 | expect(
22 | doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '')
23 | ).to.match(/#feature-css-inclusion\{background:.+;color:.+}/);
24 | });
25 |
26 | it('image inclusion', async () => {
27 | const doc = await initDOM('image-inclusion');
28 |
29 | expect(doc.getElementById('feature-image-inclusion').src).to.match(
30 | /^data:image\/jpeg;base64.+==$/
31 | );
32 | });
33 |
34 | it('no ext inclusion', async () => {
35 | const doc = await initDOM('no-ext-inclusion');
36 |
37 | expect(doc.getElementById('feature-no-ext-inclusion').href).to.match(
38 | /\/static\/media\/aFileWithoutExt\.[a-f0-9]{8}\.bin$/
39 | );
40 | });
41 |
42 | it('json inclusion', async () => {
43 | const doc = await initDOM('json-inclusion');
44 |
45 | expect(doc.getElementById('feature-json-inclusion').textContent).to.equal(
46 | 'This is an abstract.'
47 | );
48 | });
49 |
50 | it('linked modules', async () => {
51 | const doc = await initDOM('linked-modules');
52 |
53 | expect(doc.getElementById('feature-linked-modules').textContent).to.equal(
54 | '2.0.0'
55 | );
56 | });
57 |
58 | it('svg inclusion', async () => {
59 | const doc = await initDOM('svg-inclusion');
60 |
61 | expect(doc.getElementById('feature-svg-inclusion').src).to.match(
62 | /\/static\/media\/logo\..+\.svg$/
63 | );
64 | });
65 |
66 | it('unknown ext inclusion', async () => {
67 | const doc = await initDOM('unknown-ext-inclusion');
68 |
69 | expect(doc.getElementById('feature-unknown-ext-inclusion').href).to.match(
70 | /\/static\/media\/aFileWithExt\.[a-f0-9]{8}\.unknown$/
71 | );
72 | });
73 | });
74 | });
75 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shrynx/react-super-scripts/4e8b790e0378fac5ffd53ffd2fc6a1c1533e45b4/packages/react-scripts/fixtures/kitchensink/public/favicon.ico
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | React App
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/absoluteLoad.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | export default () => [
11 | { id: 1, name: '1' },
12 | { id: 2, name: '2' },
13 | { id: 3, name: '3' },
14 | { id: 4, name: '4' },
15 | ];
16 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 |
12 | export default () =>
13 |
14 |
15 | {process.env.REACT_APP_ORIGINAL_1}
16 |
17 |
18 | {process.env.REACT_APP_ORIGINAL_2}
19 |
20 |
21 | {process.env.REACT_APP_DEVELOPMENT}
22 | {process.env.REACT_APP_PRODUCTION}
23 |
24 |
25 | {process.env.REACT_APP_X}
26 |
27 | ;
28 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import FileEnvVariables from './FileEnvVariables';
13 |
14 | describe('.env variables', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | ReactDOM.render(
;
15 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import ImageInclusion from './ImageInclusion';
13 |
14 | describe('image inclusion', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | ReactDOM.render(
15 | {abstract}
16 | ;
17 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import JsonInclusion from './JsonInclusion';
13 |
14 | describe('JSON inclusion', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | ReactDOM.render(
;
14 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/webpack/SvgInclusion.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import SvgInclusion from './SvgInclusion';
13 |
14 | describe('svg inclusion', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | ReactDOM.render(",
5 | "description": "adds super powers to create-react-app and allows custom configs without ejecting",
6 | "repository": "shrynx/react-super-scripts",
7 | "license": "BSD-3-Clause",
8 | "engines": {
9 | "node": ">=6"
10 | },
11 | "bugs": {
12 | "url": "https://github.com/shrynx/react-super-scripts/issues"
13 | },
14 | "files": [
15 | "bin",
16 | "config",
17 | "scripts",
18 | "template",
19 | "utils"
20 | ],
21 | "bin": {
22 | "react-scripts": "./bin/react-scripts.js"
23 | },
24 | "dependencies": {
25 | "autoprefixer": "7.1.1",
26 | "babel-core": "6.25.0",
27 | "babel-eslint": "7.2.3",
28 | "babel-jest": "20.0.3",
29 | "babel-loader": "7.0.0",
30 | "babel-preset-react-app": "^3.0.1",
31 | "babel-preset-react-hmre": "^1.1.1",
32 | "babel-runtime": "6.23.0",
33 | "case-sensitive-paths-webpack-plugin": "2.1.1",
34 | "chalk": "1.1.3",
35 | "css-loader": "0.28.4",
36 | "dotenv": "4.0.0",
37 | "eslint": "4.1.1",
38 | "eslint-config-react-app": "^1.0.5",
39 | "eslint-loader": "1.9.0",
40 | "eslint-plugin-flowtype": "2.34.0",
41 | "eslint-plugin-import": "2.7.0",
42 | "eslint-plugin-jsx-a11y": "5.1.1",
43 | "eslint-plugin-react": "7.1.0",
44 | "extract-text-webpack-plugin": "2.1.2",
45 | "file-loader": "0.11.2",
46 | "fs-extra": "3.0.1",
47 | "html-webpack-plugin": "2.29.0",
48 | "image-webpack-loader": "^3.3.1",
49 | "jest": "20.0.4",
50 | "less": "^2.7.2",
51 | "less-loader": "^4.0.5",
52 | "name-all-modules-plugin": "^1.0.1",
53 | "node-sass": "^4.5.3",
54 | "object-assign": "4.1.1",
55 | "postcss-flexbugs-fixes": "3.0.0",
56 | "postcss-loader": "2.0.6",
57 | "progress-bar-webpack-plugin": "^1.10.0",
58 | "promise": "7.1.1",
59 | "react-dev-utils": "^3.0.2",
60 | "react-error-overlay": "^1.0.9",
61 | "sass-loader": "^6.0.6",
62 | "script-ext-html-webpack-plugin": "^1.8.5",
63 | "style-loader": "0.18.2",
64 | "sw-precache-webpack-plugin": "0.11.3",
65 | "url-loader": "0.5.9",
66 | "webpack": "2.6.1",
67 | "webpack-dashboard": "^0.4.0",
68 | "webpack-dev-server": "2.5.1",
69 | "webpack-manifest-plugin": "1.1.0",
70 | "whatwg-fetch": "2.0.3"
71 | },
72 | "devDependencies": {
73 | "react": "^15.5.4",
74 | "react-dom": "^15.5.4"
75 | },
76 | "optionalDependencies": {
77 | "fsevents": "1.1.2"
78 | },
79 | "react_super_scripts": {
80 | "dashboard": true
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/packages/react-scripts/scripts/test.js:
--------------------------------------------------------------------------------
1 | // @remove-on-eject-begin
2 | /**
3 | * Copyright (c) 2015-present, Facebook, Inc.
4 | * All rights reserved.
5 | *
6 | * This source code is licensed under the BSD-style license found in the
7 | * LICENSE file in the root directory of this source tree. An additional grant
8 | * of patent rights can be found in the PATENTS file in the same directory.
9 | */
10 | // @remove-on-eject-end
11 | 'use strict';
12 |
13 | // Do this as the first thing so that any code reading it knows the right env.
14 | process.env.BABEL_ENV = 'test';
15 | process.env.NODE_ENV = 'test';
16 | process.env.PUBLIC_URL = '';
17 |
18 | // Makes the script crash on unhandled rejections instead of silently
19 | // ignoring them. In the future, promise rejections that are not handled will
20 | // terminate the Node.js process with a non-zero exit code.
21 | process.on('unhandledRejection', err => {
22 | throw err;
23 | });
24 |
25 | // Ensure environment variables are read.
26 | require('../config/env');
27 |
28 | const jest = require('jest');
29 | const argv = process.argv.slice(2);
30 |
31 | // Watch unless on CI or in coverage mode
32 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
33 | argv.push('--watch');
34 | }
35 |
36 | // @remove-on-eject-begin
37 | // This is not necessary after eject because we embed config into package.json.
38 | const createJestConfig = require('./utils/createJestConfig');
39 | const path = require('path');
40 | const paths = require('../config/paths');
41 | argv.push(
42 | '--config',
43 | JSON.stringify(
44 | createJestConfig(
45 | relativePath => path.resolve(__dirname, '..', relativePath),
46 | path.resolve(paths.appSrc, '..'),
47 | false
48 | )
49 | )
50 | );
51 | // @remove-on-eject-end
52 | jest.run(argv);
53 |
--------------------------------------------------------------------------------
/packages/react-scripts/scripts/utils/superScriptCOnfigOption.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const paths = require('../../config/paths');
4 |
5 | const packageConfig = require(paths.appPackageJson);
6 |
7 | const superScriptConfigOption = param => {
8 | if (packageConfig.react_super_scripts) {
9 | if (packageConfig.react_super_scripts[param]) {
10 | return packageConfig.react_super_scripts[param];
11 | } else {
12 | return false;
13 | }
14 | } else {
15 | return false;
16 | }
17 | };
18 |
19 | module.exports = superScriptConfigOption;
20 |
--------------------------------------------------------------------------------
/packages/react-scripts/template/gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
--------------------------------------------------------------------------------
/packages/react-scripts/template/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shrynx/react-super-scripts/4e8b790e0378fac5ffd53ffd2fc6a1c1533e45b4/packages/react-scripts/template/public/favicon.ico
--------------------------------------------------------------------------------
/packages/react-scripts/template/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
22 | React Super Script
23 |
24 |
25 |
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/packages/react-scripts/template/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "192x192",
8 | "type": "image/png"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/packages/react-scripts/template/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import logo from './logo.png';
3 | import './App.scss';
4 |
5 | class App extends Component {
6 | render() {
7 | return (
8 | the node version to use while testing [6]"
8 | echo " --git-branch the git branch to checkout for testing [the current one]"
9 | echo " --test-suite which test suite to use ('simple', installs', 'kitchensink', 'all') ['all']"
10 | echo " --yarn if present, use yarn as the package manager"
11 | echo " --interactive gain a bash shell after the test run"
12 | echo " --help print this message and exit"
13 | echo ""
14 | }
15 |
16 | cd $(dirname $0)
17 |
18 | node_version=6
19 | current_git_branch=`git rev-parse --abbrev-ref HEAD`
20 | git_branch=${current_git_branch}
21 | use_yarn=no
22 | test_suite=all
23 | interactive=false
24 |
25 | while [ "$1" != "" ]; do
26 | case $1 in
27 | "--node-version")
28 | shift
29 | node_version=$1
30 | ;;
31 | "--git-branch")
32 | shift
33 | git_branch=$1
34 | ;;
35 | "--yarn")
36 | use_yarn=yes
37 | ;;
38 | "--test-suite")
39 | shift
40 | test_suite=$1
41 | ;;
42 | "--interactive")
43 | interactive=true
44 | ;;
45 | "--help")
46 | print_help
47 | exit 0
48 | ;;
49 | esac
50 | shift
51 | done
52 |
53 | test_command="./tasks/e2e-simple.sh && ./tasks/e2e-kitchensink.sh && ./tasks/e2e-installs.sh"
54 | case ${test_suite} in
55 | "all")
56 | ;;
57 | "simple")
58 | test_command="./tasks/e2e-simple.sh"
59 | ;;
60 | "kitchensink")
61 | test_command="./tasks/e2e-kitchensink.sh"
62 | ;;
63 | "installs")
64 | test_command="./tasks/e2e-installs.sh"
65 | ;;
66 | *)
67 | ;;
68 | esac
69 |
70 | read -r -d '' apply_changes <<- CMD
71 | cd /var/create-react-app
72 | git config --global user.name "Create React App"
73 | git config --global user.email "cra@email.com"
74 | git stash save -u
75 | git stash show -p > patch
76 | git diff 4b825dc642cb6eb9a060e54bf8d69288fbee4904 stash^3 >> patch
77 | git stash pop
78 | cd -
79 | mv /var/create-react-app/patch .
80 | git apply patch
81 | rm patch
82 | CMD
83 |
84 | if [ ${git_branch} != ${current_git_branch} ]; then
85 | apply_changes=''
86 | fi
87 |
88 | read -r -d '' command <<- CMD
89 | echo "prefix=~/.npm" > ~/.npmrc
90 | mkdir ~/.npm
91 | export PATH=\$PATH:~/.npm/bin
92 | set -x
93 | git clone /var/create-react-app create-react-app --branch ${git_branch}
94 | cd create-react-app
95 | ${apply_changes}
96 | node --version
97 | npm --version
98 | set +x
99 | ${test_command} && echo -e "\n\e[1;32m✔ Job passed\e[0m" || echo -e "\n\e[1;31m✘ Job failes\e[0m"
100 | $([[ ${interactive} == 'true' ]] && echo 'bash')
101 | CMD
102 |
103 | docker run \
104 | --env CI=true \
105 | --env NPM_CONFIG_QUIET=true \
106 | --env USE_YARN=${use_yarn} \
107 | --tty \
108 | --user node \
109 | --volume ${PWD}/..:/var/create-react-app \
110 | --workdir /home/node \
111 | $([[ ${interactive} == 'true' ]] && echo '--interactive') \
112 | node:${node_version} \
113 | bash -c "${command}"
114 |
--------------------------------------------------------------------------------
/tasks/release.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | # Copyright (c) 2015-present, Facebook, Inc.
3 | # All rights reserved.
4 | #
5 | # This source code is licensed under the BSD-style license found in the
6 | # LICENSE file in the root directory of this source tree. An additional grant
7 | # of patent rights can be found in the PATENTS file in the same directory.
8 |
9 | # ******************************************************************************
10 | # This releases an update to the `react-scripts` package.
11 | # Don't use `npm publish` for it.
12 | # Read the release instructions:
13 | # https://github.com/facebookincubator/create-react-app/blob/master/CONTRIBUTING.md#cutting-a-release
14 | # ******************************************************************************
15 |
16 | # Start in tasks/ even if run from root directory
17 | cd "$(dirname "$0")"
18 |
19 | # Exit the script on any command with non 0 return code
20 | # We assume that all the commands in the pipeline set their return code
21 | # properly and that we do not need to validate that the output is correct
22 | set -e
23 |
24 | # Echo every command being executed
25 | set -x
26 |
27 | # Go to root
28 | cd ..
29 | root_path=$PWD
30 |
31 | # You can only release with npm >= 3
32 | if [ $(npm -v | head -c 1) -lt 3 ]; then
33 | echo "Releasing requires npm >= 3. Aborting.";
34 | exit 1;
35 | fi;
36 |
37 | if [ -n "$(git status --porcelain)" ]; then
38 | echo "Your git status is not clean. Aborting.";
39 | exit 1;
40 | fi
41 |
42 | cd "$root_path"
43 | # Compile
44 | cd packages/react-error-overlay/
45 | npm run build:prod
46 | cd ../..
47 | # Go!
48 | ./node_modules/.bin/lerna publish --independent "$@"
49 |
--------------------------------------------------------------------------------
/tasks/replace-own-deps.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | /**
3 | * Copyright (c) 2015-present, Facebook, Inc.
4 | * All rights reserved.
5 | *
6 | * This source code is licensed under the BSD-style license found in the
7 | * LICENSE file in the root directory of this source tree. An additional grant
8 | * of patent rights can be found in the PATENTS file in the same directory.
9 | */
10 | 'use strict';
11 |
12 | // Replaces internal dependencies in package.json with local package paths.
13 |
14 | const fs = require('fs');
15 | const path = require('path');
16 |
17 | const packagesDir = path.join(__dirname, '../packages');
18 | const pkgFilename = path.join(packagesDir, 'react-scripts/package.json');
19 | const data = require(pkgFilename);
20 |
21 | fs.readdirSync(packagesDir).forEach((name) => {
22 | if (data.dependencies[name]) {
23 | data.dependencies[name] = 'file:' + path.join(packagesDir, name);
24 | }
25 | })
26 |
27 | fs.writeFile(pkgFilename, JSON.stringify(data, null, 2), 'utf8', (err) => {
28 | if (err) throw err;
29 | console.log('Replaced local dependencies.');
30 | });
31 |
--------------------------------------------------------------------------------
/template/README.md:
--------------------------------------------------------------------------------
1 | This page has moved!
2 | Please update your link to point [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) instead. 3 | 4 | Sorry for the inconvenience! 5 | --------------------------------------------------------------------------------
",
18 | "highlight": false,
19 | "lineNumber": 6,
20 | },
21 | ScriptLine {
22 | "content": " {[1, 2].map(v => (",
23 | "highlight": false,
24 | "lineNumber": 7,
25 | },
26 | ScriptLine {
27 | "content": "
",
38 | "highlight": false,
39 | "lineNumber": 10,
40 | },
41 | ScriptLine {
42 | "content": " )",
43 | "highlight": false,
44 | "lineNumber": 11,
45 | },
46 | ],
47 | "_scriptCode": Array [
48 | ScriptLine {
49 | "content": " },",
50 | "highlight": false,
51 | "lineNumber": 41463,
52 | },
53 | ScriptLine {
54 | "content": " [1, 2].map(function (v) {",
55 | "highlight": false,
56 | "lineNumber": 41464,
57 | },
58 | ScriptLine {
59 | "content": " return _react2.default.createElement(",
60 | "highlight": false,
61 | "lineNumber": 41465,
62 | },
63 | ScriptLine {
64 | "content": " 'div',",
65 | "highlight": true,
66 | "lineNumber": 41466,
67 | },
68 | ScriptLine {
69 | "content": " {",
70 | "highlight": false,
71 | "lineNumber": 41467,
72 | },
73 | ScriptLine {
74 | "content": " __source: {",
75 | "highlight": false,
76 | "lineNumber": 41468,
77 | },
78 | ScriptLine {
79 | "content": " fileName: _jsxFileName,",
80 | "highlight": false,
81 | "lineNumber": 41469,
82 | },
83 | ],
84 | "columnNumber": null,
85 | "fileName": "/static/js/bundle.js",
86 | "functionName": "div",
87 | "lineNumber": 41466,
88 | },
89 | StackFrame {
90 | "_originalColumnNumber": null,
91 | "_originalFileName": "blabla.js",
92 | "_originalFunctionName": "unknown",
93 | "_originalLineNumber": 10,
94 | "_originalScriptCode": null,
95 | "_scriptCode": null,
96 | "columnNumber": null,
97 | "fileName": null,
98 | "functionName": null,
99 | "lineNumber": null,
100 | },
101 | ]
102 | `;
103 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/extract-source-map.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import { extractSourceMapUrl } from '../utils/getSourceMap';
11 |
12 | test('extracts last source map directive', async () => {
13 | const res = await extractSourceMapUrl(
14 | `test.js`,
15 | `//# sourceMappingURL=test.js.map\nconsole.log('a')\n//# sourceMappingURL=bundle.js.map`
16 | );
17 | expect(res).toBe('bundle.js.map');
18 | });
19 |
20 | test('errors when no source map', async () => {
21 | expect.assertions(1);
22 |
23 | const testFileName = 'test.js';
24 | try {
25 | await extractSourceMapUrl(
26 | testFileName,
27 | `console.log('hi')\n\nconsole.log('bye')`
28 | );
29 | } catch (e) {
30 | expect(e).toBe(`Cannot find a source map directive for ${testFileName}.`);
31 | }
32 | });
33 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/get-source-map.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import { getSourceMap } from '../utils/getSourceMap';
11 | import fs from 'fs';
12 | import { resolve } from 'path';
13 |
14 | test('finds an external source map', async () => {
15 | const file = fs
16 | .readFileSync(resolve(__dirname, '../../fixtures/bundle.mjs'))
17 | .toString('utf8');
18 | fetch.mockResponseOnce(
19 | fs
20 | .readFileSync(resolve(__dirname, '../../fixtures/bundle.mjs.map'))
21 | .toString('utf8')
22 | );
23 |
24 | const sm = await getSourceMap('/', file);
25 | expect(sm.getOriginalPosition(26122, 21)).toEqual({
26 | line: 7,
27 | column: 0,
28 | source: 'webpack:///packages/react-scripts/template/src/App.js',
29 | });
30 | });
31 |
32 | test('find an inline source map', async () => {
33 | const sourceName = 'test.js';
34 |
35 | const file = fs
36 | .readFileSync(resolve(__dirname, '../../fixtures/inline.mjs'))
37 | .toString('utf8');
38 | const fileO = fs
39 | .readFileSync(resolve(__dirname, '../../fixtures/inline.es6.mjs'))
40 | .toString('utf8');
41 |
42 | const sm = await getSourceMap('/', file);
43 | expect(sm.getSources()).toEqual([sourceName]);
44 | expect(sm.getSource(sourceName)).toBe(fileO);
45 | expect(sm.getGeneratedPosition(sourceName, 5, 10)).toEqual({
46 | line: 10,
47 | column: 8,
48 | });
49 | });
50 |
51 | test('error on a source map with unsupported encoding', async () => {
52 | expect.assertions(2);
53 |
54 | const file = fs
55 | .readFileSync(resolve(__dirname, '../../fixtures/junk-inline.mjs'))
56 | .toString('utf8');
57 | try {
58 | await getSourceMap('/', file);
59 | } catch (e) {
60 | expect(e instanceof Error).toBe(true);
61 | expect(e.message).toBe(
62 | 'Sorry, non-base64 inline source-map encoding is not supported.'
63 | );
64 | }
65 | });
66 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/lines-around.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import { getLinesAround } from '../utils/getLinesAround';
11 |
12 | const arr = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
13 |
14 | test('should return lines around from a string', () => {
15 | expect(getLinesAround(4, 2, arr)).toMatchSnapshot();
16 | });
17 |
18 | test('should return lines around from an array', () => {
19 | expect(getLinesAround(4, 2, arr.join('\n'))).toMatchSnapshot();
20 | });
21 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/parser/__snapshots__/chrome.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`stack with eval 1`] = `
4 | Array [
5 | StackFrame {
6 | "_originalColumnNumber": null,
7 | "_originalFileName": null,
8 | "_originalFunctionName": null,
9 | "_originalLineNumber": null,
10 | "_originalScriptCode": null,
11 | "_scriptCode": null,
12 | "columnNumber": 18,
13 | "fileName": "file:///Users/joe/Documents/Development/OSS/stack-frame/index.html",
14 | "functionName": "e",
15 | "lineNumber": 25,
16 | },
17 | StackFrame {
18 | "_originalColumnNumber": null,
19 | "_originalFileName": null,
20 | "_originalFunctionName": null,
21 | "_originalLineNumber": null,
22 | "_originalScriptCode": null,
23 | "_scriptCode": null,
24 | "columnNumber": 9,
25 | "fileName": "file:///Users/joe/Documents/Development/OSS/stack-frame/index.html",
26 | "functionName": "eval",
27 | "lineNumber": 12,
28 | },
29 | StackFrame {
30 | "_originalColumnNumber": null,
31 | "_originalFileName": null,
32 | "_originalFunctionName": null,
33 | "_originalLineNumber": null,
34 | "_originalScriptCode": null,
35 | "_scriptCode": null,
36 | "columnNumber": 9,
37 | "fileName": "file:///Users/joe/Documents/Development/OSS/stack-frame/index.html",
38 | "functionName": "a",
39 | "lineNumber": 8,
40 | },
41 | StackFrame {
42 | "_originalColumnNumber": null,
43 | "_originalFileName": null,
44 | "_originalFunctionName": null,
45 | "_originalLineNumber": null,
46 | "_originalScriptCode": null,
47 | "_scriptCode": null,
48 | "columnNumber": 7,
49 | "fileName": "file:///Users/joe/Documents/Development/OSS/stack-frame/index.html",
50 | "functionName": null,
51 | "lineNumber": 32,
52 | },
53 | ]
54 | `;
55 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/parser/__snapshots__/react.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`15.y.z 1`] = `
4 | Array [
5 | StackFrame {
6 | "_originalColumnNumber": null,
7 | "_originalFileName": null,
8 | "_originalFunctionName": null,
9 | "_originalLineNumber": null,
10 | "_originalScriptCode": null,
11 | "_scriptCode": null,
12 | "columnNumber": null,
13 | "fileName": "FileA.js",
14 | "functionName": "div",
15 | "lineNumber": 9,
16 | },
17 | StackFrame {
18 | "_originalColumnNumber": null,
19 | "_originalFileName": null,
20 | "_originalFunctionName": null,
21 | "_originalLineNumber": null,
22 | "_originalScriptCode": null,
23 | "_scriptCode": null,
24 | "columnNumber": null,
25 | "fileName": "App.js",
26 | "functionName": "FileA",
27 | "lineNumber": 9,
28 | },
29 | StackFrame {
30 | "_originalColumnNumber": null,
31 | "_originalFileName": null,
32 | "_originalFunctionName": null,
33 | "_originalLineNumber": null,
34 | "_originalScriptCode": null,
35 | "_scriptCode": null,
36 | "columnNumber": null,
37 | "fileName": "App.js",
38 | "functionName": "div",
39 | "lineNumber": 8,
40 | },
41 | StackFrame {
42 | "_originalColumnNumber": null,
43 | "_originalFileName": null,
44 | "_originalFunctionName": null,
45 | "_originalLineNumber": null,
46 | "_originalScriptCode": null,
47 | "_scriptCode": null,
48 | "columnNumber": null,
49 | "fileName": "index.js",
50 | "functionName": "App",
51 | "lineNumber": 7,
52 | },
53 | ]
54 | `;
55 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/parser/__snapshots__/safari.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`stack with eval 1`] = `
4 | Array [
5 | StackFrame {
6 | "_originalColumnNumber": null,
7 | "_originalFileName": null,
8 | "_originalFunctionName": null,
9 | "_originalLineNumber": null,
10 | "_originalScriptCode": null,
11 | "_scriptCode": null,
12 | "columnNumber": 18,
13 | "fileName": "file:///Users/joe/Documents/Development/OSS/stack-frame/index.html",
14 | "functionName": "e",
15 | "lineNumber": 25,
16 | },
17 | StackFrame {
18 | "_originalColumnNumber": null,
19 | "_originalFileName": null,
20 | "_originalFunctionName": null,
21 | "_originalLineNumber": null,
22 | "_originalScriptCode": null,
23 | "_scriptCode": null,
24 | "columnNumber": 10,
25 | "fileName": "file:///Users/joe/Documents/Development/OSS/stack-frame/index.html",
26 | "functionName": "a",
27 | "lineNumber": 8,
28 | },
29 | StackFrame {
30 | "_originalColumnNumber": null,
31 | "_originalFileName": null,
32 | "_originalFunctionName": null,
33 | "_originalLineNumber": null,
34 | "_originalScriptCode": null,
35 | "_scriptCode": null,
36 | "columnNumber": 8,
37 | "fileName": "file:///Users/joe/Documents/Development/OSS/stack-frame/index.html",
38 | "functionName": "global code",
39 | "lineNumber": 32,
40 | },
41 | ]
42 | `;
43 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/__tests__/parser/chrome.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import { parse } from '../../utils/parser';
11 |
12 | test('stack with eval', () => {
13 | expect(
14 | parse(
15 | `TypeError: window[f] is not a function
16 | at e (file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:25:18)
17 | at eval (eval at c (file:///Users/joe/Documents/Development/OSS/stack-frame/index.html:12:9), {v}
",
28 | "highlight": true,
29 | "lineNumber": 8,
30 | },
31 | ScriptLine {
32 | "content": " ))}",
33 | "highlight": false,
34 | "lineNumber": 9,
35 | },
36 | ScriptLine {
37 | "content": " StackFrames with their original positions and code (when available).
18 | * @param {StackFrame[]} frames A set of StackFrames which contain (generated) code positions.
19 | * @param {number} [contextLines=3] The number of lines to provide before and after the line specified in the StackFrame.
20 | */
21 | async function map(
22 | frames: StackFrame[],
23 | contextLines: number = 3
24 | ): PromiseError, or similar object, into a set of StackFrames.
68 | * @alias parse
69 | */
70 | function parseError(error: Error | string | string[]): StackFrame[] {
71 | if (error == null) {
72 | throw new Error('You cannot pass a null object.');
73 | }
74 | if (typeof error === 'string') {
75 | return parseStack(error.split('\n'));
76 | }
77 | if (Array.isArray(error)) {
78 | return parseStack(error);
79 | }
80 | if (typeof error.stack === 'string') {
81 | return parseStack(error.stack.split('\n'));
82 | }
83 | throw new Error('The error you provided does not contain a stack trace.');
84 | }
85 |
86 | export { parseError as parse };
87 | export default parseError;
88 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/utils/stack-frame.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | //@flow
11 |
12 | /** A container holding a script line. */
13 | class ScriptLine {
14 | /** The line number of this line of source. */
15 | lineNumber: number;
16 | /** The content (or value) of this line of source. */
17 | content: string;
18 | /** Whether or not this line should be highlighted. Particularly useful for error reporting with context. */
19 | highlight: boolean;
20 |
21 | constructor(lineNumber: number, content: string, highlight: boolean = false) {
22 | this.lineNumber = lineNumber;
23 | this.content = content;
24 | this.highlight = highlight;
25 | }
26 | }
27 |
28 | /**
29 | * A representation of a stack frame.
30 | */
31 | class StackFrame {
32 | functionName: string | null;
33 | fileName: string | null;
34 | lineNumber: number | null;
35 | columnNumber: number | null;
36 |
37 | _originalFunctionName: string | null;
38 | _originalFileName: string | null;
39 | _originalLineNumber: number | null;
40 | _originalColumnNumber: number | null;
41 |
42 | _scriptCode: ScriptLine[] | null;
43 | _originalScriptCode: ScriptLine[] | null;
44 |
45 | constructor(
46 | functionName: string | null = null,
47 | fileName: string | null = null,
48 | lineNumber: number | null = null,
49 | columnNumber: number | null = null,
50 | scriptCode: ScriptLine[] | null = null,
51 | sourceFunctionName: string | null = null,
52 | sourceFileName: string | null = null,
53 | sourceLineNumber: number | null = null,
54 | sourceColumnNumber: number | null = null,
55 | sourceScriptCode: ScriptLine[] | null = null
56 | ) {
57 | this.functionName = functionName;
58 |
59 | this.fileName = fileName;
60 | this.lineNumber = lineNumber;
61 | this.columnNumber = columnNumber;
62 |
63 | this._originalFunctionName = sourceFunctionName;
64 | this._originalFileName = sourceFileName;
65 | this._originalLineNumber = sourceLineNumber;
66 | this._originalColumnNumber = sourceColumnNumber;
67 |
68 | this._scriptCode = scriptCode;
69 | this._originalScriptCode = sourceScriptCode;
70 | }
71 |
72 | /**
73 | * Returns the name of this function.
74 | */
75 | getFunctionName(): string | null {
76 | return this.functionName;
77 | }
78 |
79 | /**
80 | * Returns the source of the frame.
81 | * This contains the file name, line number, and column number when available.
82 | */
83 | getSource(): string {
84 | let str = '';
85 | if (this.fileName != null) {
86 | str += this.fileName + ':';
87 | }
88 | if (this.lineNumber != null) {
89 | str += this.lineNumber + ':';
90 | }
91 | if (this.columnNumber != null) {
92 | str += this.columnNumber + ':';
93 | }
94 | return str.slice(0, -1);
95 | }
96 |
97 | /**
98 | * Returns a pretty version of this stack frame.
99 | */
100 | toString(): string {
101 | const f = this.getFunctionName();
102 | if (f == null) {
103 | return this.getSource();
104 | }
105 | return `${f} (${this.getSource()})`;
106 | }
107 | }
108 |
109 | export { StackFrame, ScriptLine };
110 | export default StackFrame;
111 |
--------------------------------------------------------------------------------
/packages/react-error-overlay/src/utils/warnings.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | // @flow
11 | import type { ReactFrame } from '../effects/proxyConsole';
12 |
13 | function stripInlineStacktrace(message: string): string {
14 | return message.split('\n').filter(line => !line.match(/^\s*in/)).join('\n'); // " in Foo"
15 | }
16 |
17 | function massage(
18 | warning: string,
19 | frames: ReactFrame[]
20 | ): { message: string, stack: string } {
21 | let message = stripInlineStacktrace(warning);
22 |
23 | // Reassemble the stack with full filenames provided by React
24 | let stack = '';
25 | let lastFilename;
26 | let lastLineNumber;
27 | for (let index = 0; index < frames.length; ++index) {
28 | const { fileName, lineNumber } = frames[index];
29 | if (fileName == null || lineNumber == null) {
30 | continue;
31 | }
32 |
33 | // TODO: instead, collapse them in the UI
34 | if (
35 | fileName === lastFilename &&
36 | typeof lineNumber === 'number' &&
37 | typeof lastLineNumber === 'number' &&
38 | Math.abs(lineNumber - lastLineNumber) < 3
39 | ) {
40 | continue;
41 | }
42 | lastFilename = fileName;
43 | lastLineNumber = lineNumber;
44 |
45 | let { name } = frames[index];
46 | name = name || '(anonymous function)';
47 | stack += `in ${name} (at ${fileName}:${lineNumber})\n`;
48 | }
49 |
50 | return { message, stack };
51 | }
52 |
53 | export { massage };
54 |
--------------------------------------------------------------------------------
/packages/react-scripts/.npmignore:
--------------------------------------------------------------------------------
1 | /fixtures
2 |
--------------------------------------------------------------------------------
/packages/react-scripts/bin/react-scripts.js:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | /**
3 | * Copyright (c) 2015-present, Facebook, Inc.
4 | * All rights reserved.
5 | *
6 | * This source code is licensed under the BSD-style license found in the
7 | * LICENSE file in the root directory of this source tree. An additional grant
8 | * of patent rights can be found in the PATENTS file in the same directory.
9 | */
10 |
11 | 'use strict';
12 |
13 | const spawn = require('react-dev-utils/crossSpawn');
14 | const script = process.argv[2];
15 | const args = process.argv.slice(3);
16 |
17 | switch (script) {
18 | case 'build':
19 | case 'eject':
20 | case 'start':
21 | case 'test': {
22 | const result = spawn.sync(
23 | 'node',
24 | [require.resolve('../scripts/' + script)].concat(args),
25 | { stdio: 'inherit' }
26 | );
27 | if (result.signal) {
28 | if (result.signal === 'SIGKILL') {
29 | console.log(
30 | 'The build failed because the process exited too early. ' +
31 | 'This probably means the system ran out of memory or someone called ' +
32 | '`kill -9` on the process.'
33 | );
34 | } else if (result.signal === 'SIGTERM') {
35 | console.log(
36 | 'The build failed because the process exited too early. ' +
37 | 'Someone might have called `kill` or `killall`, or the system could ' +
38 | 'be shutting down.'
39 | );
40 | }
41 | process.exit(1);
42 | }
43 | process.exit(result.status);
44 | break;
45 | }
46 | default:
47 | console.log('Unknown script "' + script + '".');
48 | console.log('Perhaps you need to update react-scripts?');
49 | console.log(
50 | 'See: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases'
51 | );
52 | break;
53 | }
54 |
--------------------------------------------------------------------------------
/packages/react-scripts/config/jest/babelTransform.js:
--------------------------------------------------------------------------------
1 | // @remove-file-on-eject
2 | /**
3 | * Copyright (c) 2014-present, Facebook, Inc. All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 | 'use strict';
10 |
11 | const babelJest = require('babel-jest');
12 |
13 | module.exports = babelJest.createTransformer({
14 | presets: [require.resolve('babel-preset-react-app')],
15 | babelrc: false,
16 | });
17 |
--------------------------------------------------------------------------------
/packages/react-scripts/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
1 | // @remove-on-eject-begin
2 | /**
3 | * Copyright (c) 2014-present, Facebook, Inc. All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 | // @remove-on-eject-end
10 | 'use strict';
11 |
12 | // This is a custom Jest transformer turning style imports into empty objects.
13 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
14 |
15 | module.exports = {
16 | process() {
17 | return 'module.exports = {};';
18 | },
19 | getCacheKey() {
20 | // The output is always the same.
21 | return 'cssTransform';
22 | },
23 | };
24 |
--------------------------------------------------------------------------------
/packages/react-scripts/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
1 | // @remove-on-eject-begin
2 | /**
3 | * Copyright (c) 2014-present, Facebook, Inc. All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 | // @remove-on-eject-end
10 | 'use strict';
11 |
12 | const path = require('path');
13 |
14 | // This is a custom Jest transformer turning file imports into filenames.
15 | // http://facebook.github.io/jest/docs/tutorial-webpack.html
16 |
17 | module.exports = {
18 | process(src, filename) {
19 | return `module.exports = ${JSON.stringify(path.basename(filename))};`;
20 | },
21 | };
22 |
--------------------------------------------------------------------------------
/packages/react-scripts/config/polyfills.js:
--------------------------------------------------------------------------------
1 | // @remove-on-eject-begin
2 | /**
3 | * Copyright (c) 2015-present, Facebook, Inc.
4 | * All rights reserved.
5 | *
6 | * This source code is licensed under the BSD-style license found in the
7 | * LICENSE file in the root directory of this source tree. An additional grant
8 | * of patent rights can be found in the PATENTS file in the same directory.
9 | */
10 | // @remove-on-eject-end
11 | 'use strict';
12 |
13 | if (typeof Promise === 'undefined') {
14 | // Rejection tracking prevents a common issue where React gets into an
15 | // inconsistent state due to an error, but it gets swallowed by a Promise,
16 | // and the user has no idea what causes React's erratic future behavior.
17 | require('promise/lib/rejection-tracking').enable();
18 | window.Promise = require('promise/lib/es6-extensions.js');
19 | }
20 |
21 | // fetch() polyfill for making API calls.
22 | require('whatwg-fetch');
23 |
24 | // Object.assign() is commonly used with React.
25 | // It will use the native implementation if it's present and isn't buggy.
26 | Object.assign = require('object-assign');
27 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react-app"],
3 | "plugins": ["babel-plugin-transform-es2015-modules-commonjs"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/.env:
--------------------------------------------------------------------------------
1 | REACT_APP_X = x-from-original-env
2 | REACT_APP_ORIGINAL_1 = from-original-env-1
3 | REACT_APP_ORIGINAL_2 = from-original-env-2
4 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/.env.development:
--------------------------------------------------------------------------------
1 | REACT_APP_X = x-from-development-env
2 | REACT_APP_DEVELOPMENT = development
3 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/.env.local:
--------------------------------------------------------------------------------
1 | REACT_APP_X = x-from-original-local-env
2 | REACT_APP_ORIGINAL_2 = override-from-original-local-env-2
3 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/.env.production:
--------------------------------------------------------------------------------
1 | REACT_APP_X = x-from-production-env
2 | REACT_APP_PRODUCTION = production
3 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/.flowconfig:
--------------------------------------------------------------------------------
1 | [ignore]
2 |
36 | {this.state.users.map(user =>
37 |
42 | );
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import NodePath from './NodePath';
13 |
14 | describe('NODE_PATH', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | return new Promise(resolve => {
18 | ReactDOM.render(
38 | {user.name}
39 |
40 | )}
41 |
39 | {this.state.users.map(user => {
40 | const [id, name] = user;
41 | return (
42 |
48 | );
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import ArrayDestructuring from './ArrayDestructuring';
13 |
14 | describe('array destructuring', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | return new Promise(resolve => {
18 | ReactDOM.render(
43 | {name}
44 |
45 | );
46 | })}
47 |
44 | {this.state.users.map(user =>
45 |
50 | );
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import ArraySpread from './ArraySpread';
13 |
14 | describe('array spread', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | return new Promise(resolve => {
18 | ReactDOM.render(
46 | {user.name}
47 |
48 | )}
49 |
44 | {this.state.users.map(user =>
45 |
50 | );
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import AsyncAwait from './AsyncAwait';
13 |
14 | describe('async/await', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | return new Promise(resolve => {
18 | ReactDOM.render(
46 | {user.name}
47 |
48 | )}
49 |
32 | {this.users.map(user =>
33 |
38 | );
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import ClassProperties from './ClassProperties';
13 |
14 | describe('class properties', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | return new Promise(resolve => {
18 | ReactDOM.render(
34 | {user.name}
35 |
36 | )}
37 |
44 | {this.state.users.map(user =>
45 |
50 | );
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import ComputedProperties from './ComputedProperties';
13 |
14 | describe('computed properties', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | return new Promise(resolve => {
18 | ReactDOM.render(
46 | {user.user_name}
47 |
48 | )}
49 |
56 | {this.state.users.map(user =>
57 |
62 | );
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import CustomInterpolation from './CustomInterpolation';
13 |
14 | describe('custom interpolation', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | return new Promise(resolve => {
18 | ReactDOM.render(
58 | {user.name}
59 |
60 | )}
61 |
44 | {this.state.users.map(user =>
45 |
50 | );
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import DefaultParameters from './DefaultParameters';
13 |
14 | describe('default parameters', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | return new Promise(resolve => {
18 | ReactDOM.render(
46 | {user.name}
47 |
48 | )}
49 |
46 | {this.state.users.map(user =>
47 |
52 | );
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import DestructuringAndAwait from './DestructuringAndAwait';
13 |
14 | describe('destructuring and await', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | return new Promise(resolve => {
18 | ReactDOM.render(
48 | {user.name}
49 |
50 | )}
51 |
46 | {this.state.users.map(user =>
47 |
52 | );
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import Generators from './Generators';
13 |
14 | describe('generators', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | return new Promise(resolve => {
18 | ReactDOM.render(
48 | {user.name}
49 |
50 | )}
51 |
44 | {this.state.users.map(user => {
45 | const { id, name } = user;
46 | return (
47 |
53 | );
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import ObjectDestructuring from './ObjectDestructuring';
13 |
14 | describe('object destructuring', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | return new Promise(resolve => {
18 | ReactDOM.render(
48 | {name}
49 |
50 | );
51 | })}
52 |
44 | {this.state.users.map(user =>
45 |
50 | );
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import ObjectSpread from './ObjectSpread';
13 |
14 | describe('object spread', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | return new Promise(resolve => {
18 | ReactDOM.render(
46 | {user.name}: {user.age}
47 |
48 | )}
49 |
45 | {this.state.users.map(user =>
46 |
51 | );
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 |
13 | describe('promises', () => {
14 | it('renders without crashing', () => {
15 | const div = document.createElement('div');
16 | return import('./Promises').then(({ default: Promises }) => {
17 | return new Promise(resolve => {
18 | ReactDOM.render(
47 | {user.name}
48 |
49 | )}
50 |
44 | {this.state.users.map(user =>
45 |
50 | );
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import RestAndDefault from './RestAndDefault';
13 |
14 | describe('rest + default', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | return new Promise(resolve => {
18 | ReactDOM.render(
46 | {user.name}
47 |
48 | )}
49 |
44 | {this.state.users.map(user =>
45 |
50 | );
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import RestParameters from './RestParameters';
13 |
14 | describe('rest parameters', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | return new Promise(resolve => {
18 | ReactDOM.render(
46 | {user.name}
47 |
48 | )}
49 |
44 | {this.state.users.map(user =>
45 |
50 | );
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) 2015-present, Facebook, Inc.
3 | * All rights reserved.
4 | *
5 | * This source code is licensed under the BSD-style license found in the
6 | * LICENSE file in the root directory of this source tree. An additional grant
7 | * of patent rights can be found in the PATENTS file in the same directory.
8 | */
9 |
10 | import React from 'react';
11 | import ReactDOM from 'react-dom';
12 | import TemplateInterpolation from './TemplateInterpolation';
13 |
14 | describe('template interpolation', () => {
15 | it('renders without crashing', () => {
16 | const div = document.createElement('div');
17 | return new Promise(resolve => {
18 | ReactDOM.render(
46 | {user.name}
47 |
48 | )}
49 | We love useless text.
; 14 | -------------------------------------------------------------------------------- /packages/react-scripts/fixtures/kitchensink/src/features/webpack/CssInclusion.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | import React from 'react'; 11 | import ReactDOM from 'react-dom'; 12 | import CssInclusion from './CssInclusion'; 13 | 14 | describe('css inclusion', () => { 15 | it('renders without crashing', () => { 16 | const div = document.createElement('div'); 17 | ReactDOM.render(21 | {v} 22 |
23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /packages/react-scripts/fixtures/kitchensink/src/features/webpack/LinkedModules.test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2015-present, Facebook, Inc. 3 | * All rights reserved. 4 | * 5 | * This source code is licensed under the BSD-style license found in the 6 | * LICENSE file in the root directory of this source tree. An additional grant 7 | * of patent rights can be found in the PATENTS file in the same directory. 8 | */ 9 | 10 | import React from 'react'; 11 | import ReactDOM from 'react-dom'; 12 | import { test, version } from 'test-integrity'; 13 | import LinkedModules from './LinkedModules'; 14 | 15 | describe('linked modules', () => { 16 | it('has integrity', () => { 17 | expect(test()); 18 | expect(version() === '2.0.0'); 19 | }); 20 | 21 | it('renders without crashing', () => { 22 | const div = document.createElement('div'); 23 | ReactDOM.render(
9 |
52 | );
53 | }
54 | }
55 |
56 | export default App;
57 |
--------------------------------------------------------------------------------
/packages/react-scripts/template/src/App.scss:
--------------------------------------------------------------------------------
1 | .app {
2 | width: 100%;
3 | .header {
4 | align-items: center;
5 | background-color: #2a2c26;
6 | display: flex;
7 | flex-direction: column;
8 | justify-content: center;
9 | padding: 40px;
10 | .logo {
11 | height: 80px;
12 | }
13 | .title {
14 | color: #fff;
15 | font-weight: normal;
16 | margin-top: 40px;
17 | }
18 | .subtitle {
19 | color: #fff;
20 | text-align: center;
21 | }
22 | }
23 | .description {
24 | margin: 20% 5% 0;
25 | .links {
26 | align-items: center;
27 | display: flex;
28 | flex-direction: row;
29 | justify-content: space-between;
30 | text-align: center;
31 | a {
32 | color: #fff;
33 | text-decoration: none;
34 | div {
35 | flex-basis: auto;
36 | width: 110px;
37 | height: 40px;
38 | line-height: 40px;
39 | border-radius: 5px;
40 | }
41 | }
42 | .npm {
43 | background: #cb3837;
44 | &:hover,
45 | :active {
46 | background: #b21f1e;
47 | }
48 | }
49 | .github {
50 | background: #474c55;
51 | &:hover,
52 | :active {
53 | background: #2e333c;
54 | }
55 | }
56 | .readme {
57 | background: #07a617;
58 | &:hover,
59 | :active {
60 | background: #007300;
61 | }
62 | }
63 | }
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/packages/react-scripts/template/src/App.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 |
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
7 | ReactDOM.render(
10 |
11 |
26 | 12 | 13 | ⚡ 14 | 15 | react 16 | -super-scripts 17 | 18 | ⚡ 19 | 20 |
21 |
22 | adds super powers to create-react-app and allows custom configs
23 | without ejecting
24 |
25 |
27 |
50 |
51 | 2 | Please update your link to point [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) instead. 3 | 4 | Sorry for the inconvenience! 5 | --------------------------------------------------------------------------------