@strapi/admin 4.2.1-alpha.0 → 4.3.0-beta.2

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.config.js

@@ -4,22 +4,25 @@ 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');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+
 const alias = require('./webpack.alias');
 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/',
@@ -29,6 +32,7 @@ module.exports = ({
     eeRoot: './ee/admin',
     ceRoot: './admin/src',
   },
+  tsConfigFilePath,
 }) => {
   const isProduction = env === 'production';
 
@@ -49,6 +53,9 @@ 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 {
@@ -79,6 +86,16 @@ module.exports = ({
     },
     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,
@@ -94,6 +111,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;
@@ -190,7 +211,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')],
     },
@@ -198,13 +219,20 @@ 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;

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

@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-
-export const IconBox = styled(Box)`
-  background: transparent;
-  border: none;
-  position: relative;
-  z-index: 1;
-
-  svg {
-    height: ${11 / 16}rem;
-    width: ${11 / 16}rem;
-  }
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral600};
-  }
-`;
-
-export default IconBox;

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

@@ -1,3 +0,0 @@
-const IndicatorSeparator = () => null;
-
-export default IndicatorSeparator;

package/admin/src/content-manager/components/SelectWrapper/utils/getSelectStyles.js

@@ -1,92 +0,0 @@
-const getSelectStyles = theme => {
-  return {
-    clearIndicator: base => ({ ...base, padding: 0, paddingRight: theme.spaces[3] }),
-    container: base => ({
-      ...base,
-      background: theme.colors.neutral0,
-      fontFamily: 'Arial',
-      lineHeight: 'normal',
-    }),
-    control: (base, state) => {
-      let border;
-      let borderBottom;
-      let backgroundColor;
-
-      if (state.isFocused) {
-        border = `1px solid ${theme.colors.primary600} !important`;
-      } else {
-        border = `1px solid ${theme.colors.neutral200} !important`;
-      }
-
-      if (state.menuIsOpen === true) {
-        borderBottom = `1px solid ${theme.colors.primary600} !important`;
-      }
-
-      if (state.isDisabled) {
-        backgroundColor = '#fafafb !important';
-      }
-
-      return {
-        ...base,
-        fontSize: 14,
-        height: 40,
-        border,
-        outline: 0,
-        boxShadow: 0,
-        borderRadius: '2px !important',
-        borderBottom,
-        backgroundColor,
-        borderTopLeftRadius: '4px !important',
-        borderTopRightRadius: '4px !important',
-        borderBottomLeftRadius: '4px !important',
-        borderBottomRightRadius: '4px !important',
-      };
-    },
-    indicatorContainer: base => ({ ...base, padding: 0, paddingRight: theme.spaces[3] }),
-    input: base => ({ ...base, margin: 0, padding: 0, color: theme.colors.neutral800 }),
-    menu: base => {
-      return {
-        ...base,
-        width: '100%',
-        marginTop: theme.spaces[1],
-        backgroundColor: theme.colors.neutral0,
-        color: theme.colors.neutral800,
-        borderRadius: '4px !important',
-        borderTopLeftRadius: '4px !important',
-        borderTopRightRadius: '4px !important',
-        border: `1px solid ${theme.colors.neutral200} !important`,
-        boxShadow: 0,
-        fontSize: '14px',
-        fontFamily: 'Arial',
-        zIndex: 2,
-      };
-    },
-    menuList: base => ({
-      ...base,
-      paddingLeft: theme.spaces[1],
-      paddingTop: theme.spaces[1],
-      paddingRight: theme.spaces[1],
-      paddingBottom: theme.spaces[1],
-    }),
-    option: (base, state) => {
-      let backgroundColor = base.backgroundColor;
-
-      if (state.isFocused) {
-        backgroundColor = theme.colors.primary100;
-      }
-
-      return { ...base, lineHeight: theme.spaces[5], backgroundColor, borderRadius: 4 };
-    },
-    placeholder: base => ({ ...base, marginLeft: 0 }),
-    singleValue: base => ({ ...base, marginLeft: 0, color: theme.colors.neutral800 }),
-    valueContainer: base => ({
-      ...base,
-      padding: 0,
-      paddingLeft: theme.spaces[4],
-      marginLeft: 0,
-      marginRight: 0,
-    }),
-  };
-};
-
-export default getSelectStyles;

package/admin/src/pages/MarketplacePage/utils/api.js

@@ -1,9 +0,0 @@
-import { axiosInstance } from '../../../core/utils';
-
-const fetchAppInformation = async () => {
-  const { data } = await axiosInstance.get('/admin/information');
-
-  return data;
-};
-
-export { fetchAppInformation };