elementreejs / elementree Goto Github PK
View Code? Open in Web Editor NEWCreate Web UIs with Proxy Observables and JS Template Literals
Home Page: https://npm.im/elementree
License: MIT License
Create Web UIs with Proxy Observables and JS Template Literals
Home Page: https://npm.im/elementree
License: MIT License
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.
Implement ToDoMVC to get an idea on how it compares to other frameoworks
// 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
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.
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?
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 ?
)@elementree/router
and extend ithttps://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.
Remove application state argument from merge.
Add 'route' property to the top level view state.
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.
import { observe } from 'elementree'
const x = { a: { b: 5 }}
const proxy = observe(x)
proxy.a.b = 6 // causes a re-render
join(function, object || class)
merge('body', function, object || class)
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'
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())
})
}
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 {}
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.
https://github.com/WebReflection/lighterhtml
Should evaluate this for size and use of raw.
// 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)
ATM Example from CanJS
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.