@zohodesk/client_build_tool 0.0.1 → 0.0.3

package/lib/schemas/defaultConfigValues.js

@@ -13,8 +13,9 @@ var _default = {
     value: 'app',
     cli: 'context'
   },
-  devtool: 'hidden-cheap-source-map',
-  enableChunkHash: {
+  devtool: 'source-map',
+  statsLogConfig: null,
+  enableFileNameHashing: {
     value: false,
     cli: 'enable_hash'
   },
@@ -22,18 +23,6 @@ var _default = {
     value: false,
     cli: 'bundle_analyze'
   },
-  devConsoleExclude: {
-    value: false,
-    cli: 'bundle_analyze'
-  },
-  separateCssModules: {
-    value: false,
-    cli: 'separate_css_modules'
-  },
-  enableFileNameHashing: {
-    value: false,
-    cli: 'separate_css_modules'
-  },
   enableMockReplace: {
     value: false,
     cli: 'enable_mock_replace'
@@ -68,7 +57,7 @@ var _default = {
       cli: 'port'
     },
     domain: {
-      value: 'tsi',
+      value: null,
       cli: 'domain'
     },
     disableContextURL: {
@@ -225,13 +214,35 @@ var _default = {
   },
   createSeparateSMap: {
     value: false,
-    cli: 'source_map_enable'
+    cli: 'enable_smap'
   },
   babelCustomizations: {
     browserList: null,
     // NOTE: need to consider
     // presets: [],
-    plugins: []
+    plugins: [],
+    removeAttribute: {
+      enable: false,
+      options: {
+        attributeNames: ['data-testid']
+      }
+    },
+    removePropTypes: {
+      enable: false,
+      options: {
+        mode: 'remove',
+        removeImport: true
+      }
+    },
+    devConsoleExclude: {
+      enable: {
+        value: false,
+        cli: 'console_exclude'
+      },
+      options: {
+        exclude: ['error']
+      }
+    }
   },
   webpackPlugins: [],
   vendorPatterns: [],
@@ -241,14 +252,17 @@ var _default = {
     patterns: ['*.css']
   }],
   cdnMapping: {
-    isCdnEnabled: false,
+    isCdnEnabled: {
+      value: false,
+      cli: 'enable_cdn'
+    },
     variableName: '',
     cssTemplate: '',
     jsTemplate: '',
     i18nTemplate: ''
   },
   manifestJson: {
-    enable: true
+    enable: false
   },
   changeRuntimeChunkChar: '~',
   serviceWorker: {
@@ -257,20 +271,42 @@ var _default = {
     outputFilePath: '/v1.js',
     replaceText: '//<!--AssetsFromBuild -->'
   },
-  removeAttribute: {
-    enable: true,
-    attributeNames: ['data-testid']
-  },
   customLoaders: [],
   resourceHints: {
     allowPrefetchingMultipleChunks: false
   },
-  fileHashMappingToVariable: [{
-    filePath: 'tp/crmplus/crmplusimpl.js',
-    key: '__CRMPLUS_IMPL_HASH__',
-    // fileNameTemplate: '[path]/[name]-[hash:15]_.[ext]',
-    // fileName: 'crmplusimpl.js',
-    hashLength: 20
-  }]
+  devModeContentHashAllowedTypes: null,
+  devLikeHash: {
+    value: false,
+    cli: 'dev_like_hash'
+  },
+  disableReactDevWarning: {
+    value: false,
+    cli: 'disable_react_dev_warning'
+  },
+  preProcess: {
+    enable: {
+      value: false,
+      cli: 'enable_pre_process'
+    },
+    // This option is for tell the CBT to which is preprocessor js file path
+    runner: {
+      value: '',
+      cli: 'preprocessor'
+    },
+    // usually preprocessor run in nodemon for, start and docs , preprocessor
+    stopNodemon: {
+      value: false,
+      cli: 'stop_nodemon'
+    }
+  },
+  fileHashMappingToVariable: null,
+  customAttributes: {
+    enable: false,
+    attributes: null,
+    jsAttributes: null,
+    cssAttributes: null,
+    i18nAttributes: null
+  }
 };
 exports.default = _default;

package/lib/schemas/defaultConfigValuesOnly.js

@@ -11,7 +11,7 @@ var _os = require("os");
 var _default = {
   context: 'app',
   devtool: 'hidden-cheap-source-map',
-  enableChunkHash: false,
+  enableFileNameHashing: false,
   bundleAnalyze: false,
   enableMockReplace: false,
   noPublicPath: false,
@@ -124,6 +124,25 @@ var _default = {
   createSeparateSMap: false,
   babelCustomizations: {
     browserList: null,
+    removeAttribute: {
+      enable: false,
+      options: {
+        attributeNames: ['data-testid']
+      }
+    },
+    removePropTypes: {
+      enable: false,
+      options: {
+        mode: 'remove',
+        removeImport: true
+      }
+    },
+    devConsoleExclude: {
+      enable: false,
+      options: {
+        exclude: ['error']
+      }
+    },
     // NOTE: need to consider
     // presets: [],
     plugins: []

package/lib/shared/babel/addDefaultPlugins.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.addDefaultPlugins = addDefaultPlugins;
+
+function addDefaultPlugins(plugin, pluginName) {
+  if (plugin.enable) {
+    return [require.resolve(pluginName), plugin.options];
+  }
+
+  ;
+  return null;
+}

package/lib/shared/babel/babelWebConfig.js

@@ -9,7 +9,7 @@ var _helperCompilationTargets = _interopRequireDefault(require("@babel/helper-co
 
 var _logger = require("../../logger");
 
-var _defaultBabelPlugins = require("./defaultBabelPlugins");
+var _getBabelPlugin = require("./getBabelPlugin");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,7 +27,7 @@ function babelWebConfig(options, mode) {
   } = options.babelCustomizations;
   return {
     presets: [getBabelPresetEnvConfig(browserList, mode), require.resolve('@babel/preset-react')],
-    plugins: customBabelPlugins(babelPlugins).concat((0, _defaultBabelPlugins.defaultBabelPlugins)(options)).filter(Boolean)
+    plugins: customBabelPlugins(babelPlugins).concat((0, _getBabelPlugin.getBabelPlugin)(options)).filter(Boolean)
   };
 }
 

package/lib/shared/babel/getBabelPlugin.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getBabelPlugin = getBabelPlugin;
+
+var _modeUtils = require("../bundler/webpack/common/modeUtils");
+
+var _addDefaultPlugins = require("./addDefaultPlugins");
+
+const babelPluginMapping = {
+  removeAttribute: './babel_plugins/removeAttributesPlugin',
+  removePropTypes: 'babel-plugin-transform-react-remove-prop-types',
+  devConsoleExclude: 'babel-plugin-transform-remove-console'
+};
+const babelPluginOrder = ['removeAttribute', 'removePropTypes', 'devConsoleExclude'];
+
+function getBabelPlugin(options) {
+  const {
+    mode
+  } = options;
+  let customPlugins = [];
+  const {
+    babelCustomizations
+  } = options;
+
+  if ((0, _modeUtils.isProductionMode)(mode)) {
+    const configCreator = _addDefaultPlugins.addDefaultPlugins;
+    const plugins = babelPluginOrder.map(p => configCreator(babelCustomizations[p], babelPluginMapping[p]));
+    customPlugins = plugins;
+  }
+
+  return customPlugins.filter(Boolean);
+}
+
+;

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

@@ -42,7 +42,7 @@ function createNameTemplate(name, useHash) {
   return useHash ? name[1] : name[0];
 }
 
-const devModeContentHashAllowedTypes = {
+const defaultDevModeContentHashAllowedTypes = {
   image: true,
   font: true,
   svg: true,
@@ -52,22 +52,45 @@ const devModeContentHashAllowedTypes = {
 
 function nameTemplates(type, options) {
   const {
-    enableChunkHash,
-    mode
+    enableFileNameHashing,
+    mode,
+    devLikeHash
   } = options;
+  let {
+    devModeContentHashAllowedTypes
+  } = options;
+  devModeContentHashAllowedTypes = devModeContentHashAllowedTypes || defaultDevModeContentHashAllowedTypes;
   const templateName = templates[type];
 
   if (!templateName) {
     throw Error(`specified type not valid Type: ${type}`);
-  }
+  } // eslint-disable-next-line no-use-before-define
+
+
+  const useHash = checkCanWeAllowHash({
+    enableFileNameHashing,
+    devLikeHash: devLikeHash || (0, _modeUtils.isDevelopmentMode)(mode),
+    type,
+    devModeContentHashAllowedTypes
+  });
+  return createNameTemplate(templateName, useHash);
+}
 
-  let useHash = enableChunkHash;
+function checkCanWeAllowHash({
+  enableFileNameHashing,
+  devLikeHash,
+  type,
+  devModeContentHashAllowedTypes
+}) {
+  if (!enableFileNameHashing) {
+    return false;
+  }
 
-  if ((0, _modeUtils.isDevelopmentMode)(mode) && enableChunkHash && !devModeContentHashAllowedTypes[type]) {
-    useHash = false;
+  if (devLikeHash) {
+    return devModeContentHashAllowedTypes[type];
   }
 
-  return createNameTemplate(templateName, useHash);
+  return true;
 } // export function cssDirNameTemplate(dir, options) {
 //   return nameTemplates('cssdir', options).replace(/\[dir\]/g, dir);
 // }

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

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 exports.configCustomLoaders = configCustomLoaders;
 
 function configCustomLoaders(options) {
-  return options.customLoaders;
+  return options.customLoaders || [];
 }

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

@@ -23,6 +23,8 @@ var _I18nFilesEmitPlugin = require("./I18nFilesEmitPlugin");
 
 var _LocaleChunkAssetsStore = require("./LocaleChunkAssetsStore");
 
+var _logger = require("../../../../../logger");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const {
@@ -63,7 +65,7 @@ class I18nRuntimeDealerPlugin {
         mainChunkName
       } = this.options; // const dummyContent = '// dummy comment';
 
-      const dummyContentHash = 'qwertyuiopasdfghjkl';
+      const dummyContentHash = 'dummy0content0hashes';
       const entryPoint = compilation.entrypoints.get(mainChunkName);
       const initialChunks = Array.from(entryPoint.chunks).filter(c => c.canBeInitial() && c.id !== c.runtime);
       const initialI18nAssets = initialChunks.filter(c => i18nStore.isChunkHasI18n(c)).map(c => {
@@ -172,10 +174,28 @@ class I18nRuntimeDealerPlugin {
             runtimeFileName,
             runtimeFileSourceStr,
             i18nChunks
-          })); // NOTE: we don't delete, Because of HTML plugin needs to add runtime file in html
+          })); // NOTE: we don't delete, Because of HTML plugin needs to add runtime file in html and  efc 
           // compilation.deleteAsset(runtimeFileName);
         }
       });
+      compilation.hooks.processAssets.tap({
+        name: pluginName,
+        stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE // additionalAssets: true
+
+      }, () => {
+        // eslint-disable-next-line no-underscore-dangle
+        const entries = compilation._getChunkGraphEntries(); // eslint-disable-next-line no-restricted-syntax
+
+
+        for (const entryChunk of entries) {
+          const runtimeFileName = [...entryChunk.files][0] || '';
+
+          if (runtimeFileName.includes('runtime') && runtimeFileName.includes('[local]')) {
+            (0, _logger.verboseLogger)('deleteAsset', runtimeFileName);
+            compilation.deleteAsset(runtimeFileName);
+          }
+        }
+      });
     }
   }
 

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

@@ -9,6 +9,8 @@ var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const pluginName = 'InitialHtmlPlugin';
+
 class InitialHtmlPlugin {
   constructor(options) {
     this.options = options;
@@ -30,8 +32,8 @@ class InitialHtmlPlugin {
       inject,
       scriptLoading: 'defer'
     }).apply(compiler);
-    compiler.hooks.thisCompilation.tap('InitialHtmlPlugin', compilation => {
-      _htmlWebpackPlugin.default.getHooks(compilation).alterAssetTagGroups.tapAsync('MyPlugin', (data, cb) => {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      _htmlWebpackPlugin.default.getHooks(compilation).alterAssetTagGroups.tapAsync(pluginName, (data, cb) => {
         const headTags = [];
         const bodyTags = [];
         data.headTags.forEach(tag => {

package/lib/shared/bundler/webpack/custom_plugins/ManifestJsonPlugin/index.js

@@ -9,6 +9,8 @@ var _webpack = require("webpack");
 
 var _createManifestJson = require("./createManifestJson");
 
+const pluginName = 'AddFileToManifestJson';
+
 class AddFileToManifestJson {
   constructor(options) {
     this.options = options;
@@ -18,9 +20,9 @@ class AddFileToManifestJson {
     const {
       RawSource
     } = compiler.webpack.sources;
-    compiler.hooks.thisCompilation.tap('MyWebpackPlugin', compilation => {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
       compilation.hooks.processAssets.tap({
-        name: 'MyPlugin',
+        name: pluginName,
         stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE
       }, assets => {
         const {

package/lib/shared/bundler/webpack/custom_plugins/SourceMapPlugin/index.js

@@ -8,14 +8,16 @@ exports.SourceMapPlugin = void 0;
 var _webpack = require("webpack");
 
 /* eslint-disable class-methods-use-this */
+const pluginName = 'SplitSourceMapPlugin';
+
 class SourceMapPlugin {
   apply(compiler) {
     const {
       RawSource
     } = compiler.webpack.sources;
-    compiler.hooks.thisCompilation.tap('splitSourceMap', compilation => {
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
       compilation.hooks.processAssets.tap({
-        name: 'splitSourceMap',
+        name: pluginName,
         stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
       }, assets => {
         Object.keys(assets).forEach(assetName => {

package/lib/shared/bundler/webpack/custom_plugins/TPHashMappingPlugin/index.js

@@ -29,7 +29,7 @@ class TPHashMappingPlugin {
 
   getFiles() {
     const hashMapping = {};
-    this.fileMappings.forEach(fileInfo => {
+    this.fileMappings.filter(f => f.enable).forEach(fileInfo => {
       const filePath = _path.default.join(this.tpFolder, fileInfo.filePath);
 
       if (_fs.default.existsSync(filePath)) {

package/lib/shared/bundler/webpack/custom_plugins/custom_attribute_plugin/index.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomAttributesPlugin = void 0;
+
+var _htmlWebpackInjectAttributesPlugin = _interopRequireDefault(require("html-webpack-inject-attributes-plugin"));
+
+var _webpack = require("webpack");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const pluginName = 'CustomAttributesPlugin';
+
+function attributeSetTemplate(attributes, variableName) {
+  const str = [];
+  Object.keys(attributes).forEach(key => {
+    const val = attributes[key];
+    str.push(`${variableName}.setAttribute(${JSON.stringify(key)}, ${JSON.stringify(val)});`);
+  });
+  return str;
+}
+
+function writeCss(attributes, code) {
+  const str = attributeSetTemplate(attributes, 'linkTag');
+  return code.replace('document.head.appendChild(linkTag);', `${str.join('')}document.head.appendChild(linkTag);`);
+}
+
+function writeI18nJs(attributes, code) {
+  const str = attributeSetTemplate(attributes, 'scripTag');
+  return code.replace('document.head.appendChild(scriptTag);', `{${str.join('')} document.head.appendChild(scriptTag)};`);
+}
+
+function writeJs(attributes, code) {
+  const str = attributeSetTemplate(attributes, 'script');
+  return code.replace('needAttach && document.head.appendChild(script);', `if(needAttach) {${str.join('')} document.head.appendChild(script)};`);
+}
+
+class CustomAttributesPlugin {
+  constructor(options) {
+    this.options = {
+      attributes: options.attributes,
+      jsAttributes: options.jsAttributes || options.attributes || {},
+      cssAttributes: options.cssAttributes || options.attributes || {},
+      i18nAttributes: options.i18nAttributes || options.attributes || {}
+    };
+  }
+
+  apply(compiler) {
+    const {
+      RawSource
+    } = compiler.webpack.sources; // NOTE: we not using this, Reason currently this option is only need for EFC,
+    // So it do not needed.
+
+    const {
+      attributes
+    } = this.options;
+    attributes && new _htmlWebpackInjectAttributesPlugin.default(attributes).apply(compiler);
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      compilation.hooks.processAssets.tap({
+        name: pluginName,
+        stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_DERIVED
+      }, assets => {
+        const asset = Object.keys(assets).filter(k => /runtime.*\.js$/g.test(k));
+        asset.forEach(e => {
+          const runtimeJS = assets[e];
+          let code = runtimeJS.source();
+          code = writeCss(this.options.cssAttributes, code);
+          code = writeI18nJs(this.options.i18nAttributes, code);
+          code = writeJs(this.options.jsAttributes, code);
+          compilation.updateAsset(e, new RawSource(code));
+        });
+      });
+    });
+  }
+
+}
+
+exports.CustomAttributesPlugin = CustomAttributesPlugin;

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

@@ -16,6 +16,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function getCSSLoaders(options) {
   const cssLoaderOptions = (0, _getCssLoaderOptions.getCssLoaderOptions)(options);
   return [{
+    loader: require.resolve('./loaders/miniCssFallBackLoader')
+  }, {
     loader: _miniCssExtractPlugin.default.loader,
     options: {
       publicPath: '../'

package/lib/shared/bundler/webpack/loaderConfigs/configsAssetsLoaders.js

@@ -11,7 +11,6 @@ exports.configVideoLoader = configVideoLoader;
 
 var _nameTemplates = require("../common/nameTemplates");
 
-// function getLoaderOptionQueryString(params) {
 const ImageExtRegex = /\.jpe?g$|\.gif$|\.png|\.webp$/;
 const FontExtRegex = /\.woff2|\.woff$|\.ttf$|\.eot$/;
 const SVGExtRegex = /\.svg$/;
@@ -47,16 +46,6 @@ function createAssetLoader({
 
   return conf;
 }
-/**
- * @typedef {Object} LoaderConfig
- * @property {Number} enableChunkHash
- */
-
-/**
- * @param {LoaderConfig} options
- * @returns
- */
-
 
 function configImageLoader(options) {
   return createAssetLoader({
@@ -94,45 +83,4 @@ function configVideoLoader(options) {
     test: VideoExtRegex,
     nameTemplate: (0, _nameTemplates.nameTemplates)('video', options)
   });
-}
-/*
-export function createNameTemplate(enableChunkHash) {
-  const ext = `${enableChunkHash ? ".[hash:20]" : ""}.[ext]`;
-  return `[name]${ext}`;
-}
-
-export function createImageAndFontsAndSVGLoaders(enableChunkHash) {
-  const nameTemplate = createNameTemplate(enableChunkHash);
-  return [
-    configImageLoader(nameTemplate),
-    configFontLoader(nameTemplate),
-    configSVGLoader(nameTemplate),
-    configAudioLoader(nameTemplate)
-  ];
-}
-*/
-
-/*
-export function createLoaderOptionObject(
-  loaderName,
-  nameTemplate,
-  fallback,
-  limit = 1000
-) {
-  return {
-    loader: loaderName,
-    options: {
-      limit,
-      name: nameTemplate,
-      fallback
-    }
-  };
-}
-
-function configLoaderObject(filter, loaderAndOptions) {
-  return {
-    test: filter,
-    use: loaderAndOptions
-  };
-}
-*/
+}

package/lib/shared/bundler/webpack/loaders/miniCssFallBackLoader.js

@@ -0,0 +1,7 @@
+"use strict";
+
+module.exports = function miniCssFallBackLoader(source) {
+  const replacedStr = source.replace('export default ', 'module.exports = '); //   console.log('src/loaders/docsLoader.js', replacedStr);
+
+  return replacedStr;
+};

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

@@ -16,13 +16,22 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function outputConfig(options) {
   const {
     output,
-    publicPath
+    publicPath,
+    htmlTemplate,
+    context
   } = options;
-  return {
+  const outputO = {
     filename: (0, _nameTemplates.nameTemplates)('js', options),
     chunkFilename: (0, _nameTemplates.nameTemplates)('chunkjs', options),
+    chunkLoadingGlobal: `${context}Jsonp`,
     publicPath,
     // clean: true,
     path: _path.default.resolve(_constants.appPath, output)
   };
+
+  if (htmlTemplate.crossorigin) {
+    outputO.crossOriginLoading = 'anonymous';
+  }
+
+  return outputO;
 }

package/lib/shared/bundler/webpack/pluginConfigs/configCustomAttributesPlugin.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configCustomAttributesPlugin = configCustomAttributesPlugin;
+
+var _custom_attribute_plugin = require("../custom_plugins/custom_attribute_plugin");
+
+function configCustomAttributesPlugin(options) {
+  const {
+    customAttributes
+  } = options;
+
+  if (customAttributes.enable) {
+    return new _custom_attribute_plugin.CustomAttributesPlugin(customAttributes);
+  }
+
+  return null;
+}