@zohodesk/client_build_tool 0.0.6-exp.6 → 0.0.6-exp.8

package/lib/shared/bundler/webpack/custom_plugins/{CdnChangePlugin.js → CdnChangePlugin/index.js}

@@ -7,14 +7,20 @@ exports.default = void 0;
 
 var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
 
-var _nameTemplates = require("../common/nameTemplates");
+var _webpack = require("webpack");
 
-var _modeUtils = require("../common/modeUtils");
+var _nameTemplates = require("../../common/nameTemplates");
+
+var _modeUtils = require("../../common/modeUtils");
+
+var _webpackCustomJsUrlLoader = _interopRequireDefault(require("./webpackCustomJsUrlLoader"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // import { RuntimeGlobals, RuntimeModule } from 'webpack';
+// eslint-disable-next-line import/extensions
 // import { Template } from 'webpack';
+// eslint-disable-next-line import/extensions
 const pluginName = 'CdnChangePlugin'; // const MODULE_TYPE = 'css/mini-extract';
 // class CdnChangeRuntimePlugin extends RuntimeModule {
 //   constructor(compiler, { variableName }) {
@@ -80,6 +86,12 @@ class CdnChangePlugin {
         };
         cb && cb(null, data);
       });
+
+      compilation.hooks.runtimeRequirementInTree.for(_webpack.RuntimeGlobals.getChunkScriptFilename).tap(pluginName, (chunk, set) => {
+        compilation.addRuntimeModule(chunk, // eslint-disable-next-line new-cap
+        new _webpackCustomJsUrlLoader.default('javascript', 'javascript', _webpack.RuntimeGlobals.getChunkScriptFilename, chunk => chunk.filenameTemplate || (chunk.canBeInitial() ? compilation.outputOptions.filename : compilation.outputOptions.chunkFilename), false));
+        return true;
+      });
     });
   }
 

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

@@ -0,0 +1,265 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _webpack = require("webpack");
+
+const first = set => {
+  const entry = set.values().next();
+  return entry.done ? undefined : entry.value;
+};
+
+class CustomizedGetChunkFilenameRuntimeModule extends _webpack.RuntimeModule {
+  /**
+   * @param {string} contentType the contentType to use the content hash for
+   * @param {string} name kind of filename
+   * @param {string} global function name to be assigned
+   * @param {function(Chunk): string | FilenameFunction} getFilenameForChunk functor to get the filename or function
+   * @param {boolean} allChunks when false, only async chunks are included
+   */
+  constructor(contentType, name, global, getFilenameForChunk, allChunks) {
+    super(`get ${name} chunk filename`);
+    this.contentType = contentType;
+    this.global = global;
+    this.getFilenameForChunk = getFilenameForChunk;
+    this.allChunks = allChunks;
+    this.dependentHash = true;
+  }
+
+  generate() {
+    const {
+      global,
+      chunk,
+      chunkGraph,
+      contentType,
+      getFilenameForChunk,
+      allChunks,
+      compilation
+    } = this;
+    const {
+      runtimeTemplate
+    } = compilation;
+    /** @type {Map<string | FilenameFunction, Set<Chunk>>} */
+
+    const chunkFilenames = new Map();
+    let maxChunks = 0;
+    /** @type {string} */
+
+    let dynamicFilename;
+    /**
+     * @param {Chunk} c the chunk
+     * @returns {void}
+     */
+
+    const addChunk = c => {
+      const chunkFilename = getFilenameForChunk(c);
+
+      if (chunkFilename) {
+        let set = chunkFilenames.get(chunkFilename);
+
+        if (set === undefined) {
+          chunkFilenames.set(chunkFilename, set = new Set());
+        }
+
+        set.add(c);
+
+        if (typeof chunkFilename === 'string') {
+          if (set.size < maxChunks) return;
+
+          if (set.size === maxChunks) {
+            if (chunkFilename.length < dynamicFilename.length) return;
+
+            if (chunkFilename.length === dynamicFilename.length) {
+              if (chunkFilename < dynamicFilename) return;
+            }
+          }
+
+          maxChunks = set.size;
+          dynamicFilename = chunkFilename;
+        }
+      }
+    };
+    /** @type {string[]} */
+
+
+    const includedChunksMessages = [];
+
+    if (allChunks) {
+      includedChunksMessages.push('all chunks');
+
+      for (const c of chunk.getAllReferencedChunks()) {
+        addChunk(c);
+      }
+    } else {
+      includedChunksMessages.push('async chunks');
+
+      for (const c of chunk.getAllAsyncChunks()) {
+        addChunk(c);
+      }
+
+      const includeEntries = chunkGraph.getTreeRuntimeRequirements(chunk).has(_webpack.RuntimeGlobals.ensureChunkIncludeEntries);
+
+      if (includeEntries) {
+        includedChunksMessages.push('sibling chunks for the entrypoint');
+
+        for (const c of chunkGraph.getChunkEntryDependentChunksIterable(chunk)) {
+          addChunk(c);
+        }
+      }
+    }
+
+    for (const entrypoint of chunk.getAllReferencedAsyncEntrypoints()) {
+      addChunk(entrypoint.chunks[entrypoint.chunks.length - 1]);
+    }
+    /** @type {Map<string, Set<string | number>>} */
+
+
+    const staticUrls = new Map();
+    /** @type {Set<Chunk>} */
+
+    const dynamicUrlChunks = new Set();
+    /**
+     * @param {Chunk} c the chunk
+     * @param {string | FilenameFunction} chunkFilename the filename template for the chunk
+     * @returns {void}
+     */
+
+    const addStaticUrl = (c, chunkFilename) => {
+      /**
+       * @param {string | number} value a value
+       * @returns {string} string to put in quotes
+       */
+      const unquotedStringify = value => {
+        const str = `${value}`;
+
+        if (str.length >= 5 && str === `${c.id}`) {
+          // This is shorter and generates the same result
+          return '" + chunkId + "';
+        }
+
+        const s = JSON.stringify(str);
+        return s.slice(1, s.length - 1);
+      };
+
+      const unquotedStringifyWithLength = value => length => unquotedStringify(`${value}`.slice(0, length));
+
+      const chunkFilenameValue = typeof chunkFilename === 'function' ? JSON.stringify(chunkFilename({
+        chunk: c,
+        contentHashType: contentType
+      })) : JSON.stringify(chunkFilename);
+      const staticChunkFilename = compilation.getPath(chunkFilenameValue, {
+        hash: `" + ${_webpack.RuntimeGlobals.getFullHash}() + "`,
+        hashWithLength: length => `" + ${_webpack.RuntimeGlobals.getFullHash}().slice(0, ${length}) + "`,
+        chunk: {
+          id: unquotedStringify(c.id),
+          hash: unquotedStringify(c.renderedHash),
+          hashWithLength: unquotedStringifyWithLength(c.renderedHash),
+          name: unquotedStringify(c.name || c.id),
+          contentHash: {
+            [contentType]: unquotedStringify(c.contentHash[contentType])
+          },
+          contentHashWithLength: {
+            [contentType]: unquotedStringifyWithLength(c.contentHash[contentType])
+          }
+        },
+        contentHashType: contentType
+      });
+      let set = staticUrls.get(staticChunkFilename);
+
+      if (set === undefined) {
+        staticUrls.set(staticChunkFilename, set = new Set());
+      }
+
+      set.add(c.id);
+    };
+
+    for (const [filename, chunks] of chunkFilenames) {
+      if (filename !== dynamicFilename) {
+        for (const c of chunks) addStaticUrl(c, filename);
+      } else {
+        for (const c of chunks) dynamicUrlChunks.add(c);
+      }
+    }
+    /**
+     * @param {function(Chunk): string | number} fn function from chunk to value
+     * @returns {string} code with static mapping of results of fn
+     */
+
+
+    const createMap = fn => {
+      const obj = {};
+      let useId = false;
+      let lastKey;
+      let entries = 0; // eslint-disable-next-line no-restricted-syntax
+
+      for (const c of dynamicUrlChunks) {
+        const value = fn(c);
+
+        if (value === c.id) {
+          useId = true;
+        } else {
+          obj[c.id] = value;
+          lastKey = c.id;
+          entries++;
+        }
+      }
+
+      if (entries === 0) return 'chunkId';
+
+      if (entries === 1) {
+        return useId ? `(chunkId === ${JSON.stringify(lastKey)} ? ${JSON.stringify(obj[lastKey])} : chunkId)` : JSON.stringify(obj[lastKey]);
+      }
+
+      return useId ? `(${JSON.stringify(obj)}[chunkId] || chunkId)` : `${JSON.stringify(obj)}[chunkId]`;
+    };
+    /**
+     * @param {function(Chunk): string | number} fn function from chunk to value
+     * @returns {string} code with static mapping of results of fn for including in quoted string
+     */
+
+
+    const mapExpr = fn => {
+      return `" + ${createMap(fn)} + "`;
+    };
+    /**
+     * @param {function(Chunk): string | number} fn function from chunk to value
+     * @returns {function(number): string} function which generates code with static mapping of results of fn for including in quoted string for specific length
+     */
+
+
+    const mapExprWithLength = fn => length => {
+      return `" + ${createMap(c => `${fn(c)}`.slice(0, length))} + "`;
+    };
+
+    const url = dynamicFilename && compilation.getPath(JSON.stringify(dynamicFilename), {
+      hash: `" + ${_webpack.RuntimeGlobals.getFullHash}() + "`,
+      hashWithLength: length => `" + ${_webpack.RuntimeGlobals.getFullHash}().slice(0, ${length}) + "`,
+      chunk: {
+        id: `" + chunkId + "`,
+        hash: mapExpr(c => c.renderedHash),
+        hashWithLength: mapExprWithLength(c => c.renderedHash),
+        name: mapExpr(c => c.name || c.id),
+        contentHash: {
+          [contentType]: mapExpr(c => c.contentHash[contentType])
+        },
+        contentHashWithLength: {
+          [contentType]: mapExprWithLength(c => c.contentHash[contentType])
+        }
+      },
+      contentHashType: contentType
+    });
+    const cdn = `__CSS_CDN__`;
+    return _webpack.Template.asString([`// This function allow to reference ${inclucdndedChunksMessages.join(' and ')}`, `${global} = ${runtimeTemplate.basicFunction('chunkId', staticUrls.size > 0 ? ['// return url for filenames not based on template', // it minimizes to `x===1?"...":x===2?"...":"..."`
+    _webpack.Template.asString(Array.from(staticUrls, ([url, ids]) => {
+      const condition = ids.size === 1 ? `chunkId === ${JSON.stringify(first(ids))}` : `{${Array.from(ids, id => `${JSON.stringify(id)}:1`).join(',')}}[chunkId]`;
+      return `if (${condition}) return window.${cdn}+${url};`;
+    })), '// return url for filenames based on template', `return window.${cdn}+${url};`] : ['// return url for filenames based on template', `return window.${cdn}+${url};`])};`]);
+  }
+
+}
+
+var _default = CustomizedGetChunkFilenameRuntimeModule;
+exports.default = _default;

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

@@ -33,10 +33,16 @@ class SourceMapPlugin {
         name: pluginName,
         stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
       }, assets => {
+        console.log('working');
         Object.keys(assets).forEach(assetName => {
+          if (assetName.includes('runtime')) {
+            console.log(assetName, true);
+          }
+
           const assetCode = assets[assetName].source();
 
-          if (checkSmapFilePattern(assetName) && skipRuntimeFiles(assetName)) {
+          if (checkSmapFilePattern(assetName) // skipRuntimeFiles(assetName)
+          ) {
             compilation.renameAsset(assetName, `smap/${assetName}`);
 
             if (!/\.map$/.test(assetName)) {

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

@@ -47,12 +47,10 @@ var _configBundleIntegrityReport = require("./pluginConfigs/configBundleIntegrit
 
 var _configRuntimeResourceCleanup = require("./pluginConfigs/configRuntimeResourceCleanup");
 
-var _configDummy = require("./pluginConfigs/configDummy");
-
 // 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), (0, _configDummy.configDummy)(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, _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/package.json

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

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

@@ -1,55 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Dummy = void 0;
-
-var _webpack = require("webpack");
-
-class Dummy {
-  constructor() {
-    this.variableName = '__CSS_CDN__';
-  } // eslint-disable-next-line class-methods-use-this
-
-
-  apply(compiler) {
-    // Access processAssets hook from v5 API
-    const {
-      RawSource
-    } = compiler.webpack.sources;
-    compiler.hooks.compilation.tap('MyCutomPlugin', compilation => {
-      compilation.hooks.processAssets.tap({
-        name: 'MyCustomPlugin',
-        stage: _webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS // Choose an appropriate stage based on your needs
-
-      }, assets => {
-        console.log('working'); // Here you can interact with assets
-
-        const asset = 'js/runtime~main'; // Replace with your actual chunk file name pattern
-
-        Object.keys(assets).forEach(assetName => {
-          // if (assetName.includes('main')) console.log(assetName);
-          // });
-          if (assetName.includes(asset)) {
-            console.log('found');
-            const originalSource = assets[assetName].source(); // console.log(originalSource);
-
-            const modifiedSource = originalSource.replace('__webpack_require__.p + __webpack_require__.u(chunkId);', `window['${this.variableName}'] + __webpack_require__.u(chunkId);`);
-            console.log(assetName); // console.log(modifiedSource);
-            // console.log(a);
-            // Apply your modifications here
-            // const modifiedSource = someModificationFunction(originalSource);
-            // Update the asset's source
-            // eslint-disable-next-line no-param-reassign
-
-            compilation.updateAsset(assetName, new RawSource(modifiedSource));
-          }
-        });
-      });
-    });
-  }
-
-}
-
-exports.Dummy = Dummy;

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

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.configDummy = configDummy;
-
-var _dummy = require("../custom_plugins/dummy");
-
-function configDummy(options) {
-  console.log('running');
-  return new _dummy.Dummy();
-}