New Y.Markout API

gistfile1.js

// the main difference between the new and current is convenience around writing text in node.
// also a new .node() method which return the Y.Node instance (.getNode() still exits).

// appends <h2>The New <a href="http://oddnut.com/markout/">Markout API</a></h2> to #foo
Y.Markout('#foo').h2('The New ').a({ href: 'http://oddnut.com/markout/' }, 'Markout API');

// appends <div></div> to #foo references the Y.Node instance through the .node method.
Y.Markout().div().node().appendTo('#foo');

gistfile2.js

// BUT, I was also thinking I would make Markout extend further into the library.
// I thought about extending Y.Node, to add the Y.Markout element methods to the node Prototype.
// So if you .use('gallery-markout') you'd get enhanced Y.Node instances.

Y.one('#foo').h2('Extended Y.Node with ').a({ href: 'http://oddnut.com/markout/ ' }, 'Markout API');

Y.one('body').h1('Heading ').hide().addClass('foo').span('Bla').get('parentNode').show();

So, not totally sure if I should go as far as extending Y.Node.prototype and adding all the Y.Markout.prototype methods to it (like .div(), .p(), .em(), .h1(), etc.); what do you think?

I think adding methods to Y.Node.prototype is a wonderful idea. The additional flexibility and functionality it would offer would be valuable. Y.Node.addMethod() is (I think) the right way to do this.

@rgrove Yeah, I think so too! Just wanted to make sure it wasn't just me thinking crazy.
I was planning on either checking Y.Node.prototype to make sure a method didn't exist before I added one so I don't overwrite existing functionality with something completely different; or just create a blacklist of methods names to not add.

I did a quick pass over both prototypes, looks like .select() is the only overlap and either of these two options would work for writing a <select></select> node:

Y.one('#foo').el('select'); // returns a Y.Node instance wrapping the newly-appended <select>, or
Y.Markout('#foo').select().node() // returns the same as above

One way to do that is to override some of Y.Node's methods to accept a function, a la:

Y.one("#foo").setContent(function(mo) { return mo.h2('Extended Y.Node with ').a({ href: 'http://oddnut.com/markout/ ' }, 'Markout API'); });

You could do the same with Y.Node.append and Y.Node.insert. This would avoid collisions with Y.Node's prototype methods.

@RCanine that's an interesting idea, I guess those methods (setContent, append, insert, etc) should be able to take in a Markout object as well if I go that route.

What was your intention? Does Y.one('#foo').div() do a setContent() or an append()? I think that it's unclear is a smell that we might be missing something.

My intention would be that it would always be an append() under the hood. The Markout API is basically append-only