@strapi/admin 4.2.0-beta.0 → 4.2.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/admin",
-  "version": "4.2.0-beta.0",
+  "version": "4.2.0-beta.3",
   "description": "Strapi Admin",
   "repository": {
     "type": "git",
@@ -28,6 +28,7 @@
     "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",
@@ -37,11 +38,8 @@
   },
   "dependencies": {
     "@babel/core": "7.16.7",
-    "@babel/plugin-proposal-async-generator-functions": "7.16.7",
-    "@babel/plugin-proposal-class-properties": "7.16.7",
-    "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "7.16.7",
     "@babel/plugin-transform-runtime": "7.16.7",
+    "@babel/polyfill": "7.12.1",
     "@babel/preset-env": "7.16.7",
     "@babel/preset-react": "7.16.7",
     "@babel/runtime": "7.16.7",
@@ -52,11 +50,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.0",
-    "@strapi/design-system": "0.0.1-alpha.79",
-    "@strapi/helper-plugin": "4.2.0-beta.0",
-    "@strapi/icons": "0.0.1-alpha.79",
-    "@strapi/utils": "4.2.0-beta.0",
+    "@strapi/babel-plugin-switch-ee-ce": "4.2.0-beta.3",
+    "@strapi/design-system": "1.1.0",
+    "@strapi/helper-plugin": "4.2.0-beta.3",
+    "@strapi/icons": "1.1.0",
+    "@strapi/typescript-utils": "4.2.0-beta.3",
+    "@strapi/utils": "4.2.0-beta.3",
     "axios": "0.24.0",
     "babel-loader": "8.2.3",
     "babel-plugin-styled-components": "2.0.2",
@@ -82,7 +81,6 @@
     "html-webpack-plugin": "5.5.0",
     "immer": "9.0.6",
     "invariant": "^2.2.4",
-    "is-wsl": "2.2.0",
     "js-cookie": "2.2.1",
     "jsonwebtoken": "8.5.1",
     "koa-compose": "4.1.0",
@@ -130,8 +128,7 @@
     "semver": "7.3.5",
     "sift": "13.5.0",
     "style-loader": "3.3.1",
-    "styled-components": "^5.2.3",
-    "terser-webpack-plugin": "5.3.0",
+    "styled-components": "5.3.3",
     "webpack": "5.65.0",
     "webpack-cli": "4.9.1",
     "webpack-dev-server": "4.7.3",
@@ -140,11 +137,12 @@
   },
   "devDependencies": {
     "duplicate-dependencies-webpack-plugin": "0.2.0",
+    "speed-measure-webpack-plugin": "1.5.0",
     "webpack-bundle-analyzer": "4.4.1"
   },
   "engines": {
     "node": ">=12.22.0 <=16.x.x",
     "npm": ">=6.0.0"
   },
-  "gitHead": "db70f0de7cc73fb469c8a076b89530729cf14142"
+  "gitHead": "c4addbad6ecbc8ef7633bbba3806f3b0a2ae5f49"
 }

package/scripts/build.js

@@ -2,7 +2,12 @@
 
 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,
@@ -11,29 +16,39 @@ 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: __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.MESURE_BUILD_SPEED === 'true' ? smp.wrap(webpackConfig(args)) : webpackConfig(args);
+
+  const compiler = webpack(config);
 
   console.log('Building the admin panel');
 
@@ -58,7 +73,20 @@ const buildAdmin = async () => {
         if (messages.errors.length > 1) {
           messages.errors.length = 1;
         }
-        return reject(new Error(messages.errors.join('\n\n')));
+
+        return reject(
+          new Error(
+            messages.errors.reduce((acc, error) => {
+              if (isObject(error)) {
+                acc += error.message;
+              } else {
+                acc += error.join('\n\n');
+              }
+
+              return acc;
+            }, '')
+          )
+        );
       }
 
       return resolve({

package/server/bootstrap.js

@@ -12,12 +12,12 @@ const defaultAdminAuthSettings = {
   },
 };
 
-const registerPermissionActions = () => {
-  getService('permission').actionProvider.registerMany(adminActions.actions);
+const registerPermissionActions = async () => {
+  await getService('permission').actionProvider.registerMany(adminActions.actions);
 };
 
-const registerAdminConditions = () => {
-  getService('permission').conditionProvider.registerMany(adminConditions.conditions);
+const registerAdminConditions = async () => {
+  await getService('permission').conditionProvider.registerMany(adminConditions.conditions);
 };
 
 const registerModelHooks = () => {
@@ -53,14 +53,15 @@ const syncAuthSettings = async () => {
 };
 
 module.exports = async () => {
-  registerAdminConditions();
-  registerPermissionActions();
+  await registerAdminConditions();
+  await registerPermissionActions();
   registerModelHooks();
 
   const permissionService = getService('permission');
   const userService = getService('user');
   const roleService = getService('role');
   const apiTokenService = getService('api-token');
+  const tokenService = getService('token');
 
   await roleService.createRolesIfNoneExist();
   await roleService.resetSuperAdminPermissions();
@@ -73,5 +74,6 @@ module.exports = async () => {
 
   await syncAuthSettings();
 
-  apiTokenService.createSaltIfNotDefined();
+  apiTokenService.checkSaltIsDefined();
+  tokenService.checkSecretIsDefined();
 };

package/server/config/index.js

@@ -6,5 +6,4 @@ module.exports = {
   forgotPassword: {
     emailTemplate: forgotPasswordTemplate,
   },
-  apiToken: require('./api-token'),
 };

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');
 
@@ -37,12 +38,32 @@ module.exports = {
   },
 
   async init() {
-    const uuid = strapi.config.get('uuid', false);
+    let uuid = strapi.config.get('uuid', false);
     const hasAdmin = await getService('user').exists();
+    // set to null if telemetryDisabled flag not avaialble in package.json
+    const telemetryDisabled = strapi.config.get('packageJsonStrapi.telemetryDisabled', null);
+
+    if (telemetryDisabled !== null && telemetryDisabled === true) {
+      uuid = false;
+    }
 
     return { data: { uuid, hasAdmin } };
   },
 
+  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);

package/server/controllers/user.js

@@ -36,6 +36,10 @@ module.exports = {
 
     const userInfo = getService('user').sanitizeUser(createdUser);
 
+    // Note: We need to assign manually the registrationToken to the
+    // final user payload so that it's not removed in the sanitation process.
+    Object.assign(userInfo, { registrationToken: createdUser.registrationToken });
+
     // Send 201 created
     ctx.created({ data: userInfo });
   },

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

@@ -21,6 +21,15 @@ 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/services/api-token.js

@@ -74,20 +74,21 @@ const create = async attributes => {
 /**
  * @returns {void}
  */
-const createSaltIfNotDefined = () => {
-  if (strapi.config.get('admin.apiToken.salt')) {
-    return;
+const checkSaltIsDefined = () => {
+  if (!strapi.config.get('admin.apiToken.salt')) {
+    // TODO V5: stop reading API_TOKEN_SALT
+    if (process.env.API_TOKEN_SALT) {
+      process.emitWarning(`[deprecated] In future versions, Strapi will stop reading directly from the environment variable API_TOKEN_SALT. Please set apiToken.salt in config/admin.js instead.
+For security reasons, keep storing the secret in an environment variable and use env() to read it in config/admin.js (ex: \`apiToken: { salt: env('API_TOKEN_SALT') }\`). See https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/environment.html#configuration-using-environment-variables.`);
+
+      strapi.config.set('admin.apiToken.salt', process.env.API_TOKEN_SALT);
+    } else {
+      throw new Error(
+        `Missing apiToken.salt. Please set apiToken.salt in config/admin.js (ex: you can generate one using Node with \`crypto.randomBytes(16).toString('base64')\`).
+For security reasons, prefer storing the secret in an environment variable and read it in config/admin.js. See https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/environment.html#configuration-using-environment-variables.`
+      );
+    }
   }
-
-  if (process.env.API_TOKEN_SALT) {
-    throw new Error(
-      `There's something wrong with the configuration of your api-token salt. If you have changed the env variable used in the configuration file, please verify that you have created and set the variable in your .env file.`
-    );
-  }
-
-  const salt = crypto.randomBytes(16).toString('hex');
-  strapi.fs.appendFile(process.env.ENV_PATH || '.env', `API_TOKEN_SALT=${salt}\n`);
-  strapi.config.set('admin.apiToken.salt', salt);
 };
 
 /**
@@ -162,7 +163,7 @@ const getBy = async (whereParams = {}) => {
 module.exports = {
   create,
   exists,
-  createSaltIfNotDefined,
+  checkSaltIsDefined,
   hash,
   list,
   revoke,

package/server/services/permission/permissions-manager/sanitize.js

@@ -14,6 +14,7 @@ const {
   uniq,
   intersection,
   pick,
+  getOr,
 } = require('lodash/fp');
 
 const { contentTypes, traverseEntity, sanitize, pipeAsync } = require('@strapi/utils');
@@ -46,6 +47,8 @@ module.exports = ({ action, ability, model }) => {
     const permittedFields = fields.shouldIncludeAll ? null : getOutputFields(fields.permitted);
 
     return pipeAsync(
+      // Remove fields hidden from the admin
+      traverseEntity(omitHiddenFields, { schema }),
       // Remove unallowed fields from admin::user relations
       traverseEntity(pickAllowedAdminUserFields, { schema }),
       // Remove not allowed fields (RBAC)
@@ -61,6 +64,8 @@ module.exports = ({ action, ability, model }) => {
     const permittedFields = fields.shouldIncludeAll ? null : getInputFields(fields.permitted);
 
     return pipeAsync(
+      // Remove fields hidden from the admin
+      traverseEntity(omitHiddenFields, { schema }),
       // Remove not allowed fields (RBAC)
       traverseEntity(allowedFields(permittedFields), { schema }),
       // Remove roles from createdBy & updateBy fields
@@ -107,8 +112,25 @@ module.exports = ({ action, ability, model }) => {
     return defaults({ subject: asSubject(model, data), action }, options);
   };
 
+  /**
+   * Omit creator fields' (createdBy & updatedBy) roles from the admin API responses
+   */
   const omitCreatorRoles = omit([`${CREATED_BY_ATTRIBUTE}.roles`, `${UPDATED_BY_ATTRIBUTE}.roles`]);
 
+  /**
+   * Visitor used to remove hidden fields from the admin API responses
+   */
+  const omitHiddenFields = ({ key, schema }, { remove }) => {
+    const isHidden = getOr(false, ['config', 'attributes', key, 'hidden'], schema);
+
+    if (isHidden) {
+      remove(key);
+    }
+  };
+
+  /**
+   * Visitor used to only select needed fields from the admin users entities & avoid leaking sensitive information
+   */
   const pickAllowedAdminUserFields = ({ attribute, key, value }, { set }) => {
     const pickAllowedFields = pick(['id', 'firstname', 'lastname', 'username']);
 

package/server/services/token.js

@@ -49,9 +49,22 @@ const decodeJwtToken = token => {
   }
 };
 
+/**
+ * @returns {void}
+ */
+const checkSecretIsDefined = () => {
+  if (strapi.config.serveAdminPanel && !strapi.config.get('admin.auth.secret')) {
+    throw new Error(
+      `Missing auth.secret. Please set auth.secret in config/admin.js (ex: you can generate one using Node with \`crypto.randomBytes(16).toString('base64')\`).
+For security reasons, prefer storing the secret in an environment variable and read it in config/admin.js. See https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/environment.html#configuration-using-environment-variables.`
+    );
+  }
+};
+
 module.exports = {
   createToken,
   createJwtToken,
   getTokenOptions,
   decodeJwtToken,
+  checkSecretIsDefined,
 };

package/server/services/user.js

@@ -17,7 +17,7 @@ const sanitizeUserRoles = role => _.pick(role, ['id', 'name', 'description', 'co
  */
 const sanitizeUser = user => {
   return {
-    ..._.omit(user, ['password', 'resetPasswordToken', 'roles']),
+    ..._.omit(user, ['password', 'resetPasswordToken', 'registrationToken', 'roles']),
     roles: user.roles && user.roles.map(sanitizeUserRoles),
   };
 };

package/server/validation/permission.js

@@ -32,7 +32,11 @@ const checkPermissionsAreBound = role =>
 
     for (const [subject, perms] of Object.entries(permsBySubject)) {
       const boundActions = getBoundActionsBySubject(role, subject);
-      const missingActions = _.xor(perms.map(p => p.action), boundActions).length !== 0;
+      const missingActions =
+        _.xor(
+          perms.map(p => p.action),
+          boundActions
+        ).length !== 0;
       if (missingActions) return false;
 
       const permsBoundByFields = perms.filter(p => BOUND_ACTIONS_FOR_FIELDS.includes(p.action));

package/utils/create-cache-dir.js

@@ -3,11 +3,13 @@
 const path = require('path');
 const _ = require('lodash');
 const fs = require('fs-extra');
+const { isUsingTypeScript } = 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(({ appPathToPlugin, name }) => {
+  const pluginsArray = plugins.map(({ pathToPlugin, name }) => {
     const shortName = _.camelCase(name);
 
     /**
@@ -19,7 +21,7 @@ async function createPluginsJs(plugins, dest) {
      * 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'), appPathToPlugin), 'strapi-admin.js')
+      .join(path.relative(path.resolve(dest, 'admin', 'src'), pathToPlugin), 'strapi-admin.js')
       .replace(/\\/g, '/');
 
     return {
@@ -66,9 +68,11 @@ async function copyAdmin(dest) {
   await fs.copy(path.resolve(adminPath, 'package.json'), path.resolve(dest, 'package.json'));
 }
 
-async function createCacheDir({ appDir, plugins, useTypeScript }) {
+async function createCacheDir({ appDir, plugins }) {
   const cacheDir = path.resolve(appDir, '.cache');
 
+  const useTypeScript = await isUsingTypeScript(path.join(appDir, 'src', 'admin'), 'tsconfig.json');
+
   const pluginsWithFront = Object.keys(plugins)
     .filter(pluginName => {
       const pluginInfo = plugins[pluginName];
@@ -82,26 +86,26 @@ async function createCacheDir({ appDir, plugins, useTypeScript }) {
   // copy admin core code
   await copyAdmin(cacheDir);
 
-  // Copy app.js or app.tsx if typescript is enabled
-  const customAdminConfigJSFilePath = path.join(appDir, 'src', 'admin', 'app.js');
-  const customAdminConfigTSXFilePath = path.join(appDir, 'src', 'admin', 'app.tsx');
-  const customAdminConfigFilePath = useTypeScript
-    ? customAdminConfigTSXFilePath
-    : customAdminConfigJSFilePath;
+  // Retrieve the custom config file extension
+  const customAdminAppConfigFile = await getCustomAppConfigFile(appDir, useTypeScript);
 
-  if (fs.existsSync(customAdminConfigFilePath)) {
+  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(
-        customAdminConfigTSXFilePath,
-        path.resolve(cacheDir, 'admin', 'src', 'app.tsx')
-      );
+      await fs.copy(customAdminAppConfigFilePath, dest);
     } else {
-      await fs.copy(customAdminConfigFilePath, path.resolve(cacheDir, 'admin', 'src', 'app.js'));
+      await fs.copy(customAdminAppConfigFilePath, dest);
     }
   }
 
@@ -114,6 +118,44 @@ async function createCacheDir({ appDir, plugins, useTypeScript }) {
 
   // 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 createTSConfigFile(cacheDir);
+  }
+}
+
+async function createTSConfigFile(dest) {
+  const tsConfig = {
+    compilerOptions: {
+      lib: ['es2019', 'es2020.promise', 'es2020.bigint', 'es2020.string', 'DOM'],
+      noImplicitAny: false,
+      module: 'es2020',
+      target: 'es5',
+      jsx: 'react',
+      allowJs: true,
+      strict: true,
+      moduleResolution: 'node',
+      skipLibCheck: true,
+      esModuleInterop: true,
+      allowSyntheticDefaultImports: true,
+      resolveJsonModule: true,
+      noEmit: false,
+      incremental: true,
+    },
+    include: ['../../../src/admin/*', '../../../src/**/**/admin/src/*'],
+    exclude: ['node_modules', '**/*.test.js', '*.js'],
+  };
+
+  const filePath = path.join(dest, 'admin', 'src', 'tsconfig.json');
+
+  try {
+    await fs.ensureFile(filePath);
+
+    await fs.writeJSON(filePath, tsConfig, { spaces: 2 });
+  } catch (err) {
+    console.log(err);
+  }
 }
 
 module.exports = createCacheDir;

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

@@ -0,0 +1,23 @@
+'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 appRegex = new RegExp(`app.${useTypeScript ? 't' : 'j'}sx?$`);
+
+  return files.find(file => file.match(appRegex));
+};
+
+module.exports = getCustomAppConfigFile;

package/utils/get-plugins-path.js

@@ -0,0 +1,26 @@
+'use strict';
+
+const { join, resolve } = require('path');
+const fs = require('fs-extra');
+// eslint-disable-next-line node/no-extraneous-require
+const glob = require('glob');
+
+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/should-build-admin.js

@@ -2,6 +2,7 @@
 
 const path = require('path');
 const fs = require('fs-extra');
+const getCustomAppConfigFile = require('./get-custom-app-config-file');
 
 const DEFAULT_PLUGINS = [
   'content-type-builder',
@@ -29,20 +30,20 @@ const hasNonDefaultPlugins = plugins => {
   return diff.length > 0;
 };
 
-const hasCustomAdminCode = async (dir, useTypeScript) => {
+const hasCustomAdminCode = async dir => {
   const customAdminPath = path.join(dir, 'src', 'admin');
-  const customAdminConfigFileExtension = useTypeScript ? 'app.tsx' : 'app.js';
-  const customAdminConfigFile = path.join(customAdminPath, customAdminConfigFileExtension);
+
+  const customAdminAppConfigFile = await getCustomAppConfigFile(dir);
   const customAdminWebpackFile = path.join(customAdminPath, 'webpack.config.js');
 
-  const hasCustomConfigFile = await fs.pathExists(customAdminConfigFile);
+  const hasCustomConfigFile = !!customAdminAppConfigFile;
   const hasCustomWebpackFile = await fs.pathExists(customAdminWebpackFile);
 
   return hasCustomConfigFile || hasCustomWebpackFile;
 };
 
-const shouldBuildAdmin = async ({ appDir, plugins, useTypeScript }) => {
-  const appHasCustomAdminCode = await hasCustomAdminCode(appDir, useTypeScript);
+const shouldBuildAdmin = async ({ appDir, plugins }) => {
+  const appHasCustomAdminCode = await hasCustomAdminCode(appDir);
   const appHasNonDefaultPlugins = hasNonDefaultPlugins(plugins);
 
   return appHasCustomAdminCode || appHasNonDefaultPlugins;

package/utils/watch-admin-files.js

@@ -3,13 +3,16 @@
 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, useTypeScript) {
+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);