Untitled

<!DOCTYPE html>
<html>

<head>
  <link href="//cdn.jsdelivr.net/picnicss/4.1.1/picnic.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet">
</head>

<body>

  <h1>Hello Mag.JS!</h1>
  <a target="_tab" href="https://github.com/magnumjs/mag.js">GitHub</a>
  <hr/>

  <div id="app">
    <status>Loading ..</status>
     <counter1></counter1>
    <counter2></counter2>
    <counter3></counter3>
    <ul>
      <li></li>
    </ul>
  </div>

  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.0.21.3.min.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/dist/mag.addons.0.21.min.js"></script>
  <script src="//rawgit.com/magnumjs/mag.js/master/src/addons/mag-importer.js"></script>
  <script src="//cdn.rawgit.com/MaxArt2501/object-observe/master/dist/object-observe.min.js"></script>

  <script src="container.js"></script>
  <script src="app-init.js"></script>

</body>

</html>



// initialize mag module reference

mag.mods.demo.container({ things: []});

/* Styles go here */

li:empty, .hide {
  display:none;
}

#Components

##Inner component
Reusable, self contained, called by others

###Example-counter
*Separate html&javascript file definition
*counter.html includes counter.js

##Outer component
Loads and instantiate other components

###Example multiple counters 
*Load counter module definition
*Attach to dom

**Clone, create instance, attach clone, run instance

(function(namespace) {

  var props = {
    onButtonClick: function(things) {}
  }

  var mod = {
    view: function(state, props) {

      state.button = {
        _onClick: function() {
          state.count = state.count + 1 || props.count || 1;
          props.numbers.push(state.count)
          props.onButtonClick(props.numbers)
        }
      }
    }
  }


  namespace.counter = mag.create('counter', mod, props);

})(mag.namespace('mods.demo'));

(function(namespace) {

  var mod = {}

  // default props to be over ridden
  var props = {
    things: []
  }

  mod.controller = function(props) {
    this.li = props.things
    props.loaded = false;

    //Import once and clone 3 different instances
    this.counter1 = mag.importer('counter.html');

    this.counter2 = mag.importer('counter.html');

    this.counter3 = mag.importer('counter.html')
      .then(function(data) {
        props.loaded = true;
        return data;
      });

  }

  mod.view = function(state, props) {

    // when all 3 then remove loading status
    mag.show(!state.counter1.id && !state.counter2.id && !state.counter3.id, state.status = {});

    if (state.counter1.id) {
      // only call after in dom
      state.counter1._config = function(node, isNew) {
        // instantiate once
        if (isNew) {
          mag.mods.demo.counter(state.counter1.id, {
            numbers: props.things,
            onButtonClick: function(numbers) {
              state.li = numbers;
            }
          });
        }
      }
    }

    state.counter2._config = function() {
      if (state.counter2.id) {
        mag.mods.demo.counter(state.counter2.id, {
          numbers: props.things,
          onButtonClick: function(numbers) {
            state.li = numbers;
          }
        });
      }
    }

    if (props.loaded) {
      state.counter3._config = function() {
        mag.mods.demo.counter(state.counter3.id, {
          numbers: props.things,
          onButtonClick: function(numbers) {
            state.li = numbers;
          }
        });
      }
    }

  }


  namespace.container = mag.create('app', mod, props);

})(mag.namespace('mods.demo'));

<counter>
  <div id="counter">
    <button>+</button>
    <count></count>
  </div>
  <link href="counter.css" rel="stylesheet">
  <script src="counter.js"></script>
</counter>

button {
  background-color:red;
  border:outset 2px gold;
}