@strapi/admin 4.2.0-beta.4 → 4.2.2

package/index.js

@@ -1,37 +1,66 @@
 'use strict';
 
 const path = require('path');
+const _ = require('lodash');
 const fs = require('fs-extra');
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
-const { isUsingTypeScript } = require('@strapi/typescript-utils');
 const chalk = require('chalk');
+const chokidar = require('chokidar');
+const getWebpackConfig = require('./webpack.config');
 
-const {
-  createCacheDir,
-  getCustomWebpackConfig,
-  shouldBuildAdmin,
-  watchAdminFiles,
-} = require('./utils');
+const getPkgPath = name => path.dirname(require.resolve(`${name}/package.json`));
 
-async function build({ appDir, buildDestDir, env, forceBuild, optimize, options, plugins }) {
-  const buildAdmin = await shouldBuildAdmin({ appDir, plugins });
+const DEFAULT_PLUGINS = [
+  'content-type-builder',
+  'content-manager',
+  'upload',
+  'email',
+  'i18n',
+  'users-permissions',
+];
 
-  const useTypeScript = await isUsingTypeScript(
-    path.join(appDir, 'src', 'admin'),
-    'tsconfig.json'
-  );
+function 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;
+}
+
+async function build({ plugins, dir, env, options, optimize, forceBuild }) {
+  const buildAdmin = await shouldBuildAdmin({ dir, plugins });
 
   if (!buildAdmin && !forceBuild) {
     return;
   }
 
   // Create the cache dir containing the front-end files.
-  await createCacheDir({ appDir, plugins });
+  await createCacheDir({ dir, plugins });
 
-  const cacheDir = path.resolve(appDir, '.cache');
+  const cacheDir = path.resolve(dir, '.cache');
   const entry = path.resolve(cacheDir, 'admin', 'src');
-  const dest = path.resolve(buildDestDir, 'build');
+  const dest = path.resolve(dir, 'build');
 
   // Roots for the @strapi/babel-plugin-switch-ee-ce
   const roots = {
@@ -41,23 +70,15 @@ async function build({ appDir, buildDestDir, env, forceBuild, optimize, options,
 
   const pluginsPath = Object.keys(plugins).map(pluginName => plugins[pluginName].pathToPlugin);
 
-  // Either use the tsconfig file from the generated app or the one inside the .cache folder
-  // so we can develop plugins in TS while being in a JS app
-  const tsConfigFilePath = useTypeScript
-    ? path.join(appDir, 'src', 'admin', 'tsconfig.json')
-    : path.resolve(entry, 'tsconfig.json');
-
-  const config = getCustomWebpackConfig(appDir, {
-    appDir,
+  const config = getCustomWebpackConfig(dir, {
+    entry,
+    pluginsPath,
     cacheDir,
     dest,
-    entry,
     env,
-    optimize,
     options,
-    pluginsPath,
+    optimize,
     roots,
-    tsConfigFilePath,
   });
 
   const compiler = webpack(config);
@@ -88,27 +109,115 @@ async function build({ appDir, buildDestDir, env, forceBuild, optimize, options,
   });
 }
 
-async function clean({ appDir, buildDestDir }) {
-  // FIXME rename admin build dir and path to build dir
-  const buildDir = path.join(buildDestDir, 'build');
-  // .cache dir is always located at the root of the app
-  const cacheDir = path.join(appDir, '.cache');
+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 clean({ dir }) {
+  const buildDir = path.join(dir, 'build');
+  const cacheDir = path.join(dir, '.cache');
 
   fs.removeSync(buildDir);
   fs.removeSync(cacheDir);
 }
 
-async function watchAdmin({ appDir, browser, buildDestDir, host, options, plugins, port }) {
-  const useTypeScript = await isUsingTypeScript(
-    path.join(appDir, 'src', 'admin'),
-    'tsconfig.json'
-  );
+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({ dir, plugins }) {
+  const cacheDir = path.resolve(dir, '.cache');
+
+  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);
+
+  // Copy app.js
+  const customAdminConfigFilePath = path.join(dir, 'src', 'admin', 'app.js');
+
+  if (fs.existsSync(customAdminConfigFilePath)) {
+    await fs.copy(customAdminConfigFilePath, path.resolve(cacheDir, 'admin', 'src', 'app.js'));
+  }
+
+  // Copy admin extensions folder
+  const adminExtensionFolder = path.join(dir, '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);
+}
+
+async function watchAdmin({ plugins, dir, host, port, browser, options }) {
   // Create the cache dir containing the front-end files.
-  const cacheDir = path.join(appDir, '.cache');
-  await createCacheDir({ appDir, plugins });
+  const cacheDir = path.join(dir, '.cache');
+  await createCacheDir({ dir, plugins });
 
   const entry = path.join(cacheDir, 'admin', 'src');
-  const dest = path.join(buildDestDir, 'build');
+  const dest = path.join(dir, 'build');
   const env = 'development';
 
   // Roots for the @strapi/babel-plugin-switch-ee-ce
@@ -119,20 +228,14 @@ async function watchAdmin({ appDir, browser, buildDestDir, host, options, plugin
 
   const pluginsPath = Object.keys(plugins).map(pluginName => plugins[pluginName].pathToPlugin);
 
-  // Either use the tsconfig file from the generated app or the one inside the .cache folder
-  // so we can develop plugins in TS while being in a JS app
-  const tsConfigFilePath = useTypeScript
-    ? path.join(appDir, 'src', 'admin', 'tsconfig.json')
-    : path.resolve(entry, 'tsconfig.json');
-
   const args = {
-    appDir,
+    entry,
     cacheDir,
+    pluginsPath,
     dest,
-    entry,
     env,
+    port,
     options,
-    pluginsPath,
     roots,
     devServer: {
       port,
@@ -143,6 +246,7 @@ async function watchAdmin({ appDir, browser, buildDestDir, host, options, plugin
           warnings: false,
         },
       },
+
       open: browser === 'true' ? true : browser,
       devMiddleware: {
         publicPath: options.adminPath,
@@ -152,10 +256,9 @@ async function watchAdmin({ appDir, browser, buildDestDir, host, options, plugin
         disableDotRule: true,
       },
     },
-    tsConfigFilePath,
   };
 
-  const webpackConfig = getCustomWebpackConfig(appDir, args);
+  const webpackConfig = getCustomWebpackConfig(dir, args);
 
   const compiler = webpack(webpackConfig);
 
@@ -176,7 +279,90 @@ async function watchAdmin({ appDir, browser, buildDestDir, host, options, plugin
 
   runServer();
 
-  watchAdminFiles(appDir, useTypeScript);
+  watchFiles(dir);
+}
+
+/**
+ * Listen to files change and copy the changed files in the .cache/admin folder
+ * when using the dev mode
+ * @param {string} dir
+ */
+async function watchFiles(dir) {
+  const cacheDir = path.join(dir, '.cache');
+  const appExtensionFile = path.join(dir, 'src', 'admin', 'app.js');
+  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]), 'app.js')
+      : 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);
+      }
+    }
+  });
+}
+
+const hasCustomAdminCode = async dir => {
+  const customAdminPath = path.join(dir, 'src', 'admin');
+  const customAdminConfigFile = path.join(customAdminPath, 'app.js');
+  const customAdminWebpackFile = path.join(customAdminPath, 'webpack.config.js');
+
+  const hasCustomConfigFile = await fs.pathExists(customAdminConfigFile);
+  const hasCustomWebpackFile = await fs.pathExists(customAdminWebpackFile);
+
+  return hasCustomConfigFile || hasCustomWebpackFile;
+};
+
+/**
+ * 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;
+};
+
+async function shouldBuildAdmin({ dir, plugins }) {
+  const appHasCustomAdminCode = await hasCustomAdminCode(dir);
+  const appHasNonDefaultPlugins = hasNonDefaultPlugins(plugins);
+
+  return appHasCustomAdminCode || appHasNonDefaultPlugins;
 }
 
 module.exports = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/admin",
-  "version": "4.2.0-beta.4",
+  "version": "4.2.2",
   "description": "Strapi Admin",
   "repository": {
     "type": "git",
@@ -28,7 +28,6 @@
     "develop:webpack": "cross-env NODE_ENV=development webpack serve --config webpack.config.dev.js --progress profile",
     "prepublishOnly": "yarn build",
     "build": "rimraf build && node ./scripts/build.js",
-    "build:mesure": "rimraf build && cross-env MESURE_BUILD_SPEED=true node ./scripts/build.js",
     "test": "echo \"no tests yet\"",
     "test:unit": "jest --verbose",
     "test:front": "cross-env IS_EE=true jest --config ./jest.config.front.js",
@@ -50,12 +49,12 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
-    "@strapi/babel-plugin-switch-ee-ce": "4.2.0-beta.4",
-    "@strapi/design-system": "1.1.0",
-    "@strapi/helper-plugin": "4.2.0-beta.4",
-    "@strapi/icons": "1.1.0",
-    "@strapi/typescript-utils": "4.2.0-beta.4",
-    "@strapi/utils": "4.2.0-beta.4",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
+    "@strapi/babel-plugin-switch-ee-ce": "4.2.2",
+    "@strapi/design-system": "1.2.0",
+    "@strapi/helper-plugin": "4.2.2",
+    "@strapi/icons": "1.2.0",
+    "@strapi/utils": "4.2.2",
     "axios": "0.24.0",
     "babel-loader": "8.2.3",
     "babel-plugin-styled-components": "2.0.2",
@@ -71,7 +70,6 @@
     "execa": "^1.0.0",
     "fast-deep-equal": "3.1.3",
     "font-awesome": "^4.7.0",
-    "fork-ts-checker-webpack-plugin": "7.2.1",
     "formik": "^2.2.6",
     "fs-extra": "10.0.0",
     "highlight.js": "^10.4.1",
@@ -116,6 +114,7 @@
     "react-intl": "5.20.2",
     "react-query": "3.24.3",
     "react-redux": "7.2.3",
+    "react-refresh": "0.11.0",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-select": "^4.0.2",
@@ -137,12 +136,11 @@
   },
   "devDependencies": {
     "duplicate-dependencies-webpack-plugin": "0.2.0",
-    "speed-measure-webpack-plugin": "1.5.0",
     "webpack-bundle-analyzer": "4.4.1"
   },
   "engines": {
     "node": ">=14.19.1 <=16.x.x",
     "npm": ">=6.0.0"
   },
-  "gitHead": "5caff35a30e33b7a660eb946299f9e3d2d35b2b8"
+  "gitHead": "376ff3133c13f6eb10d0c90f4b5eb701592aff97"
 }

package/scripts/build.js

@@ -3,11 +3,7 @@
 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,
@@ -16,39 +12,29 @@ 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.join(__dirname, '..'),
-    pluginsPath,
+    cacheDir: path.resolve(__dirname, '..'),
+    pluginsPath: [path.resolve(__dirname, '../../../../packages')],
     env: 'production',
     optimize: true,
     options: {
       backend: 'http://localhost:1337',
       adminPath: '/admin/',
     },
-    tsConfigFilePath,
   };
 
-  const config =
-    process.env.MESURE_BUILD_SPEED === 'true' ? smp.wrap(webpackConfig(args)) : webpackConfig(args);
-
-  const compiler = webpack(config);
+  const compiler = webpack(webpackConfig(args));
 
   console.log('Building the admin panel');
 

package/server/controllers/admin.js

@@ -5,7 +5,6 @@ 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');
 
@@ -82,24 +81,11 @@ module.exports = {
     return projectSettingsService.updateProjectSettings({ ...body, ...formatedFiles });
   },
 
-  async telemetryProperties() {
-    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);
     const strapiVersion = strapi.config.get('info.strapi', null);
+    const dependencies = strapi.config.get('info.dependencies', {});
     const nodeVersion = process.version;
     const communityEdition = !strapi.EE;
     const useYarn = await exists(path.join(process.cwd(), 'yarn.lock'));
@@ -109,6 +95,7 @@ module.exports = {
         currentEnvironment,
         autoReload,
         strapiVersion,
+        dependencies,
         nodeVersion,
         communityEdition,
         useYarn,

package/server/policies/index.js

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

package/server/routes/admin.js

@@ -49,15 +49,6 @@ module.exports = [
       policies: ['admin::isAuthenticatedAdmin'],
     },
   },
-  {
-    method: 'GET',
-    path: '/telemetry-properties',
-    handler: 'admin.telemetryProperties',
-    config: {
-      auth: false,
-      policies: ['admin::isTelemetryEnabled'],
-    },
-  },
   {
     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.dist.root, 'build');
+  let buildDir = resolve(strapi.dirs.root, 'build');
 
   if (!fse.pathExistsSync(buildDir)) {
     buildDir = resolve(__dirname, '../../build');

package/webpack.alias.js

@@ -2,18 +2,19 @@
 
 const path = require('path');
 
-const alias = [
-  'object-assign',
-  'whatwg-fetch',
+const aliasExactMatch = [
+  '@strapi/design-system',
+  '@strapi/helper-plugin',
+  '@strapi/icons',
   '@fortawesome/fontawesome-svg-core',
   '@fortawesome/free-solid-svg-icons',
+  'date-fns',
+  'formik',
   'history',
-  'hoist-non-react-statics',
   'immer',
-  'invariant',
+  'qs',
   'lodash',
   'moment',
-  'qs',
   'react',
   'react-copy-to-clipboard',
   'react-dnd',
@@ -24,6 +25,7 @@ const alias = [
   'react-helmet',
   'react-is',
   'react-intl',
+  'react-query',
   'react-redux',
   'react-router',
   'react-router-dom',
@@ -32,20 +34,29 @@ const alias = [
   'redux',
   'reselect',
   'styled-components',
+  'whatwg-fetch',
   'yup',
 ];
 
-module.exports = alias.reduce(
-  (acc, curr) => {
-    acc[`${curr}$`] = require.resolve(curr);
+const alias = [
+  'react-select/animated',
+  'react-select/async',
+  'react-select/async-creatable',
+  'react-select/base',
+  'react-select/creatable',
+];
+
+// See https://webpack.js.org/configuration/resolve/
+module.exports = {
+  ...alias.reduce((acc, name) => {
+    acc[name] = require.resolve(name);
     return acc;
-  },
-  {
-    'react-select/animated': require.resolve('react-select/animated'),
-    'react-select/async': require.resolve('react-select/async'),
-    'react-select/async-creatable': require.resolve('react-select/async-creatable'),
-    'react-select/base': require.resolve('react-select/base'),
-    'react-select/creatable': require.resolve('react-select/creatable'),
-    ee_else_ce: path.resolve(__dirname),
-  }
-);
+  }, {}),
+
+  ...aliasExactMatch.reduce((acc, name) => {
+    acc[`${name}$`] = require.resolve(name);
+    return acc;
+  }, {}),
+
+  ee_else_ce: path.resolve(__dirname),
+};