-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
154 additions
and
0 deletions.
There are no files selected for viewing
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,132 @@ | ||
|
||
<img alt="Starfyre Logo" src="https://user-images.githubusercontent.com/29942790/221331176-609e156a-3896-4c1a-9386-7bf595dfb879.png" width="350" /> | ||
|
||
[![Discord](https://img.shields.io/discord/1080951642070978651?label=discord&logo=discord&logoColor=white&style=for-the-badge&color=blue)](https://discord.gg/ThQcpvJMZ6) | ||
|
||
# Starfyre ⭐🔥 | ||
|
||
## Introduction: | ||
|
||
Starfyre is a library that allows you to build reactive frontends using only Python. It is built using pyodide and wasm, which enables it to run natively in the browser. With Starfyre, you can create interactive, real-time applications with minimal effort. Simply define your frontend as a collection of observables and reactive functions, and let Starfyre handle the rest. | ||
|
||
Please note that Starfyre is still very naive and may be buggy, as it was developed in just five days. However, it is under active development and we welcome contributions to improve it. Whether you are a seasoned web developer or new to frontend development, we hope that you will find Starfyre to be a useful tool. Its intuitive API and simple, declarative style make it easy to get started, and its powerful features allow you to build sophisticated applications. | ||
|
||
|
||
## 📦 Installation: | ||
|
||
``` | ||
pip install starfyre | ||
``` | ||
|
||
A sample project is hosted on [GitHub](https://github.com/sansyrox/first-starfyre-app/). | ||
|
||
## 🚀 Sample App | ||
|
||
|
||
src/__init__.fyre | ||
```python | ||
|
||
from .parent import parent | ||
from .store import store | ||
|
||
def mocked_request(): | ||
return "fetched on the server" | ||
|
||
|
||
async def handle_on_click(e): | ||
alert("click rendered on client") | ||
if 1==1: | ||
print("Hello world") | ||
|
||
current_value = get_parent_signal() | ||
set_parent_signal(current_value + 1) | ||
a = await fetch('https://jsonplaceholder.typicode.com/todos/1') | ||
print(await a.text()) | ||
print("handles on click") | ||
|
||
|
||
<style> | ||
body { | ||
background-color: red; | ||
} | ||
</style> | ||
|
||
<pyml> | ||
<store> | ||
<parent hello='world'> | ||
<span onclick={handle_on_click}> | ||
{[ mocked_request() for i in range(4)]} | ||
</span> | ||
</parent> | ||
</store> | ||
</pyml> | ||
|
||
|
||
<script> | ||
// this is the optional section | ||
// for third party scripts and custom js | ||
</script> | ||
|
||
``` | ||
|
||
|
||
## 🚀 Sample CLI usage | ||
|
||
```bash | ||
Usage: python -m starfyre [OPTIONS] | ||
|
||
Options: | ||
--path TEXT Path to the project | ||
--dev BOOLEAN Start the compilation and generate the build package. | ||
--build BOOLEAN Start the build package | ||
--help Show this message and exit. | ||
``` | ||
|
||
## 🗒️ How to contribute | ||
|
||
### 🏁 Get started | ||
Please read the code of conduct and go through CONTRIBUTING.md before contributing to Robyn. Feel free to open an issue for any clarifications or suggestions. | ||
|
||
If you're feeling curious. You can take a look at a more detailed architecture here. | ||
|
||
If you still need help to get started, feel free to reach out on our community discord. | ||
|
||
|
||
## ⚙️ Developing Locally | ||
|
||
Python version 3.10 | ||
|
||
1. Fork this [repo](https://github.com/sparckles/starfyre) | ||
2. Clone this repo - `git clone https://github.com/sparckles/starfyre` | ||
3. Go in to the starfyre directory - `cd starfyre` | ||
4. Download poetry `curl -sSL https://install.python-poetry.org/ | python3 -` | ||
5. Install the dependencies `poetry install` | ||
6. Activate poetry virtual enviromente `poetry shell` | ||
7. Run the script `./build.sh`. This command will run the build process in starfyre against the test application in `test-application` directory. | ||
- The `build.sh` file is a simple script that runs two commands sequentially. | ||
- `python -m starfyre --dev=True --path="test-application/"` | ||
- `python -m starfyre --build=True --path="test-application/"` | ||
- The `path` variable here is the path to our application. | ||
- The `dev` flag here is used to start the compilation and create the `build` directory. | ||
- The `build` directory is basically a python package that contains all the compiled files. We use the `--build` flag to run that package. | ||
|
||
8. You can find a small test application in the `test-application` directory. | ||
9. Navigate to `cd test-application/dist`. | ||
10. Open `index.html` in your browser to see the output, run `explorer.exe index.html`. | ||
|
||
## Running the sample app with Docker | ||
|
||
#### Ideally, we should not be needing this. But if you are having trouble running the sample app locally, you can try this. | ||
|
||
1. Build the image `docker build --tag starfyre .` | ||
2. Run the container `docker run -v ./test-application:/app/test-application/ starfyre` | ||
3. Check the `test-application` directory for `build` and `dist` directories that contain the outputs | ||
4. If you would like to develop interactively inside the container, run `docker run -it -v ./test-application:/app/test-application/ starfyre bash` | ||
|
||
## Feedback | ||
|
||
Feel free to open an issue and let me know what you think of it. | ||
|
||
## Running Locally | ||
|
||
`npx docsify-cli serve docs` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<title>Document</title> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> | ||
<meta name="description" content="Description"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> | ||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/dark.css"> | ||
</head> | ||
<body> | ||
<div id="app"></div> | ||
<script> | ||
window.$docsify = { | ||
name: '', | ||
repo: '' | ||
} | ||
</script> | ||
<!-- Docsify v4 --> | ||
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script> | ||
</body> | ||
</html> |