chore(build): enable support for ts declare fields

This commit is contained in:
SleepWalker 2020-10-11 19:33:55 +03:00 committed by ErickSkrauch
parent f7b0c10ba9
commit 79ff3b9410
12 changed files with 1688 additions and 1678 deletions

View File

@ -2,16 +2,29 @@
// @ts-nocheck // @ts-nocheck
module.exports = function (api) { module.exports = function (api) {
const env = api.env(); const env = api.env();
api.cache(true); const isProduction = api.env((envName) => envName.includes('production'));
api.cache.using(() => env);
const browserEnv = {
plugins: ['react-hot-loader/babel'],
presets: [
[
'@babel/preset-env',
{
shippedProposals: true,
ignoreBrowserslistConfig: false,
modules: false,
useBuiltIns: 'usage', // or "entry"
corejs: 3,
include: ['proposal-class-properties'],
},
],
],
};
return { return {
presets: [ presets: [
[
'@babel/preset-typescript',
{
allowDeclareFields: true,
},
],
'@babel/preset-react', '@babel/preset-react',
[ [
'@babel/preset-env', '@babel/preset-env',
@ -23,11 +36,24 @@ module.exports = function (api) {
modules: 'commonjs', modules: 'commonjs',
}, },
], ],
[
// NOTE: preset-typescript must go before proposal-class-properties
// in order to use allowDeclareFields option
// proposal-class-properties is enabled by preset-env for browser env
// preset-env for nodejs does not need it, because recent node versions support class fields
//
// but, due to some bugs (?), we must place preset-typescript here so that it loads as
// last default preset, before loading browser presets.
// Only this combination is working without errors
'@babel/preset-typescript',
{
allowDeclareFields: true,
},
],
], ],
plugins: [ plugins: [
'@babel/plugin-syntax-dynamic-import', '@babel/plugin-syntax-dynamic-import',
'@babel/plugin-proposal-function-bind', '@babel/plugin-proposal-function-bind',
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-optional-chaining', '@babel/plugin-proposal-optional-chaining',
'@babel/plugin-transform-runtime', '@babel/plugin-transform-runtime',
[ [
@ -36,25 +62,14 @@ module.exports = function (api) {
removePrefix: 'packages.app', removePrefix: 'packages.app',
messagesDir: './build/messages/', messagesDir: './build/messages/',
useKey: true, useKey: true,
removeDefaultMessage: env === 'production', removeDefaultMessage: isProduction,
}, },
], ],
], ],
env: { env: {
webpack: { browser: browserEnv,
plugins: ['react-hot-loader/babel'], 'browser-development': browserEnv,
presets: [ 'browser-production': browserEnv,
[
'@babel/preset-env',
{
ignoreBrowserslistConfig: false,
modules: false,
useBuiltIns: 'usage', // or "entry"
corejs: 3,
},
],
],
},
}, },
}; };
}; };

View File

@ -15,7 +15,7 @@ class BaseAuthBody extends React.Component<
RouteComponentProps<Record<string, any>> RouteComponentProps<Record<string, any>>
> { > {
static contextType = Context; static contextType = Context;
/* TODO: use declare */ context: React.ContextType<typeof Context>; declare context: React.ContextType<typeof Context>;
prevErrors: AuthContext['auth']['error']; prevErrors: AuthContext['auth']['error'];
autoFocusField: string | null = ''; autoFocusField: string | null = '';

View File

@ -17,7 +17,7 @@ export default class MfaDisable extends React.Component<
} }
> { > {
static contextType = Context; static contextType = Context;
/* TODO: use declare */ context: React.ContextType<typeof Context>; declare context: React.ContextType<typeof Context>;
state = { state = {
showForm: false, showForm: false,

View File

@ -41,7 +41,7 @@ interface State {
export default class MfaEnable extends React.PureComponent<Props, State> { export default class MfaEnable extends React.PureComponent<Props, State> {
static contextType = Context; static contextType = Context;
/* TODO: use declare */ context: React.ContextType<typeof Context>; declare context: React.ContextType<typeof Context>;
static defaultProps = { static defaultProps = {
confirmationForm: new FormModel(), confirmationForm: new FormModel(),

View File

@ -18,7 +18,7 @@ interface Props extends RouteComponentProps<RouteParams> {
class ChangeEmailPage extends React.Component<Props> { class ChangeEmailPage extends React.Component<Props> {
static contextType = Context; static contextType = Context;
/* TODO: use declare */ context: React.ContextType<typeof Context>; declare context: React.ContextType<typeof Context>;
render() { render() {
const { step = 'step1', code } = this.props.match.params; const { step = 'step1', code } = this.props.match.params;

View File

@ -14,7 +14,7 @@ interface Props {
class ChangePasswordPage extends React.Component<Props> { class ChangePasswordPage extends React.Component<Props> {
static contextType = Context; static contextType = Context;
/* TODO: use declare */ context: React.ContextType<typeof Context>; declare context: React.ContextType<typeof Context>;
form = new FormModel(); form = new FormModel();

View File

@ -14,7 +14,7 @@ type Props = {
class ChangeUsernamePage extends React.Component<Props> { class ChangeUsernamePage extends React.Component<Props> {
static contextType = Context; static contextType = Context;
/* TODO: use declare */ context: React.ContextType<typeof Context>; declare context: React.ContextType<typeof Context>;
form = new FormModel(); form = new FormModel();

View File

@ -16,7 +16,7 @@ interface Props
class MultiFactorAuthPage extends React.Component<Props> { class MultiFactorAuthPage extends React.Component<Props> {
static contextType = Context; static contextType = Context;
/* TODO: use declare */ context: React.ContextType<typeof Context>; declare context: React.ContextType<typeof Context>;
render() { render() {
const { const {

View File

@ -2,7 +2,8 @@
/* eslint-env node */ /* eslint-env node */
/* eslint-disable no-console */ /* eslint-disable no-console */
import fs, { Stats } from 'fs'; import type { Stats } from 'fs';
import fs from 'fs';
import webpack, { MultiCompiler } from 'webpack'; import webpack, { MultiCompiler } from 'webpack';
import chalk from 'chalk'; import chalk from 'chalk';

View File

@ -21,6 +21,7 @@ const wp = require('@cypress/webpack-preprocessor');
// for some reason loader can not locate babel.config. So we load it manually // for some reason loader can not locate babel.config. So we load it manually
const config = require('../../../babel.config'); const config = require('../../../babel.config');
const babelEnvName = 'browser-development';
module.exports = (on) => { module.exports = (on) => {
const options = { const options = {
@ -39,14 +40,31 @@ module.exports = (on) => {
{ {
loader: 'babel-loader', loader: 'babel-loader',
options: { options: {
envName: 'webpack', envName: babelEnvName,
cacheDirectory: true, cacheDirectory: true,
// We don't have the webpack's API object, so just provide necessary methods // We don't have the webpack's API object, so just provide necessary methods
...config({ ...config({
env() { env(value) {
return 'development'; // see @babel/core/lib/config/helpers/config-api.js
switch (typeof value) {
case 'string':
return value === babelEnvName;
case 'function':
return value(babelEnvName);
case 'undefined':
return babelEnvName;
default:
if (Array.isArray(value)) {
throw new Error('Unimplemented env() argument');
}
throw new Error('Invalid env() argument');
}
},
cache: {
using() {},
}, },
cache() {},
}), }),
}, },
}, },

View File

@ -30,13 +30,14 @@ const isCI = !!process.env.CI;
const isSilent = isCI || process.argv.some((arg) => /quiet/.test(arg)); const isSilent = isCI || process.argv.some((arg) => /quiet/.test(arg));
const isCspEnabled = false; const isCspEnabled = false;
const enableDll = !isProduction && !isStorybook; const enableDll = !isProduction && !isStorybook;
const webpackEnv = isProduction ? 'production' : 'development';
process.env.NODE_ENV = isProduction ? 'production' : 'development'; process.env.NODE_ENV = webpackEnv;
const smp = new SpeedMeasurePlugin(); const smp = new SpeedMeasurePlugin();
const webpackConfig = { const webpackConfig = {
mode: isProduction ? 'production' : 'development', mode: webpackEnv,
cache: true, cache: true,
@ -169,7 +170,7 @@ const webpackConfig = {
{ {
loader: 'babel-loader', loader: 'babel-loader',
options: { options: {
envName: 'webpack', envName: `browser-${webpackEnv}`,
cacheDirectory: true, cacheDirectory: true,
}, },
}, },

3255
yarn.lock

File diff suppressed because it is too large Load Diff