{"id":13856681,"url":"https://github.com/PoCInnovation/Sveno","last_synced_at":"2025-07-13T19:32:17.164Z","repository":{"id":53938136,"uuid":"353102155","full_name":"PoCInnovation/Sveno","owner":"PoCInnovation","description":"A tool to convert any React JS app to Svelte app 🚀","archived":false,"fork":false,"pushed_at":"2021-09-12T11:25:35.000Z","size":458,"stargazers_count":78,"open_issues_count":3,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-08-06T03:02:02.555Z","etag":null,"topics":["python-3","reactjs","svelte"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PoCInnovation.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-30T18:26:33.000Z","updated_at":"2024-07-17T22:18:53.000Z","dependencies_parsed_at":"2022-08-13T05:01:03.394Z","dependency_job_id":null,"html_url":"https://github.com/PoCInnovation/Sveno","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PoCInnovation%2FSveno","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PoCInnovation%2FSveno/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PoCInnovation%2FSveno/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PoCInnovation%2FSveno/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PoCInnovation","download_url":"https://codeload.github.com/PoCInnovation/Sveno/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225912206,"owners_count":17544120,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["python-3","reactjs","svelte"],"created_at":"2024-08-05T03:01:08.721Z","updated_at":"2024-11-22T14:30:30.353Z","avatar_url":"https://github.com/PoCInnovation.png","language":"Python","funding_links":[],"categories":["Python"],"sub_categories":[],"readme":"### \u003ch3 align=\"center\" style=\"font-size:3em\" id=\"heading\"\u003eSveno\u003c/h3\u003e\n\u003cp align=\"center\"\u003e \u003c!--\u003ca target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/version-v0.0.1-blue?style=for-the-badge\u0026logo=none\" alt=\"release version\" /\u003e\u003c/a\u003e--\u003e\u0026nbsp;\u003ca href=\"https://www.python.org/downloads/\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Python-3.8+-00ADD8?style=for-the-badge\u0026logo=python\" alt=\"python version\" /\u003e\u003c/a\u003e\u0026nbsp;\u003c/a\u003e\u0026nbsp;\u003cimg src=\"https://img.shields.io/badge/license-MIT-red?style=for-the-badge\u0026logo=none\" alt=\"license\" /\u003e\u003c/p\u003e\n\nSveno 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. ⏬\nSveno aims to become a powerful tool  able to transpile complete projects, and to help developpers 💻 discover the advantages of using Svelte. 😎\n\n\u003cdiv align=\"center\"\u003e\n\n![React to Svelte](react-to-svelte.png)\n\u003c/div\u003e\n\n## Summary\n- [Why Svelte](#why-svelte)\n- [Setup](#setup)\n- [Usage](#usage)\n- [How it works](#how-it-works)\n- [Functionnalities](#functionnalities)\n- [Documentation](#documentation)\n- [Upcoming](#upcoming)\n- [Contributors](#contributors)\n\n\u003cdiv id=\"id-why-svelte\"/\u003e\n\n## Why Svelte\nWhile 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.\n\n[Learn more here](https://svelte.dev/blog/virtual-dom-is-pure-overhead)\n\n\u003cdiv id=\"id-setup\"/\u003e\n\n## Setup\n\nYou'll need [Python3](https://www.python.org/downloads/) 🐍 and [pip3](https://pip.pypa.io/en/stable/getting-started/) installed.\nYou will also need [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm/) installed.\nInstall the requirements by launching the script `./install.sh`\u003cbr/\u003e\nCongratz 🥳 ! You're ready to go!\n\n## Usage\n\nThe program takes 2 arguments: the react source folder and a svelte destination folder\n\n`python3  ./src/main.py react_source_folder svelte_destination_folder`\n\n## How it works\n\n1. 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.\n2. Using a set of regex  🔤 (regular expressions), key elements are gathered and stored into dataclasses. [Try some regex here.](https://regex101.com/)\n3. 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`)\n4. 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.\u003cbr\u003eFor 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`\n5. Components are written 📝 in the new files, using the dataclasses and corresponding templates.\n\n\n## Functionnalities\nAs of today, the following elements can be transpiled:\n* Functionnal components\n* Class components\n* 'Classic' functions\n* Props\n* Class Lifecycle methods (ComponentWillMount, ComponentDidMount, ComponentDidUpdate, GetSnapshotBeforeUpdate)\n* UseEffect (The functionnal component LifeCycle hook)\n* SetState, UseState, this.state - initialize and set variable values\n* Events (onClick, onMouseMove, etc)\n\n## Documentation\n* Install [Doxygen](https://www.doxygen.nl/download.html)\n* To generate the documentation, just do\n    - `doxygen .doxygen`\n* You can now consult the documentation by running the html statically for example with chrome\n    - `google-chrome doc/html/index.html`\n\n## Upcoming\n* ReactDOM.render() and entrypoint\n* Better utilitary files handling\n* Loops\n* Conditions\n* Routing\n\n\u003cdiv id=\"id-contributors\"/\u003e\n\n## Contributors\n- [Allan Deleve](https://github.com/Gfaim)\n- [Amoz Pay](https://github.com/amozpay)\n- [Baptiste Barbotin](https://github.com/barbo69)\n- [Tom Chaveau](https://github.com/TomChv)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPoCInnovation%2FSveno","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FPoCInnovation%2FSveno","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FPoCInnovation%2FSveno/lists"}