├── .gitignore ├── .npmignore ├── test ├── setup.js └── rdom.js ├── src ├── tags.js └── rdom.js ├── .eslintrc.json ├── LICENSE ├── package.json ├── README.md └── dist ├── rdom.min.js └── rdom.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /scripts/ 2 | **/test/ 3 | /.editorconfig 4 | /.gitattributes 5 | /.npmignore 6 | /.travis.yml 7 | /npm-debug.log 8 | /tmp 9 | /src 10 | /test 11 | .eslintrc.json 12 | node_modules 13 | -------------------------------------------------------------------------------- /test/setup.js: -------------------------------------------------------------------------------- 1 | if (typeof process === 'object') { 2 | // Initialize node environment 3 | global.expect = require('chai').expect; 4 | require('mocha-jsdom')(); 5 | } else { 6 | window.expect = window.chai.expect; 7 | window.require = function () { /* noop */ }; 8 | } 9 | -------------------------------------------------------------------------------- /src/tags.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | 'div', 3 | 'p', 4 | 'table', 5 | 'tr', 6 | 'td', 7 | 'th', 8 | 'tbody', 9 | 'thead', 10 | 'tfoot', 11 | 'span', 12 | 'ul', 13 | 'ol', 14 | 'li', 15 | 'a', 16 | 'select', 17 | 'option', 18 | 'input', 19 | 'button', 20 | 'h1', 21 | 'h2', 22 | 'h3', 23 | 'h4', 24 | 'textarea', 25 | 'label' 26 | ]; 27 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "commonjs": true, 5 | "node": true 6 | }, 7 | "extends": "eslint:recommended", 8 | "globals": { 9 | "before": true, 10 | "describe": true, 11 | "expect": true, 12 | "it": true 13 | }, 14 | "rules": { 15 | "indent": [ 16 | "error", 17 | 2 18 | ], 19 | "linebreak-style": [ 20 | "error", 21 | "unix" 22 | ], 23 | "quotes": [ 24 | "error", 25 | "single" 26 | ], 27 | "semi": [ 28 | "error", 29 | "always" 30 | ] 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright © 2016 Michael Hurley 3 | 4 | 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: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | 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. 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rdom", 3 | "version": "0.6.0", 4 | "description": "more compositional dom interface", 5 | "main": "dist/rdom.js", 6 | "directories": { 7 | "example": "example" 8 | }, 9 | "scripts": { 10 | "prebuild": "npm run lint; npm test", 11 | "build": "browserify -r ./src/rdom -s rdom | derequire > dist/rdom.js ", 12 | "postbuild": "uglifyjs dist/rdom.js -m -c unused=false -o dist/rdom.min.js", 13 | "lint": "eslint src/*.js test/*.js", 14 | "release-patch": "xyz --repo git@github.com:buzzdecafe/rdom.git --increment patch", 15 | "release-minor": "xyz --repo git@github.com:buzzdecafe/rdom.git --increment minor", 16 | "release-major": "xyz --repo git@github.com:buzzdecafe/rdom.git --increment major", 17 | "test": "mocha --reporter spec" 18 | }, 19 | "repository": { 20 | "type": "git", 21 | "url": "git+https://github.com/buzzdecafe/rdom.git" 22 | }, 23 | "keywords": [ 24 | "dom", 25 | "functional", 26 | "programming" 27 | ], 28 | "author": "Buzz de Cafe", 29 | "license": "MIT", 30 | "bugs": { 31 | "url": "https://github.com/buzzdecafe/rdom/issues" 32 | }, 33 | "homepage": "https://github.com/buzzdecafe/rdom#readme", 34 | "dependencies": {}, 35 | "devDependencies": { 36 | "browserify": "13.x.x", 37 | "chai": "3.5.x", 38 | "derequire": "^2.0.3", 39 | "eslint": "^2.11.x", 40 | "jsdom": "9.2.x", 41 | "mocha": "2.x.x", 42 | "mocha-jsdom": "1.x.x", 43 | "uglify-js": "2.4.x", 44 | "xyz": "1.0.x" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #rdom 2 | 3 | `rdom` is a simple function that simplifies DOM element creation. 4 | 5 | ##API 6 | 7 | `rdom :: String -> Object -> [DOM] -> DOM` 8 | 9 | `rdom` is a curried function that takes a String document-element name, an object that maps its keys to the 10 | element's attributes, amd an Array of child elements. You may also include a plaintext String in the child elements 11 | Array, and it will be converted to a text node. `rdom` returns a DOM tree, with the specified tag at the root. 12 | 13 | A number of functions are defined as properties on the `rdom` function. These are simply partially applied calls to `rdom` 14 | with just the tag name. This generates functions of the type `Object -> [DOM] -> DOM`. `rdom` includes `div`, `h1`, `input`, `p`, and several others. This is merely a convenience, so it is easy to write code like this: 15 | 16 | 17 | var tree = rdom.div({id: 'main'}, [ 18 | rdom.p({}, ["Imagine your ad here"]), 19 | rdom.ul({className: 'mainlist'}, [ 20 | rdom.li({}, ["First LI"]), 21 | rdom.li({className: 'active'}, ["Second LI"]), 22 | rdom.li({}, ["Third LI"]) 23 | ]) 24 | ]); 25 | 26 | This produces a DOM tree that looks like this: 27 | 28 |
29 |

Imagine your ad here

30 | 35 |
36 | 37 | 38 | ------------------------------ 39 | _Originally inspired by Christian Johansen's talk [Pure, Functional JavaScript](http://vimeo.com/43382919)._ 40 | 41 | -------------------------------------------------------------------------------- /dist/rdom.min.js: -------------------------------------------------------------------------------- 1 | !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.rdom=e()}}(function(){var e,t,n;return function r(e,t,n){function u(i,a){if(!t[i]){if(!e[i]){var f="function"==typeof require&&require;if(!a&&f)return f(i,!0);if(o)return o(i,!0);var c=new Error("Cannot find module '"+i+"'");throw c.code="MODULE_NOT_FOUND",c}var d=t[i]={exports:{}};e[i][0].call(d.exports,function(t){var n=e[i][1][t];return u(n?n:t)},d,d.exports,r,e,t,n)}return t[i].exports}for(var o="function"==typeof require&&require,i=0;i-1}function u(e,t){var n;for(n in t)t.hasOwnProperty(n)&&(r(n)?e[n]=t[n]:e.setAttribute(n,t[n]));return e}function o(e,t){return t.reduce(function(e,t){return"string"==typeof t?e.appendChild(document.createTextNode(t)):e.appendChild(t),e},e)}function i(e,t,n){switch(arguments.length){case 0:return i;case 1:return function a(t,n){switch(arguments.length){case 0:return a;case 1:return function i(n){var r=document.createElement(e);return o(u(r,t),n)};default:var r=document.createElement(e);return o(u(r,t),n)}};case 2:return function f(n){if(0===arguments.length)return f;var r=document.createElement(e);return o(u(r,t),n)};default:var r=document.createElement(e);return o(u(r,t),n)}}var a=e("./tags"),f=["className","innerHTML","name","title"];i.addTags=function c(e,t){return e.reduce(function(e,t){return e[t]=i(t),e},t)},i.addTags(a,i),t.exports=i},{"./tags":1}]},{},[])("/src/rdom")}); -------------------------------------------------------------------------------- /src/rdom.js: -------------------------------------------------------------------------------- 1 | var tags = require('./tags'); 2 | var elProps = ['className', 'innerHTML', 'name', 'title']; 3 | 4 | // helper functions 5 | function isElProp(prop) { 6 | return elProps.indexOf(prop) > -1; 7 | } 8 | 9 | function cfgElem(elem, attrs) { 10 | var prop; 11 | for (prop in attrs) { 12 | if (attrs.hasOwnProperty(prop)) { 13 | if (isElProp(prop)) { 14 | elem[prop] = attrs[prop]; 15 | } else { 16 | elem.setAttribute(prop, attrs[prop]); 17 | } 18 | } 19 | } 20 | return elem; 21 | } 22 | 23 | function mkChildren(elem, children) { 24 | return children.reduce(function(elm, child) { 25 | if (typeof child === 'string') { 26 | elm.appendChild(document.createTextNode(child)); 27 | } else { 28 | elm.appendChild(child); 29 | } 30 | return elm; 31 | }, elem); 32 | } 33 | 34 | function rdom(tag, config, children) { 35 | switch (arguments.length) { 36 | case 0: 37 | return rdom; 38 | case 1: 39 | return function _el1(conf, kids) { 40 | switch (arguments.length) { 41 | case 0: return _el1; 42 | case 1: return function _el1_1(ks) { 43 | var elem = document.createElement(tag); 44 | return mkChildren(cfgElem(elem, conf), ks); 45 | }; 46 | default: 47 | var elem = document.createElement(tag); 48 | return mkChildren(cfgElem(elem, conf), kids); 49 | } 50 | }; 51 | case 2: 52 | return function _el2(cs) { 53 | if (arguments.length === 0) { return _el2; } 54 | var elem = document.createElement(tag); 55 | return mkChildren(cfgElem(elem, config), cs); 56 | }; 57 | default: 58 | var elem = document.createElement(tag); 59 | return mkChildren(cfgElem(elem, config), children); 60 | } 61 | } 62 | 63 | rdom.addTags = function _rdomAddTags(ts, dest) { 64 | return ts.reduce(function(acc, tagName) { 65 | acc[tagName] = rdom(tagName); 66 | return acc; 67 | }, dest); 68 | }; 69 | 70 | rdom.addTags(tags, rdom); 71 | 72 | module.exports = rdom; 73 | -------------------------------------------------------------------------------- /dist/rdom.js: -------------------------------------------------------------------------------- 1 | (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.rdom = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o -1; 36 | } 37 | 38 | function cfgElem(elem, attrs) { 39 | var prop; 40 | for (prop in attrs) { 41 | if (attrs.hasOwnProperty(prop)) { 42 | if (isElProp(prop)) { 43 | elem[prop] = attrs[prop]; 44 | } else { 45 | elem.setAttribute(prop, attrs[prop]); 46 | } 47 | } 48 | } 49 | return elem; 50 | } 51 | 52 | function mkChildren(elem, children) { 53 | return children.reduce(function(elm, child) { 54 | if (typeof child === 'string') { 55 | elm.appendChild(document.createTextNode(child)); 56 | } else { 57 | elm.appendChild(child); 58 | } 59 | return elm; 60 | }, elem); 61 | } 62 | 63 | function rdom(tag, config, children) { 64 | switch (arguments.length) { 65 | case 0: 66 | return rdom; 67 | case 1: 68 | return function _el1(conf, kids) { 69 | switch (arguments.length) { 70 | case 0: return _el1; 71 | case 1: return function _el1_1(ks) { 72 | var elem = document.createElement(tag); 73 | return mkChildren(cfgElem(elem, conf), ks); 74 | }; 75 | default: 76 | var elem = document.createElement(tag); 77 | return mkChildren(cfgElem(elem, conf), kids); 78 | } 79 | }; 80 | case 2: 81 | return function _el2(cs) { 82 | if (arguments.length === 0) { return _el2; } 83 | var elem = document.createElement(tag); 84 | return mkChildren(cfgElem(elem, config), cs); 85 | }; 86 | default: 87 | var elem = document.createElement(tag); 88 | return mkChildren(cfgElem(elem, config), children); 89 | } 90 | } 91 | 92 | rdom.addTags = function _rdomAddTags(ts, dest) { 93 | return ts.reduce(function(acc, tagName) { 94 | acc[tagName] = rdom(tagName); 95 | return acc; 96 | }, dest); 97 | }; 98 | 99 | rdom.addTags(tags, rdom); 100 | 101 | module.exports = rdom; 102 | 103 | },{"./tags":1}]},{},[])("/src/rdom") 104 | }); -------------------------------------------------------------------------------- /test/rdom.js: -------------------------------------------------------------------------------- 1 | require('./setup'); 2 | 3 | describe('rdom', function() { 4 | var rdom; 5 | 6 | before(function() { 7 | rdom = require('..') || window.rdom; 8 | }); 9 | 10 | it('is a function', function() { 11 | expect(rdom).to.be.a('function'); 12 | }); 13 | 14 | it('has the correct interface', function() { 15 | expect(rdom.addTags).to.be.a('function'); 16 | var tags = require('../src/tags'); 17 | tags.forEach(function(tag) { 18 | expect(rdom[tag]).to.be.a('function'); 19 | }); 20 | }); 21 | 22 | it('takes a string and returns a function', function() { 23 | expect(rdom('li')).to.be.a('function'); 24 | expect(rdom('div').length).to.equal(2); 25 | }); 26 | 27 | it('takes a string and a config object and returns a function', function() { 28 | expect(rdom('li', {id: 'testLi'})).to.be.a('function'); 29 | expect(rdom('div', {id: 'testDiv'}).length).to.equal(1); 30 | }); 31 | 32 | it('takes a string, config, and a list of children and returns a DOM tree', function() { 33 | var p = rdom('p', {id: 'pTest', className: 'pclass'}, []); 34 | expect(p).to.be.instanceof(HTMLElement); 35 | expect(p.nodeType).to.equal(1); 36 | expect(p.nodeName).to.equal('P'); 37 | }); 38 | 39 | it('may take an empty list of children', function() { 40 | var p = rdom('p', {}, []); 41 | expect(p.children.length).to.equal(0); 42 | }); 43 | 44 | it('may take DOM elements in its children array', function() { 45 | var p = rdom('p', {}, [document.createElement('span')]); 46 | expect(p.children.length).to.equal(1); 47 | expect(p.children[0].nodeName).to.equal('SPAN'); 48 | }); 49 | 50 | it('may take plain strings in its `children` array that will be converted to text nodes', function() { 51 | var p = rdom('p', {}, ['imagine your ad here']); 52 | expect(p.textContent).to.equal('imagine your ad here'); 53 | }); 54 | 55 | it('takes an array of elements and appends them to the returned element', function() { 56 | var ul = rdom('ul', {id: 'ulTest'}); 57 | var li = rdom('li', {}); 58 | var kids = [li(['First']), li(['Second']), li(['Third'])]; 59 | var list = ul(kids); 60 | expect(list.childElementCount).to.equal(3); 61 | expect(list.children[0]).to.equal(kids[0]); 62 | expect(list.children[1]).to.equal(kids[1]); 63 | expect(list.children[2]).to.equal(kids[2]); 64 | expect(list.innerHTML).to.equal('
  • First
  • Second
  • Third
    • '); 65 | }); 66 | 67 | it('appends any strings in the array to the parent element\'s text', function() { 68 | var p = rdom('p', {}, ['moo ', rdom('a', {href: 'http://moocow.com'}, ['cow']), ', moo']); 69 | expect(p.textContent).to.match(/^moo\s.*, moo$/); 70 | }); 71 | 72 | it('converts the config object to element attributes', function() { 73 | var a = rdom.a({className: 'moo', href: '/something'}, []); 74 | expect(a.className).to.equal('moo'); 75 | expect(a.getAttribute('href')).to.equal('/something'); 76 | }); 77 | 78 | describe('rdom.addTags', function() { 79 | it('adds tags to the object supplied as an argument', function() { 80 | var obj = {}; 81 | rdom.addTags(['p', 'div'], obj); 82 | expect(obj.p).to.be.a('function'); 83 | expect(obj.div({}, ['text here']).textContent).to.equal('text here'); 84 | }); 85 | 86 | it('returns the object passed in as an argument', function() { 87 | var obj = {}; 88 | expect(rdom.addTags(['a', 'b', 'i'], obj)).to.equal(obj); 89 | }); 90 | }); 91 | }); 92 | 93 | --------------------------------------------------------------------------------