Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including haunted-lit-element with all npm packages installed. Try it out:

require("haunted/package.json"); // haunted is a peer dependency. require("lit-element/package.json"); // lit-element is a peer dependency. var hauntedLitElement = require("haunted-lit-element")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

haunted-lit-element v0.1.3

A missing connection between LitElement and Haunted

Haunted Lit Element

Build Status npm size downloads

A missing connection between Haunted and LitElement.

It makes it possible to use LitElement's features like properties and styles in Haunted.

This project follows the open-wc recommendation.

Installation

npm i haunted-lit-element

Usage

This library provides component function that is made in the way as it is in Haunted.

component(MyEl)

Similar to haunted but the base class is LitElement:

import {html} from 'lit-html';
import {component} from 'haunted-lit-element';
window.customElements.define('my-el', component(() => html`hello world`));

component(MyEl, optsOrBaseCls)

The second parameter in component function can be options or a base class which should be derived from HauntedLitElement.

The options in most cases are properties and styles from LitElement. But it can actually be anything as at the end it is just a static field in the base class. It is done in that way because there are LitElement extensions that use similar approach with their own configuration.

Example of defining options as second argument:

import {css} from 'lit-element';
import {component} from 'haunted-lit-element';

const MyEl = () => { /*...*/ };

const properties = {myParam: {type: String}, /*...*/};
const styles = css`/* my css styles */`;

window.customElements.define('my-el', component(MyEl, {properties, styles}));

Example of defining base class as second argument:

import {component, HauntedLitElement} from 'haunted-lit-element';

class MyExtHauntedLitElement extends HauntedLitElement {
    // ... my own stuff
}

const MyEl = () => { /*...*/ };

window.customElements.define('my-el', component(MyEl, MyExtHauntedLitElement));

component(myEl, baseCls, opts)

If you want to use options and a base class than the base class is the second argument and options are the third.

Example of using LitElement's properties and styles helper with a custom base class.

<my-el
  mystring="hello world"
  mynumber="5"
  mybool
  myobj='{"stuff":"hi"}'
  myarray='[1,2,3,4]'
></my-el>


<script type="module">
    import {useState} from "haunted";
    import {css, html} from "lit-element";
    import {component, HauntedLitElement} from "haunted-lit-element";

    class MyExtLitElement extends HauntedLitElement {
        // ... my own stuff
    }

    const renderer = ({mystring, mynumber, mybool, myobj, myarray}) => {
        const [count, setCount] = useState(0);
        return html`
            <p>${count}</p>
            <button @click=${() => setCount(count + 1)}>+</button>
            <pre>
                typeof mystring = ${typeof mystring}
                typeof mynumber = ${typeof mynumber}
                typeof mybool = ${typeof mybool}
                typeof myobj = ${typeof myobj}
                Array.isArray(myarray) = ${Array.isArray(myarray)}
            </pre>`;
    };

    /** LitElement's Properties */
    const properties = {
        mystring: {type: String},
        mynumber: {type: Number},
        mybool: {type: Boolean},
        myobj: {type: Object},
        myarray: {type: Array}
    };
    /** LitElement's css helper function */
    const styles = css`p {color:red}`;
    window.customElements.define('my-el', component(renderer, {properties, styles}, MyExtLitElement));
</script>

The output for properties is going to be:

typeof mystring = string
typeof mynumber = number
typeof mybool = boolean
typeof myobj = object
Array.isArray(myarray) = true

Testing using karma

npm run test

Linting

npm run lint
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free