Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rename the project #1

Merged
merged 1 commit into from
Feb 12, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
18 changes: 9 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
# woopack plugin for React on webpack
# projext plugin for React on webpack

Allows you to bundle a [React](https://reactjs.org/) project with [woopack](https://yarnpkg.com/en/package/woopack) using the [webpack](https://webpack.js.org) [build engine](https://yarnpkg.com/en/package/woopack-plugin-webpack).
Allows you to bundle a [React](https://reactjs.org/) project with [projext](https://yarnpkg.com/en/package/projext) using the [webpack](https://webpack.js.org) [build engine](https://yarnpkg.com/en/package/projext-plugin-webpack).

## Introduction

[woopack](https://yarnpkg.com/en/package/woopack) allows you to configure a project without adding specific settings for a module bundler, then you can decide which build engine to use. This plugin is meant to be used when you are bundling a [React](https://reactjs.org/) and you are using the [webpack](https://webpack.js.org) [build engine](https://yarnpkg.com/en/package/woopack-plugin-webpack).
[projext](https://yarnpkg.com/en/package/projext) allows you to configure a project without adding specific settings for a module bundler, then you can decide which build engine to use. This plugin is meant to be used when you are bundling a [React](https://reactjs.org/) and you are using the [webpack](https://webpack.js.org) [build engine](https://yarnpkg.com/en/package/projext-plugin-webpack).

It adds the required presets to the [`babel-loader`](https://yarnpkg.com/en/package/babel-loader) configuration in order to handle [`JSX`](https://facebook.github.io/jsx/) code. It also takes care of modifying the webpack settings in order to implement the [`react-hot-loader`](https://yarnpkg.com/en/package/react-hot-loader) with both, the dev server and an [Express](https://expressjs.com)/[Jimpex](https://yarnpkg.com/en/package/jimpex) target.

## Information

| - | - |
|--------------|----------------------------------------------------------------------------------------|
| Package | woopack-plugin-webpack-react. |
| Description | Allows you to bundle a React project with woopack using the webpack build engine. |
| Package | projext-plugin-webpack-react. |
| Description | Allows you to bundle a React project with projext using the webpack build engine. |
| Node Version | >= v6.10.0 |

## Usage

1. You first need the build engine, so install [`woopack-plugin-webpack`](https://yarnpkg.com/en/package/woopack-plugin-webpack).
1. You first need the build engine, so install [`projext-plugin-webpack`](https://yarnpkg.com/en/package/projext-plugin-webpack).
2. If you changed it, set your target `engine` setting to `webpack`.
3. Add a new setting to your target named `framework` and set its value to `react`.
4. Done
Expand All @@ -45,7 +45,7 @@ module.exports = {

And that's all there is, if you are running the target by itself, it will configure the hot loader settings for the webpack dev server; and if you are using a Node target, the configuration will be made for the hot middleware.

> If you don't know how to implement the middlewares on your Express/Jimpex app, you can check [the `woopack-plugin-webpack` documentation for it](https://homer0.github.io/woopack-plugin-webpack/#middleware-implementation).
> If you don't know how to implement the middlewares on your Express/Jimpex app, you can check [the `projext-plugin-webpack` documentation for it](https://homer0.github.io/projext-plugin-webpack/#middleware-implementation).

### Babel

Expand All @@ -56,7 +56,7 @@ This plugin only adds a new loader when hot reload is enabled, but leaving that
- It disables the `modules` feature on the `env` preset.


So, if for some reason you are overwriting the configuration woopack generates, instead of making sure you add those requirements, you should consider if you really need this plugin: The only advantage it can provide is the auto-configuration of the hot reload (which is kind of tricky :P), but if you are not using hot reload, you could just add the `react` preset when you overwrite the Babel configuration that would be all.
So, if for some reason you are overwriting the configuration projext generates, instead of making sure you add those requirements, you should consider if you really need this plugin: The only advantage it can provide is the auto-configuration of the hot reload (which is kind of tricky :P), but if you are not using hot reload, you could just add the `react` preset when you overwrite the Babel configuration that would be all.

## Development

Expand Down Expand Up @@ -87,4 +87,4 @@ I use [ESlint](http://eslint.org) to validate all our JS code. The configuration

### Documentation

I use [ESDoc](http://esdoc.org) to generate HTML documentation for the project. The configuration file is on `./.esdocrc` and the script that runs it is on `./utils/scripts/docs`.
I use [ESDoc](http://esdoc.org) to generate HTML documentation for the project. The configuration file is on `./.esdocrc` and the script that runs it is on `./utils/scripts/docs`.
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"name": "woopack-plugin-webpack-react",
"description": "Allows you to bundle a React project with woopack using the webpack build engine.",
"homepage": "https://homer0.github.io/woopack-plugin-webpack-react/",
"name": "projext-plugin-webpack-react",
"description": "Allows you to bundle a React project with projext using the webpack build engine.",
"homepage": "https://homer0.github.io/projext-plugin-webpack-react/",
"version": "1.0.0",
"repository": "homer0/woopack-plugin-webpack-react",
"repository": "homer0/projext-plugin-webpack-react",
"author": "Leonardo Apiwan (@homer0) <me@homer0.com>",
"license": "MIT",
"dependencies": {
Expand Down
8 changes: 4 additions & 4 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
const WoopackReactPlugin = require('./plugin');
const ProjextReactPlugin = require('./plugin');
/**
* This is the method called by Woopack when loading the plugin. It takes care of creating
* This is the method called by projext when loading the plugin. It takes care of creating
* a new instance of the plugin class and use it to register for the required events.
* @param {Woopack} app The Woopack main container.
* @param {Projext} app The projext main container.
* @ignore
*/
const loadPlugin = (app) => {
const plugin = new WoopackReactPlugin();
const plugin = new ProjextReactPlugin();
plugin.register(app);
};

Expand Down
12 changes: 6 additions & 6 deletions src/plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* This service is in charge of modifying a target Babel and entry settings in order to build
* React code. It also manages the settings related to the React Hot Loader.
*/
class WoopackReactPlugin {
class ProjextReactPlugin {
/**
* Class constructor.
* @ignore
Expand Down Expand Up @@ -53,10 +53,10 @@ class WoopackReactPlugin {
this.babelLoaderName = 'babel-loader';
}
/**
* This is the method called when the plugin is loaded by Woopack. It just gets the events service
* This is the method called when the plugin is loaded by projext. It just gets the events service
* and registers the listeners for the reducer events that handles JS rules and target
* configuration.
* @param {Woopack} app The Woopack main container.
* @param {Projext} app The projext main container.
*/
register(app) {
const events = app.get('events');
Expand All @@ -71,7 +71,7 @@ class WoopackReactPlugin {
);
}
/**
* This method gets called when Woopack reduces the JS rules of a target. It validates the target
* This method gets called when projext reduces the JS rules of a target. It validates the target
* settings and makes the necessary modifications to the Babel loader configuration.
* @param {Array} currentRules The list of JS rules for the Webpack configuration.
* @param {Target} target The target information.
Expand Down Expand Up @@ -103,7 +103,7 @@ class WoopackReactPlugin {
return currentRules;
}
/**
* This method gets called when Woopack reduces a target configuration for Wepack. It validates
* This method gets called when projext reduces a target configuration for Wepack. It validates
* the target settings and if HMR is enabled, it updates the `entry` setting with the required
* changes for the React Hot Loader.
* @param {Object} currentConfiguration The current configuration for the target.
Expand Down Expand Up @@ -212,4 +212,4 @@ class WoopackReactPlugin {
}
}

module.exports = WoopackReactPlugin;
module.exports = ProjextReactPlugin;
6 changes: 3 additions & 3 deletions src/typedef.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/**
* @external {Woopack}
* https://homer0.github.io/woopack/class/src/app/index.js~Woopack.html
* @external {Projext}
* https://homer0.github.io/projext/class/src/app/index.js~Projext.html
*/

/**
* @external {Target}
* https://homer0.github.io/woopack/typedef/index.html#static-typedef-Target
* https://homer0.github.io/projext/typedef/index.html#static-typedef-Target
*/
14 changes: 7 additions & 7 deletions tests/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@ jest.unmock('/src/index');

require('jasmine-expect');

const WoopackReactPlugin = require('/src/plugin');
const ProjextReactPlugin = require('/src/plugin');
const plugin = require('/src/index');

describe('plugin:woopackReact', () => {
describe('plugin:projextReact', () => {
it('should call the `register` method of the plugin main class', () => {
// Given
const app = 'woopackApp';
const app = 'projextApp';
// When
plugin(app);
// Then
expect(WoopackReactPlugin).toHaveBeenCalledTimes(1);
expect(WoopackReactPlugin.mock.instances.length).toBe(1);
expect(WoopackReactPlugin.mock.instances[0].register).toHaveBeenCalledTimes(1);
expect(WoopackReactPlugin.mock.instances[0].register).toHaveBeenCalledWith(app);
expect(ProjextReactPlugin).toHaveBeenCalledTimes(1);
expect(ProjextReactPlugin.mock.instances.length).toBe(1);
expect(ProjextReactPlugin.mock.instances[0].register).toHaveBeenCalledTimes(1);
expect(ProjextReactPlugin.mock.instances[0].register).toHaveBeenCalledWith(app);
});
});
28 changes: 14 additions & 14 deletions tests/plugin.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ jest.unmock('/src/plugin');

require('jasmine-expect');

const WoopackReactPlugin = require('/src/plugin');
const ProjextReactPlugin = require('/src/plugin');

describe('plugin:woopackReact/main', () => {
describe('plugin:projextReact/main', () => {
it('should be instantiated', () => {
// Given
let sut = null;
// When
sut = new WoopackReactPlugin();
sut = new ProjextReactPlugin();
// Then
expect(sut).toBeInstanceOf(WoopackReactPlugin);
expect(sut).toBeInstanceOf(ProjextReactPlugin);
expect(sut.rulesEventsNames).toEqual([
'webpack-js-rules-configuration-for-node',
'webpack-js-rules-configuration-for-browser',
Expand Down Expand Up @@ -39,7 +39,7 @@ describe('plugin:woopackReact/main', () => {
'webpack-browser-development-configuration',
];
// When
sut = new WoopackReactPlugin();
sut = new ProjextReactPlugin();
sut.register(app);
// Then
expect(app.get).toHaveBeenCalledTimes(1);
Expand Down Expand Up @@ -71,7 +71,7 @@ describe('plugin:woopackReact/main', () => {
let reducer = null;
let result = null;
// When
sut = new WoopackReactPlugin();
sut = new ProjextReactPlugin();
sut.register(app);
[[, reducer]] = events.on.mock.calls;
result = reducer(currentRules, { target });
Expand Down Expand Up @@ -100,7 +100,7 @@ describe('plugin:woopackReact/main', () => {
let reducer = null;
let result = null;
// When
sut = new WoopackReactPlugin();
sut = new ProjextReactPlugin();
sut.register(app);
[[, reducer]] = events.on.mock.calls;
result = reducer(currentRules, { target });
Expand Down Expand Up @@ -133,7 +133,7 @@ describe('plugin:woopackReact/main', () => {
use: currentJSLoader.use,
})];
// When
sut = new WoopackReactPlugin();
sut = new ProjextReactPlugin();
sut.register(app);
[[, reducer]] = events.on.mock.calls;
result = reducer(currentRules, { target });
Expand Down Expand Up @@ -174,7 +174,7 @@ describe('plugin:woopackReact/main', () => {
use: [expectedBabelLoader],
})];
// When
sut = new WoopackReactPlugin();
sut = new ProjextReactPlugin();
sut.register(app);
[[, reducer]] = events.on.mock.calls;
result = reducer(currentRules, { target });
Expand Down Expand Up @@ -217,7 +217,7 @@ describe('plugin:woopackReact/main', () => {
use: [expectedBabelLoader],
})];
// When
sut = new WoopackReactPlugin();
sut = new ProjextReactPlugin();
sut.register(app);
[[, reducer]] = events.on.mock.calls;
result = reducer(currentRules, { target });
Expand Down Expand Up @@ -263,7 +263,7 @@ describe('plugin:woopackReact/main', () => {
use: [expectedBabelLoader],
})];
// When
sut = new WoopackReactPlugin();
sut = new ProjextReactPlugin();
sut.register(app);
[[, reducer]] = events.on.mock.calls;
result = reducer(currentRules, { target });
Expand Down Expand Up @@ -294,7 +294,7 @@ describe('plugin:woopackReact/main', () => {
let reducer = null;
let result = null;
// When
sut = new WoopackReactPlugin();
sut = new ProjextReactPlugin();
sut.register(app);
[,, [, reducer]] = events.on.mock.calls;
result = reducer(targetConfig, { target });
Expand Down Expand Up @@ -336,7 +336,7 @@ describe('plugin:woopackReact/main', () => {
},
};
// When
sut = new WoopackReactPlugin();
sut = new ProjextReactPlugin();
sut.register(app);
[,, [, reducer]] = events.on.mock.calls;
result = reducer(targetConfig, { target });
Expand Down Expand Up @@ -384,7 +384,7 @@ describe('plugin:woopackReact/main', () => {
},
};
// When
sut = new WoopackReactPlugin();
sut = new ProjextReactPlugin();
sut.register(app);
[,, [, reducer]] = events.on.mock.calls;
result = reducer(targetConfig, { target });
Expand Down