gaddomnit
v0.3.1
Published
Serialize the DOM into a standalone HTML file.
Readme
Gad Domnit!
Web developers, curse rendering issues no more! Reduce the number of expletives needed when dealing with bug reports by including the exact state of every HTML element in the DOM into a single, inspectable file.
Also useful for a number of other family-friendly uses, including saving any webpage into a single file.
Features
Removes Dependencies All dynamic resources (<script>, <link>) are changed to prevent them from modifying the
document.
| DOM | Serialized |
| --- | ---------- |
| <script src="main.js"></script> | <script data-originalSrc="main.js"></script> |
Computes Style The style of each element is computed and saved, ensuring that content is styled the same when opened.
| DOM | Serialized |
| --- | ---------- |
| <style>div {height: 2em;}</style> <div style="width: 50%"></div> | <style></style> <div style="height: 2em; width: 50%;" data-originalStyle="width: 50%;"></div> |
Extendable Domnit is written in modular, object-oriented code. The existing functionality can be easily changed, and new modifications can be added.
Domnit = require "gaddomnit"
ElementSerializer = Domnit.ElementSerializer
count = 0
class DivSerializer extends ElementSerializer
update: ->
super()
this.el.addAttribute "data-count", ++count
class MySerializer extends Domnit
divSerializer: DivSerializer(Yes, that's a complete example.)
Demonstration
bootstrap.html A demonstration or serialization using components from the Bootstrap library.
codemirror.html A demonstration of using Domnit to debug a rendering issue when using the CodeMirror editor.
Installation
Install gaddomnit via NPM or directly from RawGit:
<script src="https://cdn.rawgit.com/rweda/gaddomnit/v0.3.1/public/domnit-universal.min.js"></script>The universal build should work as a standalone script, via RequireJS, or via CommonJS/NPM.
It bundles all of the dependencies, and should work out of the box.
Alternatively, specify -browser to only get RequireJS syntax, -node for only CommonJS, or no suffix at all to get
a raw script without any loader.
Add .nolib immediately after the syntax specification to load dependencies via RequireJS/CommonJS (or browser globals
if you aren't using a module loader).
Usage
// require(["domnit"], function(Domnit) {
// Domnit = require("gaddomnit");
var domnit = new Domnit({});
domnit.serialize(document.body);
// -> "<body style='display: block'>...</body>"After loading Domnit, create a new Domnit object, optionally passing an object with
configuration options.
Then call Domnit#serialize with an Element to
serialize, which returns a standalone string representing the element and all it's children.
See Domnit class documentation for the full API as well as information on extending Domnit's features.