https://github.com/smtdfc/rumious
A simple framework for building user interfaces with JSX
https://github.com/smtdfc/rumious
components framework javascript js jsx no-vdom rumious smtdfc ui
Last synced: 11 months ago
JSON representation
A simple framework for building user interfaces with JSX
- Host: GitHub
- URL: https://github.com/smtdfc/rumious
- Owner: smtdfc
- License: mit
- Created: 2025-01-31T02:00:55.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-05T05:24:52.000Z (11 months ago)
- Last Synced: 2025-05-07T13:05:57.943Z (11 months ago)
- Topics: components, framework, javascript, js, jsx, no-vdom, rumious, smtdfc, ui
- Language: TypeScript
- Homepage:
- Size: 590 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# ⚡ Rumious
**Rumious** is a UI framework based on **Web Components**, enabling you to build modern interfaces without relying on Virtual DOM
## 🚀 Key Features
- **Web Components** – Fully compatible with any framework or works independently.
- **No Virtual DOM** – High performance with minimal resource usage.
- **Lifecycle Hooks Support** – Control the rendering and removal process of components.
## 📦 Installation
```sh
npm install rumious rumious-cli
```
## 🔧 Basic Usage
Using **Rumious** to create custom components and apps is simple and efficient. Follow the steps below to get started with a basic example.
### 1. Create a New Project
Start by initializing a new Rumious project:
```sh
rumious init start-app
npm install
```
This command will generate a project directory with the basic structure and configuration files.
### 2. Create Your First App
Navigate to the *index.jsx* file and add the following code:
```js
import {RumiousApp, Fragment} from "rumious";
const app = new RumiousApp(document.getElementById("root"));
app.render(
Hello Rumious
alert("Hello Rumious!")}>Click me!
);
```
In this example, you are rendering a simple application with a heading and a button. When the button is clicked, an alert with "Hello Rumious!" is displayed.
### 3. Build and Test Your Project
Once you've created your app, you can build it and start testing it locally.
To build your project, run:
```sh
rumious build dev
npx http-server ./public -p 3000
```
After the build is complete, open your browser and go to http://localhost:3000 to see the result of your app.
---
By following these steps, you’ve created your first Rumious app, showcasing the power of Web Components in a lightweight and performant way. You can now customize and expand your project with more components and logic as needed.
## 📚 Documentation & Community
For detailed documentation and further examples, please visit the Rumious Documentation Site (link to be provided). You can also join our community on GitHub Discussions or Discord to share ideas, ask questions, and contribute to the project.
## 🎯 Roadmap
Enhanced Tooling: Development of CLI tools for component scaffolding and project setup.
State Management Integration: Seamless integration with popular state management libraries.
Improved Testing Utilities: Tools and guidelines for writing tests for Rumious components.
Additional Lifecycle Hooks: More granular control over component updates and re-renders.
## 📄 License
Rumious is open-sourced under the MIT License. See the LICENSE file for more information.
## 🙏 Contributing
Contributions are welcome! To contribute to Rumious, please follow these steps:
1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Commit your changes with clear, descriptive commit messages.
4. Submit a pull request describing your changes.
For more details, please see our Contributing Guidelines.
---
We hope Rumious helps you build better, faster, and more efficient web interfaces. Thank you for choosing Rumious!