@strapi/admin 4.2.0-alpha.O → 4.2.0-beta.0

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,119 @@
+'use strict';
+
+const path = require('path');
+const _ = require('lodash');
+const fs = require('fs-extra');
+
+const getPkgPath = name => path.dirname(require.resolve(`${name}/package.json`));
+
+async function createPluginsJs(plugins, dest) {
+  const pluginsArray = plugins.map(({ appPathToPlugin, 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'), appPathToPlugin), '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, useTypeScript }) {
+  const cacheDir = path.resolve(appDir, '.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 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;
+
+  if (fs.existsSync(customAdminConfigFilePath)) {
+    const defaultAdminConfigFilePath = path.resolve(cacheDir, 'admin', 'src', 'app.js');
+
+    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')
+      );
+    } else {
+      await fs.copy(customAdminConfigFilePath, path.resolve(cacheDir, 'admin', 'src', 'app.js'));
+    }
+  }
+
+  // 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);
+}
+
+module.exports = createCacheDir;

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/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,51 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs-extra');
+
+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, useTypeScript) => {
+  const customAdminPath = path.join(dir, 'src', 'admin');
+  const customAdminConfigFileExtension = useTypeScript ? 'app.tsx' : 'app.js';
+  const customAdminConfigFile = path.join(customAdminPath, customAdminConfigFileExtension);
+  const customAdminWebpackFile = path.join(customAdminPath, 'webpack.config.js');
+
+  const hasCustomConfigFile = await fs.pathExists(customAdminConfigFile);
+  const hasCustomWebpackFile = await fs.pathExists(customAdminWebpackFile);
+
+  return hasCustomConfigFile || hasCustomWebpackFile;
+};
+
+const shouldBuildAdmin = async ({ appDir, plugins, useTypeScript }) => {
+  const appHasCustomAdminCode = await hasCustomAdminCode(appDir, useTypeScript);
+  const appHasNonDefaultPlugins = hasNonDefaultPlugins(plugins);
+
+  return appHasCustomAdminCode || appHasNonDefaultPlugins;
+};
+
+module.exports = shouldBuildAdmin;

package/utils/watch-admin-files.js

@@ -0,0 +1,56 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs-extra');
+const chokidar = require('chokidar');
+
+/**
+ * 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) {
+  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

@@ -3,6 +3,7 @@
 const path = require('path');
 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 TerserPlugin = require('terser-webpack-plugin');
 const WebpackBar = require('webpackbar');
@@ -12,12 +13,13 @@ const alias = require('./webpack.alias');
 const getClientEnvironment = require('./env');
 
 module.exports = ({
-  entry,
+  appDir,
   cacheDir,
-  pluginsPath,
   dest,
+  entry,
   env,
   optimize,
+  pluginsPath,
   options = {
     backend: 'http://localhost:1337',
     adminPath: '/admin/',
@@ -27,6 +29,7 @@ module.exports = ({
     eeRoot: './ee/admin',
     ceRoot: './admin/src',
   },
+  useTypeScript,
 }) => {
   const isProduction = env === 'production';
 
@@ -47,6 +50,35 @@ module.exports = ({
       ]
     : [];
 
+  if (useTypeScript) {
+    const tsChecker = new ForkTsCheckerPlugin({
+      typescript: {
+        // FIXME
+        configFile: path.join(appDir, 'tsconfig-admin.json'),
+      },
+    });
+
+    webpackPlugins.push(tsChecker);
+  }
+
+  const rules = [];
+
+  // webpack is quite slow to compile so it is best not to use the ts loader when
+  // it is not needed in javascript apps.
+  // Users can still add it by using the custom webpack config.
+  if (useTypeScript) {
+    rules.push({
+      test: /\.tsx?$/,
+      loader: require.resolve('esbuild-loader'),
+      include: [cacheDir, ...pluginsPath],
+      exclude: /node_modules/,
+      options: {
+        loader: 'tsx',
+        target: 'es2015',
+      },
+    });
+  }
+
   return {
     mode: isProduction ? 'production' : 'development',
     bail: isProduction ? true : false,
@@ -166,12 +198,13 @@ module.exports = ({
             },
           },
         },
+        ...rules,
       ],
     },
     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')],
     },

package/admin/src/hooks/useFetchPluginsFromMarketPlace/index.js

@@ -1,49 +0,0 @@
-import { useEffect, useState } from 'react';
-import axios from 'axios';
-import { useIntl } from 'react-intl';
-
-const useFetchPluginsFromMarketPlace = () => {
-  const { locale: currentLocale } = useIntl();
-  const [state, setState] = useState({
-    error: false,
-    isLoading: true,
-    data: null,
-  });
-
-  useEffect(() => {
-    const CancelToken = axios.CancelToken;
-    const source = CancelToken.source();
-
-    const getData = async () => {
-      try {
-        const { data } = await axios.get('https://marketplace.strapi.io/plugins', {
-          cancelToken: source.token,
-          params: { lang: currentLocale },
-        });
-
-        setState({
-          isLoading: false,
-          data,
-          error: false,
-        });
-      } catch (err) {
-        if (axios.isCancel(err)) {
-          // Silent
-        } else {
-          // handle error
-          setState(prev => ({ ...prev, isLoading: false, error: true }));
-        }
-      }
-    };
-
-    getData();
-
-    return () => {
-      source.cancel();
-    };
-  }, [currentLocale]);
-
-  return state;
-};
-
-export default useFetchPluginsFromMarketPlace;

package/admin/src/pages/MarketplacePage/MarketplaceBanner/Wrapper.js

@@ -1,28 +0,0 @@
-import styled from 'styled-components';
-
-// TODO : To migrate with @strapi/design-system
-const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin-top: 2rem;
-  border-radius: 4px;
-  border-left: 4px solid ${({ theme }) => theme.main.colors.mediumBlue};
-  box-shadow: 0 2px 4px ${({ theme }) => theme.main.colors.darkGrey};
-  padding: 8px 16px;
-
-  .bannerImage {
-    width: 48px;
-    height: 48px;
-    margin-right: 16px;
-  }
-
-  .bannerLink {
-    color: ${({ theme }) => theme.main.colors.mediumBlue};
-    font-weight: ${({ theme }) => theme.main.fontWeights.bold};
-    svg {
-      margin-left: 4px;
-    }
-  }
-`;
-
-export default Wrapper;

package/admin/src/pages/MarketplacePage/MarketplaceBanner/index.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-import { useTracking } from '@strapi/helper-plugin';
-import Wrapper from './Wrapper';
-import LogoStrapi from '../../../assets/images/banner_strapi-rocket.png';
-
-const MarketplaceBanner = () => {
-  const { formatMessage } = useIntl();
-  const { trackUsage } = useTracking();
-
-  return (
-    <Wrapper>
-      <img
-        className="bannerImage"
-        src={LogoStrapi}
-        alt={formatMessage({ id: 'app.components.MarketplaceBanner.image.alt' })}
-      />
-      <div>
-        <div>
-          <FormattedMessage id="app.components.MarketplaceBanner" />
-        </div>
-        <a
-          href="https://github.com/strapi/awesome-strapi"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="bannerLink"
-          onClick={() => trackUsage('didGoToStrapiAwesome')}
-        >
-          <FormattedMessage id="app.components.MarketplaceBanner.link" />
-          <i className="fa fa-external-link-alt" />
-        </a>
-      </div>
-    </Wrapper>
-  );
-};
-
-export default MarketplaceBanner;

package/admin/src/pages/MarketplacePage/PluginCard/Wrapper.js

@@ -1,148 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  .wrapper {
-    position: relative;
-    min-height: 216px;
-    margin-bottom: 3.6rem;
-    padding: 1.2rem 1.5rem;
-    padding-bottom: 0;
-    background-color: #fff;
-    box-shadow: 0 2px 4px #e3e9f3;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  .cardTitle {
-    display: flex;
-    font-size: 13px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-
-    > div:first-child {
-      margin-right: 14px;
-    }
-
-    > div:last-child {
-      height: 36px;
-      line-height: 36px;
-    }
-
-    i,
-    svg {
-      margin-left: 7px;
-      color: #b3b5b9;
-      font-size: 1rem;
-      vertical-align: baseline;
-      cursor: pointer;
-    }
-  }
-
-  .cardDescription {
-    height: 54px;
-    margin-top: 27px;
-    margin-bottom: 9px;
-    font-size: 13px;
-    font-weight: 400;
-
-    > span:last-child {
-      color: #1c5de7;
-    }
-    -webkit-font-smoothing: antialiased;
-  }
-
-  .cardFooter {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    display: flex;
-    width: 100%;
-    height: 45px;
-    padding: 0.9rem 1.5rem 1rem;
-    background-color: #fafafb;
-    justify-content: space-between;
-    flex-direction: row-reverse;
-    cursor: initial;
-  }
-
-  .compatible {
-    margin-top: 3px;
-    color: #5a9e06;
-    font-size: 1.3rem;
-    font-style: italic;
-
-    > i,
-    > svg {
-      margin-right: 7px;
-      font-size: 12px;
-    }
-  }
-
-  .settings {
-    margin-top: 3px;
-    color: #323740;
-    font-size: 1.3rem;
-    font-weight: 500;
-    cursor: pointer;
-
-    > i,
-    > svg {
-      margin-right: 7px;
-      font-size: 11px;
-      vertical-align: inherit;
-    }
-  }
-
-  .button {
-    height: 26px;
-    min-width: 89px !important;
-    padding: 0 15px;
-    margin: 0;
-    border-radius: 2px !important;
-    line-height: 23px;
-    font-size: 13px;
-    cursor: pointer;
-    span {
-      display: inline-block;
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .frame {
-    width: 70px;
-    height: 36px;
-    margin: auto 0;
-    text-align: center;
-    border: 1px solid #f3f3f7;
-    border-radius: 3px;
-    white-space: nowrap;
-    > img {
-      max-height: 36px;
-      vertical-align: middle;
-    }
-  }
-
-  .helper {
-    display: inline-block;
-    height: 100%;
-    vertical-align: middle;
-  }
-  .primary {
-    background: linear-gradient(315deg, #0097f6 0%, #005eea 100%);
-    color: white;
-    font-weight: 500;
-    -webkit-font-smoothing: antialiased;
-
-    &:active {
-      box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.15);
-    }
-  }
-
-  .secondary {
-    border: 1px solid #dfe0e1;
-    font-weight: 600;
-  }
-`;
-
-export default Wrapper;