A cli tool for converting React class components to functional components with hooks.
We have two NPM modules for usage:
@reactionaries/hookd is our module
@reactionaries/hookd-cli is our cli tool
Hookd will create a /hookd
directory with your newly converted file
Babel will be the main tool for parsing traversal and generating your new code.
- babel parser
- parse existing code into an ast
- babel traverse
- traversal and manipulation of the ast
- babel types
- define and verify the state and creation of nodes
- babel generator
- creation of final ast code
- jamiebuilds' babel handbook fundamentals for creating babel plugins
- AST Explorer receives a special thanks
Hookd is a transpilation and transformation tool for React projects looking to slowly convert their projects into functional components with hooks. Currently hookd only supports the major 3 hooks: useState, useEffect, useContext. Since the transfer of class component syntax to functional component syntax is not a direct one to one relationship, hookd transforms syntax nodes and tries to make assumptions about the logic of your application and build a new file based off those assumptions. Due to our early release, the tool should primarily be used as a templating tool to create files that you can later build upon rather than an immediate replacement for all your class components.
- useState makes assumptions about
this.setState(cb)
where cb willreturn
an object literal. It does not keep track of any variables and thus should be accounted for during transformation. If thecb
were to return something else besides an object literal, it will break. this.setState(() => {})
andthis.setState(function(){})
will work fine butthis.setState(() => ())
will break. The code assumes the body of theArrowFunctionExpression
will be aBlockStatement
.- More syntaxes to account for that we have not thought about
useEffect syntax in particular makes assumptions about stateful references within componentDidMount, componentDidUpdate, and componentWillUnmount to build one or multiple useEffect hooks. Additionally hookd will try to find stateful references within the body of any non-life cycle method handlers and look again for those handlers within the life cycle methods. Hookd will then build up each hook with a callback, return statement, and dependency array depending on the case that it requires. useEffect accomplishes this by building a state dependency tree of all stateful references, the lifecycle method they were called in and whether a setState call was invoked. While these factors should determine most use cases for useEffect they are hardly all encompassing. As this is an alpha release we hope to increase the amount of edge cases it accounts for.
The useContext logic parses through the AST looking for indicators that Context API functions have been utlized, it then generates useContext cases based upon the values assiciated with those indicators. JSX context.consumer tags will be removed in the next update.