@commercetools-frontend/mc-scripts 21.7.0 → 21.9.0

package/build/commands/build-vite.js

@@ -1,91 +0,0 @@
-"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'
-  });
-  await build({
-    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

@@ -1,140 +0,0 @@
-"use strict";
-
-/* eslint-disable no-console,global-require,import/no-dynamic-require */
-// NOTE: `react-dev-utils` does not currently fully support Webpack v5.
-// Most of the imports work, however we might bump into some edge cases.
-// In any case, once they release a compatible version, we should't have problems.
-const path = require('path');
-
-const fs = require('fs-extra');
-
-const webpack = require('webpack');
-
-const chalk = require('react-dev-utils/chalk');
-
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-
-const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
-
-const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
-
-const printBuildError = require('react-dev-utils/printBuildError');
-
-const {
-  packageLocation: applicationStaticAssetsPath
-} = require('@commercetools-frontend/assets');
-
-const paths = require('../config/paths');
-
-const createWebpackConfigForProduction = require('../config/create-webpack-config-for-production');
-
-const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild;
-const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild; // These sizes are pretty large. We'll warn for bundles exceeding them.
-
-const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
-const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
-const hasWebpackConfig = fs.existsSync(paths.appWebpackConfig); // Warn and crash if required files are missing
-
-if (!checkRequiredFiles([])) {
-  process.exit(1);
-} // First, read the current file sizes in build directory.
-// This lets us display how much they changed later.
-
-
-measureFileSizesBeforeBuild(paths.appBuild).then(previousFileSizes => {
-  // Remove all content but keep the directory so that
-  // if you're in it, you don't end up in Trash
-  fs.emptyDirSync(paths.appBuild); // Copy default files
-
-  copyDefaultFiles(); // Start the webpack build
-
-  return build(previousFileSizes);
-}).then(({
-  stats,
-  previousFileSizes,
-  warnings
-}) => {
-  if (warnings.length) {
-    console.log(chalk.yellow('Compiled with warnings.\n'));
-    console.log(warnings.join('\n\n'));
-    console.log(`\nSearch for the ${chalk.underline(chalk.yellow('keywords'))} to learn more about each warning.`);
-    console.log(`To ignore, add ${chalk.cyan('// eslint-disable-next-line')} to the line before.\n`);
-  } else {
-    console.log(chalk.green('Compiled successfully.\n'));
-  }
-
-  console.log('File sizes after gzip:\n');
-  printFileSizesAfterBuild(stats, previousFileSizes, paths.appBuild, WARN_AFTER_BUNDLE_GZIP_SIZE, WARN_AFTER_CHUNK_GZIP_SIZE);
-  console.log();
-}, err => {
-  console.log(chalk.red('Failed to compile.\n'));
-  printBuildError(err);
-  process.exit(1);
-}).catch(err => {
-  if (err && err.message) {
-    console.error(err.message);
-  }
-
-  process.exit(1);
-}); // Create the production build and print the deployment instructions.
-
-function build(previousFileSizes) {
-  console.log('Creating an optimized production build...');
-  const config = hasWebpackConfig ? require(paths.appWebpackConfig) : createWebpackConfigForProduction();
-  const compiler = webpack(config);
-  return new Promise((resolve, reject) => {
-    compiler.run((err, stats) => {
-      let messages;
-
-      if (err) {
-        if (!err.message) {
-          return reject(err);
-        }
-
-        let errMessage = err.message; // Add additional information for postcss errors
-
-        if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
-          errMessage += '\nCompileError: Begins at CSS selector ' + err['postcssNode'].selector;
-        }
-
-        messages = formatWebpackMessages({
-          errors: [errMessage],
-          warnings: []
-        });
-      } else {
-        messages = formatWebpackMessages(stats.toJson({
-          all: false,
-          warnings: true,
-          errors: true
-        }));
-      }
-
-      if (messages.errors.length) {
-        // Only keep the first error. Others are often indicative
-        // of the same problem, but confuse the reader with noise.
-        if (messages.errors.length > 1) {
-          messages.errors.length = 1;
-        }
-
-        return reject(new Error(messages.errors.join('\n\n')));
-      }
-
-      if (process.env.CI && (typeof process.env.CI !== 'string' || process.env.CI.toLowerCase() !== 'false') && messages.warnings.length) {
-        console.log(chalk.yellow('\nTreating warnings as errors because process.env.CI = true.\n' + 'Most CI servers set it automatically.\n'));
-        return reject(new Error(messages.warnings.join('\n\n')));
-      }
-
-      return resolve({
-        stats,
-        previousFileSizes,
-        warnings: messages.warnings
-      });
-    });
-  });
-}
-
-function copyDefaultFiles() {
-  fs.copySync(path.join(applicationStaticAssetsPath, 'html-page'), paths.appBuild, {
-    dereference: true
-  });
-}

package/build/commands/compile-html.js

@@ -1,53 +0,0 @@
-"use strict";
-
-/* eslint-disable no-console,global-require,import/no-dynamic-require */
-const fs = require('fs');
-
-const mri = require('mri');
-
-const chalk = require('react-dev-utils/chalk');
-
-const {
-  compileHtml
-} = require('@commercetools-frontend/mc-html-template');
-
-const paths = require('../config/paths');
-
-const flags = mri(process.argv.slice(2), {
-  boolean: ['print-security-headers']
-});
-const appDirectory = fs.realpathSync(process.cwd());
-
-const generateStatic = async () => {
-  console.log('Compiling index.html...');
-  const compiled = await compileHtml(paths.appIndexHtmlTemplate);
-  fs.writeFileSync(paths.appIndexHtml, compiled.indexHtmlContent, {
-    encoding: 'utf8'
-  });
-
-  if (flags.transformer) {
-    try {
-      const transformerPath = require.resolve(flags.transformer, {
-        paths: [appDirectory]
-      });
-
-      const transformerFn = require(transformerPath);
-
-      transformerFn(compiled);
-    } catch (error) {
-      throw new Error(`Could not load transformer module "${flags.transformer}"\n${error.stack}`);
-    }
-  } else if (flags['print-security-headers']) {
-    console.log(JSON.stringify(compiled.headers));
-  }
-
-  console.log(chalk.green('Compiled successfully.\n'));
-};
-
-generateStatic().catch(error => {
-  if (error && error.message) {
-    console.error(error.message);
-  }
-
-  process.exit(1);
-});

package/build/commands/config-sync.js

@@ -1,176 +0,0 @@
-"use strict";
-
-const omit = require('lodash/omit');
-
-const prompts = require('prompts');
-
-const mri = require('mri');
-
-const chalk = require('chalk');
-
-const {
-  processConfig
-} = require('@commercetools-frontend/application-config');
-
-const CredentialsStorage = require('../utils/credentials-storage');
-
-const {
-  fetchCustomApplication,
-  updateCustomApplication,
-  createCustomApplication,
-  fetchUserOrganizations
-} = require('../utils/graphql-requests');
-
-const getConfigDiff = require('../utils/get-config-diff');
-
-const flags = mri(process.argv.slice(2), {
-  boolean: ['dry-run']
-});
-const credentialsStorage = new CredentialsStorage();
-
-const getMcUrlLink = (mcApiUrl, organizationId, applicationId) => {
-  const mcUrl = mcApiUrl.replace('mc-api', 'mc');
-  const customAppLink = `${mcUrl}/account/organizations/${organizationId}/custom-applications/owned/${applicationId}`;
-  return customAppLink;
-};
-
-const configSync = async () => {
-  const applicationConfig = processConfig();
-  const {
-    data: localCustomAppData
-  } = applicationConfig;
-  const {
-    mcApiUrl
-  } = applicationConfig.env;
-
-  if (!credentialsStorage.isSessionValid(mcApiUrl)) {
-    throw new Error(`You don't have a valid session for the ${mcApiUrl} environment. Please, run the "mc-scripts login" command to authenticate yourself.`);
-  }
-
-  const token = credentialsStorage.getToken(mcApiUrl);
-  const fetchedCustomApplication = await fetchCustomApplication({
-    mcApiUrl,
-    token,
-    entryPointUriPath: localCustomAppData.entryPointUriPath
-  });
-
-  if (!fetchedCustomApplication) {
-    const userOrganizations = await fetchUserOrganizations({
-      mcApiUrl,
-      token
-    });
-    let organizationId, organizationName;
-
-    if (userOrganizations.total === 0) {
-      throw new Error(`It seems you are not an admin of any Organization. Please make sure to be part of the Administrators team of the Organization you want the Custom Application to be configured to.`);
-    }
-
-    if (userOrganizations.total === 1) {
-      const [organization] = userOrganizations.results;
-      organizationId = organization.id;
-      organizationName = organization.name;
-    } else {
-      const organizationChoices = userOrganizations.results.map(organization => ({
-        title: organization.name,
-        value: organization.id
-      }));
-      const {
-        organizationId: selectedOrganizationId
-      } = await prompts({
-        type: 'select',
-        name: 'organizationId',
-        message: 'Select Organization',
-        choices: organizationChoices,
-        initial: 0
-      });
-
-      if (!selectedOrganizationId) {
-        throw new Error(`No Organization selected, aborting.`);
-      }
-
-      organizationId = selectedOrganizationId;
-      organizationName = organizationChoices.find(({
-        value
-      }) => value === organizationId).title;
-    }
-
-    const {
-      confirmation
-    } = await prompts({
-      type: 'text',
-      name: 'confirmation',
-      message: `You are about to create a new Custom Application in the "${organizationName}" organization for the ${mcApiUrl} environment. Are you sure you want to proceed?`,
-      initial: 'yes'
-    });
-
-    if (!confirmation || confirmation.toLowerCase().charAt(0) !== 'y') {
-      console.log(chalk.red('Aborted.'));
-      return;
-    }
-
-    const data = omit(localCustomAppData, ['id']);
-
-    if (flags['dry-run']) {
-      console.log(chalk.gray('DRY RUN mode'));
-      console.log(`A new Custom Application would be created for the Organization ${organizationName} with the following payload:`);
-      console.log(JSON.stringify(data));
-      return;
-    }
-
-    const createdCustomApplication = await createCustomApplication({
-      mcApiUrl,
-      token,
-      organizationId,
-      data
-    });
-    const customAppLink = getMcUrlLink(mcApiUrl, organizationId, createdCustomApplication.id);
-    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;
-  }
-
-  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}" with the changes above, in the ${mcApiUrl} environment. Are you sure you want to proceed?`,
-    initial: 'yes'
-  });
-
-  if (!confirmation || confirmation.toLowerCase().charAt(0) !== 'y') {
-    console.log(chalk.red('Aborted.'));
-    return;
-  }
-
-  const data = omit(localCustomAppData, ['id']);
-
-  if (flags['dry-run']) {
-    console.log(chalk.gray('DRY RUN mode'));
-    console.log(`The Custom Application ${data.name} would be updated with the following payload:`);
-    console.log(JSON.stringify(data));
-    return;
-  }
-
-  await updateCustomApplication({
-    mcApiUrl,
-    token,
-    organizationId: fetchedCustomApplication.organizationId,
-    data: omit(localCustomAppData, ['id']),
-    applicationId: fetchedCustomApplication.application.id
-  });
-  console.log(chalk.green(`Custom Application updated.\nYou can see the Custom Application data in the Merchant Center at ${customAppLink}.`));
-};
-
-configSync().catch(error => {
-  console.log(chalk.red(error));
-  process.exit(1);
-});

package/build/commands/login.js

@@ -1,60 +0,0 @@
-"use strict";
-
-const prompts = require('prompts');
-
-const chalk = require('chalk');
-
-const {
-  processConfig
-} = require('@commercetools-frontend/application-config');
-
-const CredentialsStorage = require('../utils/credentials-storage');
-
-const {
-  getAuthToken
-} = require('../utils/auth');
-
-const credentialsStorage = new CredentialsStorage();
-
-const login = async () => {
-  const applicationConfig = processConfig();
-  const {
-    mcApiUrl
-  } = applicationConfig.env;
-
-  if (credentialsStorage.isSessionValid(mcApiUrl)) {
-    console.log(`You already have a valid session for the ${mcApiUrl} environment.\n`);
-    return;
-  }
-
-  const {
-    email
-  } = await prompts({
-    type: 'text',
-    name: 'email',
-    message: 'Email'
-  });
-  const {
-    password
-  } = await prompts({
-    type: 'invisible',
-    name: 'password',
-    message: 'Password (hidden)'
-  });
-
-  if (!email || !password) {
-    throw new Error(`Missing email or password values. Aborting.`);
-  }
-
-  const credentials = await getAuthToken(mcApiUrl, {
-    email,
-    password
-  });
-  credentialsStorage.setToken(mcApiUrl, credentials);
-  console.log(chalk.green(`Login successful for the ${mcApiUrl} environment.\n`));
-};
-
-login().catch(error => {
-  console.log(chalk.red(error));
-  process.exit(1);
-});

package/build/commands/serve.js

@@ -1,37 +0,0 @@
-"use strict";
-
-/* eslint-disable no-console,global-require,import/no-dynamic-require */
-const http = require('http');
-
-const serveHandler = require('serve-handler');
-
-const paths = require('../config/paths');
-
-const port = 3001;
-const server = http.createServer((request, response) => {
-  // You pass two more arguments for config and middleware
-  // More details here: https://github.com/vercel/serve-handler#options
-  return serveHandler(request, response, {
-    public: paths.appBuild,
-    rewrites: [{
-      source: '/favicon*',
-      destination: '/favicon.png'
-    }, {
-      source: '/login*',
-      destination: '/login.html'
-    }, {
-      source: '/logout',
-      destination: '/logout.html'
-    }, {
-      // Match all routes except for the login, logout, and favicon routes.
-      // NOTE: this complex glob pattern would not be necessary if the rewrite
-      // implementation would stop at the first match.
-      // See https://github.com/vercel/serve-handler/issues/71
-      source: '{/!(favicon|login|logout)*/**,/!(favicon|login|logout)*}',
-      destination: '/index.html'
-    }]
-  });
-});
-server.listen(port, () => {
-  console.log(`Running at http://localhost:${port}`);
-});

package/build/commands/start-vite.js

@@ -1,138 +0,0 @@
-"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'
-  });
-  const server = await createServer({
-    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);
-});