Methods?

[DiagoSmith]

Nice library!

I was wondering how one would go about passing lifecycle methods within the JSON?

Thanks!

[yawetse]

@DiagoSmith opps I forgot to add that to the documentation, I'll add that now, but in the meantime if you look at the component tests, your an create components and pass lifecycle functions as the body argument (they get evaluated with eval so be careful!)

https://github.com/repetere/rjx/blob/master/test/unit/components_spec.js#L234

describe('getReactComponent', () => {
    const getReactComponent = rjx._rjxComponents.getReactComponent;
    it('should create a React Component', () => {
      const MyCustomComponent = getReactComponent({
        componentDidMount:{
          body:'console.log(\'mounted\',this.props)',
          arguments:[],
        },
        render:{
          body:{
            component:'p',
            children:[
              {
                component:'span',
                children: 'My Custom React Component Status: ',
              },
              {
                component:'span',
                thisprops:{
                  children:['status',],
                },
              },
            ],
          },
        },
      });
      expect(MyCustomComponent).to.be.a('function');

    });

[yawetse]

the function names are the same as creating a react component without JSX and ES6 https://reactjs.org/docs/react-without-es6.html#setting-the-initial-state

there are two special lifecycle functions you have to for state & props

getInitialState // must return an object that is the initial state
getDefaultProps // must return an object that are the default props

[yawetse]

check out the new example.html in the dist folder

[yawetse]

const MyCustomComponent = rjx._rjxComponents.getReactComponent({
        //
        // Initialization function
        //
        getInitialState:{
          body:'return { status:"not-loaded", name:"rjx test", customNumber:1, }',
          arguments:[],
        },
        getDefaultProps:{
          body:'return { someProp:1, someOtherProp:2, status:"original status" }',
          arguments:[],
        },
        componentDidMount:{
          body:`console.log('mounted', 'this.props',this.props, 'this.state',this.state)`,
          arguments:[],
        },
        componentWillUnmount:{
          body:`console.log('unmounted',this.props)`,
          arguments:[],
        },
        //
        // State change functions
        //
        shouldComponentUpdate:{
          body:'console.log("should update component",{nextProps,nextState}); return true;',
          arguments:['nextProps', 'nextState']
        },
        componentWillUpdate:{
          body:'console.log("will update component",{nextProps,nextState}); return true;',
          arguments:['nextProps', 'nextState']
        },
        componentDidUpdate:{
          body:'console.log("did update component",{prevProps,prevState}); return true;',
          arguments:['prevProps', 'prevState']
        },
        //
        // Prop change functions
        //
        componentWillReceiveProps: {
          body:'console.log("will recieve props",{nextProps}); return true;',
          arguments:['nextProps']
        },
        //
        // RENDER IS THE ONLY ***REQUIRED*** FUNCTION
        //
        render:{
          body:{
            component:'p',
            props:{
              status:'from inline prop'
            },
            passprops:true,
            children:[
              {
                component:'span',
                children: 'My Custom React Component Status: ',
              },
              {
                component:'span',
                thisprops:{
                  children:['status']
                }
              }
            ]
          },
        }
      });