Flatman Component 0.11.3

License: MIT

🚫 18 of 25 tests passed (72%)

Table of Contents

Overview

• Description

  • Description

• Example

  • Example

• Installation

  • Installation

• Notes

  • Notes

• Component.create

  • Component.create

• Tests

Description

Description.md (top)

A Component function to work with flatman-server and flatman. Designed to act as a replacement for the node which flatman-server and flatman generate.

What it does is act as an interface between the component and the this.node.document.

Another thing it does is normalize the Component so that it behaves like a DomNode from flatman-server and flatman. Essentially making sure that if you pass a component around or a DomNode the behavior is consistent.

The Component must be initialized using the facade method.

Example

Example.md (top)

It must be initialized to add a facade to what ever constructor you are using.

You don't need to include the function because the facade it creates will execute the methods on this.

const el = flatman.el;
const proto = el('div').constructor.prototype;
const methods = Object.keys(proto);
Component.facade(methods);

What happens here is let's create a compoment.

Component.create('A', {
  render() {
    // will be set to the `node` property as 'this.node.document'
    return el('div');
  }
});

The Component will expose every method that this.node.document has. So that, additionally to the render method, you inherit anything else that this.node.document prototype exposes.

eg: .remove(), .append(), addClass() etc. Unless these methods are prototypes of the component they will be applied to this.node.document.

Installation

Installation.md (top)

npm i -S flatman-component

Notes

Notes.md (top)

This is a supporting library and is not intended to be used stand alone.

Component.create

Component.create.md (top)

Component.create('name', {
  constructor(props) {
    // optional
  }
  render() {
    return el('div');
  }
});

Tests

   1. Add class.......................................................... ✅
   2. Add class on 'className' array..................................... ✅
   4. .appendTo()........................................................ ✅
   8. Create component................................................... ✅
   9. Create component (check constructor props)......................... ✅
  10. Create component (has return value)................................ ✅
  11. Create component thunk............................................. ✅
  13. Component.find..................................................... ✅
  14. getNode().......................................................... ✅
  15. .is().............................................................. ✅
  16. Component.onCreate................................................. ✅
  17. Parent Component................................................... ✅
  18. Parent Node........................................................ ✅
  20. .removeChild()..................................................... ✅
  21. Remove class....................................................... ✅
  22. trigger().......................................................... ✅
  23. trigger() undefined 'on'........................................... ✅
  24. trigger() object................................................... ✅

   3. .append() ......................................................... 🚫

   5. .before() ......................................................... 🚫

   6. .closest() ........................................................ 🚫

   7. .closest() (string selector) ...................................... 🚫

  12. Disable ........................................................... 🚫

  19. .remove() ......................................................... 🚫

  25. trigger() no node ................................................. 🚫