proto

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": [ "es2015" ]
+  "presets": [ "latest" ]
 }

_gulpfile.babel.js

@@ -0,0 +1,33 @@
+import gulp           from 'gulp'
+import babel          from 'gulp-babel'
+import concat         from 'gulp-concat'
+import plumber        from 'gulp-plumber'
+import uglify         from 'gulp-uglify'
+import browserify     from 'browserify'
+import babelify       from 'babelify'
+
+export function js_build(){
+  return gulp.src('classes/**/*.js')
+    .pipe(babel({
+      presets: ['es2015']
+    }))
+    .pipe(uglify())
+    .pipe(gulp.dest('./dist'))
+}
+
+export function app_build(){
+  return browserify('./example/app.js', { debug: true })
+    .bundle()
+    .pipe(source('app.js'))
+    .pipe(uglify({ mangle: false }))
+    .pipe(gulp.dest('./example/dist'))
+}
+
+const build = gulp.series(
+  js_build,
+  app_build
+)
+
+export { build }
+
+export default build

classes/Step.js

@@ -1,11 +1,31 @@
 export class Step {
-  constructor (parent, params) {
-    this.parent = parent
-    this.params = params
-    this._lo = 'lol'
+  constructor (params) {
+    this.parent = params.parent || null
+    this.name = params.name
+    this.next = params.next
+    this.methods = params.methods || {}
+    this.template = params.template || ''
+    this.from = null
+    this._data = {}
+    this.interceptors = {
+      beforeRender: params.interceptors.beforeRender || this.methods.beforeRender || function () {
+        return {status: true}
+      },
+      beforeNext: params.interceptors.beforeNext || this.methods.beforeNext || function () {
+        return {status: true}
+      },
+      beforeBack: params.interceptors.beforeBack || this.methods.beforeBack || function () {
+        return {status: true}
+      }
+    }
   }
 
-  get lol () {
-    return this._lo
+  /* LINKS */
+  get goNext () { return this.parent.goNext }
+  get goBack () { return this.parent.goBack }
+  get goToStep () { return this.parent.goToStep }
+
+  get data () {
+    return this._data
   }
 }

classes/StepSystem.js

@@ -1,15 +1,96 @@
-import { Step } from 'Step'
+/**
+ * StepSystem v1.0.0
+ * Last update: 15.05.2017
+ *
+ * Dependencies: jQuery
+ *
+ * @author kaskar2008
+ */
 
 export class StepSystem {
-  constructor () {
-    this._steps = []
+  /**
+   * @param  {jQuery element} container
+   */
+  constructor (container) {
+    this._steps = {}
+    this._current_step = null
+    this._container = container
+    this.commonHandlers = function () {}
   }
 
-  addStep (params) {
-    this._steps.push(new Step (this, params))
+  /**
+   * Add new step
+   * @param {Step} step
+   */
+  addStep (step) {
+    step.parent = this
+    this._steps.push(step)
+    return this
+  }
+
+  setHandlers (cb) {
+    this.commonHandlers = cb
+    return this
+  }
+
+  get current_step () {
+    return this.steps[this._current_step] || null
+  }
+
+  step (name) {
+    return this._steps[name]
+  }
+
+  get container () {
+    return this._container
   }
 
   get steps () {
     return this._steps
   }
+
+  render (step) {
+    let _br = step.interceptors.beforeRender()
+    if (!_br.status) {
+      if (_br.onError) _br.onError()
+      return this
+    }
+    this.container.html(step.template)
+  }
+
+  goNext () {
+    let _bn = step.interceptors.beforeNext()
+    if (!_bn.status) {
+      if (_bn.onError) _bn.onError()
+      return this
+    }
+    let curr_step = this.current_step || {}
+    let next_step = curr_step.next || null
+    if (next_step) {
+      this.goToStep(this.step(next_step))
+    }
+  }
+
+  goBack () {
+    let _bb = step.interceptors.beforeBack()
+    if (!_bb.status) {
+      if (_bb.onError) _bb.onError()
+      return this
+    }
+    let curr_step = this.current_step || {}
+    let prev_step = curr_step.from || null
+    if (prev_step) {
+      this.goToStep(this.step(prev_step))
+    }
+  }
+
+  goToStep (step) {
+    let curr_step = this.current_step || {}
+    step.from = curr_step.name || null
+    this.render(step)
+  }
+
+  init () {
+    this.commonHandlers()
+  }
 }

gulpfile.js

@@ -0,0 +1,28 @@
+var browserify = require('browserify');
+var gulp = require('gulp');
+var source = require('vinyl-source-stream');
+var buffer = require('vinyl-buffer');
+var gutil = require('gulp-util');
+var uglify = require('gulp-uglify');
+var sourcemaps = require('gulp-sourcemaps');
+var reactify = require('reactify');
+
+gulp.task('javascript', function () {
+  // set up the browserify instance on a task basis
+  var b = browserify({
+    entries: './entry.js',
+    debug: true,
+    // defining transforms here will avoid crashing your stream
+    transform: [reactify]
+  });
+
+  return b.bundle()
+    .pipe(source('app.js'))
+    .pipe(buffer())
+    .pipe(sourcemaps.init({loadMaps: true}))
+        // Add transformation tasks to the pipeline here.
+        .pipe(uglify())
+        .on('error', gutil.log)
+    .pipe(sourcemaps.write('./'))
+    .pipe(gulp.dest('./dist/js/'));
+});

package.json

@@ -7,14 +7,17 @@
     "example": "example"
   },
   "devDependencies": {
-    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-latest": "^6.24.1",
     "babel-register": "^6.22.0",
+    "babelify": "^7.3.0",
+    "browserify": "^0.5.1",
     "gulp": "github:gulpjs/gulp#4.0",
     "gulp-babel": "^6.1.2",
-    "gulp-browserify": "^0.5.1",
     "gulp-concat": "^2.6.1",
     "gulp-plumber": "^1.1.0",
-    "gulp-uglify": "^2.0.1"
+    "gulp-uglify": "^2.0.1",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",