feat(Features/Lodash): add lodash feature (#284)

Features/Lodash/README.md

@@ -0,0 +1,67 @@
+# HowTo
+
+## Configure Feature
+
+Add the lodash functions you want to use globally on your project.
+
+`Features/Lodash/script.js`
+```javascript
+window._ = {
+  debounce: require('lodash/debounce'),
+  find: require('lodash/find')
+}
+```
+
+## Component
+
+Add the lodash dependency to the component you want to use it in.
+
+`Components/ComponentName/functions.php`
+```php
+<?php
+
+namespace Flynt\Components\ComponentName;
+
+use Flynt\Features\Components\Component;
+
+...
+
+Component::enqueueAssets('ComponentName', [
+    [
+        'type' => 'script',
+        'name' => 'Flynt/Features/Lodash',
+        'path' => 'Features/Lodash/script.js'
+    ]
+]);
+```
+
+Add the underscore variable to the component's script scope and use any previously registered lodash function.
+
+`Components/ComponentName/script.js`
+```javascript
+import $ from 'jquery'
+
+const _ = window._
+
+class ComponentName extends window.HTMLDivElement {
+  constructor (self) {
+    self = super(self)
+    self.$ = $(self)
+    self.resolveElements()
+    return self
+  }
+
+  resolveElements () {
+    this.$window = $(window)
+  }
+
+  connectedCallback () {
+    this.$window.on('resize', _.debounce(this.someFunction.bind(this), 250))
+  }
+
+  someFunction () {
+    console.log('someFunction')
+  }
+}
+
+```

Features/Lodash/functions.php

@@ -0,0 +1,13 @@
+<?php
+
+namespace Flynt\Features\Lodash;
+
+use Flynt\Utils\Asset;
+
+add_action('wp_enqueue_scripts', function () {
+    Asset::register([
+        'type' => 'script',
+        'name' => 'Flynt/Features/Lodash',
+        'path' => 'Features/Lodash/script.js',
+    ]);
+});

Features/Lodash/script.js

@@ -0,0 +1,251 @@
+window._ = {
+  // add: require('lodash/add'),
+  // after: require('lodash/after'),
+  // at: require('lodash/at'),
+  // attempt: require('lodash/attempt'),
+  // before: require('lodash/before'),
+  // camelCase: require('lodash/camelCase'),
+  // capitalize: require('lodash/capitalize'),
+  // castArray: require('lodash/castArray'),
+  // ceil: require('lodash/ceil'),
+  // chunk: require('lodash/chunk'),
+  // clamp: require('lodash/clamp'),
+  // clone: require('lodash/clone'),
+  // cloneDeep: require('lodash/cloneDeep'),
+  // cloneDeepWith: require('lodash/cloneDeepWith'),
+  // cloneWith: require('lodash/cloneWith'),
+  // compact: require('lodash/compact'),
+  // cond: require('lodash/cond'),
+  // conforms: require('lodash/conforms'),
+  // conformsTo: require('lodash/conformsTo'),
+  // countBy: require('lodash/countBy'),
+  // create: require('lodash/create'),
+  // debounce: require('lodash/debounce'),
+  // deburr: require('lodash/deburr'),
+  // defaultTo: require('lodash/defaultTo'),
+  // defaultToAny: require('lodash/defaultToAny'),
+  // defaults: require('lodash/defaults'),
+  // defaultsDeep: require('lodash/defaultsDeep'),
+  // defer: require('lodash/defer'),
+  // delay: require('lodash/delay'),
+  // difference: require('lodash/difference'),
+  // differenceBy: require('lodash/differenceBy'),
+  // differenceWith: require('lodash/differenceWith'),
+  // divide: require('lodash/divide'),
+  // drop: require('lodash/drop'),
+  // dropRight: require('lodash/dropRight'),
+  // dropRightWhile: require('lodash/dropRightWhile'),
+  // dropWhile: require('lodash/dropWhile'),
+  // each: require('lodash/each'),
+  // eachRight: require('lodash/eachRight'),
+  // endsWith: require('lodash/endsWith'),
+  // eq: require('lodash/eq'),
+  // eqDeep: require('lodash/eqDeep'),
+  // escape: require('lodash/escape'),
+  // escapeRegExp: require('lodash/escapeRegExp'),
+  // every: require('lodash/every'),
+  // everyValue: require('lodash/everyValue'),
+  // filter: require('lodash/filter'),
+  // filterObject: require('lodash/filterObject'),
+  // findKey: require('lodash/findKey'),
+  // findLast: require('lodash/findLast'),
+  // findLastIndex: require('lodash/findLastIndex'),
+  // findLastKey: require('lodash/findLastKey'),
+  // first: require('lodash/first'),
+  // flatMap: require('lodash/flatMap'),
+  // flatMapDeep: require('lodash/flatMapDeep'),
+  // flatMapDepth: require('lodash/flatMapDepth'),
+  // flatten: require('lodash/flatten'),
+  // flattenDeep: require('lodash/flattenDeep'),
+  // flattenDepth: require('lodash/flattenDepth'),
+  // flip: require('lodash/flip'),
+  // floor: require('lodash/floor'),
+  // flow: require('lodash/flow'),
+  // flowRight: require('lodash/flowRight'),
+  // forEach: require('lodash/forEach'),
+  // forEachRight: require('lodash/forEachRight'),
+  // forOwn: require('lodash/forOwn'),
+  // forOwnRight: require('lodash/forOwnRight'),
+  // fromEntries: require('lodash/fromEntries'),
+  // functions: require('lodash/functions'),
+  // get: require('lodash/get'),
+  // groupBy: require('lodash/groupBy'),
+  // gt: require('lodash/gt'),
+  // gte: require('lodash/gte'),
+  // has: require('lodash/has'),
+  // hasIn: require('lodash/hasIn'),
+  // hasPath: require('lodash/hasPath'),
+  // hasPathIn: require('lodash/hasPathIn'),
+  // head: require('lodash/head'),
+  // inRange: require('lodash/inRange'),
+  // indexOf: require('lodash/indexOf'),
+  // initial: require('lodash/initial'),
+  // intersection: require('lodash/intersection'),
+  // intersectionBy: require('lodash/intersectionBy'),
+  // intersectionWith: require('lodash/intersectionWith'),
+  // invert: require('lodash/invert'),
+  // invertBy: require('lodash/invertBy'),
+  // invoke: require('lodash/invoke'),
+  // invokeMap: require('lodash/invokeMap'),
+  // isArguments: require('lodash/isArguments'),
+  // isArrayBuffer: require('lodash/isArrayBuffer'),
+  // isArrayLike: require('lodash/isArrayLike'),
+  // isArrayLikeObject: require('lodash/isArrayLikeObject'),
+  // isBoolean: require('lodash/isBoolean'),
+  // isBuffer: require('lodash/isBuffer'),
+  // isDate: require('lodash/isDate'),
+  // isElement: require('lodash/isElement'),
+  // isEmpty: require('lodash/isEmpty'),
+  // isEqualWith: require('lodash/isEqualWith'),
+  // isError: require('lodash/isError'),
+  // isFunction: require('lodash/isFunction'),
+  // isLength: require('lodash/isLength'),
+  // isMap: require('lodash/isMap'),
+  // isMatch: require('lodash/isMatch'),
+  // isMatchWith: require('lodash/isMatchWith'),
+  // isNative: require('lodash/isNative'),
+  // isNil: require('lodash/isNil'),
+  // isNull: require('lodash/isNull'),
+  // isNumber: require('lodash/isNumber'),
+  // isObject: require('lodash/isObject'),
+  // isObjectLike: require('lodash/isObjectLike'),
+  // isPlainObject: require('lodash/isPlainObject'),
+  // isRegExp: require('lodash/isRegExp'),
+  // isSet: require('lodash/isSet'),
+  // isString: require('lodash/isString'),
+  // isSymbol: require('lodash/isSymbol'),
+  // isTypedArray: require('lodash/isTypedArray'),
+  // isUndefined: require('lodash/isUndefined'),
+  // isWeakMap: require('lodash/isWeakMap'),
+  // isWeakSet: require('lodash/isWeakSet'),
+  // kebabCase: require('lodash/kebabCase'),
+  // keyBy: require('lodash/keyBy'),
+  // keys: require('lodash/keys'),
+  // last: require('lodash/last'),
+  // lastIndexOf: require('lodash/lastIndexOf'),
+  // lowerCase: require('lodash/lowerCase'),
+  // lowerFirst: require('lodash/lowerFirst'),
+  // lt: require('lodash/lt'),
+  // lte: require('lodash/lte'),
+  // map: require('lodash/map'),
+  // mapKey: require('lodash/mapKey'),
+  // mapObject: require('lodash/mapObject'),
+  // mapValue: require('lodash/mapValue'),
+  // matches: require('lodash/matches'),
+  // matchesProperty: require('lodash/matchesProperty'),
+  // maxBy: require('lodash/maxBy'),
+  // mean: require('lodash/mean'),
+  // meanBy: require('lodash/meanBy'),
+  // memoize: require('lodash/memoize'),
+  // merge: require('lodash/merge'),
+  // mergeWith: require('lodash/mergeWith'),
+  // method: require('lodash/method'),
+  // methodOf: require('lodash/methodOf'),
+  // minBy: require('lodash/minBy'),
+  // multiply: require('lodash/multiply'),
+  // negate: require('lodash/negate'),
+  // nth: require('lodash/nth'),
+  // nthArg: require('lodash/nthArg'),
+  // once: require('lodash/once'),
+  // orderBy: require('lodash/orderBy'),
+  // over: require('lodash/over'),
+  // overArgs: require('lodash/overArgs'),
+  // overEvery: require('lodash/overEvery'),
+  // overSome: require('lodash/overSome'),
+  // package: require('lodash/package'),
+  // pad: require('lodash/pad'),
+  // padEnd: require('lodash/padEnd'),
+  // padStart: require('lodash/padStart'),
+  // parseInt: require('lodash/parseInt'),
+  // partition: require('lodash/partition'),
+  // pick: require('lodash/pick'),
+  // pickBy: require('lodash/pickBy'),
+  // property: require('lodash/property'),
+  // propertyOf: require('lodash/propertyOf'),
+  // pull: require('lodash/pull'),
+  // pullAll: require('lodash/pullAll'),
+  // pullAllBy: require('lodash/pullAllBy'),
+  // pullAllWith: require('lodash/pullAllWith'),
+  // pullAt: require('lodash/pullAt'),
+  // random: require('lodash/random'),
+  // range: require('lodash/range'),
+  // rangeRight: require('lodash/rangeRight'),
+  // reduce: require('lodash/reduce'),
+  // reduceRight: require('lodash/reduceRight'),
+  // reject: require('lodash/reject'),
+  // remove: require('lodash/remove'),
+  // repeat: require('lodash/repeat'),
+  // replace: require('lodash/replace'),
+  // result: require('lodash/result'),
+  // round: require('lodash/round'),
+  // sample: require('lodash/sample'),
+  // sampleSize: require('lodash/sampleSize'),
+  // set: require('lodash/set'),
+  // setWith: require('lodash/setWith'),
+  // shuffle: require('lodash/shuffle'),
+  // size: require('lodash/size'),
+  // slice: require('lodash/slice'),
+  // snakeCase: require('lodash/snakeCase'),
+  // some: require('lodash/some'),
+  // someValue: require('lodash/someValue'),
+  // sortedIndex: require('lodash/sortedIndex'),
+  // sortedIndexBy: require('lodash/sortedIndexBy'),
+  // sortedIndexOf: require('lodash/sortedIndexOf'),
+  // sortedLastIndex: require('lodash/sortedLastIndex'),
+  // sortedLastIndexBy: require('lodash/sortedLastIndexBy'),
+  // sortedLastIndexOf: require('lodash/sortedLastIndexOf'),
+  // sortedUniq: require('lodash/sortedUniq'),
+  // sortedUniqBy: require('lodash/sortedUniqBy'),
+  // split: require('lodash/split'),
+  // startCase: require('lodash/startCase'),
+  // startsWith: require('lodash/startsWith'),
+  // subtract: require('lodash/subtract'),
+  // sum: require('lodash/sum'),
+  // sumBy: require('lodash/sumBy'),
+  // tail: require('lodash/tail'),
+  // take: require('lodash/take'),
+  // takeRight: require('lodash/takeRight'),
+  // takeRightWhile: require('lodash/takeRightWhile'),
+  // takeWhile: require('lodash/takeWhile'),
+  // throttle: require('lodash/throttle'),
+  // times: require('lodash/times'),
+  // toArray: require('lodash/toArray'),
+  // toFinite: require('lodash/toFinite'),
+  // toInteger: require('lodash/toInteger'),
+  // toLength: require('lodash/toLength'),
+  // toNumber: require('lodash/toNumber'),
+  // toPath: require('lodash/toPath'),
+  // toPlainObject: require('lodash/toPlainObject'),
+  // toSafeInteger: require('lodash/toSafeInteger'),
+  // toString: require('lodash/toString'),
+  // transform: require('lodash/transform'),
+  // trim: require('lodash/trim'),
+  // trimEnd: require('lodash/trimEnd'),
+  // trimStart: require('lodash/trimStart'),
+  // truncate: require('lodash/truncate'),
+  // unescape: require('lodash/unescape'),
+  // union: require('lodash/union'),
+  // unionBy: require('lodash/unionBy'),
+  // unionWith: require('lodash/unionWith'),
+  // uniq: require('lodash/uniq'),
+  // uniqBy: require('lodash/uniqBy'),
+  // uniqWith: require('lodash/uniqWith'),
+  // uniqueId: require('lodash/uniqueId'),
+  // unset: require('lodash/unset'),
+  // unzip: require('lodash/unzip'),
+  // unzipWith: require('lodash/unzipWith'),
+  // update: require('lodash/update'),
+  // updateWith: require('lodash/updateWith'),
+  // upperCase: require('lodash/upperCase'),
+  // upperFirst: require('lodash/upperFirst'),
+  // values: require('lodash/values'),
+  // without: require('lodash/without'),
+  // words: require('lodash/words'),
+  // xor: require('lodash/xor'),
+  // xorBy: require('lodash/xorBy'),
+  // xorWith: require('lodash/xorWith'),
+  // zip: require('lodash/zip'),
+  // zipObject: require('lodash/zipObject'),
+  // zipObjectDeep: require('lodash/zipObjectDeep'),
+  // zipWith: require('lodash/zipWith')
+}

lib/Init.php

@@ -79,6 +79,7 @@ function initTheme()
 
     add_theme_support('flynt-password-form');
     add_theme_support('flynt-external-script-loader');
+    add_theme_support('flynt-lodash');
 }
 add_action('after_setup_theme', __NAMESPACE__ . '\\initTheme');
 

package.json

@@ -51,6 +51,7 @@
     "hard-source-webpack-plugin": "^0.11.1",
     "hasbin": "^1.2.3",
     "jeet": "^7.0.0",
+    "lodash": "^4.17.10",
     "normalize.css": "^7.0.0",
     "picturefill": "^3.0.2",
     "plugin-error": "^1.0.1",

yarn.lock

@@ -4119,7 +4119,7 @@ lodash@^4.0.0, lodash@^4.14.0, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lod
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
-lodash@^4.15.0:
+lodash@^4.15.0, lodash@^4.17.10:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"