Skip to main content

A Python Framework for writing Reactive web Front-Ends

Project description

Starfyre Logo

Discord Downloads

Starfyre ⭐🔥

Introduction:

Starfyre is a library that allows you to build reactive frontends using only Python. 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. Starfyre is based on Pyscript for client side functions and uses the concept of pyxides when structuring code.

  • pyxide - translates to a container. Every component is a container. It can contain other components or HTML elements.

📦 Installation:

pip install starfyre

A sample project is hosted on GitHub.

🚀 Sample App

To create an application

starfyre --create="my-app"

It will use the create-starfyre-app as the template to create a new project.

IDE/Editor Plugins

  • vim-starfyre : A Vim plugin for syntax highlighting Starfyre files.
  • vscode-starfyre : A VSCode extension for syntax highlighting Starfyre files.

A simple component

my-app/pages/__init__.fyre

import "../styles/index.css"

def message():
  return "World"

---client
from starfyre import js

def handle_click():
  js.console.log("Hello World")
---

<pyxide>
  <div onclick={handle_click()}>
    Hello, {message()}
  </div>
</pyxide>

Using Components

Click to expand

my-app/pages/__init__.fyre

import "../styles/index.css"
from @.components.custom_component import custom_component
# @ is the alias for the source directory. e.g. my-app in our case

<pyxide>
 <custom_component></custom_component>
</pyxide>

my-app/src/components/custom_component.fyre

<pyxide>
  <div> This is a custom component </div>
</pyxide>

State Management

Click to expand

Signals are super early at this moment. You need to have the word "signal" when declaring a variable. e.g. get_signal, set_signal, use_signal. And use_signal and get_signal can't be evaluated on the client, i.e. can't have {use_signal()+1}. This will be fixed with a better serialization.

my-app/pages/__init__.fyre

---client

[get_signal, set_signal, use_signal] = create_signal("Hello World")

def handle_click():
  set_signal("Goodbye World")
---

<pyxide>
  <div onclick={handle_click}>
    {use_signal()}
  </div>
</pyxide>

Routing

File based Routing

Starfyre supports file based routing.

my-app
├── pages
│   ├── __init__.fyre
│   ├── about.fyre
│   └── nav.fyre

Styling

Click to expand

Starfyre supports CSS and file based css.

import "../styles/index.css"

<style>
.component {
/* CSS here */
}

</style>

<pyxide>
  <div class="component"> Hello World </div>
</pyxide>

Dependencies

You need to have a starfyre_config.toml file in your project root directory. This file is used to specify the dependencies for your project. The dependencies are specified in the following format:

pyxide_packages = [] # for client side packages
server_packages = [] # for server side packages

[js_modules]
is_odd = "https://cdn.jsdelivr.net/npm/is-odd@3.0.1/+esm"
Fireworks = "https://cdn.jsdelivr.net/npm/fireworks-js@2.10.7/+esm"

You can specify the dependencies using the following commands:

starfyre --add-pyxide-package="package-name"
starfyre --add-server-package="package-name"
starfyre --add-js-module="module-name" --as="alias"

🚀 Sample CLI usage

Usage: python -m starfyre [OPTIONS]

  Command-line interface to compile and build a Starfyre project.

  Args:

      path (str): Path to the project directory.

      build (bool): Whether to start the build package.

      create (str): Name of the project to create.

      serve (bool): Whether to serve the project.

Options:
  --path TEXT    Path to the project. Requires --build.
  --build        Compile and build package. Requires --path.
  --create TEXT  Create a new project. Requires a project name.
  --serve        Serve the project. Requires --path.
  --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 Starfyre. 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

  1. Fork this repo
  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 environment 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 --build=True --path="test_application/"
      • The path variable here is the path to our application.
      • The build directory is basically a python package that contains all the compiled files. We use the --build flag to run that package.
  1. You can find a small test application in the test_application directory.
  2. Navigate to cd test_application/dist.
  3. Open index.html in your browser to see the output.

Feedback

Feel free to open an issue and let me know what you think of it.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

starfyre-0.21.0.tar.gz (22.2 kB view details)

Uploaded Source

Built Distribution

starfyre-0.21.0-py3-none-any.whl (25.2 kB view details)

Uploaded Python 3

File details

Details for the file starfyre-0.21.0.tar.gz.

File metadata

  • Download URL: starfyre-0.21.0.tar.gz
  • Upload date:
  • Size: 22.2 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/4.0.2 CPython/3.11.7

File hashes

Hashes for starfyre-0.21.0.tar.gz
Algorithm Hash digest
SHA256 d3f4c82fc0d43b4d13c0a7f3d41f3b39156c0b3980939d14822ac28e90712b26
MD5 6c36beea1a58d656c9692f6e808eac48
BLAKE2b-256 7bb0c6773d9d795231d3571db2163d26ece83523b9d0a565869869d726634ca0

See more details on using hashes here.

File details

Details for the file starfyre-0.21.0-py3-none-any.whl.

File metadata

  • Download URL: starfyre-0.21.0-py3-none-any.whl
  • Upload date:
  • Size: 25.2 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/4.0.2 CPython/3.11.7

File hashes

Hashes for starfyre-0.21.0-py3-none-any.whl
Algorithm Hash digest
SHA256 e0268d607bb471c7840224aaa23e0f0b55e3752f93be5004d2c8b1e8e8295712
MD5 7afce63e2926d1283a49b171e4b3f8aa
BLAKE2b-256 c7a5f144ee2097617970a82e008911d997511b37ad0c038e9bbee5107f5f9cf9

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page