@zohodesk/react-cli 0.0.1-test.148.2 → 1.0.0-exp.1

package/lib/pluginUtils/getProdPlugins.js

@@ -21,22 +21,26 @@ var _miniCssExtractPlugin = _interopRequireDefault(require("mini-css-extract-plu
 
 var _I18nSplitPlugin = _interopRequireDefault(require("../plugins/I18nSplitPlugin"));
 
-var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
-
 var _copyWebpackPlugin = _interopRequireDefault(require("copy-webpack-plugin"));
 
-var _plugins = require("../plugins");
+var _VariableConversionCollector = _interopRequireDefault(require("../plugins/VariableConversionCollector"));
+
+var _SelectorPlugin = _interopRequireDefault(require("../plugins/SelectorPlugin"));
 
-var _common = require("../common");
+var _plugins = require("../plugins");
 
 var _RtlCssPlugin = require("../plugins/RtlSplitPlugin/RtlCssPlugin");
 
+var _configHtmlWebpackPlugins = require("./configHtmlWebpackPlugins");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // eslint-disable-next-line no-unused-vars
-let getProdPlugins = (options, publicPath = '') => {
+const getProdPlugins = (options, publicPath = '') => {
   let {
-    enableChunkHash,
+    enableChunkHash
+  } = options.app;
+  const {
     manifestFileName,
     bundleAnalyze,
     optimize,
@@ -45,6 +49,7 @@ let getProdPlugins = (options, publicPath = '') => {
     enableSMapHook,
     tpFolder,
     folder,
+    mainEntryHtmlFile,
     outputFolder,
     context,
     enableSMap,
@@ -52,14 +57,21 @@ let getProdPlugins = (options, publicPath = '') => {
       mode
     },
     hasShadowDOM,
+    cssVariableReplacementConfig,
+    plugins: pluginObject,
+    // exclude,
+    selectorWeightConfig,
     resourceHints,
     serviceWorker,
-    htmlTemplate: {
-      inject
-    },
+    htmlTemplate,
     tpHashMapping,
-    cdnMapping
+    cdnMapping,
+    crossorigin
   } = options.app;
+  const {
+    inject,
+    minify: minifyHtmlOptions
+  } = htmlTemplate;
   const {
     i18n
   } = options;
@@ -69,15 +81,16 @@ let getProdPlugins = (options, publicPath = '') => {
   const {
     hasEFC: newOptionForEnableEFC,
     nameScope: efcNameSpace,
+    templateFilePath,
     localeAttr: efcLocaleAttr
   } = options.efc;
   const hasEFC = newOptionForEnableEFC || prevOptionForEnableEFC;
   const hashTempalate = enableChunkHash ? '.[chunkhash:20]_' : '';
-  const cssLTRFileNameTempalte = `css/[name]${hashTempalate}.ltr.css`;
+  const cssLTRFileNameTempalte = `css/[name]${hashTempalate}${enableRTLSplit ? '.ltr' : ''}.css`;
   const cssRTLFileNameTempalte = `css/[name]${hashTempalate}.rtl.css`;
-  let isDevelopment = mode === 'prod' || mode === 'dev' || mode === 'dev-no-warn';
+  const isDevelopment = mode === 'prod' || mode === 'dev' || mode === 'dev-no-warn';
   enableChunkHash = !isDevelopment && enableChunkHash;
-  let plugins = [new _caseSensitivePathsWebpackPlugin.default(), new _webpack.default.IgnorePlugin(/^\.\/locale$/, /moment$/), new _webpack.default.DefinePlugin({
+  const pluginsArr = [new _caseSensitivePathsWebpackPlugin.default(), new _webpack.default.IgnorePlugin(/^\.\/locale$/, /moment$/), new _webpack.default.DefinePlugin({
     __TEST__: false,
     __DEVELOPMENT__: false,
     __LOCAL_PRODUCTION__: isDevelopment,
@@ -93,8 +106,9 @@ let getProdPlugins = (options, publicPath = '') => {
   }), new _plugins.ResourceHintsPlugin(), new _plugins.UglifyCSSPlugin()];
 
   if (enableRTLSplit) {
-    plugins.push(new _RtlCssPlugin.RtlCssPlugin({
+    pluginsArr.push(new _RtlCssPlugin.RtlCssPlugin({
       templateLabel: options.css.templateLabel,
+      disableMiniFiySelector: options.css.disableMiniFiySelector,
       dirVarName: options.css.dirVarName,
       // config: {},
       // sourcemap: true,
@@ -103,11 +117,11 @@ let getProdPlugins = (options, publicPath = '') => {
   }
 
   const i18nManifestFileName = 'i18n-manifest.json';
-  /**
-   * NOTE:
-   *  this file name ext .i18n.js added
-   *  Because, in service worker they maintain cache as file name based
-   *  So, to make differce we added .i18n.js ext.
+  /**
+   * NOTE:
+   *  this file name ext .i18n.js added
+   *  Because, in service worker they maintain cache as file name based
+   *  So, to make differce we added .i18n.js ext.
    */
 
   const i18nFileNameTemplate = 'i18n-chunk/[locale]/[name].[chunkhash].i18n.js';
@@ -115,7 +129,7 @@ let getProdPlugins = (options, publicPath = '') => {
   // const  i18nFileNameTemplate = 'i18n-chunk/[locale]/[name]_.js';
 
   if (i18n.chunkSplitEnable) {
-    plugins.push(new _I18nSplitPlugin.default({
+    pluginsArr.push(new _I18nSplitPlugin.default({
       jsResource: i18n.jsResource,
       localeVarName: i18n.localeVarName,
       jsonpFunc: i18n.jsonpFunc,
@@ -127,10 +141,10 @@ let getProdPlugins = (options, publicPath = '') => {
       propertiesFolder: i18n.propertiesFolder
     }));
   } else {
-    let i18nPath = _path.default.join(process.cwd(), context, 'i18n');
+    const i18nPath = _path.default.join(process.cwd(), context, 'i18n');
 
     if (_fs.default.existsSync(i18nPath)) {
-      plugins.push(new _copyWebpackPlugin.default([{
+      pluginsArr.push(new _copyWebpackPlugin.default([{
         from: `${i18nPath}/`,
         to: enableChunkHash ? './i18n/[name].[hash:20]_.[ext]' : './i18n/[name]_.[ext]',
         toType: 'template'
@@ -138,27 +152,27 @@ let getProdPlugins = (options, publicPath = '') => {
     }
   }
 
-  tpFolder && plugins.push(new _copyWebpackPlugin.default([{
+  tpFolder && pluginsArr.push(new _copyWebpackPlugin.default([{
     from: `${_path.default.join(process.cwd(), context, tpFolder)}/`,
     to: `./${tpFolder}/`,
     toType: 'dir'
   }]));
+  (0, _configHtmlWebpackPlugins.configHtmlWebpackPlugins)(pluginsArr, {
+    enableChunkHash,
+    folder,
+    mainEntryHtmlFile,
+    inject,
+    minify: minifyHtmlOptions,
+    crossorigin,
+    hasEFC
+  });
 
   if (hasEFC) {
-    plugins.push(new _htmlWebpackPlugin.default({
-      chunksSortMode: 'none',
-      filename: enableChunkHash ? 'index.[templatehash:20].html' : 'index.html',
-      template: _path.default.join(process.cwd(), folder, 'index.html'),
-      excludeChunks: ['efc', 'widget'],
-      minify: false,
-      templateParameters: _common.templateParameters,
-      scriptLoading: 'defer',
-      inject: inject
-    }));
-    plugins.push(new _plugins.EFCPlugin({
+    pluginsArr.push(new _plugins.EFCPlugin({
       isDevelopment,
       serverUrl: publicPath,
       i18nFileNameTemplate,
+      templateFilePath,
       i18nManifestFileName,
       entryPointName: 'efc',
       // outputFile: 'zohodesk-efc-sdk-latest.js',
@@ -166,19 +180,9 @@ let getProdPlugins = (options, publicPath = '') => {
       localeAttr: efcLocaleAttr,
       cdnVariableName: cdnMapping.isCdnEnabled ? cdnMapping.variableName : null
     }));
-  } else {
-    plugins.push(new _htmlWebpackPlugin.default({
-      chunksSortMode: 'none',
-      filename: enableChunkHash ? 'index.[templatehash:20].html' : 'index.html',
-      template: _path.default.join(process.cwd(), folder, 'index.html'),
-      minify: false,
-      templateParameters: _common.templateParameters,
-      scriptLoading: 'defer',
-      inject: inject
-    }));
   }
 
-  plugins.push(new _plugins.I18NInjectIntoIndexPlugin({
+  pluginsArr.push(new _plugins.I18NInjectIntoIndexPlugin({
     // Because we  will handle cdn url in CdnChangePlugin
     publicPath: cdnMapping.isCdnEnabled ? '' : i18nPublicPath,
     isDevelopment,
@@ -189,10 +193,10 @@ let getProdPlugins = (options, publicPath = '') => {
   }));
 
   if (publicPaths && !isDevelopment && !cdnMapping.isCdnEnabled) {
-    let {
+    const {
       callback
     } = publicPaths;
-    plugins.push(callback ? new _plugins.PublicPathCallbackPlugin({
+    pluginsArr.push(callback ? new _plugins.PublicPathCallbackPlugin({
       callback
     }) : new _plugins.PublicPathChangePlugin({
       publicPaths,
@@ -201,24 +205,24 @@ let getProdPlugins = (options, publicPath = '') => {
   }
 
   if (cdnMapping.isCdnEnabled) {
-    plugins.push(new _plugins.CdnChangePlugin(cdnMapping));
+    pluginsArr.push(new _plugins.CdnChangePlugin(cdnMapping));
   }
 
-  plugins.push(new _lodashWebpackPlugin.default({
+  pluginsArr.push(new _lodashWebpackPlugin.default({
     collections: true,
     shorthands: true
   }));
-  hasShadowDOM && plugins.push(new _plugins.ShadowDOMSupportPlugin());
+  hasShadowDOM && pluginsArr.push(new _plugins.ShadowDOMSupportPlugin());
 
   if (!isDevelopment) {
-    enableSMap && enableSMapHook && plugins.push(new _plugins.SourceMapHookPlugin());
-    optimize && plugins.push(new _plugins.OptimizeJSPlugin());
-    plugins.push(new _plugins.ManifestPlugin({
+    enableSMap && enableSMapHook && pluginsArr.push(new _plugins.SourceMapHookPlugin());
+    optimize && pluginsArr.push(new _plugins.OptimizeJSPlugin());
+    pluginsArr.push(new _plugins.ManifestPlugin({
       fileName: manifestFileName
     }));
 
     if (bundleAnalyze) {
-      plugins.push(new _webpackBundleAnalyzer.BundleAnalyzerPlugin({
+      pluginsArr.push(new _webpackBundleAnalyzer.BundleAnalyzerPlugin({
         analyzerMode: 'static',
         generateStatsFile: true,
         openAnalyzer: false,
@@ -235,7 +239,7 @@ let getProdPlugins = (options, publicPath = '') => {
     }
 
     if (tpHashMapping && tpHashMapping.length > 0) {
-      plugins.push(new _plugins.TPHashMappingPlugin({
+      pluginsArr.push(new _plugins.TPHashMappingPlugin({
         fileMappings: tpHashMapping,
         tpFolder: `${_path.default.join(process.cwd(), context, tpFolder)}/`
       }));
@@ -243,7 +247,7 @@ let getProdPlugins = (options, publicPath = '') => {
   }
 
   if (!isDevelopment && serviceWorker.enableSw) {
-    let {
+    const {
       filePath,
       fileName = 'sw.js',
       exitPath = '/',
@@ -254,7 +258,7 @@ let getProdPlugins = (options, publicPath = '') => {
       throw new Error('File Path required for service worker plugin');
     }
 
-    plugins.push(new _plugins.ServiceWorkerPlugin({
+    pluginsArr.push(new _plugins.ServiceWorkerPlugin({
       filePath: _path.default.join(process.cwd(), filePath),
       i18nFileNameTemplate,
       fileName: fileName,
@@ -264,7 +268,20 @@ let getProdPlugins = (options, publicPath = '') => {
     }));
   }
 
-  return plugins;
+  if (pluginObject.cssVariableReplacement) {
+    pluginsArr.push(new _VariableConversionCollector.default({
+      cssVariableReplacementConfig
+    }));
+  }
+
+  if (pluginObject.selectorWeight) {
+    pluginsArr.push(new _SelectorPlugin.default({
+      selectorWeightConfig
+    }));
+  } // plugins.push(new VariableConversionCollector({}));
+
+
+  return pluginsArr;
 };
 
 var _default = getProdPlugins;

package/lib/pluginUtils/index.js

@@ -9,34 +9,28 @@ Object.defineProperty(exports, "getDevPlugins", {
     return _getDevPlugins.default;
   }
 });
-Object.defineProperty(exports, "getProdPlugins", {
-  enumerable: true,
-  get: function () {
-    return _getProdPlugins.default;
-  }
-});
 Object.defineProperty(exports, "getDocsPlugins", {
   enumerable: true,
   get: function () {
     return _getDocsPlugins.default;
   }
 });
-Object.defineProperty(exports, "getServerPlugins", {
+Object.defineProperty(exports, "getLibraryPlugins", {
   enumerable: true,
   get: function () {
-    return _getServerPlugins.default;
+    return _getLibraryPlugins.default;
   }
 });
-Object.defineProperty(exports, "getLibraryPlugins", {
+Object.defineProperty(exports, "getProdPlugins", {
   enumerable: true,
   get: function () {
-    return _getLibraryPlugins.default;
+    return _getProdPlugins.default;
   }
 });
-Object.defineProperty(exports, "getUMDComponentPlugins", {
+Object.defineProperty(exports, "getServerPlugins", {
   enumerable: true,
   get: function () {
-    return _getUMDComponentPlugins.default;
+    return _getServerPlugins.default;
   }
 });
 Object.defineProperty(exports, "getUMDCSSPlugins", {
@@ -45,6 +39,12 @@ Object.defineProperty(exports, "getUMDCSSPlugins", {
     return _getUMDCSSPlugins.default;
   }
 });
+Object.defineProperty(exports, "getUMDComponentPlugins", {
+  enumerable: true,
+  get: function () {
+    return _getUMDComponentPlugins.default;
+  }
+});
 
 var _getDevPlugins = _interopRequireDefault(require("./getDevPlugins"));
 

package/lib/plugins/CdnChangePlugin.js

@@ -7,11 +7,19 @@ exports.default = void 0;
 
 var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
 
+var _utils = require("../utils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const MODULE_TYPE = 'css/mini-extract';
 
-const isI18nFile = url => url.endsWith(".i18n.js");
+const isI18nFile = url => url.endsWith('.i18n.js');
+
+const {
+  app: {
+    enableSMap
+  }
+} = (0, _utils.getOptions)();
 
 class CdnChangePlugin {
   constructor(options) {
@@ -50,7 +58,13 @@ class CdnChangePlugin {
       _htmlWebpackPlugin.default.getHooks(compilation).beforeAssetTagGeneration.tapAsync('CdnChangePlugin', (data, cb) => {
         data.assets = Object.assign({}, data.assets, {
           css: data.assets.css.map(css => `${this.cssTemplate}${css}`),
-          js: data.assets.js.map(js => `${isI18nFile(js) ? this.i18nTemplate : this.jsTemplate}${js}`)
+          js: data.assets.js.map(js => {
+            if (enableSMap && !isI18nFile(js)) {
+              js = js.replace('js/', `{{--js-smap}}js/`); //eslint-disable-line
+            }
+
+            return `${isI18nFile(js) ? this.i18nTemplate : this.jsTemplate}${js}`;
+          })
         });
         cb(null, data);
       });

package/lib/plugins/EFCPlugin.js

@@ -17,6 +17,8 @@ var _I18nKeysIdentifer = _interopRequireDefault(require("./I18nSplitPlugin/I18nK
 
 var _replaceCssDirTemplate = require("./RtlSplitPlugin/replaceCssDirTemplate");
 
+var _EFCTemplatePlugin = _interopRequireDefault(require("./EFCTemplatePlugin"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import { getShortI18nAssets } from './I18nSplitPlugin/utils/hashUtils';
@@ -34,24 +36,28 @@ const {
   efc: efcOptios
 } = cliOptions;
 const {
-  createSDkFile
+  createSDkFile,
+  cdnStatement
 } = efcOptios;
 
 class EFCPlugin {
   constructor(options = {}) {
     this.isDevelopment = options.isDevelopment;
+    this.templateFilePath = options.templateFilePath;
     this.serverUrl = options.serverUrl;
-    this.i18nFileNameTemplate = options.i18nFileNameTemplate; // this.i18nManifestFileName = options.i18nManifestFileName;
-
-    this.options = Object.assign({}, options); // this.options.i18nManifestFileName = options.i18nManifestFileName;
+    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 || 'efc-locale';
-    const cssDirAttr = this.options.cssDirAttr || 'efc-css-dir';
-    const localeDefaultValue = this.options.localeAttr || 'en_US';
-    const cssDirDefaultValue = this.options.cssDirAttr || 'ltr';
+    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,
@@ -64,7 +70,7 @@ class EFCPlugin {
         let dirEle = document.querySelector('[${cssDirAttr}]');
         return dirEle && dirEle.getAttribute('${cssDirAttr}') || '${cssDirDefaultValue}';
       })();`;
-  } // NOTE: this logic may be needed for contenthash cases
+  } // NOTE: this logic may be needed for i18n splited file name with contenthash cases
   // getI18nManifest(compilation) {
   //   const i18nManifestFile =
   //     compilation.assets[this.options.i18nManifestFileName];
@@ -123,20 +129,35 @@ class EFCPlugin {
   ${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)}
-  };
+
+  function getAssetUrl(ext) {
+    ${cdnStatement ? `
+    return (() => {
+      let fu = (${cdnStatement});
+      return typeof fu === "function" ? fu(ext) : fu;
+    })();` : ''}
+
+    ${publicPaths.callback ? `return (${publicPaths.callback})(ext)` : ''}
+    
+    let assetURLs = {
+      //hook
+      js: ${JSON.stringify(jsPath || serverUrl)},
+      css: ${JSON.stringify(cssPath || serverUrl)},
+      i18n: ${JSON.stringify(i18nJsPath || serverUrl)}
+    };
+
+    return assetURLs[ext];
+
+  }
+  
 
   window.desk_urls={}
-  window.desk_urls.staticDomain = 'https:' + assetURLs.js + '/';
+  window.desk_urls.staticDomain = 'https:' + getAssetUrl('js') + '/';
   if (prod && cdnVariableName) {
-    window["${cdnVariableName}"] = 'https:' + assetURLs.css + '/';
+    window["${cdnVariableName}"] = 'https:' + getAssetUrl('css') + '/';
   }
 
-  let initalI18nAssets = ${initalI18nAssets}.map(urlpath => "${i18nJsPath}/"+ urlpath);
+  let initalI18nAssets = ${initalI18nAssets};
   let initialAssets = initalI18nAssets.concat(${JSON.stringify(enableRTLSplit ? filteredInitialFiles.map(filePath => (0, _replaceCssDirTemplate.replaceCssDirTemplate)(filePath, cssDirTemplate)) : filteredInitialFiles)});
 
   let loadAsset = (id, type, url) => {
@@ -148,12 +169,12 @@ class EFCPlugin {
       switch(type) {
         case 'script':
         case 'i18n':
-          el.src = (type === 'i18n'? assetURLs.i18n : assetURLs.js)+'/'+url
+          el.src = (type === 'i18n'? getAssetUrl('i18n') : getAssetUrl('js'))+'/'+url
           el.defer = 'defer';
           document.body.appendChild(el);
           break;
         case 'link':
-          el.href = assetURLs.css+'/'+url${enableRTLSplit ? `.replace(${JSON.stringify(cssDirTemplate)}, cssDir)` : ''}
+          el.href = getAssetUrl('css')+'/'+url${enableRTLSplit ? `.replace(${JSON.stringify(cssDirTemplate)}, cssDir)` : ''}
           el.rel = 'stylesheet';
           document.head.appendChild(el);
           break;
@@ -184,6 +205,17 @@ class EFCPlugin {
   apply(compiler) {
     if (!createSDkFile) {
       return;
+    } //console.log('this.templateFilePath', this.templateFilePath, this.options);
+
+
+    if (this.templateFilePath) {
+      new _EFCTemplatePlugin.default({
+        templateFilePath: this.templateFilePath,
+        publicPath: this.serverUrl,
+        i18nFileNameTemplate: this.i18nFileNameTemplate,
+        entryPointName: this.options.entryPointName
+      }).apply(compiler);
+      return;
     }
 
     compiler.hooks.emit.tap('EFCPlugin', compilation => {

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/EFCTemplatePlugin.js

@@ -0,0 +1,151 @@
+"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 _fs = require("fs");
+
+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 {
+  i18n: {
+    chunkSplitEnable
+  },
+  css: {
+    enableRTLSplit
+  },
+  efc: efcOptios
+} = cliOptions;
+const {
+  createSDkFile
+} = efcOptios; // for smap relate changes
+// CdnChangePlugin
+// SourceMapHookPlugin
+
+class EFCTemplatePlugin {
+  constructor(options = {}) {
+    // console.log(' templateFilePath ', process.cwd(), options.templateFilePath, templateFilePath);
+    this.templateFilePath = _path.default.join(process.cwd(), options.templateFilePath); // console.log(' templateFilePath ', this.templateFilePath);
+
+    this.i18nFileNameTemplate = options.i18nFileNameTemplate;
+    this.publicPath = options.publicPath; // 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.entryPointName = options.entryPointName || 'efc';
+    this.outputFile = efcOptios.outputFile.replace('[version]', efcOptios.version);
+  } // 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) {
+    // NOTE: we have used lang variable inside
+    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))`;
+  }
+
+  templateReplacer(entryPoint, compilation) {
+    const cssDirTemplate = '@dir@'; // const i18nManifest = this.getI18nManifest(compilation);
+
+    const initialFiles = entryPoint.getFiles();
+    const filteredInitialFiles = initialFiles.filter(file => /\.(css|js)$/.test(file));
+    const initialJsFiles = filteredInitialFiles.filter(file => /\.js$/.test(file));
+    let initialCssFiles = filteredInitialFiles.filter(file => /\.css$/.test(file));
+
+    if (enableRTLSplit) {
+      initialCssFiles = initialCssFiles.map(filePath => (0, _replaceCssDirTemplate.replaceCssDirTemplate)(filePath, cssDirTemplate));
+    } // const i18nAssets = getShortI18nAssets(
+    //   entryPoint.chunks,
+    //   i18nManifest,
+    //   '' // i18nJsPath
+    // );
+
+
+    const initalI18nAssets = this.getI18nAssetsStr(entryPoint, compilation, '' // i18nJsPath
+    );
+    let templateStr = (0, _fs.readFileSync)(this.templateFilePath).toString();
+    return templateStr.replace('((\'getInitalAssets\'))', `function getInitalAssets(assetsType, lang) {
+          if (assetsType === "js") {
+            return ${JSON.stringify(initialJsFiles)}
+          }
+          if (assetsType === "css") {
+            return ${JSON.stringify(initialCssFiles)}
+          }
+          if (assetsType === "i18n") {
+            return ${initalI18nAssets};
+          }
+          return  [];
+        }`).replace('((\'@dir@\'))', '\'@dir@\'').replace('((\'publicPath\'))', this.publicPath).replace('((\'@locale@\'))', '\'@locale@\'');
+  }
+
+  apply(compiler) {
+    if (!createSDkFile) {
+      return;
+    }
+
+    compiler.hooks.emit.tap('EFCTemplatePlugin', compilation => {
+      const {
+        entryPointName,
+        outputFile
+      } = this;
+      const entryPoint = compilation.entrypoints.get(entryPointName);
+
+      if (!entryPoint) {
+        return;
+      }
+
+      if (!(0, _fs.existsSync)(this.templateFilePath)) {
+        console.error(`EFC Template file not exists ${this.templateFilePath}`);
+        return;
+      }
+
+      const source = new _webpackSources.RawSource(this.templateReplacer(entryPoint, compilation));
+      compilation.assets[outputFile] = source; // console.log('EFCTemplatePlugin working');
+      // eslint-disable-next-line no-console
+
+      console.log('The EFC embedded code was created successfully..!!!');
+    });
+  }
+
+}
+
+exports.default = EFCTemplatePlugin;