Update dependencies to their latest #373

valentijnnieman · 2018-11-08T17:13:31Z

This PR updates most of the packages to their latest version.

This also removes some unused packages, like builder and old babel packages that are no longer needed.

Note that the move from react-dates 12.3 to 18.2 is a slightly bigger one - not only does it change the way styling is handled, but it also just looks different in general. I've updated the way we style our DatePicker components with some simple overwrites, but it still will look a little bit different. I don't think that's a bad thing though, necessarily. Check out the Percy diffs to see the changes in the DatePickers.

rmarren1 · 2018-11-09T03:31:09Z

Would this require moving dash-renderer from react 15 react 16?

rmarren1 · 2018-11-09T03:36:14Z

Those percy diffs look okay to me. Looks like a few components grew a pixel or two

valentijnnieman · 2018-11-09T15:27:55Z

@rmarren1 Yeah exactly, the biggest difference is the DatePicker stuff, and indeed some of the Percy screenshots look off by a pixel or two (I noticed in the last snapshot the Dropdown component's text's vertical centering was a bit off). I don't think it requires upgrading dash-renderer's React, since there aren't really any breaking changes. Taken from the React docs, if your app runs in 15.6 without any warnings, it should work in 16.

edit:
And dash-renderer supplies the version of React for Dash apps, which is 15.6

valentijnnieman · 2018-11-09T19:10:48Z

src/components/DatePickerRange.react.js

@@ -1,3 +1,4 @@
+import 'react-dates/initialize';


This is the new (or old, in any case the documented) way of using react-dates, as is on the github page

bpostlethwaite · 2018-11-09T20:31:30Z

We should either support package.lock and npm or yarn and yarn.lock. I think moving to yarn should happen as a separate project.

Can you remove yarn.lock and all references and commits to yarn and yarn.lock?

wbrgss

Please see comments 🙂

wbrgss · 2018-11-09T21:02:21Z

test/unit/Input.test.js

@@ -51,61 +51,61 @@ describe('Props can be set properly', () => {

    test('props.id is set as the <input> id', () => {
        // test if id is in the actual HTML string
-        const inputTag = input.render().children();
+        const inputTag = input.render();


What's the difference between render() and render().children() ? Does the change to the latter have to do with the React 16 upgrade?

It has to do with the Enzyme upgrade.

wbrgss · 2018-11-09T21:03:34Z

test/unit/Input.test.js

@@ -118,15 +118,15 @@ describe('Input with (default) type=text', () => {
            input = mount(<Input value="initial value" />);
        });
        test('Input updates value', () => {
-            expect(input.find('input').getNode().value).toEqual(
+            expect(input.find('input').instance().value).toEqual(


Similar question here, what is the difference between getNode() and instance()? An API change in enzyme?

Exactly. Enzyme got updated, and a bunch of the methods I used before didn't work anymore after upgrading.

wbrgss · 2018-11-09T21:14:37Z

src/components/css/react-dates-overrides.css

+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}


This is a good idea in principle but it's a bit dangerous to set the wildcard selector. Other components might be expecting the default content-box; we should double check if the layout looks different. I'd prefer if the above lines (6-11) were more explicitly in a "global" or "base" CSS file with the above comment explaining the rationale.

On the other hand, there's minimal changes in the Percy diffs, so that's promising.

wbrgss · 2018-11-09T21:15:44Z

test/test_integration.py

                'height': '60px',
                'lineHeight': '60px',
-                'borderWidatetimeh': '1px',
+                'borderWidth': '1px',


.circleci/config.yml

valentijnnieman · 2018-11-14T16:10:28Z

jest.config.js


  // Allows you to use a custom runner instead of Jest's default test runner
  // runner: "jest-runner",

  // The paths to modules that run some code to configure or set up the testing environment before each test
-  // setupFiles: [],
+  setupFiles: ['<rootDir>/test/setupTests.js'],


The Jest and Enzyme updates now require us to specify a React adapter to use - so we create this setupTests.js setup file to run before our tests.

valentijnnieman · 2018-11-14T16:11:05Z

jest.config.js

-  //   "<rootDir>"
-  // ],
+  roots: [
+    "<rootDir>/test/unit"


We don't want to look in other folders for JS tests - specifically the new setupTests.js file shouldn't be run as a unit test with Jest.

valentijnnieman · 2018-11-14T16:12:25Z

src/components/Link.react.js

+         * ideally, we would use cloneElement however
+         * that doesn't work with dash's recursive
+         * renderTree implementation for some reason
+         */


Sorry for this noise - it seems Prettier still picks up some formatting issues here and there from time to time. I think the formatting tests in Cirlce are maybe not 100% right, as it seems to miss these formatting issues.

valentijnnieman · 2018-11-14T16:12:48Z

src/components/SyntaxHighlighter.react.js

@@ -1,4 +1,4 @@
-import {arduinoLight, monokai} from 'react-syntax-highlighter/dist/styles';
+import {arduinoLight, monokai} from 'react-syntax-highlighter/dist/styles/hljs';


New syntax for updated react-syntax-highlighter

valentijnnieman · 2018-11-22T15:19:06Z

@chriddyp We could still merge this branch, since almost all of the packages used are updated. If dash-renderer provides React, and if the dcc bundles build with these updated packages/dependencies work without failing, then surely that won't break anything? I've also checked the updated packages's dependencies, and none specify that they don't work below React 16. If you're good with it, I can take out the references to version 1.0.0 and we can merge this, closing all of the open greenkeeper ones (which was the goal of this PR when I started with it anyway)

Replace package-lock.json with yarn.lock in .circle/config

Reformat src and rebuild

Tiny react-dates styling fix Fix test regression CSS

valentijnnieman · 2018-11-28T19:53:49Z

@Marc-Andre-Rivet Reverted the changes to the client-facing react packages such as react-dates, only internal tooling updates now. Again apologies for the messy PR / commit history!

valentijnnieman · 2018-11-28T21:23:50Z

@Marc-Andre-Rivet Also removed react-select because it wasn't used - we're using react-virtualized-select and the dependency to react-select doesn't really do anything.

Marc-Andre-Rivet

With the removal of the customer facing package updates (react-dates, markdown, highlighter, etc.) I see this essentially as a toolchain update. I understand that we are still running the integration/e2e tests against react 15.4.2 / the dash-renderer version, so the bump to react 16.6.1 only impacts the enzyme tests.

This feels very similar to the current situation in the dash-table where the table is technically coded against 16.6.x, has 0.14 peer deps, is tested against 15.4.2 and only tested against 16.6.x with @storybook/react. The slight difference is that here the unit tests are run against 16 instead of 15 but integration/e2e tests should be able to catch a breaking change/usage.

lgtm

valentijnnieman force-pushed the update_react_16.6.1 branch from acd64fd to 5374277 Compare November 9, 2018 17:43

valentijnnieman changed the title ~~[WIP] Update to React 16.6.1~~ Update to React 16.6.1 Nov 9, 2018

valentijnnieman force-pushed the update_react_16.6.1 branch from 5374277 to 3faabe0 Compare November 9, 2018 19:08

valentijnnieman commented Nov 9, 2018

View reviewed changes

wbrgss suggested changes Nov 9, 2018

View reviewed changes

valentijnnieman changed the base branch from master to 1.0-release November 12, 2018 17:07

valentijnnieman changed the base branch from 1.0-release to master November 12, 2018 17:13

wbrgss approved these changes Nov 12, 2018

View reviewed changes

valentijnnieman commented Nov 14, 2018

View reviewed changes

wbrgss modified the milestone: Add base set of core components Nov 22, 2018

chriddyp mentioned this pull request Nov 26, 2018

Dash 1.0.0 Series - Proposed Set of *Breaking Changes* plotly/dash#469

Closed

24 tasks

valentijnnieman added 6 commits November 28, 2018 13:17

Update peerDepencies react & react-dom to 16.6.1

c772dad

Update all packages to their React 16 dependent versions

a4408a0

Add react & react-dom to devDependencies to fix warnings

b55193e

Remove unused packages & update deps vs devDeps

12311f3

Replace package-lock.json with yarn.lock file

818923a

Replace package-lock.json with yarn.lock in .circle/config

Update DatePickerRange with new initialize CSS

daac353

valentijnnieman added 12 commits November 28, 2018 13:17

Update SyntaxHighligher language import

87da6f9

Rebuild bundle with new packages

794c4c6

Reformat src and rebuild

Fix ESLint by installing eslint-plugin-import

91d1384

Repair Jest tests with new Enzyme config

61fc426

Refactored DatePicker to new react-date style

7faa5ad

Tiny react-dates styling fix Fix test regression CSS

Upgrade to babel 7, fix Jest Babel 7 bug

ea4e409

Put package-lock back and remove yarn.lock

7044b00

Revert changes to circleci config and peerDeps

92e97f4

Reorder dependencies and devDependencies

5f96de8

Update version and changelog

3f3d578

Change version 1.0.0 => 0.39.0

0617ac6

Updated package-lock.json

3c74f5f

valentijnnieman force-pushed the update_react_16.6.1 branch from e3c3343 to 3c74f5f Compare November 28, 2018 18:33

valentijnnieman changed the title ~~Update to React 16.6.1~~ Update dependencies to their latest Nov 28, 2018

valentijnnieman requested a review from Marc-Andre-Rivet November 28, 2018 18:38

Revert changes to client-facing React packages

3be3ba5

Remove react-select dependencie because it's not used

7533e1e

Marc-Andre-Rivet approved these changes Nov 28, 2018

View reviewed changes

valentijnnieman mentioned this pull request Nov 28, 2018

An in-range update of react-select is breaking the build 🚨 #114

Closed

valentijnnieman merged commit 6558624 into master Nov 28, 2018

valentijnnieman deleted the update_react_16.6.1 branch November 28, 2018 21:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update dependencies to their latest #373

Update dependencies to their latest #373

valentijnnieman commented Nov 8, 2018 •

edited

Loading

rmarren1 commented Nov 9, 2018 •

edited

Loading

rmarren1 commented Nov 9, 2018

valentijnnieman commented Nov 9, 2018 •

edited

Loading

valentijnnieman Nov 9, 2018

bpostlethwaite commented Nov 9, 2018

wbrgss left a comment

wbrgss Nov 9, 2018

valentijnnieman Nov 9, 2018

wbrgss Nov 9, 2018

valentijnnieman Nov 9, 2018

wbrgss Nov 9, 2018

wbrgss Nov 9, 2018

wbrgss Nov 9, 2018

valentijnnieman Nov 14, 2018

valentijnnieman Nov 14, 2018

valentijnnieman Nov 14, 2018

valentijnnieman Nov 14, 2018

valentijnnieman commented Nov 22, 2018

valentijnnieman commented Nov 28, 2018

valentijnnieman commented Nov 28, 2018

Marc-Andre-Rivet left a comment

		@@ -1,4 +1,4 @@
		import {arduinoLight, monokai} from 'react-syntax-highlighter/dist/styles';
		import {arduinoLight, monokai} from 'react-syntax-highlighter/dist/styles/hljs';

Update dependencies to their latest #373

Update dependencies to their latest #373

Conversation

valentijnnieman commented Nov 8, 2018 • edited Loading

rmarren1 commented Nov 9, 2018 • edited Loading

rmarren1 commented Nov 9, 2018

valentijnnieman commented Nov 9, 2018 • edited Loading

Choose a reason for hiding this comment

bpostlethwaite commented Nov 9, 2018

wbrgss left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

valentijnnieman commented Nov 22, 2018

valentijnnieman commented Nov 28, 2018

valentijnnieman commented Nov 28, 2018

Marc-Andre-Rivet left a comment

Choose a reason for hiding this comment

valentijnnieman commented Nov 8, 2018 •

edited

Loading

rmarren1 commented Nov 9, 2018 •

edited

Loading

valentijnnieman commented Nov 9, 2018 •

edited

Loading