Sveno
Sveno is a component transpiler that transform React components to Svelte components. It only works on simple small non-library components so far, but more updates are coming.
Summary
Why Svelte
While React is a library that adds extra weight to your code base and uses a virtual DOM, Svelte compiles it's files to ideal javascript, thus reducing the actual weight
Setup
You'll need Python3 ./install.sh
Congratz
Usage
The program takes 2 arguments: the react source folder and a svelte destination folder
python3 ./src/main.py react_source_folder svelte_destination_folder
How it works
- The program looks
ð through each file, starting from the source root folder, that has a.js
or a.jsx
extension. Style files with.css
extension are also taken into account and can be integrated into the correct svelte component. - Using a set of regex
ðĪ (regular expressions), key elements are gathered and stored into dataclasses. Try some regex here. - Dataclasses
ðū are the main element that will be worked upon. Class Components, Functionnal Components, Variables, and other important pieces of code have their own dataclass. They are used to access information and transform syntactic elements from react to svelte syntax. Some elements are substituted while others are simply deleted (eg:this.props.name
will becomename
) - New files and folders
ð are created. Because React files can contain multiple components, contrarly to Svelte files, each component will be translated into a new file of the same name. They will be contained in a folder bearing the name of the initial react file.
For example, a file namedactions.jsx
and containing 2 components namedsimpleAction
anddoubleAction
will result in a folder namedactions
with two svelte files namedsimpleAction.svelte
anddoubleAction.svelte
- Components are written
ð in the new files, using the dataclasses and corresponding templates.
Functionnalities
As of today, the following elements can be transpiled:
- Functionnal components
- Class components
- 'Classic' functions
- Props
- Class Lifecycle methods (ComponentWillMount, ComponentDidMount, ComponentDidUpdate, GetSnapshotBeforeUpdate)
- UseEffect (The functionnal component LifeCycle hook)
- SetState, UseState, this.state - initialize and set variable values
- Events (onClick, onMouseMove, etc)
Documentation
- Install Doxygen
- To generate the documentation, just do
doxygen .doxygen
- You can now consult the documentation by running the html statically for example with chrome
google-chrome doc/html/index.html
Upcoming
- ReactDOM.render() and entrypoint
- Better utilitary files handling
- Loops
- Conditions
- Routing