Skip to content

Instantly share code, notes, and snippets.

@caracal7
Forked from Downchuck/LICENSE.txt
Created January 27, 2018 00:29
Show Gist options
  • Save caracal7/b519cd1b2629b6192dffc7d3345cc09e to your computer and use it in GitHub Desktop.
Save caracal7/b519cd1b2629b6192dffc7d3345cc09e to your computer and use it in GitHub Desktop.
DOM micro-DSL

DOM micro-DSL

From the wish-list for a DOM Builder. I'm cheating in this version with a separate the createElement and appendChild method, it was just too many characters. DOM4 may have shorter create and append methods. (see: w3c www-dom list.)

DOM builder

A function that turns a non-nested (fab)-style micro-DSL such as the following into a DOM, without using HTML.

domBuilder(
  [/HTML/],
    [/HEAD/],
      [/TITLE/],
        "Wouldn't this be cool?",
      [],
    [],
    [/BODY/],
      [/DIV/, {id: "container"}],
        "Hello, world",
      [],
    [],
  []
)
function(d,c,a,i) {
while(b=a.shift()) // Move through the input array
if(b[0]&&b[0].test){ // See if the current element is a RegExp object.
d=c(d,b); // Call the special processor (cheating.).
for(i in b[1]) // Set attribute values on the current element.
d[i]=b[1][i]
}
else b.length // If this isn't a RegExp it's text or an end tag
? d.textContent=b // Set text content on the current node
: d=d.parentNode // End tag, set the current element to the parent node.
};
function(d,c,a,i){while(b=a.shift())if(b[0]&&b[0].test){d=c(d,b);for(i in b[1])d[i]=b[1][i]}else b.length?d.textContent=b:d=d.parentNode}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2011 Charles Pritchard <chuck@jumis.com>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "domArrayToNode",
"description": "Create a DOM tree from an array.",
"keywords": [
"dom",
"html",
"dsl"
]
}
<!DOCTYPE html>
<title>Foo</title>
<div>Expected value: <b>Hello, world</b></div>
<div>Actual value: <b id="ret"></b></div>
<script>
// Cheat: separate the DSL + appendChild processor and root node from the main method.
var domBuilder = function(d,c,a,i){while(b=a.shift())if(b[0]&&b[0].test){d=c(d,b);for(i in b[1])d[i]=b[1][i]}else b.length?d.textContent=b:d=d.parentNode};
var dsl = function(d,c){c=c[0]+'';return d.appendChild(document.createElement(c.substr(1,c.length-2)));};
var d = document.getElementById( "ret" );
domBuilder(d, dsl, [
[/HTML/],
[/HEAD/],
[/TITLE/],
"Wouldn't this be cool?",
[],
[],
[/BODY/],
[/DIV/, {id: "container"}],
"Hello, world",
[],
[],
[]
]);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment