Remountable

Remountable.carbide.md

Remountable

This Gist was automatically created by Carbide, a free online programming environment.

You can view a live, interactive version of this Gist here.

cell0.js

import {say} from 'cowsay'
say({text: "hello there! \n\nWelcome to the Carbide Alpha\nRelease TODOMVC Example Notebook!\n\nTo get started, open the external \nwindow, and press the run button\non index.js \n\n(that's the cell under this one)\n\nSend bugs to\nbugs@trycarbide.com!\n\nSend hellos to\nhello@trycarbide.com!" || ' '})

constants.js

export const doUnmount = true;
export const doRemount = true;
export const states = {
    unmountable : {
        unmountable: true,
    },
    mountable: {
        unmountable: false,
    }
};

Example.js

import React from 'react';
import ReactDOM from 'react-dom';
import remountable from './remountable.decorator';

const addMountNotification = () => {
    const notif = document.createElement('h2');
    notif.innerHTML= `Component mounted at: ${new Date()}` ;
    document.getElementById('remountable-app').appendChild(notif);
}

class ExampleBase extends React.Component {
    constructor(props){
        super(props);
    }
    componentDidMount(){
        addMountNotification();
    }
    render(){
        return (<button onClick={() => this.props.remount()}>Click to remount</button>);
    }
}

export default props => (<h3>test</h3>);

const Example = remountable(ExampleBase);
export default Example;

index.js

import React from 'react' /// Open the bootloader, and run this code to build the todo app. (Run the code with Cmd-Enter, or by pressing the play button on the bottom right)













import ReactDOM from 'react-dom'
import Example from './Example'

const e = Example;
console.log('e value: ', e)


function render() {
	ReactDOM.render(
		(<div id='remountable-app'><Example /></div>),
		document.getElementById('root')
	);
}

//model.subscribe(render);
render() 

// this tells the hot reloading engine to do its magic
export function __render(){
    render()
}

remountable.decorator.js

import React from 'react';
import {doUnmount, doRemount, states} from './constants'

const remount = (Wrapped) => {
  return class Remountable extends React.Component {
    constructor(props) {
      super(props);
      this.state = states.mountable;
      this.remount = this.remount;
    	this.setUnmountable = this.setUnmountable;
        this.setMountable = this.setMountable;
    }
  	setUnmountable(cb = () => {}) {
        this.setState(Object.assign({}, states.unmountable, {lastUnmount: new Date()}), cb);
    }
    
  	setMountable() {
        this.setState(Object.assign({}, states.mountable, {lastRemount: new Date()}));
    }
      
    remount() {
        this.setUnmountable(() => this.setMountable());
    }
      
    componentDidUpdate(lastProps, lastState){
        
    }

      
    render() {
    if(this.state.unmountable){
        return <div className="remounting-component"/>
    }

      return <Wrapped remount={() => this.remount()} {...this.props} {...this.state} />;
    }
  };
};

export default remount;