@teambit/react 0.0.558 → 0.0.559
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/eslint/eslintrc.js +12 -0
- package/jest/css-transform.js +12 -0
- package/jest/file-transform.js +38 -0
- package/jest/jest.config.js +30 -0
- package/jest/setupTests.js +7 -0
- package/jest/transformer.js +41 -0
- package/package.json +54 -47
- package/prettier/prettier.config.js +5 -0
- package/react.docs.mdx +8 -0
- package/typescript/tsconfig.build.json +22 -0
- package/typescript/tsconfig.json +18 -0
- package/webpack/format-webpack-messages.js +102 -0
- package/webpack/launch-editor-endpoint.js +8 -0
- package/webpack/react-hot-dev-client.js +274 -0
- package/webpack/refresh.js +16 -0
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// Using object
|
|
2
|
+
import '@teambit/react.eslint-config-bit-react';
|
|
3
|
+
|
|
4
|
+
module.exports = {
|
|
5
|
+
extends: [require.resolve('@teambit/react.eslint-config-bit-react')],
|
|
6
|
+
parserOptions: {
|
|
7
|
+
// parser: require.resolve('@typescript-eslint/parser'),
|
|
8
|
+
// createDefaultProgram: true,
|
|
9
|
+
// resolve the env tsconfig.
|
|
10
|
+
project: require.resolve('../typescript/tsconfig.json'),
|
|
11
|
+
},
|
|
12
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// This is a custom Jest transformer turning style imports into empty objects.
|
|
2
|
+
// http://facebook.github.io/jest/docs/en/webpack.html
|
|
3
|
+
|
|
4
|
+
module.exports = {
|
|
5
|
+
process() {
|
|
6
|
+
return 'module.exports = {};';
|
|
7
|
+
},
|
|
8
|
+
getCacheKey() {
|
|
9
|
+
// The output is always the same.
|
|
10
|
+
return 'cssTransform';
|
|
11
|
+
},
|
|
12
|
+
};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
const path = require('path');
|
|
2
|
+
const camelcase = require('camelcase');
|
|
3
|
+
|
|
4
|
+
// This is a custom Jest transformer turning file imports into filenames.
|
|
5
|
+
// http://facebook.github.io/jest/docs/en/webpack.html
|
|
6
|
+
|
|
7
|
+
module.exports = {
|
|
8
|
+
process(src, filename) {
|
|
9
|
+
const assetFilename = JSON.stringify(path.basename(filename));
|
|
10
|
+
|
|
11
|
+
if (filename.match(/\.svg$/)) {
|
|
12
|
+
// Based on how SVGR generates a component name:
|
|
13
|
+
// https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
|
|
14
|
+
const pascalCaseFilename = camelcase(path.parse(filename).name, {
|
|
15
|
+
pascalCase: true,
|
|
16
|
+
});
|
|
17
|
+
const componentName = `Svg${pascalCaseFilename}`;
|
|
18
|
+
return `const React = require('react');
|
|
19
|
+
module.exports = {
|
|
20
|
+
__esModule: true,
|
|
21
|
+
default: ${assetFilename},
|
|
22
|
+
ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
|
|
23
|
+
return {
|
|
24
|
+
$$typeof: Symbol.for('react.element'),
|
|
25
|
+
type: 'svg',
|
|
26
|
+
ref: ref,
|
|
27
|
+
key: null,
|
|
28
|
+
props: Object.assign({}, props, {
|
|
29
|
+
children: ${assetFilename}
|
|
30
|
+
})
|
|
31
|
+
};
|
|
32
|
+
}),
|
|
33
|
+
};`;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
return `module.exports = ${assetFilename};`;
|
|
37
|
+
},
|
|
38
|
+
};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
// "roots": [
|
|
3
|
+
// "<rootDir>/src"
|
|
4
|
+
// ],
|
|
5
|
+
// "collectCoverageFrom": [
|
|
6
|
+
// "src/**/*.{js,jsx,ts,tsx}",
|
|
7
|
+
// "!src/**/*.d.ts"
|
|
8
|
+
// ],
|
|
9
|
+
setupFiles: [require.resolve('react-app-polyfill/jsdom')],
|
|
10
|
+
setupFilesAfterEnv: [require.resolve('./setupTests.js')],
|
|
11
|
+
// "testMatch": [
|
|
12
|
+
// "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
|
|
13
|
+
// "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
|
|
14
|
+
// ],
|
|
15
|
+
testEnvironment: require.resolve('jest-environment-jsdom'),
|
|
16
|
+
transform: {
|
|
17
|
+
'^.+\\.(js|jsx|ts|tsx)$': require.resolve('./transformer'),
|
|
18
|
+
'^.+\\.css$': require.resolve('./css-transform.js'),
|
|
19
|
+
'^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': require.resolve('./file-transform.js'),
|
|
20
|
+
// '^(?!.*\\.(svg|png|jpg|jpeg|gif|webp|woff|ttf|woff2)$)': require.resolve('./file-transform.js'),
|
|
21
|
+
},
|
|
22
|
+
transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$', '^.+\\.module\\.(css|sass|scss)$'],
|
|
23
|
+
modulePaths: [],
|
|
24
|
+
moduleNameMapper: {
|
|
25
|
+
'^react-native$': require.resolve('react-native-web'),
|
|
26
|
+
'^.+\\.module\\.(css|sass|scss)$': require.resolve('identity-obj-proxy'),
|
|
27
|
+
},
|
|
28
|
+
moduleFileExtensions: ['web.js', 'js', 'web.ts', 'ts', 'web.tsx', 'tsx', 'json', 'web.jsx', 'jsx', 'node'],
|
|
29
|
+
// watchPlugins: [require.resolve('jest-watch-typeahead/filename'), require.resolve('jest-watch-typeahead/testname')],
|
|
30
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
// add babel-polyfill.
|
|
2
|
+
// require('babel-polyfill');
|
|
3
|
+
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
|
4
|
+
// allows you to do things like:
|
|
5
|
+
// expect(element).toHaveTextContent(/react/i)
|
|
6
|
+
// learn more: https://github.com/testing-library/jest-dom
|
|
7
|
+
require('@testing-library/jest-dom/extend-expect');
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/* eslint-disable global-require */
|
|
2
|
+
const { transform } = require('@babel/core');
|
|
3
|
+
|
|
4
|
+
const presets = [
|
|
5
|
+
require('@babel/preset-react'),
|
|
6
|
+
require('@babel/preset-typescript'),
|
|
7
|
+
require('babel-preset-jest'),
|
|
8
|
+
[
|
|
9
|
+
require('@babel/preset-env'),
|
|
10
|
+
{
|
|
11
|
+
targets: {
|
|
12
|
+
node: 12,
|
|
13
|
+
},
|
|
14
|
+
useBuiltIns: 'usage',
|
|
15
|
+
corejs: 3,
|
|
16
|
+
},
|
|
17
|
+
],
|
|
18
|
+
];
|
|
19
|
+
const plugins = [
|
|
20
|
+
[require('@babel/plugin-transform-modules-commonjs')],
|
|
21
|
+
[require('babel-plugin-transform-typescript-metadata')],
|
|
22
|
+
[require('@babel/plugin-proposal-decorators'), { legacy: true }],
|
|
23
|
+
[require('@babel/plugin-transform-runtime')],
|
|
24
|
+
[require('@babel/plugin-proposal-object-rest-spread')],
|
|
25
|
+
[require('@babel/plugin-proposal-class-properties')],
|
|
26
|
+
];
|
|
27
|
+
|
|
28
|
+
module.exports = {
|
|
29
|
+
process(src, filename) {
|
|
30
|
+
const result = transform(src, {
|
|
31
|
+
sourceMap: 'inline',
|
|
32
|
+
filename,
|
|
33
|
+
presets,
|
|
34
|
+
plugins,
|
|
35
|
+
babelrc: false,
|
|
36
|
+
configFile: false,
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
return result ? result.code : src;
|
|
40
|
+
},
|
|
41
|
+
};
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@teambit/react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.559",
|
|
4
4
|
"homepage": "https://bit.dev/teambit/react/react",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"componentId": {
|
|
7
7
|
"scope": "teambit.react",
|
|
8
8
|
"name": "react",
|
|
9
|
-
"version": "0.0.
|
|
9
|
+
"version": "0.0.559"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"react-error-boundary": "^3.0.0",
|
|
@@ -79,46 +79,46 @@
|
|
|
79
79
|
"@teambit/react.instructions.react.adding-compositions": "0.0.6",
|
|
80
80
|
"@teambit/react.instructions.react.adding-tests": "0.0.6",
|
|
81
81
|
"@teambit/design.ui.pages.standalone-not-found-page": "0.0.354",
|
|
82
|
-
"@teambit/preview": "0.0.
|
|
83
|
-
"@teambit/react.ui.error-fallback": "0.0.
|
|
84
|
-
"@teambit/react.ui.loader-fallback": "0.0.
|
|
85
|
-
"@teambit/compositions.ui.hooks.use-composition": "0.0.
|
|
82
|
+
"@teambit/preview": "0.0.559",
|
|
83
|
+
"@teambit/react.ui.error-fallback": "0.0.90",
|
|
84
|
+
"@teambit/react.ui.loader-fallback": "0.0.68",
|
|
85
|
+
"@teambit/compositions.ui.hooks.use-composition": "0.0.143",
|
|
86
86
|
"@teambit/design.ui.input.option-button": "0.0.26",
|
|
87
87
|
"@teambit/design.ui.tooltip": "0.0.352",
|
|
88
|
-
"@teambit/application": "0.0.
|
|
89
|
-
"@teambit/bundler": "0.0.
|
|
90
|
-
"@teambit/builder": "0.0.
|
|
91
|
-
"@teambit/isolator": "0.0.
|
|
92
|
-
"@teambit/toolbox.network.get-port": "0.0.
|
|
93
|
-
"@teambit/compiler": "0.0.
|
|
94
|
-
"@teambit/component.modules.component-url": "0.0.
|
|
95
|
-
"@teambit/component": "0.0.
|
|
96
|
-
"@teambit/envs": "0.0.
|
|
97
|
-
"@teambit/eslint": "0.0.
|
|
98
|
-
"@teambit/formatter": "0.0.
|
|
99
|
-
"@teambit/jest": "0.0.
|
|
100
|
-
"@teambit/linter": "0.0.
|
|
101
|
-
"@teambit/pkg": "0.0.
|
|
102
|
-
"@teambit/prettier": "0.0.
|
|
103
|
-
"@teambit/react.babel.bit-react-transformer": "0.0.
|
|
104
|
-
"@teambit/schema": "0.0.
|
|
105
|
-
"@teambit/tester": "0.0.
|
|
106
|
-
"@teambit/typescript": "0.0.
|
|
107
|
-
"@teambit/webpack": "0.0.
|
|
108
|
-
"@teambit/workspace": "0.0.
|
|
109
|
-
"@teambit/cli": "0.0.
|
|
110
|
-
"@teambit/dependency-resolver": "0.0.
|
|
111
|
-
"@teambit/generator": "0.0.
|
|
112
|
-
"@teambit/graphql": "0.0.
|
|
113
|
-
"@teambit/react.ui.highlighter-provider": "0.0.
|
|
114
|
-
"@teambit/compositions": "0.0.
|
|
115
|
-
"@teambit/ui": "0.0.
|
|
116
|
-
"@teambit/react.eslint-config-bit-react": "0.0.
|
|
117
|
-
"@teambit/mdx.modules.mdx-loader": "0.0.
|
|
118
|
-
"@teambit/webpack.modules.generate-style-loaders": "0.0.
|
|
119
|
-
"@teambit/webpack.modules.style-regexps": "0.0.
|
|
120
|
-
"@teambit/component-id": "0.0.
|
|
121
|
-
"@teambit/config": "0.0.
|
|
88
|
+
"@teambit/application": "0.0.201",
|
|
89
|
+
"@teambit/bundler": "0.0.559",
|
|
90
|
+
"@teambit/builder": "0.0.559",
|
|
91
|
+
"@teambit/isolator": "0.0.559",
|
|
92
|
+
"@teambit/toolbox.network.get-port": "0.0.93",
|
|
93
|
+
"@teambit/compiler": "0.0.559",
|
|
94
|
+
"@teambit/component.modules.component-url": "0.0.100",
|
|
95
|
+
"@teambit/component": "0.0.559",
|
|
96
|
+
"@teambit/envs": "0.0.559",
|
|
97
|
+
"@teambit/eslint": "0.0.559",
|
|
98
|
+
"@teambit/formatter": "0.0.110",
|
|
99
|
+
"@teambit/jest": "0.0.559",
|
|
100
|
+
"@teambit/linter": "0.0.559",
|
|
101
|
+
"@teambit/pkg": "0.0.559",
|
|
102
|
+
"@teambit/prettier": "0.0.110",
|
|
103
|
+
"@teambit/react.babel.bit-react-transformer": "0.0.473",
|
|
104
|
+
"@teambit/schema": "0.0.559",
|
|
105
|
+
"@teambit/tester": "0.0.559",
|
|
106
|
+
"@teambit/typescript": "0.0.559",
|
|
107
|
+
"@teambit/webpack": "0.0.559",
|
|
108
|
+
"@teambit/workspace": "0.0.559",
|
|
109
|
+
"@teambit/cli": "0.0.389",
|
|
110
|
+
"@teambit/dependency-resolver": "0.0.559",
|
|
111
|
+
"@teambit/generator": "0.0.559",
|
|
112
|
+
"@teambit/graphql": "0.0.559",
|
|
113
|
+
"@teambit/react.ui.highlighter-provider": "0.0.153",
|
|
114
|
+
"@teambit/compositions": "0.0.559",
|
|
115
|
+
"@teambit/ui": "0.0.559",
|
|
116
|
+
"@teambit/react.eslint-config-bit-react": "0.0.466",
|
|
117
|
+
"@teambit/mdx.modules.mdx-loader": "0.0.467",
|
|
118
|
+
"@teambit/webpack.modules.generate-style-loaders": "0.0.83",
|
|
119
|
+
"@teambit/webpack.modules.style-regexps": "0.0.112",
|
|
120
|
+
"@teambit/component-id": "0.0.379",
|
|
121
|
+
"@teambit/config": "0.0.400"
|
|
122
122
|
},
|
|
123
123
|
"devDependencies": {
|
|
124
124
|
"@types/react": "^17.0.8",
|
|
@@ -133,10 +133,10 @@
|
|
|
133
133
|
"@types/mocha": "5.2.7",
|
|
134
134
|
"@types/testing-library__jest-dom": "5.9.5",
|
|
135
135
|
"@types/jest": "^26.0.0",
|
|
136
|
-
"@teambit/react.aspect-docs.react": "0.0.
|
|
136
|
+
"@teambit/react.aspect-docs.react": "0.0.108"
|
|
137
137
|
},
|
|
138
138
|
"peerDependencies": {
|
|
139
|
-
"@teambit/legacy": "1.0.
|
|
139
|
+
"@teambit/legacy": "1.0.175",
|
|
140
140
|
"react-dom": "^16.8.0 || ^17.0.0",
|
|
141
141
|
"react": "^16.8.0 || ^17.0.0"
|
|
142
142
|
},
|
|
@@ -198,7 +198,7 @@
|
|
|
198
198
|
"@types/jest": "^26.0.0"
|
|
199
199
|
},
|
|
200
200
|
"peerDependencies": {
|
|
201
|
-
"@teambit/legacy": "1.0.
|
|
201
|
+
"@teambit/legacy": "1.0.175",
|
|
202
202
|
"react-dom": "^16.8.0 || ^17.0.0",
|
|
203
203
|
"react": "^16.8.0 || ^17.0.0"
|
|
204
204
|
}
|
|
@@ -207,10 +207,17 @@
|
|
|
207
207
|
"files": [
|
|
208
208
|
"dist",
|
|
209
209
|
"!dist/tsconfig.tsbuildinfo",
|
|
210
|
-
"
|
|
211
|
-
"
|
|
212
|
-
"
|
|
213
|
-
"
|
|
210
|
+
"**/*.md",
|
|
211
|
+
"**/*.mdx",
|
|
212
|
+
"**/*.js",
|
|
213
|
+
"**/*.json",
|
|
214
|
+
"**/*.sass",
|
|
215
|
+
"**/*.scss",
|
|
216
|
+
"**/*.less",
|
|
217
|
+
"**/*.css",
|
|
218
|
+
"**/*.css",
|
|
219
|
+
"**/*.jpeg",
|
|
220
|
+
"**/*.gif"
|
|
214
221
|
],
|
|
215
222
|
"private": false
|
|
216
223
|
}
|
package/react.docs.mdx
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"lib": [
|
|
4
|
+
"es2019", "DOM", "ES6" ,"DOM.Iterable"
|
|
5
|
+
],
|
|
6
|
+
"target": "es2015",
|
|
7
|
+
"module": "commonjs",
|
|
8
|
+
"jsx": "react",
|
|
9
|
+
"allowJs": true,
|
|
10
|
+
"composite": true,
|
|
11
|
+
"declaration": true,
|
|
12
|
+
"sourceMap": true,
|
|
13
|
+
"skipLibCheck": true,
|
|
14
|
+
"outDir": "dist",
|
|
15
|
+
"moduleResolution": "node",
|
|
16
|
+
"esModuleInterop": true,
|
|
17
|
+
"rootDir": "."
|
|
18
|
+
},
|
|
19
|
+
"exclude": [
|
|
20
|
+
"dist"
|
|
21
|
+
]
|
|
22
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"lib": [
|
|
4
|
+
"es2019", "DOM", "ES6" ,"DOM.Iterable"
|
|
5
|
+
],
|
|
6
|
+
"target": "es2015",
|
|
7
|
+
"module": "commonjs",
|
|
8
|
+
"jsx": "react",
|
|
9
|
+
"declaration": true,
|
|
10
|
+
"sourceMap": true,
|
|
11
|
+
"skipLibCheck": true,
|
|
12
|
+
"moduleResolution": "node",
|
|
13
|
+
"esModuleInterop": true
|
|
14
|
+
},
|
|
15
|
+
"exclude": [
|
|
16
|
+
"dist"
|
|
17
|
+
]
|
|
18
|
+
}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2015-present, Facebook, Inc.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
const friendlySyntaxErrorLabel = 'Syntax error:';
|
|
8
|
+
|
|
9
|
+
function isLikelyASyntaxError(message) {
|
|
10
|
+
return message.indexOf(friendlySyntaxErrorLabel) !== -1;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// Cleans up webpack error messages.
|
|
14
|
+
function formatMessage(error) {
|
|
15
|
+
let message = error.message;
|
|
16
|
+
let lines = message.split('\n');
|
|
17
|
+
|
|
18
|
+
// Strip webpack-added headers off errors/warnings
|
|
19
|
+
// https://github.com/webpack/webpack/blob/master/lib/ModuleError.js
|
|
20
|
+
lines = lines.filter((line) => !/Module [A-z ]+\(from/.test(line));
|
|
21
|
+
|
|
22
|
+
// Transform parsing error into syntax error
|
|
23
|
+
// TODO: move this to our ESLint formatter?
|
|
24
|
+
lines = lines.map((line) => {
|
|
25
|
+
const parsingError = /Line (\d+):(?:(\d+):)?\s*Parsing error: (.+)$/.exec(line);
|
|
26
|
+
if (!parsingError) {
|
|
27
|
+
return line;
|
|
28
|
+
}
|
|
29
|
+
const [, errorLine, errorColumn, errorMessage] = parsingError;
|
|
30
|
+
return `${friendlySyntaxErrorLabel} ${errorMessage} (${errorLine}:${errorColumn})`;
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
message = lines.join('\n');
|
|
34
|
+
// Smoosh syntax errors (commonly found in CSS)
|
|
35
|
+
message = message.replace(/SyntaxError\s+\((\d+):(\d+)\)\s*(.+?)\n/g, `${friendlySyntaxErrorLabel} $3 ($1:$2)\n`);
|
|
36
|
+
// Clean up export errors
|
|
37
|
+
message = message.replace(
|
|
38
|
+
/^.*export '(.+?)' was not found in '(.+?)'.*$/gm,
|
|
39
|
+
`Attempted import error: '$1' is not exported from '$2'.`
|
|
40
|
+
);
|
|
41
|
+
message = message.replace(
|
|
42
|
+
/^.*export 'default' \(imported as '(.+?)'\) was not found in '(.+?)'.*$/gm,
|
|
43
|
+
`Attempted import error: '$2' does not contain a default export (imported as '$1').`
|
|
44
|
+
);
|
|
45
|
+
message = message.replace(
|
|
46
|
+
/^.*export '(.+?)' \(imported as '(.+?)'\) was not found in '(.+?)'.*$/gm,
|
|
47
|
+
`Attempted import error: '$1' is not exported from '$3' (imported as '$2').`
|
|
48
|
+
);
|
|
49
|
+
lines = message.split('\n');
|
|
50
|
+
|
|
51
|
+
// Remove leading newline
|
|
52
|
+
if (lines.length > 2 && lines[1].trim() === '') {
|
|
53
|
+
lines.splice(1, 1);
|
|
54
|
+
}
|
|
55
|
+
// Clean up file name
|
|
56
|
+
lines[0] = lines[0].replace(/^(.*) \d+:\d+-\d+$/, '$1');
|
|
57
|
+
|
|
58
|
+
// Cleans up verbose "module not found" messages for files and packages.
|
|
59
|
+
if (lines[1] && lines[1].indexOf('Module not found: ') === 0) {
|
|
60
|
+
lines = [
|
|
61
|
+
lines[0],
|
|
62
|
+
lines[1].replace('Error: ', '').replace('Module not found: Cannot find file:', 'Cannot find file:'),
|
|
63
|
+
];
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// Add helpful message for users trying to use Sass for the first time
|
|
67
|
+
if (lines[1] && lines[1].match(/Cannot find module.+node-sass/)) {
|
|
68
|
+
lines[1] = 'To import Sass files, you first need to install node-sass.\n';
|
|
69
|
+
lines[1] += 'Run `npm install node-sass` or `yarn add node-sass` inside your workspace.';
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
message = lines.join('\n');
|
|
73
|
+
// Internal stacks are generally useless so we strip them... with the
|
|
74
|
+
// exception of stacks containing `webpack:` because they're normally
|
|
75
|
+
// from user code generated by webpack. For more information see
|
|
76
|
+
// https://github.com/facebook/create-react-app/pull/1050
|
|
77
|
+
message = message.replace(/^\s*at\s((?!webpack:).)*:\d+:\d+[\s)]*(\n|$)/gm, ''); // at ... ...:x:y
|
|
78
|
+
message = message.replace(/^\s*at\s<anonymous>(\n|$)/gm, ''); // at <anonymous>
|
|
79
|
+
lines = message.split('\n');
|
|
80
|
+
|
|
81
|
+
// Remove duplicated newlines
|
|
82
|
+
lines = lines.filter(
|
|
83
|
+
(line, index, arr) => index === 0 || line.trim() !== '' || line.trim() !== arr[index - 1].trim()
|
|
84
|
+
);
|
|
85
|
+
|
|
86
|
+
// Reassemble the message
|
|
87
|
+
message = lines.join('\n');
|
|
88
|
+
return message.trim();
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
function formatWebpackMessages(json) {
|
|
92
|
+
const formattedErrors = json.errors.map(formatMessage);
|
|
93
|
+
const formattedWarnings = json.warnings.map(formatMessage);
|
|
94
|
+
const result = { errors: formattedErrors, warnings: formattedWarnings };
|
|
95
|
+
if (result.errors.some(isLikelyASyntaxError)) {
|
|
96
|
+
// If there are any syntax errors, show just them.
|
|
97
|
+
result.errors = result.errors.filter(isLikelyASyntaxError);
|
|
98
|
+
}
|
|
99
|
+
return result;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
module.exports = formatWebpackMessages;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2015-present, Facebook, Inc.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
// TODO: we might want to make this injectable to support DEV-time non-root URLs.
|
|
8
|
+
module.exports = '/__open-stack-frame-in-editor';
|
|
@@ -0,0 +1,274 @@
|
|
|
1
|
+
/* eslint-disable promise/catch-or-return */
|
|
2
|
+
/**
|
|
3
|
+
* Copyright (c) 2015-present, Facebook, Inc.
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the MIT license found in the
|
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
|
7
|
+
*/
|
|
8
|
+
const stripAnsi = require('strip-ansi');
|
|
9
|
+
const ErrorOverlay = require('react-error-overlay');
|
|
10
|
+
const url = require('url');
|
|
11
|
+
const launchEditorEndpoint = require('./launch-editor-endpoint');
|
|
12
|
+
const formatWebpackMessages = require('./format-webpack-messages');
|
|
13
|
+
|
|
14
|
+
ErrorOverlay.setEditorHandler(function editorHandler(errorLocation) {
|
|
15
|
+
// Keep this sync with errorOverlayMiddleware.js
|
|
16
|
+
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
|
17
|
+
fetch(
|
|
18
|
+
`${launchEditorEndpoint}?fileName=${window.encodeURIComponent(
|
|
19
|
+
errorLocation.fileName
|
|
20
|
+
)}&lineNumber=${window.encodeURIComponent(errorLocation.lineNumber || 1)}&colNumber=${window.encodeURIComponent(
|
|
21
|
+
errorLocation.colNumber || 1
|
|
22
|
+
)}`
|
|
23
|
+
);
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
// We need to keep track of if there has been a runtime error.
|
|
27
|
+
// Essentially, we cannot guarantee application state was not corrupted by the
|
|
28
|
+
// runtime error. To prevent confusing behavior, we forcibly reload the entire
|
|
29
|
+
// application. This is handled below when we are notified of a compile (code
|
|
30
|
+
// change).
|
|
31
|
+
// See https://github.com/facebook/create-react-app/issues/3096
|
|
32
|
+
let hadRuntimeError = false;
|
|
33
|
+
ErrorOverlay.startReportingRuntimeErrors({
|
|
34
|
+
onError() {
|
|
35
|
+
hadRuntimeError = true;
|
|
36
|
+
},
|
|
37
|
+
filename: '/static/js/bundle.js',
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
if (module.hot && typeof module.hot.dispose === 'function') {
|
|
41
|
+
module.hot.dispose(function () {
|
|
42
|
+
// TODO: why do we need this?
|
|
43
|
+
ErrorOverlay.stopReportingRuntimeErrors();
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// Connect to WebpackDevServer via a socket.
|
|
48
|
+
const querystring = module.id.substring(module.id.indexOf('?'));
|
|
49
|
+
const urlParams = new URLSearchParams(querystring);
|
|
50
|
+
|
|
51
|
+
const connection = new WebSocket(
|
|
52
|
+
url.format({
|
|
53
|
+
protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
|
|
54
|
+
hostname: window.location.hostname,
|
|
55
|
+
port: window.location.port,
|
|
56
|
+
// Hardcoded in WebpackDevServer
|
|
57
|
+
pathname: urlParams.get('sockPath') || '/sockjs-node',
|
|
58
|
+
// pathname: '_hmr/teambit.bad-jokes/extensions/harmony-react',
|
|
59
|
+
slashes: true,
|
|
60
|
+
})
|
|
61
|
+
);
|
|
62
|
+
|
|
63
|
+
// Unlike WebpackDevServer client, we won't try to reconnect
|
|
64
|
+
// to avoid spamming the console. Disconnect usually happens
|
|
65
|
+
// when developer stops the server.
|
|
66
|
+
connection.onclose = function () {
|
|
67
|
+
// eslint-disable-next-line no-console
|
|
68
|
+
if (typeof console !== 'undefined' && typeof console.info === 'function') {
|
|
69
|
+
// eslint-disable-next-line no-console
|
|
70
|
+
console.info('The development server has disconnected.\nRefresh the page if necessary.');
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
// Remember some state related to hot module replacement.
|
|
75
|
+
let isFirstCompilation = true;
|
|
76
|
+
let mostRecentCompilationHash = null;
|
|
77
|
+
let hasCompileErrors = false;
|
|
78
|
+
|
|
79
|
+
function clearOutdatedErrors() {
|
|
80
|
+
// Clean up outdated compile errors, if any.
|
|
81
|
+
// eslint-disable-next-line no-console
|
|
82
|
+
if (typeof console !== 'undefined' && typeof console.clear === 'function') {
|
|
83
|
+
if (hasCompileErrors) {
|
|
84
|
+
// eslint-disable-next-line no-console
|
|
85
|
+
console.clear();
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// Successful compilation.
|
|
91
|
+
function handleSuccess() {
|
|
92
|
+
clearOutdatedErrors();
|
|
93
|
+
|
|
94
|
+
const isHotUpdate = !isFirstCompilation;
|
|
95
|
+
isFirstCompilation = false;
|
|
96
|
+
hasCompileErrors = false;
|
|
97
|
+
|
|
98
|
+
// Attempt to apply hot updates or reload.
|
|
99
|
+
if (isHotUpdate) {
|
|
100
|
+
tryApplyUpdates(function onHotUpdateSuccess() {
|
|
101
|
+
// Only dismiss it when we're sure it's a hot update.
|
|
102
|
+
// Otherwise it would flicker right before the reload.
|
|
103
|
+
tryDismissErrorOverlay();
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
// Compilation with warnings (e.g. ESLint).
|
|
109
|
+
function handleWarnings(warnings) {
|
|
110
|
+
clearOutdatedErrors();
|
|
111
|
+
|
|
112
|
+
const isHotUpdate = !isFirstCompilation;
|
|
113
|
+
isFirstCompilation = false;
|
|
114
|
+
hasCompileErrors = false;
|
|
115
|
+
|
|
116
|
+
function printWarnings() {
|
|
117
|
+
// Print warnings to the console.
|
|
118
|
+
const formatted = formatWebpackMessages({
|
|
119
|
+
warnings,
|
|
120
|
+
errors: [],
|
|
121
|
+
});
|
|
122
|
+
|
|
123
|
+
// eslint-disable-next-line no-console
|
|
124
|
+
if (typeof console !== 'undefined' && typeof console.warn === 'function') {
|
|
125
|
+
// eslint-disable-next-line no-plusplus
|
|
126
|
+
for (let i = 0; i < formatted.warnings.length; i++) {
|
|
127
|
+
if (i === 5) {
|
|
128
|
+
// eslint-disable-next-line
|
|
129
|
+
console.warn('There were more warnings in other files.\n' + 'You can find a complete log in the terminal.');
|
|
130
|
+
break;
|
|
131
|
+
}
|
|
132
|
+
// eslint-disable-next-line no-console
|
|
133
|
+
console.warn(stripAnsi(formatted.warnings[i]));
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
printWarnings();
|
|
139
|
+
|
|
140
|
+
// Attempt to apply hot updates or reload.
|
|
141
|
+
if (isHotUpdate) {
|
|
142
|
+
tryApplyUpdates(function onSuccessfulHotUpdate() {
|
|
143
|
+
// Only dismiss it when we're sure it's a hot update.
|
|
144
|
+
// Otherwise it would flicker right before the reload.
|
|
145
|
+
tryDismissErrorOverlay();
|
|
146
|
+
});
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
// Compilation with errors (e.g. syntax error or missing modules).
|
|
151
|
+
function handleErrors(errors) {
|
|
152
|
+
clearOutdatedErrors();
|
|
153
|
+
|
|
154
|
+
isFirstCompilation = false;
|
|
155
|
+
hasCompileErrors = true;
|
|
156
|
+
|
|
157
|
+
// "Massage" webpack messages.
|
|
158
|
+
const formatted = formatWebpackMessages({
|
|
159
|
+
errors,
|
|
160
|
+
warnings: [],
|
|
161
|
+
});
|
|
162
|
+
|
|
163
|
+
// Only show the first error.
|
|
164
|
+
ErrorOverlay.reportBuildError(formatted.errors[0]);
|
|
165
|
+
|
|
166
|
+
// Also log them to the console.
|
|
167
|
+
// eslint-disable-next-line no-console
|
|
168
|
+
if (typeof console !== 'undefined' && typeof console.error === 'function') {
|
|
169
|
+
// eslint-disable-next-line no-plusplus
|
|
170
|
+
for (let i = 0; i < formatted.errors.length; i++) {
|
|
171
|
+
// eslint-disable-next-line no-console
|
|
172
|
+
console.error(stripAnsi(formatted.errors[i]));
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
// Do not attempt to reload now.
|
|
177
|
+
// We will reload on next success instead.
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
function tryDismissErrorOverlay() {
|
|
181
|
+
if (!hasCompileErrors) {
|
|
182
|
+
ErrorOverlay.dismissBuildError();
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
// There is a newer version of the code available.
|
|
187
|
+
function handleAvailableHash(hash) {
|
|
188
|
+
// Update last known compilation hash.
|
|
189
|
+
mostRecentCompilationHash = hash;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
// Handle messages from the server.
|
|
193
|
+
connection.onmessage = function (e) {
|
|
194
|
+
const message = JSON.parse(e.data);
|
|
195
|
+
switch (message.type) {
|
|
196
|
+
case 'hash':
|
|
197
|
+
handleAvailableHash(message.data);
|
|
198
|
+
break;
|
|
199
|
+
case 'still-ok':
|
|
200
|
+
case 'ok':
|
|
201
|
+
handleSuccess();
|
|
202
|
+
break;
|
|
203
|
+
case 'content-changed':
|
|
204
|
+
// Triggered when a file from `contentBase` changed.
|
|
205
|
+
window.location.reload();
|
|
206
|
+
break;
|
|
207
|
+
case 'warnings':
|
|
208
|
+
handleWarnings(message.data);
|
|
209
|
+
break;
|
|
210
|
+
case 'errors':
|
|
211
|
+
handleErrors(message.data);
|
|
212
|
+
break;
|
|
213
|
+
default:
|
|
214
|
+
// Do nothing.
|
|
215
|
+
}
|
|
216
|
+
};
|
|
217
|
+
|
|
218
|
+
// Is there a newer version of this code available?
|
|
219
|
+
function isUpdateAvailable() {
|
|
220
|
+
/* globals __webpack_hash__ */
|
|
221
|
+
// __webpack_hash__ is the hash of the current compilation.
|
|
222
|
+
// It's a global variable injected by webpack.
|
|
223
|
+
return mostRecentCompilationHash !== __webpack_hash__;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
// webpack disallows updates in other states.
|
|
227
|
+
function canApplyUpdates() {
|
|
228
|
+
return module.hot.status() === 'idle';
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
// Attempt to update code on the fly, fall back to a hard reload.
|
|
232
|
+
function tryApplyUpdates(onHotUpdateSuccess) {
|
|
233
|
+
if (!module.hot) {
|
|
234
|
+
// HotModuleReplacementPlugin is not in webpack configuration.
|
|
235
|
+
window.location.reload();
|
|
236
|
+
return;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
if (!isUpdateAvailable() || !canApplyUpdates()) {
|
|
240
|
+
return;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
function handleApplyUpdates(err, updatedModules) {
|
|
244
|
+
if (err || !updatedModules || hadRuntimeError) {
|
|
245
|
+
window.location.reload();
|
|
246
|
+
return;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
if (typeof onHotUpdateSuccess === 'function') {
|
|
250
|
+
// Maybe we want to do something.
|
|
251
|
+
onHotUpdateSuccess();
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
if (isUpdateAvailable()) {
|
|
255
|
+
// While we were updating, there was a new update! Do it again.
|
|
256
|
+
tryApplyUpdates();
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
// https://webpack.github.io/docs/hot-module-replacement.html#check
|
|
261
|
+
const result = module.hot.check(/* autoApply */ true, handleApplyUpdates);
|
|
262
|
+
|
|
263
|
+
// // webpack 2 returns a Promise instead of invoking a callback
|
|
264
|
+
if (result && result.then) {
|
|
265
|
+
result.then(
|
|
266
|
+
function (updatedModules) {
|
|
267
|
+
handleApplyUpdates(null, updatedModules);
|
|
268
|
+
},
|
|
269
|
+
function (err) {
|
|
270
|
+
handleApplyUpdates(err, null);
|
|
271
|
+
}
|
|
272
|
+
);
|
|
273
|
+
}
|
|
274
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
// @remove-on-eject-begin
|
|
2
|
+
/**
|
|
3
|
+
* Copyright (c) 2015-present, Facebook, Inc.
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the MIT license found in the
|
|
6
|
+
* LICENSE file in the root directory of this source tree.
|
|
7
|
+
*/
|
|
8
|
+
// @remove-on-eject-end
|
|
9
|
+
'use strict';
|
|
10
|
+
|
|
11
|
+
const { dismissRuntimeErrors, reportRuntimeError } = require('react-error-overlay');
|
|
12
|
+
|
|
13
|
+
module.exports = {
|
|
14
|
+
clearRuntimeErrors: dismissRuntimeErrors,
|
|
15
|
+
handleRuntimeError: reportRuntimeError,
|
|
16
|
+
};
|