@zohodesk/react-cli 0.0.1-test.148.3 → 1.0.0-exp.1

package/lib/loaders/selectorMappingLoader.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _path = _interopRequireDefault(require("path"));
+
+var _fs = _interopRequireDefault(require("fs"));
+
+var _utils = require("../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+let options = (0, _utils.getOptions)();
+const {
+  cssSelectorZipPath
+} = options.impactService;
+
+const zipname = _path.default.parse(cssSelectorZipPath).name; // console.log({ cssSelectorZipPath, zipname });
+// TODO:NOTE: need to check about .. path related files creation 
+// for now  no css files have given  form react-cli need to make sure about it.  
+
+
+let zippath = _path.default.join(process.cwd(), cssSelectorZipPath);
+
+if (_fs.default.existsSync(_path.default.join(process.cwd(), cssSelectorZipPath))) {
+  _fs.default.rmSync(zippath);
+
+  console.log('zip file deleted', zippath); // fs.rmSync(zippath, {force:true})
+  // console.log('created folder ==> ', dpath);
+} // const minicssComment =
+//   '// extracted by mini-css-extract-plugin\n';
+
+
+const startStr = '// extracted by mini-css-extract-plugin\n' + 'module.exports = ';
+
+module.exports = function (source) {
+  const {
+    rootContext,
+    resourcePath
+  } = this;
+
+  const relativePath = _path.default.relative(rootContext, resourcePath);
+
+  let fpath = _path.default.join(rootContext, zipname, relativePath);
+
+  let originalpath = _path.default.join(rootContext, relativePath);
+
+  if (relativePath.startsWith('..')) {
+    throw `unexpected path ${relativePath}`;
+  }
+
+  let dpath = fpath.slice(0, fpath.lastIndexOf(_path.default.sep));
+
+  if (!_fs.default.existsSync(originalpath)) {
+    throw `originalpath not exixt ${originalpath}`;
+  }
+
+  if (!_fs.default.existsSync(dpath)) {
+    _fs.default.mkdirSync(dpath, {
+      recursive: true
+    });
+  }
+
+  let jsonStr = '{}';
+
+  if (source.startsWith(startStr)) {
+    // source will  be  like 
+    // `// extracted by mini-css-extract-plugin\nmodule.exports = {"app":"zd-app"};`
+    jsonStr = source.slice(startStr.length, -1);
+  }
+
+  _fs.default.writeFileSync(`${fpath}_map`, jsonStr);
+
+  _fs.default.writeFileSync(fpath, _fs.default.readFileSync(originalpath));
+
+  return source;
+};

package/lib/loaders/workerLoader.js

@@ -16,7 +16,7 @@ var _SingleEntryPlugin = _interopRequireDefault(require("webpack/lib/SingleEntry
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/* import WebWorkerTemplatePlugin from 'webpack/lib/webworker/WebWorkerTemplatePlugin';
+/* import WebWorkerTemplatePlugin from 'webpack/lib/webworker/WebWorkerTemplatePlugin';
 import ExternalsPlugin from 'webpack/lib/ExternalsPlugin'; */
 const schema = {
   'type': 'object',
@@ -80,14 +80,14 @@ function pitch(request) {
     globalObject: 'self'
   };
   workerContext.compiler = this._compilation.createChildCompiler(`worker-loader ${request}`, workerContext.options);
-  /* 
-  new WebWorkerTemplatePlugin().apply(workerContext.compiler);
-  
-  if (compilerOptions.externals) {
-    new ExternalsPlugin(
-      getExternalsType(compilerOptions),
-      compilerOptions.externals
-    ).apply(workerContext.compiler);
+  /* 
+  new WebWorkerTemplatePlugin().apply(workerContext.compiler);
+  
+  if (compilerOptions.externals) {
+    new ExternalsPlugin(
+      getExternalsType(compilerOptions),
+      compilerOptions.externals
+    ).apply(workerContext.compiler);
   } */
 
   new _SingleEntryPlugin.default(this.context, `!!${request}`, _path.default.parse(this.resourcePath).name).apply(workerContext.compiler);

package/lib/pluginUtils/configHtmlWebpackPlugins.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.configHtmlWebpackPlugins = configHtmlWebpackPlugins;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
+
+var _htmlWebpackInjectAttributesPlugin = _interopRequireDefault(require("html-webpack-inject-attributes-plugin"));
+
+var _common = require("../common");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const defaultHTMLMiniFyOption = {
+  collapseWhitespace: true,
+  minifyCSS: true,
+  minifyJS: true,
+  keepClosingSlash: true,
+  removeComments: false,
+  removeRedundantAttributes: true,
+  removeScriptTypeAttributes: true,
+  removeStyleLinkTypeAttributes: true,
+  useShortDoctype: true
+};
+
+function configHtmlWebpackPlugins(plugins, {
+  enableChunkHash = false,
+  mainEntryHtmlFile,
+  folder,
+  inject,
+  crossorigin,
+  hasEFC,
+  minify: minifyHtmlOptions = false
+}) {
+  const optionsHtmlWebpack = {
+    chunksSortMode: 'none',
+    filename: enableChunkHash ? 'index.[templatehash:20].html' : 'index.html',
+    template: _path.default.join(process.cwd(), folder, mainEntryHtmlFile),
+    minify: minifyHtmlOptions === true ? defaultHTMLMiniFyOption : minifyHtmlOptions === null ? false : minifyHtmlOptions,
+    // : typeof minifyHtmlOptions === 'object'
+    // ? minifyHtmlOptions
+    // : minifyHtmlOptions,,
+    templateParameters: _common.templateParameters,
+    scriptLoading: 'defer',
+    inject: inject
+  };
+
+  if (hasEFC) {
+    optionsHtmlWebpack.excludeChunks = ['efc', 'widget'];
+  }
+
+  plugins.push(new _htmlWebpackPlugin.default(optionsHtmlWebpack));
+  crossorigin && plugins.push(new _htmlWebpackInjectAttributesPlugin.default({
+    crossorigin: 'anonymous'
+  }));
+}

package/lib/pluginUtils/getDevPlugins.js

@@ -15,40 +15,53 @@ var _lodashWebpackPlugin = _interopRequireDefault(require("lodash-webpack-plugin
 
 var _miniCssExtractPlugin = _interopRequireDefault(require("mini-css-extract-plugin"));
 
-var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
-
 var _I18nSplitPlugin = _interopRequireDefault(require("../plugins/I18nSplitPlugin"));
 
+var _RequireVariablePublicPlugin = _interopRequireDefault(require("../plugins/RequireVariablePublicPlugin"));
+
 var _copyWebpackPlugin = _interopRequireDefault(require("copy-webpack-plugin"));
 
 var _webpack = _interopRequireDefault(require("webpack"));
 
 var _plugins = require("../plugins");
 
-var _common = require("../common");
-
 var _RtlCssPlugin = require("../plugins/RtlSplitPlugin/RtlCssPlugin");
 
+var _VariableConversionCollector = _interopRequireDefault(require("../plugins/VariableConversionCollector"));
+
+var _SelectorPlugin = _interopRequireDefault(require("../plugins/SelectorPlugin"));
+
+var _configHtmlWebpackPlugins = require("./configHtmlWebpackPlugins");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let getDevPlugins = (options, publicPath) => {
-  let {
+// import { windowsModification } from '../loaderUtils/windowsModification';
+const getDevPlugins = (options, publicPath) => {
+  const {
     app: {
       tpFolder,
       folder,
+      mainEntryHtmlFile,
       instrumentScript,
+      devCssFileBountry,
       context,
       hasEFC: prevOptionForEnableEFC,
       hasShadowDOM,
+      cssVariableReplacementConfig,
+      plugins: pluginObject,
+      // exclude,
+      selectorWeightConfig,
       server: {
         mode
       },
       htmlTemplate: {
         inject
-      }
+      },
+      crossorigin
     },
     efc: {
       hasEFC: newOptionForEnableEFC,
+      templateFilePath,
       nameScope: efcNameSpace,
       localeAttr: efcLocaleAttr
     },
@@ -59,9 +72,10 @@ let getDevPlugins = (options, publicPath) => {
     unusedFiles
   } = options;
   const hasEFC = newOptionForEnableEFC || prevOptionForEnableEFC;
-  const cssLTRFileNameTempalte = 'css/[name].ltr.css';
-  const cssRTLFileNameTempalte = 'css/[name].rtl.css';
-  let plugins = [new _plugins.CleanUpStatsPlugin(), new _caseSensitivePathsWebpackPlugin.default(), new _webpack.default.IgnorePlugin(/^\.\/domain$/, /moment$/), new _webpack.default.DefinePlugin({
+  const cssLTRFileNameTempalte = enableRTLSplit ? 'css/[name].ltr.css' : 'css/[name].css';
+  const cssRTLFileNameTempalte = 'css/[name].rtl.css'; // const selectorWeightLocal = windowsModification(exclude.selectorWeight);
+
+  const pluginsArr = [new _plugins.CleanUpStatsPlugin(), new _caseSensitivePathsWebpackPlugin.default(), new _webpack.default.IgnorePlugin(/^\.\/domain$/, /moment$/), new _webpack.default.DefinePlugin({
     __CLIENT__: true,
     __TEST__: false,
     __SERVER__: false,
@@ -79,7 +93,7 @@ let getDevPlugins = (options, publicPath) => {
   }), new _plugins.ResourceHintsPlugin()];
 
   if (enableRTLSplit) {
-    plugins.push(new _RtlCssPlugin.RtlCssPlugin({
+    pluginsArr.push(new _RtlCssPlugin.RtlCssPlugin({
       templateLabel: options.css.templateLabel,
       dirVarName: options.css.dirVarName,
       disableMiniFiySelector: options.css.disableMiniFiySelector,
@@ -90,24 +104,24 @@ let getDevPlugins = (options, publicPath) => {
   }
 
   if (unusedFiles.enable) {
-    plugins.push(new _plugins.UnusedFilesFindPlugin(Object.assign(unusedFiles, {
+    pluginsArr.push(new _plugins.UnusedFilesFindPlugin(Object.assign(unusedFiles, {
       origin: _path.default.join(process.cwd(), folder)
     })));
   }
 
   const i18nManifestFileName = 'i18n-manifest.json';
-  /**
-   * NOTE:
-   *  this file name ext .i18n.js added
-   *  Because, in service worker they maintain cache as file name based
-   *  So, to make differce we added .i18n.js ext.
+  /**
+   * NOTE:
+   *  this file name ext .i18n.js added
+   *  Because, in service worker they maintain cache as file name based
+   *  So, to make differce we added .i18n.js ext.
    */
 
   const i18nFileNameTemplate = 'i18n-chunk/[locale]/[name].i18n.js';
   const i18nPublicPath = publicPath || '';
 
   if (i18n.chunkSplitEnable) {
-    plugins.push(new _I18nSplitPlugin.default({
+    pluginsArr.push(new _I18nSplitPlugin.default({
       jsResource: i18n.jsResource,
       localeVarName: i18n.localeVarName,
       jsonpFunc: i18n.jsonpFunc,
@@ -119,10 +133,10 @@ let getDevPlugins = (options, publicPath) => {
       propertiesFolder: i18n.propertiesFolder
     }));
   } else {
-    let i18nPath = _path.default.join(process.cwd(), context, 'i18n');
+    const i18nPath = _path.default.join(process.cwd(), context, 'i18n');
 
     if (_fs.default.existsSync(i18nPath)) {
-      plugins.push(new _copyWebpackPlugin.default([{
+      pluginsArr.push(new _copyWebpackPlugin.default([{
         from: `${i18nPath}/`,
         to: './i18n/[name].[ext]',
         toType: 'template'
@@ -130,29 +144,30 @@ let getDevPlugins = (options, publicPath) => {
     }
   }
 
-  tpFolder && plugins.push(new _copyWebpackPlugin.default([{
+  tpFolder && pluginsArr.push(new _copyWebpackPlugin.default([{
     from: `${_path.default.join(process.cwd(), context, tpFolder)}/`,
     to: `./${tpFolder}/`,
     toType: 'dir'
   }]));
-  plugins.push(new _lodashWebpackPlugin.default({
+  pluginsArr.push(new _lodashWebpackPlugin.default({
     collections: true,
     shorthands: true
   }));
+  (0, _configHtmlWebpackPlugins.configHtmlWebpackPlugins)(pluginsArr, {
+    enableChunkHash: false,
+    mainEntryHtmlFile,
+    folder,
+    minify: false,
+    inject,
+    crossorigin,
+    hasEFC
+  });
 
   if (hasEFC) {
-    plugins.push(new _htmlWebpackPlugin.default({
-      chunksSortMode: 'none',
-      filename: 'index.html',
-      template: _path.default.join(process.cwd(), folder, 'index.html'),
-      excludeChunks: ['efc', 'widget'],
-      templateParameters: _common.templateParameters,
-      scriptLoading: 'defer',
-      inject: inject
-    }));
-    plugins.push(new _plugins.EFCPlugin({
+    pluginsArr.push(new _plugins.EFCPlugin({
       isDevelopment: true,
       i18nManifestFileName,
+      templateFilePath,
       i18nFileNameTemplate,
       serverUrl: publicPath,
       entryPointName: 'efc',
@@ -160,18 +175,9 @@ let getDevPlugins = (options, publicPath) => {
       localeAttr: efcLocaleAttr // outputFile: 'zohodesk-efc-sdk-latest.js',
 
     }));
-  } else {
-    plugins.push(new _htmlWebpackPlugin.default({
-      chunksSortMode: 'none',
-      filename: 'index.html',
-      template: _path.default.join(process.cwd(), folder, 'index.html'),
-      templateParameters: _common.templateParameters,
-      scriptLoading: 'defer',
-      inject: inject
-    }));
   }
 
-  plugins.push(new _plugins.I18NInjectIntoIndexPlugin({
+  pluginsArr.push(new _plugins.I18NInjectIntoIndexPlugin({
     publicPath: i18nPublicPath,
     isDevelopment: true,
     templateLabel: i18n.templateLabel || '{{--user-locale}}',
@@ -179,9 +185,28 @@ let getDevPlugins = (options, publicPath) => {
     i18nManifestFileName,
     mainChunkName: 'main'
   }));
-  instrumentScript && plugins.push(new _plugins.ScriptInstrumentPlugin());
-  hasShadowDOM && plugins.push(new _plugins.ShadowDOMSupportPlugin());
-  return plugins.filter(Boolean);
+  instrumentScript && pluginsArr.push(new _plugins.ScriptInstrumentPlugin());
+  hasShadowDOM && pluginsArr.push(new _plugins.ShadowDOMSupportPlugin());
+
+  if (devCssFileBountry) {
+    pluginsArr.push(new _RequireVariablePublicPlugin.default({
+      requireFuncName: 'require'
+    }));
+  }
+
+  if (pluginObject.cssVariableReplacement) {
+    pluginsArr.push(new _VariableConversionCollector.default({
+      cssVariableReplacementConfig
+    }));
+  }
+
+  if (pluginObject.selectorWeight) {
+    pluginsArr.push(new _SelectorPlugin.default({
+      selectorWeightConfig
+    }));
+  }
+
+  return pluginsArr.filter(Boolean);
 };
 
 var _default = getDevPlugins;

package/lib/pluginUtils/getDocsPlugins.js

@@ -9,37 +9,39 @@ var _caseSensitivePathsWebpackPlugin = _interopRequireDefault(require("case-sens
 
 var _miniCssExtractPlugin = _interopRequireDefault(require("mini-css-extract-plugin"));
 
+var _htmlWebpackPlugin = _interopRequireDefault(require("html-webpack-plugin"));
+
 var _webpack = _interopRequireDefault(require("webpack"));
 
 var _path = _interopRequireDefault(require("path"));
 
 var _plugins = require("../plugins");
 
+var _fs = require("fs");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let getDocsPlugins = (isSSTest, options) => {
-  let {
+// isForLibraryImpact this variable for now only used in getLibraryImactPlugins.
+// So you gona use it please check with that function as well
+const getDocsPlugins = (isSSTest, options, isForLibraryImpact = false) => {
+  const {
     app: {
       folder
     },
     unusedFiles
   } = options;
-  let plugins = [new _plugins.CleanUpStatsPlugin(), new _caseSensitivePathsWebpackPlugin.default(), new _webpack.default.ProvidePlugin({
+  const plugins = [new _plugins.CleanUpStatsPlugin(), new _caseSensitivePathsWebpackPlugin.default(), new _webpack.default.ProvidePlugin({
     React: 'react'
   }), new _webpack.default.DefinePlugin({
     __TEST__: false,
     __DEVELOPMENT__: true,
     __DOCS__: true
-  }), ...(isSSTest ? [new _plugins.ModuleStatsPlugin({
+  }), !isForLibraryImpact && new _plugins.ModuleStatsPlugin({
     filename: 'js/moduleStats.js'
-  })] : [new _plugins.LibraryImpactPlugin({
-    filename: 'js/libraryImpact.js'
-  })]), new _miniCssExtractPlugin.default({
+  }), new _miniCssExtractPlugin.default({
     filename: 'css/[name].css',
     chunkFilename: 'css/[name].css'
-  }), new _plugins.UnusedFilesFindPlugin(Object.assign(unusedFiles, {
-    origin: _path.default.join(process.cwd(), folder)
-  }))].filter(Boolean);
+  })].filter(Boolean);
 
   if (unusedFiles.enable) {
     plugins.push(new _plugins.UnusedFilesFindPlugin(Object.assign(unusedFiles, {
@@ -49,6 +51,15 @@ let getDocsPlugins = (isSSTest, options) => {
     })));
   }
 
+  const tempHTML = _path.default.join(__dirname, '../../templates/docs/a.html');
+
+  console.log('tempHTML', tempHTML, (0, _fs.existsSync)(tempHTML));
+  plugins.push(new _htmlWebpackPlugin.default({
+    filename: 'out.html',
+    template: tempHTML // scriptLoading: 'defer',
+    // inject: false
+
+  }));
   return plugins;
 };
 

package/lib/pluginUtils/getLibraryImactPlugins.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getLibraryImactPlugins;
+
+var _libraryImpactPlugin = _interopRequireDefault(require("../plugins/libraryImpactPlugin"));
+
+var _getDocsPlugins = _interopRequireDefault(require("./getDocsPlugins"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// import ModuleStatsPlugin from '../plugins/ModuleStatsPlugin';
+function getLibraryImactPlugins(options) {
+  let plugins = (0, _getDocsPlugins.default)(false, options, true); // for performance But for furture maintanablity we adding isForLibraryImpact in getDocsPlugin
+  // plugins.filter(plugin => !(plugin instanceof ModuleStatsPlugin));
+
+  plugins.push(new _libraryImpactPlugin.default({
+    filename: 'js/libraryImpact.js'
+  }));
+  return plugins;
+}