Merge pull request #7 from drolsen/dev

Dev 1.2.1

README.md

@@ -17,9 +17,9 @@ Some larger eco-systems like content management systems don't have the option or
 ### How it works
 Webpack JSX Exports takes all incoming JSX files (of a given plugin configuration), then at the end of a standard Webpack build the exporter will process these configured files and write them to disk.
 
-The process for both gathering is done using a glob methods devoid of webpack file gathering. This ensures that plugin configurations can still export files that might not be part of the overall webpack build.
+The process for gathering JSX is done using a glob methods devoid of Webpack file gathering. This ensures that plugin configurations can still export files that might not be part of the overall Webpack build.
 
-Further more the exporting method uses a babel register approach to reduce the amount of AST parsing and traversing but also allow for export to work devoid of webpack all together in a node script.
+Furthermore, the exporting method uses a babel register approach to reduce the amount of AST parsing and traversing but also allow for export to work devoid of Webpack all together in a node script.
 
 It's that simple!
 
@@ -41,34 +41,31 @@ const WebpackJSXExport = require('webpack-jsx-export');
 
 Instantiate new `WebpackJSXExport(...)` class within Webpack's plugin configuration array:
 ```js
-module.exports = {
+{
   "plugins": [
     new WebpackJSXExport()
   ]
-};
+}
 ```
 
 ---
 
 ## Options
 
 ```js
-module.exports = {
-  "plugins": [
-    new WebpackJSXExport({
-      ...options...
-    })
-  ]
-};
+new WebpackJSXExport({
+  ...options...
+})
 ```
 
 Option | Types | Description | Default
 --- | --- | --- | ---
 `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.out` | String | Output location of exported JSX files | -- 
+`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 | --
 `comment` | String or Boolean | Defines a custom comment, or no comment at all pre-pended to the top of exported files | --
 
@@ -118,7 +115,10 @@ new WebpackJSXExport({
 })
 ```
 
-Please note that there is NO trailing slash or file extension, which tells WebpackJSXExport that this is both a filename (not folder name) and to primes us to default `.html` file extension type on exports.
+Please note that there is NO trailing slash or file extension, which tells WebpackJSXExport that this is a filename (not folder name) and to primes us to default `.html` file extension type on exports.
+
+
+## options.files.extension
 
 By default the exported file extension is `.html`; however if you wish to change that, simply use the `extension` option to define a custom one:
 
@@ -149,6 +149,27 @@ 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:
 
 ```js
@@ -168,6 +189,26 @@ new WebpackJSXExport({
 ```
 Please note, the returning of a `false` value is what denotes a particular file not to be exported; so a `return file` is a required.
 
+---
+
+The `filter` option is also a way to re-define a file's source location before being shipped off to the export process. For instance, if the JSX file(s) in question have a schema up which defines the JSX somewhere other than root, we can re-target our `file.source` to that location:
+
+```js
+new WebpackJSXExport({
+  files: [{
+    input: './input/location-one/*.jsx',
+    output: './export/location/custom-name',
+    filter: (file) => {
+      if (file.source.default.schema) {
+        file.source.default = file.source.default.schema.special.place.source;
+      }
+
+      return file;
+    }
+  }]
+})
+```
+
 ## options.plugins
 There are two plugin types, `input` and `output`. The `input` plugin types are plugins that support the consuming (pre-rendering) of your JSX files, while the `output` are plugins that support exporting (post-rendering) of your JSX files.
 

index.js

@@ -13,6 +13,7 @@ class WebpackJSXExport {
         input: [],
         output: [],
       },
+      globals:{},
       comment: 'THIS FILE IS AUTO GENERATED BY WebpackJSXExport'
     }, options);   
 
@@ -75,7 +76,7 @@ class WebpackJSXExport {
       ),
       (e) => {
         if (e) {
-          console.log(e);
+          console.error(e);
           return false;
         }
       }
@@ -104,7 +105,7 @@ class WebpackJSXExport {
           }
         ], [
           require.resolve('babel-plugin-module-resolver'), {  // (see: https://www.npmjs.com/package/babel-plugin-module-resolver)
-            'alias': (compiler) ? compiler.options.resovle : {}
+            'alias': (compiler) ? compiler.options.resolve.alias : {}
           }
         ], 
         this.options.plugins.length 
@@ -125,6 +126,13 @@ class WebpackJSXExport {
         '@babel/plugin-transform-reserved-words'              // (see: https://babeljs.io/docs/en/babel-plugin-transform-reserved-words)
       ]
     });
+
+    // Now that our babel is registered, we can hoist up globals
+    if (this.options.globals.length) {
+      Object.keys(this.options.globals).map((i) => {
+        global[i] = require(this.options.globals[i]);
+      });
+    }
   }
 
   // Helper method to collect JSX files
@@ -238,4 +246,3 @@ class WebpackJSXExport {
 }
 
 module.exports = WebpackJSXExport;
-

package.json

@@ -11,7 +11,7 @@
     "webpack jsx static export",
     "webpack jsx static render export"
   ],
-  "version": "1.1.5",
+  "version": "1.2.1",
   "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 htl-test && npm run razor-test && npm run php-test && npm run glob-test && npm run filter-test && npm run extension-filter-test && npm run node-test && npm run ava-test",
+    "test": "npm run basic-test && npm run conditions-test && npm run extension-test && npm run custom-test && npm run htl-test && npm run razor-test && npm run php-test && npm run glob-test && npm run filter-test && npm run extension-filter-test && npm run filter-schema-test && npm run node-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",
     "extension-test": "webpack --config ./test/extensions/extension.test.config.js --mode production",
@@ -30,14 +30,15 @@
     "php-test": "webpack --config ./test/plugins/php.test.config.js --mode production",
     "glob-test": "webpack --config ./test/glob/glob.test.config.js --mode production",
     "filter-test": "webpack --config ./test/filtering/filter.test.config.js --mode production",
+    "filter-schema-test": "webpack --config ./test/filtering/filter-alt-schema.test.config.js --mode production",
     "extension-filter-test": "webpack --config ./test/extensions/extension-filter.test.config.js --mode production",
     "node-test": "node ./test/node/node.test.js",
     "ava-test": "ava ./test/ava.test.js"
   },
   "engines": {
     "node": ">=14.17.0"
   },
-  "dependencies": {
+  "devDependencies": {
     "@babel/core": "7.16.0",
     "@babel/plugin-proposal-async-generator-functions": "7.16.0",
     "@babel/plugin-proposal-class-properties": "7.16.0",
@@ -51,20 +52,18 @@
     "@babel/preset-env": "7.16.0",
     "@babel/preset-react": "7.16.0",
     "@babel/register": "7.16.0",
+    "ava": "4.0.1",
     "babel-plugin-css-modules-transform": "1.6.2",
     "babel-plugin-file-loader": "2.0.0",
     "babel-plugin-import-globals": "2.0.0",
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-transform-require-context": "0.1.1",
+    "node-html-parser": "5.2.0",
+    "pretty": "2.0.0",
     "prop-types": "15.7.2",
     "react": "16.9.0",
     "react-dom": "16.9.0",
-    "node-html-parser": "5.2.0",
-    "pretty": "2.0.0"
-  },
-  "devDependencies": {
-    "ava": "^4.0.1",
-    "webpack": "^5.65.0",
-    "webpack-cli": "^4.9.1"
+    "webpack": "5.65.0",
+    "webpack-cli": "4.9.1"
   }
 }

test/ava.test.js

@@ -128,3 +128,17 @@ test('extension-filter-test', t => {
     t.fail();
   }
 });
+
+test('filter-alt-schema-test', t => {
+  let pass = true;
+
+  if (!fs.existsSync(path.resolve(__dirname, './../dist/filter/alt-schema.html'))) {
+    pass = false;
+  }
+
+  if (pass) {
+    t.pass();
+  } else {
+    t.fail();
+  }
+});

test/filtering/alt-schema.jsx

@@ -0,0 +1,19 @@
+/**
+  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 {
+  name: 'alt-schema',
+  custom: {
+    location: {
+      source: (
+        <Container>
+          <Container>Hello world!</Container>
+        </Container>
+      )
+    }
+  }
+};

test/filtering/filter-alt-schema.test.config.js

@@ -0,0 +1,32 @@
+const WebpackJSXExport = require('../../index.js');
+const path = require('path');
+
+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/filtering/alt-schema.jsx',
+        output: './dist/filter/',
+        filter: (file) => {
+          let source = file.source.default;
+          if (source.custom.location.source) {
+            file.source.default = [source.custom.location.source];
+          }
+          return file;
+        }
+      }]
+    })
+  ];
+  return config;
+};

test/filtering/filter.test.config.js

@@ -19,6 +19,7 @@ module.exports = (env, argv) => {
         input: './test/filtering/*.jsx',
         output: './dist/filter/',
         filter: (file) => {
+          if (file.name.indexOf('alt-schema') !== -1) { return false; }
           if (file.name.indexOf('razor') !== -1) { return false; }
 
           return file;