Install

1. Install with npm

npm i lata --save-dev

2. Copy starter kit

mkdir -p resources/assets/js/
rsync -avz node_modules/lata/starter-kit/ resources/assets/js/

3. Build with gulp

npm i babel-core babel-loader babel-preset-env core-js gulp uglifyjs-webpack-plugin vinyl-named webpack-stream --save-dev

Sample gulpfile.js

const gulp = require('gulp');
const webpack = require('webpack-stream');
const named = require('vinyl-named');

// JS
const JS_CONFIG = require('./webpack.config.js');
const JS_SRC = ['./resources/assets/js/*.js'];
const JS_DEST = './public/js';

gulp.task('scripts', function() {
  return gulp.src(JS_SRC)
    .pipe(named())
    .pipe(webpack(JS_CONFIG))
    .pipe(gulp.dest(JS_DEST));
});

// Default
gulp.task('default', ['scripts']);

Sample webpack.config.js

const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['babel-preset-env']
          }
        }
      }
    ]
  },
  plugins: [
    new UglifyJsPlugin({
      sourceMap: true
    })
  ]
};

4. Optional Keep clean code with EditorConfig and JSHint

npm i -g jshint
cp node_modules/lata/.editorconfig .editorconfig
cp node_modules/lata/.jshintrc .jshintrc

Upgrade

Migrating from mode-front-end 2.11.1 to lata 0.1.x

array/filter → core-js/library/fn/array/filter

Before:

const filter = require('mode-front-end/resources/assets/js/array/filter');
console.log(filter([1, 2, 3], (a) => a % 2 === 1)); // [1, 3]

After:

// Without overriding global Array.prototype
import filter from 'core-js/library/fn/array/filter';
console.log(filter([1, 2, 3], (a) => a % 2 === 1)); // [1, 3]

// Overriding global Array.prototype
import 'core-js/fn/array/filter';
console.log([1, 2, 3].filter(a => a % 2 === 1)); // [1, 3]

array/inArray → core-js/library/fn/array/index-of

Before:

const inArray = require('mode-front-end/resources/assets/js/array/inArray');
console.log(inArray([1, 2, 3], 3), inArray([1, 2, 3], 0)); // true, false

After:

// Without overriding global Array.prototype
import indexOf from 'core-js/library/fn/array/index-of';
const inArray = (arr, val) => arr.indexOf(val) >= 0;
console.log(inArray([1, 2, 3], 3), inArray([1, 2, 3], 0)); // true, false

// Overriding global Array.prototype
import 'core-js/fn/array/index-of';
console.log([1, 2, 3].indexOf(3) >= 0, [1, 2, 3].indexOf(0) >= 0); // true, false

array/isArray → core-js/library/fn/array/is-array

Before:

const isArray = require('mode-front-end/resources/assets/js/array/isArray');
console.log(isArray([]), isArray({})); // true, false

After:

// Without overriding global Array.prototype
import isArray from 'core-js/library/fn/array/is-array';
console.log(isArray([]), isArray({})); // true, false

// Overriding global Array.prototype
import 'core-js/fn/array/is-array';
console.log(Array.isArray([]), Array.isArray({})); // true, false

array/map → core-js/library/fn/array/map

Before:

const map = require('mode-front-end/resources/assets/js/array/map');
console.log(map([1, 2, 3], n => n * 2)); // [2, 4, 6]

After:

// Without overriding global Array.prototype
import map from 'core-js/library/fn/array/map';
console.log(map([1, 2, 3], n => n * 2)); // [2, 4, 6]

// Overriding global Array.prototype
import 'core-js/fn/array/map';
console.log([1, 2, 3].map(n => n * 2)); // [2, 4, 6]

array/mapObj → core-js/library/fn/object/entries

Before:

const mapObj = require('mode-front-end/resources/assets/js/array/mapObj');
console.log(mapObj({ a: 1, b: 2, c: 3 }, (value, key) => value)); // [1, 2, 3]

After:

// Without overriding global Array.prototype
import map from 'core-js/library/fn/array/map';
import entries from 'core-js/library/fn/object/entries';
const mapObj = (obj, fn) => map(entries(obj), ([key, value]) => fn(value, key));
console.log(mapObj({ a: 1, b: 2, c: 3 }, (value, key) => value)); // [1, 2, 3]

// Overriding global Array.prototype
import 'core-js/fn/array/map';
import 'core-js/fn/object/entries';
console.log(Object.entries({ a: 1, b: 2, c: 3 }).map(([key, value]) => value)); // [1, 2, 3]

array/reduce → core-js/library/fn/array/reduce

Before:

const reduce = require('mode-front-end/resources/assets/js/array/reduce');
console.log(reduce([1, 2, 3], (a, b) => a + b, 0)); // 6

After:

// Without overriding global Array.prototype
import reduce from 'core-js/library/fn/array/reduce';
console.log(reduce([1, 2, 3], (a, b) => a + b, 0)); // 6

// Overriding global Array.prototype
import 'core-js/fn/array/reduce';
console.log([1, 2, 3].reduce((a, b) => a + b, 0)); // 6

object/extend → core-js/library/fn/object/assign

Before:

const extend = require('mode-front-end/resources/assets/js/object/extend');
console.log(extend({ a: 1, b: 2 }, { c: 3 })); // { a: 1, b: 2, c: 3 }

After:

// Without overriding global Array.prototype
import extend from 'core-js/library/fn/object/assign';
console.log(extend({ a: 1, b: 2 }, { c: 3 })); // { a: 1, b: 2, c: 3 }

// Overriding global Array.prototype
import 'core-js/fn/object/assign';
console.log(Object.assign({ a: 1, b: 2 }, { c: 3 })); // { a: 1, b: 2, c: 3 }