kriszyp / put-selector

A high-performance, lightweight function for creating and manipulating DOM elements with succinct, elegant, familiar CSS selector-based syntax
Other
290 stars 39 forks source link

put.getDocument #3

Closed neonstalwart closed 12 years ago

neonstalwart commented 12 years ago

this is low priority - mostly looking for feedback since its just for a POC.

after looking at node-html.js i came to the realization that i could use put to build an ast if i give it an appropriate object as a document. my idea is that i want to parse something like div#{{id}} into an ast and then render that with a context like { id: 'identity' } to build and manipulate DOM nodes. for example

var context = new Stateful({ id: 'identity' });
var node = magic.render('div#{{id}}', context); // creates a node with id="identity" and watches context for changes
put(parent, node); // node is added to a parent
context.set('id', 'changed'); // has the same effect as put(node, '#changed);

the idea is to parse a whole tree like this but only update each node based on changes to the context.

during magic.render i'll set the document to be something that will build an AST for me. then after that i want to set it back to the proper document. of course, i know that it should be document but the right thing to do would be to get whatever the document is before i change it, remember that and then change it back when i'm done. so for that, i'm suggesting put.getDocument.

as an aside, in case you try this, 'div#{{id}}' fails to parse but i'm able to trick put into parsing 'div#$id' (maybe that's a bug). also, if you're interested in exploring this idea with me i'd be glad to get your input.

kriszyp commented 12 years ago

In https://github.com/kriszyp/put-selector/tree/forDocument you could do:

var normalPut = require("put-selector"); var magicPut = normalPut.forDocument(specialDocument);

What do you think about that?

neonstalwart commented 12 years ago

yeah, i like that a LOT.

neonstalwart commented 12 years ago

btw, regarding the experiment... https://github.com/twitter/hogan.js parses mustache and returns a tree. this is likely to really help push things along (once i get some time).