Working Syntax: Element loaded via steal as main + can-stache

[frank-dspeed]

//import deepmerge from 'deepmerge'
import stache from 'can-stache'

function BabelHTMLElement(){
  const newTarget = this.__proto__.constructor;
  return Reflect.construct(HTMLElement, [], newTarget);
}
Object.setPrototypeOf(BabelHTMLElement, HTMLElement);
Object.setPrototypeOf(BabelHTMLElement.prototype, HTMLElement.prototype);

export default class myApp extends BabelHTMLElement {
  constructor(){
    super();
    //this.attachShadow({mode: 'open'})
    // Init ViewModel
    this.viewModel = { page: 'home' };
    // we need to do one Inital event to get us up and running.
    /*
    app.stream.of(viewModel)
    // Observe DOM Elements
    // return { update, assign }
      .combineArray((observed)=>observed,[
        app.fromInput(document.querySelector('input.x'))
          .map((val)=>{
            return { inputX: val };
          }),
        app.fromInput(document.querySelector('input.y'))
          .map((val)=>{
            return { inputY: val };
          })
      ])
      // Returns the ViewModelUpdating State aka can-x-connect :)
      // This can also be a complet Can Component
      // its only for demo
      .loop(function applyVM(lastSetVal, setVal){
        let seed = deepmerge(lastSetVal,setVal);
        return { seed, value: seed };
      }, viewModel)
      // Acticvate the Stream All gets executed as sideEffect
      .map((viewModel)=>{
        */

      //})
      //.drain();

    //shadowRoot.getElementById('here').appendChild(stache('<p click:bind="hello">hellsddao {{name}}</p>')({ name: 'me'}))
  }
  connectedCallback() {
    //use innerHTML as name because it gives code highlighting
    let innerHTML = `
      <div class="container">
        <div class="login-form">
        <form on:submit="createSession(%event)" action="">
            <h2 class="text-center">Anmelden</h2>
            <div class="form-group" id="here">
                      <input
                        class="form-control"
                        id="user-name"
                        placeholder="apiToken"
                        value:bind="../token"
                        required="required"
                        autocomplete="off"
                        style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC'); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;"
                      >
            </div>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-block btn-lg">Anmelden</button>
            </div>
            <div class="clearfix">
              <!--  <a href="#" class="pull-right">Forgot Password?</a> -->
            </div>
        </form>
        </div>
      </div>
      <p class="text-center small">Get Suppdort by <a href="#">{{page}}</a></p>
    `

    this.appendChild(stache(innerHTML)(this.viewModel))
  }
};

customElements.define('my-app', myApp);

[frank-dspeed]

todo replace with mustache as main template engine

[frank-dspeed]

<script type="text/javascript">
      function checkToken(token) {
        $.get('api/tokens', function(res) {
          console.log(res)
          // if valid rerender State if not all
        });
      }
      function renderFile(data,file = 'template.mst') {
        $.get(file,function(template) {
          render(template,data,'#target')
        })
      }
      function render(template,data = {}, target = '#target') {
          Mustache.parse(template);   // optional, speeds up future uses
          var rendered = Mustache.render(template, data);
          $(target).html(rendered);
      }
      // Method to Read Query Parameters
      function getParameterByName(name, url) {
          if (!url) url = window.location.href;
          name = name.replace(/[\[\]]/g, "\\$&");
          var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
              results = regex.exec(url);
          if (!results) return null;
          if (!results[2]) return '';
          return decodeURIComponent(results[2].replace(/\+/g, " "));
      }
      // Check if token is set
      var token = getParameterByName('token');
      // if not show login

      if (token) {
        checkToken(token)
      }
    </script>