Nitrogen-webpack-plugin NPM

Nitrogen Editor server plugin for Webpack

0. Who is the author of this tool?

Patryk "PsichiX" Budzyński (you can reach me on twitter @PsichiX to ask any question)

1. Where can i find Webpack plugin for Nitrogen Editor and how to setup it?

Install it with npm install --save nitrogen-webpack-plugin and then prepare your Webpack condig like this:

Example project integrated with Nitrogen Editor

var webpack = require('webpack');
var path = require('path');
var process = require('process');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var NitrogenWebpackPlugin = require('nitrogen-webpack-plugin');

var BUILD_DIR = path.resolve(__dirname, 'bin');
var APP_DIR = path.resolve(__dirname, 'src');
var EDITOR = !!process.env.NITROGEN_EDITOR;

var config = {
  entry: [
    'babel-polyfill',
    APP_DIR + '/index.js'
  ],
  module: {
    loaders: [
      { test : /\\.jsx?$/, include : APP_DIR, loader : 'babel-loader' },
      { test: /\\.json$/, loader: 'json-loader' }
    ]
  },
  output: {
    path: BUILD_DIR,
    filename: 'app.js'
  },
  plugins: [
    new CopyWebpackPlugin([
      { from: 'static/index.html' },
      { from: 'static/assets', to: 'assets' }
    ])
  ],
  devServer: {
    contentBase: path.resolve(__dirname, './src'),
  },
  devtool: 'source-map'
};

if (!!EDITOR) {
  config.plugins.push(new NitrogenWebpackPlugin({
    config,
    root: __dirname
  }));
}

module.exports = config;

2. How `.nitrogenrc` file config should look like?

Example

Nitrogen config (.nitrogenrc) file consists of given properties:

port: port number on which local server will run
dirs: list of directories visible in Nitrogen Editor
systems: list of paths to code files of game systems
components: list of paths to code files of game components/scripts
editors: map of editors used (key: pattern to match filenames; value: name of editor installed module)
editOnly: if true then files are edit-only (webpack will bundle project normally, instead of making special bundle for Nitrogen Editor)

{
  "port": 8081,
  "dirs": [
    "src",
    "static/assets"
  ],
  "systems": [
    "src/systems/PhysicsSystem"
  ],
  "components": [
    "src/scripts/GameController"
  ],
  "editors": {
    "\\.(jsx?|tsx?|json|vs|fs|fnt)$": "ace-nitrogen-editor",
    "\\.(png|jpe?g|gif)$": "image-nitrogen-viewer",
    "^static\/assets\/shaders\/.*\\.json$": "oxygen-shader-nitrogen-editor"
  },
  "editOnly": false
}

3. How to create custom editor?

There are only few rules for custom Nitrogen editors/viewers: 1. Library MUST use react dependency and return react component 1. Your editor MUST be bundled as library with name "editor", output filename bin/index.js with commonjstarget 1. Your editor MUST export three properties: name with editor name; description with editor description; editor with react dummy-component function that can accept three special props (filename of editable file; buffer with file data; onEdit callback to call when file contents should be saved)

Examples of editors: