Nepotistic Pontifex Maximus
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    flatman-componentpublic

    Flatman Component 0.11.3

    License: MIT

    🚫 18 of 25 tests passed (72%)

    Table of Contents

    Overview

    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 ................................................. 🚫
    

    Keywords

    none

    install

    npm i flatman-component

    Downloadslast 7 days

    2

    version

    0.18.1

    license

    MIT

    last publish

    collaborators

    • avatar