Using TeddyTags in different enviornments

teddytags-different-env.md

Using TeddyTags in different enviornments

TeddyTags can be used in any browser compatible with ES5+ features. Here is a small example targeting ES5 and ES6 enviornments:

• ES5

  //# ES5 implementation of a class
  var App = function(props) {
    Component.call(props)
    this.props = props;
  };
  App.prototype.render = function (){
    return h("h1", null, "Hi, " + props.name || "");
  }
  new Tag({ name: "App", to: App });
  var el1 = h("h1", null, "Hi");
  render(el1, document.body.querySelector("root"));
  setTimeout(function() {
    document.body.appendChild(
      document.createRange().createContextualFragment("<App name='foo' />")
      //equivalent of document.body.innerHTML but preserves elements
    );
    render(h("h1", null, "Hello"), document.body.querySelector("root"));
  }, 1000);

  • ES6+

  class App extends Component {
    constructor(props){
      super(props)
    }
    render(){
      return h("h1", null, `Hi, ${props.name || ""}`);
    }
  }
  new Tag({ name: "App", to: App });
  var el1 = h("h1", null, "Hi");
  render(el1, document.body.querySelector("root"));
  setTimeout(() => {
    document.body.appendChild(
      document.createRange().createContextualFragment("<App name='foo' />")
      //equivalent of document.body.innerHTML but preserves elements
    );
    render(h("h1", null, "Hello"), document.body.querySelector("root"));
  }, 1000);