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.

🌲 A simple BST (Binary Search Tree) generator written in python

Tree-Traversals (BST) 🌲 A simple BST (Binary Search Tree) generator written in python Installation Use the package manager pip to install BST. Usage

Jan Kupczyk 1 Dec 12, 2021
These scripts look for non-printable unicode characters in all text files in a source tree

find-unicode-control These scripts look for non-printable unicode characters in all text files in a source tree. find_unicode_control.py should work w

Siddhesh Poyarekar 25 Aug 30, 2022
An online streamlit development platform

streamlit-playground An online streamlit development platform Run, Experiment and Play with streamlit Components Develop full-fledged apps online All

Akshansh Kumar 3 Nov 06, 2021
Basic loader is a small tool that will help you generating Cloudflare cookies

Basic Loader Cloudflare cookies loader This tool may help some people getting valide cloudflare cookies Installation 🔌 : pip install -r requirements.

IHateTomLrge 8 Mar 30, 2022
Conveniently measures the time of your loops, contexts and functions.

Conveniently measures the time of your loops, contexts and functions.

Maciej J Mikulski 79 Nov 15, 2022
A collection of custom scripts for working with Quake assets.

Custom Quake Tools A collection of custom scripts for working with Quake assets. Features Script to list all BSP files in a Quake mod

Jason Brownlee 3 Jul 05, 2022
Playing with python imports and inducing those pesky errors.

super-duper-python-imports In this repository we are playing with python imports and inducing those pesky ImportErrors. File Organization project │

James Kelsey 2 Oct 14, 2021
Retrying library for Python

Tenacity Tenacity is an Apache 2.0 licensed general-purpose retrying library, written in Python, to simplify the task of adding retry behavior to just

Julien Danjou 4.3k Jan 05, 2023
A sys-botbase client for remote control automation of Nintendo Switch consoles. Based on SysBot.NET, written in python.

SysBot.py A sys-botbase client for remote control automation of Nintendo Switch consoles. Based on SysBot.NET, written in python. Setup: Download the

7 Dec 16, 2022
A python module to manipulate XCode projects

This module can read, modify, and write a .pbxproj file from an Xcode 4+ projects. The file is usually called project.pbxproj and can be found inside the .xcodeproj bundle. Because some task cannot b

Ignacio Calderon 1.1k Jan 02, 2023
Format Norminette Output!

Format Norminette Output!

7 Apr 19, 2022
Stubmaker is an easy-to-use tool for generating python stubs.

Stubmaker is an easy-to-use tool for generating python stubs. Requirements Stubmaker is to be run under Python 3.7.4+ No side effects during

Toloka 24 Aug 28, 2022
Python utilities for writing cross-version compatible libraries

Python utilities for writing cross-version compatible libraries

Tyler M. Kontra 85 Jun 29, 2022
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
Python HTTP Agent Parser

Features Fast Detects OS and Browser. Does not aim to be a full featured agent parser Will not turn into django-httpagentparser ;) Usage import ht

Shekhar 213 Dec 06, 2022
.bvh to .mcfunction file converter.

bvh-to-mcf .bvh file to .mcfunction converter

Hanmin Kim 28 Nov 21, 2022
Handy Tool to check the availability of onion site and to extract the title of submitted onion links.

This tool helps is to quickly investigate a huge set of onion sites based by checking its availability which helps to filter out the inactive sites and collect the site title that might helps us to c

Balaji 13 Nov 25, 2022
Delete all of your forked repositories on Github

Fork Purger Delete all of your forked repositories on Github Installation Install using pip: pip install fork-purger Exploration Under construc

Redowan Delowar 29 Dec 17, 2022
Deep Difference and search of any Python object/data.

DeepDiff v 5.6.0 DeepDiff Overview DeepDiff: Deep Difference of dictionaries, iterables, strings and other objects. It will recursively look for all t

Sep Dehpour 1.6k Jan 08, 2023
✨ 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