@commercetools-frontend/mc-scripts 21.3.4 → 21.6.0

package/build/bin/cli.js

@@ -1,5 +1,9 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
 // Makes the script crash on unhandled rejections instead of silently
 // ignoring them. In the future, promise rejections that are not handled will
 // terminate the Node.js process with a non-zero exit code.
@@ -69,6 +73,10 @@ const applicationDirectory = fs.realpathSync(process.cwd());
 
 (async () => {
   try {
+    // Load dotenv files into the process environment.
+    // This is essentially what `dotenv-cli` does, but it's now built into this CLI.
+    loadDotEnvFiles(flags);
+
     switch (command) {
       case 'build':
         {
@@ -76,11 +84,21 @@ const applicationDirectory = fs.realpathSync(process.cwd());
           process.env.BABEL_ENV = 'production';
           process.env.NODE_ENV = 'production';
           const shouldAlsoCompile = !flags['build-only'];
+          const shouldUseExperimentalBundler = process.env.ENABLE_EXPERIMENTAL_VITE_BUNDLER === 'true';
+
+          if (shouldUseExperimentalBundler) {
+            console.log('Experimental Vite bundler enabled! 🚀');
+            console.warn('NOTE that the "cdnURL" value is not supported at the moment when using Vite.');
+            console.log('');
+          }
+
           proxyCommand(command, {
-            noExit: shouldAlsoCompile
+            noExit: shouldAlsoCompile,
+            fileName: shouldUseExperimentalBundler ? 'build-vite' : 'build'
           });
 
           if (shouldAlsoCompile) {
+            console.log('');
             proxyCommand('compile-html');
           }
 
@@ -112,7 +130,16 @@ const applicationDirectory = fs.realpathSync(process.cwd());
           // Do this as the first thing so that any code reading it knows the right env.
           process.env.BABEL_ENV = 'development';
           process.env.NODE_ENV = 'development';
-          proxyCommand(command);
+          const shouldUseExperimentalBundler = process.env.ENABLE_EXPERIMENTAL_VITE_BUNDLER === 'true';
+
+          if (shouldUseExperimentalBundler) {
+            console.log('Experimental Vite bundler enabled');
+            console.log('');
+          }
+
+          proxyCommand(command, {
+            fileName: shouldUseExperimentalBundler ? 'start-vite' : 'start'
+          });
           break;
         }
 
@@ -153,7 +180,7 @@ const applicationDirectory = fs.realpathSync(process.cwd());
 
 function getArgsForCommand(allowedFlags = []) {
   return Object.keys(flags).reduce((allArgs, flagKey) => {
-    if (allowedFlags.includes(flagKey)) {
+    if ((0, _includes.default)(allowedFlags).call(allowedFlags, flagKey)) {
       return allArgs.concat([`--${flagKey}`, flags[flagKey]]);
     }
 
@@ -166,10 +193,7 @@ function proxyCommand(commandName, {
   fileName,
   noExit
 } = {}) {
-  // Load dotenv files into the process environment.
-  // This is essentially what `dotenv-cli` does, but it's now built into this CLI.
-  loadDotEnvFiles(flags); // Spawn the actual command.
-
+  // Spawn the actual command.
   const result = spawn.sync('node', [require.resolve(`../commands/${fileName || commandName}`)].concat(commandArgs), {
     stdio: 'inherit'
   }); // Handle exit signals.

package/build/commands/build-vite.js

@@ -0,0 +1,95 @@
+"use strict";
+
+/* eslint-disable react-hooks/rules-of-hooks */
+const fs = require('fs-extra');
+
+const path = require('path');
+
+const {
+  build
+} = require('vite');
+
+const pluginGraphql = require('@rollup/plugin-graphql');
+
+const pluginReact = require('@vitejs/plugin-react').default;
+
+const {
+  generateTemplate
+} = require('@commercetools-frontend/mc-html-template');
+
+const {
+  packageLocation: applicationStaticAssetsPath
+} = require('@commercetools-frontend/assets');
+
+const paths = require('../config/paths');
+
+const DEFAULT_PORT = parseInt(process.env.HTTP_PORT, 10) || 3001;
+
+const execute = async () => {
+  // Ensure the `/public` folder exists.
+  fs.mkdirSync(paths.appBuild, {
+    recursive: true
+  }); // Generate `index.html` (template).
+
+  const appEntryPoint = path.relative(paths.appRoot, paths.entryPoint);
+  const html = generateTemplate({
+    // Define the module entry point (path relative from the `/public` folder).
+    // NOTE: that this is different from the development configuration.
+    scriptImports: [`<script type="module" src="/${appEntryPoint}"></script>`]
+  }); // Write `index.html` (template) into the `/public` folder.
+
+  fs.writeFileSync(paths.appIndexHtml, html, {
+    encoding: 'utf8'
+  }); // TODO: allow to pass additional config options.
+  // * `define`
+  // * `plugins`
+
+  await build({
+    configFile: false,
+    root: paths.appRoot,
+    define: {
+      'process.env.DEBUG': JSON.stringify(false),
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+    },
+    build: {
+      outDir: 'public',
+      assetsDir: '.',
+      rollupOptions: {
+        // This is necessary to instruct Vite that the `index.html` (template)
+        // is located in the `/public` folder.
+        // NOTE that after the build, Vite will write the `index.html` (template)
+        // at the `/public/public/index.html` location. See `fs.renameSync` below.
+        input: paths.appIndexHtml
+      }
+    },
+    server: {
+      port: DEFAULT_PORT
+    },
+    plugins: [pluginGraphql(), pluginReact({
+      jsxImportSource: '@emotion/react',
+      babel: {
+        plugins: ['@emotion/babel-plugin']
+      }
+    })]
+  }); // Rename `/public/public/index.html` to `/public/index.html.template`
+
+  fs.renameSync( // Because of our custom entry point path (`/public/index.html`),
+  // Vite will write the `index.html` to `/public/public/index.html`.
+  // We need to move this file to the `/public` folder and rename it
+  // to `index.html.template` (as expected by the `compile-html` command).
+  path.join(paths.appBuild, 'public/index.html'), paths.appIndexHtmlTemplate); // Clean up nested folder
+
+  fs.rmdirSync(path.join(paths.appBuild, 'public')); // Copy public assets
+
+  fs.copySync(path.join(applicationStaticAssetsPath, 'html-page'), paths.appBuild, {
+    dereference: true
+  });
+};
+
+execute().catch(error => {
+  if (error && error.message) {
+    console.error(error.message);
+  }
+
+  process.exit(1);
+});

package/build/commands/build.js

@@ -72,7 +72,7 @@ measureFileSizesBeforeBuild(paths.appBuild).then(previousFileSizes => {
   process.exit(1);
 }).catch(err => {
   if (err && err.message) {
-    console.log(err.message);
+    console.error(err.message);
   }
 
   process.exit(1);

package/build/commands/compile-html.js

@@ -45,6 +45,9 @@ const generateStatic = async () => {
 };
 
 generateStatic().catch(error => {
-  console.error(error);
+  if (error && error.message) {
+    console.error(error.message);
+  }
+
   process.exit(1);
 });

package/build/commands/config-sync.js

@@ -21,7 +21,7 @@ const {
   fetchUserOrganizations
 } = require('../utils/graphql-requests');
 
-const updateApplicationIdInCustomApplicationConfig = require('../utils/update-application-id-in-custom-application-config');
+const getConfigDiff = require('../utils/get-config-diff');
 
 const flags = mri(process.argv.slice(2), {
   boolean: ['dry-run']
@@ -122,21 +122,27 @@ const configSync = async () => {
       token,
       organizationId,
       data
-    }); // update applicationID in the custom-application-config file
-
-    updateApplicationIdInCustomApplicationConfig(createdCustomApplication.id);
+    });
     const customAppLink = getMcUrlLink(mcApiUrl, organizationId, createdCustomApplication.id);
-    console.log(chalk.green(`Custom Application created.\nThe "applicationId" in your local Custom Application config file has been updated with the application ID.\nYou can see the Custom Application data in the Merchant Center at ${customAppLink}.`));
+    console.log(chalk.green(`Custom Application created.\nThe "applicationId" in your local Custom Application config file should be updated with the application ID: ${createdCustomApplication.id}.\nYou can see the Custom Application data in the Merchant Center at ${customAppLink}.`));
     return;
-  } // TODO: show diff (followup task)
+  }
+
+  const customAppLink = getMcUrlLink(mcApiUrl, fetchedCustomApplication.organizationId, fetchedCustomApplication.application.id);
+  const configDiff = getConfigDiff(fetchedCustomApplication.application, localCustomAppData);
 
+  if (!configDiff) {
+    console.log(chalk.green(`Custom Application is already up to date.\nYou can see the Custom Application data in the Merchant Center at ${customAppLink}.`));
+    return;
+  }
 
+  console.log(configDiff);
   const {
     confirmation
   } = await prompts({
     type: 'text',
     name: 'confirmation',
-    message: `You are about to update the Custom Application "${localCustomAppData.entryPointUriPath}" in the ${mcApiUrl} environment. Are you sure you want to proceed?`,
+    message: `You are about to update the Custom Application "${localCustomAppData.entryPointUriPath}" with the changes above, in the ${mcApiUrl} environment. Are you sure you want to proceed?`,
     initial: 'yes'
   });
 
@@ -161,7 +167,6 @@ const configSync = async () => {
     data: omit(localCustomAppData, ['id']),
     applicationId: fetchedCustomApplication.application.id
   });
-  const customAppLink = getMcUrlLink(mcApiUrl, fetchedCustomApplication.organizationId, fetchedCustomApplication.application.id);
   console.log(chalk.green(`Custom Application updated.\nYou can see the Custom Application data in the Merchant Center at ${customAppLink}.`));
 };
 

package/build/commands/serve.js

@@ -17,7 +17,7 @@ const server = http.createServer((request, response) => {
       source: '/favicon*',
       destination: '/favicon.png'
     }, {
-      source: '/login',
+      source: '/login*',
       destination: '/login.html'
     }, {
       source: '/logout',

package/build/commands/start-vite.js

@@ -0,0 +1,142 @@
+"use strict";
+
+const fs = require('fs-extra');
+
+const path = require('path');
+
+const {
+  createServer
+} = require('vite');
+
+const pluginGraphql = require('@rollup/plugin-graphql');
+
+const pluginReact = require('@vitejs/plugin-react').default;
+
+const {
+  processConfig
+} = require('@commercetools-frontend/application-config');
+
+const {
+  replaceHtmlPlaceholders,
+  processHeaders,
+  generateTemplate
+} = require('@commercetools-frontend/mc-html-template');
+
+const {
+  createMcDevAuthenticationMiddleware
+} = require('@commercetools-frontend/mc-dev-authentication');
+
+const {
+  packageLocation: applicationStaticAssetsPath
+} = require('@commercetools-frontend/assets');
+
+const paths = require('../config/paths');
+
+const DEFAULT_PORT = parseInt(process.env.HTTP_PORT, 10) || 3001;
+
+const pluginCustomApplication = applicationConfig => {
+  /**
+   * @type {import('vite').Plugin}
+   */
+  return {
+    name: 'custom-application',
+
+    /**
+     * @type {import('vite').ServerHook}
+     */
+    configureServer(server) {
+      return () => {
+        // Users do not need to have/maintain the `index.html` (as expected by Vite)
+        // as it's generated and maintained by the Custom Application CLI.
+        // Therefore, the generated `index.html` (template) is written into the `/public`
+        // folder so that it's gitignored.
+        // As a result, we need to make sure to point the URI path to the correct location.
+        server.middlewares.use((req, res, next) => {
+          if (req.url === '/index.html') {
+            req.url = '/public/index.html';
+          }
+
+          next();
+        }); // Handle auth routes for internal local development.
+
+        server.middlewares.use(createMcDevAuthenticationMiddleware(applicationConfig));
+      };
+    },
+
+    /**
+     * @type {import('vite').IndexHtmlTransformHook}
+     */
+    transformIndexHtml(rawHtml, _ctx) {
+      const compiledHeaders = processHeaders(applicationConfig);
+      const enhancedLocalEnv = Object.assign({}, applicationConfig.env, // Now that the app config is defined as a `env.json`, when we start the FE app
+      // to point to the local backend API by passing the `MC_API_URL` env does not
+      // work anymore). To make it work again, we can override the `env.json` config
+      // with the env variable before injecting the values into the index.html.
+      // NOTE: this is only necessary for development.
+      process.env.MC_API_URL ? {
+        mcApiUrl: process.env.MC_API_URL
+      } : {}); // Resolve the placeholders of the `index.html` (template) file, before serving it.
+
+      const html = replaceHtmlPlaceholders(rawHtml, {
+        env: enhancedLocalEnv,
+        headers: compiledHeaders
+      });
+      return html;
+    }
+
+  };
+};
+
+const execute = async () => {
+  // Load the Custom Application config file first.
+  const applicationConfig = processConfig(); // Ensure the `/public` folder exists.
+
+  fs.mkdirSync(paths.appBuild, {
+    recursive: true
+  }); // Generate `index.html` (template).
+
+  const appEntryPoint = path.relative(paths.appRoot, paths.entryPoint);
+  const html = generateTemplate({
+    // Define the module entry point (path relative to the `/public` folder).
+    // NOTE: that this is different from the production configuration.
+    scriptImports: [`<script type="module" src="/../${appEntryPoint}"></script>`]
+  }); // Write `index.html` (template) into the `/public` folder.
+
+  fs.writeFileSync(paths.appIndexHtml, html, {
+    encoding: 'utf8'
+  }); // TODO: allow to pass additional config options.
+  // * `define`
+  // * `plugins`
+
+  const server = await createServer({
+    configFile: false,
+    root: paths.appRoot,
+    define: {
+      'process.env.DEBUG': JSON.stringify(false),
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
+    },
+    server: {
+      port: DEFAULT_PORT
+    },
+    plugins: [pluginGraphql(), pluginReact({
+      jsxImportSource: '@emotion/react',
+      babel: {
+        plugins: ['@emotion/babel-plugin']
+      }
+    }), pluginCustomApplication(applicationConfig)]
+  });
+  await server.listen(); // Copy public assets to `/public` folder (even in development).
+
+  fs.copySync(path.join(applicationStaticAssetsPath, 'html-page'), paths.appBuild, {
+    dereference: true
+  });
+  server.printUrls();
+};
+
+execute().catch(error => {
+  if (error && error.message) {
+    console.error(error.message);
+  }
+
+  process.exit(1);
+});

package/build/commands/start.js

@@ -72,8 +72,6 @@ choosePort(HOST, DEFAULT_PORT).then(port => {
   }); // Serve webpack assets generated by the compiler over a web sever.
 
   const serverConfig = createDevServerConfig({
-    allowedHost: urls.localUrlForBrowser,
-    contentBase: paths.appBuild,
     port,
     publicPath: config.output.publicPath
   });
@@ -103,7 +101,7 @@ choosePort(HOST, DEFAULT_PORT).then(port => {
   }
 }).catch(err => {
   if (err && err.message) {
-    console.log(err.message);
+    console.error(err.message);
   }
 
   process.exit(1);

package/build/config/create-webpack-config-for-development.js

@@ -262,7 +262,7 @@ module.exports = function createWebpackConfigForDevelopment(options = {}) {
         test: function testForNormalCssFiles(fileName) {
           return (// Use this only for plain CSS.
             // For css-modules, see loader above.
-            fileName.endsWith('.css') && !fileName.endsWith('.mod.css')
+            fileName.endsWith('.css') && !(fileName.endsWith('.mod.css') || fileName.endsWith('.module.css'))
           );
         },
         // "postcss" loader applies autoprefixer to our CSS.

package/build/config/create-webpack-config-for-production.js

@@ -281,7 +281,7 @@ module.exports = function createWebpackConfigForProduction(options = {}) {
         test: function testForNormalCssFiles(fileName) {
           return (// Use this only for plain CSS.
             // For css-modules, see loader above.
-            fileName.endsWith('.css') && !fileName.endsWith('.mod.css')
+            fileName.endsWith('.css') && !(fileName.endsWith('.mod.css') || fileName.endsWith('.module.css'))
           );
         },
         // "postcss" loader applies autoprefixer to our CSS.

package/build/config/webpack-dev-server.config.js

@@ -1,7 +1,5 @@
 "use strict";
 
-const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
-
 const {
   processConfig
 } = require('@commercetools-frontend/application-config');
@@ -10,7 +8,9 @@ const {
   processHeaders
 } = require('@commercetools-frontend/mc-html-template');
 
-const devAuthentication = require('@commercetools-frontend/mc-dev-authentication');
+const {
+  createMcDevAuthenticationMiddleware
+} = require('@commercetools-frontend/mc-dev-authentication');
 
 const applicationConfig = processConfig();
 const compiledHeaders = processHeaders(applicationConfig);
@@ -26,8 +26,6 @@ const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
 const sockPort = process.env.WDS_SOCKET_PORT;
 
 module.exports = ({
-  allowedHost,
-  contentBase,
   port,
   publicPath
 }) => ({
@@ -62,37 +60,11 @@ module.exports = ({
   // Enable HTTPS if the HTTPS environment variable is set to 'true'
   // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
   setupMiddlewares(middlewares, devServer) {
-    var _applicationConfig$en, _applicationConfig$en2;
-
     if (!devServer) {
       throw new Error('webpack-dev-server is not defined');
-    } // This lets us open files from the runtime error overlay.
-
-
-    middlewares.unshift(errorOverlayMiddleware());
-    devServer.app.set('views', devAuthentication.views);
-    devServer.app.set('view engine', devAuthentication.config.viewEngine);
-    devServer.app.post('/api/graphql', (request, response) => {
-      response.statusCode = 404;
-      response.setHeader('Content-Type', 'application/json');
-      response.end(JSON.stringify({
-        message: `This GraphQL endpoint is only available in production in the [Merchant Center Proxy Router](https://docs.commercetools.com/custom-applications/concepts/merchant-center-proxy-router). Please check that you are not calling this endpoint in development mode.`
-      }));
-    });
-
-    if ((_applicationConfig$en = applicationConfig.env.__DEVELOPMENT__) !== null && _applicationConfig$en !== void 0 && (_applicationConfig$en2 = _applicationConfig$en.oidc) !== null && _applicationConfig$en2 !== void 0 && _applicationConfig$en2.authorizeUrl) {
-      var _applicationConfig$en3, _applicationConfig$en4;
-
-      // Handle login page for OIDC workflow when developing against a local MC API.
-      if ((_applicationConfig$en3 = applicationConfig.env.__DEVELOPMENT__) !== null && _applicationConfig$en3 !== void 0 && (_applicationConfig$en4 = _applicationConfig$en3.oidc) !== null && _applicationConfig$en4 !== void 0 && _applicationConfig$en4.authorizeUrl.startsWith('http://localhost')) {
-        devServer.app.get('/login/authorize', devAuthentication.middlewares.createLoginMiddleware(applicationConfig.env));
-      }
-    } else {
-      devServer.app.get('/login', devAuthentication.middlewares.createLoginMiddleware(applicationConfig.env)); // Intercept the /logout page and "remove" the auth cookie value
-
-      devServer.app.get('/logout', devAuthentication.middlewares.createLogoutMiddleware(applicationConfig.env));
     }
 
+    middlewares.push(createMcDevAuthenticationMiddleware(applicationConfig));
     return middlewares;
   }
 

package/build/utils/fetch-custom-application.settings.graphql

@@ -16,6 +16,7 @@ query FetchCustomApplicationFromCli($entryPointUriPath: String!) {
       }
       mainMenuLink {
         defaultLabel
+        permissions
         labelAllLocales {
           locale
           value

package/build/utils/get-config-diff.js

@@ -0,0 +1,308 @@
+"use strict";
+
+const chalk = require('chalk'); // Since not all terminal supports colors, to make things more consistent for testing purposes,
+// during tests the color used is appended before the string instead of coloring it.
+
+
+const isTest = process.env.NODE_ENV === 'test';
+
+const red = str => {
+  if (isTest) return `<color-red>${str}</color-red>`;
+  return chalk.red(str);
+};
+
+const green = str => {
+  if (isTest) return `<color-green>${str}</color-green>`;
+  return chalk.green(str);
+}; // Two spaces are used for indentation.
+
+
+const indent = indentLevel => '  '.repeat(indentLevel);
+
+const getStringDiff = ({
+  previousValue,
+  nextValue,
+  label,
+  indentLevel = 0
+}) => {
+  if (!previousValue && nextValue) {
+    return `${indent(indentLevel)}${label} added: ${green(nextValue)}`;
+  }
+
+  if (previousValue && !nextValue) {
+    return `${indent(indentLevel)}${label} removed: ${red(previousValue)}`;
+  }
+
+  if (previousValue && nextValue && previousValue !== nextValue) {
+    return `${indent(indentLevel)}${label} changed: ${red(previousValue)} => ${green(nextValue)}`;
+  }
+
+  return null;
+}; // NOTE: this assumes that the array values are scalar values (not objects).
+
+
+const getArrayDiff = ({
+  previousValue,
+  nextValue,
+  label,
+  indentLevel = 0
+}) => {
+  const oldArraySet = new Set(previousValue);
+  const arrayDiff = [];
+  nextValue === null || nextValue === void 0 ? void 0 : nextValue.forEach(item => {
+    if (oldArraySet.has(item)) {
+      oldArraySet.delete(item);
+    } else {
+      arrayDiff.push(getStringDiff({
+        nextValue: item,
+        label,
+        indentLevel
+      }));
+    }
+  });
+  oldArraySet.forEach(item => {
+    arrayDiff.push(getStringDiff({
+      previousValue: item,
+      label,
+      indentLevel
+    }));
+  });
+  return arrayDiff.join('\n');
+};
+
+const getPermissionsDiff = ({
+  previousValue,
+  nextValue
+}) => {
+  const permissionDiff = ['permissions changed'];
+  const mappedOldPermissions = previousValue.reduce((previousPermission, {
+    name,
+    oAuthScopes
+  }) => ({ ...previousPermission,
+    [name]: oAuthScopes
+  }), {});
+  const indentLevel = 1;
+  nextValue.forEach(newPermission => {
+    const currentDiff = [`${indent(indentLevel)}"${newPermission.name}" changed`]; // if the permission name is not in the old config, it means it is a new addition.
+
+    if (!mappedOldPermissions[newPermission.name]) {
+      permissionDiff.push(`${indent(indentLevel)}"${green(newPermission.name)}" was added`);
+    } // if permission name is in the old config, now we check if there was a change
+    else {
+      currentDiff.push(getArrayDiff({
+        previousValue: mappedOldPermissions[newPermission.name],
+        nextValue: newPermission.oAuthScopes,
+        label: 'oauth scope',
+        indentLevel: 2
+      }));
+      delete mappedOldPermissions[newPermission.name];
+    }
+
+    currentDiff.filter(Boolean).length > 1 && permissionDiff.push(currentDiff.join('\n'));
+  }); // if there are old permissions left, it means they were deleted in the new Permissions.
+
+  Object.keys(mappedOldPermissions).forEach(oldPermissionName => {
+    permissionDiff.push(`${indent(indentLevel)}"${red(oldPermissionName)}" was removed`);
+  });
+  if (permissionDiff.length > 1) return permissionDiff.join('\n');
+};
+
+const getLabelAllLocalesDiff = ({
+  previousValue,
+  nextValue,
+  indentLevel = 0
+}) => {
+  const labelAllLocalesDiff = [`${indent(indentLevel - 1)}labelAllLocales changed`];
+  const mappedOldLabelAllLocales = (previousValue === null || previousValue === void 0 ? void 0 : previousValue.reduce((previousLabelAllLocale, {
+    locale,
+    value
+  }) => ({ ...previousLabelAllLocale,
+    [locale]: value
+  }), {})) ?? {};
+  nextValue === null || nextValue === void 0 ? void 0 : nextValue.forEach(newLabelAllLocale => {
+    if (newLabelAllLocale.locale in mappedOldLabelAllLocales) {
+      const oldLocaleValue = mappedOldLabelAllLocales[newLabelAllLocale.locale];
+
+      if (oldLocaleValue !== newLabelAllLocale.value) {
+        labelAllLocalesDiff.push(`${indent(indentLevel)}locale "${newLabelAllLocale.locale}" changed: ${red(oldLocaleValue)} => ${green(newLabelAllLocale.value)}`);
+      }
+
+      delete mappedOldLabelAllLocales[newLabelAllLocale.locale];
+    } else {
+      labelAllLocalesDiff.push(getStringDiff({
+        nextValue: newLabelAllLocale.locale,
+        label: 'locale',
+        indentLevel
+      }));
+    }
+  });
+  Object.keys(mappedOldLabelAllLocales).forEach(key => {
+    labelAllLocalesDiff.push(getStringDiff({
+      previousValue: key,
+      label: 'locale',
+      indentLevel
+    }));
+  });
+  if (labelAllLocalesDiff.length > 1) return labelAllLocalesDiff.join('\n');
+};
+
+const getMainMenuLinkDiff = ({
+  previousValue,
+  nextValue
+}) => {
+  const mainMenuLinkDiff = ['mainMenuLink changed'];
+  mainMenuLinkDiff.push(getStringDiff({
+    previousValue: previousValue.defaultLabel,
+    nextValue: nextValue.defaultLabel,
+    label: 'defaultLabel',
+    indentLevel: 1
+  }));
+  const mainMenuLinkPermissionsDiff = getArrayDiff({
+    previousValue: previousValue.permissions,
+    nextValue: nextValue.permissions,
+    label: 'applied permission',
+    indentLevel: 2
+  });
+
+  if (mainMenuLinkPermissionsDiff.length > 0) {
+    mainMenuLinkDiff.push(`${indent(1)}permissions changed`);
+    mainMenuLinkDiff.push(mainMenuLinkPermissionsDiff);
+  }
+
+  mainMenuLinkDiff.push(getLabelAllLocalesDiff({
+    previousValue: previousValue.labelAllLocales,
+    nextValue: nextValue.labelAllLocales,
+    indentLevel: 2
+  }));
+  const filteredMainMenuLinkDiff = mainMenuLinkDiff.filter(Boolean);
+  if (filteredMainMenuLinkDiff.length > 1) return filteredMainMenuLinkDiff.join('\n');
+};
+
+const getSubmenuLinksDiff = ({
+  previousValue,
+  nextValue
+}) => {
+  const submenuLinksDiff = ['submenuLink changed'];
+  const mappedSubmenuLinks = previousValue.reduce((previousSubmenuLink, currentSubmenuLink) => ({ ...previousSubmenuLink,
+    [currentSubmenuLink.uriPath]: currentSubmenuLink
+  }), {});
+  nextValue.forEach(newSubmenuLink => {
+    const oldSubMenuLink = mappedSubmenuLinks[newSubmenuLink.uriPath];
+
+    if (newSubmenuLink.uriPath in mappedSubmenuLinks) {
+      const submenuLinkDiff = [`${indent(1)}menu link "${newSubmenuLink.uriPath}" changed`];
+      Object.keys(mappedSubmenuLinks[newSubmenuLink.uriPath]).forEach(key => {
+        switch (key) {
+          case 'defaultLabel':
+            {
+              submenuLinkDiff.push(getStringDiff({
+                previousValue: oldSubMenuLink.defaultLabel,
+                nextValue: newSubmenuLink.defaultLabel,
+                label: 'defaultLabel',
+                indentLevel: 2
+              }));
+              break;
+            }
+
+          case 'permissions':
+            {
+              const submenuLinkPermissionsDiff = getArrayDiff({
+                previousValue: oldSubMenuLink.permissions,
+                nextValue: newSubmenuLink.permissions,
+                label: 'applied permission',
+                indentLevel: 3
+              });
+
+              if (submenuLinkPermissionsDiff.length > 0) {
+                submenuLinkDiff.push(`${indent(2)}permissions changed`);
+                submenuLinkDiff.push(submenuLinkPermissionsDiff);
+              }
+
+              break;
+            }
+
+          case 'labelAllLocales':
+            {
+              submenuLinkDiff.push(getLabelAllLocalesDiff({
+                previousValue: oldSubMenuLink.labelAllLocales,
+                nextValue: newSubmenuLink.labelAllLocales,
+                indentLevel: 3
+              }));
+              break;
+            }
+
+          default:
+            break;
+        }
+      });
+      delete mappedSubmenuLinks[newSubmenuLink.uriPath];
+      const filteredSubmenuLinksDiff = submenuLinkDiff.filter(Boolean);
+
+      if (filteredSubmenuLinksDiff.length > 1) {
+        submenuLinksDiff.push(filteredSubmenuLinksDiff.join('\n'));
+      }
+    } else {
+      submenuLinksDiff.push(getStringDiff({
+        nextValue: newSubmenuLink.uriPath,
+        label: 'menu link',
+        indentLevel: 1
+      }));
+    }
+  });
+  Object.keys(mappedSubmenuLinks).forEach(key => {
+    submenuLinksDiff.push(getStringDiff({
+      previousValue: key,
+      label: 'menu link',
+      indentLevel: 1
+    }));
+  });
+  if (submenuLinksDiff.length > 1) return submenuLinksDiff.join('\n');
+}; // Compute diff changes of the Custom Application config.
+// NOTE: Only known keys are evaluated.
+
+
+const getConfigDiff = (oldConfig, newConfig) => {
+  const diff = []; // Name
+
+  diff.push(getStringDiff({
+    previousValue: oldConfig.name,
+    nextValue: newConfig.name,
+    label: 'name'
+  })); // Description
+
+  diff.push(getStringDiff({
+    previousValue: oldConfig.description,
+    nextValue: newConfig.description,
+    label: 'description'
+  })); // URL
+
+  diff.push(getStringDiff({
+    previousValue: oldConfig.url,
+    nextValue: newConfig.url,
+    label: 'url'
+  })); // Icon
+
+  diff.push(getStringDiff({
+    previousValue: oldConfig.icon,
+    nextValue: newConfig.icon,
+    label: 'icon'
+  })); // Permissions
+
+  diff.push(getPermissionsDiff({
+    previousValue: oldConfig.permissions,
+    nextValue: newConfig.permissions
+  })); // Main menu link
+
+  diff.push(getMainMenuLinkDiff({
+    previousValue: oldConfig.mainMenuLink,
+    nextValue: newConfig.mainMenuLink
+  })); // Submenu links
+
+  diff.push(getSubmenuLinksDiff({
+    previousValue: oldConfig.submenuLinks,
+    nextValue: newConfig.submenuLinks
+  }));
+  return diff.filter(Boolean).join('\n');
+};
+
+module.exports = getConfigDiff;

package/build/utils/get-config-diff.spec.js

@@ -0,0 +1,285 @@
+"use strict";
+
+const getConfigDiff = require('./get-config-diff');
+
+const createTestConfig = customConfig => ({
+  entryPointUriPath: 'my-test-app',
+  name: 'test name',
+  description: 'test description',
+  url: 'https://test.com',
+  icon: '<svg><path fill="#000000"></path></svg>',
+  permissions: [],
+  mainMenuLink: {},
+  submenuLinks: [],
+  ...customConfig
+});
+
+describe('when there are no changes', () => {
+  it('should display no diff', () => {
+    expect(getConfigDiff(createTestConfig(), createTestConfig())).toBe('');
+  });
+});
+describe('when there are changes', () => {
+  it('should display diff if "name", "description", "icon", "url" changed', () => {
+    const newConfig = createTestConfig({
+      name: 'updated test name',
+      description: 'updated description',
+      url: 'https://updated-test.com',
+      icon: '<svg><path fill="#ffffff"></path></svg>'
+    });
+    expect(getConfigDiff(createTestConfig(), newConfig)).toMatchInlineSnapshot(`
+      "name changed: <color-red>test name</color-red> => <color-green>updated test name</color-green>
+      description changed: <color-red>test description</color-red> => <color-green>updated description</color-green>
+      url changed: <color-red>https://test.com</color-red> => <color-green>https://updated-test.com</color-green>
+      icon changed: <color-red><svg><path fill=\\"#000000\\"></path></svg></color-red> => <color-green><svg><path fill=\\"#ffffff\\"></path></svg></color-green>"
+    `);
+  });
+  it('should display diff if "description" is removed', () => {
+    const newConfig = createTestConfig({
+      description: undefined
+    });
+    expect(getConfigDiff(createTestConfig(), newConfig)).toMatchInlineSnapshot(`"description removed: <color-red>test description</color-red>"`);
+  });
+  it('should display diff for "permissions"', () => {
+    const oldConfig = createTestConfig({
+      permissions: [{
+        oAuthScopes: ['manage_product'],
+        name: 'manageMyTestApp'
+      }, {
+        oAuthScopes: ['view_products', 'view_customers'],
+        name: 'viewMyTestApp'
+      }]
+    });
+    const newConfig = createTestConfig({
+      permissions: [{
+        oAuthScopes: ['manage_customer'],
+        name: 'manageMyTestApp'
+      }, {
+        oAuthScopes: ['view_products', 'view_customers', 'view_orders'],
+        name: 'viewMyTestApp'
+      }]
+    });
+    expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+      "permissions changed
+        \\"manageMyTestApp\\" changed
+          oauth scope added: <color-green>manage_customer</color-green>
+          oauth scope removed: <color-red>manage_product</color-red>
+        \\"viewMyTestApp\\" changed
+          oauth scope added: <color-green>view_orders</color-green>"
+    `);
+  });
+  describe('for "mainMenuLink"', () => {
+    it('should display diff for "mainMenuLink" when assigning new permissions', () => {
+      const oldConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: [],
+          labelAllLocales: []
+        }
+      });
+      const newConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: ['ViewMyTestApp'],
+          labelAllLocales: []
+        }
+      });
+      expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+        "mainMenuLink changed
+          permissions changed
+            applied permission added: <color-green>ViewMyTestApp</color-green>"
+      `);
+    });
+    it('should display diff for "mainMenuLink" when removing permissions', () => {
+      const oldConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: ['ViewMyTestApp'],
+          labelAllLocales: []
+        }
+      });
+      const newConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: [],
+          labelAllLocales: []
+        }
+      });
+      expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+        "mainMenuLink changed
+          permissions changed
+            applied permission removed: <color-red>ViewMyTestApp</color-red>"
+      `);
+    });
+    it('should display diff for "mainMenuLink" when assigning new labels', () => {
+      const oldConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: [],
+          labelAllLocales: []
+        }
+      });
+      const newConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: [],
+          labelAllLocales: [{
+            locale: 'de',
+            value: 'Die Avengers'
+          }]
+        }
+      });
+      expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+        "mainMenuLink changed
+          labelAllLocales changed
+            locale added: <color-green>de</color-green>"
+      `);
+    });
+    it('should display diff for "mainMenuLink" when removing labels', () => {
+      const oldConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: [],
+          labelAllLocales: [{
+            locale: 'de',
+            value: 'Die Avengers'
+          }]
+        }
+      });
+      const newConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: [],
+          labelAllLocales: []
+        }
+      });
+      expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+        "mainMenuLink changed
+          labelAllLocales changed
+            locale removed: <color-red>de</color-red>"
+      `);
+    });
+    it('should display multiple diff for changes of existing "mainMenuLink"', () => {
+      const oldConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Avengers',
+          permissions: ['ViewMyTestApp'],
+          labelAllLocales: [{
+            locale: 'de',
+            value: 'Die Avengers'
+          }, {
+            locale: 'en',
+            value: 'The Avengers'
+          }]
+        }
+      });
+      const newConfig = createTestConfig({
+        mainMenuLink: {
+          defaultLabel: 'Justice League',
+          permissions: ['ManageMyTestApp'],
+          labelAllLocales: [{
+            locale: 'de',
+            value: 'Die Justice League'
+          }, {
+            locale: 'it',
+            value: 'La Justice League'
+          }]
+        }
+      });
+      expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+        "mainMenuLink changed
+          defaultLabel changed: <color-red>Avengers</color-red> => <color-green>Justice League</color-green>
+          permissions changed
+            applied permission added: <color-green>ManageMyTestApp</color-green>
+            applied permission removed: <color-red>ViewMyTestApp</color-red>
+          labelAllLocales changed
+            locale \\"de\\" changed: <color-red>Die Avengers</color-red> => <color-green>Die Justice League</color-green>
+            locale added: <color-green>it</color-green>
+            locale removed: <color-red>en</color-red>"
+      `);
+    });
+  });
+  describe('for "submenuLinks"', () => {
+    it('should display diff for "submenuLinks" when adding a new menu link', () => {
+      const oldConfig = createTestConfig({
+        submenuLinks: []
+      });
+      const newConfig = createTestConfig({
+        submenuLinks: [{
+          uriPath: 'my-test-app/new',
+          defaultLabel: 'New Avenger',
+          permissions: ['ManageMyTestApp'],
+          labelAllLocales: [{
+            locale: 'de',
+            value: 'Neu Avenger'
+          }]
+        }]
+      });
+      expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+        "submenuLink changed
+          menu link added: <color-green>my-test-app/new</color-green>"
+      `);
+    });
+    it('should display diff for "submenuLinks" when removing a menu link', () => {
+      const oldConfig = createTestConfig({
+        submenuLinks: [{
+          uriPath: 'my-test-app/new',
+          defaultLabel: 'New Avenger',
+          permissions: ['ManageMyTestApp'],
+          labelAllLocales: [{
+            locale: 'de',
+            value: 'Neu Avenger'
+          }]
+        }]
+      });
+      const newConfig = createTestConfig({
+        submenuLinks: []
+      });
+      expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+        "submenuLink changed
+          menu link removed: <color-red>my-test-app/new</color-red>"
+      `);
+    });
+    it('should display multiple diff for changes of existing "submenuLinks"', () => {
+      const oldConfig = createTestConfig({
+        submenuLinks: [{
+          uriPath: 'my-test-app/new',
+          defaultLabel: 'New Avenger',
+          permissions: ['ManageMyTestApp'],
+          labelAllLocales: [{
+            locale: 'de',
+            value: 'Neu Avenger'
+          }, {
+            locale: 'en',
+            value: 'Add Avenger'
+          }]
+        }]
+      });
+      const newConfig = createTestConfig({
+        submenuLinks: [{
+          uriPath: 'my-test-app/new',
+          defaultLabel: 'Add Avenger',
+          permissions: [],
+          labelAllLocales: [{
+            locale: 'de',
+            value: 'Avenger hinzufügen'
+          }, {
+            locale: 'it',
+            value: 'Nuovo Avenger'
+          }]
+        }]
+      });
+      expect(getConfigDiff(oldConfig, newConfig)).toMatchInlineSnapshot(`
+        "submenuLink changed
+          menu link \\"my-test-app/new\\" changed
+            defaultLabel changed: <color-red>New Avenger</color-red> => <color-green>Add Avenger</color-green>
+            permissions changed
+              applied permission removed: <color-red>ManageMyTestApp</color-red>
+            labelAllLocales changed
+              locale \\"de\\" changed: <color-red>Neu Avenger</color-red> => <color-green>Avenger hinzufügen</color-green>
+              locale added: <color-green>it</color-green>
+              locale removed: <color-red>en</color-red>"
+      `);
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/mc-scripts",
-  "version": "21.3.4",
+  "version": "21.6.0",
   "description": "Configuration and scripts for developing a MC application",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -29,16 +29,18 @@
     "@babel/core": "^7.17.9",
     "@babel/runtime": "^7.17.9",
     "@babel/runtime-corejs3": "^7.17.9",
-    "@commercetools-frontend/application-config": "21.3.4",
+    "@commercetools-frontend/application-config": "21.6.0",
     "@commercetools-frontend/assets": "21.0.0",
     "@commercetools-frontend/babel-preset-mc-app": "21.3.4",
     "@commercetools-frontend/constants": "21.3.4",
-    "@commercetools-frontend/mc-dev-authentication": "21.0.0",
-    "@commercetools-frontend/mc-html-template": "21.3.4",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.4",
+    "@commercetools-frontend/mc-dev-authentication": "21.6.0",
+    "@commercetools-frontend/mc-html-template": "21.6.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.5",
+    "@rollup/plugin-graphql": "1.1.0",
     "@svgr/webpack": "6.2.1",
+    "@vitejs/plugin-react": "1.3.2",
     "autoprefixer": "^10.4.4",
-    "babel-loader": "8.2.4",
+    "babel-loader": "8.2.5",
     "browserslist": "^4.20.2",
     "chalk": "4.1.2",
     "core-js": "^3.21.1",
@@ -46,7 +48,7 @@
     "css-minimizer-webpack-plugin": "3.4.1",
     "dotenv": "16.0.0",
     "dotenv-expand": "8.0.3",
-    "fs-extra": "10.0.1",
+    "fs-extra": "10.1.0",
     "graphql-request": "^4.2.0",
     "graphql-tag": "^2.12.6",
     "html-webpack-plugin": "5.5.0",
@@ -54,7 +56,7 @@
     "mini-css-extract-plugin": "2.6.0",
     "moment-locales-webpack-plugin": "1.2.0",
     "mri": "1.2.0",
-    "postcss": "8.4.12",
+    "postcss": "8.4.13",
     "postcss-custom-media": "8.0.0",
     "postcss-custom-properties": "12.1.4",
     "postcss-import": "14.1.0",
@@ -64,8 +66,8 @@
     "prompts": "^2.4.2",
     "querystring-es3": "^0.2.1",
     "rcfile": "1.0.3",
-    "react-dev-utils": "12.0.0",
-    "react-refresh": "0.11.0",
+    "react-dev-utils": "12.0.1",
+    "react-refresh": "0.13.0",
     "serve-handler": "6.1.3",
     "shelljs": "0.8.5",
     "style-loader": "3.3.1",
@@ -73,9 +75,10 @@
     "terser-webpack-plugin": "5.3.1",
     "thread-loader": "3.0.4",
     "url": "^0.11.0",
+    "vite": "2.9.8",
     "webpack": "5.72.0",
     "webpack-bundle-analyzer": "4.5.0",
-    "webpack-dev-server": "4.8.1",
+    "webpack-dev-server": "4.9.0",
     "webpackbar": "5.0.2"
   },
   "devDependencies": {

package/build/utils/update-application-id-in-custom-application-config.js

@@ -1,60 +0,0 @@
-"use strict";
-
-const fs = require('fs');
-
-const rcfile = require('rcfile');
-
-const prettier = require('prettier');
-
-const babel = require('@babel/core');
-
-const {
-  getConfigPath
-} = require('@commercetools-frontend/application-config');
-
-function updateApplicationIdInCustomApplicationConfig(applicationId) {
-  const filePath = getConfigPath();
-
-  if (filePath.endsWith('.json')) {
-    const customApplicationConfig = require(filePath);
-
-    customApplicationConfig.env.production.applicationId = applicationId;
-    const prettierConfig = rcfile('prettier');
-    const formattedData = prettier.format(JSON.stringify(customApplicationConfig), { ...prettierConfig,
-      parser: 'json'
-    });
-    fs.writeFileSync(filePath, formattedData, {
-      encoding: 'utf8'
-    });
-    return;
-  }
-
-  const result = babel.transformFileSync(filePath, {
-    plugins: [function replaceCustomApplicationConfig() {
-      return {
-        visitor: {
-          Identifier(nodePath) {
-            if (nodePath.isIdentifier({
-              name: 'applicationId'
-            })) {
-              if (nodePath.findParent(parentPath => parentPath.get('key').isIdentifier({
-                name: 'env'
-              }))) {
-                nodePath.parent.value = babel.types.stringLiteral(applicationId);
-              }
-            }
-          }
-
-        }
-      };
-    }],
-    retainLines: true
-  });
-  const prettierConfig = rcfile('prettier');
-  const formattedData = prettier.format(result.code, prettierConfig);
-  fs.writeFileSync(filePath, formattedData, {
-    encoding: 'utf8'
-  });
-}
-
-module.exports = updateApplicationIdInCustomApplicationConfig;