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())