@strapi/admin 4.2.3 → 4.3.0

package/scripts/build.js

@@ -3,7 +3,11 @@
 const path = require('path');
 const webpack = require('webpack');
 const { isObject } = require('lodash');
+// eslint-disable-next-line node/no-extraneous-require
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
+
 const webpackConfig = require('../webpack.config');
+const getPluginsPath = require('../utils/get-plugins-path');
 const {
   getCorePluginsPath,
   getPluginToInstallPath,
@@ -12,29 +16,41 @@ const {
 
 const PLUGINS_TO_INSTALL = ['i18n', 'users-permissions'];
 
+// Wrapper that outputs the webpack speed
+const smp = new SpeedMeasurePlugin();
+
 const buildAdmin = async () => {
   const entry = path.join(__dirname, '..', 'admin', 'src');
   const dest = path.join(__dirname, '..', 'build');
+  const tsConfigFilePath = path.join(__dirname, '..', 'admin', 'src', 'tsconfig.json');
+
   const corePlugins = getCorePluginsPath();
   const plugins = getPluginToInstallPath(PLUGINS_TO_INSTALL);
   const allPlugins = { ...corePlugins, ...plugins };
+  const pluginsPath = getPluginsPath();
 
   await createPluginsFile(allPlugins);
 
   const args = {
     entry,
     dest,
-    cacheDir: path.resolve(__dirname, '..'),
-    pluginsPath: [path.resolve(__dirname, '../../../../packages')],
+    cacheDir: path.join(__dirname, '..'),
+    pluginsPath,
     env: 'production',
     optimize: true,
     options: {
       backend: 'http://localhost:1337',
       adminPath: '/admin/',
     },
+    tsConfigFilePath,
   };
 
-  const compiler = webpack(webpackConfig(args));
+  const config =
+    process.env.MEASURE_BUILD_SPEED === 'true'
+      ? smp.wrap(webpackConfig(args))
+      : webpackConfig(args);
+
+  const compiler = webpack(config);
 
   console.log('Building the admin panel');
 

package/server/controllers/admin.js

@@ -5,6 +5,7 @@ const execa = require('execa');
 const _ = require('lodash');
 const { exists } = require('fs-extra');
 const { ValidationError } = require('@strapi/utils').errors;
+const { isUsingTypeScript } = require('@strapi/typescript-utils');
 // eslint-disable-next-line node/no-extraneous-require
 const ee = require('@strapi/strapi/lib/utils/ee');
 
@@ -81,6 +82,26 @@ module.exports = {
     return projectSettingsService.updateProjectSettings({ ...body, ...formatedFiles });
   },
 
+  async telemetryProperties(ctx) {
+    // If the telemetry is disabled, ignore the request and return early
+    if (strapi.telemetry.isDisabled) {
+      ctx.status = 204;
+      return;
+    }
+
+    const useTypescriptOnServer = await isUsingTypeScript(strapi.dirs.app.root);
+    const useTypescriptOnAdmin = await isUsingTypeScript(
+      path.join(strapi.dirs.app.root, 'src', 'admin')
+    );
+
+    return {
+      data: {
+        useTypescriptOnServer,
+        useTypescriptOnAdmin,
+      },
+    };
+  },
+
   async information() {
     const currentEnvironment = strapi.config.get('environment');
     const autoReload = strapi.config.get('autoReload', false);

package/server/policies/index.js

@@ -3,4 +3,5 @@
 module.exports = {
   isAuthenticatedAdmin: require('./isAuthenticatedAdmin'),
   hasPermissions: require('./hasPermissions'),
+  isTelemetryEnabled: require('./isTelemetryEnabled'),
 };

package/server/policies/isTelemetryEnabled.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const { createPolicy } = require('@strapi/utils').policy;
+
+/**
+ * This policy is used for routes dealing with telemetry and analytics content.
+ * It will fails when the telemetry has been disabled on the server.
+ */
+module.exports = createPolicy({
+  name: 'admin::isTelemetryEnabled',
+  handler(_ctx, _config, { strapi }) {
+    if (strapi.telemetry.isDisabled) {
+      return false;
+    }
+  },
+});

package/server/routes/admin.js

@@ -49,6 +49,14 @@ module.exports = [
       policies: ['admin::isAuthenticatedAdmin'],
     },
   },
+  {
+    method: 'GET',
+    path: '/telemetry-properties',
+    handler: 'admin.telemetryProperties',
+    config: {
+      auth: false,
+    },
+  },
   {
     method: 'GET',
     path: '/plugins',

package/server/routes/serve-admin-panel.js

@@ -5,7 +5,7 @@ const fse = require('fs-extra');
 const koaStatic = require('koa-static');
 
 const registerAdminPanelRoute = ({ strapi }) => {
-  let buildDir = resolve(strapi.dirs.root, 'build');
+  let buildDir = resolve(strapi.dirs.dist.root, 'build');
 
   if (!fse.pathExistsSync(buildDir)) {
     buildDir = resolve(__dirname, '../../build');

package/utils/create-cache-dir.js

@@ -0,0 +1,131 @@
+'use strict';
+
+const path = require('path');
+const _ = require('lodash');
+const fs = require('fs-extra');
+const tsUtils = require('@strapi/typescript-utils');
+const getCustomAppConfigFile = require('./get-custom-app-config-file');
+
+const getPkgPath = name => path.dirname(require.resolve(`${name}/package.json`));
+
+async function createPluginsJs(plugins, dest) {
+  const pluginsArray = plugins.map(({ pathToPlugin, name }) => {
+    const shortName = _.camelCase(name);
+
+    /**
+     * path.join, on windows, it uses backslashes to resolve path.
+     * The problem is that Webpack does not windows paths
+     * With this tool, we need to rely on "/" and not "\".
+     * This is the reason why '..\\..\\..\\node_modules\\@strapi\\plugin-content-type-builder/strapi-admin.js' was not working.
+     * The regexp at line 105 aims to replace the windows backslashes by standard slash so that webpack can deal with them.
+     * Backslash looks to work only for absolute paths with webpack => https://webpack.js.org/concepts/module-resolution/#absolute-paths
+     */
+    const realPath = path
+      .join(path.relative(path.resolve(dest, 'admin', 'src'), pathToPlugin), 'strapi-admin.js')
+      .replace(/\\/g, '/');
+
+    return {
+      name,
+      pathToPlugin: realPath,
+      shortName,
+    };
+  });
+
+  const content = `
+${pluginsArray
+  .map(({ pathToPlugin, shortName }) => {
+    const req = `'${pathToPlugin}'`;
+
+    return `import ${shortName} from ${req};`;
+  })
+  .join('\n')}
+
+
+const plugins = {
+${[...pluginsArray]
+  .map(({ name, shortName }) => {
+    return `  '${name}': ${shortName},`;
+  })
+  .join('\n')}
+};
+
+export default plugins;
+`;
+
+  return fs.writeFile(path.resolve(dest, 'admin', 'src', 'plugins.js'), content);
+}
+
+async function copyAdmin(dest) {
+  const adminPath = getPkgPath('@strapi/admin');
+
+  // TODO copy ee folders for plugins
+  await fs.copy(path.resolve(adminPath, 'ee', 'admin'), path.resolve(dest, 'ee', 'admin'));
+
+  await fs.ensureDir(path.resolve(dest, 'config'));
+  await fs.copy(path.resolve(adminPath, 'admin'), path.resolve(dest, 'admin'));
+
+  // Copy package.json
+  await fs.copy(path.resolve(adminPath, 'package.json'), path.resolve(dest, 'package.json'));
+}
+
+async function createCacheDir({ appDir, plugins }) {
+  const cacheDir = path.resolve(appDir, '.cache');
+
+  const useTypeScript = await tsUtils.isUsingTypeScript(
+    path.join(appDir, 'src', 'admin'),
+    'tsconfig.json'
+  );
+
+  const pluginsWithFront = Object.keys(plugins)
+    .filter(pluginName => {
+      const pluginInfo = plugins[pluginName];
+      return fs.existsSync(path.resolve(pluginInfo.pathToPlugin, 'strapi-admin.js'));
+    })
+    .map(name => ({ name, ...plugins[name] }));
+
+  // create .cache dir
+  await fs.emptyDir(cacheDir);
+
+  // copy admin core code
+  await copyAdmin(cacheDir);
+
+  // Retrieve the custom config file extension
+  const customAdminAppConfigFile = await getCustomAppConfigFile(appDir, useTypeScript);
+
+  if (customAdminAppConfigFile) {
+    const defaultAdminConfigFilePath = path.resolve(cacheDir, 'admin', 'src', 'app.js');
+    const customAdminAppConfigFilePath = path.join(
+      appDir,
+      'src',
+      'admin',
+      customAdminAppConfigFile
+    );
+    const dest = path.resolve(cacheDir, 'admin', 'src', customAdminAppConfigFile);
+
+    if (useTypeScript) {
+      // Remove the default config file
+      await fs.remove(defaultAdminConfigFilePath);
+      // Copy the custom one
+      await fs.copy(customAdminAppConfigFilePath, dest);
+    } else {
+      await fs.copy(customAdminAppConfigFilePath, dest);
+    }
+  }
+
+  // Copy admin extensions folder
+  const adminExtensionFolder = path.join(appDir, 'src', 'admin', 'extensions');
+
+  if (fs.existsSync(adminExtensionFolder)) {
+    await fs.copy(adminExtensionFolder, path.resolve(cacheDir, 'admin', 'src', 'extensions'));
+  }
+
+  // create plugins.js with plugins requires
+  await createPluginsJs(pluginsWithFront, cacheDir);
+
+  // create the tsconfig.json file so we can develop plugins in ts while being in a JS project
+  if (!useTypeScript) {
+    await tsUtils.admin.createTSConfigFile(cacheDir);
+  }
+}
+
+module.exports = createCacheDir;

package/utils/get-custom-app-config-file.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const { join } = require('path');
+const fse = require('fs-extra');
+const { isUsingTypeScript } = require('@strapi/typescript-utils');
+
+/**
+ * Retrieve the custom admin entry file name
+ * @param {String} dir - Directory of the admin panel
+ * @returns String
+ */
+const getCustomAppConfigFile = async dir => {
+  const adminSrcPath = join(dir, 'src', 'admin');
+  const useTypeScript = await isUsingTypeScript(adminSrcPath, 'tsconfig.json');
+
+  const files = await fse.readdir(adminSrcPath);
+
+  const appJsx = files.find(file => /^app.jsx?$/.test(file));
+  const appTsx = files.find(file => /^app.tsx?$/.test(file));
+
+  if (useTypeScript) {
+    return appTsx || appJsx;
+  }
+
+  return appJsx;
+};
+
+module.exports = getCustomAppConfigFile;

package/utils/get-custom-webpack-config.js

@@ -0,0 +1,38 @@
+'use strict';
+
+const path = require('path');
+const chalk = require('chalk');
+const _ = require('lodash');
+const webpack = require('webpack');
+const fs = require('fs-extra');
+const getWebpackConfig = require('../webpack.config');
+
+const getCustomWebpackConfig = (dir, config) => {
+  const adminConfigPath = path.join(dir, 'src', 'admin', 'webpack.config.js');
+
+  let webpackConfig = getWebpackConfig(config);
+
+  if (fs.existsSync(adminConfigPath)) {
+    const webpackAdminConfig = require(path.resolve(adminConfigPath));
+
+    if (_.isFunction(webpackAdminConfig)) {
+      // Expose the devServer configuration
+      if (config.devServer) {
+        webpackConfig.devServer = config.devServer;
+      }
+
+      webpackConfig = webpackAdminConfig(webpackConfig, webpack);
+
+      if (!webpackConfig) {
+        console.error(
+          `${chalk.red('Error:')} Nothing was returned from your custom webpack configuration`
+        );
+        process.exit(1);
+      }
+    }
+  }
+
+  return webpackConfig;
+};
+
+module.exports = getCustomWebpackConfig;

package/utils/get-plugins-path.js

@@ -0,0 +1,26 @@
+'use strict';
+
+const { join, resolve } = require('path');
+const fs = require('fs-extra');
+const glob = require('glob');
+
+// Only for dev environement
+const getPluginsPath = () => {
+  const rootPath = resolve(__dirname, '..', join('..', '..', '..', 'packages'));
+  const corePath = join(rootPath, 'core', '*');
+  const pluginsPath = join(rootPath, 'plugins', '*');
+  const corePackageDirs = glob.sync(corePath);
+  const pluginsPackageDirs = glob.sync(pluginsPath);
+
+  const packageDirs = [...corePackageDirs, ...pluginsPackageDirs].filter(dir => {
+    const isCoreAdmin = dir.includes('packages/core/admin');
+    const pathToEntryPoint = join(dir, 'admin', 'src', 'index.js');
+    const doesAdminFolderExist = fs.pathExistsSync(pathToEntryPoint);
+
+    return !isCoreAdmin && doesAdminFolderExist;
+  });
+
+  return packageDirs.map(dir => resolve(__dirname, '..', join(dir, 'admin', 'src')));
+};
+
+module.exports = getPluginsPath;

package/utils/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+const createCacheDir = require('./create-cache-dir');
+const getCustomWebpackConfig = require('./get-custom-webpack-config');
+const shouldBuildAdmin = require('./should-build-admin');
+const watchAdminFiles = require('./watch-admin-files');
+
+module.exports = {
+  createCacheDir,
+  getCustomWebpackConfig,
+  shouldBuildAdmin,
+  watchAdminFiles,
+};

package/utils/should-build-admin.js

@@ -0,0 +1,52 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs-extra');
+const getCustomAppConfigFile = require('./get-custom-app-config-file');
+
+const DEFAULT_PLUGINS = [
+  'content-type-builder',
+  'content-manager',
+  'upload',
+  'email',
+  'i18n',
+  'users-permissions',
+];
+
+/**
+ * Checks if the project's installed plugins are not the same as a default one.
+ * @param {Object} plugins
+ * @returns {boolean}
+ */
+const hasNonDefaultPlugins = plugins => {
+  // List of plugins that are not the ones installed in a generated app
+  const installedPlugins = Object.keys(plugins).filter(x => !DEFAULT_PLUGINS.includes(x));
+
+  // List of default plugins uninstalled from a generated app
+  const missingPlugins = DEFAULT_PLUGINS.filter(x => !Object.keys(plugins).includes(x));
+
+  const diff = [...installedPlugins, ...missingPlugins];
+
+  return diff.length > 0;
+};
+
+const hasCustomAdminCode = async dir => {
+  const customAdminPath = path.join(dir, 'src', 'admin');
+
+  const customAdminAppConfigFile = await getCustomAppConfigFile(dir);
+  const customAdminWebpackFile = path.join(customAdminPath, 'webpack.config.js');
+
+  const hasCustomConfigFile = !!customAdminAppConfigFile;
+  const hasCustomWebpackFile = await fs.pathExists(customAdminWebpackFile);
+
+  return hasCustomConfigFile || hasCustomWebpackFile;
+};
+
+const shouldBuildAdmin = async ({ appDir, plugins }) => {
+  const appHasCustomAdminCode = await hasCustomAdminCode(appDir);
+  const appHasNonDefaultPlugins = hasNonDefaultPlugins(plugins);
+
+  return appHasCustomAdminCode || appHasNonDefaultPlugins;
+};
+
+module.exports = shouldBuildAdmin;

package/utils/watch-admin-files.js

@@ -0,0 +1,59 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs-extra');
+const chokidar = require('chokidar');
+const { isUsingTypeScript } = require('@strapi/typescript-utils');
+
+/**
+ * Listen to files change and copy the changed files in the .cache/admin folder
+ * when using the dev mode
+ * @param {string} dir
+ */
+async function watchAdminFiles(dir) {
+  const useTypeScript = await isUsingTypeScript(path.join(dir, 'src', 'admin'), 'tsconfig.json');
+
+  const cacheDir = path.join(dir, '.cache');
+  const targetExtensionFile = useTypeScript ? 'app.tsx' : 'app.js';
+  const appExtensionFile = path.join(dir, 'src', 'admin', targetExtensionFile);
+  const extensionsPath = path.join(dir, 'src', 'admin', 'extensions');
+
+  // Only watch the admin/app.js file and the files that are in the ./admin/extensions/folder
+  const filesToWatch = [appExtensionFile, extensionsPath];
+
+  const watcher = chokidar.watch(filesToWatch, {
+    ignoreInitial: true,
+    ignorePermissionErrors: true,
+  });
+
+  watcher.on('all', async (event, filePath) => {
+    const isAppFile = filePath.includes(appExtensionFile);
+
+    // The app.js file needs to be copied in the .cache/admin/src/app.js and the other ones needs to
+    // be copied in the .cache/admin/src/extensions folder
+    const targetPath = isAppFile
+      ? path.join(path.normalize(filePath.split(appExtensionFile)[1]), targetExtensionFile)
+      : path.join('extensions', path.normalize(filePath.split(extensionsPath)[1]));
+
+    const destFolder = path.join(cacheDir, 'admin', 'src');
+
+    if (event === 'unlink' || event === 'unlinkDir') {
+      // Remove the file or folder
+      // We need to copy the original files when deleting an override one
+      try {
+        fs.removeSync(path.join(destFolder, targetPath));
+      } catch (err) {
+        console.log('An error occured while deleting the file', err);
+      }
+    } else {
+      // In any other case just copy the file into the .cache/admin/src folder
+      try {
+        await fs.copy(filePath, path.join(destFolder, targetPath));
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  });
+}
+
+module.exports = watchAdminFiles;

package/webpack.alias.js

@@ -14,7 +14,6 @@ const aliasExactMatch = [
   'immer',
   'qs',
   'lodash',
-  'moment',
   'react',
   'react-copy-to-clipboard',
   'react-dnd',

package/webpack.config.js

@@ -4,6 +4,7 @@ const path = require('path');
 const fse = require('fs-extra');
 const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const ForkTsCheckerPlugin = require('fork-ts-checker-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { ESBuildMinifyPlugin } = require('esbuild-loader');
 const WebpackBar = require('webpackbar');
@@ -16,12 +17,12 @@ const getClientEnvironment = require('./env');
 const EE_REGEX = /from.* ['"]ee_else_ce\//;
 
 module.exports = ({
-  entry,
   cacheDir,
-  pluginsPath,
   dest,
+  entry,
   env,
   optimize,
+  pluginsPath,
   options = {
     backend: 'http://localhost:1337',
     adminPath: '/admin/',
@@ -31,6 +32,7 @@ module.exports = ({
     eeRoot: './ee/admin',
     ceRoot: './admin/src',
   },
+  tsConfigFilePath,
 }) => {
   const isProduction = env === 'production';
 
@@ -38,10 +40,6 @@ module.exports = ({
 
   const webpackPlugins = isProduction
     ? [
-        new webpack.IgnorePlugin({
-          resourceRegExp: /^\.\/locale$/,
-          contextRegExp: /moment$/,
-        }),
         new MiniCssExtractPlugin({
           filename: '[name].[chunkhash].css',
           chunkFilename: '[name].[chunkhash].chunkhash.css',
@@ -51,12 +49,15 @@ module.exports = ({
       ]
     : [];
 
+  // Directly inject a polyfill in the webpack entry point before the entry point
+  // FIXME: I have noticed a bug regarding the helper-plugin and esbuild-loader
+  // The only I could fix it was to inject the babel polyfill
   const babelPolyfill = '@babel/polyfill/dist/polyfill.min.js';
 
   return {
     mode: isProduction ? 'production' : 'development',
     bail: isProduction ? true : false,
-    devtool: false,
+    devtool: isProduction ? false : 'eval-source-map',
     experiments: {
       topLevelAwait: true,
     },
@@ -77,10 +78,21 @@ module.exports = ({
           css: true, // Apply minification to CSS assets
         }),
       ],
+      moduleIds: 'deterministic',
       runtimeChunk: true,
     },
     module: {
       rules: [
+        {
+          test: /\.tsx?$/,
+          loader: require.resolve('esbuild-loader'),
+          include: [cacheDir, ...pluginsPath],
+          exclude: /node_modules/,
+          options: {
+            loader: 'tsx',
+            target: 'es2015',
+          },
+        },
         {
           test: /\.m?jsx?$/,
           include: cacheDir,
@@ -96,6 +108,10 @@ module.exports = ({
                 try {
                   const fileContent = fse.readFileSync(filePath).toString();
 
+                  if (fileContent.match(/from.* ['"]ee_else_ce\//)) {
+                    return true;
+                  }
+
                   return EE_REGEX.test(fileContent);
                 } catch (e) {
                   return false;
@@ -192,7 +208,7 @@ module.exports = ({
     resolve: {
       alias,
       symlinks: false,
-      extensions: ['.js', '.jsx', '.react.js'],
+      extensions: ['.js', '.jsx', '.react.js', '.ts', '.tsx'],
       mainFields: ['browser', 'jsnext:main', 'main'],
       modules: ['node_modules', path.resolve(__dirname, 'node_modules')],
     },
@@ -200,13 +216,19 @@ module.exports = ({
       new HtmlWebpackPlugin({
         inject: true,
         template: path.resolve(__dirname, 'index.html'),
-        // FIXME
-        // favicon: path.resolve(__dirname, 'admin/src/favicon.ico'),
       }),
       new webpack.DefinePlugin(envVariables),
 
       new NodePolyfillPlugin(),
+
+      new ForkTsCheckerPlugin({
+        typescript: {
+          configFile: tsConfigFilePath,
+        },
+      }),
+
       !isProduction && process.env.REACT_REFRESH !== 'false' && new ReactRefreshWebpackPlugin(),
+
       ...webpackPlugins,
     ].filter(Boolean),
   };

package/admin/src/content-manager/components/SelectWrapper/ClearIndicator.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { components } from 'react-select';
-import Cross from '@strapi/icons/Cross';
-import IconBox from './IconBox';
-
-const ClearIndicator = props => {
-  const Component = components.ClearIndicator;
-
-  return (
-    <Component {...props}>
-      <IconBox as="button" type="button">
-        <Cross />
-      </IconBox>
-    </Component>
-  );
-};
-
-export default ClearIndicator;

package/admin/src/content-manager/components/SelectWrapper/DropdownIndicator.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import CarretDown from '@strapi/icons/CarretDown';
-import IconBox from './IconBox';
-
-export const CarretBox = styled(IconBox)`
-  display: flex;
-  background: none;
-  border: none;
-
-  svg {
-    width: ${6 / 16}rem;
-  }
-`;
-
-const DropdownIndicator = () => {
-  return (
-    <CarretBox as="button" type="button" paddingRight={3}>
-      <CarretDown />
-    </CarretBox>
-  );
-};
-
-export default DropdownIndicator;