https://github.com/bbmoz/inject-decorator

Create decorators that can inject anything into your JS modules!
https://github.com/bbmoz/inject-decorator

annotation babel decorator dom es2016 es7 inject

Last synced: 29 days ago
JSON representation

Create decorators that can inject anything into your JS modules!

• Host: GitHub
• URL: https://github.com/bbmoz/inject-decorator
• Owner: bbmoz
• License: mit
• Created: 2017-04-01T16:00:05.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-03-01T15:26:46.000Z (almost 7 years ago)
• Last Synced: 2024-11-28T02:03:04.453Z (about 1 month ago)
• Topics: annotation, babel, decorator, dom, es2016, es7, inject
• Language: JavaScript
• Homepage: https://git.io/vSK8Z
• Size: 124 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Inject Decorator

[![npm version](https://badge.fury.io/js/inject-decorator.svg)](https://badge.fury.io/js/inject-decorator)

[![Build Status](https://travis-ci.org/bbmoz/inject-decorator.svg)](https://travis-ci.org/bbmoz/inject-decorator)

> Create decorators that can inject anything into your JS modules!

## Example using DOM elements

Define an object that represents some dom elements, call the library with it, and then use it to decorate a class as shown below. Elements are attached to `$` of the class.

```javascript

// part 1

import inject from 'inject-decorator'

const domElements = {

  heading: document.getElementById('heading'),

  footer: document.querySelector('footer')

}

export default inject(domElements)

```

```javascript

// part 2

import dom from './dom'

@dom('heading')

class Hello {

    constructor (text) {

        this.$heading = Hello.$.heading

        this._displayDomElements(text)

    }

    _displayDomElements (text) {

        this.$heading.innerHTML = text

        this.$heading.style = 'display: block'

    }

}

```

To inject more elements than just `heading`, simply comma delimit i.e. `@dom('heading', 'footer')`. Or if you want access to all elements, use `@dom` without any arguments.