react-gradual-upgrade-demo
react-codemod
Our great sponsors
react-gradual-upgrade-demo | react-codemod | |
---|---|---|
9 | 9 | |
420 | 4,058 | |
0.2% | 0.4% | |
0.0 | 3.2 | |
over 1 year ago | 4 days ago | |
JavaScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
react-gradual-upgrade-demo
-
Node module issues when gradually upgrading to React 17 from React 15
I've run into a weird issue when trying to gradually upgrade. If you don't know, React Gradual upgrade is a fun process where you require three package.json's - one in the root directory, one in src/legacy and one in src/modern. Refer to here for more info: GitHub I am getting the errors after running npm start ("webpack-dev-server --hot"):
-
TodoMVC App Written in Vanilla JavaScript
The event listeners get cleaned up by the GC. At least in modern browsers.
While events aren’t explicitly mentioned, MDN offers an insightful read:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memo...
Alternately, one can use event delegation [0]. As does React under the hood [1].
0 - https://javascript.info/event-delegation
1 - https://reactjs.org/blog/2020/08/10/react-v17-rc.html#change...
-
Enzyme is dead. Now what?
React 17 Release Candidate came out. Shortly after, an issue has been raised in Enzyme repository to add support for React 17. Immediately after, @layershifter has opened a PR adding an official enzyme-adapter-react-17.
-
React 17 runs useEffect cleanup functions asynchronously
Yes, the React core team discussed that in their blog post on the release candidate of v.17, and advised those who really need synchronous cleanup to use the useLayoutEffect.
-
The Plan for React 18
React 17 included quite a bit of that work. Most of the event system was simplified/rewritten, pooling was removed, and delegation moved to the root.
-
React 17 DOM tree inside of React 16.2 DOM
Is it possible to do the reverse of the demo? - https://github.com/reactjs/react-gradual-upgrade-demo/
-
Two versions in the same web app
See https://github.com/reactjs/react-gradual-upgrade-demo
-
React.js 17: No New Features and New JSX Transform
You can take a look at a demo of gradual updates on an example repository put together by the React team.
-
What’s new in React v17.0 ?
Checkout the demo for gradual upgrade.
react-codemod
-
Converting class based components into functional ones
You can convert the “easy” render-only class components to function components using the pure-component codemod.
-
Front-end Guide
Developer Experience - There are a number of tools that improves the development experience with React. React Developer Tools is a browser extension that allows you to inspect your component, view and manipulate its props and state. Hot reloading with webpack allows you to view changes to your code in your browser, without you having to refresh the browser. Front end development involves a lot of tweaking code, saving and then refreshing the browser. Hot reloading helps you by eliminating the last step. When there are library updates, Facebook provides codemod scripts to help you migrate your code to the new APIs. This makes the upgrading process relatively pain-free. Kudos to the Facebook team for their dedication in making the development experience with React great.
-
A new way to ship Codemods
Like most popular libraries, e.g. React, Next.js and more, which provide codemods to help move their huge user base across versions, we needed a bespoke and fairly simple CLI wrapper of jscodeshift, that would provide a means of publishing, downloading and running codemods. So we created a custom 'codemod-cli', our first piece of internal codemod infrastructure.
-
React v18.0
If you'd like to migrate them, the React team maintains some awesome codemods:
https://github.com/reactjs/react-codemod
-
[AskJS] How do you release libraries updates with breaking changes?
Codemods - providing automated tooling to change old patterns to new ones can go a long way in helping drive adoption of the new version. The most notable example of doing this is react-codemod (many other examples exist)
-
All about Abstract Syntax Tree
Sometimes you need to migrate from one version of a library to another, for example, when React has updated to version 15.5 the PropTypes has moved to different package and the react-developers provides codemod for migration.
-
Modern JavaScript:Everything you missed over the last 10 years(ECMAScript 2020)
Can you point me towards examples of the usage of AST rewriting tools that are actively being used by open-source library maintainers in other ecosystems to help their consumers do upgrades in large code-bases (e.g. I can see that `clang` has AST tooling, but I don't see examples online of this being widely used: https://devblogs.microsoft.com/cppblog/exploring-clang-tooli...).
Within the JavaScript ecosystem this is quite popular (1. https://github.com/reactjs/react-codemod; 2. https://github.com/mui-org/material-ui/tree/HEAD/packages/ma... 3. https://github.com/emotion-js/emotion/tree/main/packages/esl... etc.) Teams that maintain huge codebases have tooling to safely automate their upgrades and the best library maintainers provide their consumers with these AST transformations.
> Don't tell that to anyone who uses
-
Introducing Astra: A Tool for Refactoring Java Programs at Scale
Agree. I know js has a similar tool, jscodeshift. https://github.com/reactjs/react-codemod and https://github.com/cpojer/js-codemod/tree/master/transforms have some ideas for js.
- React 17 DOM tree inside of React 16.2 DOM
What are some alternatives?
fastdom - Eliminates layout thrashing by batching DOM measurement and mutation tasks
jscodeshift - A JavaScript codemod toolkit.