@zohodesk/react-cli 0.0.1-beta.16 → 0.0.1-beta.160

package/lib/plugins/CleanupStatsPlugin.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+class CleanUpStatsPlugin {
+  shouldPickStatChild(child) {
+    return child.name.indexOf('mini-css-extract-plugin') !== 0;
+  }
+
+  apply(compiler) {
+    compiler.hooks.done.tap('CleanUpStatsPlugin', stats => {
+      const {
+        children
+      } = stats.compilation;
+
+      if (Array.isArray(children)) {
+        // eslint-disable-next-line no-param-reassign
+        stats.compilation.children = children.filter(child => this.shouldPickStatChild(child));
+      }
+    });
+  }
+
+}
+
+exports.default = CleanUpStatsPlugin;

package/lib/plugins/EFCPlugin.js

@@ -0,0 +1,211 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _webpackSources = require("webpack-sources");
+
+var _utils = require("../utils");
+
+var _path = _interopRequireDefault(require("path"));
+
+var _getI18nFileUrlPathTemplate = require("./I18nSplitPlugin/utils/getI18nFileUrlPathTemplate");
+
+var _I18nKeysIdentifer = _interopRequireDefault(require("./I18nSplitPlugin/I18nKeysIdentifer"));
+
+var _replaceCssDirTemplate = require("./RtlSplitPlugin/replaceCssDirTemplate");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import { getShortI18nAssets } from './I18nSplitPlugin/utils/hashUtils';
+const cliOptions = (0, _utils.getOptions)();
+const {
+  app: {
+    publicPaths
+  },
+  i18n: {
+    chunkSplitEnable
+  },
+  css: {
+    enableRTLSplit
+  },
+  efc: efcOptios
+} = cliOptions;
+const {
+  createSDkFile
+} = efcOptios;
+
+class EFCPlugin {
+  constructor(options = {}) {
+    this.isDevelopment = options.isDevelopment;
+    this.serverUrl = options.serverUrl;
+    this.i18nFileNameTemplate = options.i18nFileNameTemplate; // NOTE: this logic may be needed for i18n splited file name with contenthash cases
+    // this.i18nManifestFileName = options.i18nManifestFileName;
+    // IMPORTANT: here we mergeing optionds  from  pacakge.json  and options via constructor
+    // So when debugging consider this as well 
+
+    this.options = Object.assign({}, efcOptios, options);
+    this.options.entryPointName = options.entryPointName || 'efc';
+    this.options.outputFile = efcOptios.outputFile.replace('[version]', efcOptios.version);
+    this.options.nameScope = options.nameScope || 'EFComponents';
+    const localeAttr = this.options.localeAttr || 'data-efc-locale';
+    const cssDirAttr = this.options.cssDirAttr || 'data-efc-dir';
+    const localeDefaultValue = this.options.localeDefaultValue || 'en_US';
+    const cssDirDefaultValue = this.options.cssDirDefaultValue || 'ltr';
+    this.options.localeStatement = options.localeStatement || // Statment 1:   return langEle && langEle.getAttribute('${localeAttr}') || 'en_US';
+    // Statment 2:   return langEle ? langEle.getAttribute('${localeAttr}') : 'en_US';
+    // We are using statement1 not statment2,
+    // Because even that attribute doesn't have value, We need default value
+    `(() => {
+        let langEle = document.querySelector('[${localeAttr}]');
+        return langEle && langEle.getAttribute('${localeAttr}') || '${localeDefaultValue}';
+      })();`;
+    this.options.cssDirStatement = options.cssDirStatement || `(() => {
+        let dirEle = document.querySelector('[${cssDirAttr}]');
+        return dirEle && dirEle.getAttribute('${cssDirAttr}') || '${cssDirDefaultValue}';
+      })();`;
+  } // NOTE: this logic may be needed for i18n splited file name with contenthash cases
+  // getI18nManifest(compilation) {
+  //   const i18nManifestFile =
+  //     compilation.assets[this.options.i18nManifestFileName];
+  //   if (i18nManifestFile) {
+  //     const manifest = JSON.parse(i18nManifestFile.source());
+  //     return manifest;
+  //   }
+  //   return {};
+  // }
+
+
+  getI18nAssetsStr(entryPoint, compilation) {
+    if (!chunkSplitEnable) {
+      let i18nAsstes = {};
+      let i18nFiles = Object.keys(compilation.assets).filter(assert => assert.indexOf(`i18n${_path.default.sep}`) !== -1); //hook for i18n url contains i18n/ may cause problem
+
+      i18nAsstes = i18nFiles.reduce((res, i18nFilePath) => {
+        let fileName = i18nFilePath.replace(`i18n${_path.default.sep}`, '');
+        let splittedFileName = fileName.split('.');
+        res[splittedFileName[0]] = i18nFilePath;
+        return res;
+      }, {});
+      return `[${JSON.stringify(i18nAsstes)}[lang]]`;
+    }
+
+    let initalI18nAssets = entryPoint.chunks.filter(chunk => _I18nKeysIdentifer.default.isChunkHasI18n(chunk)).map(chunk => (0, _getI18nFileUrlPathTemplate.getI18nFileUrlPathTemplate)(compilation, chunk, this.i18nFileNameTemplate, '@locale@'));
+    return `${JSON.stringify(initalI18nAssets)}.map(urlpath => urlpath.replace(/@locale@/g, lang))`;
+  }
+
+  createFileContent(compilation) {
+    const {
+      entryPointName,
+      localeStatement,
+      cssDirStatement,
+      nameScope,
+      cdnVariableName = null
+    } = this.options;
+    const {
+      serverUrl
+    } = this;
+    const cssDirTemplate = '@dir@'; // const i18nManifest = this.getI18nManifest(compilation);
+
+    const entryPoint = compilation.entrypoints.get(entryPointName); // const chunk = compilation.namedChunks.get(entryPointName);
+
+    const [jsPath, cssPath,,, i18nJsPath] = !this.isDevelopment ? publicPaths : [];
+    const initialFiles = entryPoint.getFiles();
+    const filteredInitialFiles = initialFiles.filter(file => /\.(css|js)$/.test(file)); // const i18nAssets = getShortI18nAssets(
+    //   entryPoint.chunks,
+    //   i18nManifest,
+    //   i18nJsPath
+    // );
+
+    const initalI18nAssets = this.getI18nAssetsStr(entryPoint, compilation, i18nJsPath);
+    return `(() => {
+  const lang = ${localeStatement};
+  ${enableRTLSplit ? `const cssDir = ${cssDirStatement};` : ''}
+  const prod = !${this.isDevelopment};
+  let cdnVariableName = "${cdnVariableName}";
+  let assetURLs = {
+    //hook
+    js: ${JSON.stringify(jsPath || serverUrl)},
+    css: ${JSON.stringify(cssPath || serverUrl)},
+    i18n: ${JSON.stringify(i18nJsPath || serverUrl)}
+  };
+
+  window.desk_urls={}
+  window.desk_urls.staticDomain = 'https:' + assetURLs.js + '/';
+  if (prod && cdnVariableName) {
+    window["${cdnVariableName}"] = 'https:' + assetURLs.css + '/';
+  }
+
+  let initalI18nAssets = ${initalI18nAssets}.map(urlpath => "${i18nJsPath}/"+ urlpath);
+  let initialAssets = initalI18nAssets.concat(${JSON.stringify(enableRTLSplit ? filteredInitialFiles.map(filePath => (0, _replaceCssDirTemplate.replaceCssDirTemplate)(filePath, cssDirTemplate)) : filteredInitialFiles)});
+
+  let loadAsset = (id, type, url) => {
+    return new Promise((res, rej) => {
+      let el = document.createElement(type);
+      // el.id = id;
+      el.onload = res;
+      el.error = rej;
+      switch(type) {
+        case 'script':
+        case 'i18n':
+          el.src = (type === 'i18n'? assetURLs.i18n : assetURLs.js)+'/'+url
+          el.defer = 'defer';
+          document.body.appendChild(el);
+          break;
+        case 'link':
+          el.href = assetURLs.css+'/'+url${enableRTLSplit ? `.replace(${JSON.stringify(cssDirTemplate)}, cssDir)` : ''}
+          el.rel = 'stylesheet';
+          document.head.appendChild(el);
+          break;
+      }
+    });
+  };
+
+  let memorizedPromise = null;
+  ${nameScope}.onload = (cb, err) => {
+    if(!memorizedPromise) {
+      memorizedPromise = Promise.all(
+        initialAssets.map(
+          (url, index) => loadAsset(
+            "${nameScope}-" + (url.endsWith("js") ? "js" : "css")  +"-"+index,
+            url.endsWith("js") ? url.endsWith(".i18n.js") ? "i18n" : 'script' : 'link',
+            url
+          )
+        )
+      ).then(() => ${nameScope}.onBasicLoad(cb));
+    }
+    return memorizedPromise;
+  };
+
+  })();
+`;
+  }
+
+  apply(compiler) {
+    if (!createSDkFile) {
+      return;
+    }
+
+    compiler.hooks.emit.tap('EFCPlugin', compilation => {
+      const {
+        entryPointName,
+        outputFile
+      } = this.options;
+      const entryPoint = compilation.entrypoints.get(entryPointName);
+
+      if (!entryPoint) {
+        return;
+      }
+
+      const source = new _webpackSources.RawSource(this.createFileContent(compilation));
+      compilation.assets[outputFile] = source; // eslint-disable-next-line no-console
+
+      console.log('The EFC embedded code was created successfully..!!!');
+    });
+  }
+
+}
+
+exports.default = EFCPlugin;

package/lib/plugins/EFCPlugin.md

@@ -0,0 +1,6 @@
+# EFC Plugin
+
+In EFC plugin we are create sdk file for efc related purpose
+
+
+# document will be soon

package/lib/plugins/I18NInjectIntoIndexPlugin.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
+
+var _utils = require("../utils");
+
+var _urlConcat = require("../utils/urlConcat");
+
+var _path = _interopRequireDefault(require("path"));
+
+var _webpackSources = require("webpack-sources");
+
+var _hashUtils = require("./I18nSplitPlugin/utils/hashUtils");
+
+var _getI18nFileUrlPathTemplate = require("./I18nSplitPlugin/utils/getI18nFileUrlPathTemplate");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+let i18nObj = null;
+let options = (0, _utils.getOptions)();
+
+function newAssign(target, data) {
+  return Object.assign({}, target, data);
+}
+
+const {
+  i18n
+} = options;
+
+class I18NInjectIntoIndexPlugin {
+  constructor(options) {
+    this.isDevelopment = options.isDevelopment;
+    this.i18nFileNameTemplate = options.i18nFileNameTemplate;
+    this.publicPath = options.publicPath;
+    this.templateLabel = options.templateLabel || '{{--user-locale}}';
+    this.i18nManifestFileName = options.i18nManifestFileName;
+    this.entryPointName = options.mainChunkName;
+  }
+
+  getI18nFileUrlPath(chunk, compilation) {
+    let urlpath = (0, _getI18nFileUrlPathTemplate.getI18nFileUrlPathTemplate)(compilation, chunk, this.i18nFileNameTemplate, this.templateLabel);
+    return (0, _urlConcat.urlConcat)(this.publicPath, urlpath);
+  }
+
+  getI18nManifest(compilation) {
+    const i18nManifestFile = compilation.assets[this.i18nManifestFileName];
+
+    if (!i18nManifestFile) {
+      return {};
+    }
+
+    const manifest = JSON.parse(i18nManifestFile.source());
+    return manifest;
+  }
+
+  injectI18nURLsToHTML(compilation) {
+    _htmlWebpackPlugin.default.getHooks(compilation).beforeAssetTagGeneration.tapAsync('I18NInjectIntoIndexPlugin', (data, cb) => {
+      const {
+        assets
+      } = data; // Manipulate the content
+
+      const i18nManifest = this.getI18nManifest(compilation);
+      const entryPoint = compilation.entrypoints.get(this.entryPointName);
+      const i18nScriptURLs = entryPoint.chunks.filter(c => !!i18nManifest[c.id]).map(c => this.getI18nFileUrlPath(c, compilation)); // .map(url => getI18nScriptTagObj(url));
+      // .join('');
+      // Tell webpack to move on
+
+      cb(null, newAssign(data, {
+        assets: newAssign(assets, {
+          js: i18nScriptURLs.concat(assets.js)
+        })
+      }));
+    });
+  }
+
+  withI18nSpitHandling(compiler) {
+    compiler.hooks.make.tap('I18NInjectIntoIndexPlugin', compilation => {
+      // let cdns = Object.keys(this.publicPaths);
+      // console.log('compilation.assets', Object.keys(compilation.assets).filter(a => a.includes('i18n')));
+      if (!(0, _hashUtils.hasContentHash)(this.i18nFileNameTemplate)) {
+        this.injectI18nURLsToHTML(compilation);
+        return;
+      }
+
+      _htmlWebpackPlugin.default.getHooks(compilation).beforeEmit.tapAsync('I18NInjectIntoIndexPlugin', (data, cb) => {
+        // Manipulate the content
+        const i18nManifest = this.getI18nManifest(compilation);
+        const entryPoint = compilation.entrypoints.get(this.entryPointName);
+        let i18nAssets = (0, _hashUtils.getShortI18nAssets)(entryPoint.chunks, i18nManifest, this.publicPath);
+        data.html = data.html.replace(new RegExp('<!--I18nInfoToServer(.*?)I18nInfoToServer-->', 'g'), (match, arg) => match.replace(arg, JSON.stringify(i18nAssets))); // Tell webpack to move on
+
+        cb(null, data);
+      });
+    });
+  }
+
+  apply(compiler) {
+    if (i18n.chunkSplitEnable) {
+      this.withI18nSpitHandling(compiler);
+    } else {
+      this.withoutI18nSpitHandling(compiler);
+    }
+  }
+
+  withoutI18nSpitHandling(compiler) {
+    compiler.hooks.emit.tap('I18NInjectIntoIndexPlugin', compilation => {
+      // let cdns = Object.keys(this.publicPaths);
+      if (i18nObj === null) {
+        let i18nFiles = Object.keys(compilation.assets).filter(assert => assert.indexOf(`i18n${_path.default.sep}`) !== -1); //hook for i18n url contains i18n/ may cause problem
+
+        i18nObj = i18nFiles.reduce((res, next) => {
+          let fileName = next.replace(`i18n${_path.default.sep}`, '');
+          let splittedFileName = fileName.split('.');
+          /* if (this.isDevelopment) {
+            res[splittedFileName[0]] = `${this.publicPath}/i18n/${fileName}`;
+          } else {
+            res[splittedFileName[0]] = fileName;
+          } */
+
+          res[splittedFileName[0]] = `${this.publicPath}/i18n/${fileName}`;
+          return res;
+        }, {});
+      }
+
+      let [indexFile] = Object.keys(compilation.assets).filter(filename => /\.html$/g.test(filename));
+
+      if (indexFile) {
+        let source = compilation.assets[indexFile].source();
+        compilation.assets[indexFile] = new _webpackSources.RawSource(source.replace(new RegExp('<!--I18nInfoToServer(.*)I18nInfoToServer-->', 'g'), (match, arg) => match.replace(arg, JSON.stringify(i18nObj))));
+      }
+    });
+  }
+
+}
+
+exports.default = I18NInjectIntoIndexPlugin;

package/lib/plugins/I18nSplitPlugin/I18nDebugPlugin.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _utils = require("./utils");
+
+const pluginName = 'I18nDebugPlugin'; // this plugin  only for debug  related purpose
+
+class I18nDebugPlugin {
+  constructor(jsResourceI18nKeys) {
+    this.jsResourceI18nKeys = jsResourceI18nKeys;
+    this.warnings = [];
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, (compilation, compilationParams) => {
+      // TEMP : only for debugging purpose
+      this.compilation1 = compilation;
+      this.compilationParams = compilationParams.normalModuleFactory;
+    });
+    compiler.hooks.normalModuleFactory.tap(pluginName, factory => {
+      if (!this.compilationParams || this.compilationParams.normalModuleFactory === factory) {
+        return;
+      } // console.log('skiped');
+
+
+      let handler = parser => {
+        parser.hooks.program.tap(pluginName, (ast, commmets) => {
+          const {
+            module
+          } = parser.state; //
+
+          if (!(module && /\.jsx?$/.test(module.resource))) {
+            return;
+          } // i18n grep proper contract regex
+
+
+          let i18nKeys = (0, _utils.collectI18nKeysfromAST)(ast, this.jsResourceI18nKeys);
+          i18nKeys = i18nKeys.concat( // i18n grep proper contract regex
+          (0, _utils.collectI18nKeysfromComments)(commmets, this.jsResourceI18nKeys));
+          i18nKeys.length && this.warnings.push({
+            message: 'skiped i18n keys',
+            reason: 'may be some child compiler',
+            fileName: module.resource,
+            i18nKeys
+          });
+        });
+      };
+
+      factory.hooks.parser.for('javascript/auto').tap(pluginName, handler);
+      factory.hooks.parser.for('javascript/dynamic').tap(pluginName, handler); // factory.hooks.parser.for('javascript/esm').tap(pluginName, handler);
+    });
+  }
+
+}
+
+exports.default = I18nDebugPlugin;

package/lib/plugins/I18nSplitPlugin/I18nDependency.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.I18nDependencyTemplate = exports.I18nDependency = void 0;
+
+var _webpack = require("webpack");
+
+// const webpack = require('webpack');
+class I18nDependency extends _webpack.Dependency {
+  constructor({
+    identifier,
+    i18nKeys
+  }, context, identifierIndex) {
+    super();
+    this.identifier = identifier;
+    this.identifierIndex = identifierIndex;
+    this.i18nKeys = i18nKeys;
+    this.context = context;
+  }
+
+  getResourceIdentifier() {
+    return `i18n-module-${this.identifier}-${this.identifierIndex}`;
+  }
+
+}
+
+exports.I18nDependency = I18nDependency;
+
+class I18nDependencyTemplate {
+  //eslint-disable-next-line no-empty-function
+  apply() {} // apply(dep, source) {
+  // if (typeof dep.range === "number") {
+  // source.insert(0, `/* comment by I18nSplitPlugin , i18n keys = ${JSON.stringify(dep.i18nKeys)} */`);
+  // 	return;
+  // }
+  // source.replace(dep.range[0], dep.range[1] - 1, dep.expression);
+  // }
+
+
+}
+
+exports.I18nDependencyTemplate = I18nDependencyTemplate;