• Install @elementree/router and extend it
• Create state methods for updating route
• Updating route
• Inspect state and observe updated value
• Observe stale address bar

https://github.com/WebReflection/lighterhtml

Should evaluate this for size and use of raw.

Removing forceUpdate for routing is more difficult. It cannot be removed until I figure out how to update app state without changing the route.

Maybe a special function that is attached to the appstate object that updates the value and re-renders the tree.

https://npm.im/microbundle seemed to be nice, but it didn't follow the import tree (missing 'ready.js' in the built version).

So maybe just rollup with a config.

join takes a template function and a model object.

The intention is that the model object will be specific to each rendered template in the DOM. This is currently not the case.

http://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html

When working on the todomvc example. Using route the route was updated, but the variable I had configured was not on the application state object.

const routes = {
  '#/:state': renderer
}

#/active //was expected to work, with a 'state' variable on app state set to the value of 'active'

Right now, each components model is subscribed too. That way when it changes a render can start at the root and handle any changes.

Due to those changes, if an element is no longer rendered, its model is not unsubscribed from. This is probably a memory leak and needs to be rectified.

Probably with MutationObservers?

// app.js
import { attach, routes } from 'elementree'

import dashboard from 'views/dashboard'
import user from 'views/user'

const routes = {
  initial: 'dashboard',
  'dashboard': dashboard,
  'user/:id': user
}

attach('body', routes)

routes accept a function or an object in which to create a Stated object. If a Function is passed, the routes function will turn it into:

{
  view: user,
  title: 'Sets the title of the browser tab'
  // any other properties
}

// views/user.js
import { couple, render } from 'elementree'

export const state = {
  // local states
}
export function template (model, app) {
  return render`
    <p>Hello User ${app.location.id}</p>
  `
}

export default couple(template, state) 

Remove application state argument from merge.

Add 'route' property to the top level view state.

Implement ToDoMVC to get an idea on how it compares to other frameoworks

https://github.com/tastejs/todomvc/blob/master/app-spec.md

function template (model, greeting) {
  if (greeting.toLowerCase() !== model.state) {
    model.to(model.actions.TOGGLE)
  }
  return render`
    <span>${model.value}</span>
  `
}

if the conditional is true, this template function will be called twice.

Not sure how this should be solved yet. And it may not be a huge deal for small trees, but any tree with enough leaves will eventually suffer a performance hit.

We could pass a render function or event down to each template.

https://github.com/elementreejs/elementree/blob/master/elementree.js#L25

We should check the top element of the result of tree against the selector passed in as the 0th argument to merge.

If they are different warn the User that Elementree is expecting the parent element to be the same element as the selector.

I have made this mistake (nothing renders to the screen) more than once, and I am damn author of the library.

https://github.com/ngryman/badge-size

Right now, the current state of the FSM is not (automatically) a state that can be transitioned too. It has to be written that way.

Each state should always include itself as a transition option.

import { routes, merge, prepare } from 'https://unpkg.com/elementree'

// varargs function or array?
routes(
  '/items/:id',
  '/user/:name'
)

merge('body', prepare(...))

Application State would be populated a location and route property. Assuming an address of

.../items/1?sort=asc

Application State would look like:

location: '/items/1?sort=asc',
route: {
  path: {
    id: '1'
  },
  query: {
    sort: 'asc'
  },
  hash: ''
}

With any routes call or the arguments of routes is of length 0, the route property on Application State would be {}

import { attach } from 'elementree'

import { hello, goodbye, notFound } from 'components/'

const routes = {
  '/hello/:name': hello,
  '/goodbye/:name': goodbye,
  '*': notFound
}

attach('body', routes)

// hello/hello.js
import { prepare, render } from 'elementree'

function hello ({ location }) {
  return render`
    <h1>Hello ${location.path.name}</h1>
  `
}

export default prepare(hello)

This adds a location property onto the AppState object passed to the template. The value of the location property is an object with two properties:

• path, an object containing key/value pairs that match the variables defined in the route (:id)
• query, an object containing key/value pairs parsed from the query string (anything past the ?)

ATM Example from CanJS

https://v4.canjs.com/doc/guides/atm.html

Implement click jacking so that if an object is passed into attach we listen for all click events on anchor tags.

This should probably not happen for any anchor tags with target that would open new tabs or windows.

class Counter {
  constructor () {
    setInterval(this.onTick.bind(this), 1000)
  }
  onTick () {
    const now = new Date()
    this.hours = now.getHours()
    this.minutes = now.getMinutes()
    this.seconds = now.getSeconds()
  }
}

The update performed by onTick does not cause a re-render. This is probably because this refers to the instance and not the Proxy returned from the onchange call.

Might be able to replace the following:

let rendering = false

function __renderTree () {
  if (rendering) { return }
  rendering = true
  rendering = !__merge(root, tree())
}

with:

function __renderTree() {
  window.requestAnimationFrame(() => {
    __merge(root, tree())
  })
}

https://github.com/mjstahl/use-state-machine