Package: wyc
wycCreate a Web Component (a Custom Element) from a python file (transpile python code to javascript (es2015)).FeaturesUse python to define your custom element (the important one ;-))Use @react decorator to auto declare js methods (avoidobservedAttributesandattributeChangedCallback)can generate multiple custom elements from a single python fileauto register component's names in the page, based on classnames (customElements.define("my-component", MyComponent))include javascript code (in moduledocstring)generate es2015 javascript, for a maximum of compatibilities100% unittest coverageshould work with py2 tooChangelog[see changelog](changelog.md)Installwycis onpypi:pip install wycUsecaseOn server side ... just declare a http endpoint (/generate/<py_file>), get the content of the<py_file>and justreturn wyc.build(content).So, your python file is automatically transpiled to JS, and directly usable in your html page, by adding a<script src='/generate/file.py' ></script>.If your component class is named "MyComponent" (infile.py), it will be usable as<my-component ...> ... </my-component>DocumentationA minimal python custom element could be:classHelloWorld(HTMLElement):"""<div>Hello World</div>"""When it's linked in your html page, you can start to use<hello-world/>.Your class must inherit fromHTMLElement, so you will have access toshadow domthruself.shadowRoot. And your class will work exactly likeHTMLElementin 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 (observedAttributesandattributeChangedCallback) should not be used, becausewycgenerate them automatically depending on the usage of the@react()decorator.Declare react's attributesBy using the@react(*attributes), you can declare method which will be invoked when an attribute change.classHelloWorld(HTMLElement):"""<div>Hello World</div>"""@react("nb")defmethod(self):...When "nb" attribute change, the method is invoked ... simple!Initialize things at constructor phaseYour component can use aninit(self)instance method, to initialize things at constructor phase.classHelloWorld(HTMLElement):"""<div>Hello World</div>"""definit(self):self.root=self.shadowRoot.querySelector("div")Declare js code in py componentSometimes you'll need to use external js, you can declare them in module docstrings."""var myExternalJs=function() { ... }"""classHelloWorld(HTMLElement):"""<div>Hello World</div>"""defa_method(self):myExternalJs()Demos and examplesSeeexamples, for real examples and more tips ...HistoryAt the beginning, I've built the same kind of things forbrython... but it was not a good idea, because brython would have been mandatory to use them.Based on my experience withvbuild, I had made a POC with the marvelouspscript... And the POC comes to a real life module, which is pretty usable, in production too.Thus,wyccomponents are usable in html/js, brython, angular, vuejs, react, svelte ...etc... it's the power of standards.