@zohodesk/client_build_tool 0.0.1

package/lib/shared/bundler/webpack/common/nameTemplates.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isI18nFile = void 0;
+exports.nameTemplates = nameTemplates;
+
+var _modeUtils = require("./modeUtils");
+
+// nameTemplate.js
+// NOTE: these below code can be done in js,
+//   we did copy paste in order to avoid unnecessary confusion
+// NOTE: array[0] is dev mode file templates and array[1] is prod mode file templates
+const templates = {
+  html: ['index.html', 'index.[contenthash].html'],
+  js: ['js/[name].js', 'js/[name].[contenthash].js'],
+  chunkjs: ['js-chunks/[name].js', 'js-chunks/[name].[contenthash].js'],
+  i18njs: ['i18n-chunks/[locale]/[name].i18n.js', 'i18n-chunks/[locale]/[name].[chunkhash].i18n.js'],
+  i18nchunkjs: ['i18n-chunks/[locale]/[name].i18n.js', // 'i18n-chunks/[locale]/[name].[chunkhash].i18n.js'
+  'i18n-chunks/[locale]/[name].[contenthash].i18n.js'],
+  i18nmanifest: ['i18n-manifest.json', 'i18n-manifest.json'],
+  workerjs: ['js/[name].js', 'js/[name].[contenthash].js'],
+  css: ['css/[name].css', 'css/[name].[contenthash].css'],
+
+  /**
+   * NOTE: when you change (cssdir) this line it  will have affect on Below files will be affected
+   *   custom_plugins/RtlSplitPlugin/*
+   *   pluginConfigs/configMiniCSSExtractPlugin.js
+   *   pluginConfigs/configRtlCssPlugin.js
+   *  */
+  cssdir: ['css/[name].[dir].css', 'css/[name].[contenthash].[dir].css'],
+  image: ['images/[name][ext]', 'images/[name].[contenthash][ext]'],
+  font: ['fonts/[name][ext]', 'fonts/[name].[contenthash][ext]'],
+  svg: ['fonts/[name][ext]', 'fonts/[name].[contenthash][ext]'],
+  audio: ['fonts/[name][ext]', 'fonts/[name].[contenthash][ext]'],
+  video: ['videos/[name][ext]', 'videos/[name].[contenthash][ext]']
+};
+
+function createNameTemplate(name, useHash) {
+  // const ext = `${useHash ? '.[hash:20]' : ''}[ext]`;
+  return useHash ? name[1] : name[0];
+}
+
+const devModeContentHashAllowedTypes = {
+  image: true,
+  font: true,
+  svg: true,
+  audio: true,
+  video: true
+};
+
+function nameTemplates(type, options) {
+  const {
+    enableChunkHash,
+    mode
+  } = options;
+  const templateName = templates[type];
+
+  if (!templateName) {
+    throw Error(`specified type not valid Type: ${type}`);
+  }
+
+  let useHash = enableChunkHash;
+
+  if ((0, _modeUtils.isDevelopmentMode)(mode) && enableChunkHash && !devModeContentHashAllowedTypes[type]) {
+    useHash = false;
+  }
+
+  return createNameTemplate(templateName, useHash);
+} // export function cssDirNameTemplate(dir, options) {
+//   return nameTemplates('cssdir', options).replace(/\[dir\]/g, dir);
+// }
+
+
+const isI18nFile = url => url.endsWith('.i18n.js');
+
+exports.isI18nFile = isI18nFile;

package/lib/shared/bundler/webpack/common/resourceBasedPublicPath.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.publicPathAsExpression = publicPathAsExpression;
+exports.resourceBasedPublicPath = resourceBasedPublicPath;
+
+// const  publicPaths = {
+// };
+function resourceBasedPublicPath(resoruceType, options) {
+  return options.publicPath;
+}
+
+function publicPathAsExpression(resoruceType, options) {
+  if (resoruceType === 'i18n') {
+    return options.i18nChunkSplit.localeVarName;
+  }
+
+  return JSON.stringify(options.publicPath);
+}

package/lib/shared/bundler/webpack/configCustomLoaders.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configCustomLoaders = configCustomLoaders;
+
+function configCustomLoaders(options) {
+  return options.customLoaders;
+}

package/lib/shared/bundler/webpack/cssLoaders.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cssLoaders = cssLoaders;
+
+var _getCSSLoaders = require("./getCSSLoaders");
+
+function cssLoaders(options) {
+  return [{
+    test: /\.css$/,
+    // exclude: /\.module\.css$/,
+    use: (0, _getCSSLoaders.getCSSLoaders)(options)
+  }];
+}

package/lib/shared/bundler/webpack/custom_plugins/CdnChangePlugin.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
+
+var _nameTemplates = require("../common/nameTemplates");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import { RuntimeGlobals, RuntimeModule } from 'webpack';
+// import { Template } from 'webpack';
+const pluginName = 'CdnChangePlugin'; // const MODULE_TYPE = 'css/mini-extract';
+// class CdnChangeRuntimePlugin extends RuntimeModule {
+//   constructor(compiler, { variableName }) {
+//     super('cdn loading', 10);
+//     this.variableName = variableName;
+//   }
+//   generate() {
+//     return `${RuntimeGlobals.getChunkCssFilename} = function(chunkId) {
+//       const cssCdnUrl = window[${this.variableName}] || chunkId;
+//       return cssCdnUrl;
+//     }`;
+//   }
+// }
+
+class CdnChangePlugin {
+  constructor(options) {
+    this.createSeparateSMap = options.createSeparateSMap;
+    this.i18nTemplate = options.i18nTemplate || '{{__I18N_CDN__}}';
+    this.variableName = options.variableName || '__CSS_CDN__';
+    this.cssTemplate = options.cssTemplate || '{{__CSS_CDN__}}';
+    this.jsTemplate = options.jsTemplate || '{{__JS_CDN__}}';
+  }
+
+  apply(compiler) {
+    // compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+    //   const enabledChunks = new WeakSet();
+    //   const handler = (entryRuntimeChunk, set) => {
+    //     if (enabledChunks.has(entryRuntimeChunk)) {
+    //       return;
+    //     }
+    //     enabledChunks.add(entryRuntimeChunk);
+    //     set.add(RuntimeGlobals.getFullHash);
+    //     set.add(RuntimeGlobals.getChunkCssFilename);
+    //     compilation.addRuntimeModule(
+    //       entryRuntimeChunk,
+    //       new CdnChangeRuntimePlugin(set, {
+    //         compiler,
+    //         variableName: this.variableName
+    //       })
+    //     );
+    //   };
+    //   compilation.hooks.runtimeRequirementInTree
+    //     .for(RuntimeGlobals.ensureChunkHandlers)
+    //     .tap(pluginName, handler);
+    // });
+    compiler.hooks.compilation.tap(pluginName, compilation => {
+      _htmlWebpackPlugin.default.getHooks(compilation).beforeAssetTagGeneration.tap(pluginName, (data, cb) => {
+        const {
+          createSeparateSMap
+        } = this; // eslint-disable-next-line no-param-reassign
+
+        data.assets = { ...data.assets,
+          css: data.assets.css.map(css => `${this.cssTemplate}${css}`),
+          js: data.assets.js.map(js => {
+            if (createSeparateSMap && !(0, _nameTemplates.isI18nFile)(js)) {
+              js = js.replace('js/', `{{--js-smap}}js/`); //eslint-disable-line
+            }
+
+            return `${(0, _nameTemplates.isI18nFile)(js) ? this.i18nTemplate : this.jsTemplate}${js}`;
+          })
+        };
+        cb && cb(null, data);
+      });
+    });
+  }
+
+}
+
+var _default = CdnChangePlugin; // Cdn Change Plugin for runtime chunks???
+
+/**
+ * the filename of the script part of the chunk
+ */
+// exports.getChunkScriptFilename = "__webpack_require__.u";
+// /**
+//  * the filename of the css part of the chunk
+//  */
+// exports.getChunkCssFilename = "__webpack_require__.k";
+
+exports.default = _default;

package/lib/shared/bundler/webpack/custom_plugins/EFCTemplatePlugin.js

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EFCTemplatePlugin = void 0;
+
+var _fs = require("fs");
+
+var _logger = require("../../../../logger");
+
+var _LocaleChunkAssetsStore = require("./I18nSplitPlugin/LocaleChunkAssetsStore");
+
+var _constants = require("../../../constants");
+
+var _getInitialAssetsFuncTemplate = require("./getInitialAssetsFuncTemplate");
+
+const INITIAL_ASSETS_TEMPLATE = '// <--getInitialAssets-->';
+const PUBLIC_PATH_TEMPLATE = '"<--publicPath-->"';
+const pluginName = 'EFCTemplatePlugin';
+
+class EFCTemplatePlugin {
+  constructor(options = {}) {
+    const {
+      i18nFileNameTemplate,
+      entryPointName,
+      outputFile,
+      version,
+      publicPath,
+      templateFilePath
+    } = options;
+    this.options = options;
+    this.templateFilePath = (0, _constants.joinWithAppPath)(templateFilePath);
+    this.i18nFileNameTemplate = i18nFileNameTemplate;
+    this.publicPath = publicPath; // NOTE: this logic may be needed for i18n splitted file name with contenthash cases
+    // this.i18nManifestFileName = options.i18nManifestFileName;
+    // IMPORTANT: here we merging options from package.json  and options via constructor
+    // So when debugging consider this as well
+    // this.options = Object.assign({}, efcOptions, options);
+
+    this.entryPointName = entryPointName || 'efc';
+    this.outputFile = outputFile.replace('[version]', version);
+  } // NOTE: this logic may be needed for i18n splitted 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 {};
+  // }
+  // eslint-disable-next-line class-methods-use-this
+
+
+  templateReplacer(entryPoint, compilation) {
+    const {
+      enableRTLSplit
+    } = this.options; // const i18nManifest = this.getI18nManifest(compilation);
+
+    const initialAssetsFuncTemplate = (0, _getInitialAssetsFuncTemplate.getInitialAssetsFuncTemplate)({
+      entryPoint,
+      compilation,
+      enableRTLSplit,
+      i18nStore: this.store,
+      chunkSplitEnable: this.options.chunkSplitEnable,
+      i18nFileNameTemplate: this.i18nFileNameTemplate,
+      functionName: 'getInitialAssets'
+    });
+    const templateStr = (0, _fs.readFileSync)(this.templateFilePath).toString();
+    return templateStr.replace(INITIAL_ASSETS_TEMPLATE, initialAssetsFuncTemplate).replace(PUBLIC_PATH_TEMPLATE, this.publicPath);
+  }
+
+  apply(compiler) {
+    const {
+      RawSource
+    } = compiler.webpack.sources;
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      // Get store for cache
+      this.store = (0, _LocaleChunkAssetsStore.getLocaleChunkAssetsStore)(compilation);
+    });
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      compilation.hooks.processAssets.tap({
+        name: pluginName,
+        stage: compilation.PROCESS_ASSETS_STAGE_DERIVED
+      }, () => {
+        const {
+          entryPointName,
+          outputFile
+        } = this;
+        const entryPoint = compilation.entrypoints.get(entryPointName);
+
+        if (!entryPoint) {
+          return;
+        }
+
+        if (!(0, _fs.existsSync)(this.templateFilePath)) {
+          (0, _logger.errorLogger)(`EFC Template file not exists ${this.templateFilePath}`);
+          return;
+        }
+
+        const source = new RawSource(this.templateReplacer(entryPoint, compilation));
+        compilation.emitAsset(outputFile, source);
+        (0, _logger.messageLogger)('The EFC embedded code was created successfully..!!!');
+        (0, _logger.messageLogger)(`The EFC SDK File name ${outputFile}`);
+      });
+    });
+  }
+
+}
+
+exports.EFCTemplatePlugin = EFCTemplatePlugin;

package/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/ContributionGuide.md

@@ -0,0 +1,11 @@
+# I18n Split Plugin ContributionGuide
+we have modifyed mini-css-extract-plugin to sute our needs of i18n related extraction and downloading.
+So In future may be when we need to update mini-css-extract-plugin Kindly cross check with this I18n Plugin as well.
+
+Even not breaking change, may be just performacne update or feature update. addeding that to this plugin will be use full. Kindly consider it.
+
+## Thing we Ignored 
+ * we use webpack ast hook for adding I18nDependency. So we did not need `loader.js`
+ * we ignore order of import in single chunk since I18n going to be download as object.  
+      we did not need it.
+ * 

package/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/I18nFilesEmitPlugin.js

@@ -0,0 +1,172 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.I18nFilesEmitPlugin = void 0;
+
+var _webpack = require("webpack");
+
+var _createHash = require("./createHash");
+
+var _pathCreator = require("./pathCreator");
+
+var _propertiesUtils = require("./utils/propertiesUtils");
+
+var _LocaleChunkAssetsStore = require("./LocaleChunkAssetsStore");
+
+/* eslint-disable no-restricted-syntax */
+const pluginName = 'I18nFilesEmitPlugin';
+const {
+  RawSource
+} = _webpack.sources;
+
+class I18nFilesEmitPlugin {
+  constructor(options) {
+    this.options = options; // this.options = {
+    //   locales: options.locales,
+    //   chunkFilename: options.chunkFilename,
+    //   filename: options.filename,
+    //   allI18nObject: options.allI18nObject,
+    //   jsonpFunc: options.jsonpFunc
+    // };
+  }
+
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      // Get store for cache
+      this.store = (0, _LocaleChunkAssetsStore.getLocaleChunkAssetsStore)(compilation);
+      const i18nStore = this.store;
+      compilation.hooks.beforeHash.tap(pluginName, () => {
+        i18nStore.clear();
+        this.createAndStoreFileContentForEveryChunkAndLocale(compilation);
+      });
+      compilation.hooks.chunkHash.tap(pluginName, (chunk, hash) => {
+        this.updateChunkHashForEveryLocale(chunk, hash);
+      });
+      compilation.hooks.contentHash.tap(pluginName, chunk => {
+        if (!i18nStore.isChunkHasI18n(chunk.id)) {
+          return;
+        }
+
+        this.emitI18nFileForEveryLocale(chunk, compilation);
+      });
+    });
+  }
+
+  createAndStoreFileContentForEveryChunkAndLocale(compilation) {
+    const {
+      chunks
+    } = compilation;
+    const {
+      locales
+    } = this.options;
+    const i18nStore = this.store;
+
+    for (const chunk of chunks) {
+      const i18nKeys = i18nStore.getI18nKeysForChunk(chunk);
+
+      if (!i18nKeys.length) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+
+      for (const locale of locales) {
+        const content = this.getI18nChunkFileContent(i18nKeys, locale);
+        i18nStore.storeData(chunk.id, locale, {
+          content
+        });
+      }
+    }
+  }
+
+  updateChunkHashForEveryLocale(chunk, hash) {
+    const {
+      locales
+    } = this.options;
+    const i18nStore = this.store;
+
+    if (i18nStore.isChunkHasI18n(chunk.id)) {
+      for (const loc of locales) {
+        const content = i18nStore.getContent(chunk.id, loc);
+        hash.update(content);
+      }
+    }
+  }
+
+  emitI18nFileForEveryLocale(chunk, compilation) {
+    const i18nStore = this.store;
+    const {
+      locales,
+      chunkFilename,
+      filename
+    } = this.options;
+    const fileNameTemplate = chunk.canBeInitial() ? filename : chunkFilename; // const { chunks } = compilation;
+
+    for (const locale of locales) {
+      const content = i18nStore.getContent(chunk.id, locale);
+      const contentHash = (0, _createHash.createHash)({
+        outputOptions: compilation.outputOptions,
+        content
+      });
+      const {
+        filename
+      } = I18nFilesEmitPlugin.createFilenameWithHash({
+        compilation,
+        contentHash,
+        fileNameTemplate,
+        chunk,
+        locale
+      });
+      i18nStore.storeData(chunk.id, locale, {
+        contentHash,
+        filename
+      });
+      compilation.emitAsset(filename, new RawSource(content));
+    }
+  }
+
+  static createFilenameWithHash({
+    compilation,
+    fileNameTemplate,
+    chunk,
+    locale,
+    contentHash
+  }) {
+    const fileName = fileNameTemplate.replaceAll('[locale]', locale);
+    const filename = (0, _pathCreator.pathCreator)(fileName, compilation, {
+      hash: compilation.hash,
+      chunkId: chunk.id,
+      chunkHash: chunk.hash,
+      contentHash
+    });
+    return {
+      contentHash,
+      filename
+    };
+  }
+
+  getI18nContentForkeys(i18nKeys, locale) {
+    const {
+      allI18nObject
+    } = this.options;
+    const data = {};
+
+    for (const key of i18nKeys) {
+      data[key] = allI18nObject[locale][key];
+    }
+
+    return data;
+  }
+
+  getI18nChunkFileContent(i18nKeys, loc) {
+    const {
+      jsonpFunc
+    } = this.options;
+    const data = this.getI18nContentForkeys(i18nKeys, loc);
+    return `${jsonpFunc}(${(0, _propertiesUtils.jsonToString)(data)})`;
+  }
+
+}
+
+exports.I18nFilesEmitPlugin = I18nFilesEmitPlugin;

package/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/I18nKeysIdentifer.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _utils = require("./utils");
+
+var _LocaleChunkAssetsStore = require("./LocaleChunkAssetsStore");
+
+/* eslint-disable max-classes-per-file */
+const pluginName = 'I18nKeysIdentifier';
+/**
+ * this plugin search the i18 keys and make it as I18nDependency.
+ * how it works?
+ *  this plugin get jsResourceI18nKeys in constructor.
+ *  we walk thought the js files AST
+ *      if any string literal in that AST is in jsResourceI18nKeys then  we consider that string as I18n key
+ *  after the walk of AST we get some I18n keys
+ *  then we make it as I18nDependency.
+ */
+
+class I18nKeysIdentifer {
+  constructor({
+    jsResourceI18nKeys
+  }) {
+    this.jsResourceI18nKeys = jsResourceI18nKeys;
+    this.store = new _LocaleChunkAssetsStore.LocaleChunkAssetsStore();
+  }
+
+  apply(compiler) {
+    // const { splitChunks } = compiler.options.optimization;
+    // if (splitChunks) {
+    //   if (splitChunks.defaultSizeTypes.includes('...')) {
+    //     splitChunks.defaultSizeTypes.push(MODULE_TYPE);
+    //   }
+    // }
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      this.store.updateCompilation(compilation);
+      (0, _LocaleChunkAssetsStore.setLocaleChunkAssetsStore)(compilation, this.store);
+    });
+    compiler.hooks.normalModuleFactory.tap(pluginName, factory => {
+      // handler for parser
+      const handler = parser => {
+        parser.hooks.program.tap(pluginName, (ast, comments) => {
+          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)(comments, this.jsResourceI18nKeys));
+
+          if (i18nKeys.length) {
+            // console.log('i18nKeys.length', module.resource, i18nKeys);
+            this.store.updateModuleI18nKeys(module.resource, i18nKeys);
+          }
+        });
+      }; // this below  hook was tapped for collect I18n Key from files and add as Dependency
+      // const factory = params.normalModuleFactory;
+
+
+      factory.hooks.parser.for('javascript/auto').tap(pluginName, handler);
+      factory.hooks.parser.for('javascript/dynamic').tap(pluginName, handler);
+    });
+  }
+
+}
+
+exports.default = I18nKeysIdentifer;