Add example of component module

[dzintars]

Hi, really great boilerplate of perfect tools i really like to have!!! :)

I would like to recommend to add some example how to structure component itself. For example to split component in: ├── my-component │ ├── index.ts │ ├── style.ts │ ├── template.ts │ └── models.ts // TS types???

Rough example:

index.ts

import { LitElement, customElement, property } from 'lit-element';

import GlobalStyle from '../../assets/global-style';
import Style from './style';
import template from './template';

@customElement('my-component')
export class MyComponent extends LitElement {
    public static styles = [ GlobalStyle, Style ];

    protected render() {
        return template.call(this);
    }

}

declare global {
    interface HTMLElementTagNameMap {
        'my-component': MyComponent;
    }
}

style.ts

import { css } from 'lit-element';

export default css`
    :host {
        display: block;
    }
`;

template.ts

import { html } from 'lit-element';
import { MyComponent } from './index';

export default function template(this: MyComponent) {
    return html`
        <slot></slot>
    `;
}

[djlauk]

Hello Dzintars.

Very nice input. Thank you so much. Definitely worth some thought. So far I've been rather happy with one file per component instead of one directory per component, but I am always on the lookout for a better way to do things.

Oh, by the way: I structure my code in such a way, that I have one (npm) project for the application and one for the components (which I then npm link during development).

So maybe you'd like to have a look at my other boilerplate project ts-wc-starter.

[dzintars]

Hmm... i like that idea a lot. Was thinking about that before. Tnx for direction.