Repository: kriszyp/put-selector
Branch: master
Commit: 44801345d70a
Files: 10
Total size: 47.9 KB
Directory structure:
gitextract_xgv6ox1t/
├── LICENSE
├── README.md
├── node-html.js
├── package.js
├── package.json
├── put.js
└── test/
├── example-server.js
├── node-put.js
├── put.js
└── testPut.html
================================================
FILE CONTENTS
================================================
================================================
FILE: LICENSE
================================================
put-selector is available under *either* the terms of the modified BSD license *or* the
Academic Free License version 2.1. As a recipient of put-selector, you may choose which
license to receive this code under.
The text of the AFL and BSD licenses is reproduced below.
-------------------------------------------------------------------------------
The "New" BSD License:
**********************
Copyright (c) 2010-2011, The Dojo Foundation
All rights reserved.
Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this
list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice,
this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution.
* Neither the name of the Dojo Foundation nor the names of its contributors
may be used to endorse or promote products derived from this software
without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-------------------------------------------------------------------------------
The Academic Free License, v. 2.1:
**********************************
This Academic Free License (the "License") applies to any original work of
authorship (the "Original Work") whose owner (the "Licensor") has placed the
following notice immediately following the copyright notice for the Original
Work:
Licensed under the Academic Free License version 2.1
1) Grant of Copyright License. Licensor hereby grants You a world-wide,
royalty-free, non-exclusive, perpetual, sublicenseable license to do the
following:
a) to reproduce the Original Work in copies;
b) to prepare derivative works ("Derivative Works") based upon the Original
Work;
c) to distribute copies of the Original Work and Derivative Works to the
public;
d) to perform the Original Work publicly; and
e) to display the Original Work publicly.
2) Grant of Patent License. Licensor hereby grants You a world-wide,
royalty-free, non-exclusive, perpetual, sublicenseable license, under patent
claims owned or controlled by the Licensor that are embodied in the Original
Work as furnished by the Licensor, to make, use, sell and offer for sale the
Original Work and Derivative Works.
3) Grant of Source Code License. The term "Source Code" means the preferred
form of the Original Work for making modifications to it and all available
documentation describing how to modify the Original Work. Licensor hereby
agrees to provide a machine-readable copy of the Source Code of the Original
Work along with each copy of the Original Work that Licensor distributes.
Licensor reserves the right to satisfy this obligation by placing a
machine-readable copy of the Source Code in an information repository
reasonably calculated to permit inexpensive and convenient access by You for as
long as Licensor continues to distribute the Original Work, and by publishing
the address of that information repository in a notice immediately following
the copyright notice that applies to the Original Work.
4) Exclusions From License Grant. Neither the names of Licensor, nor the names
of any contributors to the Original Work, nor any of their trademarks or
service marks, may be used to endorse or promote products derived from this
Original Work without express prior written permission of the Licensor. Nothing
in this License shall be deemed to grant any rights to trademarks, copyrights,
patents, trade secrets or any other intellectual property of Licensor except as
expressly stated herein. No patent license is granted to make, use, sell or
offer to sell embodiments of any patent claims other than the licensed claims
defined in Section 2. No right is granted to the trademarks of Licensor even if
such marks are included in the Original Work. Nothing in this License shall be
interpreted to prohibit Licensor from licensing under different terms from this
License any Original Work that Licensor otherwise would have a right to
license.
5) This section intentionally omitted.
6) Attribution Rights. You must retain, in the Source Code of any Derivative
Works that You create, all copyright, patent or trademark notices from the
Source Code of the Original Work, as well as any notices of licensing and any
descriptive text identified therein as an "Attribution Notice." You must cause
the Source Code for any Derivative Works that You create to carry a prominent
Attribution Notice reasonably calculated to inform recipients that You have
modified the Original Work.
7) Warranty of Provenance and Disclaimer of Warranty. Licensor warrants that
the copyright in and to the Original Work and the patent rights granted herein
by Licensor are owned by the Licensor or are sublicensed to You under the terms
of this License with the permission of the contributor(s) of those copyrights
and patent rights. Except as expressly stated in the immediately proceeding
sentence, the Original Work is provided under this License on an "AS IS" BASIS
and WITHOUT WARRANTY, either express or implied, including, without limitation,
the warranties of NON-INFRINGEMENT, MERCHANTABILITY or FITNESS FOR A PARTICULAR
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY OF THE ORIGINAL WORK IS WITH YOU.
This DISCLAIMER OF WARRANTY constitutes an essential part of this License. No
license to Original Work is granted hereunder except under this disclaimer.
8) Limitation of Liability. Under no circumstances and under no legal theory,
whether in tort (including negligence), contract, or otherwise, shall the
Licensor be liable to any person for any direct, indirect, special, incidental,
or consequential damages of any character arising as a result of this License
or the use of the Original Work including, without limitation, damages for loss
of goodwill, work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses. This limitation of liability shall not
apply to liability for death or personal injury resulting from Licensor's
negligence to the extent applicable law prohibits such limitation. Some
jurisdictions do not allow the exclusion or limitation of incidental or
consequential damages, so this exclusion and limitation may not apply to You.
9) Acceptance and Termination. If You distribute copies of the Original Work or
a Derivative Work, You must make a reasonable effort under the circumstances to
obtain the express assent of recipients to the terms of this License. Nothing
else but this License (or another written agreement between Licensor and You)
grants You permission to create Derivative Works based upon the Original Work
or to exercise any of the rights granted in Section 1 herein, and any attempt
to do so except under the terms of this License (or another written agreement
between Licensor and You) is expressly prohibited by U.S. copyright law, the
equivalent laws of other countries, and by international treaty. Therefore, by
exercising any of the rights granted to You in Section 1 herein, You indicate
Your acceptance of this License and all of its terms and conditions.
10) Termination for Patent Action. This License shall terminate automatically
and You may no longer exercise any of the rights granted to You by this License
as of the date You commence an action, including a cross-claim or counterclaim,
against Licensor or any licensee alleging that the Original Work infringes a
patent. This termination provision shall not apply for an action alleging
patent infringement by combinations of the Original Work with other software or
hardware.
11) Jurisdiction, Venue and Governing Law. Any action or suit relating to this
License may be brought only in the courts of a jurisdiction wherein the
Licensor resides or in which Licensor conducts its primary business, and under
the laws of that jurisdiction excluding its conflict-of-law provisions. The
application of the United Nations Convention on Contracts for the International
Sale of Goods is expressly excluded. Any use of the Original Work outside the
scope of this License or after its termination shall be subject to the
requirements and penalties of the U.S. Copyright Act, 17 U.S.C. § 101 et
seq., the equivalent laws of other countries, and international treaty. This
section shall survive the termination of this License.
12) Attorneys Fees. In any action to enforce the terms of this License or
seeking damages relating thereto, the prevailing party shall be entitled to
recover its costs and expenses, including, without limitation, reasonable
attorneys' fees and costs incurred in connection with such action, including
any appeal of such action. This section shall survive the termination of this
License.
13) Miscellaneous. This License represents the complete agreement concerning
the subject matter hereof. If any provision of this License is held to be
unenforceable, such provision shall be reformed only to the extent necessary to
make it enforceable.
14) Definition of "You" in This License. "You" throughout this License, whether
in upper or lower case, means an individual or a legal entity exercising rights
under, and complying with all of the terms of, this License. For legal
entities, "You" includes any entity that controls, is controlled by, or is
under common control with you. For purposes of this definition, "control" means
(i) the power, direct or indirect, to cause the direction or management of such
entity, whether by contract or otherwise, or (ii) ownership of fifty percent
(50%) or more of the outstanding shares, or (iii) beneficial ownership of such
entity.
15) Right to Use. You may use the Original Work in all ways not otherwise
restricted or conditioned by this License or by law, and Licensor promises not
to interfere with or be responsible for such uses by You.
This license is Copyright (C) 2003-2004 Lawrence E. Rosen. All rights reserved.
Permission is hereby granted to copy and distribute this license without
modification. This license may not be modified without the express written
permission of its copyright owner.
================================================
FILE: README.md
================================================
This put-selector/put module/package provides a high-performance, lightweight
(~2KB minified, ~1KB gzipped with other code) function for creating
and manipulating DOM elements with succinct, elegant, familiar CSS selector-based
syntax across all browsers and platforms (including HTML generation on NodeJS).
The single function from the module creates or updates DOM elements by providing
a series of arguments that can include reference elements, selector strings, properties,
and text content. The put() function utilizes the proven techniques for optimal performance
on modern browsers to ensure maximum speed.
Installation/Usage
----------------
The put.js module can be simply downloaded and used a plain script (creates a global
put() function), as an AMD module (exports the put() function), or as a NodeJS (or any
server side JS environment) module.
It can also be installed with CPM:
cpm install put-selector
and then reference the "put-selector" module as a dependency.
or installed for Node with NPM:
npm install put-selector
and then:
put = require("put-selector");
Creating Elements
----------------
Type selector syntax (no prefix) can be used to indicate the type of element to be created. For example:
newDiv = put("div");
will create a new <div> element. We can put a reference element in front of the selector
string and the <div> will be appended as a child to the provided element:
put(parent, "div");
The selector .class-name can be used to assign the class name. For example:
put("div.my-class")
would create an element <div class="my-class"> (an element with a class of "my-class").
The selector #id can be used to assign an id and [name=value] can be used to
assign additional attributes to the element. For example:
newInput = put(parent, "input.my-input#address[type=checkbox]");
Would create an input element with a class name of "my-input", an id of "address",
and the type attribute set to "checkbox". The attribute assignment will always use
setAttribute to assign the attribute to the element. Multiple attributes and classes
can be assigned to a single element.
The put function returns the last top level element created or referenced from a selector.
In the examples above, the newly create element would be returned. Note that passing
in an existing node will not change the return value (as it is assumed you already have
a reference to it). Also note that if you only pass existing nodes reference, the first
passed reference will be returned.
Modifying Elements
----------------
One can also modify elements with selectors. If the tag name is omitted (and no
combinators have been used), the reference element will be modified by the selector.
For example, to add the class "foo" to element, we could write:
put(element, ".foo");
Likewise, we could set attributes, here we set the "role" attribute to "presentation":
put(element, "[role=presentation]");
And these can be combined also. For example, we could set the id and an attribute in
one statement:
put(element, "#id[tabIndex=2]");
One can also remove classes from elements by using the "!" operator in place of a ".".
To remove the "foo" class from an element, we could write:
put(element, "!foo");
We can also use the "!" operator to remove attributes as well. Prepending an attribute name
with "!" within brackets will remove it. To remove the "role" attribute, we could write:
put(element, "[!role]");
Deleting Elements
--------------
To delete an element, we can simply use the "!" operator by itself as the entire selector:
put(elementToDelete, "!");
This will destroy the element from the DOM, using either parent innerHTML destruction (IE only, that
reduces memory leaks in IE), or removeChild (for all other browsers).
Creating/Modifying Elements with XML Namespaces
-----------
To work with elements and attributes that are XML namespaced, start by adding the namespace using addNamespace:
put.addNamespace("svg", "http://www.w3.org/2000/svg");
put.addNamespace("xlink", "http://www.w3.org/1999/xlink");
From there, you can use the CSS3 selector syntax to work with elements and attributes:
var surface = put("svg|svg[width='100'][height='100']");
var img = put(surface, "svg|image[xlink|href='path/to/my/image.png']");
Text Content
-----------
The put() arguments may also include a subsequent string (or any primitive value including
boolean and numbers) argument immediately
following a selector, in which case it is used as the text inside of the new/referenced element.
For example, here we could create a new <div> with the text "Hello, World" inside.
newDiv = put(parent, "div", "Hello, World");
The text is escaped, so any string will show up as is, and will not be parsed as HTML.
Children and Combinators
-----------------------
CSS combinators can be used to create child elements and sibling elements. For example,
we can use the child operator (or the descendant operator, it acts the same here) to
create nested elements:
spanInsideOfDiv = put(reference, "div.outer span.inner");
This would create a new span element (with a class name of "inner") as a child of a
new div element (with a class name of "outer") as a child of the reference element. The
span element would be returned. We can also use the sibling operator to reference
the last created element or the reference element. In the example we indicate that
we want to create sibling of the reference element:
newSpan = put(reference, "+span");
Would create a new span element directly after the reference element (reference and
newSpan would be siblings.) We can also use the "-" operator to indicate that the new element
should go before:
newSpan = put(reference, "-span");
This new span element will be inserted before the reference element in the DOM order.
Note that "-" is valid character in tags and classes, so it will only be interpreted as a
combinator if it is the first character or if it is preceded by a space.
The sibling operator can reference the last created element as well. For example
to add two td element to a table row:
put(tableRow, "td+td");
The last created td will be returned.
The parent operator, "<" can be used to reference the parent of the last created
element or reference element. In this example, we go crazy, and create a full table,
using the parent operator (applied twice) to traverse back up the DOM to create another table row
after creating a td element:
newTable = put(referenceElement, "table.class-name#id tr td[colSpan=2]<
and then append
the "child" element to the new <div>:
put("div", child);
Or we can do a simple append of an existing element to another element:
put(parent, child);
We could also do this more explicitly by using a child descendant, '>' (which has the
same meaning as a space operator, and is the default action between arguments in put-selector):
put(parent, ">", child);
We could also use sibling combinators to place the referenced element. We could place
the "second" element after (as the next sibling) the "first" element (which needs a parent
in order to have a sibling):
put(first, "+", second);
Or we could create a <div> and place "first" before it using the previous sibling combinator:
put(parent, "div.second -", first);
The put() function takes an unlimited number of arguments, so we could combine as
many selectors and elements as we want:
put(parent, "div.child", grandchild, "div.great-grandchild", gggrandchild);
Variable Substitution
-------------------
The put() function also supports variable substitution, by using the "$" symbol in selectors.
The "$" can be used for attribute values and to represent text content. When a "$"
is encountered in a selector, the next argument value is consumed and used in it's
place. To create an element with a title that comes from the variable "title", we could write:
put("div[title=$]", title);
The value of title may have any characters (including ']'), no escaping is needed.
This approach can simplify selector string construction and avoids the need for complicated
escaping mechanisms.
The "$" may be used as a child entity to indicate text content. For example, we could
create a set of <span> element that each have content to be substituted:
put("span.first-name $, span.last-name $, span.age $", firstName, lastName, age);
Assigning Properties
------------------
The put() function can also take an object with properties to be set on the new/referenced
element. For example, we could write:
newDiv = put(parent, "div", {
tabIndex: 1,
innerHTML: "Hello, World"
});
Which is identical to writing (all the properties are set using direct property access, not setAttribute):
newDiv = put(parent, "div");
newDiv.tabIndex = 1;
newDiv.innerHTML = "Hello, World";
NodeJS/Server Side HTML Generation
----------------------------
While the put() function directly creates DOM elements in the browser, the put() function
can be used to generate HTML on the server, in NodeJS. When no DOM is available,
a fast lightweight pseudo-DOM is created that can generate HTML as a string or into a stream.
The API is still the same, but the put() function returns pseudo-elements with a
toString() method that can be called to return the HTML and sendTo method to direct
generated elements to a stream on the fly. For example:
put("div.test").toString() -> ''
To use put() streaming, we create and element and call sendTo with a target stream.
In streaming mode, the elements are written to the stream as they are added to the
parent DOM structure. This approach is much more efficient because very little
needs to be kept in memory, the HTML can be immediately flushed to the network as it is created.
Once an element is added to the streamed DOM structure,
it is immediately sent to the stream, and it's attributes and classes can no longer be
altered. There are two methods on elements available for streaming purposes:
element.sendTo(stream)
The sendTo(stream) method will begin streaming the element to the target stream,
and any children that are added to the element will be streamed as well.
element.end(leaveOpen)
The end(leaveOpen) method will end the current streaming, closing all the necessary
tags and closing the stream (unless the argument is true).
The returned elements also include a put() method so you can directly add to or apply
CSS selector-based additions to elements, for example:
element.put('div.test'); // create a <div class="test"></div> as a child of element
Here is an example of how we could create a full page in NodeJS that is streamed to
the response:
var http = require('http');
var put = require('put-selector');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
var page = put('html').sendTo(res); // create an HTML page, and pipe to the response
page.put('head script[src=app.js]'); // each element is sent immediately
page.put('body div.content', 'Hello, World');
page.end(); // close all the tags, and end the stream
}).listen(80);
On the server, there are some limitations to put(). The server side DOM emulation
is designed to be very fast and light and therefore omits much of the standard DOM
functionality, and only what is needed for put() is implemented. Elements can
not be moved or removed. DOM creation and updating is still supported in string
generation mode, but only creation is supported in streaming mode. Also, setting
object properties is mostly ignored (because only attributes are part of HTML), except
you can set the innerHTML of an element.
Proper Creation of Inputs
-------------------------
Older versions of Internet Explorer have a bug in assigning a "name" attribute to input after it
has been created, and requires a special creation technique. The put() function handles
this for you as long as you specify the name of the input in the property assignment
object after the selector string. For example, this input creation will properly work
on all browsers, including IE:
newInput = put("input[type=checkbox]", {name: "works"});
Using on Different document
-------------------------
If you are using multiple frames in your web page, you may encounter a situation where
you want to use put-selector to make DOM changes on a different HTML document.
You can create a separate instance of the put() function for a separate document by
calling the put.forDocument(document) function. For example:
put2 = put.forDocument(frames[1].document);
put2("div") <- creates a div element that belongs to the document in the second frame.
put("div") <- the original put still functions on the main document for this window/context
# License
put-selector is freely available under *either* the terms of the modified BSD license *or* the
Academic Free License version 2.1. More details can be found in the [LICENSE](LICENSE).
The put-selector project follows the IP guidelines of Dojo foundation packages and all contributions require a Dojo CLA.
If you feel compelled to make a monetary contribution, consider some of the author's [favorite
charities](http://thezyps.com/2012-giving-guide/) like [Innovations for Poverty Action](http://www.poverty-action.org/).
================================================
FILE: node-html.js
================================================
"use strict";
var put;
function Element(tag){
this.tag = tag;
}
// create set of elements with an empty content model, so we now to skip their closing tag
var emptyElements = {};
["base", "link", "meta", "hr", "br", "wbr", "img", "embed", "param", "source", "track", "area", "col", "input", "keygen", "command"].forEach(function(tag){
emptyElements[tag] = true;
});
var prototype = Element.prototype;
var currentIndentation = '';
prototype.nodeType = 1;
prototype.put = function(){
var args = [this];
args.push.apply(args, arguments);
return put.apply(null, args);
}
prototype.toString = function(noClose){
var tag = this.tag;
var emptyElement = emptyElements[tag];
if(put.indentation && !noClose){
// using pretty printing with indentation
var lastIndentation = currentIndentation;
currentIndentation += put.indentation;
var html = (tag == 'html' ? '\n' +
(this.children ? this.children.join('') : '') +
(!this.mixed && !emptyElement && this.children ? '\n' +lastIndentation : '') +
(emptyElement ? '' : (''));
currentIndentation = lastIndentation;
return html;
}
return (this.tag == 'html' ? '\n' +
(this.children ? this.children.join('') : '') +
((noClose || emptyElement) ? '' : (''));
};
prototype.sendTo = function(stream){
if(typeof stream == 'function'){ // write function itself
stream = {write: stream, end: stream};
}
var active = this;
var streamIndentation = '';
function pipe(element){
// TODO: Perhaps consider buffering if it is any faster and having a non-indentation version that is faster
var closing = returnTo(this);
if(closing){
stream.write(closing);
}
var tag = element.tag;
if(element.tag){
if(put.indentation){
stream.write('\n' + streamIndentation + element.toString(true));
streamIndentation += put.indentation;
}else{
stream.write(element.toString(true));
}
this.children = true;
active = element;
element.pipe = pipe;
}else{
stream.write(element.toString());
}
}
function returnTo(element){
var output = '';
while(active != element){
if(!active){
throw new Error("Can not add to an element that has already been streamed");
}
var tag = active.tag;
var emptyElement = emptyElements[tag];
if(put.indentation){
streamIndentation = streamIndentation.slice(put.indentation.length);
if(!emptyElement){
output += ((active.mixed || !active.children) ? '' : '\n' + streamIndentation) + '';
}
}else if(!emptyElement){
output += '';
}
active = active.parentNode;
}
return output;
}
pipe.call(this, this);
// add on end() function to close all the tags and close the stream
this.end = function(leaveStreamOpen){
stream[leaveStreamOpen ? 'write' : 'end'](returnTo(this) + '\n');
}
return this;
};
prototype.children = false;
prototype.attributes = false;
prototype.insertBefore = function(child, reference){
child.parentNode = this;
if(this.pipe){
return this.pipe(child);
//return this.s(child);
}
var children = this.children;
if(!children){
children = this.children = [];
}
if(reference){
for(var i = 0, l = children.length; i < l; i++){
if(reference == children[i]){
child.nextSibling = reference;
if(i > 0){
children[i-1].nextSibling = child;
}
return children.splice(i, 0, child);
}
}
}
if(children.length > 0){
children[children.length-1].nextSibling = child;
}
children.push(child);
};
prototype.appendChild = function(child){
if(typeof child == "string"){
this.mixed = true;
}
if(this.pipe){
return this.pipe(child);
}
var children = this.children;
if(!children){
children = this.children = [];
}
children.push(child);
};
prototype.setAttribute = function(name, value, escape){
var attributes = this.attributes;
if(!attributes){
attributes = this.attributes = [];
}
attributes.push(' ' + name + '="' + value + '"');
};
prototype.removeAttribute = function(name, value){
var attributes = this.attributes;
if(!attributes){
return;
}
var match = ' ' + name + '=', matchLength = match.length;
for(var i = 0, l = attributes.length; i < l; i++){
if(attributes[i].slice(0, matchLength) == match){
return attributes.splice(i, 1);
}
}
};
Object.defineProperties(prototype, {
innerHTML: {
get: function(){
return this.children.join('');
},
set: function(value){
this.mixed = true;
if(this.pipe){
return this.pipe(value);
}
this.children = [value];
}
}
});
function DocumentFragment(){
}
DocumentFragment.prototype = new Element();
DocumentFragment.prototype.toString = function(){
return this.children ? this.children.join('') : '';
};
var lessThanRegex = / ]/; // if it has any of these combinators, it is probably going to be faster with a document fragment
localDefine([], forDocument = function(doc, newFragmentFasterHeuristic){
"use strict";
// module:
// put-selector/put
// summary:
// This module defines a fast lightweight function for updating and creating new elements
// terse, CSS selector-based syntax. The single function from this module creates
// new DOM elements and updates existing elements. See README.md for more information.
// examples:
// To create a simple div with a class name of "foo":
// | put("div.foo");
fragmentFasterHeuristic = newFragmentFasterHeuristic || fragmentFasterHeuristic;
var selectorParse = /(?:\s*([-+ ,<>]))?\s*(\.|!\.?|#)?([-\w\u00A0-\uFFFF%$|]+)?(?:\[([^\]=]+)=?('(?:\\.|[^'])*'|"(?:\\.|[^"])*"|[^\]]*)\])?/g,
undefined, namespaceIndex, namespaces = false,
doc = doc || document,
ieCreateElement = typeof doc.createElement == "object"; // telltale sign of the old IE behavior with createElement that does not support later addition of name
function insertTextNode(element, text){
element.appendChild(doc.createTextNode(text));
}
function put(topReferenceElement){
var fragment, lastSelectorArg, nextSibling, referenceElement, current,
args = arguments,
returnValue = args[0]; // use the first argument as the default return value in case only an element is passed in
function insertLastElement(){
// we perform insertBefore actions after the element is fully created to work properly with
// tags in older versions of IE that require type attributes
// to be set before it is attached to a parent.
// We also handle top level as a document fragment actions in a complex creation
// are done on a detached DOM which is much faster
// Also if there is a parse error, we generally error out before doing any DOM operations (more atomic)
if(current && referenceElement && current != referenceElement){
(referenceElement == topReferenceElement &&
// top level, may use fragment for faster access
(fragment ||
// fragment doesn't exist yet, check to see if we really want to create it
(fragment = fragmentFasterHeuristic.test(argument) && doc.createDocumentFragment()))
// any of the above fails just use the referenceElement
? fragment : referenceElement).
insertBefore(current, nextSibling || null); // do the actual insertion
}
}
for(var i = 0; i < args.length; i++){
var argument = args[i];
if(typeof argument == "object"){
lastSelectorArg = false;
if(argument instanceof Array){
// an array
current = doc.createDocumentFragment();
for(var key = 0; key < argument.length; key++){
current.appendChild(put(argument[key]));
}
argument = current;
}
if(argument.nodeType){
current = argument;
insertLastElement();
referenceElement = argument;
nextSibling = 0;
}else{
// an object hash
for(var key in argument){
current[key] = argument[key];
}
}
}else if(lastSelectorArg){
// a text node should be created
// take a scalar value, use createTextNode so it is properly escaped
// createTextNode is generally several times faster than doing an escaped innerHTML insertion: http://jsperf.com/createtextnode-vs-innerhtml/2
lastSelectorArg = false;
insertTextNode(current, argument);
}else{
if(i < 1){
// if we are starting with a selector, there is no top element
topReferenceElement = null;
}
lastSelectorArg = true;
var leftoverCharacters = argument.replace(selectorParse, function(t, combinator, prefix, value, attrName, attrValue){
if(combinator){
// insert the last current object
insertLastElement();
if(combinator == '-' || combinator == '+'){
// + or - combinator,
// TODO: add support for >- as a means of indicating before the first child?
referenceElement = (nextSibling = (current || referenceElement)).parentNode;
current = null;
if(combinator == "+"){
nextSibling = nextSibling.nextSibling;
}// else a - operator, again not in CSS, but obvious in it's meaning (create next element before the current/referenceElement)
}else{
if(combinator == "<"){
// parent combinator (not really in CSS, but theorized, and obvious in it's meaning)
referenceElement = current = (current || referenceElement).parentNode;
}else{
if(combinator == ","){
// comma combinator, start a new selector
referenceElement = topReferenceElement;
}else if(current){
// else descendent or child selector (doesn't matter, treated the same),
referenceElement = current;
}
current = null;
}
nextSibling = 0;
}
if(current){
referenceElement = current;
}
}
var tag = !prefix && value;
if(tag || (!current && (prefix || attrName))){
if(tag == "$"){
// this is a variable to be replaced with a text node
insertTextNode(referenceElement, args[++i]);
}else{
// Need to create an element
tag = tag || put.defaultTag;
var ieInputName = ieCreateElement && args[i +1] && args[i +1].name;
if(ieInputName){
// in IE, we have to use the crazy non-standard createElement to create input's that have a name
tag = '<' + tag + ' name="' + ieInputName + '">';
}
// we swtich between creation methods based on namespace usage
current = namespaces && ~(namespaceIndex = tag.indexOf('|')) ?
doc.createElementNS(namespaces[tag.slice(0, namespaceIndex)], tag.slice(namespaceIndex + 1)) :
doc.createElement(tag);
}
}
if(prefix){
if(value == "$"){
value = args[++i];
}
if(prefix == "#"){
// #id was specified
current.id = value;
}else{
// we are in the className addition and removal branch
var currentClassName = current.className;
// remove the className (needed for addition or removal)
// see http://jsperf.com/remove-class-name-algorithm/2 for some tests on this
var removed = currentClassName && (" " + currentClassName + " ").replace(" " + value + " ", " ");
if(prefix == "."){
// addition, add the className
current.className = currentClassName ? (removed + value).substring(1) : value;
}else{
// else a '!' class removal
if(argument == "!"){
var parentNode;
// special signal to delete this element
if(ieCreateElement){
// use the ol' innerHTML trick to get IE to do some cleanup
put("div", current, '<').innerHTML = "";
}else if(parentNode = current.parentNode){ // intentional assigment
// use a faster, and more correct (for namespaced elements) removal (http://jsperf.com/removechild-innerhtml)
parentNode.removeChild(current);
}
}else{
// we already have removed the class, just need to trim
removed = removed.substring(1, removed.length - 1);
// only assign if it changed, this can save a lot of time
if(removed != currentClassName){
current.className = removed;
}
}
}
// CSS class removal
}
}
if(attrName){
if(attrValue && (attrValue.charAt(0) === '"' || attrValue.charAt(0) === "'")) {
// quoted string
attrValue = attrValue.slice(1, -1).replace(/\\/g, '')
}
if(attrValue == "$"){
attrValue = args[++i];
}
// [name=value]
if(attrName == "style"){
// handle the special case of setAttribute not working in old IE
current.style.cssText = attrValue;
}else{
var method = attrName.charAt(0) == "!" ? (attrName = attrName.substring(1)) && 'removeAttribute' : 'setAttribute';
// determine if we need to use a namespace
namespaces && ~(namespaceIndex = attrName.indexOf('|')) ?
current[method + "NS"](namespaces[attrName.slice(0, namespaceIndex)], attrName.slice(namespaceIndex + 1), attrValue) :
current[method](attrName, attrValue);
}
}
return '';
});
if(leftoverCharacters){
throw new SyntaxError("Unexpected char " + leftoverCharacters + " in " + argument);
}
insertLastElement();
referenceElement = returnValue = current || referenceElement;
}
}
if(topReferenceElement && fragment){
// we now insert the top level elements for the fragment if it exists
topReferenceElement.appendChild(fragment);
}
return returnValue;
}
put.addNamespace = function(name, uri){
if(doc.createElementNS){
(namespaces || (namespaces = {}))[name] = uri;
}else{
// for old IE
doc.namespaces.add(name, uri);
}
};
put.defaultTag = "div";
put.forDocument = forDocument;
return put;
});
})(function(id, deps, factory){
factory = factory || deps;
if(typeof define === "function"){
// AMD loader
define([], function(){
return factory();
});
}else if(typeof window == "undefined"){
// server side JavaScript, probably (hopefully) NodeJS
require("./node-html")(module, factory);
}else{
// plain script in a browser
put = factory();
}
});
================================================
FILE: test/example-server.js
================================================
var http = require('http');
var put = require('put-selector');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
var page = put('html').sendTo(res); // create an HTML page, and pipe to the response
put(page, 'head script[src=app.js]'); // each are sent immediately
put(page, 'body div.content', 'Hello, World');
page.end(); // close all the tags, and end the stream
}).listen(81);
================================================
FILE: test/node-put.js
================================================
var assert = require("assert"),
put = require("../put");
exports.testSimple = function() {
assert.equal(put('div span.test<').toString(), '\n