merkle-open / gondel

🚡 Gondel is a tiny library to bootstrap frontend components
https://gondel.js.org
MIT License
36 stars 10 forks source link

Add feature @data() decorator to enable easy data-binding to the components HTML #40

Closed janbiasi closed 5 years ago

janbiasi commented 5 years ago

This plugin makes it easier to use data-attributes within gondel components by dual-bind them automatically to a property (interactive example also created):

<div data-t-name="Search"
     data-endpoint="https://my-endpoint.com/api/v1"
     data-lang="de"
     config="{someJSON: 'goes here'}" data-result-count="0">
    <!-- some common search code here ... -->
</div>
@Component('Search')
class Search extends GondelBaseComponent {
    @data('endpoint')
    private endpointURL: string;

    @data('lang')
    private language: 'de' | 'en';

    @data('config', Serializer.JSON)
    private config: { someJSON: string };

    @data('result-count', CustomNumberSerializer)
    private resultCount: number;

    async someMethodToWorkWith() {
        const results = await call(`${this.endpoint}/${this.language}/search?query=bla`);
        this.resultCount = results.length || 0; // <= will write to 'data-result-count'
    }
}

Purpose of this pull request?

What changes did you make?

I've added a new plugins/data folder with a new plugin for using the new @data() decorator.

Does this pull request introduce a breaking change?

No.

Is there anything you'd like reviewers to focus on?

The plugins/data/src/DataPlugin.ts file (hook).