arcane

Python library for creating dynamic websites.


Keywords
HTML, Web, JS, CSS, Javascript
License
MIT
Install
pip install arcane==0.2

Documentation

Arcane

Easy-to-use Python library to create dynamic HTML pages with css and JS.

Under Development!

Most of the stuff shown in this page is under development!
Feel free to install Arcane and test it by your own risk.

Features

  • React-like components (using python classes).
  • Compiles into Javascript code (you don`t have to touch the js!).
  • Component Styiling using css.

Upcoming Features

  • Customizable Actions
  • More HTML Components (section, nav, table, etc...)

Installation

You can test arcane with pip.

pip install arcane

Once installed you can use most of Arcane classes by importing:

import arcane.components
import arcane.structures

The components file holds the Component class and all of HTML components, where structures contains the classes Page and in the future, Site.

Components

HTML Components

Arcane provides some already made components that transpile into pure HTML like:

  • Title -> h1
  • Container -> div
  • Paragraph -> p
  • Link -> a
  • Button -> button

Components Class

Arcane uses the Component class to transpile your code into JS, HTML and CSS, it has a "render" function that must return a single Component (yours or any HTML Component).
Components are made to be reusable in your code, just like React components.
Inside it you can freely use all of the HTML components mentioned above.

Example:

import arcane.components
import arcane.structures

class Menu(Component):
    def render(self):
        links = [Link("Home"), Link("About-us"), Link("FAQ")]
        container = Container(links)

        return container

Now you can insert your Menu component inside any other component or page that you create.

Triggers

All HTML components have trigger functions that will be called when it`s equivalent JS trigger is called.
Those triggers will recieve another function as parameter and will pass an Action class to it.
The Actions class have a "do" function that will transpile some pre-made Arcane events into JS events.

Example:

class Hello(Component):

    def toggle_menu(self, actions):
        # The toggle function will show or hide the component
        actions.do(self.menu.toggle())

    def render(self):
        self.menu = Menu()
        title = Title("Hello World!")
        button = Button("Toggle menu.", id="button")
        container = Container([menu, title, button])

        button.click(self.toggle_menu)

        return container

The button.click() trigger will call the self.menu.toggle() that will be transpiled to:

document.getElementId("button").addEventHandler("click", function() {
  let toggle = document.getElementId("menu");
  toggle.style.display == "none"
    ? (toggle.style.display = "block")
    : toggle.style.display == "none";
});

Page

The Page class will join all of your desired components into a string ready to be written on a index.html file or to be returned by the server. To get that string you must call the build() function.

Example:

class Home(Page):
    def construct():
        return Hello()

with open("index.html", "w+") as file:
    file.write(Home.build())