A prototypical class that makes it easy to create Components with nodes with a powerfull instance configuration system and a react-like API.

• Clean and simple react-like syntax (states, props, method names)
• ES6 Class support
• Support for propTypes(required / optional / type of prop) which will be passed in while initiating a new instance.
• 3-Way prop injection
• Via the arguments array while creating a new instance.
• The dataset of the element if one was passed to the instance.
• Or the described getDefaultProps() method of your class.
• If the props are accessed via the elements dataset, they will automatically be converted into the specified propType type(String, Number and even Objects via JSON.parse())
• Simple on, off event observer pattern
• ~ 400 bytes minified
• No dependencies

With npm, use the familiar syntax e.g.:

npm install nodeproto --save

once the nodeProto package is installed, just require it in your class/application file.

const nodeProto = require("nodeproto");

This package also supports AMD/RequireJS, it is defined as nodeProto. Aren't using AMD/CommonJS? Just grab a release, include the Dist/NodeProto.min.js and access the loader via the following global:

const nodeProto = window.nodeProto;

// MyComponent.js
const myComponentPropTypes = {
  'myProp'              : nodeProto.propTypes.isRequired,
  'myPropNumber'        : nodeProto.propTypes.isNumber.isRequired,
  'myOptionalObjectProp': nodeProto.propTypes.isObject.isOptional
}

class MyComponent extends nodeProto.Component {
  constructor(el, props) {
    super(el, {
        'props': props,
        'propTypes': myComponentPropTypes
    });

    this.on('logSomething', this.doSomething.bind(this));
  }

  doSomething() {
    console.log(this.getProp('myProp'));
  }
}

 export default MyComponent;

import MyComponent from 'MyComponent.js';

// Create a new instance, and optionally pass in props.
const targetElement = document.querySelectorAll('[data-myComponent]')[0];
const instance = new MyComponent(targetElement, {
    'myProp': 'myString',
    'myPropNumber': 2
});

instance.trigger('logSomething') // LOG: 'myString'

The PropType validators are the key feature of the NodeProto. They validate your props, and optionally transform the values into the requested types by the validator.

F.e. if your component expects a Number as a prop with the name myProp, and you can't pass in the prop directly via JS, you can create a dataset property with the given name on the target element with a Number as the value e.g. data-myProp="2". Once a instance was created with this element, you can access the prop value via the getProp() method.

Will expect that the given key is present in either the passed props Object, the elements dataset or in the getDefaultProps() method.

Will log an info message into the UA's console if the given key is not present in either the passed Props-Object, the elements dataset or in the getDefaultProps() method.

Like the basic propTypes.isRequired validator, but it also expects that the value is either a Number, or a String containing a Number.

Like the basic propTypes.isOptional validator, but will also expect a Number as the value.

Like the basic propTypes.isRequired validator, but it also expects that the value is either a valid Object, or a String containing a JSON Object.

Like the basic propTypes.isOptional validator, but will also expect a Object as the value.

Type: Function

Will retrieve the element on which the component was mounted upon, if no element was specified, a virtual DOM element will be created.

Type: Function Argument key: String

Will retrieve the prop for the given key.

Type: Function Argument key: String

Will return a boolean regarding the existence of the prop for the given key.

Type: Function

Should return an object with all default props you want to set.

Type: Function Argument key: String Argument val: *

Will set the given state of the component.

Type: Function Argument key: String

Will return the given state of the component.

Type: Function

Should return an object with all initial states you want to set.

Type: Function Argument eventName: String Argument listener: Function

Creates/Uses an event and attaches a callback to the given eventName.

Type: Function Argument eventName: String Argument args: *

Triggers an event and executes all functions for the given eventName with the passed arguments.

Type: Function Argument eventName: String Argument listener: Function

Removes the given listener from the event queue.

In lieu of a formal styleguide, take care to maintain the existing coding style.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.