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.

NetConfParser is a tool that helps you analyze the rpcs coming and going from a netconf client to a server

NetConfParser is a tool that helps you analyze the rpcs coming and going from a netconf client to a server

Aero 1 Mar 31, 2022
isort is a Python utility / library to sort imports alphabetically, and automatically separated into sections and by type.

isort is a Python utility / library to sort imports alphabetically, and automatically separated into sections and by type. It provides a command line utility, Python library and plugins for various e

Python Code Quality Authority 5.5k Jan 08, 2023
Similar looking domain detection using python fuzzywuzzy

Major cause of phishing and BEC incident is similar looking domain, if you detect it early, you can prevent incidents early, python fuzzywuzzy module let you do that

2 Nov 07, 2021
Factoral Methods using two different method

Factoral-Methods-using-two-different-method Here, I am finding the factorial of a number by using two different method. The first method is by using f

Sachin Vinayak Dabhade 4 Sep 24, 2021
Automatically Generate Rulesets for IIS for Intelligent HTTP/S C2 Redirection

Automatically Generate Rulesets for IIS for Intelligent HTTP/S C2 Redirection This project converts a Cobalt Strike profile to a functional web.config

Jesse 99 Dec 13, 2022
Python based tool to extract forensic info from EventTranscript.db (Windows Diagnostic Data)

EventTranscriptParser EventTranscriptParser is python based tool to extract forensically useful details from EventTranscript.db (Windows Diagnostic Da

P. Abhiram Kumar 24 Nov 18, 2022
Shut is an opinionated tool to simplify publishing pure Python packages.

Welcome to Shut Shut is an opinionated tool to simplify publishing pure Python packages. What can Shut do for you? Generate setup files (setup.py, MAN

Niklas Rosenstein 6 Nov 18, 2022
Package that allows for validate and sanitize of string values.

py.validator A library of string validators and sanitizers Insipired by validator.js Strings only This library validates and sanitizes strings only. P

Sanel Hadzini 22 Nov 08, 2022
ULID implementation for Python

What is this? This is a port of the original JavaScript ULID implementation to Python. A ULID is a universally unique lexicographically sortable ident

Martin Domke 158 Jan 04, 2023
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
Implicit hierarchical a posteriori error estimates in FEniCSx

FEniCSx Error Estimation (FEniCSx-EE) Description FEniCSx-EE is an open source library showing how various error estimation strategies can be implemen

Jack S. Hale 1 Dec 08, 2021
ticktock is a minimalist library to view Python time performance of Python code.

ticktock is a minimalist library to view Python time performance of Python code.

Victor Benichoux 30 Sep 28, 2022
Python tool to check a web applications compliance with OWASP HTTP response headers best practices

Check Your Head A quick and easy way to check a web applications response headers!

Zak 6 Nov 09, 2021
New time-based UUID formats which are suited for use as a database key

uuid6 New time-based UUID formats which are suited for use as a database key. This module extends immutable UUID objects (the UUID class) with the fun

26 Dec 30, 2022
Random Name and Slug Generator

Random Name and Slug Generator

Alexander Lukanin 104 Nov 30, 2022
A string to hashtags module

A string to hashtags module

Fayas Noushad 4 Dec 01, 2021
Attempts to crack the compression puzzle.

The Compression Puzzle One lovely Friday we were faced with this nice yet intriguing programming puzzle. One shall write a program that compresses str

Oto Brglez 14 Dec 29, 2022
🔩 Like builtins, but boltons. 250+ constructs, recipes, and snippets which extend (and rely on nothing but) the Python standard library. Nothing like Michael Bolton.

Boltons boltons should be builtins. Boltons is a set of over 230 BSD-licensed, pure-Python utilities in the same spirit as — and yet conspicuously mis

Mahmoud Hashemi 6k Jan 04, 2023
Animation retargeting tool for Autodesk Maya. Retargets mocap to a custom rig with a few clicks.

Animation Retargeting Tool for Maya A tool for transferring animation data and mocap from a skeleton to a custom rig in Autodesk Maya. Installation: A

Joaen 63 Jan 06, 2023
osqueryIR is an artifact collection tool for Linux systems.

osqueryIR osqueryIR is an artifact collection tool for Linux systems. It provides the following capabilities: Execute osquery SQL queries Collect file

AbdulRhman Alfaifi 7 Nov 02, 2022