Exploring how we can separate React.js presentation and logic

helpers.js

parseStyle() {
    
}

parseTemplate() {
    
}

Navbar.rs

Navbar {
    translate3d({{left}}px, {{top}}px, 0);

    background: #000;
    color: #fff;

    width: 75%;

    &[view=fullscreen] {
        width: 100%;
    }

    &[view=minimal] {
        width: 50%;
    }

    // Alternatively
    width: {{this.state.view == 'fullscreen' ? '100%' : '50%'}};

    container {
        border: 1px solid yellow;
    }
}


// Mocking this to LESS, getting the resulting CSS:

// <Navbar type="fullscreen">
//     <container>
//     </container>
// </Navbar>

// Parsing those CSS rules into JS style object:

// Navbar: {
//     WebkitTransform: 'translate3d(0px, 100px, 0)',
//     MozTransform: 'translate3d(0px, 100px, 0)',
//     msTransform: 'translate3d(0px, 100px, 0)',
//     transform: 'translate3d(0px, 100px, 0)',
//     background: '#000',
//     color: '#fff',
//     width: '100%',
//     children: {
//         container: {
//             border: '1px solid yellow'
//         }
//     },
//     // Alternatively
//     width: (this.state.view == "fullscreen") ? "100%" : width
// }

Navbar.rt

// Maybe it could just be <Navbar>

<div class="Navbar" role="navigation">
    <div class="Navbar.container">
        <Link class="Navbar.brand" to="/">
            <img src="/images/logo-small.png" width="38" height="38" alt="React" />
            <span>{{this.state.view == 'fullscreen' ? 'Fullscreen view' : 'Custom view'}}</span>
        </Link>
    </div>
</div>


// Parses into:

// React.DOM.div(
//     {
//         role: 'navigation',
//         style: this.style.Navbar
//     }, 
//     '', 
//     React.DOM.div(
//         {
//             style: this.style.Navbar
//         }, 
//         '',
//         React.DOM.div(
//             {
//                 style: this.style.Navbar.container
//             }, 
//             '',
//             Link(
//                 {
//                     style: this.style.Navbar.brand
//                 }
//             )
//         )
//     )
// );

NavItem.js

var Navbar = React.createClass({

    getInitialState() {
        return {
            view: 'fullscreen',
            top: 100,
            left: 0
        };
    }

    style() {
        return parseStyle(require('./Navbar.rs'), this); // Parse the React Stylesheet
    }

    render() {
        return parseTemplate(require('./Navbar.rt'), this); // Parse the React Template
    }

    changeView(type) {
        this.state.view = 'minimal';
    }

});