open-index/open-npm huggingface dataset:
npm package: @mihanizm56/webpack-magic-redux-modules
Description: webpack redux utils
Latest version: 0.0.7

# @mihanizm56/webpack-magic-redux-modules

## Webpack loader to magically incapsulate your actions with the your module-name (folder name) prefix

### Redux actions, sagas and reducers must be written in the example below (according to the RegExps below)

### Files that are watched by replacers

```javascript
// for actions
const actionsRegExp = /actions\.[jt]s$/;
// for reducers
const reducersRegExp = /reducer\.[jt]s$/;
// for sagas
const sagasRegExp = /saga\.[jt]s$/;
// for constants
const constantsRegExp = /_?constants\.[jt]s$/;
```

### Example of usage

```javascript
// actions.js (or .ts) in dir redux/some-module/actions.js
export const FETCH_PAYMENTS_ACTION_SAGA = 'FETCH_PAYMENTS_ACTION_SAGA';
// 'FETCH_PAYMENTS_ACTION_SAGA' transforms to 'some-module_FETCH_PAYMENTS_ACTION_SAGA'
export const fetchPaymentsActionSaga = payload => ({
  type: FETCH_PAYMENTS_ACTION_SAGA,
  payload,
});

export const SET_PAYMENTS_LOADING_START = 'SET_PAYMENTS_LOADING_START';
// 'SET_PAYMENTS_LOADING_START' transforms to 'some-module_SET_PAYMENTS_LOADING_START'
export const setPaymentsLoadingStartAction = () => ({
  type: SET_PAYMENTS_LOADING_START,
});
```

```javascript
// reducer.js (or .ts) in dir redux/some-module/reducer.js
export const REPORT_INFO_REDUCER_NAME = 'REPORT_INFO_REDUCER_NAME';
// 'REPORT_INFO_REDUCER_NAME' transforms to 'some-module_REPORT_INFO_REDUCER_NAME'
```

```javascript
// load-details-list-table-watcher-saga.js (or .ts) in dir redux/some-module/load-details-list-table-watcher-saga.js.js
export const LOAD_DETAILS_LIST_TABLE_WATCHER_SAGA =
  'LOAD_DETAILS_LIST_TABLE_WATCHER_SAGA';
// 'LOAD_DETAILS_LIST_TABLE_WATCHER_SAGA' transforms to 'some-module_LOAD_DETAILS_LIST_TABLE_WATCHER_SAGA'
```

```javascript
// webpack.config.js
const ActionsLoaderConfig = require('@mihanizm56/@mihanizm56/webpack-magic-redux-modules/lib/loader-config');

module.exports = {
  // your config ...
  module: {
    rules: [
      // your rules ...
      ActionsLoaderConfig()
    ]
  }
};
```

### Be careful - all redux modules must be placed in dir "redux" or "_redux"


### We have a special parameter that adds prefix from package.json "name" field 
```javascript
// webpack.config.js
const ActionsLoaderConfig = require('@mihanizm56/@mihanizm56/webpack-magic-redux-modules/lib/loader-config');

module.exports = {
  // your config ...
  module: {
    rules: [
      // your rules ...
      ActionsLoaderConfig({
        withPkgJsonName: true
      })
    ]
  }
};

// actions.js (or .ts) in dir redux/some-module/actions.js
export const FETCH_PAYMENTS_ACTION_SAGA = 'FETCH_PAYMENTS_ACTION_SAGA';
// 'FETCH_PAYMENTS_ACTION_SAGA' transforms to '<package.json.name>_some-module_FETCH_PAYMENTS_ACTION_SAGA'
export const fetchPaymentsActionSaga = payload => ({
  type: FETCH_PAYMENTS_ACTION_SAGA,
  payload,
});
```
npm package: @mihanizm56/webpack-module-watcher
Description: webpack utils
Latest version: 2.0.1

# @mihanizm56/webpack-stream-watcher

## Webpack plugin that reloads the separated react-app on browser after your app was builded and runs the docker image to start your own app with .umd static files

### Please note, that you must insert the plugin's requirements to your separated react-app
### Please note, that this is works only in Linux and MacOs machine (windows 10 PRO maybe but was not tested)


#### Plugin required environments:
 - PLT_IMAGE_PORT - port of your "watching app"
 - PLT_IMAGE_NAME - docker image name that will watcher run to server files via nginx
 - PLT_STREAM_SEND_PORT - the port to send web-socket messages

### Insert the websocket server in the separate react-app

```javascript
// webpackDevServer.config.js
const WebSocket = require('ws')

const wss = new WebSocket.Server({ port: 5010 })

module.exports = function(proxy, allowedHost) {
  return {
    // other settings
    before(app, server) { 
      // create the connection
      wss.on('connection', ws => {
        // get trigger message
        ws.on('message', message =>
          // reload page 
          server.sockWrite(server.sockets,'content-changed')
        )
      })
      
      // other settings
    },
  };
};

```

### Example of usage

```javascript
// webpack.config.js
const PlatformBuildWithWatchPlugin = require('@mihanizm56/webpack-stream-watcher');

module.exports = {
  // your config ...
  plugins: [new PlatformBuildWithWatchPlugin()]
};
```

#### The actual web-socket messager runs the command

```javascript
// node_modules/@mihanizm56/webpack-stream-watcher/reload-trigger.js
const WebSocket = require('ws');

const platformPort = process.env.PLT_STREAM_SEND_PORT || 5010;

module.exports.reloadTrigger = () => {
  const ws = new WebSocket(`ws://localhost:${platformPort}`);

  ws.on('open', function open() {
    ws.send('trigger');
    ws.close();
  });
};
```

## The Websocket signal can be used in different approaches - not only to trigger reloads !!!
npm package: @mihanizm56/webpack-stream-watcher
Description: webpack utils
Latest version: 2.0.0

# @mihanizm56/webpack-stream-watcher

## Webpack plugin that reloads the separated react-app on browser after your app was builded and runs the docker image to start your own app with .umd static files

### Please note, that you must insert the plugin's requirements to your separated react-app
### Please note, that this is works only in Linux and MacOs machine (windows 10 PRO maybe but was not tested)


#### Plugin required environments:
 - PLT_IMAGE_PORT - port of your "watching app"
 - PLT_IMAGE_NAME - docker image name that will watcher run to server files via nginx
 - PLT_STREAM_SEND_PORT - the port to send web-socket messages

### Insert the websocket server in the separate react-app

```javascript
// webpackDevServer.config.js
const WebSocket = require('ws')

const wss = new WebSocket.Server({ port: 5010 })

module.exports = function(proxy, allowedHost) {
  return {
    // other settings
    before(app, server) { 
      // create the connection
      wss.on('connection', ws => {
        // get trigger message
        ws.on('message', message =>
          // reload page 
          server.sockWrite(server.sockets,'content-changed')
        )
      })
      
      // other settings
    },
  };
};

```

### Example of usage

```javascript
// webpack.config.js
const PlatformBuildWithWatchPlugin = require('@mihanizm56/webpack-stream-watcher');

module.exports = {
  // your config ...
  plugins: [new PlatformBuildWithWatchPlugin()]
};
```

#### The actual web-socket messager runs the command

```javascript
// node_modules/@mihanizm56/webpack-stream-watcher/reload-trigger.js
const WebSocket = require('ws');

const platformPort = process.env.PLT_STREAM_SEND_PORT || 5010;

module.exports.reloadTrigger = () => {
  const ws = new WebSocket(`ws://localhost:${platformPort}`);

  ws.on('open', function open() {
    ws.send('trigger');
    ws.close();
  });
};
```

## The Websocket signal can be used in different approaches - not only to trigger reloads !!!