refactor: expand js extensions for webpack (#57)

DOCS.md

@@ -11,29 +11,29 @@ The basic use requirements:
 </details>
 
 <details>
-<summary><h3 style="display: inline-block">Setup a project</h3></summary>
+<summary><h3 style="display: inline-block">Set up a project</h3></summary>
 
 `weldable` makes assumptions on project structure in order to be up and moving. Many of these assumptions can be
 overridden, or ignored, to fit your own preferences.
 
 Assumptions `weldable` presets...
 - `src` project directory, `Your project -> src -> your work`
-- `index.(js|jsx|ts|tsx)` application prefix and possible extensions located in `src`, `Your project -> src -> index.(js|jsx|ts|tsx)` 
+- `index.(js|mjs|cjs|jsx|ts|mts|cts|tsx)` application prefix and possible extensions located in `src`, `Your project -> src -> index.(js|mjs|cjs|jsx|ts|mts|cts|tsx)` 
 - `dist` directory for webpack bundle output, `Your project -> dist`
 - `localhost` host name
 - `port` default of `3000`
 
 > To alter these presets see [`dotenv`](#dotenv-use) use.
 
-#### Setup
+#### Basic setup
 > All setup directions are based on a MacOS experience. If Linux, or Windows, is used and
 you feel the directions could be updated please open a pull request to update documentation.
 
 **For those with experience**, to get up and running quickly...
 
 1. Confirm you installed the correct version of [NodeJS](https://nodejs.org)
 1. Confirm you added `weldable` as a `dependency` to your project
-1. Make sure you have a `src` directory with at least an `index.(js|jsx|ts|tsx)`
+1. Make sure you have a `src` directory with at least an `index.(js|ts)`
 1. Create NPM scripts that reference the `weldable` CLI
    ```
    "scripts": {
@@ -93,6 +93,112 @@ you feel the directions could be updated please open a pull request to update do
    > If things are NOT working, `weldable` and `webpack` should provide messaging to help you
    > debug why your bundle isn't being compiled 
 
+#### Set up a JS framework, like React
+At its most basic `weldable` does not work out of the box with frameworks, like React, unless a loader we've included happens to support 
+said framework, such as `ts-loader` and `React`.
+
+What that means is you may have to modify and use your own webpack configuration loader.
+
+**Set up a React project with `ts-loader`**
+
+1. Confirm you installed the correct version of [NodeJS](https://nodejs.org)
+1. Confirm you added [`weldable`](https://www.npmjs.com/package/weldable) as a `dependency` to your project
+1. Confirm you added [`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) as `dependencies` for your project
+1. Create a basic `tsconfig.json` in the root of your project directory with the following content. After everything is working modify as needed.
+   ```
+     {
+       "compilerOptions": {
+         "allowJs": true,
+         "allowSyntheticDefaultImports": true,
+         "jsx": "react",
+         "module": "esnext"
+       }
+     }
+   ```
+
+1. Make sure you have a `src` directory with at least an `index.tsx`, and the following content.
+   ```
+     import React from 'react';
+     import { createRoot } from 'react-dom/client';
+
+     const body = document.querySelector('BODY');
+     const div = document.createElement('div');
+     body.appendChild(div);
+   
+     const App = () => <>hello world</>; 
+   
+     const root = createRoot(div);
+     root.render(<App />);
+    
+   ```
+1. Create NPM scripts that reference the `weldable` CLI
+   ```
+     "scripts": {
+      "build": "weldable",
+      "start": "weldable -e development -l ts"
+     }
+   ```
+1. Run the NPM scripts and that's it. You should see `hello world`, when you run `$ npm start`, displayed in a browser window.
+   > If the browser failed to open you can find the content at http://localhost:3000/
+
+
+**Set up a React project with `babel-loader`**
+
+1. Confirm you installed the correct version of [NodeJS](https://nodejs.org)
+1. Confirm you added [`weldable`](https://www.npmjs.com/package/weldable) as a `dependency` to your project
+1. Confirm you added [`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) as `dependencies` for your project
+1. Create a basic `babel.config.js` file with the following content
+   ```
+     module.exports = {};
+   ```
+1. Create a basic `webpack.config.js` in the root of your project directory with the following content. After everything working modify as needed.
+   ```
+     const { babelLoaderResolve, babelPresetEnvResolve, babelPresetReactResolve } = require('weldable/lib/packages');
+
+     module.exports = ({ SRC_DIR } = {}) => ({
+       module: {
+         rules: [
+           {
+             test: /\.(jsx|js)?$/,
+             include: [SRC_DIR],
+             use: [
+               {
+                 loader: babelLoaderResolve,
+                 options: {
+                   presets: [babelPresetEnvResolve, babelPresetReactResolve]
+                 }
+               }
+             ]
+           }
+         ]
+       }
+     });
+   ```
+
+1. Make sure you have a `src` directory with at least an `index.js`, and the following content.
+   ```
+     import React from 'react';
+     import { createRoot } from 'react-dom/client';
+
+     const body = document.querySelector('BODY');
+     const div = document.createElement('div');
+     body.appendChild(div);
+   
+     const App = () => <>hello world</>; 
+   
+     const root = createRoot(div);
+     root.render(<App />);
+    
+   ```
+1. Create NPM scripts that reference the `weldable` CLI
+   ```
+     "scripts": {
+      "build": "weldable -x ./webpack.config.js",
+      "start": "weldable -e development -x ./webpack.config.js"
+     }
+   ```
+1. Run the NPM scripts and that's it. You should see `hello world`, when you run `$ npm start`, displayed in a browser window.
+   > If the browser failed to open you can find the content at http://localhost:3000/
 
 </details>
 

README.md

@@ -11,6 +11,7 @@ The goal of `weldable` is to make it easier to install `webpack` build packages
 `weldable` is intended...
 
 - To be quickly used for basic webpack development and production builds.
+- To purposefully not include webpack configurations for JS frameworks beyond basic JS and exposing basic related NPM loader packages.
 - To purposefully not include webpack configurations for linting and styling aspects beyond basic webpack capabilities.
 - To be designed with the expectation that you can expand on the `weldable` base using the CLI extend option. `-x ./webpack.exampleConfig.js`.
 - To be used as a single build resource with exposed webpack plugins/addons. And without the need to reinstall available webpack packages (or at least the ones `weldable` uses).

__fixtures__/src/index.js

@@ -1,8 +1,9 @@
 import './index.css';
+import { hello } from './world';
 
 (() => {
   const body = document.querySelector('BODY');
   const div = document.createElement('div');
-  div.innerText = `${process.env.MOCK_JS_VALUE} hello world`;
+  div.innerText = `${process.env.MOCK_JS_VALUE} ${hello()}`;
   body.appendChild(div);
 })();

__fixtures__/src/world.jsx

@@ -0,0 +1,3 @@
+const hello = () => 'Hello World!';
+
+export { hello as default, hello };

cspell.config.json

@@ -1,6 +1,7 @@
 {
   "language": "en",
   "words": [
+    "babel",
     "chunkfixture",
     "codecov",
     "cmds",

jest.setupTests.js

@@ -13,6 +13,7 @@ jest.mock('child_process', () => ({
  */
 jest.mock('./lib/packages', () => ({
   babelLoaderResolve: 'babel-loader',
+  babelPresetEnvResolve: '@babel/preset-env',
   cssLoaderResolve: 'css-loader',
   tsLoaderResolve: 'ts-loader'
 }));

src/README.md

@@ -150,13 +150,27 @@ dotenv parameters are string based, failed or missing dotenv parameters return a
 ## Global
 
 * [Global](#module_Global)
+    * [~jsFileExtensions](#module_Global..jsFileExtensions) : <code>Array.&lt;string&gt;</code>
+    * [~tsFileExtensions](#module_Global..tsFileExtensions) : <code>Array.&lt;string&gt;</code>
     * [~contextPath](#module_Global..contextPath) : <code>string</code>
     * [~OPTIONS](#module_Global..OPTIONS) : <code>Object</code>
     * [~errorMessageHandler(errors)](#module_Global..errorMessageHandler) ⇒ <code>string</code> \| <code>any</code> \| <code>Array.&lt;any&gt;</code>
     * [~isPromise(obj)](#module_Global..isPromise) ⇒ <code>boolean</code>
     * [~dynamicImport(file)](#module_Global..dynamicImport) ⇒ <code>Promise.&lt;any&gt;</code>
     * [~createFile(contents, options)](#module_Global..createFile) ⇒ <code>Object</code>
 
+<a name="module_Global..jsFileExtensions"></a>
+
+### Global~jsFileExtensions : <code>Array.&lt;string&gt;</code>
+JS file extensions
+
+**Kind**: inner constant of [<code>Global</code>](#module_Global)  
+<a name="module_Global..tsFileExtensions"></a>
+
+### Global~tsFileExtensions : <code>Array.&lt;string&gt;</code>
+TS file extensions
+
+**Kind**: inner constant of [<code>Global</code>](#module_Global)  
 <a name="module_Global..contextPath"></a>
 
 ### Global~contextPath : <code>string</code>
@@ -453,7 +467,7 @@ Start webpack development or production.
 
 * [webpackConfigs](#module_webpackConfigs)
     * [~preprocessLoader(dotenv, options)](#module_webpackConfigs..preprocessLoader) ⇒ <code>Object</code>
-    * [~common(dotenv, options)](#module_webpackConfigs..common) ⇒ <code>Object</code>
+    * [~common(dotenv)](#module_webpackConfigs..common) ⇒ <code>Object</code>
     * [~development(dotenv)](#module_webpackConfigs..development) ⇒ <code>Object</code>
     * [~production(dotenv)](#module_webpackConfigs..production) ⇒ <code>Object</code>
 
@@ -483,7 +497,7 @@ Assumption based preprocess loader
 
 <a name="module_webpackConfigs..common"></a>
 
-### webpackConfigs~common(dotenv, options) ⇒ <code>Object</code>
+### webpackConfigs~common(dotenv) ⇒ <code>Object</code>
 Common webpack settings between environments.
 
 **Kind**: inner method of [<code>webpackConfigs</code>](#module_webpackConfigs)  
@@ -512,10 +526,6 @@ Common webpack settings between environments.
     <td>dotenv._BUILD_STATIC_DIR</td><td><code>string</code></td>
     </tr><tr>
     <td>dotenv._BUILD_UI_NAME</td><td><code>string</code></td>
-    </tr><tr>
-    <td>options</td><td><code>object</code></td>
-    </tr><tr>
-    <td>options.loader</td><td><code>string</code></td>
     </tr>  </tbody>
 </table>
 

src/__tests__/__snapshots__/global.test.js.snap

@@ -37,6 +37,18 @@ exports[`Global should return specific properties: specific properties 1`] = `
   "dynamicImport": [Function],
   "errorMessageHandler": [Function],
   "isPromise": [Function],
+  "jsFileExtensions": [
+    "js",
+    "jsx",
+    "mjs",
+    "cjs",
+  ],
+  "tsFileExtensions": [
+    "ts",
+    "tsx",
+    "mts",
+    "cts",
+  ],
 }
 `;
 

src/__tests__/__snapshots__/wp.test.js.snap

@@ -425,9 +425,22 @@ exports[`webpack should create a webpack config with language: language configur
         "include": [
           "./__fixtures__/src"
         ],
+        "resolve": {
+          "extensions": [
+            ".js",
+            ".jsx",
+            ".mjs",
+            ".cjs"
+          ]
+        },
         "use": [
           {
-            "loader": "babel-loader"
+            "loader": "babel-loader",
+            "options": {
+              "presets": [
+                "@babel/preset-env"
+              ]
+            }
           }
         ]
       }
@@ -608,9 +621,22 @@ exports[`webpack should create a webpack config with language: language configur
         "include": [
           "./__fixtures__/src"
         ],
+        "resolve": {
+          "extensions": [
+            ".js",
+            ".jsx",
+            ".mjs",
+            ".cjs"
+          ]
+        },
         "use": [
           {
-            "loader": "babel-loader"
+            "loader": "babel-loader",
+            "options": {
+              "presets": [
+                "@babel/preset-env"
+              ]
+            }
           }
         ]
       }

src/__tests__/__snapshots__/wpConfigs.test.js.snap

@@ -592,16 +592,16 @@ exports[`webpackConfigs should return a development configuration object: develo
 exports[`webpackConfigs should return a preprocessLoader configuration object: language dev, prod hashes 1`] = `
 [
   {
-    "devHash": "622840d4852c749c1df5e7325bca73a1",
+    "devHash": "b1a27bfb44b6063a2a599931989a64f8",
     "isEqual": true,
     "loader": "js",
-    "prodHash": "622840d4852c749c1df5e7325bca73a1",
+    "prodHash": "b1a27bfb44b6063a2a599931989a64f8",
   },
   {
-    "devHash": "7149a7a85fe5bc99f81782452e2c0ced",
+    "devHash": "6cf8d288bb31e0a6e6c97b9d54e0c192",
     "isEqual": true,
     "loader": "ts",
-    "prodHash": "7149a7a85fe5bc99f81782452e2c0ced",
+    "prodHash": "6cf8d288bb31e0a6e6c97b9d54e0c192",
   },
   {
     "devHash": "49e595be76828acf4f2a3617fea9a378",
@@ -621,9 +621,22 @@ exports[`webpackConfigs should return a preprocessLoader configuration object: p
         "include": [
           "./__fixtures__/src"
         ],
+        "resolve": {
+          "extensions": [
+            ".js",
+            ".jsx",
+            ".mjs",
+            ".cjs"
+          ]
+        },
         "use": [
           {
-            "loader": "babel-loader"
+            "loader": "babel-loader",
+            "options": {
+              "presets": [
+                "@babel/preset-env"
+              ]
+            }
           }
         ]
       }
@@ -649,6 +662,18 @@ exports[`webpackConfigs should return a preprocessLoader configuration object: p
         "include": [
           "./__fixtures__/src"
         ],
+        "resolve": {
+          "extensions": [
+            ".ts",
+            ".tsx",
+            ".mts",
+            ".cts",
+            ".js",
+            ".jsx",
+            ".mjs",
+            ".cjs"
+          ]
+        },
         "use": [
           {
             "loader": "ts-loader"