From 3e2e915e1099f7477239ca818a38a7e7ff045f9b Mon Sep 17 00:00:00 2001 From: Igor Date: Thu, 28 Dec 2017 08:47:51 +0200 Subject: [PATCH 1/2] Revert "Move everything from lodash to lodash-es" --- addons/knobs/package.json | 2 +- addons/knobs/src/components/Panel.js | 2 +- app/angular/package.json | 3 +-- .../angular/components/app.component.ts | 17 ++----------- .../src/client/preview/angular/helpers.ts | 25 ++++++++++++++++--- app/react/package.json | 2 +- app/react/src/client/preview/element_check.js | 2 +- dangerfile.js | 2 +- jest.config.js | 1 - lib/ui/package.json | 4 ++- lib/ui/src/modules/api/actions/api.js | 2 +- .../modules/shortcuts/actions/shortcuts.js | 2 +- .../ui/components/stories_panel/index.js | 2 +- .../components/stories_panel/text_filter.js | 2 +- .../stories_panel/text_filter.test.js | 2 +- lib/ui/src/modules/ui/containers/layout.js | 2 +- lib/ui/src/modules/ui/libs/filters.js | 2 +- package.json | 3 ++- yarn.lock | 14 +++++------ 19 files changed, 48 insertions(+), 43 deletions(-) diff --git a/addons/knobs/package.json b/addons/knobs/package.json index 4bee8876c7a8..d8bd8a9aa791 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -18,7 +18,7 @@ "deep-equal": "^1.0.1", "global": "^4.3.2", "insert-css": "^2.0.0", - "lodash-es": "^4.17.4", + "lodash.debounce": "^4.0.8", "moment": "^2.20.1", "prop-types": "^15.6.0", "react-color": "^2.11.4", diff --git a/addons/knobs/src/components/Panel.js b/addons/knobs/src/components/Panel.js index 141fc4e33746..062f660c23a1 100644 --- a/addons/knobs/src/components/Panel.js +++ b/addons/knobs/src/components/Panel.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import debounce from 'lodash-es/debounce'; +import debounce from 'lodash.debounce'; import PropForm from './PropForm'; import Types from './types'; diff --git a/app/angular/package.json b/app/angular/package.json index a1fb1ac2e95e..9f3962915708 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -54,7 +54,7 @@ "json-loader": "^0.5.4", "json-stringify-safe": "^5.0.1", "json5": "^0.5.1", - "lodash-es": "^4.17.4", + "lodash.pick": "^4.4.0", "postcss-flexbugs-fixes": "^3.0.0", "postcss-loader": "^2.0.5", "prop-types": "^15.5.10", @@ -80,7 +80,6 @@ "zone.js": "^0.8.19" }, "devDependencies": { - "@types/lodash-es": "^4.17.0", "babel-cli": "^6.26.0", "babel-plugin-transform-decorators": "^6.24.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", diff --git a/app/angular/src/client/preview/angular/components/app.component.ts b/app/angular/src/client/preview/angular/components/app.component.ts index f8a6f636f2f1..5f9dffe3534d 100644 --- a/app/angular/src/client/preview/angular/components/app.component.ts +++ b/app/angular/src/client/preview/angular/components/app.component.ts @@ -2,16 +2,7 @@ // to provide @Inputs and subscribe to @Outputs, see // https://github.com/angular/angular/issues/15360 // For the time being, the ViewContainerRef approach works pretty well. - -import has from 'lodash-es/has'; -import get from 'lodash-es/get'; -import set from 'lodash-es/set'; -import isFunction from 'lodash-es/isFunction'; -import isUndefined from 'lodash-es/isUndefined'; -import isEmpty from 'lodash-es/isEmpty'; -import forEach from 'lodash-es/forEach'; -import invoke from 'lodash-es/invoke'; - +import * as _ from 'lodash'; import { Component, Inject, @@ -24,12 +15,9 @@ import { SimpleChanges, SimpleChange } from '@angular/core'; - import { STORY } from '../app.token'; import { NgStory, ICollection } from '../types'; -const _ = { has, get, set, isFunction, isUndefined, isEmpty , forEach, invoke }; - @Component({ selector: 'app-root', template: '' @@ -37,7 +25,6 @@ const _ = { has, get, set, isFunction, isUndefined, isEmpty , forEach, invoke }; export class AppComponent implements AfterViewInit, OnDestroy { @ViewChild('target', { read: ViewContainerRef }) target: ViewContainerRef; - constructor( private cfr: ComponentFactoryResolver, @Inject(STORY) private data: NgStory @@ -103,7 +90,7 @@ export class AppComponent implements AfterViewInit, OnDestroy { } if (_.isFunction(props.ngModelChange)) { - _.invoke(instance, 'registerOnChange', props.ngModelChange); + _.invoke(instance, 'registerOnChange', props.ngModelChange); } } } diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts index 1c10dbbc98b5..4870f525ff13 100644 --- a/app/angular/src/client/preview/angular/helpers.ts +++ b/app/angular/src/client/preview/angular/helpers.ts @@ -7,8 +7,6 @@ import { } from '@angular/core'; import {FormsModule} from '@angular/forms' -import _debounce from 'lodash-es/debounce'; - import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './components/app.component'; @@ -33,7 +31,28 @@ interface IComponent extends Type { propsMetadata: any[] } -const debounce = (func: IRenderStoryFn | IRenderErrorFn) => _debounce(func, 100); +// Taken from https://davidwalsh.name/javascript-debounce-function +// We don't want to pull underscore +const debounce = (func: IRenderStoryFn | IRenderErrorFn, + wait: number = 100, + immediate: boolean = false): () => void => { + let timeout: any; + return function () { + const context = this, args = arguments; + const later = function () { + timeout = null; + if (!immediate) { + func.apply(context, args); + } + }; + const callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + if (callNow) { + func.apply(context, args); + } + }; +}; const getComponentMetadata = ( { component, props = {}, propsMeta = {}, moduleMetadata = { diff --git a/app/react/package.json b/app/react/package.json index 742d5ea0940d..0213b984eebf 100644 --- a/app/react/package.json +++ b/app/react/package.json @@ -60,7 +60,7 @@ "json-loader": "^0.5.7", "json-stringify-safe": "^5.0.1", "json5": "^0.5.1", - "lodash-es": "^4.17.4", + "lodash.flattendeep": "^4.4.0", "markdown-loader": "^2.0.1", "npmlog": "^4.1.2", "postcss-flexbugs-fixes": "^3.2.0", diff --git a/app/react/src/client/preview/element_check.js b/app/react/src/client/preview/element_check.js index fdfa3168ab91..cbcb2f518da6 100644 --- a/app/react/src/client/preview/element_check.js +++ b/app/react/src/client/preview/element_check.js @@ -1,5 +1,5 @@ import React from 'react'; -import flattenDeep from 'lodash-es/flattenDeep'; +import flattenDeep from 'lodash.flattendeep'; // return true if the element is renderable with react fiber export const isValidFiberElement = element => diff --git a/dangerfile.js b/dangerfile.js index 39f30cd6fd3a..6b8c437802cf 100644 --- a/dangerfile.js +++ b/dangerfile.js @@ -1,5 +1,5 @@ import { fail, danger } from 'danger'; -import { flatten, intersection, isEmpty, includes } from 'lodash-es'; +import { flatten, intersection, isEmpty, includes } from 'lodash'; const pkg = require('./package.json'); // eslint-disable-line import/newline-after-import const prLogConfig = pkg['pr-log']; diff --git a/jest.config.js b/jest.config.js index 62bfa9a4effe..5cbca1678f6c 100644 --- a/jest.config.js +++ b/jest.config.js @@ -14,7 +14,6 @@ module.exports = { '/examples/cra-kitchen-sink', '/examples/official-storybook', ], - transformIgnorePatterns: ['/node_modules/(?!lodash-es/.*)'], testPathIgnorePatterns: ['/node_modules/', 'addon-jest.test.js', '/cli/test/'], collectCoverage: false, collectCoverageFrom: [ diff --git a/lib/ui/package.json b/lib/ui/package.json index a0ba088c3a6e..932540e8d5be 100644 --- a/lib/ui/package.json +++ b/lib/ui/package.json @@ -24,7 +24,9 @@ "global": "^4.3.2", "json-stringify-safe": "^5.0.1", "keycode": "^2.1.9", - "lodash-es": "^4.17.4", + "lodash.debounce": "^4.0.8", + "lodash.pick": "^4.4.0", + "lodash.sortby": "^4.7.0", "podda": "^1.2.2", "prop-types": "^15.6.0", "qs": "^6.5.1", diff --git a/lib/ui/src/modules/api/actions/api.js b/lib/ui/src/modules/api/actions/api.js index 0a36f30bc4ac..d871a3d9bcfe 100755 --- a/lib/ui/src/modules/api/actions/api.js +++ b/lib/ui/src/modules/api/actions/api.js @@ -1,4 +1,4 @@ -import pick from 'lodash-es/pick'; +import pick from 'lodash.pick'; export function jumpToStory(storyKinds, selectedKind, selectedStory, direction) { const flatteredStories = []; diff --git a/lib/ui/src/modules/shortcuts/actions/shortcuts.js b/lib/ui/src/modules/shortcuts/actions/shortcuts.js index cc7e130bce57..1920b154e013 100755 --- a/lib/ui/src/modules/shortcuts/actions/shortcuts.js +++ b/lib/ui/src/modules/shortcuts/actions/shortcuts.js @@ -1,4 +1,4 @@ -import pick from 'lodash-es/pick'; +import pick from 'lodash.pick'; import { features } from '../../../libs/key_events'; import apiActions from '../../api/actions'; diff --git a/lib/ui/src/modules/ui/components/stories_panel/index.js b/lib/ui/src/modules/ui/components/stories_panel/index.js index 6e1bc12615a0..e8282889dd5a 100755 --- a/lib/ui/src/modules/ui/components/stories_panel/index.js +++ b/lib/ui/src/modules/ui/components/stories_panel/index.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import pick from 'lodash-es/pick'; +import pick from 'lodash.pick'; import Header from './header'; import Stories from './stories_tree'; import TextFilter from './text_filter'; diff --git a/lib/ui/src/modules/ui/components/stories_panel/text_filter.js b/lib/ui/src/modules/ui/components/stories_panel/text_filter.js index d30aa58c2c3e..0e88d0ffdc37 100755 --- a/lib/ui/src/modules/ui/components/stories_panel/text_filter.js +++ b/lib/ui/src/modules/ui/components/stories_panel/text_filter.js @@ -1,6 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; -import debounce from 'lodash-es/debounce'; +import debounce from 'lodash.debounce'; import { baseFonts } from '@storybook/components'; const defaultTextValue = ''; diff --git a/lib/ui/src/modules/ui/components/stories_panel/text_filter.test.js b/lib/ui/src/modules/ui/components/stories_panel/text_filter.test.js index bbb564fe1313..aa03026f0c82 100755 --- a/lib/ui/src/modules/ui/components/stories_panel/text_filter.test.js +++ b/lib/ui/src/modules/ui/components/stories_panel/text_filter.test.js @@ -2,7 +2,7 @@ import { shallow, mount } from 'enzyme'; import React from 'react'; import TextFilter from './text_filter'; -jest.mock('lodash-es/debounce', () => jest.fn(fn => fn)); +jest.mock('lodash.debounce', () => jest.fn(fn => fn)); describe('manager.ui.components.stories_panel.test_filter', () => { describe('render', () => { diff --git a/lib/ui/src/modules/ui/containers/layout.js b/lib/ui/src/modules/ui/containers/layout.js index 4c65c72479d2..cb89879735ea 100755 --- a/lib/ui/src/modules/ui/containers/layout.js +++ b/lib/ui/src/modules/ui/containers/layout.js @@ -1,4 +1,4 @@ -import pick from 'lodash-es/pick'; +import pick from 'lodash.pick'; import Layout from '../components/layout'; import genPoddaLoader from '../libs/gen_podda_loader'; import compose from '../../../compose'; diff --git a/lib/ui/src/modules/ui/libs/filters.js b/lib/ui/src/modules/ui/libs/filters.js index 947f67f5d9a4..358b2a3f6455 100755 --- a/lib/ui/src/modules/ui/libs/filters.js +++ b/lib/ui/src/modules/ui/libs/filters.js @@ -1,5 +1,5 @@ import Fuse from 'fuse.js'; -import sortBy from 'lodash-es/sortBy'; +import sortBy from 'lodash.sortby'; const searchOptions = { shouldSort: false, diff --git a/package.json b/package.json index 358d59a195e0..a4db48c3267d 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "chromatic": "npm --prefix examples/official-storybook run chromatic" }, "devDependencies": { + "@types/lodash": "^4.14.91", "babel-cli": "^6.26.0", "babel-core": "^6.26.0", "babel-eslint": "^8.1.2", @@ -72,7 +73,7 @@ "jest-jasmine2": "^22.0.4", "lerna": "^2.5.1", "lint-staged": "^6.0.0", - "lodash-es": "^4.17.4", + "lodash": "^4.17.4", "nodemon": "^1.14.3", "npmlog": "^4.1.2", "prettier": "^1.9.2", diff --git a/yarn.lock b/yarn.lock index 3f5ca04b7bc7..d73951260eba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -287,13 +287,7 @@ version "2.8.2" resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-2.8.2.tgz#6ae4d8740c0da5d5a627df725b4eed71b8e36668" -"@types/lodash-es@^4.17.0": - version "4.17.0" - resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.0.tgz#ed9044d62ee36a93e0650b112701986b1c74c766" - dependencies: - "@types/lodash" "*" - -"@types/lodash@*": +"@types/lodash@^4.14.91": version "4.14.91" resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.91.tgz#794611b28056d16b5436059c6d800b39d573cd3a" @@ -8438,7 +8432,7 @@ lockfile@~1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/lockfile/-/lockfile-1.0.3.tgz#2638fc39a0331e9cac1a04b71799931c9c50df79" -lodash-es@^4.17.4, lodash-es@^4.2.1: +lodash-es@^4.2.1: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7" @@ -8517,6 +8511,10 @@ lodash.cond@^4.3.0: version "4.5.2" resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5" +lodash.debounce@^4.0.8: + version "4.0.8" + resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" + lodash.defaults@^4.2.0: version "4.2.0" resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c" From b02206a93f69848efab096631cdc2618bc4cb506 Mon Sep 17 00:00:00 2001 From: igor Date: Thu, 28 Dec 2017 09:01:03 +0200 Subject: [PATCH 2/2] Remove a note about lodash-es from readme --- MIGRATION.md | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 531ceec06b95..e331a988902f 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -34,16 +34,6 @@ In the case of Vue: `import { ... } from '@storybook/addon-knobs/vue';` In the case of Angular: `import { ... } from '@storybook/addon-knobs/angular';` -### Storyshots Jest configuration - -Storyshots users will need to add a line to their `jest.config.js`: - -```js - transformIgnorePatterns: ['/node_modules/(?!lodash-es/.*)'], -``` - -We are working to resolve the issue that requires this: https://github.com/storybooks/storybook/issues/2570 - ## From version 3.1.x to 3.2.x **NOTE:** technically this is a breaking change, but only if you use TypeScript. Sorry people!