@commercetools-frontend/mc-scripts 20.10.3 → 20.12.0

package/build/bin/cli.js

@@ -41,6 +41,7 @@ Commands:
   compile-html              Compiles "index.html.template" file into a "index.html" with all the required runtime configuration. Outputs a "public" folder. Additionally, the security headers are also compiled and printed to stdout, unless you use a "transformer".
                             More info at https://docs.commercetools.com/custom-applications/deployment/compiling-a-custom-application.
       --transformer <path>  (optional) The path to a JS module that can be used to generate a configuration for a specific cloud provider (e.g. Netlify, Vercel, Firebase).
+      --inline-csp          (optional) If defined, the CSP config is inlined in the HTML head as a meta tag. This might be useful to keep using a static config for a hosting provider without the dynamically generated Content-Security-Policy header.
 
   start                     Starts the application in development mode using Webpack Dev Server.
 
@@ -78,7 +79,7 @@ const applicationDirectory = fs.realpathSync(process.cwd());
           // Do this as the first thing so that any code reading it knows the right env.
           process.env.NODE_ENV = 'production'; // Get specific flag for this command.
 
-          const commandArgs = getArgsForCommand(['transformer']);
+          const commandArgs = getArgsForCommand(['transformer', 'inline-csp']);
           proxyCommand({
             commandArgs
           });

package/build/commands/compile-html.js

@@ -17,7 +17,9 @@ const {
   compileHtml
 } = require('@commercetools-frontend/mc-html-template');
 
-const flags = mri(process.argv.slice(2));
+const flags = mri(process.argv.slice(2), {
+  boolean: ['inline-csp']
+});
 const appDirectory = fs.realpathSync(process.cwd());
 
 const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
@@ -60,21 +62,25 @@ try {
 shelljs.cp('-R', path.join(assetsFrom, '/*'), publicAssetsPath);
 
 const generateStatic = async () => {
-  const compiled = await compileHtml(paths.indexHtmlTemplatePath);
+  const compiled = await compileHtml(paths.indexHtmlTemplatePath, {
+    inlineCsp: flags['inline-csp']
+  });
   fs.writeFileSync(paths.indexHtmlPath, compiled.indexHtmlContent, {
     encoding: 'utf8'
   });
 
   if (flags.transformer) {
     try {
-      require.resolve(flags.transformer);
+      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}`);
     }
-
-    const transformerFn = require(flags.transformer);
-
-    transformerFn(compiled);
   } else {
     console.log(JSON.stringify(compiled.headers));
   }

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

@@ -64,7 +64,7 @@ module.exports = ({
   onBeforeSetupMiddleware({
     app
   }) {
-    var _applicationConfig$en;
+    var _applicationConfig$en, _applicationConfig$en2;
 
     app.set('views', devAuthentication.views);
     app.set('view engine', devAuthentication.config.viewEngine); // This lets us open files from the runtime error overlay.
@@ -79,12 +79,13 @@ module.exports = ({
         data: null,
         error: fakeApolloError
       }));
-    }); // Handle login page for OIDC workflow when developing against a local MC API.
+    });
 
-    if ((_applicationConfig$en = applicationConfig.env.__DEVELOPMENT__.oidc) !== null && _applicationConfig$en !== void 0 && _applicationConfig$en.authorizeUrl) {
-      var _applicationConfig$en2;
+    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;
 
-      if ((_applicationConfig$en2 = applicationConfig.env.__DEVELOPMENT__.oidc) !== null && _applicationConfig$en2 !== void 0 && _applicationConfig$en2.authorizeUrl.startsWith('http://localhost')) {
+      // 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')) {
         app.use('/login/authorize', devAuthentication.middlewares.createLoginMiddleware(applicationConfig.env));
       }
     } else {

package/build/webpack-plugins/local-html-webpack-plugin.js

@@ -25,7 +25,9 @@ class LocalHtmlWebpackPlugin {
   apply(compiler) {
     compiler.hooks.compilation.tap('LocalHtmlWebpackPlugin', compilation => {
       HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync('LocalHtmlWebpackPlugin', (data, cb) => {
-        data.html = replaceHtmlPlaceholders(data.html, enhancedLocalEnv);
+        data.html = replaceHtmlPlaceholders(data.html, {
+          env: enhancedLocalEnv
+        });
         cb(null, data);
       });
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools-frontend/mc-scripts",
-  "version": "20.10.3",
+  "version": "20.12.0",
   "description": "Configuration and scripts for developing a MC application",
   "bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
   "repository": {
@@ -11,72 +11,69 @@
   "homepage": "https://docs.commercetools.com/custom-applications",
   "keywords": ["javascript", "frontend", "react", "toolkit"],
   "license": "MIT",
-  "private": false,
   "publishConfig": {
     "access": "public"
   },
   "main": "./build/index.js",
   "files": ["build", "config", "package.json", "LICENSE", "README.md"],
-  "bin": {
-    "mc-scripts": "./bin/mc-scripts.js"
-  },
+  "bin": "./bin/cli.js",
   "browserslist": {
     "production": [">1%", "not op_mini all", "not dead"],
     "development": ["last 2 firefox versions", "last 2 chrome versions"]
   },
   "scripts": {
-    "prebuild": "rimraf build/**",
-    "build": "babel src --out-dir build",
+    "build": "rimraf build && babel src --out-dir build",
     "build:bundles:watch": "yarn build -w"
   },
   "dependencies": {
     "@babel/runtime": "7.15.4",
     "@babel/runtime-corejs3": "7.15.4",
-    "@commercetools-frontend/application-config": "20.10.3",
-    "@commercetools-frontend/assets": "20.10.1",
-    "@commercetools-frontend/babel-preset-mc-app": "20.10.3",
-    "@commercetools-frontend/mc-dev-authentication": "20.10.3",
-    "@commercetools-frontend/mc-html-template": "20.10.3",
+    "@commercetools-frontend/application-config": "20.12.0",
+    "@commercetools-frontend/assets": "20.12.0",
+    "@commercetools-frontend/babel-preset-mc-app": "20.10.6",
+    "@commercetools-frontend/mc-dev-authentication": "20.10.6",
+    "@commercetools-frontend/mc-html-template": "20.12.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.1",
     "@svgr/webpack": "5.5.0",
     "autoprefixer": "10.3.7",
-    "babel-loader": "8.2.2",
-    "browserslist": "4.17.3",
-    "core-js": "3.18.2",
+    "babel-loader": "8.2.3",
+    "browserslist": "4.17.5",
+    "core-js": "3.19.0",
     "css-loader": "5.2.7",
     "css-minimizer-webpack-plugin": "3.1.1",
     "dotenv": "10.0.0",
     "dotenv-expand": "5.1.0",
     "fs-extra": "10.0.0",
     "graphql-tag": "^2.11.0",
-    "html-webpack-plugin": "5.3.2",
+    "html-webpack-plugin": "5.5.0",
     "json-loader": "0.5.7",
     "mini-css-extract-plugin": "1.6.2",
     "moment-locales-webpack-plugin": "1.2.0",
     "mri": "1.2.0",
-    "postcss": "8.3.9",
+    "postcss": "8.3.11",
     "postcss-color-mod-function": "3.0.3",
     "postcss-custom-media": "8.0.0",
     "postcss-custom-properties": "11.0.0",
     "postcss-import": "14.0.2",
-    "postcss-loader": "6.1.1",
-    "postcss-reporter": "7.0.3",
+    "postcss-loader": "6.2.0",
+    "postcss-reporter": "7.0.4",
     "react-dev-utils": "11.0.4",
     "react-refresh": "0.10.0",
     "serve-handler": "6.1.3",
     "shelljs": "0.8.4",
-    "style-loader": "3.3.0",
+    "style-loader": "3.3.1",
     "svg-url-loader": "7.1.1",
     "terser-webpack-plugin": "5.2.4",
     "thread-loader": "3.0.4",
-    "webpack": "5.58.1",
-    "webpack-bundle-analyzer": "4.4.2",
+    "webpack": "5.60.0",
+    "webpack-bundle-analyzer": "4.5.0",
     "webpack-dev-server": "4.3.1",
     "webpackbar": "5.0.0-3"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "7.15.8",
-    "@babel/preset-env": "7.15.8"
+    "@babel/preset-env": "7.15.8",
+    "rimraf": "3.0.2"
   },
   "engines": {
     "node": ">=12 || >=14"