Create a Web Component (a Custom Element) from a python file

Related tags

General Utilitieswyc
Overview

wyc

Create a Web Component (a Custom Element) from a python file (transpile python code to javascript (es2015)).

Test

Features

  • Use python to define your custom element (the important one ;-))
  • Use @react decorator to auto declare js methods (avoid observedAttributes and attributeChangedCallback)
  • can generate multiple custom elements from a single python file
  • auto register component's names in the page, based on classnames (customElements.define("my-component", MyComponent))
  • include javascript code (in module docstring)
  • generate es2015 javascript, for a maximum of compatibilities
  • 100% unittest coverage
  • should work with py2 too

Changelog

See changelog

Install

wyc is on pypi :

pip install wyc

Usecase

On server side ... just declare a http endpoint (/generate/ ), get the content of the and just return wyc.build(content).

So, your python file is automatically transpiled to JS, and directly usable in your html page, by adding a .

If your component class is named "MyComponent" (in file.py), it will be usable as ...

Documentation

A minimal python custom element could be:

Hello World
""" ">
class HelloWorld(HTMLElement):
    """
  
  
Hello World
"""

When it's linked in your html page, you can start to use .

Your class must inherit from HTMLElement, so you will have access to shadow dom thru self.shadowRoot. And your class will work exactly like HTMLElement in js side, so there are special methods which are usable nativly:

  • def connectedCallback(self): Invoked each time the custom element is appended into a document-connected element. This will happen each time the node is moved, and may happen before the element's contents have been fully parsed.
  • def disconnectedCallback(self): Invoked each time the custom element is disconnected from the document's DOM.
  • def adoptedCallback(self): Invoked each time the custom element is moved to a new document.

the others methods (observedAttributes and attributeChangedCallback) should not be used, because wyc generate them automatically depending on the usage of the @react() decorator.

Declare react's attributes

By using the @react(*attributes), you can declare method which will be invoked when an attribute change.

Hello World
""" @react("nb") def method(self): ... ">
class HelloWorld(HTMLElement):
    """
  
  
Hello World
"""
@react("nb") def method(self): ...

When "nb" attribute change, the method is invoked ... simple!

Initialize things at constructor phase

Your component can use an init(self) instance method, to initialize things at constructor phase.

Hello World
""" def init(self): self.root = self.shadowRoot.querySelector("div") ">
class HelloWorld(HTMLElement):
    """
  
  
Hello World
"""
def init(self): self.root = self.shadowRoot.querySelector("div")

Declare js code in py component

Sometimes you'll need to use external js, you can declare them in module docstrings.

Hello World
""" def a_method(self): myExternalJs() ">
"""
var myExternalJs=function() { ... }
"""

class HelloWorld(HTMLElement):
    """
  
  
Hello World
"""
def a_method(self): myExternalJs()

Demos and examples

See examples, for real examples and more tips ...

History

At the beginning, I've built the same kind of things for brython ... but it was not a good idea, because brython would have been mandatory to use them.

Based on my experience with vbuild, I had made a POC with the marvelous pscript... And the POC comes to a real life module, which is pretty usable, in production too.

Thus, wyc components are usable in html/js, brython, angular, vuejs, react, svelte ...etc... it's the power of standards.

Multipurpose Growtopia Server tools, can be used for newbie to learn things.

Information Multipurpose Growtopia Server tools, can be used for newbie to learn things. Requirements - Python 3.x - Operating System (Recommended : W

Morphias 2 Oct 29, 2021
A meme error handler for python

Pwython OwO what's this? Pwython is project aiming to fill in one of the biggest problems with python, which is that it is slow lacks owoified text. N

SystematicError 23 Jan 15, 2022
MicroMIUI - Script to optimize miui and not only

MicroMIUI - Script to optimize miui and not only

Groiznyi-Studio 1 Nov 02, 2021
Use generator for range function

Use the generator for the range function! installation method: pip install yrange How to use: First import yrange in your application. You can then wo

1 Oct 28, 2021
A simple Python app that generates semi-random chord progressions.

chords-generator A simple Python app that generates semi-random chord progressions.

53 Sep 07, 2022
A time table app to notify the user about their class timings

kivyTimeTable A time table app to notify the user about their class timings Features This project incorporates some features i wanted to see in a time

2 Dec 15, 2021
Collection of code auto-generation utility scripts for the Horizon `Boot` system module

boot-scripts This is a collection of code auto-generation utility scripts for the Horizon Boot system module, intended for use in Atmosphère. Usage Us

4 Oct 11, 2022
iOS Snapchat parser for chats and cached files

ParseSnapchat iOS Snapchat parser for chats and cached files Tested on Windows and Linux install required libraries: pip install -r requirements.txt c

11 Dec 05, 2022
Astvuln is a simple AST scanner which recursively scans a directory, parses each file as AST and runs specified method.

Astvuln Astvuln is a simple AST scanner which recursively scans a directory, parses each file as AST and runs specified method. Some search methods ar

Bitstamp Security 7 May 29, 2022
An OData v4 query parser and transpiler for Python

odata-query is a library that parses OData v4 filter strings, and can convert them to other forms such as Django Queries, SQLAlchemy Queries, or just plain SQL.

Gorilla 39 Jan 05, 2023
A Random Password Generator made from Python

Things you need Python Step 1 Download the python file from Releases Step 2 Go to the directory where the python file is and run it Step 3 Type the le

Kavindu Nimsara 3 May 30, 2022
Python library to decorate and beautify strings

outputformat Python library to decorate and beautify your standard output đź’– Ins

Felipe Delestro Matos 259 Dec 13, 2022
EVE-NG tools, A Utility to make operations with EVE-NG more friendly.

EVE-NG tools, A Utility to make operations with EVE-NG more friendly. Also it support different snapshot operations with same style as Libvirt/KVM

Bassem Aly 8 Jan 05, 2023
More routines for operating on iterables, beyond itertools

More Itertools Python's itertools library is a gem - you can compose elegant solutions for a variety of problems with the functions it provides. In mo

2.9k Jan 06, 2023
Easy compression and extraction for any compression or archival format.

Tzar: Tar, Zip, Anything Really Easy compression and extraction for any compression or archival format. Usage/Examples tzar compress large-dir compres

DanielVZ 37 Nov 02, 2022
✨ Voici un code en Python par moi, et en français qui permet d'exécuter du Javascript en Python.

JavaScript In Python ❗ Voici un code en Python par moi, et en français qui permet d'exécuter du Javascript en Python. 🔮 Une vidéo pour vous expliquer

MrGabin 4 Mar 28, 2022
Networkx with neo4j back-end

Dump networkx graph into nodes/relations TSV from neo4jnx.tsv import graph_to_tsv g = pklload('indranet_dir_graph.pkl') graph_to_tsv(g, 'docker/nodes.

Benjamin M. Gyori 1 Oct 27, 2021
Bounding Boxes Python Utils

Bounding Boxes Python Utils

Vadim 4 May 01, 2022
API for obtaining results from the Beery-Bukenica test of the visomotor integration development (VMI) 4th edition.

VMI API API for obtaining results from the Beery-Bukenica test of the visomotor integration development (VMI) 4th edition. Install docker-compose up -

Victor Vargas Sandoval 1 Oct 26, 2021
A script to check for common mistakes in LaTeX source files of scientific papers.

LaTeX Paper Linter This script checks for common mistakes in LaTeX source files of scientific papers. Usage python3 paperlint.py file.tex [-i/x inc

Michael Schwarz 12 Nov 16, 2022