proxy-morph-bug

.gitignore

node_modules
yarn.lock
package-lock.json

index.js

var choo = require('choo')
var app = window.app = choo()
var html = require('choo/html')
var Nanocomponent = require('nanocomponent')

function MyComp (name) {
  if (!(this instanceof MyComp)) return new MyComp(name)
  this._name = name
  Nanocomponent.call(this)
}

MyComp.prototype = Object.create(Nanocomponent.prototype)

MyComp.prototype._render = function (color) {
    return html`
      <div>${this._name}</div>
    `
}

MyComp.prototype._update = function (newColor) {
  return false
}

MyComp.prototype._load = function (newColor) {
  console.log('loading ' + this._name)
}

MyComp.prototype._unload = function (newColor) {
  console.log('unloading ' + this._name)
}

var comp1 = window.comp1 = new MyComp('comp1')
var comp2 = window.comp2 = new MyComp('comp2')

app.route('#', view1)
app.route('#view2', view2)
app.route('#view3', view3)
app.route('#view4', view4)
app.route('#view5', view5)


document.body.appendChild(app.start())


function view1 (state, emit) {
  return html`
    <div>
      <div>view1</div>
      <div>
        <button onclick="${function () {emit('pushState', '#')}}">view 1</button>
        <button onclick="${function () {emit('pushState', '#view2')}}">view 2</button>
        <button onclick="${function () {emit('pushState', '#view3')}}">view 3</button>
        <button onclick="${function () {emit('pushState', '#view4')}}">view 4</button>
        <button onclick="${function () {emit('pushState', '#view5')}}">view 5</button>
        ${comp1.render()}
      </div>
    </div>
  `
}

function view2 (state, emit) {
  return html`
    <div>
      <div>view2</div>
      <div>
        <button onclick="${function () {emit('pushState', '#')}}">view 1</button>
        <button onclick="${function () {emit('pushState', '#view2')}}">view 2</button>
        <button onclick="${function () {emit('pushState', '#view3')}}">view 3</button>
        <button onclick="${function () {emit('pushState', '#view4')}}">view 4</button>
        <button onclick="${function () {emit('pushState', '#view5')}}">view 5</button>
        ${comp2.render()}
      </div>
    </div>
  `
}

function view3 (state, emit) {
  return html`
    <div>
      <div>view3</div>
      <div>
        <button onclick="${function () {emit('pushState', '#')}}">view 1</button>
        <button onclick="${function () {emit('pushState', '#view2')}}">view 2</button>
        <button onclick="${function () {emit('pushState', '#view3')}}">view 3</button>
        <button onclick="${function () {emit('pushState', '#view4')}}">view 4</button>
        <button onclick="${function () {emit('pushState', '#view5')}}">view 5</button>
        ${comp2.render()}
      </div>
    </div>
  `
}

function view4 (state, emit) {
  return html`
    <div>
      <div>view4</div>
      <div>
        <button onclick="${function () {emit('pushState', '#')}}">view 1</button>
        <button onclick="${function () {emit('pushState', '#view2')}}">view 2</button>
        <button onclick="${function () {emit('pushState', '#view3')}}">view 3</button>
        <button onclick="${function () {emit('pushState', '#view4')}}">view 4</button>
        <button onclick="${function () {emit('pushState', '#view5')}}">view 5</button>
        ${comp1.render()}
        ${comp2.render()}
      </div>
    </div>
  `
}

function view5 (state, emit) {
  return html`
    <div>
      <div>view5</div>
      <div>
        <button onclick="${function () {emit('pushState', '#')}}">view 1</button>
        <button onclick="${function () {emit('pushState', '#view2')}}">view 2</button>
        <button onclick="${function () {emit('pushState', '#view3')}}">view 3</button>
        <button onclick="${function () {emit('pushState', '#view4')}}">view 4</button>
        <button onclick="${function () {emit('pushState', '#view5')}}">view 5</button>
        ${comp2.render()}
        ${comp1.render()}
      </div>
    </div>
  `
}

morph-bug.gif

package.json

{
  "name": "proxy-morh-bug",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "bankai start --uglify false"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bankai": "^7.3.0",
    "cache-component": "^4.0.2",
    "choo": "^6.0.0-1",
    "nanocomponent": "^5.0.3"
  }
}