Merge pull request #36 from pirelenito/lib-project-support

Add support to Library projects (closes #8)

CHANGELOG.md

@@ -1,3 +1,15 @@
+### Master
+
+There were two small breaking changes, making this upgrade very simple:
+
+- The plugin `webpack-pages` was renamed to `webpack-archetype-pages`;
+- We changed the way webpack configurations are merged, now loaders are merged toghether if their test name matches.
+
+Changes:
+
+- [#36](https://github.com/pirelenito/sagui/pull/36) Add support to Library projects;
+- [#35](https://github.com/pirelenito/sagui/pull/35) Use webpack-merge smart feature to allow modifying an existing loader.
+
 ### v3.0.0 (2016-02-21)
 
 Allow extensibility and customization of webpack and karma configurations.

README.md

@@ -34,7 +34,14 @@ Sagui strives to be the **last devDependency**:
 
 ## Creating a new Sagui project
 
-Create a new NPM project:
+Start by creating a new folder to hold your project files:
+
+```bash
+mkdir my-project
+cd my-project
+```
+
+Then, create a new NPM project (while at the project's folder):
 
 ```bash
 npm init -y .
@@ -87,11 +94,15 @@ Then you can start writing your code inside the `src/` folder.
 
 ## Configuration
 
-The internal architecture of Sagui is build arround plugins, each providing a set of functionalities that can be used during any of Sagui's actions.
+Sagui supports two major project archetypes: **Pages** and **Library**.
+
+They are not mutually exclusive, so it is possible to create a library project and use the pages archetype to create some demo pages for example.
 
 ### Pages
 
-By default, sagui will build and serve a single page for your entire application. This is your `src/index.js` and `src/index.html` files.
+This is a static application that can be built around multiple pages. Each page is the combination of an `html` and a `js` files.
+
+It is the default bootstrapped configuration, and it will build and serve a single page for your entire application based on the `src/index.js` and `src/index.html` files.
 
 To change it and add more pages, you can add a custom configuration in the `sagui.config.js` file:
 
@@ -106,46 +117,38 @@ module.exports = {
    *
    * Example: 'index' -> 'index.html' and 'index.js'
    */
-  pages: ['index', 'demo']
+  pages: ['index', 'about']
 }
 ```
 
-And add additional `src/demo.js` and `src/demo.html` files for each page entry-point.
+And add additional `src/about.js` and `src/about.html` files for each page entry-point.
 
-### <a name="custom-webpack-and-karma-config"></a> Custom Webpack and Karma config
+### Library
 
-To overwrite and extend the default configuartion you can use the same `saqui.config.js` file to specify your custom configurations:
+Create reusable libraries that can be shared across applications. Sagui will take care of the build process so that external libraries are not bundled and that you have a CommonJS module as the output.
+
+To get started, the only required configuration is the library name:
 
 ```js
 /**
  * Sagui configuration object
  */
 module.exports = {
   /**
-   * Webpack configuration object
-   * see: http://webpack.github.io/docs/configuration.html
-   *
-   * Will ovewrite and extend the default Sagui configuration
-   */
-  webpackConfig: {
-
-  },
-
-  /**
-   * Karma configuration object
-   * see: https://karma-runner.github.io/0.13/config/configuration-file.html
-   *
-   * Will overwrite and extend the default Sagui configuration
+   * Library name (usually in CammelCase)
+   * Example: ReactTransition, ReactRedux
    */
-  karmaConfig: {
-
-  }
+  library: 'ReactTransition'
 }
 ```
 
-For more information on how the merging of Webpack configurations work check [webpack-merge](https://github.com/survivejs/webpack-merge).
+#### External dependencies
 
-### Disable plugins
+Sagui will use the the **peerDependencies** information in the project's `package.json` to determine what are the external dependencies of the library that shouldn't be bundled in the final build.
+
+## Advanced configuration
+
+The internal architecture of Sagui is build arround plugins, each providing a set of functionalities that can be used during any of Sagui's actions.
 
 If you need to disable any default behavior, it is possible via:
 
@@ -163,16 +166,50 @@ module.exports = {
 
 Default available plugins:
 
+- **webpack-archetype-pages**: Add support for the above *Pages* configuration;
+- **webpack-archetype-library**: Add support for the above *Library* configuration;
 - **webpack-babel**: ES2015 support;
 - **webpack-base**: Base paths and webpack plugins;
 - **webpack-css-modules**: [CSS Modules](https://github.com/css-modules/css-modules) support;
 - **webpack-define-node-env**: Populates `process.env.NODE_ENV`;
 - **webpack-eslint**: ESLint support via [Standard](http://standardjs.com/);
 - **webpack-json**: JSON loader;
 - **webpack-media** Basic media loading support (JPG, PNG, GIF);
-- **webpack-pages**: Add support for the above *Pages* configuration;
 - **webpack-scss**: SCSS support.
 
+### <a name="custom-webpack-and-karma-config"></a> Custom Webpack and Karma config
+
+To overwrite and extend the default configuartion you can use the same `saqui.config.js` file to specify your custom configurations:
+
+```js
+/**
+ * Sagui configuration object
+ */
+module.exports = {
+  /**
+   * Webpack configuration object
+   * see: http://webpack.github.io/docs/configuration.html
+   *
+   * Will ovewrite and extend the default Sagui configuration
+   */
+  webpackConfig: {
+
+  },
+
+  /**
+   * Karma configuration object
+   * see: https://karma-runner.github.io/0.13/config/configuration-file.html
+   *
+   * Will overwrite and extend the default Sagui configuration
+   */
+  karmaConfig: {
+
+  }
+}
+```
+
+For more information on how the merging of Webpack configurations work check [webpack-merge](https://github.com/survivejs/webpack-merge).
+
 ## Development
 
 To develop the tool locally, we will need to resort to a combination of a global [npm link](https://docs.npmjs.com/cli/link) and local links in projects.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sagui",
-  "version": "3.1.0",
+  "version": "4.0.0-rc.1",
   "description": "Your last devDependency",
   "preferGlobal": false,
   "bin": {
@@ -10,7 +10,7 @@
   "scripts": {
     "test": "npm run test:lint && npm run test:unit",
     "test:lint": "eslint .",
-    "test:unit": "mocha --compilers js:babel/register --recursive --reporter spec ./src/**/*.spec.js",
+    "test:unit": "mocha --compilers js:babel/register --recursive --reporter spec ./src",
     "test:unit-watch": "npm run test:unit -- --watch",
     "test:integration": "./bin/test-integration.sh",
     "prepublish": "npm prune && npm test",

spec/fixtures/library-project-without-peer-dependencies/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "library-project-without-peer-dependencies",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

spec/fixtures/library-project/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "library-project",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7"
+  }
+}

src/actions/start-develop.js

@@ -1,18 +1,8 @@
-import express from 'express'
-import webpack from 'webpack'
 import { logError, log } from '../util/log'
+import server from '../server'
 
 export default function startDevelop ({ webpackConfig }) {
-  const app = express()
-  const compiler = webpack(webpackConfig)
-
-  app.use(require('webpack-dev-middleware')(compiler, {
-    noInfo: true,
-    publicPath: webpackConfig.output.publicPath
-  }))
-
-  app.use(require('webpack-hot-middleware')(compiler))
-
+  const app = server(webpackConfig)
   app.listen(3000, '0.0.0.0', onServerStarted)
 }