https://github.com/yanishoss/polymer-toolkit

A toolkit for making Polymer simpler :bulb:
https://github.com/yanishoss/polymer-toolkit

Last synced: 12 days ago
JSON representation

A toolkit for making Polymer simpler :bulb:

• Host: GitHub
• URL: https://github.com/yanishoss/polymer-toolkit
• Owner: yanishoss
• License: mit
• Created: 2018-07-12T10:55:41.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-28T07:17:35.000Z (about 6 years ago)
• Last Synced: 2024-10-13T14:32:01.615Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 229 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# :wrench: polymer-toolkit

A toolkit for making Polymer simpler.  

Provides already:  

* Redux support  

* A decorator to register your components

* A decorator to close the shadow DOM

* One to open the shadow DOM  

* Others tools not yet released...

## Install it

```shell

# With npm

npm install --save polymer-toolkit

# With yarn

yarn add -ED polymer-toolkit

```

## How to use ?

```javascript

import { register, ReduxLitElement } from "polymer-toolkit";

import { createStore } from "redux";

const exampleStore = createStore(/*Put a reducer*/);

// It registers your component in the shadow DOM.

// Same as: customElements.define("my-component", MyComponent);

// But it is way prettier !

@register

// It closes the shadow DOM.

@close

// It opens the shadow DOM.

@open

class MyComponent extends ReduxLitElement {

    // Put the name of your component.

    // Could be a getter.

    static displayName = "my-component";

    // Put your store here.

    store = exampleStore;

    

    // Then put a mapStateToProps,

    // It assigns your store state to your component's props.

    // Same as in "react-redux".

    mapStateToProps = state => {

        return {

            someProps: state.someState

        };

    };

    

    // Finally, put a mapDispatchToProps,

    // It assigns your store actions to your component's props.

    // Same as in "react-redux".

    mapDispatchToProps = dispatch => {

        return {

            // Inside your component, your can call it like this: this.addANumber(7);

            addANumber: (n) => dispatch({

                type: ADD_A_NUMBER,

                payload: n

            })

        };

    };

    static get properties() {

        return {

            someProps: Object // Put the type of your state.

            addANumber: Function

        };

    }

}

```