README

Lit-Extended

A simpler base class for creating fast, lightweight web components.

getrektpolymer

What is this

This is a class that you can extend, to simplify development of components driven by Web Components and the LitElement project.

This extends direct from LitElement, and includes all the functionality and nicities from it, but addeds a few extra interfaces in order to provided functional, extensible and production-ready components.
Then it bundles them into one project and exports all your needed interfaces.

What interfaces?

Any exported interface from the lit-html project, or others from lit-element package are exported directly from this package.

How can I use it?

To install this as a dependancy for your project, run this:

npm i -S lit-extended

When defining new components:

import { LitExtended } from '@acce/lit-extended';

export class MyComponent extends LitExtended {
    //	your components' functionality
}

customElements.define('my-component', LitExtended);

This is all that is needed to create a component. In your HTML you can now refer to this component by writing something like this:

<script type="module" src="/src/my-component.js"></script>

<my-component></my-component>

It won't do much, but it will be there, with a Shadow Root and everything.

Well isn't that the same as LitElement? Why should I use this?

The LitExtended class also provides some quality-of-life functions to make things much easier.

Here are some things LitExtended provides:

LitElement event management

class MyComponent extends LitExtended {
    backflip() {
        let detail = { times: 3 };

        this.dispatchEvent(new CustomEvent('backflipping', {
            detail: detail,
            bubbles: true,
            composed: true
        }));
    }

    render() {
        return html`
            <a @click="${e => this.backflip()}">
                Do A Backflip
            </a>
        `;
    }
}

There is an emit method provided by LitExtended to reduce the above to:

class MyComponent extends LitExtended {
    render() {
        return html`
            <a @click="${e => this.emit('backflipping')}">
                Do A Backflip
            </a>
        `;
    }
}

Relative paths

LitExtended provides a few methods to get paths relative to the current module.

class MyComponent extends LitExtended {
    get importMeta() {
        return import.meta;
    }

    render() {
        return html`
            <img alt="This is hela-cute" src="${this.basedir}/component-kittie.png">
        `;
    }
}

Where previously, it would be mesy AF to get a path relative to the component.

There are actually a collection of path manipulation methods provided by:

import { resolve, parse, format, basedir } from 'lit-extended/paths';

console.log(resolve('..', '/src/component.js'))	//> ./component.js

console.log(parse('/src/component.js')) //> { root: '/', dir: '/src', base: 'component.js', name: 'component', ext: '.js' }

console.log(format({ dir: '/src', base: 'component.js' }))	//> /src/component.js

let url = 'src/file.js';
console.log(isAbsolute(url))	//> false
console.log('/' + url)			//> true

console.log('http://localhost:8081/src/component.js')	//> /src/component.js

@acce/lit-extended

Usage no npm install needed!