[Breaking] refactor: remove mc-scripts extract-intl, document usage o…

…f @formatjs/cli command (#1790)

* [Breaking] Migrate packages to new @apollo/client (#1677)

* refactor: migrate to new @apollo/client package

* docs: breaking changes

* fix: remove es6 import of apollo version

* fix(apollo/cache): define type policies, remove unused key fields from product queries

* feat: expose apollo hooks with context type bound to MC

* docs: draft release notes for migrating to new apollo client

* docs(website): divider for release notes content

* refactor: remove unused type

* fix: tests and build

* fix: unused import

* fix: test

* test: fix leftovers

* fix(website): text style workaround

* chore: update @graphql-codegen/add to v2

* chore: rebase leftovers

* docs(apollo-3): improve description on request context

* docs: improve wording

* refactor: use apollo-link-logger package

* refactor(app-shell): allow to configure the apollo client (and cache)

* test: fix assertions

* fix: links

* fix: prettier

Co-authored-by: Adnan Asani <adnasa@users.noreply.github.com>

* [Breaking] refactor: drop mc-http-server, make --use-local-assets the default behavior (#1787)

* refactor: drop mc-http-server, make --use-local-assets the default behavior

* fix: ports

* docs: remove references to http-server

* docs: keep old pages path but link to other documents

* docs: changeset

* fix: use transformer-local for starting app locally in production mode with login and logout dev pages

* fix(website): links

* refactor: add mc-scripts serve command to serve the production-built custom application locally

* chore: remove refs to mc-http-server

* refactor: remove mc-scripts extract-intl, document usage of @formatjs/cli command

Co-authored-by: Adnan Asani <adnasa@users.noreply.github.com>

.changeset/late-starfishes-care.md

@@ -0,0 +1,17 @@
+---
+'merchant-center-application-template-starter': major
+'@commercetools-frontend/application-config': major
+'@commercetools-frontend/application-shell': major
+'@commercetools-frontend/application-shell-connectors': major
+'@commercetools-frontend/mc-dev-authentication': major
+'@commercetools-frontend/mc-html-template': major
+'@commercetools-frontend/mc-scripts': major
+'playground': major
+'@commercetools-local/visual-testing-app': major
+'@commercetools-website/custom-applications': major
+---
+
+Remove `mc-scripts extract-intl` command in favor of the official `@formatjs/cli` package.
+We recommend to update your script to extract Intl messages to use the `formatjs extract` command.
+
+See full release notes: https://docs.commercetools.com/custom-applications/releases/2020-10-12-migrating-to-v17

application-templates/starter/intl-formatter.js

@@ -0,0 +1,16 @@
+// https://formatjs.io/docs/tooling/cli#extraction
+exports.format = function format(extractedMessages) {
+  return (
+    Object.keys(extractedMessages)
+      // transform strings to lowercase to imitate phraseapp sorting
+      .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
+      .reduce(
+        (allMessages, messageId) => ({
+          ...allMessages,
+          // Return a simple key/value JSON object.
+          [messageId]: extractedMessages[messageId].defaultMessage,
+        }),
+        {}
+      )
+  );
+};

application-templates/starter/package.json

@@ -9,7 +9,7 @@
     "compile-html": "NODE_ENV=production dotenv -- mc-scripts compile-html",
     "compile-html:local": "NODE_ENV=production MC_APP_ENV=development dotenv -- mc-scripts compile-html --transformer @commercetools-frontend/mc-dev-authentication/transformer-local.js",
     "start:prod:local": "yarn compile-html:local && mc-scripts serve",
-    "i18n:build": "mc-scripts extract-intl --output-path=$(pwd)/src/i18n/data 'src/**/!(*.spec).js' --build-translations",
+    "extract-intl": "formatjs extract --format=$(pwd)/intl-formatter.js --out-file=$(pwd)/src/i18n/data/core.json 'src/**/!(*.spec).js'",
     "test": "jest --config jest.test.config.js",
     "test:watch": "jest --config jest.test.config.js --watch",
     "update-versions": "bulk-update-versions --match '^@commercetools-frontend/(?!ui-kit)(.*)'"
@@ -39,6 +39,7 @@
     "@commercetools-frontend/jest-preset-mc-app": "16.18.0",
     "@commercetools-frontend/mc-dev-authentication": "16.15.2",
     "@commercetools-frontend/mc-scripts": "16.18.0",
+    "@formatjs/cli": "2.13.0",
     "@testing-library/react": "11.0.4",
     "dotenv-cli": "4.0.0",
     "enzyme": "3.11.0",

application-templates/starter/src/i18n/data/core.json

@@ -4,4 +4,4 @@
   "MainView.title": "Hello, world",
   "ViewOne.title": "View one",
   "ViewTwo.title": "View two"
-}
+}

package.json

@@ -7,8 +7,8 @@
   "scripts": {
     "auth": "npm_config_registry=https://registry.npmjs.org npm whoami",
     "clean": "lerna exec 'rm -rf build dist'",
-    "i18n:build": "formatjs extract --format=$(pwd)/packages/i18n/transifex-transformer.js --out-file=$(pwd)/packages/i18n/data/core.json 'packages/**/*messages.ts'",
-    "i18n:compile": "yarn --cwd packages/i18n compile-data",
+    "extract-intl": "formatjs extract --format=$(pwd)/packages/i18n/transifex-transformer.js --out-file=$(pwd)/packages/i18n/data/core.json 'packages/**/*messages.ts'",
+    "compile-intl": "yarn --cwd packages/i18n compile-data",
     "l10n:build": "pushd packages/l10n; yarn generate-data",
     "lint": "jest --projects jest.eslint.config.js jest.stylelint.config.js jest.text.config.js",
     "lint:js": "jest --config jest.eslint.config.js",
@@ -24,8 +24,8 @@
     "start": "yarn playground:start",
     "changeset": "changeset",
     "release:from-next-to-latest": "lerna exec --no-bail --no-private --no-sort --stream -- '[ -n \"$(npm v . dist-tags.next)\" ] && npm dist-tag add ${LERNA_PACKAGE_NAME}@$(npm v . dist-tags.next) latest'",
-    "pretest": "yarn i18n:compile",
-    "pretest:watch": "yarn i18n:compile",
+    "pretest": "yarn compile-intl",
+    "pretest:watch": "yarn compile-intl",
     "test": "jest --config jest.test.config.js",
     "test:watch": "jest --config jest.test.config.js --watch",
     "test:visual": "jest --config jest.visual.config.js --runInBand",

packages/mc-scripts/bin/mc-scripts.js

@@ -15,7 +15,6 @@ if (commands.length === 0 || (flags.help && commands.length === 0)) {
   Commands:
   build            Bundles the application in production mode
   compile-html     Compiles index.html.template into index.html, with all the related runtime configuration applied as well as the properly security headers (requires "mc-scripts build" to run before)
-  extract-intl     Extracts intl messages into JSON files
   start            Starts the application using webpack dev server
   serve            Serves previously built and compiled application from the public folder
   `);
@@ -27,7 +26,6 @@ const command = commands[0];
 switch (command) {
   case 'build':
   case 'compile-html':
-  case 'extract-intl':
   case 'start':
   case 'serve': {
     const commandArgs = process.argv.slice(2).filter((arg) => command !== arg);

packages/mc-scripts/package.json

@@ -59,15 +59,13 @@
     "@commercetools-frontend/mc-html-template": "16.17.4",
     "@svgr/webpack": "5.4.0",
     "babel-loader": "8.1.0",
-    "babel-plugin-react-intl": "7.9.4",
     "browserslist": "4.14.5",
     "clean-webpack-plugin": "3.0.0",
     "core-js": "3.6.5",
     "css-loader": "4.3.0",
     "cssnano": "4.1.10",
     "file-loader": "6.1.0",
     "fs-extra": "9.0.1",
-    "glob": "7.1.6",
     "graphql-tag": "^2.11.0",
     "html-webpack-plugin": "4.5.0",
     "json-loader": "0.5.7",

playground/intl-formatter.js

@@ -0,0 +1,16 @@
+// https://formatjs.io/docs/tooling/cli#extraction
+exports.format = function format(extractedMessages) {
+  return (
+    Object.keys(extractedMessages)
+      // transform strings to lowercase to imitate phraseapp sorting
+      .sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()))
+      .reduce(
+        (allMessages, messageId) => ({
+          ...allMessages,
+          // Return a simple key/value JSON object.
+          [messageId]: extractedMessages[messageId].defaultMessage,
+        }),
+        {}
+      )
+  );
+};