chore(build): enable support for ts declare fields
This commit is contained in:
SleepWalker
ErickSkrauch
parent
f7b0c10ba9
commit
79ff3b9410
|
|
@ -2,16 +2,29 @@
|
|||
// @ts-nocheck
|
||||
module.exports = function (api) {
|
||||
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 {
|
||||
presets: [
|
||||
[
|
||||
'@babel/preset-typescript',
|
||||
{
|
||||
allowDeclareFields: true,
|
||||
},
|
||||
],
|
||||
'@babel/preset-react',
|
||||
[
|
||||
'@babel/preset-env',
|
||||
|
|
@ -23,11 +36,24 @@ module.exports = function (api) {
|
|||
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: [
|
||||
'@babel/plugin-syntax-dynamic-import',
|
||||
'@babel/plugin-proposal-function-bind',
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
'@babel/plugin-proposal-optional-chaining',
|
||||
'@babel/plugin-transform-runtime',
|
||||
[
|
||||
|
|
@ -36,25 +62,14 @@ module.exports = function (api) {
|
|||
removePrefix: 'packages.app',
|
||||
messagesDir: './build/messages/',
|
||||
useKey: true,
|
||||
removeDefaultMessage: env === 'production',
|
||||
removeDefaultMessage: isProduction,
|
||||
},
|
||||
],
|
||||
],
|
||||
env: {
|
||||
webpack: {
|
||||
plugins: ['react-hot-loader/babel'],
|
||||
presets: [
|
||||
[
|
||||
'@babel/preset-env',
|
||||
{
|
||||
ignoreBrowserslistConfig: false,
|
||||
modules: false,
|
||||
useBuiltIns: 'usage', // or "entry"
|
||||
corejs: 3,
|
||||
},
|
||||
],
|
||||
],
|
||||
},
|
||||
browser: browserEnv,
|
||||
'browser-development': browserEnv,
|
||||
'browser-production': browserEnv,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ class BaseAuthBody extends React.Component<
|
|||
RouteComponentProps<Record<string, any>>
|
||||
> {
|
||||
static contextType = Context;
|
||||
/* TODO: use declare */ context: React.ContextType<typeof Context>;
|
||||
declare context: React.ContextType<typeof Context>;
|
||||
prevErrors: AuthContext['auth']['error'];
|
||||
|
||||
autoFocusField: string | null = '';
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default class MfaDisable extends React.Component<
|
|||
}
|
||||
> {
|
||||
static contextType = Context;
|
||||
/* TODO: use declare */ context: React.ContextType<typeof Context>;
|
||||
declare context: React.ContextType<typeof Context>;
|
||||
|
||||
state = {
|
||||
showForm: false,
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ interface State {
|
|||
|
||||
export default class MfaEnable extends React.PureComponent<Props, State> {
|
||||
static contextType = Context;
|
||||
/* TODO: use declare */ context: React.ContextType<typeof Context>;
|
||||
declare context: React.ContextType<typeof Context>;
|
||||
|
||||
static defaultProps = {
|
||||
confirmationForm: new FormModel(),
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ interface Props extends RouteComponentProps<RouteParams> {
|
|||
|
||||
class ChangeEmailPage extends React.Component<Props> {
|
||||
static contextType = Context;
|
||||
/* TODO: use declare */ context: React.ContextType<typeof Context>;
|
||||
declare context: React.ContextType<typeof Context>;
|
||||
|
||||
render() {
|
||||
const { step = 'step1', code } = this.props.match.params;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ interface Props {
|
|||
|
||||
class ChangePasswordPage extends React.Component<Props> {
|
||||
static contextType = Context;
|
||||
/* TODO: use declare */ context: React.ContextType<typeof Context>;
|
||||
declare context: React.ContextType<typeof Context>;
|
||||
|
||||
form = new FormModel();
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ type Props = {
|
|||
|
||||
class ChangeUsernamePage extends React.Component<Props> {
|
||||
static contextType = Context;
|
||||
/* TODO: use declare */ context: React.ContextType<typeof Context>;
|
||||
declare context: React.ContextType<typeof Context>;
|
||||
|
||||
form = new FormModel();
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ interface Props
|
|||
|
||||
class MultiFactorAuthPage extends React.Component<Props> {
|
||||
static contextType = Context;
|
||||
/* TODO: use declare */ context: React.ContextType<typeof Context>;
|
||||
declare context: React.ContextType<typeof Context>;
|
||||
|
||||
render() {
|
||||
const {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
/* eslint-env node */
|
||||
/* eslint-disable no-console */
|
||||
|
||||
import fs, { Stats } from 'fs';
|
||||
import type { Stats } from 'fs';
|
||||
import fs from 'fs';
|
||||
import webpack, { MultiCompiler } from 'webpack';
|
||||
import chalk from 'chalk';
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ const wp = require('@cypress/webpack-preprocessor');
|
|||
|
||||
// for some reason loader can not locate babel.config. So we load it manually
|
||||
const config = require('../../../babel.config');
|
||||
const babelEnvName = 'browser-development';
|
||||
|
||||
module.exports = (on) => {
|
||||
const options = {
|
||||
|
|
@ -39,14 +40,31 @@ module.exports = (on) => {
|
|||
{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
envName: 'webpack',
|
||||
envName: babelEnvName,
|
||||
cacheDirectory: true,
|
||||
// We don't have the webpack's API object, so just provide necessary methods
|
||||
...config({
|
||||
env() {
|
||||
return 'development';
|
||||
env(value) {
|
||||
// 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() {},
|
||||
}),
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -30,13 +30,14 @@ const isCI = !!process.env.CI;
|
|||
const isSilent = isCI || process.argv.some((arg) => /quiet/.test(arg));
|
||||
const isCspEnabled = false;
|
||||
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 webpackConfig = {
|
||||
mode: isProduction ? 'production' : 'development',
|
||||
mode: webpackEnv,
|
||||
|
||||
cache: true,
|
||||
|
||||
|
|
@ -169,7 +170,7 @@ const webpackConfig = {
|
|||
{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
envName: 'webpack',
|
||||
envName: `browser-${webpackEnv}`,
|
||||
cacheDirectory: true,
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue