elementreejs/elementree

Create Web UIs with Proxy Observables and JS Template Literals

elementree's Issues

Routing is not updating app state with values captured from url path

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'

Expose a 'observe' that takes a single argument and returns an observable proxy

import { observe } from 'elementree'

const x = { a: { b: 5 }}
const proxy = observe(x)

proxy.a.b = 6 // causes a re-render

Add typescript declaration file (index.d.ts)

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

Remove 'forceUpdate' from being exported

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.

'route' property on app state is always one state change behind

Possible memory leak when Element and children are not rendered

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?

Idea: Bring '@elementree/location' into the main repo and add a 'routes' function

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 {}

Warn when the parent element does match the merge element

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.

deprecate '@mjstahl/elementree' as 'elementree' is currently available

Routing

// 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) 

Address bar not updated when updating route parameter through class method

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

Test routing

Instances of a model are not different between the same component

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.

Use the FSM developed for use-state-machine

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

Remove application state argument from 'merge' and add 'route' to the view state

Remove application state argument from merge.

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

Routing

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 ?)

The 'on-change' package currently does not work with classes / constructor functions

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.

Add 'badge-size' to the README

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

Models should return undefined if intermediate accessed value is undefined

// given
const a = {}

// if I attempt to access
a.b.c //->

// an exception will be thrown because 'b' is undefined

// models should return undefined instead of throwing

Should capture anchor click events and change the route

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.

Templates without states are not being called with parent arguments

Double-rendering when the model changes state in the render function

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.

non-trivial example -- everyone needs a goal

ATM Example from CanJS

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

You should always be able to transition to the current state of the FSM.

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.

LighterHTML a better alternative to nanohtml?

https://github.com/WebReflection/lighterhtml

Should evaluate this for size and use of raw.

Need the ability to return a template that does not have a state

Work with rollup to get CJS, UMD, & ESM bundles along with sourcemaps.

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.

Elementree renders twice when switching routes

Add support for class expressions as template model or application state

join(function, object || class)

merge('body', function, object || class)

ToDoMVC Example

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

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

Use requestAnimationFrame in __renderTree()?

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())
  })
}