├── .gitignore ├── jstd ├── domiante.essential.jstd └── dominate.jstd ├── package.json ├── dominate.essential.min.js ├── src ├── dominate.essential.js └── dominate.js ├── dominate.min.js ├── examples ├── svg.html ├── static.html └── extended.html ├── LICENSE ├── test ├── essential_features.js └── standard_features.js ├── README.md └── jakefile /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .idea 3 | node_modules -------------------------------------------------------------------------------- /jstd/domiante.essential.jstd: -------------------------------------------------------------------------------- 1 | load: 2 | - ../src/dominate.essential.js 3 | 4 | test: 5 | - ../test/essential_features.js 6 | -------------------------------------------------------------------------------- /jstd/dominate.jstd: -------------------------------------------------------------------------------- 1 | load: 2 | - ../src/dominate.js 3 | 4 | test: 5 | - ../test/essential_features.js 6 | - ../test/standard_features.js -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "DOMinate", 3 | "version": "1.1.0", 4 | "scripts": { 5 | "build": "jake" 6 | }, 7 | "devDependencies": { 8 | "jake": "^8.0.12", 9 | "uglify-js": "^2.6.0" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /dominate.essential.min.js: -------------------------------------------------------------------------------- 1 | /*DOMinate essential 1.0.1 by Adrian Sieber (adriansieber.com)*/ 2 | DOMinate=function e(t,n,i,r){function l(e){return document.createElement(e)}for(t[0].big&&(t[0]=l(t[0])),i=1;i 2 | 3 | 4 | 5 | DOMinate SVG example 6 | 7 | 8 | 9 | 10 |

DOMinate

11 | 12 |

SVG Example

13 | 14 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples/static.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DOMinate Static Example 6 | 7 | 8 | 9 | 10 |

DOMinate

11 | 12 |

Static Example

13 | 14 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (C) 2012 Adrian Sieber 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /test/essential_features.js: -------------------------------------------------------------------------------- 1 | TestCase('Essential', { 2 | 3 | 'test attachment to element': function () { 4 | /*:DOC gen =

*/ 5 | /*:DOC ref =

*/ 6 | 7 | DOMinate([this.gen, ['div']]); 8 | 9 | assertTrue(this.gen.outerHTML + ' == ' + this.ref.outerHTML, this.gen.isEqualNode(this.ref)); 10 | }, 11 | 12 | 'test recursive building of Elements': function () { 13 | /*:DOC gen =

*/ 14 | /*:DOC ref =

test2

*/ 15 | 16 | DOMinate( 17 | [this.gen, 18 | ['div', 19 | ['p', 'test', 20 | ['a', '2'] 21 | ] 22 | ] 23 | ] 24 | ); 25 | 26 | assertTrue(this.gen.outerHTML + ' == ' + this.ref.outerHTML, this.gen.isEqualNode(this.ref)); 27 | }, 28 | 29 | 'test setting of Properties': function () { 30 | /*:DOC gen =

*/ 31 | /*:DOC ref =

*/ 32 | 33 | DOMinate( 34 | [this.gen, 35 | ['div', { 36 | id: 'important', 37 | class: 'test', // class is restricted word 38 | 'data-info': 'none' // attribute with dash 39 | }] 40 | ] 41 | ); 42 | 43 | assertTrue(this.gen.outerHTML + ' == ' + this.ref.outerHTML, this.gen.isEqualNode(this.ref)); 44 | } 45 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DOMinate 2 | 3 | --- 4 | 5 | **THIS PROGRAM IS DEPRECATED AND NO LONGER ACTIVELY MAINTAINED.** 6 | 7 | **Check out its successor [Shaven](http://shaven.ad-si.com/) instead.** 8 | 9 | --- 10 | 11 | A DOM building utility and Template engine build upon JsonML with syntax sugar. 12 | 13 | 14 | ```javascript 15 | DOMinate( 16 | [document.body, 17 | ['h1#logo', 'Static Example', {style:'color:blue'}], 18 | ['p','some example text'], 19 | ['ul#list.bullets'}, 20 | ['li', 'item1'], 21 | ['li.active', 'item2'], 22 | ['li', 23 | ['a', 'item3', {href: '#'}] 24 | ] 25 | ] 26 | ] 27 | ); 28 | ``` 29 | 30 | compiles to 31 | 32 | ```html 33 | 34 |

Static Example

35 |

some example text

36 |

item1
item2
item3

41 | 42 | ``` 43 | 44 | 45 | ## Versions 46 | DOMinate is available in two versions, which are based on each other. 47 | 48 | ### Essential 49 | - 242 bytes 50 | - Contains the basic functionality 51 | - Attempt to build the shortest JsonML parser possible 52 | - For projects where every byte counts 53 | 54 | ### Standard 55 | - 0.6k bytes 56 | - Contains all the functionality 57 | - Syntax Sugar for ids and classes 58 | - Support for namespaces. (Lets you build SVGs and other XML based languages) 59 | - Callback functions on elements 60 | - Returns a Object containing the root element and the elements with an id 61 | 62 | **Check out the examples folder for more in-depth examples** 63 | -------------------------------------------------------------------------------- /jakefile: -------------------------------------------------------------------------------- 1 | var fs = require('fs'), 2 | uglify = require('uglify-js') 3 | 4 | function buildMinifiedJs(string) { 5 | 6 | var ast, 7 | compressor = uglify.Compressor() 8 | 9 | ast = uglify.parse(string) 10 | ast.figure_out_scope() 11 | ast.transform(compressor) 12 | ast.figure_out_scope() 13 | ast.compute_char_frequency() 14 | ast.mangle_names() 15 | 16 | return ast.print_to_string({"comments": /adrian sieber/i}) 17 | } 18 | 19 | 20 | desc('Default build process') 21 | task('default', ['dominate.min.js', 'dominate.essential.min.js'], function() { 22 | }) 23 | 24 | 25 | desc('Compile dominate.min.js') 26 | task('dominate.min.js', [], {async: true}, function() { 27 | 28 | var jsString = fs.readFileSync('src/dominate.js').toString(), 29 | file = fs.openSync('dominate.min.js', 'w+'), 30 | version = JSON.parse(fs.readFileSync('package.json')).version 31 | 32 | jsString = buildMinifiedJs(jsString.replace('{{ VERSION }}', version)) 33 | 34 | fs.write(file, jsString, undefined, undefined, function() { 35 | console.log('Building dominate.min.js succeeded') 36 | }) 37 | 38 | complete() 39 | }) 40 | 41 | 42 | desc('Compile dominate.essential.min.js') 43 | task('dominate.essential.min.js', [], {async: true}, function() { 44 | 45 | var jsString = fs.readFileSync('src/dominate.essential.js').toString(), 46 | file = fs.openSync('dominate.essential.min.js', 'w+') 47 | 48 | fs.write(file, buildMinifiedJs(jsString), undefined, undefined, function() { 49 | console.log('Building dominate.essential.min.js succeeded') 50 | }) 51 | 52 | complete() 53 | }) 54 | 55 | 56 | desc('Remove compiled files') 57 | task('clean', [], {async: true}, function() { 58 | 59 | var files = [ 60 | 'dominate.min.js', 61 | 'dominate.essential.min.js' 62 | ] 63 | 64 | files.forEach(function(file) { 65 | fs.exists(file, function(exists) { 66 | 67 | if(exists) 68 | fs.unlink(file, function(err) { 69 | if(err) console.log(err) 70 | }) 71 | }) 72 | }) 73 | 74 | complete() 75 | }) -------------------------------------------------------------------------------- /examples/extended.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DOMinate Extended Static Example 6 | 7 | 8 | 9 | 10 |

DOMinate

11 | 12 |

Extended Static Example

13 | 14 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /src/dominate.js: -------------------------------------------------------------------------------- 1 | /*DOMinate {{ VERSION }} by Adrian Sieber (adriansieber.com)*/ 2 | 3 | DOMinate = function dom(array, //Array containing the DOM fragment in JsonML 4 | namespace, //Namespace 5 | returnObject) { //Contains elements identified by their id 6 | 7 | var doc = document, 8 | i, 9 | b; 10 | 11 | //Set on first iteration 12 | returnObject = returnObject || {} 13 | 14 | //Set default namespace to XHTML namespace 15 | namespace = namespace || 'http://www.w3.org/1999/xhtml' 16 | 17 | //Create DOM element from syntax sugar string 18 | function createElement(sugarString) { 19 | 20 | var element = doc.createElementNS(namespace, sugarString.match(/^\w+/)[0]), //Create element 21 | id, 22 | ref, 23 | classNames 24 | 25 | //Assign id if is set 26 | if (id = sugarString.match(/#([\w-]+)/)) { 27 | 28 | element.id = id[1] 29 | 30 | //Add element to the return object 31 | returnObject[id[1]] = element 32 | } 33 | 34 | //Create reference to the element and add it to the return object 35 | if (ref = sugarString.match(/\$([\w-]+)/)) 36 | returnObject[ref[1]] = element 37 | 38 | 39 | //Assign class if is set 40 | if (classNames = sugarString.match(/\.[\w-]+/g)) 41 | element.setAttribute('class', classNames.join(' ').replace(/\./g, '')) 42 | 43 | //Return DOM element 44 | return element 45 | } 46 | 47 | //If is string create DOM element else is already a DOM element 48 | if (array[0].big) 49 | array[0] = createElement(array[0]) 50 | 51 | //For each in the element array (except the first) 52 | for (i = 1; i < array.length; i++) { 53 | 54 | //If is string has to be content so set it 55 | if (array[i].big) 56 | array[0].appendChild(doc.createTextNode(array[i])); 57 | 58 | //If is array has to be child element 59 | else if (array[i].pop) { 60 | 61 | //Use DOMinate recursively for all child elements 62 | dom(array[i], namespace, returnObject) 63 | 64 | //Append the element to its parent element 65 | array[0].appendChild(array[i][0]) 66 | } 67 | 68 | //If is function call with current element as first argument 69 | else if (array[i].call) 70 | array[i](array[0]) 71 | 72 | //If is element append it 73 | else if (array[i] instanceof Element) 74 | array[0].appendChild(array[i]) 75 | 76 | //Else must be object with attributes 77 | else 78 | //For each attribute 79 | for (b in array[i]) 80 | array[0].setAttribute(b, array[i][b]) 81 | 82 | } 83 | 84 | //Return root element on index 0 85 | returnObject[0] = array[0] 86 | 87 | //returns object containing all elements with an id and the root element 88 | return returnObject 89 | } -------------------------------------------------------------------------------- /test/standard_features.js: -------------------------------------------------------------------------------- 1 | TestCase('Standard', { 2 | 3 | 'test syntax-sugar id': function () { 4 | /*:DOC gen =

*/ 5 | /*:DOC ref =

*/ 6 | 7 | DOMinate([this.gen, ['div#test-1']]); 8 | 9 | assertTrue(this.gen.outerHTML + ' == ' + this.ref.outerHTML, this.gen.isEqualNode(this.ref)); 10 | }, 11 | 12 | 'test syntax-sugar class': function () { 13 | /*:DOC ref =

*/ 14 | /*:DOC gen =

*/ 15 | 16 | DOMinate([this.gen, ['a.new']]) 17 | 18 | assertTrue(this.gen.outerHTML + ' == ' + this.ref.outerHTML, this.gen.isEqualNode(this.ref)) 19 | }, 20 | 21 | 'test syntax-sugar class and id': function () { 22 | /*:DOC ref =

*/ 23 | /*:DOC gen =

*/ 24 | 25 | DOMinate([this.gen, ['a#b.new']]) 26 | 27 | assertTrue(this.gen.outerHTML + ' == ' + this.ref.outerHTML, this.gen.isEqualNode(this.ref)) 28 | }, 29 | 30 | 'test syntax-sugar class and id reversed': function () { 31 | /*:DOC ref =

*/ 32 | /*:DOC gen =

*/ 33 | 34 | DOMinate([this.gen, ['a.new#c']]) 35 | 36 | assertTrue(this.gen.outerHTML + ' == ' + this.ref.outerHTML, this.gen.isEqualNode(this.ref)) 37 | }, 38 | 39 | 'test multiple syntax-sugar classes and id': function () { 40 | /*:DOC ref =

*/ 41 | /*:DOC gen =

*/ 42 | 43 | DOMinate([this.gen, ['a.new#c.test']]) 44 | 45 | assertTrue(this.gen.outerHTML + ' == ' + this.ref.outerHTML, this.gen.isEqualNode(this.ref)) 46 | }, 47 | 48 | 'test callback function': function () { 49 | /*:DOC gen =

*/ 50 | 51 | var bar = false, 52 | element = false 53 | 54 | function foo(el) { 55 | bar = true 56 | element = el 57 | } 58 | 59 | DOMinate([this.gen, foo]) 60 | 61 | assertTrue('Function was called', bar) 62 | assertTrue('Element was passed to function', isElement_(element)) 63 | assertSame('Correct element was passed to function', this.gen, element) 64 | }, 65 | 66 | 'test appendance of elements': function(){ 67 | /*:DOC ref =

*/ 68 | /*:DOC gen =

*/ 69 | 70 | var element = DOMinate(['a'])[0] 71 | 72 | DOMinate([this.gen, element]) 73 | 74 | assertTrue(this.gen.outerHTML + ' == ' + this.ref.outerHTML, this.gen.isEqualNode(this.ref)) 75 | }, 76 | 77 | 'test return element object': function () { 78 | /*:DOC gen =

*/ 79 | 80 | assertObject('Should return an object', DOMinate([this.gen, ['a']])); 81 | }, 82 | 83 | 'test return of root element': function () { 84 | /*:DOC gen =

*/ 85 | 86 | assertEquals('Should return a node of type', 1, DOMinate([this.gen, ['a']])[0].nodeType); 87 | }, 88 | 89 | 'test return of elements with an id': function () { 90 | /*:DOC +=

*/ 91 | 92 | var fragment = DOMinate([document.getElementById('gen'), ['a#foo'], ['a#bar']]) 93 | 94 | assertEquals('Should return element', document.getElementById('foo'), fragment.foo) 95 | assertEquals('Should return element', document.getElementById('bar'), fragment.bar) 96 | }, 97 | 98 | 'test return of marked elements ': function () { 99 | /*:DOC +=

*/ 100 | 101 | var fragment = DOMinate([document.getElementById('gen'), ['a$foo'], ['p$bar']]) 102 | 103 | assertEquals('Should return element', document.getElementsByTagName('a')[0], fragment.foo) 104 | assertEquals('Should return element', document.getElementsByTagName('p')[0], fragment.bar) 105 | } 106 | }) --------------------------------------------------------------------------------