flatman-component v0.18.1
Flatman Component 0.11.3
License: MIT
🚫 18 of 25 tests passed (72%)
Table of Contents
Overview
Description
Example
Installation
Notes
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 ................................................. 🚫
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago