DomEdit

A declarative DOM editor.

Example

Install

npm install domedit

Run

CLI

domedit -f mods-file html-file

Gulp

var domedit = require('domedit');

// For each html file html/**/x.html,
// apply file mods/**/x.mods, creating file dist/**/x.html.
gulp.task('domedit', function() {
  return gulp.src(['html/**/*.html')
    .pipe(domedit({modsdir: 'mods'}))
    .pipe(gulp.dest('./dist'));
});

The argument to the domedit function may be any of the following:

• {modsfile: "filename"}: A string containing the name of the mods file.
• {modsfile: function()}: A function that takes a file name and returns a mods file name. The function is passed two arguments: the file basename (e.g. x), and the file full name (e.g. blah/blah/blah/x.html).
• {modsfile: {basename:modname, ...}}: An object with file basenames as properties and mods file names as property values.
• {modsdir: "dirname"}: A string containing the name of the mods file base directory. Mods files are selected by matching their relative path with the relative path of the HTML file and by matching their basename with the basename of the HTML file. Mods files must have the suffix '.mods'.

Program API

var domedit = require('domedit');
var editedHtml = domedit(html, mods{, log});
    // html may be a filename or a string, and may be complete or partial HTML
    // mods is a mods object
    // log defaults to console.warn

Mods file syntax

The DomEdit mods file is a JSON file containing a single object. Each property of the object is a CSS selector that may match one or more elements within the HTML file. Each selector property value is an object containing a set of changes to apply to each matched element. Each change consists of a directive and a value.

Mods file directives

Notes

• HTML elements used within a directive must be complete (with both start and end tags).
• Selectors and directives have no sequence. Do not depend on sequence of operations.
• All discards (including discard-attr(s)) are deferred until after all other edits are run, so that discards do not break selectors.

TODO

• Support text replacement (s/x/y/{g}) for attribute values and content.
• Support DOM range selection for a subset of directives.
• Support array type as top level of JSON file for sequenced operations.