Eject from react-scripts-ts-antd and bump webui dependencies version (#…

…1412)

* Eject from react-scripts-ts-antd

* test whether it can pass CI without ugilfy

* temporarily disable uglify

Makefile

@@ -54,7 +54,7 @@ NNI_NODE_FOLDER = $(NNI_DEPENDENCY_FOLDER)/nni-node-$(OS_SPEC)-x64
 NNI_NODE ?= $(BIN_FOLDER)/node
 NNI_YARN_TARBALL ?= $(NNI_DEPENDENCY_FOLDER)/nni-yarn.tar.gz
 NNI_YARN_FOLDER ?= $(NNI_DEPENDENCY_FOLDER)/nni-yarn
-NNI_YARN := PATH=$(BIN_FOLDER):$${PATH} $(NNI_YARN_FOLDER)/bin/yarn
+NNI_YARN ?= PATH=$(BIN_FOLDER):$${PATH} $(NNI_YARN_FOLDER)/bin/yarn
 
 ## Version number
 NNI_VERSION_VALUE = $(shell git describe --tags)

src/webui/config/env.js

@@ -0,0 +1,96 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+var dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  // Don't include `.env.local` for `test` environment
+  // since normally you expect tests to produce the same
+  // results for everyone
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv-expand')(
+      require('dotenv').config({
+        path: dotenvFile,
+      })
+    );
+  }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebookincubator/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
+// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in Webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl,
+      }
+    );
+  // Stringify all values so we can feed into Webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce(
+      (env, key) => {
+        env[key] = JSON.stringify(raw[key]);
+        return env;
+      },
+      {}
+    ),
+  };
+
+  return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;

src/webui/config/jest/cssTransform.js

@@ -0,0 +1,14 @@
+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

src/webui/config/jest/fileTransform.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const path = require('path');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
+  },
+};

src/webui/config/jest/typescriptTransform.js

@@ -0,0 +1,7 @@
+// Copyright 2004-present Facebook. All Rights Reserved.
+
+'use strict';
+
+const tsJestPreprocessor = require('ts-jest/preprocessor');
+
+module.exports = tsJestPreprocessor;

src/webui/config/loaders.js

@@ -0,0 +1,226 @@
+const paths = require('./paths');
+const tsImportPluginFactory = require('ts-import-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const autoprefixer = require('autoprefixer')
+
+const precss = require('precss')();
+const flexBugFixes = require('postcss-flexbugs-fixes')();
+
+// Webpack uses `publicPath` to determine where the app is being served from.
+// It requires a trailing slash, or the file assets will get an incorrect path.
+const publicPath = paths.servedPath;
+// Some apps do not use client-side routing with pushState.
+// For these, "homepage" can be set to "." to enable relative asset paths.
+const shouldUseRelativeAssetPaths = publicPath === './';
+// Source maps are resource heavy and can cause out of memory issue for large source files.
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+
+// Note: defined here because it will be used more than once.
+const cssFilename = 'static/css/[name].[contenthash:8].css';
+
+// ExtractTextPlugin expects the build output to be flat.
+// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
+// However, our output is structured with css, js and media folders.
+// To have this structure working with relative paths, we have to use custom options.
+const extractTextPluginOptions = shouldUseRelativeAssetPaths
+  ? // Making sure that the publicPath goes back to to build folder.
+  { publicPath: Array(cssFilename.split('/').length).join('../') }
+  : {};
+
+
+// "url" loader works like "file" loader except that it embeds assets
+// smaller than specified limit in bytes as data URLs to avoid requests.
+// A missing `test` is equivalent to a match.
+const urlLoader = {
+  test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+  loader: require.resolve('url-loader'),
+  options: {
+    limit: 10000,
+    name: 'static/media/[name].[hash:8].[ext]',
+  },
+};
+
+const importPluginOption = [
+  {
+    libraryName: 'antd',
+    libraryDirectory: 'lib',
+    style: 'css'
+  },
+  {
+    libraryName: 'antd-mobile',
+    libraryDirectory: 'lib',
+    style: 'css',
+  }
+];
+
+// js loader
+const jsLoader = {
+  test: /\.(js|jsx|mjs)$/,
+  include: paths.appSrc,
+  loader: require.resolve('babel-loader'),
+  options: {
+
+    compact: true,
+  },
+};
+
+
+// ts loader
+const tsLoader = {
+  test: /\.(ts|tsx)$/,
+  include: paths.appSrc,
+  use: [
+    {
+      loader: require.resolve('ts-loader'),
+      options: {
+        transpileOnly: true,
+        getCustomTransformers: () => ({
+          before: [tsImportPluginFactory(importPluginOption)]
+        })
+      }
+    }
+  ]
+};
+
+const postcssLoader = {
+  loader: require.resolve('postcss-loader'),
+  options: {
+    // Necessary for external CSS imports to work
+    // https://github.com/facebookincubator/create-react-app/issues/2677
+    // don't need now
+    // ident: 'postcss',
+    plugins: () => [
+      flexBugFixes,
+      autoprefixer
+    ],
+  },
+};
+
+const precssLoader = {
+  loader: require.resolve('postcss-loader'),
+  options: {
+    // Necessary for external CSS imports to work
+    // https://github.com/facebookincubator/create-react-app/issues/2677
+    // don't need now
+    // ident: 'postcss',
+    plugins: () => [
+      precss,
+      flexBugFixes,
+      autoprefixer
+    ],
+  },
+};
+
+const rawCssLoaderDev = {
+  loader: require.resolve('css-loader'),
+  options: {
+    importLoaders: 1,
+  },
+};
+
+const rawCssLoaderProd = {
+  loader: require.resolve('css-loader'),
+  options: {
+    importLoaders: 1,
+    minimize: true,
+    sourceMap: shouldUseSourceMap,
+  },
+};
+
+const cssLoaderDev = {
+  test: /\.css$/,
+  use: [
+    require.resolve('style-loader'),
+    rawCssLoaderDev,
+    postcssLoader,
+  ],
+};
+
+const cssLoaderProd = {
+  test: /\.css$/,
+  use: [
+    {
+      loader: MiniCssExtractPlugin.loader,
+      options: { } // TODO
+    },
+    rawCssLoaderProd,
+    postcssLoader,
+  ],
+};
+
+// scss loader
+const scssLoaderDev = {
+  test: /\.scss$/,
+  use: [
+    require.resolve('style-loader'),
+    rawCssLoaderDev,
+    precssLoader,
+  ],
+};
+
+const scssLoaderProd = {
+  test: /\.scss$/,
+  use: [
+    {
+      loader: MiniCssExtractPlugin.loader,
+      options: { }
+    },
+    rawCssLoaderProd,
+    precssLoader,
+  ]
+};
+
+// less loader
+const lessLoaderDev = {
+  test: /\.less$/,
+  use: [
+    require.resolve('style-loader'),
+    rawCssLoaderDev,
+    postcssLoader,
+    require.resolve('less-loader')
+  ],
+};
+
+const lessLoaderProd = {
+  test: /\.less$/,
+  use: [
+    {
+      loader: MiniCssExtractPlugin.loader,
+      options: { }
+    },
+    rawCssLoaderProd,
+    postcssLoader,
+    require.resolve('less-loader')
+  ],
+}
+
+// Exclude `js` files to keep "css" loader working as it injects
+// it's runtime that would otherwise processed through "file" loader.
+// Also exclude `html` and `json` extensions so they get processed
+// by webpacks internal loaders.
+const fileLoader = {
+  loader: require.resolve('file-loader'),
+  // Exclude `js` files to keep "css" loader working as it injects
+  // it's runtime that would otherwise processed through "file" loader.
+  // Also exclude `html` and `json` extensions so they get processed
+  // by webpacks internal loaders.
+  exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
+  options: {
+    name: 'static/media/[name].[hash:8].[ext]',
+  },
+};
+
+module.exports = {
+  urlLoader,
+  jsLoader,
+  tsLoader,
+  cssLoaderDev,
+  cssLoaderProd,
+  scssLoaderDev,
+  scssLoaderProd,
+  lessLoaderDev,
+  lessLoaderProd,
+  fileLoader,
+  postcssLoader
+};