Merge pull request #10 from drolsen/dev

Dev 1.3.0 Release

README.md

@@ -60,14 +60,15 @@ new WebpackJSXExport({
 
 Option | Types | Description | Default
 --- | --- | --- | ---
-`files` | Object Array | Defines both input and output paths of JSX and exported file(s) | -- 
+`files` | Object Array | Defines both input and output paths of JSX and exported file(s) | [] 
 `files.input` | String | Input location of individual or glob .JSX file(s) | -- 
 `files.output` | String | Output location of exported JSX files | -- 
 `files.extension` | String or Function | Defines exported file(s) extension type | .html
 `files.filter` | Function | Filters away imported .JSX files that you wish NOT to be exported | --
-`globals` | Object | Defines any global namespaces or libraries required to process your JSX
-`plugins` | Array | Defines custom plugins used during the processing of each exported JSX file | --
+`globals` | Object | Defines any global namespaces or libraries required to process your JSX | {}
+`plugins` | Object | Defines custom plugins used during the processing of each exported JSX file | {}
 `comment` | String, Boolean or Function | Defines a custom comment prepended to the top of exported files | --
+`warnings` | Boolean | Defines if JSX prop warnings should be shown in terminal or not | true
 
 
 ## options.files
@@ -150,25 +151,6 @@ new WebpackJSXExport({
 ```
 Please note you must return `file` to send changes off to export process.
 
-
-## options.files.globals
-
-Because WebpackJSXExport approaches JSX babel transpile with a register approach, context of global namespaces or libraries is foreign to the export process. The `files.globals` option allows you to define these global parts required to successfully render a standalone version of your JSX file(s).
-
-```js
-new WebpackJSXExport({
-  files: [{
-    input: './input/location-one/*.jsx',
-    output: './export/location/custom-name',
-    globals: {
-      'Utilities': path.resolve('../../utilities.jsx'),
-      'Helpers': path.resolve('../../helpers.jsx')
-    }
-  }]
-})
-```
-In the above example, its assumed our input JSX files are using a `Utilities` and `Helpers` global namespace for two libraries in some way. We define these global namespaces here so our export process has context when faced with JSX file that might be using them.
-
 ## options.files.filter
 
 Lastly `files` options offers a `filter` method that allows you to filter away .JSX files you wish NOT to be exported under a glob input scenario:
@@ -226,6 +208,26 @@ new WebpackJSXExport({
 })
 ```
 
+## options.globals
+
+Because WebpackJSXExport approaches JSX babel transpile with a plugin register approach, context of global namespaces or libraries is foreign to the export process. The `files.globals` option allows you to define these global parts required to successfully render a standalone version of your JSX file(s).
+
+```js
+new WebpackJSXExport({
+  files: [{
+    input: './input/location-one/*.jsx',
+    output: './export/location/custom-name'
+  }],
+  globals: {
+    'Utilities': path.resolve('../../utilities.jsx'),
+    'Helpers': path.resolve('../../helpers.jsx')
+  }  
+})
+```
+
+In the above example, its assumed our input JSX files are using a `Utilities` and `Helpers` global namespace for two libraries in some way. We define these global namespaces here so our export process has context when faced with JSX file that might be using them.
+
+
 ## options.plugins.input
 The `plugins.input` option allows you to specify additional plugins to support the processing of JSX syntax before being rendered for export. This is useful if your JSX uses a newer syntax that requires a babel plugin(s).
 
@@ -300,6 +302,17 @@ new WebpackJSXExport({
 })
 ```
 
+## options.warnings
+If you for some reason would like to obscure any JSX warnings you noramlly see in browser console from the terminal during exporting, set the `warnings` option to `false`. 
+
+```js
+new WebpackJSXExport({
+  comment: 'Please do not edit this file! This was generated at build!'
+})
+```
+By default the `warnings` option is `true` with the idea being its better hoist need to fix issue up higher and sooner for developers to see and resolve rather than out in production in browser console.
+
+
 ### NodeJS Script Usage
 ```js
 const WebpackJSXExport = require('../index.js');

index.js

@@ -6,6 +6,9 @@ const ReactDOM = require('react-dom/server');
 const pretty = require('pretty');
 const merge = require('merge-deep');
 
+const QuotesPlugin = require('./plugins/symbols.plugin.js');
+const SymbolsPlugin = require('./plugins/symbols.plugin.js');
+
 class WebpackJSXExport {
   constructor(options) {
     this.defaultFilter = (file) => { return file; }
@@ -20,24 +23,26 @@ class WebpackJSXExport {
       return file; 
     };
 
-    this.options = merge(options, {
+    this.options = merge({
       files: [],
       plugins: {
         input: [],
-        output: [],
+        output: [
+          QuotesPlugin,
+          SymbolsPlugin
+        ],
       },
-      globals:{}
-    });
-  }
+      globals:{},
+      warnings: true
+    }, options);
 
-  // Helper method used to clean up markup results
-  clean(markup, rules) {
-    Object.keys(rules).map((i) => {
-      markup = markup.replace(new RegExp(i, 'g'), rules[i]);
-      return false;
-    });
+    this.originalError = console.error.bind(console.error);
 
-    return markup;
+    if (this.options.warnings === false) {
+      console.error = (msg) => {
+        if (msg.toString().indexOf('Warning: React') !== -1) { return false; }
+      };      
+    }   
   }
 
   // Helper method that is used procure JSX into Markup and write to disk
@@ -55,20 +60,7 @@ class WebpackJSXExport {
       });     
     } catch (err) { console.error(err); }
 
-    let DOM = parse(
-      this.clean(
-        ReactDOM.renderToStaticMarkup(fileInfo.source.default), 
-        {
-          'data-sly-unwrap=""': 'data-sly-unwrap',
-          '"': '"',
-          '"': '"',
-          ''': '\'',
-          '&': '&',
-          ''': '\'',
-          '>': '>'
-        }
-      )
-    );
+    let DOM = parse(ReactDOM.renderToStaticMarkup(fileInfo.source.default));
 
     // Process plugin PostParse hooks
     try {
@@ -103,6 +95,8 @@ class WebpackJSXExport {
         }
       }
     );
+
+    console.error = this.originalError;
   }
 
   // Helper method to register babel plugins for JSX collecting

package.json

@@ -11,7 +11,7 @@
     "webpack jsx static export",
     "webpack jsx static render export"
   ],
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "Plugin to allow for the static rendering and exporting of JSX files to disk",
   "repository": "drolsen/webpack-jsx-export",
   "bugs": {
@@ -20,7 +20,7 @@
   "author": "Devin R. Olsen <devin@devinrolsen.com> (http://devinrolsen.com)",
   "license": "MIT",
   "scripts": {
-    "test": "npm run basic-test && npm run conditions-test && npm run extension-test && npm run custom-test && npm run plugin-test && npm run glob-test && npm run filter-test && npm run node-test && npm run comment-test && npm run ava-test",
+    "test": "npm run basic-test && npm run conditions-test && npm run extension-test && npm run custom-test && npm run plugin-test && npm run glob-test && npm run filter-test && npm run node-test && npm run comment-test && npm run warning-test && npm run ava-test",
     "basic-test": "webpack --config ./test/basic/basic.test.config.js --mode production",
     "custom-test": "webpack --config ./test/custom/custom.test.config.js --mode production",
     "comment-test": "webpack --config ./test/comments/comment-custom.test.config.js --mode production && webpack --config ./test/comments/comment-false.test.config.js --mode production && webpack --config ./test/comments/comment-filter.test.config.js --mode production",
@@ -30,6 +30,7 @@
     "filter-test": "webpack --config ./test/filtering/filter.test.config.js --mode production && webpack --config ./test/filtering/filter-alt-schema.test.config.js --mode production && webpack --config ./test/extensions/extension-filter.test.config.js --mode production",
     "glob-test": "webpack --config ./test/glob/glob.test.config.js --mode production",
     "node-test": "node ./test/node/node.test.js",
+    "warning-test": "webpack --config ./test/warnings/warning.test.config.js --mode production",
     "ava-test": "ava ./test/ava.test.js"
   },
   "engines": {

plugins/htl.plugin.js

@@ -3,9 +3,18 @@
 const HTL = (options = {}) => {
   options = Object.assign({}, {});
 
+  const clean = (markup, rules) => {
+    Object.keys(rules).map((i) => {
+      markup = markup.replace(new RegExp(i, 'g'), rules[i]);
+      return false;
+    });
+
+    return markup;
+  };
+
   return {
     PostParse (document) {
-
+      document = clean(document.toString(), { 'data-sly-unwrap=""': 'data-sly-unwrap' });
     }
   };
 };

plugins/quotes.plugin.js

@@ -0,0 +1,30 @@
+// Simple plugin to fix quotes
+
+const Quotes = (options = {}) => {
+  options = Object.assign({}, {});
+
+  const clean = (markup, rules) => {
+    Object.keys(rules).map((i) => {
+      markup = markup.replace(new RegExp(i, 'g'), rules[i]);
+      return false;
+    });
+
+    return markup;
+  };
+
+  return {
+    PostParse (document) {
+      document = clean(
+        document.toString(),
+        {
+          '"': '"',
+          '"': '"',
+          ''': '\'',
+          ''': '\''
+        }      
+      );
+    }
+  };
+};
+
+module.exports = Quotes;

plugins/symbols.plugin.js

@@ -0,0 +1,28 @@
+// Simple plugin to fix quotes
+
+const Quotes = (options = {}) => {
+  options = Object.assign({}, {});
+
+  const clean = (markup, rules) => {
+    Object.keys(rules).map((i) => {
+      markup = markup.replace(new RegExp(i, 'g'), rules[i]);
+      return false;
+    });
+
+    return markup;
+  };
+
+  return {
+    PostParse (document) {
+      document = clean(
+        document.toString(),
+        {
+          '&': '&',
+          '>': '>'
+        }      
+      );
+    }
+  };
+};
+
+module.exports = Quotes;

test/ava.test.js

@@ -190,3 +190,19 @@ test('comment-false-test', t => {
     t.fail();
   }
 });
+
+test('warnings-test', t => {
+  let pass = fs.readFileSync(path.resolve(__dirname, './../dist/warnings/warning.log'), 'utf8');
+
+  if (pass.indexOf('Warning:') === -1) {
+    pass = true;
+  } else {
+    pass = false;
+  }
+
+  if (pass) {
+    t.pass();
+  } else {
+    t.fail();
+  }
+});

test/warnings/warning.jsx

@@ -0,0 +1,12 @@
+/**
+  Container is all purpose element that acts as a general parent container for other elements.
+  The container element also comes with a large number of layout control form Flex to CSS grids.
+*/
+
+import Container from '../elements/container.jsx';
+
+export default (
+  <Container>
+    <Container someUnknownAttribute={true}>Hello world!</Container>
+  </Container>
+);

test/warnings/warning.test.config.js

@@ -0,0 +1,55 @@
+const path = require('path');
+const fs = require('fs');
+const util = require('util');
+
+if (!fs.existsSync(path.resolve(__dirname, '../../dist/warnings/'))) {
+  fs.mkdirSync(path.resolve(__dirname, '../../dist/warnings/'),  { recursive: true });
+}
+
+if (!fs.existsSync(path.resolve(__dirname, '../../dist/warnings/debug.log'))) {
+  fs.writeFile(
+    path.resolve(__dirname, '../../dist/warnings/warning.log'), 
+    '',
+    (e) => {
+      if (e) {
+        console.error(e);
+        return false;
+      }
+    }
+  );
+}
+
+const log_file = fs.createWriteStream(path.resolve(__dirname, '../../dist/warnings/warning.log'), {flags : 'w'});
+const log_stdout = process.stdout;
+
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const WebpackJSXExport = require('../../index.js');
+
+console.error = (d) => {
+  log_file.write(util.format(d) + '\n');
+  log_stdout.write(util.format(d) + '\n');
+};
+
+const config = {
+  entry: path.resolve(__dirname, '../dummy-entry.js'),
+  output: {
+    path: path.resolve(__dirname, '../../dist'), 
+    filename: '[name].js'
+  },
+  optimization: {
+    minimize: false
+  }
+};
+
+module.exports = (env, argv) => {
+  config.plugins = [
+    new WebpackJSXExport({
+      files: [{
+        input: './test/warnings/warning.jsx',
+        output: './dist/warnings/'
+      }],
+      warnings: false
+    })
+  ];
+  return config;
+};