4.x release

[char0n]

The goal of this issue is to update React to 17.x.y and have a remote branch on this repository running on React v17.x.y without any issues. More info in pre-release article: https://swagger.io/blog/api-design/what%E2%80%99s-ahead-for-swaggerui-v4-and-swaggereditor-v4/

Current state

We're currently running SwaggerUI on React@15.0.7 which was been released 8 months ago. React@15 release branch is more then 5 years old. It's time we start looking into what work would be required to make the update.

Update methodology

We understand that merely updating React itself will not suffice. There is network of other libraries connected to React that need to update as well. We can use current test suite for detecting any anomalies after the React update. These anomalies needs to be documented first before we move for eliminating them. This issue will maintain a list of all anomalies that need to be eliminated along with the list of tasks that need to performed.

Branch

All work in being done on release/4.x branch. Draft PR has been opened as well from release/4.x branch.

Community involvement

Any community involvement is welcomed! If you you're aware of any problem regarding usage of newer version of React then 15.0.7, please let us know in issue comments.

Resources

• React 16 release notes
• React 17 release notes
• enzyme 3.0.0 changelog and migration guide

Tasks

• Update React to 17.x.y
• Detect and update all React related dependencies that will require update too
• Detect and document all anomalies
• fix npm security vulnerabilities
• replace @kyleshockey/* libraries with original ones
• update js-yaml to latest version
• prefix lifecycle methods with UNSAFE_ (1918b36)
• Fix all anomalies
• don't include private IP in build
• update lodash to eliminate security vulnerability
• remove stream library
• remove duplicates in bundle (fixed in c2044ef)
• Body Edit Value loses focus after each character #7477
• document that it's required to use stream-browserify with webpack@5 (2657537)
• SwaggerUI throws an error when changing Servers #7525
• nvmrc should use Node.js 16.8 as minimum dev dep
• resolve all security vulnerabilities (dismiss rest)
• update husky to v7 and delete huskyrc file

Update React to 17.x.y #

react and react-dom packages have been updated to v17.0.2. Console did not reported any problem. Tests immediately stopped passing.

Updated	Name	Used version	Latest version
✓	react	15.7.0	17.0.2
✓	react-dom	15.7.0	17.0.2

Detect and update all React related dependencies that will require update too #

Production Dependencies

Updated	Name	Used version	Latest version
✓	react-immutable-pure-component	1.2.3	2.2.0
✓	react-inspector	2.3.1	5.1.1
✓	react-redux	4.4.10	7.2.4
✓	redux	3.7.2	4.1.0
✓	redux-immutable	3.1.0	4.0.0

Development Dependencies

Updated	Name	Used version	Latest version
✓	enzyme	2.9.1	3.11.0
✓	react-test-renderer	15.7.2	17.0.2

Anomalies

• just-test-in-node npm script fails
• test:unit-jest npm script fails
• Cypress tests are failing
• react-inspector has different API now
• warnings during npm install about non matching library versions

just-test-in-node npm script fails #

just-test-in-node npm script triggers errors. Current version of enzyme doesn't support react@17. In order for enzyme to work with react@17 we need to update enzyme to latest version and use @wojtekmaj/enzyme-adapter-react-17 adapter. Fixed in 6405fe7.

test:unit-jest npm script fails #

Problem is with latest version of enzyme and that returns a cheerio wrapper. This is a breaking change and we have to somehow deal with it. More about this problem in enzymejs/enzyme#1162. Related issue is that cheerio now doesn't escape quotes: " is now interpreted as " by cheerio, more in cheeriojs/cheerio#319. Empty string attributes on HTML tags are now supplied with empty string value of "" instead of making them boolean attributes. Fixed in 3ed335e.

Cypress tests are failing #

React@17 no longer support react-addons-perf. Documentation says following As of React 16, react-addons-perf is not supported. Please use your browser’s profiling tools to get insight into which components re-render. Learn more about this problem here. We'll be removing win.Perf assign from code. Fixed in ebcd552.

react-inspector has different API now #

initialExpandedPaths prop on ObjectInspector component changed to expandPaths.

warnings during npm install about non matching library versions #

react-debounce-input: requires a peer of react@^15.3.0 || ^16.0.0. Waiting for a new release witch official react@17 support without warning. Installed version 3.2.4. Ref nkbt/react-debounce-input#137

react-motion: requires a peer of react@^0.14.9 || ^15.3.0 || ^16.0.0. Very old not any more maintained library. The library usage was replaced by simple object in following shape: { stiffness: 170, damping: 26 }

request-promise: request-promise@4.2.6 requires a peer of request@^2.34 but none is installed. This will go away after we uninstall nightwatch.

request-promise-core: request-promise-core@1.1.4 requires a peer of request@^2.34 but none is installed. This will go away after we uninstall nightwatch.

tsutils: tsutils@3.21.0 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. This will stay with us as it's transitive dependency of eslint-plugin-jest. If we introduce TypeScript into codebase, it will go away.

Fix npm security vulnerabilites #

All npm security vulnerabilities (except 4) has been fixed. The 4 pending vulnerabilities are comming from transitive deps of webpack@4 and cannot be easily fixed. They will go away after we update to webpack@5. For now it's completely OK to dismiss them as they pose no thread. Fixed in 3162614

replace @kyleshockey/* libraries with original ones #

@kyleshockey/object-assign-deep - replaced by lodash/merge. If behavior not be compatible we'll use lodash/mergeWith.

@kyleshockey/xml - by installing stream library directly, we can use original xml library without the fork.

Fixed in 49c4bc4

[tim-lai]

1. redux & react-redux
2. additional error handling to be added, to swallow production errors, e.g. react-error-boundary

[tim-lai]

3. deprecated UNSAFE methods
4. remaining legacy Mocha tests that should get migrated to Jest, that may be React-related

[tim-lai]

@char0n fyi, note on redux@4... existing tests don't capture certain errors that can get generated, either with user behavior or problematic definitions. Here's the PR where I reverted the redux@4 change: #6331

[char0n]

Draft PR has been transformed into classic one.
Relase branch release/4.x has been rebased on top of master branch.

Going for v4.0.0 release now.

[char0n]

Swagger-ui v4.0.0 released