@zohodesk/react-cli 1.1.19-exp.12 → 1.1.19-exp.13

package/packages/client_build_tool/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/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/emitAsset.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.emitAsset = emitAsset;
+
+function emitAsset(compilation, outputFile, content) {
+  const {
+    RawSource
+  } = compilation.compiler.webpack.sources;
+  const source = new RawSource(content);
+  compilation.emitAsset(outputFile, source);
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/getInitialAssetsFuncTemplate.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cssDirTemplate = void 0;
+exports.getInitialAssetsFuncTemplate = getInitialAssetsFuncTemplate;
+exports.localeTemplate = void 0;
+
+var _utils = require("../utils");
+
+var _replaceCssDirTemplate = require("./RtlSplitPlugin/replaceCssDirTemplate");
+
+var _getInitialI18nAssetsArrayStr = require("./getInitialI18nAssetsArrayStr");
+
+const cssDirTemplate = '@dir@';
+exports.cssDirTemplate = cssDirTemplate;
+const localeTemplate = '@locale@';
+exports.localeTemplate = localeTemplate;
+
+function getInitialAssetsFuncTemplate({
+  entryPoint,
+  enableRTLSplit,
+  compilation,
+  i18nStore,
+  chunkSplitEnable,
+  i18nFileNameTemplate,
+  functionName = 'getInitialAssets'
+}) {
+  const initialFiles = entryPoint.getFiles();
+  let initialJsFiles = initialFiles.filter(_utils.isJsFile);
+  let initialCssFiles = initialFiles.filter(_utils.isCssFile);
+
+  if (enableRTLSplit) {
+    initialCssFiles = (0, _replaceCssDirTemplate.replaceCssDirTemplateMapper)(initialCssFiles, cssDirTemplate);
+  }
+
+  if (chunkSplitEnable) {
+    initialJsFiles = (0, _replaceCssDirTemplate.replaceI18nLocaleTemplateMapper)(initialJsFiles, localeTemplate);
+  }
+
+  const initialI18nAssets = (0, _getInitialI18nAssetsArrayStr.getInitialI18nAssetsArrayStr)({
+    entryPoint,
+    compilation,
+    i18nStore,
+    chunkSplitEnable,
+    i18nFileNameTemplate
+  });
+  const initialAssetsFuncTemplate = `function ${functionName}({ lang, dir}) {
+    return {
+      js: ${JSON.stringify(initialJsFiles)}.map(urlPath => urlPath.replace(/@locale@/g, lang)),
+      css: ${JSON.stringify(initialCssFiles)}${enableRTLSplit ? '.map(urlPath => urlPath.replace(/@dir@/g, dir))' : ''},
+      i18n: ${initialI18nAssets},
+    }
+  }`;
+  return initialAssetsFuncTemplate;
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/getInitialI18nAssetsArrayStr.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getI18nAssetForChunkAsStr = getI18nAssetForChunkAsStr;
+exports.getI18nAssetsForChunkAsArrayStr = getI18nAssetsForChunkAsArrayStr;
+exports.getInitialI18nAssetsArrayStr = getInitialI18nAssetsArrayStr;
+
+var _I18nFilesEmitPlugin = require("./I18nSplitPlugin/I18nFilesEmitPlugin");
+
+/* eslint-disable no-use-before-define */
+// for SMap relate changes
+// CdnChangePlugin
+// SourceMapHookPlugin
+function getInitialI18nAssetsArrayStr({
+  entryPoint,
+  compilation,
+  i18nStore,
+  chunkSplitEnable,
+  i18nFileNameTemplate
+}) {
+  return getI18nAssetsForChunkAsArrayStr({
+    chunks: entryPoint.chunks,
+    compilation,
+    i18nStore,
+    chunkSplitEnable,
+    i18nFileNameTemplate
+  });
+}
+
+function getI18nAssetsForChunkAsArrayStr({
+  chunks,
+  compilation,
+  i18nStore,
+  chunkSplitEnable,
+  i18nFileNameTemplate
+}) {
+  if (!chunkSplitEnable) {
+    // NOTE: we have used lang variable inside
+    // NOTE: below code for full i18n for now it is not implemented
+    // if (!chunkSplitEnable) {
+    //   let i18nAssets = {};
+    //   const i18nFiles = Object.keys(compilation.assets).filter(
+    //     assert => assert.indexOf(`i18n${path.sep}`) !== -1
+    //   );
+    //   // hook for i18n url contains i18n/ may cause problem
+    //   i18nAssets = i18nFiles.reduce((res, i18nFilePath) => {
+    //     const fileName = i18nFilePath.replace(`i18n${path.sep}`, '');
+    //     const splittedFileName = fileName.split('.');
+    //     res[splittedFileName[0]] = i18nFilePath;
+    //     return res;
+    //   }, {});
+    //   return `[${JSON.stringify(i18nAssets)}[lang]]`;
+    // }
+    return '[]';
+  }
+
+  const i18nAssetsUrlTemplates = [...chunks].map(chunk => getI18nAssetForChunkAsStr({
+    chunk,
+    compilation,
+    i18nStore,
+    i18nFileNameTemplate
+  })).filter(Boolean);
+  return `${JSON.stringify(i18nAssetsUrlTemplates)}.map(urlPath => urlPath.replace(/@locale@/g, lang))`;
+}
+
+function getI18nAssetForChunkAsStr({
+  chunk,
+  compilation,
+  i18nStore,
+  i18nFileNameTemplate
+}) {
+  if (!i18nStore.isChunkHasI18n(chunk)) {
+    return '';
+  }
+
+  const i18nAssetsUrlTemplates = _I18nFilesEmitPlugin.I18nFilesEmitPlugin.createFilenameWithHash({
+    compilation,
+    fileNameTemplate: i18nFileNameTemplate,
+    chunk,
+    locale: '@locale@',
+    contentHash: 'contentHash'
+  }).filename;
+
+  return i18nAssetsUrlTemplates;
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/terser/__test__/classesAndObject.test.js

@@ -0,0 +1,56 @@
+"use strict";
+
+const terser = require('terser');
+
+test('normal object', () => {
+  const code = `
+    const student = {
+    name: 'Sheldon',
+    score: 100,
+    grade: 'A',
+    }
+    console.log(student)
+    delete student.score
+    student.grade = 'F'
+    console.log(student)
+    student = {}
+    `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('const student={name:"Sheldon",score:100,grade:"A"};console.log(student),delete student.score,student.grade="F",console.log(student),student={};');
+  });
+});
+test('Assignment shorthand syntax takes extra space', () => {
+  const code = `
+    const person = {
+    name: 'Tom',
+    age: '22',
+    };
+    const {name, age} = person;
+    console.log(name); // 'Tom'
+    console.log(age);  // '22'
+    `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('const person={name:"Tom",age:"22"},{name:name,age:age}=person;console.log(name),console.log(age);');
+  });
+});
+test('minimize the name of parameter inside the class object', () => {
+  const code = `
+    class Dog {
+    constructor(name) {
+        this._name = name;
+    }
+    introduce() {
+        console.log('This is ' + this._name + ' !');
+    }
+    static bark() {
+        console.log('Woof!');
+    }
+    }
+    const myDog = new Dog('Buster');
+    myDog.introduce();
+    Dog.bark();
+    `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('class Dog{constructor(o){this._name=o}introduce(){console.log("This is "+this._name+" !")}static bark(){console.log("Woof!")}}const myDog=new Dog("Buster");myDog.introduce(),Dog.bark();');
+  });
+});

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/terser/__test__/conditionalOperation.test.js

@@ -0,0 +1,154 @@
+"use strict";
+
+/* eslint-disable max-lines */
+const terser = require('terser');
+
+describe('if condition', () => {
+  it('remove unused if condition with true value', () => {
+    const code = `
+
+          if (true) {
+             console.log('Mail sent to recipient');
+          }
+        `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('console.log("Mail sent to recipient");');
+    });
+  });
+  it('remove unused if condition with false value', () => {
+    const code = `
+          if (false) {
+             console.log('Mail sent to recipient');
+          }
+        `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('0;');
+    });
+  });
+  it('remove unused if statements when using a let or var type variable', () => {
+    const code = `
+          let isMailSent = true;
+
+          if (isMailSent) {
+             console.log('Mail sent to recipient');
+          }
+        `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('let isMailSent=!0;isMailSent&&console.log("Mail sent to recipient");');
+    });
+  });
+  it('remove unused if statements using a const variable', () => {
+    const code = `
+          const isMailSent = true;
+
+          if (isMailSent) {
+             console.log('Mail sent to recipient');
+          }
+        `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('const isMailSent=!0;console.log("Mail sent to recipient");');
+    });
+  });
+  it('if and else statement', () => {
+    const code = `
+          let isMailSent = true;
+
+          if (isMailSent) {
+             console.log('Mail sent to recipient');
+          }else{
+            console.log(3)
+          }
+          `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('let isMailSent=!0;isMailSent?console.log("Mail sent to recipient"):console.log(3);');
+    });
+  });
+  it('if and else statement returns same value', () => {
+    const code = `
+          let isMailSent = true;
+
+          if (isMailSent) {
+             console.log('Mail sent to recipient');
+          }else{
+            console.log('Mail sent to recipient');
+          }
+          `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('let isMailSent=!0;console.log("Mail sent to recipient");');
+    });
+  });
+  it('using else if statement return same value', () => {
+    const code = `
+          let isMailSent = true;
+
+          if (isMailSent) {
+             console.log('Mail sent to recipient');
+          }else if(!isMailSent){
+            console.log('Mail sent to recipient');
+          }
+          `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('let isMailSent=!0;isMailSent?console.log("Mail sent to recipient"):isMailSent||console.log("Mail sent to recipient");');
+    });
+  });
+  it('using else if statement return different value', () => {
+    const code = `
+          let isMailSent = true;
+          if (isMailSent) {
+             console.log('Mail sent to recipient');
+          }else if(isMailSent == 1){
+            console.log('Mail not sent to recipient');
+          }
+          `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('let isMailSent=!0;isMailSent?console.log("Mail sent to recipient"):1==isMailSent&&console.log("Mail not sent to recipient");');
+    });
+  });
+  it('skips the false content', () => {
+    const code = `
+        const size = 4;
+        if (size > 100) {
+          console.log('Big');
+        } else if (size > 20) {
+          console.log('Medium');
+        } else if (size > 4) {
+          console.log('Small');
+        } else {
+          console.log('Tiny');
+        }
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('const size=4;console.log("Tiny");');
+    });
+  });
+});
+test('nullish operator', () => {
+  const code = `
+     const a = undefined;
+     console.log(undefined??"hi")
+    `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('const a=void 0;console.log("hi");');
+  });
+});
+describe('switch Case', () => {
+  it('first value matched but runs for all', () => {
+    const code = `
+        const food = 'oyster';
+
+        switch (food) {
+         case 'oyster':
+             console.log('The taste of the sea');
+             break;
+         case 'pizza':
+             console.log('A delicious pie');
+             break;
+         default:
+             console.log('Enjoy your meal');
+}
+        `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('const food="oyster";switch(food){case"oyster":console.log("The taste of the sea");break;case"pizza":console.log("A delicious pie");break;default:console.log("Enjoy your meal")}');
+    });
+  });
+});

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/terser/__test__/function.test.js

@@ -0,0 +1,89 @@
+"use strict";
+
+const terser = require('terser');
+
+test('arrow function reducing the arguments name', () => {
+  const code = `
+     const sum = (param1, param2) => {
+        return param1 + param2;
+     };
+     console.log(sum(2, 5));
+    `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('const sum=(o,s)=>o+s;console.log(sum(2,5));');
+  });
+});
+test('arrow function with console', () => {
+  const code = `
+    const printHello = () => {
+        console.log('hi')
+       return ('hello');
+    };
+    printHello();
+    `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('const printHello=()=>(console.log("hi"),"hello");console.log("hi");');
+  });
+});
+test('remove unused or unwanted codes inside function', () => {
+  const code = `
+    function a(){
+       let x = 3;
+       let a = 1;
+       //this is a function
+       let result = (a == 1) ? true : false
+       result = (x == 1) ? true : false;
+    }
+    `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('function a(){let n=!0;n=!1}');
+  });
+});
+describe('function', () => {
+  it('Minify a simple function', () => {
+    const code = `
+      function sum(num1, num2) {
+        return num1 + num2;
+      }
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('function sum(n,u){return n+u}');
+    });
+  });
+  it('Minify a function with  a variable declaration', () => {
+    const code = `
+      function sum(num1, num2) {
+        var result = num1 + num2;
+        return result;
+      }
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('function sum(n,u){return n+u}');
+    });
+  });
+  it('Minify a function with a if condition', () => {
+    const code = `
+       function sum(num1, num2) {
+        if (num1 > num2) {
+          return num1;
+        } else {
+          return num2;
+        }
+      }
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('function sum(n,u){return n>u?n:u}');
+    });
+  });
+  it('Minify a function with return statement', () => {
+    const code = `
+      function sum(num1, num2) {
+        var result = num1 + num2;
+        return result;
+      }
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('function sum(n,u){return n+u}');
+    });
+  });
+});

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/terser/__test__/function2.test.js

@@ -0,0 +1,71 @@
+"use strict";
+
+const terser = require('terser');
+
+describe('function', () => {
+  it('Minify a function with console.log', () => {
+    const code = `
+      function sum(num1, num2) {
+        var result = num1 + num2;
+        console.log(result)
+      }
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('function sum(o,n){var c=o+n;console.log(c)}');
+    });
+  });
+  it('Minify a function with return and console.log', () => {
+    const code = `
+      function sum(num1, num2) {
+        var result = num1 + num2;
+        console.log(result);
+        return result;
+      }
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('function sum(n,o){var r=n+o;return console.log(r),r}');
+    });
+  });
+  it('remove unused (dead codes) and unwanted variables inside the function', () => {
+    const code = `
+      function sum(num1, num2) {
+        var result = num1 + num2;
+        const functName = 'addition';
+        var i = 0;
+        return result;
+      }
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('function sum(n,u){return n+u}');
+    });
+  });
+  it('Minify a function with a for loop', () => {
+    const code = `
+      function sum(num1, num2) {
+        for (var i = 0; i < num1; i++) {
+            console.log(i)
+        }
+      }
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('function sum(o,n){for(var c=0;c<o;c++)console.log(c)}');
+    });
+  });
+  it('Minify a function with a if condition inside a for loop', () => {
+    const code = `
+      function sum(num1, num2) {
+        for (var i = 0; i < num1; i++) {
+          if(i > 0){
+            console.log(i)
+          }
+          else{
+            console.log(0);
+          }
+        }
+      }
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('function sum(o,l){for(var n=0;n<o;n++)n>0?console.log(n):console.log(0)}');
+    });
+  });
+});