@commercetools-frontend/create-mc-app 20.10.1 → 21.0.0

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @commercetools-frontend/create-mc-app
 
+## 21.0.0
+
+### Major Changes
+
+- [#2430](https://github.com/commercetools/merchant-center-application-kit/pull/2430) [`bb1f7d75`](https://github.com/commercetools/merchant-center-application-kit/commit/bb1f7d75ff54f7fef05c4d2b3328b88e400b4867) Thanks [@emmenko](https://github.com/emmenko)! - Drop Node.js `v12`. Recommended min Node.js version is `v14` or `v16`.
+
+* [#2430](https://github.com/commercetools/merchant-center-application-kit/pull/2430) [`bb1f7d75`](https://github.com/commercetools/merchant-center-application-kit/commit/bb1f7d75ff54f7fef05c4d2b3328b88e400b4867) Thanks [@emmenko](https://github.com/emmenko)! - Following breaking changes were introduced:
+
+  - The starter template has been updated to use the new Org-level Custom Application features.
+  - The Custom Application config of the starter template has been converted from `.json` to `.mjs`, to allow importing and referencing constants.
+  - When installing the starter template using the `create-mc-app` CLI, the Custom Application config is updated with some of the user inputs, like `entryPointUriPath`.
+    - If no `entryPointUriPath` is provided, a random one is assigned.
+
+  For more information see [Release notes v21](https://docs.commercetools.com/custom-applications/releases/2022-01-31-custom-applications-v21).
+
+### Patch Changes
+
+- [#2430](https://github.com/commercetools/merchant-center-application-kit/pull/2430) [`bb1f7d75`](https://github.com/commercetools/merchant-center-application-kit/commit/bb1f7d75ff54f7fef05c4d2b3328b88e400b4867) Thanks [@emmenko](https://github.com/emmenko)! - Use version range for Babel packages.
+
+## 21.0.0-rc.1
+
+### Patch Changes
+
+- [#2430](https://github.com/commercetools/merchant-center-application-kit/pull/2430) [`5ea8baf1`](https://github.com/commercetools/merchant-center-application-kit/commit/5ea8baf1b2ca2661aac9a6a572d2c8e596ee0b2c) Thanks [@emmenko](https://github.com/emmenko)! - Use version range for Babel packages.
+
+## 21.0.0-rc.0
+
+### Major Changes
+
+- [#2430](https://github.com/commercetools/merchant-center-application-kit/pull/2430) [`1c363fad`](https://github.com/commercetools/merchant-center-application-kit/commit/1c363fad7ab770a739ac8080358e41ae4af42074) Thanks [@emmenko](https://github.com/emmenko)! - Drop Node.js `v12`. Recommended min Node.js version is `v14` or `v16`.
+
+* [#2430](https://github.com/commercetools/merchant-center-application-kit/pull/2430) [`e079fdcb`](https://github.com/commercetools/merchant-center-application-kit/commit/e079fdcb21ae7dddf14e554be1bd6e36f7346417) Thanks [@emmenko](https://github.com/emmenko)! - Following breaking changes were introduced:
+
+  - The starter template has been updated to use the new Org-level Custom Application features.
+  - The Custom Application config of the starter template has been converted from `.json` to `.mjs`, to allow importing and referencing constants.
+  - When installing the starter template using the `create-mc-app` CLI, the Custom Application config is updated with some of the user inputs, like `entryPointUriPath`.
+    - If no `entryPointUriPath` is provided, a random one is assigned.
+
+  For more information see [Release notes v21](https://docs.commercetools.com/custom-applications/releases/2022-01-31-custom-applications-v21).
+
+## 20.10.6
+
+### Patch Changes
+
+- [#2386](https://github.com/commercetools/merchant-center-application-kit/pull/2386) [`d7fcf6fc`](https://github.com/commercetools/merchant-center-application-kit/commit/d7fcf6fc8495d4eae68e0a4f4c1f1b3e0e394454) Thanks [@emmenko](https://github.com/emmenko)! - Upgrade to Yarn v3
+
 ## 20.10.1
 
 ### Patch Changes

package/bin/{create-mc-app.js → cli.js}

@@ -3,6 +3,7 @@
 const mri = require('mri');
 const Listr = require('listr');
 const {
+  isValidNodeVersion,
   shouldUseYarn,
   tasks,
   hintOutdatedVersion,
@@ -10,12 +11,14 @@ const {
 } = require('../src');
 const pkg = require('../package.json');
 
+isValidNodeVersion(process.versions.node, pkg.engines.node);
+
 const currentVersion = pkg.version;
 
 async function execute() {
   const flags = mri(process.argv.slice(2), {
     alias: { help: ['h'] },
-    default: { 'skip-install': false },
+    default: { 'skip-install': false, yes: false },
   });
   const commands = flags._;
 
@@ -31,13 +34,23 @@ async function execute() {
                                     Available options: ["starter"]
     --template-version <version>    (optional) The version of the template to install [default "main"]
     --skip-install                  (optional) Skip installing the dependencies after cloning the template [default "false"]
+    --yes                           (optional) If set, the prompt options with default values will be skipped. [default "false"]
+    --entry-point-uri-path <value>  (optional) The version of the template to install [default "starter-<hash>"]
+    --initial-project-key <value>   (optional) A commercetools project key used for the initial login in development. By default, the value is prompted in the terminal.
     `);
     process.exit(0);
   }
-  console.log(`Version: v${currentVersion}`);
+  console.log('');
+  console.log(`create-mc-app: v${currentVersion}`);
   hintOutdatedVersion(currentVersion);
   console.log('');
-  const options = parseArguments(flags);
+
+  console.log(
+    `Documentation available at https://docs.commercetools.com/custom-applications`
+  );
+  console.log('');
+
+  const options = await parseArguments(flags);
 
   const taskList = new Listr(
     [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/create-mc-app",
-  "version": "20.10.1",
+  "version": "21.0.0",
   "description": "Create Merchant Center applications to quickly get up and running",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -11,21 +11,20 @@
   "homepage": "https://docs.commercetools.com/custom-applications",
   "keywords": ["javascript", "frontend", "react", "toolkit"],
   "license": "MIT",
-  "private": false,
-  "scripts": {},
   "publishConfig": {
     "access": "public"
   },
-  "bin": {
-    "create-mc-app": "./bin/create-mc-app.js"
-  },
+  "bin": "./bin/cli.js",
   "dependencies": {
+    "@babel/core": "^7.16.10",
     "execa": "5.1.1",
     "listr": "0.14.3",
     "mri": "1.2.0",
+    "prettier": "2.5.1",
+    "rcfile": "1.0.3",
     "semver": "7.3.5"
   },
   "engines": {
-    "node": ">=12 || >=14"
+    "node": ">=14"
   }
 }

package/src/index.js

@@ -1,9 +1,10 @@
-const { shouldUseYarn } = require('./utils');
+const { isValidNodeVersion, shouldUseYarn } = require('./utils');
 const tasks = require('./tasks');
 const hintOutdatedVersion = require('./hint-outdated-version');
 const parseArguments = require('./parse-arguments');
 
 module.exports = {
+  isValidNodeVersion,
   shouldUseYarn,
   tasks,
   hintOutdatedVersion,

package/src/parse-arguments.js

@@ -1,12 +1,56 @@
 /* eslint-disable no-console */
 const path = require('path');
+const util = require('util');
+const readline = require('readline');
+const crypto = require('crypto');
 const {
   throwIfTemplateIsNotSupported,
   throwIfProjectDirectoryExists,
+  throwIfInitialProjectKeyIsMissing,
 } = require('./validations');
 const { isSemVer } = require('./utils');
 
-module.exports = function parseArguments(flags) {
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+const question = util.promisify(rl.question).bind(rl);
+
+const getTemplateName = (flags) => flags.template || 'starter';
+const getEntryPointUriPath = async (flags) => {
+  if (flags['entry-point-uri-path']) {
+    return flags['entry-point-uri-path'];
+  }
+
+  const templateName = getTemplateName(flags);
+  const randomEntryPointUriPath = `${templateName}-${crypto
+    .randomBytes(3)
+    .toString('hex')}`;
+
+  if (flags.yes) {
+    return randomEntryPointUriPath;
+  }
+
+  const answerEntryPointUriPath = await question(
+    `Provide the Custom Application entryPointUriPath (default "${randomEntryPointUriPath}"): `
+  );
+  return answerEntryPointUriPath || randomEntryPointUriPath;
+};
+const getInitialProjectKey = async (flags) => {
+  if (flags['initial-project-key']) {
+    return flags['initial-project-key'];
+  }
+
+  const initialProjectKey = await question(
+    `Provide the initial project key for local development: `
+  );
+
+  throwIfInitialProjectKeyIsMissing(initialProjectKey);
+
+  return initialProjectKey;
+};
+
+module.exports = async function parseArguments(flags) {
   const [projectDirectoryName] = flags._;
   if (!projectDirectoryName) {
     throw new Error('Missing required argument "<project-directory>"');
@@ -14,7 +58,7 @@ module.exports = function parseArguments(flags) {
   const projectDirectoryPath = path.resolve(projectDirectoryName);
 
   // Parse options
-  const templateName = flags.template || 'starter';
+  const templateName = getTemplateName(flags);
   let tagOrBranchVersion = flags['template-version'] || 'main';
   tagOrBranchVersion =
     isSemVer(tagOrBranchVersion) && !tagOrBranchVersion.startsWith('v')
@@ -25,10 +69,18 @@ module.exports = function parseArguments(flags) {
   throwIfProjectDirectoryExists(projectDirectoryName, projectDirectoryPath);
   throwIfTemplateIsNotSupported(templateName);
 
+  // Read prompts
+  const entryPointUriPath = await getEntryPointUriPath(flags);
+  const initialProjectKey = await getInitialProjectKey(flags);
+
+  rl.close();
+
   return {
     projectDirectoryName,
     projectDirectoryPath,
     templateName,
     tagOrBranchVersion,
+    entryPointUriPath,
+    initialProjectKey,
   };
 };

package/src/tasks/update-application-constants.js

@@ -1,42 +1,42 @@
 const os = require('os');
 const fs = require('fs');
 const path = require('path');
-const { slugify } = require('../utils');
+const babel = require('@babel/core');
+const { resolveFilePathByExtension } = require('../utils');
 
-const entryPointVariableRegex = /entryPointUriPath\s?=\s?'(.*)';/;
+function replaceEntryPointUriPathInConstants(filePath, options) {
+  const result = babel.transformFileSync(filePath, {
+    plugins: [
+      function replaceConstants() {
+        return {
+          visitor: {
+            VariableDeclarator(nodePath) {
+              if (nodePath.node.id.name === 'entryPointUriPath') {
+                nodePath.node.init = babel.types.stringLiteral(
+                  options.entryPointUriPath
+                );
+              }
+            },
+          },
+        };
+      },
+    ],
+    retainLines: true,
+  });
+
+  fs.writeFileSync(filePath, result.code + os.EOL, {
+    encoding: 'utf8',
+  });
+}
 
-// TODO: when we enable OIDC login as the default behavior, we also want to
-// update the following things:
-// * permission names (based on the entryPointUriPath)
 module.exports = function updateApplicationConstants(options) {
   return {
     title: 'Updating application constants',
     task: () => {
-      const applicationConstantsPath = path.join(
-        options.projectDirectoryPath,
-        // TODO: support other file extensions?
-        'src/constants/application.js'
-      );
-      const appConstantsRaw = fs.readFileSync(applicationConstantsPath, {
-        encoding: 'utf8',
-      });
-
-      // Set the entry point based on the package/folder name.
-      const entryPointUriPath = slugify(options.projectDirectoryName);
-
-      // TODO: use Babel AST?
-      const updatedAppConstantsRaw = appConstantsRaw.replace(
-        entryPointVariableRegex,
-        `entryPointUriPath = '${entryPointUriPath}';`
-      );
-
-      fs.writeFileSync(
-        applicationConstantsPath,
-        updatedAppConstantsRaw + os.EOL,
-        {
-          encoding: 'utf8',
-        }
+      const applicationConstantsPath = resolveFilePathByExtension(
+        path.join(options.projectDirectoryPath, 'src/constants')
       );
+      replaceEntryPointUriPathInConstants(applicationConstantsPath, options);
     },
   };
 };

package/src/tasks/update-custom-application-config.js

@@ -1,38 +1,63 @@
-const os = require('os');
 const fs = require('fs');
 const path = require('path');
-const { slugify, wordify } = require('../utils');
+const rcfile = require('rcfile');
+const prettier = require('prettier');
+const babel = require('@babel/core');
+const { wordify, resolveFilePathByExtension } = require('../utils');
+
+function replaceApplicationInfoInCustomApplicationConfig(filePath, options) {
+  const appName = wordify(options.entryPointUriPath);
+
+  const result = babel.transformFileSync(filePath, {
+    plugins: [
+      function replaceCustomApplicationConfig() {
+        return {
+          visitor: {
+            Identifier(nodePath) {
+              if (nodePath.isIdentifier({ name: 'name' })) {
+                nodePath.parent.value = babel.types.stringLiteral(appName);
+              }
+              if (nodePath.isIdentifier({ name: 'initialProjectKey' })) {
+                nodePath.parent.value = babel.types.stringLiteral(
+                  options.initialProjectKey
+                );
+              }
+              if (nodePath.isIdentifier({ name: 'defaultLabel' })) {
+                if (
+                  nodePath.findParent((parentPath) =>
+                    parentPath.get('key').isIdentifier({ name: 'mainMenuLink' })
+                  )
+                ) {
+                  nodePath.parent.value = babel.types.stringLiteral(appName);
+                }
+              }
+            },
+          },
+        };
+      },
+    ],
+    retainLines: true,
+  });
+
+  const prettierConfig = rcfile('prettier', {
+    cwd: options.projectDirectoryPath,
+  });
+  const formattedData = prettier.format(result.code, prettierConfig);
+  fs.writeFileSync(filePath, formattedData, {
+    encoding: 'utf8',
+  });
+}
 
 module.exports = function updateCustomApplicationConfig(options) {
-  // NOTE: this only works assuming the template uses a JSON file.
   return {
-    title: 'Updating custom-application-config.json',
+    title: 'Updating Custom Applications config',
     task: () => {
-      const customApplicationConfigJsonPath = path.join(
-        options.projectDirectoryPath,
-        'custom-application-config.json'
-      );
-      const appConfigJson = JSON.parse(
-        fs.readFileSync(customApplicationConfigJsonPath, { encoding: 'utf8' })
+      const customApplicationConfigPath = resolveFilePathByExtension(
+        path.join(options.projectDirectoryPath, 'custom-application-config')
       );
-
-      // Set the entry point based on the package/folder name.
-      const entryPointUriPath = slugify(options.projectDirectoryName);
-      const appName = wordify(entryPointUriPath);
-
-      const updatedAppConfigJson = Object.assign({}, appConfigJson, {
-        name: appName,
-        entryPointUriPath,
-        menuLinks: {
-          ...appConfigJson.menuLinks,
-          defaultLabel: appName,
-        },
-      });
-
-      fs.writeFileSync(
-        customApplicationConfigJsonPath,
-        JSON.stringify(updatedAppConfigJson, null, 2) + os.EOL,
-        { encoding: 'utf8' }
+      replaceApplicationInfoInCustomApplicationConfig(
+        customApplicationConfigPath,
+        options
       );
     },
   };

package/src/utils.js

@@ -1,4 +1,20 @@
+const fs = require('fs');
 const execa = require('execa');
+const semver = require('semver');
+
+const isValidNodeVersion = (currentNodeVersion, expectedVersionRange) => {
+  const hasValidNodeVersion = semver.satisfies(
+    currentNodeVersion,
+    expectedVersionRange
+  );
+
+  if (!hasValidNodeVersion) {
+    console.error(
+      `You are running Node ${currentNodeVersion} but create-mc-app requires Node ${expectedVersionRange}. Please update your version of Node.`
+    );
+    process.exit(1);
+  }
+};
 
 const isSemVer = (version) => /^(v?)([0-9].[0-9].[0-9])+/.test(version);
 
@@ -21,10 +37,20 @@ const wordify = (slug) =>
     .map((word) => upperFirst(word))
     .join(' ');
 
+const resolveFilePathByExtension = (requestedModule) => {
+  const fileExtension = ['.js', '.ts', '.mjs', '.cjs'].find((ext) => {
+    const filePath = `${requestedModule}${ext}`;
+    return fs.existsSync(filePath);
+  });
+  return `${requestedModule}${fileExtension}`;
+};
+
 module.exports = {
+  isValidNodeVersion,
   isSemVer,
   shouldUseYarn,
   slugify,
   wordify,
   upperFirst,
+  resolveFilePathByExtension,
 };

package/src/validations.js

@@ -47,8 +47,15 @@ const throwIfTemplateVersionDoesNotExist = (
   }
 };
 
+const throwIfInitialProjectKeyIsMissing = (initialProjectKey) => {
+  if (!initialProjectKey) {
+    throw new Error(`Provide a valid project key that you have access to.`);
+  }
+};
+
 module.exports = {
   throwIfTemplateIsNotSupported,
   throwIfProjectDirectoryExists,
   throwIfTemplateVersionDoesNotExist,
+  throwIfInitialProjectKeyIsMissing,
 };