Telepathic Elements are templated webcomponents with databinding designed to be so easy to use it's just like telepathy.
The entirety of Telepathic Elements is less than 5kb, RAW and < 1kb minified and compressed
You can load the entire library in less than 10ms (including template rendering) even on a low end mobile device
Telepathy is completely standards compliant, we use webcomponents 1.x and that's it. This means once you refactor your project to use telepathy, you won't have to refactor again in 6 months (or ever). We aren't trying to break ground here, we just got tired of framework chasing.
Telepathy has no external dependencies. Everything is 100% vanilla JS and uses best practices throughout.
You can bind any attribute of any element automatically, just add a template literal that maps to some property inside your controller. For example if you have an object "this" with a property "message", just add "${this.message} to the element in your template file. For 2 way databinding, just add the same tag to the value property.
<!--One way Bind-->
I said ${this.message}<br>
<!-- Two way bind -->
<input value="${this.message}">
Now any time anyone uses that input element it will automatically update "I said"
Wait??? What about declaring binds, configuring shadow doms, setting observers and all the stuff everyone else uses??? Yeah, we do that too, but the framework figures those things out all on it's own, like magic. Perhaps this is why we call the project...
Download the telepathic-element.js webcomponent into your project then derive a new webcomponent using TelepathicElement as the base class
import {TelepathicElement} from "telepathic-elements/telepathic-element.js";
class MyTelepathicElement extends TelepathicElement{
constructor(){
super();
}
connectedCallback(){
super.connectedCallback("my-telepathic-element.html");
init();
}
init(){
this.status = {
message : `Hello from ${this.templateFileName}`
statusClass : "ready"
}
setInterval(()=>{
this.seconds++;
},1000);
}
}
window.customElements.define('my-telepathic-element', MyTelepathicElement);
Next create a template file with some HTML and misc tags
my-telepathic-element.html ...
<style>
/* contain CSS to the parent of this, speeds up calculations and helps with browsers that need to polyfill webcomponents 1x */
:host {
display: block;
contain: content;
}
.ready{
color: black;
background-color: yellow;
font-size: 3em;
}
</style>
<div>
<h1 class="${status.Class}">${status.message}<h1>
<p>I've been telepathic for ${seconds}</p>
</div>
Now the custom element has been defined, you just need to use it somewhere and it's as easy as
demo.html
<html>
<script type="module" src="my-elements/my-telepathic-element.js"></script>
<body>
<my-telepathic-element></my-telepathic-element>
</body>
</html>
Now serve up demo.html from any static hosting, or embedded in your own webapp and it just works
