occam-dom 4.0.16 → 5.0.2

package/lib/utilities/node.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    default: function() {
+        return _default;
+    },
+    topmostNodeFromOuterNodes: function() {
+        return topmostNodeFromOuterNodes;
+    }
+});
+var _node = /*#__PURE__*/ _interop_require_default(require("../node"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function topmostNodeFromOuterNodes(Class, outerNodes) {
+    if (outerNodes === undefined) {
+        outerNodes = Class; ///
+        Class = _node.default; ///
+    }
+    var nodes = outerNodes; ///
+    orderNodes(nodes);
+    var topmostNode = _node.default.fromNothing(), outerNodeToNodeMap = new WeakMap();
+    outerNodes.forEach(function(outerNode) {
+        var ancestorNodes = outerNode.getAncestorNodes();
+        var parentNode = topmostNode; ///
+        ancestorNodes.some(function(ancestorNode) {
+            var _$outerNode = ancestorNode, node = outerNodeToNodeMap.get(_$outerNode) || null;
+            if (node !== null) {
+                parentNode = node; ///
+                return true;
+            }
+        });
+        var node = Class.fromOuterNode(outerNode), childNode = node; ///
+        parentNode.addChildNode(childNode);
+        outerNodeToNodeMap.set(outerNode, node);
+    });
+    return topmostNode;
+}
+var _default = {
+    topmostNodeFromOuterNodes: topmostNodeFromOuterNodes
+};
+function orderNodes(nodes) {
+    nodes.sort(function(nodeA, nodeB) {
+        var nodeALessThanNodeB = isLessThan(nodeA, nodeB), result = nodeALessThanNodeB ? -1 : +1;
+        return result;
+    });
+}
+function isLessThan(nodeA, nodeB) {
+    var lessThan = null;
+    var ancestorNodesA = ancestorNodesFromNode(nodeA), ancestorNodesB = ancestorNodesFromNode(nodeB), ancestorNodesALength = ancestorNodesA.length, ancestorNodesBLength = ancestorNodesB.length, minimumAncestorNodesLength = Math.min(ancestorNodesALength, ancestorNodesBLength);
+    for(var index = 0; index < minimumAncestorNodesLength; index++){
+        var ancestorNodeA = ancestorNodesA[index], ancestorNodeB = ancestorNodesB[index];
+        if (ancestorNodeA !== ancestorNodeB) {
+            var parentIndex = index - 1, ancestorNodeAParentNode = ancestorNodesA[parentIndex], parentNode = ancestorNodeAParentNode, childNodeA = ancestorNodeA, childNodeB = ancestorNodeB, indexA = parentNode.indexOfChildNode(childNodeA), indexB = parentNode.indexOfChildNode(childNodeB);
+            lessThan = indexA < indexB;
+            break;
+        }
+    }
+    if (lessThan === null) {
+        lessThan = ancestorNodesALength < ancestorNodesBLength;
+    }
+    return lessThan;
+}
+function ancestorNodesFromNode(node) {
+    var ancestorNodes = node.getAncestorNodes();
+    ancestorNodes.unshift(node);
+    ancestorNodes.reverse();
+    return ancestorNodes;
+}
+
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy91dGlsaXRpZXMvbm9kZS5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJcInVzZSBzdHJpY3RcIjtcblxuaW1wb3J0IE5vZGUgZnJvbSBcIi4uL25vZGVcIjtcblxuZXhwb3J0IGZ1bmN0aW9uIHRvcG1vc3ROb2RlRnJvbU91dGVyTm9kZXMoQ2xhc3MsIG91dGVyTm9kZXMpIHtcbiAgaWYgKG91dGVyTm9kZXMgPT09IHVuZGVmaW5lZCkge1xuICAgIG91dGVyTm9kZXMgPSBDbGFzczsgLy8vXG5cbiAgICBDbGFzcyA9IE5vZGU7ICAvLy9cbiAgfVxuXG4gIGNvbnN0IG5vZGVzID0gb3V0ZXJOb2RlczsgLy8vXG5cbiAgb3JkZXJOb2Rlcyhub2Rlcyk7XG5cbiAgY29uc3QgdG9wbW9zdE5vZGUgPSBOb2RlLmZyb21Ob3RoaW5nKCksXG4gICAgICAgIG91dGVyTm9kZVRvTm9kZU1hcCA9IG5ldyBXZWFrTWFwKCk7XG5cbiAgb3V0ZXJOb2Rlcy5mb3JFYWNoKChvdXRlck5vZGUpID0+IHtcbiAgICBjb25zdCBhbmNlc3Rvck5vZGVzID0gb3V0ZXJOb2RlLmdldEFuY2VzdG9yTm9kZXMoKTtcblxuICAgIGxldCBwYXJlbnROb2RlID0gdG9wbW9zdE5vZGU7IC8vL1xuXG4gICAgYW5jZXN0b3JOb2Rlcy5zb21lKChhbmNlc3Rvck5vZGUpID0+IHtcbiAgICAgIGNvbnN0IG91dGVyTm9kZSA9IGFuY2VzdG9yTm9kZSwgLy8vXG4gICAgICAgICAgICBub2RlID0gb3V0ZXJOb2RlVG9Ob2RlTWFwLmdldChvdXRlck5vZGUpIHx8IG51bGw7XG5cbiAgICAgIGlmIChub2RlICE9PSBudWxsKSB7XG4gICAgICAgIHBhcmVudE5vZGUgPSBub2RlOyAgLy8vXG5cbiAgICAgICAgcmV0dXJuIHRydWU7XG4gICAgICB9XG4gICAgfSk7XG5cbiAgICBjb25zdCBub2RlID0gQ2xhc3MuZnJvbU91dGVyTm9kZShvdXRlck5vZGUpLFxuICAgICAgICAgIGNoaWxkTm9kZSA9IG5vZGU7ICAvLy9cblxuICAgIHBhcmVudE5vZGUuYWRkQ2hpbGROb2RlKGNoaWxkTm9kZSk7XG5cbiAgICBvdXRlck5vZGVUb05vZGVNYXAuc2V0KG91dGVyTm9kZSwgbm9kZSk7XG4gIH0pO1xuXG4gIHJldHVybiB0b3Btb3N0Tm9kZTtcbn1cblxuZXhwb3J0IGRlZmF1bHQge1xuICB0b3Btb3N0Tm9kZUZyb21PdXRlck5vZGVzXG59O1xuXG5mdW5jdGlvbiBvcmRlck5vZGVzKG5vZGVzKSB7XG4gIG5vZGVzLnNvcnQoKG5vZGVBLCBub2RlQikgPT4ge1xuICAgIGNvbnN0IG5vZGVBTGVzc1RoYW5Ob2RlQiA9IGlzTGVzc1RoYW4obm9kZUEsIG5vZGVCKSxcbiAgICAgICAgICByZXN1bHQgPSBub2RlQUxlc3NUaGFuTm9kZUIgP1xuICAgICAgICAgICAgICAgICAgICAgLTEgOlxuICAgICAgICAgICAgICAgICAgICAgICArMTtcblxuICAgIHJldHVybiByZXN1bHQ7XG4gIH0pO1xufVxuXG5mdW5jdGlvbiBpc0xlc3NUaGFuKG5vZGVBLCBub2RlQikge1xuICBsZXQgbGVzc1RoYW4gPSBudWxsO1xuXG4gIGNvbnN0IGFuY2VzdG9yTm9kZXNBID0gYW5jZXN0b3JOb2Rlc0Zyb21Ob2RlKG5vZGVBKSxcbiAgICAgICAgYW5jZXN0b3JOb2Rlc0IgPSBhbmNlc3Rvck5vZGVzRnJvbU5vZGUobm9kZUIpLFxuICAgICAgICBhbmNlc3Rvck5vZGVzQUxlbmd0aCA9IGFuY2VzdG9yTm9kZXNBLmxlbmd0aCxcbiAgICAgICAgYW5jZXN0b3JOb2Rlc0JMZW5ndGggPSBhbmNlc3Rvck5vZGVzQi5sZW5ndGgsXG4gICAgICAgIG1pbmltdW1BbmNlc3Rvck5vZGVzTGVuZ3RoID0gTWF0aC5taW4oYW5jZXN0b3JOb2Rlc0FMZW5ndGgsIGFuY2VzdG9yTm9kZXNCTGVuZ3RoKTtcblxuICBmb3IgKGxldCBpbmRleCA9IDA7IGluZGV4IDwgbWluaW11bUFuY2VzdG9yTm9kZXNMZW5ndGg7IGluZGV4KyspIHtcbiAgICBjb25zdCBhbmNlc3Rvck5vZGVBID0gYW5jZXN0b3JOb2Rlc0FbaW5kZXhdLFxuICAgICAgICAgIGFuY2VzdG9yTm9kZUIgPSBhbmNlc3Rvck5vZGVzQltpbmRleF07XG5cbiAgICBpZiAoYW5jZXN0b3JOb2RlQSAhPT0gYW5jZXN0b3JOb2RlQikge1xuICAgICAgY29uc3QgcGFyZW50SW5kZXggPSBpbmRleCAtIDEsXG4gICAgICAgICAgICBhbmNlc3Rvck5vZGVBUGFyZW50Tm9kZSA9IGFuY2VzdG9yTm9kZXNBW3BhcmVudEluZGV4XSxcbiAgICAgICAgICAgIHBhcmVudE5vZGUgPSBhbmNlc3Rvck5vZGVBUGFyZW50Tm9kZSwgLy8vXG4gICAgICAgICAgICBjaGlsZE5vZGVBID0gYW5jZXN0b3JOb2RlQSwgLy8vXG4gICAgICAgICAgICBjaGlsZE5vZGVCID0gYW5jZXN0b3JOb2RlQiwgLy8vXG4gICAgICAgICAgICBpbmRleEEgPSBwYXJlbnROb2RlLmluZGV4T2ZDaGlsZE5vZGUoY2hpbGROb2RlQSksXG4gICAgICAgICAgICBpbmRleEIgPSBwYXJlbnROb2RlLmluZGV4T2ZDaGlsZE5vZGUoY2hpbGROb2RlQik7XG5cbiAgICAgIGxlc3NUaGFuID0gKGluZGV4QSA8IGluZGV4Qik7XG5cbiAgICAgIGJyZWFrO1xuICAgIH1cbiAgfVxuXG4gIGlmIChsZXNzVGhhbiA9PT0gbnVsbCkge1xuICAgIGxlc3NUaGFuID0gKGFuY2VzdG9yTm9kZXNBTGVuZ3RoIDwgYW5jZXN0b3JOb2Rlc0JMZW5ndGgpO1xuICB9XG5cbiAgcmV0dXJuIGxlc3NUaGFuO1xufVxuXG5mdW5jdGlvbiBhbmNlc3Rvck5vZGVzRnJvbU5vZGUobm9kZSkge1xuICBjb25zdCBhbmNlc3Rvck5vZGVzID0gbm9kZS5nZXRBbmNlc3Rvck5vZGVzKCk7XG5cbiAgYW5jZXN0b3JOb2Rlcy51bnNoaWZ0KG5vZGUpO1xuXG4gIGFuY2VzdG9yTm9kZXMucmV2ZXJzZSgpO1xuXG4gIHJldHVybiBhbmNlc3Rvck5vZGVzO1xufSJdLCJuYW1lcyI6WyJ0b3Btb3N0Tm9kZUZyb21PdXRlck5vZGVzIiwiQ2xhc3MiLCJvdXRlck5vZGVzIiwidW5kZWZpbmVkIiwiTm9kZSIsIm5vZGVzIiwib3JkZXJOb2RlcyIsInRvcG1vc3ROb2RlIiwiZnJvbU5vdGhpbmciLCJvdXRlck5vZGVUb05vZGVNYXAiLCJXZWFrTWFwIiwiZm9yRWFjaCIsIm91dGVyTm9kZSIsImFuY2VzdG9yTm9kZXMiLCJnZXRBbmNlc3Rvck5vZGVzIiwicGFyZW50Tm9kZSIsInNvbWUiLCJhbmNlc3Rvck5vZGUiLCJub2RlIiwiZ2V0IiwiZnJvbU91dGVyTm9kZSIsImNoaWxkTm9kZSIsImFkZENoaWxkTm9kZSIsInNldCIsInNvcnQiLCJub2RlQSIsIm5vZGVCIiwibm9kZUFMZXNzVGhhbk5vZGVCIiwiaXNMZXNzVGhhbiIsInJlc3VsdCIsImxlc3NUaGFuIiwiYW5jZXN0b3JOb2Rlc0EiLCJhbmNlc3Rvck5vZGVzRnJvbU5vZGUiLCJhbmNlc3Rvck5vZGVzQiIsImFuY2VzdG9yTm9kZXNBTGVuZ3RoIiwibGVuZ3RoIiwiYW5jZXN0b3JOb2Rlc0JMZW5ndGgiLCJtaW5pbXVtQW5jZXN0b3JOb2Rlc0xlbmd0aCIsIk1hdGgiLCJtaW4iLCJpbmRleCIsImFuY2VzdG9yTm9kZUEiLCJhbmNlc3Rvck5vZGVCIiwicGFyZW50SW5kZXgiLCJhbmNlc3Rvck5vZGVBUGFyZW50Tm9kZSIsImNoaWxkTm9kZUEiLCJjaGlsZE5vZGVCIiwiaW5kZXhBIiwiaW5kZXhPZkNoaWxkTm9kZSIsImluZGV4QiIsInVuc2hpZnQiLCJyZXZlcnNlIl0sIm1hcHBpbmdzIjoiQUFBQTs7Ozs7Ozs7Ozs7SUE2Q0EsT0FFRTtlQUZGOztJQXpDZ0JBLHlCQUF5QjtlQUF6QkE7OzsyREFGQzs7Ozs7O0FBRVYsU0FBU0EsMEJBQTBCQyxLQUFLLEVBQUVDLFVBQVU7SUFDekQsSUFBSUEsZUFBZUMsV0FBVztRQUM1QkQsYUFBYUQsT0FBTyxHQUFHO1FBRXZCQSxRQUFRRyxhQUFJLEVBQUcsR0FBRztJQUNwQjtJQUVBLElBQU1DLFFBQVFILFlBQVksR0FBRztJQUU3QkksV0FBV0Q7SUFFWCxJQUFNRSxjQUFjSCxhQUFJLENBQUNJLFdBQVcsSUFDOUJDLHFCQUFxQixJQUFJQztJQUUvQlIsV0FBV1MsT0FBTyxDQUFDLFNBQUNDO1FBQ2xCLElBQU1DLGdCQUFnQkQsVUFBVUUsZ0JBQWdCO1FBRWhELElBQUlDLGFBQWFSLGFBQWEsR0FBRztRQUVqQ00sY0FBY0csSUFBSSxDQUFDLFNBQUNDO1lBQ2xCLElBQU1MLGNBQVlLLGNBQ1pDLE9BQU9ULG1CQUFtQlUsR0FBRyxDQUFDUCxnQkFBYztZQUVsRCxJQUFJTSxTQUFTLE1BQU07Z0JBQ2pCSCxhQUFhRyxNQUFPLEdBQUc7Z0JBRXZCLE9BQU87WUFDVDtRQUNGO1FBRUEsSUFBTUEsT0FBT2pCLE1BQU1tQixhQUFhLENBQUNSLFlBQzNCUyxZQUFZSCxNQUFPLEdBQUc7UUFFNUJILFdBQVdPLFlBQVksQ0FBQ0Q7UUFFeEJaLG1CQUFtQmMsR0FBRyxDQUFDWCxXQUFXTTtJQUNwQztJQUVBLE9BQU9YO0FBQ1Q7SUFFQSxXQUFlO0lBQ2JQLDJCQUFBQTtBQUNGO0FBRUEsU0FBU00sV0FBV0QsS0FBSztJQUN2QkEsTUFBTW1CLElBQUksQ0FBQyxTQUFDQyxPQUFPQztRQUNqQixJQUFNQyxxQkFBcUJDLFdBQVdILE9BQU9DLFFBQ3ZDRyxTQUFTRixxQkFDRSxDQUFDLElBQ0MsQ0FBQztRQUVwQixPQUFPRTtJQUNUO0FBQ0Y7QUFFQSxTQUFTRCxXQUFXSCxLQUFLLEVBQUVDLEtBQUs7SUFDOUIsSUFBSUksV0FBVztJQUVmLElBQU1DLGlCQUFpQkMsc0JBQXNCUCxRQUN2Q1EsaUJBQWlCRCxzQkFBc0JOLFFBQ3ZDUSx1QkFBdUJILGVBQWVJLE1BQU0sRUFDNUNDLHVCQUF1QkgsZUFBZUUsTUFBTSxFQUM1Q0UsNkJBQTZCQyxLQUFLQyxHQUFHLENBQUNMLHNCQUFzQkU7SUFFbEUsSUFBSyxJQUFJSSxRQUFRLEdBQUdBLFFBQVFILDRCQUE0QkcsUUFBUztRQUMvRCxJQUFNQyxnQkFBZ0JWLGNBQWMsQ0FBQ1MsTUFBTSxFQUNyQ0UsZ0JBQWdCVCxjQUFjLENBQUNPLE1BQU07UUFFM0MsSUFBSUMsa0JBQWtCQyxlQUFlO1lBQ25DLElBQU1DLGNBQWNILFFBQVEsR0FDdEJJLDBCQUEwQmIsY0FBYyxDQUFDWSxZQUFZLEVBQ3JENUIsYUFBYTZCLHlCQUNiQyxhQUFhSixlQUNiSyxhQUFhSixlQUNiSyxTQUFTaEMsV0FBV2lDLGdCQUFnQixDQUFDSCxhQUNyQ0ksU0FBU2xDLFdBQVdpQyxnQkFBZ0IsQ0FBQ0Y7WUFFM0NoQixXQUFZaUIsU0FBU0U7WUFFckI7UUFDRjtJQUNGO0lBRUEsSUFBSW5CLGFBQWEsTUFBTTtRQUNyQkEsV0FBWUksdUJBQXVCRTtJQUNyQztJQUVBLE9BQU9OO0FBQ1Q7QUFFQSxTQUFTRSxzQkFBc0JkLElBQUk7SUFDakMsSUFBTUwsZ0JBQWdCSyxLQUFLSixnQkFBZ0I7SUFFM0NELGNBQWNxQyxPQUFPLENBQUNoQztJQUV0QkwsY0FBY3NDLE9BQU87SUFFckIsT0FBT3RDO0FBQ1QifQ==

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "occam-dom",
   "author": "James Smith",
-  "version": "4.0.16",
+  "version": "5.0.2",
   "license": "MIT, Anti-996",
   "homepage": "https://github.com/djalbat/occam-dom",
   "description": "Occam's DOM related functionality.",
@@ -10,7 +10,8 @@
     "url": "https://github.com/djalbat/occam-dom"
   },
   "dependencies": {
-    "occam-parsers": "^23.0.111"
+    "occam-parsers": "^23.0.114",
+    "occam-query": "^4.1.73"
   },
   "devDependencies": {
     "@swc/core": "^1.5.6",

package/src/constants.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export const EMPTY_STRING = "";

package/src/example/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export const SPACE = 2;
+export const EMPTY_STRING = "";

package/src/example/utilities/query.js

@@ -0,0 +1,21 @@
+"use strict";
+
+import { arrayUtilities } from "necessary";
+import { queryUtilities } from "occam-query";
+
+const { push } = arrayUtilities,
+      { queryByExpressionString } = queryUtilities;
+
+export function queryByExpressions(node, expressions, maximumDepth) {
+  const nodes = expressions.reduce((nodes, expression) => {
+    const expressionString = expression,  ///
+          expressionNodes = queryByExpressionString(node, expressionString, maximumDepth);
+
+    push(nodes, expressionNodes);
+
+    return nodes;
+  }, []);
+
+  return nodes;
+}
+

package/src/example/utilities/token.js

@@ -0,0 +1,19 @@
+"use strict";
+
+export function tokenIndexFromTerminalNodeAndTokens(terminalNode, tokens) {
+  const significantToken = terminalNode.getSignificantToken(),
+        significantTokenIndex = tokens.indexOf(significantToken),
+        tokenIndex = `(${significantTokenIndex})`;
+
+  return tokenIndex;
+}
+
+export function tokenIndexesFromNonTerminalNodeAndTokens(nonTerminalNode, tokens) {
+  const firstSignificantTokenIndex = nonTerminalNode.getFirstSignificantTokenIndex(tokens),
+        lastSignificantTokenIndex = nonTerminalNode.getLastSignificantTokenIndex(tokens),
+        tokenIndexes = (firstSignificantTokenIndex !== lastSignificantTokenIndex) ?
+                        `(${firstSignificantTokenIndex}-${lastSignificantTokenIndex})` :
+                          `(${firstSignificantTokenIndex})`;
+
+  return tokenIndexes;
+}

package/src/example/view/div/sizeable.js

@@ -0,0 +1,12 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import { SizeableDiv } from "easy-layout";
+
+export default withStyle(SizeableDiv)`
+
+  width: 48rem;
+  min-width: 24rem;
+  
+`;

package/src/example/view/input/maximumDepth.js

@@ -0,0 +1,35 @@
+"use strict";
+
+import Input from "../input";
+
+export default class MaximumDepthInput extends Input {
+  getMaximumDepth() {
+    const value = this.getValue(),
+          maximumDepth = Number(value);
+
+    return maximumDepth;
+  }
+
+  setMaximumDepth(maximumDepth) {
+    const value = maximumDepth; ///
+
+    this.setValue(value);
+  }
+
+  parentContext() {
+    const getMaximumDepth = this.getMaximumDepth.bind(this),
+          setMaximumDepth = this.setMaximumDepth.bind(this),
+          setMaximumDepthReadOnly = this.setReadOnly.bind(this); ///;
+
+    return ({
+      getMaximumDepth,
+      setMaximumDepth,
+      setMaximumDepthReadOnly
+    });
+  }
+
+  static defaultProperties = {
+    className: "maximum-depth",
+    spellCheck: "false"
+  };
+}

package/src/example/view/input.js

@@ -0,0 +1,14 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import { Input } from "easy";
+
+export default withStyle(Input)`
+
+  border: 1px solid darkgrey;
+  padding: 0.25rem;
+  font-size: 1.2rem;
+  font-family: monospace;
+
+`;

package/src/example/view/subHeading.js

@@ -0,0 +1,16 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+const SubHeading = withStyle.h2`
+
+  margin: 1rem 0 0.5rem 0;
+  font-size: 2rem;
+  
+  :first-of-type {
+    margin-top: 0;
+  }
+
+`;
+
+export default SubHeading;

package/src/example/view/textarea/content.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import Textarea from "../textarea";
+
+export default class ContentTextarea extends Textarea {
+  getContent() {
+    const value = this.getValue(),
+          content = value; ///
+
+    return content;
+  }
+
+  setContent(content) {
+    const value = content;
+
+    this.setValue(value);
+  }
+
+  parentContext() {
+    const getContent = this.getContent.bind(this),
+          setContent = this.setContent.bind(this);
+
+    return ({
+      getContent,
+      setContent
+    });
+  }
+
+  static defaultProperties = {
+    className: "content",
+    spellCheck: "false"
+  };
+}

package/src/example/view/textarea/expressions.js

@@ -0,0 +1,39 @@
+"use strict";
+
+import Textarea from "../textarea";
+
+import { SPACE } from "../../constants";
+
+export default class ExpressionsTextarea extends Textarea {
+  getExpressions() {
+    const value = this.getValue(),
+          expressionString = value, ///
+          expressions = JSON.parse(expressionString); ///
+
+    return expressions;
+  }
+
+  setExpressions(expressions) {
+    const space = SPACE,
+          replacer = null,
+          expressionsString = JSON.stringify(expressions, replacer, space),
+          value = expressionsString;  ///
+
+    this.setValue(value);
+  }
+
+  parentContext() {
+    const getExpressions = this.getExpressions.bind(this),
+          setExpressions = this.setExpressions.bind(this); ///;
+
+    return ({
+      getExpressions,
+      setExpressions
+    });
+  }
+
+  static defaultProperties = {
+    className: "expressions",
+    spellCheck: "false"
+  };
+}

package/src/example/view/textarea/outerNodes.js

@@ -0,0 +1,48 @@
+"use strict";
+
+import Textarea from "../textarea";
+
+import { EMPTY_STRING } from "../../constants";
+import { tokenIndexFromTerminalNodeAndTokens, tokenIndexesFromNonTerminalNodeAndTokens } from "../../utilities/token"
+
+export default class OuterNodesTextarea extends Textarea {
+  setOuterNodes(outerNodes, tokens) {
+    const nodes = outerNodes, ///
+          value = nodes.reduce((value, node) => {
+            const nodeTerminalNode = node.isTerminalNode();
+
+            if (nodeTerminalNode) {
+              const terminalNode = node,  ///
+                    significantToken = terminalNode.getSignificantToken(),
+                    significantTokenType = significantToken.getType(),
+                    tokenIndex = tokenIndexFromTerminalNodeAndTokens(terminalNode, tokens);
+
+              value = `${value}[${significantTokenType}]${tokenIndex}\n`;
+            } else {
+              const nonTerminalNode = node, ///
+                    ruleName = nonTerminalNode.getRuleName(),
+                    tokenIndexes = tokenIndexesFromNonTerminalNodeAndTokens(nonTerminalNode, tokens);
+
+              value = `${value}${ruleName}${tokenIndexes}\n`;
+            }
+
+            return value;
+          }, EMPTY_STRING);
+
+    this.setValue(value);
+  }
+
+  parentContext() {
+    const setOuterNodes = this.setOuterNodes.bind(this);
+
+    return ({
+      setOuterNodes
+    });
+  }
+
+  static defaultProperties = {
+    className: "outer-nodes",
+    spellCheck: "false",
+    readOnly: true
+  };
+}

package/src/example/view/textarea/parseTree/inner.js

@@ -0,0 +1,24 @@
+"use strict";
+
+import ParseTreeTextarea from "../../textarea/parseTree";
+
+export default class InnerParseTreeTextarea extends ParseTreeTextarea {
+  setParseTree(parseTree) {
+    parseTree.shiftLine();  //
+    parseTree.shiftLine();  //
+
+    super.setParseTree(parseTree);
+  }
+
+  parentContext() {
+    const setInnerParseTree = this.setParseTree.bind(this); ///
+
+    return ({
+      setInnerParseTree
+    });
+  }
+
+  static defaultProperties = {
+    className: "inner"
+  };
+}

package/src/example/view/textarea/parseTree/outer.js

@@ -0,0 +1,17 @@
+"use strict";
+
+import ParseTreeTextarea from "../../textarea/parseTree";
+
+export default class OuterParseTreeTextarea extends ParseTreeTextarea {
+  parentContext() {
+    const setOuterParseTree = this.setParseTree.bind(this); ///
+
+    return ({
+      setOuterParseTree
+    });
+  }
+
+  static defaultProperties = {
+    className: "outer"
+  };
+}

package/src/example/view/textarea/parseTree.js

@@ -0,0 +1,28 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import Textarea from "../textarea";
+
+class ParseTreeTextarea extends Textarea {
+  setParseTree(parseTree) {
+    parseTree.shiftLine();  //
+
+    const parseTreeString = parseTree.asString(),
+          value = parseTreeString;  ///
+
+    this.setValue(value);
+  }
+
+  static defaultProperties = {
+    className: "parse-tree",
+    spellCheck: "false",
+    readOnly: true
+  };
+}
+
+export default withStyle(ParseTreeTextarea)`
+  
+  height: 32rem;
+  
+`;

package/src/example/view/textarea.js

@@ -0,0 +1,18 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import { Textarea } from "easy";
+
+export default withStyle(Textarea)`
+
+  border: 1px solid darkgrey;
+  height: 12rem;
+  resize: vertical;
+  padding: 0.25rem;
+  font-size: 1.2rem;
+  line-height: 1.5rem;
+  white-space: pre;
+  font-family: monospace;
+
+`;

package/src/example/view.js

@@ -0,0 +1,137 @@
+"use strict";
+
+import withStyle from "easy-with-style";  ///
+
+import { Element } from "easy";
+import { nodeUtilities } from "../index" ///
+import { CSSLexer, CSSParser } from "with-style";
+import { RowsDiv, ColumnDiv, ColumnsDiv, VerticalSplitterDiv } from "easy-layout";
+
+import SubHeading from "./view/subHeading";
+import SizeableDiv from "./view/div/sizeable";
+import ContentTextarea from "./view/textarea/content";
+import MaximumDepthInput from "./view/input/maximumDepth";
+import OuterNodesTextarea from "./view/textarea/outerNodes";
+import ExpressionsTextarea from "./view/textarea/expressions";
+import OuterParseTreeTextarea from "./view/textarea/parseTree/outer";
+import InnerParseTreeTextarea from "./view/textarea/parseTree/inner";
+
+import { queryByExpressions } from "./utilities/query";
+
+const { topmostNodeFromOuterNodes: topmostInnerNodeFromOuterNodes } = nodeUtilities;
+
+const cssLexer = CSSLexer.fromNothing(),
+      cssParser = CSSParser.fromNothing();
+
+class View extends Element {
+  keyUpHandler = (event, element) => {
+    const content = this.getContent(),
+          tokens = cssLexer.tokenise(content),
+          node = cssParser.parse(tokens);
+
+    if (node === null) {
+      return;
+    }
+
+    const outerNode = node, ///
+          expressions = this.getExpressions(),
+          maximumDepth = this.getMaximumDepth(),
+          outerNodes = queryByExpressions(outerNode, expressions, maximumDepth),
+          topmostInnerNode = topmostInnerNodeFromOuterNodes(outerNodes),
+          innerNode = topmostInnerNode, ///
+          outerParseTree = outerNode.asParseTree(tokens),
+          innerParseTree = innerNode.asParseTree();
+
+    this.setOuterNodes(outerNodes, tokens); ///
+
+    this.setOuterParseTree(outerParseTree);
+
+    this.setInnerParseTree(innerParseTree);
+  }
+
+  childElements() {
+    return ([
+
+      <ColumnsDiv>
+        <SizeableDiv>
+          <RowsDiv>
+            <SubHeading>
+              Content
+            </SubHeading>
+            <ContentTextarea onKeyUp={this.keyUpHandler} />
+            <SubHeading>
+              Expressions
+            </SubHeading>
+            <ExpressionsTextarea onKeyUp={this.keyUpHandler} />
+            <SubHeading>
+              Maximum depth
+            </SubHeading>
+            <MaximumDepthInput onKeyUp={this.keyUpHandler} />
+            <SubHeading>
+              Outer nodes
+            </SubHeading>
+            <OuterNodesTextarea/>
+          </RowsDiv>
+        </SizeableDiv>
+        <VerticalSplitterDiv />
+        <ColumnDiv>
+          <RowsDiv>
+            <SubHeading>
+              Outer parse tree
+            </SubHeading>
+            <OuterParseTreeTextarea/>
+            <SubHeading>
+              Inner parse tree
+            </SubHeading>
+            <InnerParseTreeTextarea/>
+          </RowsDiv>
+        </ColumnDiv>
+      </ColumnsDiv>
+
+    ]);
+  }
+
+  initialise() {
+    this.assignContext();
+
+    const { initialContent, initialExpressions, initialMaximumDepth } = this.constructor,
+          content = initialContent,  ///
+          maximumDepth = initialMaximumDepth,  ///
+          expressions = initialExpressions;  ///
+
+    this.setContent(content);
+
+    this.setMaximumDepth(maximumDepth);
+
+    this.setExpressions(expressions);
+
+    this.keyUpHandler();  ///
+  }
+
+  static initialContent = `.view {
+  background: red;
+}
+`;
+
+  static initialExpressions = [
+    "//term",
+    "//ruleSet",
+    "//selectors",
+    "//propertyName",
+    "//@identifier"
+  ];
+
+  static initialMaximumDepth = 5;
+
+  static tagName = "div";
+
+  static defaultProperties = {
+    className: "view"
+  };
+}
+
+export default withStyle(View)`
+
+  padding: 1rem;
+  
+`;

package/src/example.js

@@ -0,0 +1,21 @@
+"use strict";
+
+import "juxtapose";
+
+import withStyle from "easy-with-style";  ///
+
+import { Body } from "easy";
+
+import View from "./example/view";
+
+const { renderStyles } = withStyle;
+
+const body = new Body();
+
+renderStyles();
+
+body.mount(
+
+  <View/>
+
+);

package/src/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { default as Node } from "./node";
+export { default as nodeUtilities } from "./utilities/node";