@zohodesk/client_build_tool 0.0.6-exp.40 → 0.0.6-exp.41

package/lib/schemas/defaultConfigValues.js

@@ -340,6 +340,10 @@ var _default = {
   optimization: {
     jsExcludePath: '',
     cssExcludePath: ''
+  },
+  customScriptLoadingStrategey: {
+    enable: false,
+    options: null
   }
 };
 exports.default = _default;

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

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomScriptLoadingStrategyPlugin = void 0;
+
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const pluginName = 'CustomScriptLoadingStrategyPlugin';
+
+class CustomScriptLoadingStrategyPlugin {
+  constructor({
+    scriptLoadingStategey
+  } = {}) {
+    this.scriptLoadingStrategy = scriptLoadingStategey;
+    this.tagNamesToMatch = ['script'];
+  }
+
+  getFileNameFromTagSrc(src) {
+    const fileNameArr = src.split('/');
+    return fileNameArr[fileNameArr.length - 1];
+  }
+
+  addAttributestToTag(tag, attributes) {
+    tag.attributes = Object.assign({}, tag.attributes, attributes);
+  }
+
+  matchFileName(tag, fileName) {
+    return fileName.test(this.getFileNameFromTagSrc(tag.attributes.src));
+  }
+
+  blockingStrategy(tag) {
+    delete tag.attributes.defer;
+    delete tag.attributes.async;
+  }
+
+  deferStrategy(tag) {
+    delete tag.attributes.async;
+  }
+
+  asyncStrategy(tag) {
+    delete tag.attributes.defer;
+  }
+
+  moduleStrategy(tag) {
+    this.deferStrategy(tag);
+  }
+
+  matchStrategy(scriptLoadingStrategy, tag) {
+    if (scriptLoadingStrategy === 'blocking') {
+      this.blockingStrategy(tag);
+    }
+
+    if (scriptLoadingStrategy === 'defer') {
+      this.deferStrategy(tag);
+    }
+
+    if (scriptLoadingStrategy === 'async') {
+      this.asyncStrategy(tag);
+    }
+
+    if (scriptLoadingStrategy === 'module') {
+      this.moduleStrategy(tag);
+    }
+  }
+
+  matchAndApplyCustomLoadingStrategyToScripts(tags) {
+    Object.keys(this.scriptLoadingStrategy).forEach(scriptLoadingStrategy => {
+      const filesToMatch = this.scriptLoadingStrategy[scriptLoadingStrategy];
+      tags.forEach(tag => {
+        if (this.tagNamesToMatch.includes(tag.tagName) && tag.attributes.src) {
+          const isFileMatch = filesToMatch.some(fileName => this.matchFileName(tag, fileName));
+
+          if (isFileMatch) {
+            this.matchStrategy(scriptLoadingStrategy, tag);
+            this.addAttributestToTag(tag, {
+              [scriptLoadingStrategy]: true
+            });
+          }
+        } // filesToMatch.forEach(fileName => {
+        //   if (!this.matchFileName(tag, fileName)) {
+        //     return;
+        //   }
+        //   this.matchStrategy(scriptLoadingStrategy, tag);
+        //   this.addAttributestToTag(tag, fileName, {
+        //     [scriptLoadingStrategy]: true
+        //   });
+        // });
+
+      });
+    });
+  }
+
+  apply(compiler) {
+    compiler.hooks.compilation.tap(pluginName, compilation => {
+      _htmlWebpackPlugin.default.getHooks(compilation).alterAssetTagGroups.tapAsync(pluginName, (data, callback) => {
+        const tags = [...data.bodyTags, ...data.headTags];
+        console.log(tags, 'dummy');
+        this.matchAndApplyCustomLoadingStrategyToScripts(tags);
+        callback(null, data);
+      });
+    });
+  }
+
+}
+
+exports.CustomScriptLoadingStrategyPlugin = CustomScriptLoadingStrategyPlugin;

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

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configCustomScriptLoadingStrategyPlugin = configCustomScriptLoadingStrategyPlugin;
+
+var _CustomScriptLoadingPlugin = require("../custom_plugins/CustomScriptLoadingPlugin");
+
+var _utils = require("../utils");
+
+const defaultScriptLoadingStrategy = 'defer';
+const allowedScriptLoadingStrategies = ['blocking', 'defer', 'async', 'module'];
+
+function isAllowedScriptLoadingStrategyUsed(scriptLoadingStategey) {
+  return allowedScriptLoadingStrategies.includes(scriptLoadingStategey);
+}
+
+function getScriptLoadingStrategyForStringType(scriptLoadingStategey) {
+  if (isAllowedScriptLoadingStrategyUsed(scriptLoadingStategey)) {
+    return scriptLoadingStategey;
+  }
+
+  return defaultScriptLoadingStrategy;
+}
+
+function getScriptLoadingStrategyForObject(scriptLoadingStategey) {
+  if (Object.keys(scriptLoadingStategey).length === 0) {
+    return defaultScriptLoadingStrategy;
+  }
+
+  const isAllowedScriptLoadingStrategy = Object.keys(scriptLoadingStategey).every(key => isAllowedScriptLoadingStrategyUsed(key));
+
+  if (isAllowedScriptLoadingStrategy) {
+    return Object.assign({}, scriptLoadingStategey);
+  }
+
+  console.warn('un supported script loading strategy used', scriptLoadingStategey);
+  return defaultScriptLoadingStrategy;
+}
+
+function getScriptLoadingStrategy(scriptLoadingStategey) {
+  if ((0, _utils.getTypeOf)(scriptLoadingStategey) === 'string') {
+    return {
+      [getScriptLoadingStrategyForStringType(scriptLoadingStategey)]: [/.*/]
+    };
+  }
+
+  if ((0, _utils.getTypeOf)(scriptLoadingStategey) === 'object') {
+    return getScriptLoadingStrategyForObject(scriptLoadingStategey);
+  }
+
+  return {
+    [defaultScriptLoadingStrategy]: [/.*/]
+  };
+}
+
+function configCustomScriptLoadingStrategyPlugin(options) {
+  const {
+    customScriptLoadingStrategey
+  } = options;
+
+  if (customScriptLoadingStrategey) {
+    const currentScriptLoadingStrategy = getScriptLoadingStrategy(customScriptLoadingStrategey.options);
+
+    if ((0, _utils.getTypeOf)(currentScriptLoadingStrategy) === 'object') {
+      return new _CustomScriptLoadingPlugin.CustomScriptLoadingStrategyPlugin({
+        scriptLoadingStategey: currentScriptLoadingStrategy
+      });
+    } else {
+      return null;
+    }
+  } else {
+    return null;
+  }
+}

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

@@ -47,10 +47,12 @@ var _configBundleIntegrityReport = require("./pluginConfigs/configBundleIntegrit
 
 var _configRuntimeResourceCleanup = require("./pluginConfigs/configRuntimeResourceCleanup");
 
+var _configCustomScriptLoadingStrategyPlugin = require("./pluginConfigs/configCustomScriptLoadingStrategyPlugin");
+
 // import { IgnorePlugin } from 'webpack';
 function plugins(options) {
   const {
     webpackPlugins
   } = options;
-  return [(0, _configEnvVariables.configEnvVariables)(options), (0, _configCustomAttributesPlugin.configCustomAttributesPlugin)(options), (0, _configTPHashMappingPlugin.configTPHashMappingPlugin)(options), (0, _configCopyPublicFolders.configCopyPublicFolders)(options), (0, _configIgnorePlugin.configIgnorePlugin)(options), (0, _configMiniCSSExtractPlugin.configMiniCSSExtractPlugin)(options), (0, _configSelectorWeightPlugin.configSelectorWeightPlugin)(options), (0, _configVariableConversionPlugin.configVariableConversionPlugin)(options), (0, _configI18nSplitPlugin.configI18nSplitPlugin)(options), (0, _configRtlCssPlugin.configRtlCssPlugin)(options), (0, _configHtmlWebpackPlugin.configHtmlWebpackPlugin)(options), (0, _configCdnChangePlugin.configCdnChangePlugin)(options), (0, _configServiceWorkerPlugin.configServiceWorkerPlugin)(options), (0, _configEFCTemplatePlugin.configEFCTemplatePlugin)(options), (0, _configResourceHintsPlugin.configResourceHintsPlugin)(options), (0, _configBundleAnalyzer.configBundleAnalyzer)(options), (0, _configManifestJsonPlugin.configManifestJsonPlugin)(options), (0, _configSourceMapPlugin.configSourceMapPlugin)(options), (0, _configProgressPlugin.configProgressPlugin)(options), (0, _configBundleIntegrityReport.configBundleIntegrityReport)(options), (0, _configRuntimeResourceCleanup.configRuntimeResourceCleanup)(options), ...webpackPlugins].filter(Boolean);
+  return [(0, _configEnvVariables.configEnvVariables)(options), (0, _configCustomAttributesPlugin.configCustomAttributesPlugin)(options), (0, _configTPHashMappingPlugin.configTPHashMappingPlugin)(options), (0, _configCopyPublicFolders.configCopyPublicFolders)(options), (0, _configIgnorePlugin.configIgnorePlugin)(options), (0, _configMiniCSSExtractPlugin.configMiniCSSExtractPlugin)(options), (0, _configSelectorWeightPlugin.configSelectorWeightPlugin)(options), (0, _configVariableConversionPlugin.configVariableConversionPlugin)(options), (0, _configI18nSplitPlugin.configI18nSplitPlugin)(options), (0, _configRtlCssPlugin.configRtlCssPlugin)(options), (0, _configHtmlWebpackPlugin.configHtmlWebpackPlugin)(options), (0, _configCustomScriptLoadingStrategyPlugin.configCustomScriptLoadingStrategyPlugin)(options), (0, _configCdnChangePlugin.configCdnChangePlugin)(options), (0, _configServiceWorkerPlugin.configServiceWorkerPlugin)(options), (0, _configEFCTemplatePlugin.configEFCTemplatePlugin)(options), (0, _configResourceHintsPlugin.configResourceHintsPlugin)(options), (0, _configBundleAnalyzer.configBundleAnalyzer)(options), (0, _configManifestJsonPlugin.configManifestJsonPlugin)(options), (0, _configSourceMapPlugin.configSourceMapPlugin)(options), (0, _configProgressPlugin.configProgressPlugin)(options), (0, _configBundleIntegrityReport.configBundleIntegrityReport)(options), (0, _configRuntimeResourceCleanup.configRuntimeResourceCleanup)(options), ...webpackPlugins].filter(Boolean);
 }

package/lib/shared/bundler/webpack/utils/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getTypeOf = getTypeOf;
 exports.isJsFile = exports.isDirRelatedCss = exports.isCssFile = exports.isCss = void 0;
 
 var _path = _interopRequireDefault(require("path"));
@@ -23,4 +24,8 @@ exports.isJsFile = isJsFile;
 
 const isCssFile = file => /\.css$/.test(file);
 
-exports.isCssFile = isCssFile;
+exports.isCssFile = isCssFile;
+
+function getTypeOf(value) {
+  return Object.prototype.toString.call(value).split(/\s/)[1].replace(/\]/, '').toLowerCase();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/client_build_tool",
-  "version": "0.0.6-exp.40",
+  "version": "0.0.6-exp.41",
   "description": "A CLI tool to  build  web applications and client libraries",
   "main": "lib/index.js",
   "bin": {