A TypeScript library component that
npm libs css-variables and vanilla-typescript are used. I have numerous other projects using them
You can install into your application by running npm install --save-dev typescript-component
You can then use it like so:
import TypeScriptComponent from 'typescript-component'
function init() {
var selector = ".typescript-component"
var component = new TypeScriptComponent(selector)
component.attach()
}
init()
You can also import the default styles typescript-component.css which will style it for you.
- It has a bunch of buttons that do stuff
This demo shows how to import your component from npm and add to a basic application
The component uses CustomEvents for some communication, if you want to support IE9+ you need a polyfill. Many of my components also like to work with CustomEvents but I allow the users application to provide the optional polyfill to save download size if they use several of my own components at once.
(function () {
if ( typeof window.CustomEvent === "function" ) return false;
function CustomEvent ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
Feel free to watch the video explanation of how it works here: