Skip to content

A tool to convert any React JS app to Svelte app πŸš€

License

Notifications You must be signed in to change notification settings

PoCInnovation/Sveno

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Sveno

Β python versionΒ Β license

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. ⏬ Sveno aims to become a powerful tool able to transpile complete projects, and to help developpers πŸ’» discover the advantages of using Svelte. 😎

React to Svelte

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 βš–οΈ. As a result, Svelte is significantly faster πŸƒβš‘ than any framework or library using virtual DOMs when it comes to downloading webpages into a browser.

Learn more here

Setup

You'll need Python3 🐍 and pip3 installed. You will also need npm installed. Install the requirements by launching the script ./install.sh
Congratz πŸ₯³ ! You're ready to go!

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

  1. 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.
  2. Using a set of regex πŸ”€ (regular expressions), key elements are gathered and stored into dataclasses. Try some regex here.
  3. 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 become name)
  4. 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 named actions.jsx and containing 2 components named simpleAction and doubleAction will result in a folder named actions with two svelte files named simpleAction.svelte and doubleAction.svelte
  5. 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

About

A tool to convert any React JS app to Svelte app πŸš€

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •