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

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

@@ -0,0 +1,112 @@
+"use strict";
+
+/* eslint-disable max-lines */
+const terser = require('terser');
+
+describe('normal for loop', () => {
+  it('minimize variable names inside the loop  when using let type', () => {
+    const code = `
+    for (let book = 0; book < 4; book += 1) {
+       console.log(book);
+    };
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('for(let o=0;o<4;o+=1)console.log(o);');
+    });
+  });
+  it('for loop with variable keyword var', () => {
+    const code = `
+    for (var book = 0; book < 4; book += 1) {
+       console.log(book);
+    };
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('for(var book=0;book<4;book+=1)console.log(book);');
+    });
+  });
+  it('remove unused variable with keyword let and const', () => {
+    const code = `
+    for (let number = 0;number>28;number++){
+        console.log(number);
+        let number2 = 28;
+        const number3 = 32;
+    };
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('for(let o=0;o>28;o++){console.log(o)}');
+    });
+  });
+  it('take unused variable with keyword var', () => {
+    const code = `
+    for (let number = 0;number>28;number++){
+        console.log(number);
+        var number2 = 28;
+        var number3 = 32;
+    };
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('for(let e=0;e>28;e++){console.log(e);var number2=28,number3=32}');
+    });
+  });
+  it('remove unused and unwanted codes like if statement', () => {
+    const code = `
+    for (let number = 0;number>28;number++){
+        console.log(number);
+        if(true){
+            let i = 0;
+        }
+    };
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('for(let o=0;o>28;o++){console.log(o)}');
+    });
+  });
+  it('using break in loops', () => {
+    const code = `
+    for (let number = 0;number>28;number++){
+        console.log(number);
+        break;
+    };
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('for(let o=0;o>28;o++){console.log(o);break}');
+    });
+  });
+  it('using breaks in loops with an condition', () => {
+    const code = `
+    for (let number = 0;number>28;number++){
+        console.log(number);
+        if(number != 0)
+        break;
+    };
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('for(let o=0;o>28&&(console.log(o),0==o);o++);');
+    });
+  });
+  it('using continue in loops with an condition', () => {
+    const code = `
+    for (let number = 0;number>28;number++){
+        if(number > 0)
+        continue;
+        console.log(2);
+    };
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('for(let o=0;o>28;o++)o>0||console.log(2);');
+    });
+  });
+  it('remove the code which are write below the continue', () => {
+    const code = `
+    for (let number = 0;number>28;number++){
+        console.log(2)
+        continue;
+        console.log(3)
+      
+    };
+    `;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('for(let o=0;o>28;o++)console.log(2);');
+    });
+  });
+});

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

@@ -0,0 +1,43 @@
+"use strict";
+
+const terser = require('terser');
+
+test('minimize boolean values', () => {
+  const code = `
+    let a = true;
+    let b = false`;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('let a=!0,b=!1;');
+  });
+});
+test('terinary operator with var and let', () => {
+  const code = `
+    var x = 3;
+    let a = 1;
+    let result = (a == 1) ? true : false
+    result = (x == 1) ? true : false;
+    `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('var x=3;let a=1,result=1==a;result=1==x;');
+  });
+});
+test('terinary operator with const', () => {
+  const code = `
+    const x = 3;
+    const a = 1;
+    let result = (a == 1) ? true : false
+    result = (x == 1) ? true : false;
+    `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('const x=3,a=1;let result=!0;result=!1;');
+  });
+});
+test('minimize values when using logical and comparision operators', () => {
+  const code = `
+    let result = (true && true ) ? true : false
+    result = (1>2) ? true : false;
+    `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('let result=!0;result=!1;');
+  });
+});

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

@@ -0,0 +1,45 @@
+"use strict";
+
+const terser = require('terser');
+
+test('reduce repeated variable names', () => {
+  const code = `
+    let number = 10;
+    number = number+10;
+`;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('let number=10;number+=10;');
+  });
+});
+test('variable names less than values with const', () => {
+  const code = `
+    const val = false;
+
+    console.log(val);
+`;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('const val=!1;console.log(val);');
+  });
+});
+test('variable names greather than values with const', () => {
+  const code = `
+    const found = true;
+
+    console.log(found);
+`;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('const found=!0;console.log(true);');
+  });
+});
+test('checking varible names with let and var', () => {
+  const code = `
+    let  val = false;
+
+    var done = 3
+
+    console.log(val,done);
+`;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('let val=!1;var done=3;console.log(val,done);');
+  });
+});

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

@@ -0,0 +1,53 @@
+"use strict";
+
+const terser = require('terser');
+
+test('remove dead codes and minimize the parameter names', () => {
+  const code = `
+  const promise = new Promise((resolve, reject) => {
+  const res = true;
+  if (res) {
+    resolve('Resolved!');
+  }
+  else {
+    reject(Error('Error'));
+  }
+  });
+  promise.then((res) => console.log(res), (err) => console.error(err));
+   `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('const promise=new Promise(((o,e)=>{o("Resolved!")}));promise.then((o=>console.log(o)),(o=>console.error(o)));');
+  });
+});
+test('remove dead codes and minimize the variables', () => {
+  const code = `
+
+    const msg = async function () { 
+    const msg = await helloWorld();
+    console.log('message',msg);
+    }
+    const msg1 = async () => { 
+    const msg = await helloWorld();
+    console.log('message',msg);
+    }
+    msg();
+    msg1(); 
+    `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('const msg=async function(){const s=await helloWorld();console.log("message",s)},msg1=async()=>{const s=await helloWorld();console.log("message",s)};msg(),msg1();');
+  });
+});
+test('minimize the set timeout timer', () => {
+  const code = `
+    function helloWorld() {
+    return new Promise(resolve => {
+    setTimeout(() => {
+      resolve('Hello World!');
+    }, 2000);
+    });
+    }
+    `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('function helloWorld(){return new Promise((e=>{setTimeout((()=>{e("Hello World!")}),2e3)}))}');
+  });
+});

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

@@ -0,0 +1,13 @@
+"use strict";
+
+const terser = require('terser');
+
+test('removeComments', () => {
+  const code = `
+    function add(a, b) {
+       return a + b;
+    }`;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('function add(n,d){return n+d}');
+  });
+});

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

@@ -0,0 +1,14 @@
+"use strict";
+
+const terser = require('terser');
+
+test('removeUnusedStrings', () => {
+  const code = `
+    let age = 7;
+
+    'Tommy is ' + age + ' years old.';;
+    `;
+  return terser.minify(code).then(minify => {
+    expect(minify.code).toBe('let age=7;');
+  });
+});

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

@@ -0,0 +1,30 @@
+"use strict";
+
+const terser = require('terser');
+
+describe('variable declaration', () => {
+  it('check let statement', () => {
+    const code = `
+        let juiceCount = 5;
+        let juiceName = 'apple'`;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('let juiceCount=5,juiceName="apple";');
+    });
+  });
+  it('check var statement', () => {
+    const code = `
+        var juiceCount = 5;
+        var juiceName = 'apple'`;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('var juiceCount=5,juiceName="apple";');
+    });
+  });
+  it('check const statement', () => {
+    const code = `
+        const juiceCount = 5;
+        const juiceName = 'apple'`;
+    return terser.minify(code).then(minify => {
+      expect(minify.code).toBe('const juiceCount=5,juiceName="apple";');
+    });
+  });
+});

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/utils/collectI18nKeys.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.collectI18nKeysfromAST = collectI18nKeysfromAST;
+exports.collectI18nKeysfromComments = collectI18nKeysfromComments;
+
+var _estreeWalker = require("estree-walker");
+
+function collectI18nKeysfromAST(ast, allI18n) {
+  const i18nKeys = {};
+  (0, _estreeWalker.walk)(ast, {
+    enter(node) {
+      if (node.type === 'Literal') {
+        if ((node.raw[0] === '\'' || node.raw[0] === '"') && Object.hasOwnProperty.call(allI18n, node.value)) {
+          i18nKeys[node.value] = allI18n[node.value];
+        }
+      }
+    }
+
+  });
+  return Object.keys(i18nKeys);
+}
+
+const prefixI18nComment = 'I18N';
+const prefixI18nComment1 = 'dynamic-i18n-key';
+
+function getI18nKeysFromComment(comment) {
+  const commentString = comment.value.trim();
+  let i18nKeyStr;
+
+  if (commentString.startsWith(prefixI18nComment)) {
+    i18nKeyStr = commentString.slice(prefixI18nComment.length).trim();
+  } else if (commentString.startsWith(prefixI18nComment1)) {
+    i18nKeyStr = commentString.slice(prefixI18nComment1.length).trim();
+  }
+
+  if (!i18nKeyStr) {
+    return [];
+  }
+
+  const i18nKeys = i18nKeyStr.split(',');
+  return i18nKeys;
+} // export function fromComments(comments, allI18n) {
+
+
+function collectI18nKeysfromComments(comments, allI18n) {
+  // TODO: need to implement
+  const i18nKeys = {};
+  /* eslint-disable no-restricted-syntax */
+
+  for (const comment of comments) {
+    const keys = getI18nKeysFromComment(comment);
+
+    for (const key of keys) {
+      if (key && allI18n[key]) {
+        i18nKeys[key] = allI18n[key];
+      }
+    }
+  }
+  /* eslint-enable no-restricted-syntax */
+
+
+  return Object.keys(i18nKeys);
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/utils/getChunkModules.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getChunkModules = getChunkModules;
+
+function getChunkModules(chunk, compilation) {
+  const {
+    chunkGraph
+  } = compilation || {};
+  return typeof chunkGraph !== 'undefined' ? chunkGraph.getChunkModules(chunk) : chunk.modulesIterable;
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/utils/hashUtils.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.REGEXP_CONTENTHASH = void 0;
+exports.hasContentHash = hasContentHash;
+// export const REGEXP_CHUNKHASH = /\[chunkhash(?::(\d+))?\]/gi;
+// export const REGEXP_HASH = /\[hash(?::(\d+))?\]/gi;
+// export const REGEXP_NAME = /\[name\]/gi;
+// export const REGEXP_PLACEHOLDERS = /\[(name|id|chunkhash)\]/gi;
+// TODO: want to choose file type for i18n load
+const REGEXP_CONTENTHASH = /\[contenthash(?::(\d+))?\]/gi;
+exports.REGEXP_CONTENTHASH = REGEXP_CONTENTHASH;
+
+function hasContentHash(filenameTemplate) {
+  REGEXP_CONTENTHASH.lastIndex = 0;
+  return REGEXP_CONTENTHASH.test(filenameTemplate);
+}

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/utils/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _collectI18nKeys = require("./collectI18nKeys");
+
+Object.keys(_collectI18nKeys).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _collectI18nKeys[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _collectI18nKeys[key];
+    }
+  });
+});
+
+var _propertiesUtils = require("./propertiesUtils");
+
+Object.keys(_propertiesUtils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _propertiesUtils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _propertiesUtils[key];
+    }
+  });
+});

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/I18nSplitPlugin/utils/propertiesUtils.js

@@ -0,0 +1,129 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAllI18n = getAllI18n;
+exports.getPropertiesAsJSON = getPropertiesAsJSON;
+exports.jsonToString = jsonToString;
+
+var _fs = require("fs");
+
+var _path = require("path");
+
+var _constants = require("../../../../../constants");
+
+function isComment(line) {
+  return line[0] === '#';
+}
+
+function getPropertiesAsJSON(filePath) {
+  try {
+    const data = (0, _fs.readFileSync)(filePath);
+    const source = data.toString();
+    const i18nObj = {};
+    source.split(/\r?\n\r?/).forEach(fline => {
+      const line = fline.trim();
+
+      if (!line || isComment(line)) {
+        return;
+      }
+
+      const ind = line.indexOf('=');
+      const key = line.slice(0, ind).replace(/\\ /g, ' ');
+      const value = line.slice(ind + 1);
+
+      if (key && value) {
+        i18nObj[key] = value;
+      }
+    }, {});
+    return i18nObj;
+  } catch (err) {
+    return {};
+  }
+} // TODO: need to make it as custom option and  dynamic
+
+
+function getLang(file) {
+  const underScoreIndex = file.indexOf('_');
+  let language = 'en_US';
+
+  if (underScoreIndex !== -1) {
+    language = file.substring(underScoreIndex + 1);
+    language = language.slice(0, language.indexOf('.'));
+  }
+
+  return language;
+}
+
+function getAllI18n({
+  folderPath,
+  disableDefault,
+  jsResourceI18nKeys,
+  exclude = /^[^_]+$/,
+  include = /\.properties$/
+}) {
+  try {
+    const files = (0, _fs.readdirSync)(folderPath, 'utf8');
+    const allLangI18n = {};
+    const context = (0, _constants.joinWithAppPath)(folderPath);
+    files.forEach(file => {
+      const filePath = (0, _path.join)(context, file);
+
+      if (exclude.test(filePath) || !include.test(filePath)) {
+        return;
+      }
+
+      const i18n = getPropertiesAsJSON(filePath);
+      allLangI18n[getLang(file)] = disableDefault ? i18n : { ...jsResourceI18nKeys,
+        ...i18n
+      };
+    });
+    return allLangI18n;
+  } catch (err) {
+    console.log(err);
+    return {};
+  }
+}
+
+function jsonToString(json, keySeperator) {
+  let str = '{';
+  const keys = Object.keys(json);
+  keys.forEach((key, i) => {
+    const value = json[key];
+
+    if (!value) {
+      return;
+    }
+
+    str += `"${keySeperator ? key.replace(/(\.|\\(\s+))/g, keySeperator) : key}":"${value.replace(/.?"/g, match => {
+      if (match[0] === '\\') {
+        return match;
+      }
+
+      if (match.length === 2) {
+        return `${match[0]}\\${match[1]}`;
+      }
+
+      return `\\${match}`;
+    }).replace(/(\r\n|\n|\r)/g, '')}"`;
+
+    if (i !== keys.length - 1) {
+      str += ',';
+    }
+  });
+  str += '}';
+  return str;
+}
+/**
+ * not useable due to special charector
+ * 
+      return `{${Object.keys(data).map(key =>  `"${key}": "${data[key]}"`).join(",")}}`
+      // return JSON.stringify(data);
+      let str = "{";
+      for (const key of Object.keys(data)) {
+        str+= `"${key}": "${data[key]}",`
+      }
+      str+="}";
+      return str;
+ */

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

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InitialHtmlPlugin = void 0;
+
+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;
+  }
+
+  apply(compiler) {
+    const {
+      filename,
+      template,
+      minify,
+      inject,
+      mainChunkName
+    } = this.options;
+    new _htmlWebpackPlugin.default({
+      filename,
+      template,
+      minify,
+      chunks: [mainChunkName],
+      inject,
+      scriptLoading: 'defer'
+    }).apply(compiler);
+    compiler.hooks.thisCompilation.tap(pluginName, compilation => {
+      _htmlWebpackPlugin.default.getHooks(compilation).alterAssetTagGroups.tapAsync(pluginName, (data, cb) => {
+        const headTags = [];
+        const bodyTags = [];
+        data.headTags.forEach(tag => {
+          if (tag.tagName === 'link') {
+            headTags.push(tag);
+          } else {
+            bodyTags.push(tag);
+          }
+        });
+        cb(null, { ...data,
+          headTags,
+          bodyTags
+        });
+      });
+    });
+  }
+
+}
+
+exports.InitialHtmlPlugin = InitialHtmlPlugin;

package/packages/client_build_tool/lib/shared/bundler/webpack/custom_plugins/ManifestJsonPlugin/__test__/addFilesNamesToManifestJson.test.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _addFilesNamesToManifestJson = require("../addFilesNamesToManifestJson");
+
+function callTestCases(output, option) {
+  const manifestJson = {};
+  const hashDigestLength = 20;
+  const assets = {
+    'i18n-chunks/zh_TW/9978.de290aa1ffcac387cfc3.i18n.js': '1',
+    'smap/js/icons.32650912f9d52c500752.js': '2',
+    'smap/js/main.48e5db5d73bbb61856ac.js.LICENSE.txt': '3',
+    'i18n-chunks/zh_TW/9978.de290aa1ffcac387cfc3.i18n.js.map': '1',
+    'smap/js/icons.32650912f9d52c500752.js.map': '2',
+    'smap/js/main.48e5db5d73bbb61856ac.js.LICENSE.txt.map': '3'
+  };
+  const input = (0, _addFilesNamesToManifestJson.addFilesNamesToManifestJson)({
+    manifestJson,
+    option,
+    assets,
+    hashDigestLength
+  });
+  expect(input).toStrictEqual(output);
+}
+
+test('creating normal manifestJson', () => {
+  const option = {
+    test: f => !/\.i18n\.js$|\.LICENSE\.txt$|\.map$/.test(f)
+  };
+  const output = {
+    'smap/js/icons.js': 'smap/js/icons.32650912f9d52c500752.js'
+  };
+  callTestCases(output, option);
+});
+test('creating i18nmanifestJson', () => {
+  const option = {
+    test: f => /\.i18n\.js$/g.test(f)
+  };
+  const output = {
+    'i18n-chunks/zh_TW/9978.i18n.js': 'i18n-chunks/zh_TW/9978.de290aa1ffcac387cfc3.i18n.js'
+  };
+  callTestCases(output, option);
+});
+test('creating LICENSE.txt manifestJson', () => {
+  const option = {
+    test: f => /\.LICENSE\.txt$/g.test(f)
+  };
+  const output = {
+    'smap/js/main.js.LICENSE.txt': 'smap/js/main.48e5db5d73bbb61856ac.js.LICENSE.txt'
+  };
+  callTestCases(output, option);
+});