bitwrench.js is a javascript library for for creating quick demos with almost no depedancies. With bitwrench one can create web pages and components with pure json or javascript dictionaries including handlers (e.g. onclick="…code.." ==> onclick:function_ref, css , etc. ) bitwrench.js also has handyman functions such as loremIpsum generation, ranged random numbers and interpolaters, and color blenders. Use it for throwing up quick web pages which don't depend on any server side framework but need a little prettyifcation or for visualizing quick data. For example when debugging C/C++ embedded projects where we don't want to clutter the build dirs with lots of "weird web stuff" - just write a simple HTML page with bitwrench and still load and view raw text files, JSON, arrays and other bits of embedded files with no extra dependancies.
For those used to modern frameworks such as react / vue / svelte etc. bitwrench.js comes from a pre 2011 time period - so it has more of a jquery like feel, but with a declaritve syntax. See example code and page below for more. bitwrench.js does work in older browsers such Internet Explorer (v7 and later).
There is no great structure here, just a bunch of kitchen sink things that seemed to be handy in alot of quick web dev situations. All non-dom specific calls can be run either server side or client side.
A minified form bitwrench.min.js is provided with identical functionality
See the quick docs here: bitwrench quick docs
other examples here: bitwrench examples
#Installation (server side)
npm install bitwrench --save
//usage in nodejs
var bw = require('./bitwrench.js'); //adds to current scope
var s = bw.html(["div",{"class":"foo"},"This is some HTML"]); // now... ===> s = "<div class='foo'>This is some HTML</div>
In the browser bitwrench is loaded like any script library. Note that parameters can be passed to bitwrench to control the loading process. bitwrench generates its own default css from javascript and loads those. You can see these statically in the bitwrench.css file (note that bitwrench.css can also be used standalone without the bitwrench.js library). Example Page source code here:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../bitwrench.js" ></script>
</head>
<body class="bw-def-page-setup bw-font-sans-serif">
<script>
var htmlData = {c: //for more on the format, see docs github.com/deftio/bitwrench
[
["h1" ,{"class":"bw-h1"},"Bitwrench Test Area" ],
"bitwrench version: "+bw.version().version +"<br><br>",
["div",{"class":"foo"} ,"This page has HTML content which is entirely written as Javascript objects (JSON-like but with support for functions) by content using "+bw.html(["a",{href:"https://github.com/deftio/bitwrench"},"bitwrench.js"])+". Bitwrench has built-in grids, tables,headings, and other quick-n-dirty html prototyping tasks. Bitwrench html generation runs either client or server side."],
"<hr>",
["h2","Lorem Ipsum Generator"],
"Good for testing simple layout ideas.<br><br>",
["div",{},bw.loremIpsum(230)],
"<hr>",
["h2",{},"Sample Content with 3 Columns"],
["div",{"class":"bw-row"},
[
["div",{"class":"bw-col-4 bw-left "},"<h3>Left justified</h3>"+bw.loremIpsum(95)], //mix text and html freely
["div",{"class":"bw-col-4 bw-center bw-pad1"},"<h3>Centered</h3>"+bw.loremIpsum(95,3)],
["div",{"class":"bw-col-4 bw-right "},"<h3>Right justified</h3>"+bw.loremIpsum(95,2)],
],
],
"<br><hr>",
["h2", {}, "Example Sortable Table"],
bw.htmlTable( // json to table (note table data can be functions as well)
[
["Name","Age", "Prof", "Fav Color"], // just an 2D array
["Sue", 34, "Engineer", {a:{style:"color:red"},c:"red"}], // inline json-html objects
["Bob" ,35, "Teacher", {a:{style:"color:green"},c:"green"}],
["Vito",23, "Mechanic", {a:{style:"color:blue",onclick:"alert('blue!')"},c:"blue"}],
["Hank",73, "Retired", {a:{style:"color:purple"},c:"purple"}]
],{sortable:true}),
"<br><hr>",
["h2",{},"Sample Buttons"],
"These buttons have function handlers attached.<br><br>",
["button",{onclick:"alert('button pressed!')"},"Alert Button"], // staight js
" ",
["button",{onclick:myFunc},"Time Button"], // bitwrench maps and registers event functions
"<br><hr>",
["h2","Built in Headings"],
[1,2,3,4,5,6].map( function(x){return bw.html(["h"+x,"Heading "+x])}).join(""), // Headings
"<br><hr>",
["h2","Grid System (responsive)"],
"Grid system (just uses css so can use either bitwrench.js loader or just bitwrench.css with no javascript. Use -fluid for responsive<br><br>",
["style",{},"\n.boxEv {background-color: #aaa; height: 30px; border-radius:5px; border:1px solid black;}\n.boxOd {background-color: #ddd; height:30px; border-radius:5px;border:1px solid black;;}\n"], // some styles (note bw has CSS generation shown in another example)
["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-1 boxEv"},c:"bw-col-1"},{a:{class:"bw-col-1 boxOd"},c:"bw-col-1"},{a:{class:"bw-col-1 boxEv"},c:"bw-col-1"},{a:{class:"bw-col-1 boxOd"},c:"bw-col-1"},{a:{class:"bw-col-1 boxEv"},c:"bw-col-1"},{a:{class:"bw-col-1 boxOd"},c:"bw-col-1"},{a:{class:"bw-col-1 boxEv"},c:"bw-col-1"},{a:{class:"bw-col-1 boxOd"},c:"bw-col-1"},{a:{class:"bw-col-1 boxEv"},c:"bw-col-1"},{a:{class:"bw-col-1 boxOd"},c:"bw-col-1"},{a:{class:"bw-col-1 boxEv"},c:"bw-col-1"},{a:{class:"bw-col-1 boxOd"},c:"bw-col-1"}]],
["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-2 boxEv"},c:"bw-col-2"},{a:{class:"bw-col-2 boxOd"},c:"bw-col-2"},{a:{class:"bw-col-2 boxEv"},c:"bw-col-2"},{a:{class:"bw-col-2 boxOd"},c:"bw-col-2"},{a:{class:"bw-col-2 boxEv"},c:"bw-col-2"},{a:{class:"bw-col-2 boxOd"},c:"bw-col-2"}]],
["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-3 boxEv"},c:"bw-col-3"},{a:{class:"bw-col-3 boxOd"},c:"bw-col-3"},{a:{class:"bw-col-3 boxEv"},c:"bw-col-3"},{a:{class:"bw-col-3 boxOd"},c:"bw-col-3"}]],
["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-4 boxEv"},c:"bw-col-4"},{a:{class:"bw-col-4 boxOd"},c:"bw-col-4"},{a:{class:"bw-col-4 boxEv"},c:"bw-col-4"}]],
["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-5 boxEv"},c:"bw-col-5"},{a:{class:"bw-col-7 boxOd"},c:"bw-col-7"}]],
["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-6 boxEv"},c:"bw-col-6"},{a:{class:"bw-col-6 boxOd"},c:"bw-col-6"}]],
["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-7 boxEv"},c:"bw-col-7"},{a:{class:"bw-col-5 boxOd"},c:"bw-col-5"}]],
["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-8 boxEv"},c:"bw-col-8"},{a:{class:"bw-col-4 boxOd"},c:"bw-col-4"}]],
["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-9 boxEv"},c:"bw-col-9"},{a:{class:"bw-col-3 boxOd"},c:"bw-col-3"}]],
["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-10 boxEv"},c:"bw-col-10"},{a:{class:"bw-col-2 boxOd"},c:"bw-col-2"}]],
["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-11 boxEv"},c:"bw-col-11"},{a:{class:"bw-col-1 boxOd"},c:"bw-col-1"}]],
["div",{class:"bw-row bw-center"},[{a:{class:"bw-col-12 boxEv"},c:"bw-col-12"}]],
"<br><hr>",
["h2",{},"Simple Sign"],
["div",{style:"padding:10%; border:1px solid black;"},bw.htmlSign("This is a big sign!")],
"<br><hr>",
["h2",{},"Tabbed Content"],
bw.htmlTabs([
["Tab1",bw.loremIpsum(300)],
["Tab2",bw.loremIpsum(300,20)],
["Tab3",bw.loremIpsum(300,50)]],{tab_atr:{style:""}}) ,
"<br>",
]};
bw.DOMInsertElement("body",bw.html(htmlData),true);
function myFunc(x){return x.innerHTML = (new Date()).toLocaleTimeString();} // button function
bw.DOMInsertElement("head",bw.html(bw.htmlFavicon("\u266C","teal"))); // insert a favicon on the top tab of the page, "X" for a single letter
bw.DOMInsertElement("head",bw.html({t:"title",c:"Bitwrench HTML Gen "})); // insert a page title on the browser tab
</script>
</body>
</html>
all source is at github:
bitwrench on github
bitwrench uses eslint for static code checking and analysis. Due to bitwrench's age we've kept ";" as a required part of the linting process. After running lint you should see no errors or warnings.
npm install eslint --save-dev
./node_modules/.bin/eslint --init
Now run the lint test like this:
npm run lint
bitwrench is tested with the mocha framework installed locally using npm along with instanbul for code / line coverage
npm install mocha --save-dev mocha
Run the tests as follows:
npm run test
bitwrench is released under the OSI Approved FreeBSD 2-clause license
see LICENSE.txt file