npm - CETEIcean - Versions diffs - 1.7.2 → 1.8.0-beta.1 - Mend

CETEIcean 1.7.2 → 1.8.0-beta.1

Files changed (7) hide show

package/README.md CHANGED Viewed

@@ -52,6 +52,20 @@ new CETEI({
 })
 ```
+### Usage with Node
+CETEIcean can be used on the server by providing a DOM implementation, such as [JSDOM](https://github.com/jsdom/jsdom). You can pass a document object as an option when instantiating CETEIcean.
+```js
+import { JSDOM } from 'jsdom';
+import CETEI from 'CETEIcean';
+const jdom = new JSDOM(`<TEI xmlns="http://www.tei-c.org/ns/1.0" />`, {contentType: 'text/xml'});
+new CETEI({
+  documentObject: jdom.window.document
+})
+```
 ### Other methods
 #### getHTML5( url, callback, perElementFn )

package/package.json CHANGED Viewed

@@ -1,8 +1,9 @@
 {
   "name": "CETEIcean",
-  "version": "1.7.2",
+  "version": "1.8.0-beta.1",
   "description": "JavaScript library to load a TEI XML document and register it as HTML5 custom elements.",
   "main": "src/CETEI.js",
+  "type": "module",
   "keywords": [
     "TEI",
     "XML",
@@ -15,20 +16,26 @@
     "type": "git",
     "url": "https://github.com/TEIC/CETEIcean.git"
   },
+  "exports": {
+    ".": "./src/CETEI.js",
+    "./utilities.js": "./src/utilities.js"
+  },
   "devDependencies": {
     "@babel/core": "^7.15.5",
     "@babel/preset-env": "7.15.6",
     "@rollup/plugin-babel": "^5.3.0",
     "babel-preset-env": "^1.7.0",
     "http-server": "^14.1.1",
+    "jsdom": "^21.1.0",
     "onchange": "^6.1.1",
     "rollup": "^2.57.0",
     "rollup-plugin-terser": "^7.0.2",
     "terser": "^5.14.2"
   },
   "scripts": {
-    "build": "rollup -c rollup.config.js",
+    "build": "npm test && rollup -c rollup.config.js",
     "build:tutorial": "npm run build && cp dist/CETEI.js tutorial/js/CETEI.js",
-    "dev": "npm run build && http-server -p 8888 & onchange src -- npm run build"
+    "dev": "npm run build && http-server -p 8888 & onchange src -- npm run build",
+    "test": "node test/nodeTest.js"
   }
 }

package/src/CETEI.js CHANGED Viewed

@@ -7,6 +7,17 @@ class CETEI {
   constructor(options){
     this.options = options ? options : {}
+    // Set a local reference to the Document object
+    // Determine document in this order of preference: options, window, global
+    this.document = this.options.documentObject ? this.options.documentObject : undefined
+    if (this.document === undefined) {
+      if (typeof window !== 'undefined' && window.document) {
+        this.document = window.document
+      } else if (typeof global !== 'undefined' && global.document) {
+        this.document = global.document
+      }
+    }
     // Bind methods
     this.addBehaviors = addBehaviors.bind(this);
     this.addBehavior = addBehavior.bind(this);
@@ -100,12 +111,7 @@ class CETEI {
     return this.domToHTML5(this.XML_dom, callback, perElementFn);
   }
-  /*
-    Converts the supplied XML DOM into HTML5 Custom Elements. If a callback
-    function is supplied, calls it on the result.
-  */
-  domToHTML5(XML_dom, callback, perElementFn){
+  preprocess(XML_dom, callback, perElementFn) {
     this.els = learnElementNames(XML_dom, this.namespaces);
     let convertEl = (el) => {
@@ -114,9 +120,9 @@ class CETEI {
       let newElement;
       if (this.namespaces.has(el.namespaceURI ? el.namespaceURI : "")) {
         let prefix = this.namespaces.get(el.namespaceURI ? el.namespaceURI : "");
-        newElement = document.createElement(`${prefix}-${el.localName}`);
+        newElement = this.document.createElement(`${prefix}-${el.localName}`);
       } else {
-        newElement = document.importNode(el, false);
+        newElement = this.document.importNode(el, false);
       }
       // Copy attributes; @xmlns, @xml:id, @xml:lang, and
       // @rendition get special handling.
@@ -148,16 +154,18 @@ class CETEI {
       }
       // <head> elements need to know their level
       if (el.localName == "head") {
+        // 1 is XPathResult.NUMBER_TYPE
         let level = XML_dom.evaluate("count(ancestor::*[tei:head])", el, function(ns) {
           if (ns == "tei") return "http://www.tei-c.org/ns/1.0";
-        }, XPathResult.NUMBER_TYPE, null);
+        }, 1, null);
         newElement.setAttribute("data-level", level.numberValue);
       }
       // Turn <rendition scheme="css"> elements into HTML styles
       if (el.localName == "tagsDecl") {
-        let style = document.createElement("style");
+        let style = this.document.createElement("style");
         for (let node of Array.from(el.childNodes)){
-          if (node.nodeType == Node.ELEMENT_NODE && node.localName == "rendition" && node.getAttribute("scheme") == "css") {
+          // nodeType 1 is Node.ELEMENT_NODE
+          if (node.nodeType == 1 && node.localName == "rendition" && node.getAttribute("scheme") == "css") {
             let rule = "";
             if (node.hasAttribute("selector")) {
               //rewrite element names in selectors
@@ -168,7 +176,7 @@ class CETEI {
               rule += node.textContent;
             }
             rule += "\n}\n";
-            style.appendChild(document.createTextNode(rule));
+            style.appendChild(this.document.createTextNode(rule));
           }
         }
         if (style.childNodes.length > 0) {
@@ -185,7 +193,8 @@ class CETEI {
         };
       }
       for (let node of Array.from(el.childNodes)) {
-          if (node.nodeType == Node.ELEMENT_NODE) {
+          // Node.ELEMENT_NODE
+          if (node.nodeType == 1 ) {
               newElement.appendChild(convertEl(node));
           }
           else {
@@ -201,6 +210,27 @@ class CETEI {
     this.dom = convertEl(XML_dom.documentElement);
     this.utilities.dom = this.dom;
+    if (callback) {
+      callback(this.dom, this);
+      if (window) {
+        window.dispatchEvent(ceteiceanLoad);
+      }
+    } else {
+      if (typeof window !== 'undefined') {
+        window.dispatchEvent(ceteiceanLoad);
+      }
+      return this.dom;
+    }
+  }
+  /*
+    Converts the supplied XML DOM into HTML5 Custom Elements. If a callback
+    function is supplied, calls it on the result.
+  */
+  domToHTML5(XML_dom, callback, perElementFn){
+    this.preprocess(XML_dom, null, perElementFn);
     this.applyBehaviors();
     this.done = true;
     if (callback) {
@@ -209,7 +239,7 @@ class CETEI {
         window.dispatchEvent(ceteiceanLoad);
       }
     } else {
-      if (window) {
+      if (typeof window !== 'undefined') {
         window.dispatchEvent(ceteiceanLoad);
       }
       return this.dom;
@@ -223,7 +253,7 @@ class CETEI {
       c.processPage();
   */
   processPage() {
-    this.els = learnCustomElementNames(document);
+    this.els = learnCustomElementNames(this.document);
     this.applyBehaviors();
   }
@@ -348,7 +378,7 @@ getFallback(behaviors, fn) {
     if (behaviors[fn] instanceof Function) {
       return behaviors[fn];
     } else {
-      return decorator(behaviors[fn]);
+      return this.decorator(behaviors[fn]);
     }
   }
 }
@@ -368,9 +398,10 @@ getHandler(behaviors, fn) {
 }
 insert(elt, strings) {
-  let span = document.createElement("span");
+  let span = this.document.createElement("span");
   for (let node of Array.from(elt.childNodes)) {
-    if (node.nodeType === Node.ELEMENT_NODE && !node.hasAttribute("data-processed")) {
+    // nodeType 1 is Node.ELEMENT_NODE
+    if (node.nodeType === 1 && !node.hasAttribute("data-processed")) {
       this.processElement(node);
     }
   }
@@ -402,21 +433,13 @@ processElement(elt) {
     }
   }
   for (let node of Array.from(elt.childNodes)) {
-    if (node.nodeType === Node.ELEMENT_NODE) {
+    // nodeType 1 is Node.ELEMENT_NODE
+    if (node.nodeType === 1) {
       this.processElement(node);
     }
   }
 }
-// Given a qualified name (e.g. tei:text), return the element name
-tagName(name) {
-  if (name.includes(":"), 1) {
-    return name.replace(/:/,"-").toLowerCase();
-  } else {
-    return "ceteicean-" + name.toLowerCase();
-  }
-}
 template(str, elt) {
   let result = str;
   if (str.search(/\$(\w*)(@([a-zA-Z:]+))/ )) {
@@ -439,7 +462,7 @@ template(str, elt) {
 // Define or apply behaviors for the document
 applyBehaviors() {
-  if (window.customElements) {
+  if (typeof window !== 'undefined' && window.customElements) {
     this.define.call(this, this.els);
   } else {
     this.fallback.call(this, this.els);
@@ -453,37 +476,8 @@ applyBehaviors() {
 */
 define(names) {
   for (let name of names) {
-    try {
-      const fn = this.getHandler(this.behaviors, name);
-      window.customElements.define(this.tagName(name), class extends HTMLElement {
-        constructor() {
-          super();
-          if (!this.matches(":defined")) { // "Upgraded" undefined elements can have attributes & children; new elements can't
-            if (fn) {
-              fn.call(this);
-            }
-            // We don't want to double-process elements, so add a flag
-            this.setAttribute("data-processed", "");
-          }
-        }
-        // Process new elements when they are connected to the browser DOM
-        connectedCallback() {
-          if (!this.hasAttribute("data-processed")) {
-            if (fn) {
-              fn.call(this);
-            }
-            this.setAttribute("data-processed", "");
-          }
-        };
-      });
-    } catch (error) {
-      // When using the same CETEIcean instance for multiple TEI files, this error becomes very common.
-      // It's muted by default unless the debug option is set.
-      if (this.debug) {
-          console.log(this.tagName(name) + " couldn't be registered or is already registered.");
-          console.log(error);
-      }
-    }
+    const fn = this.getHandler(this.behaviors, name);
+    utilities.defineCustomElement(name, fn, this.debug);
   }
 }
@@ -496,15 +490,15 @@ define(names) {
 */
 fallback(names) {
   for (let name of names) {
-    let fn = getFallback(this.behaviors, name);
+    let fn = this.getFallback(this.behaviors, name);
     if (fn) {
       for (let elt of Array.from((
           this.dom && !this.done
           ? this.dom
-          : document
-        ).getElementsByTagName(tagName(name)))) {
+          : this.document
+        ).getElementsByTagName(utilities.tagName(name)))) {
         if (!elt.hasAttribute("data-processed")) {
-          append(fn, elt);
+          this.append(fn, elt);
         }
       }
     }
@@ -530,7 +524,7 @@ fallback(names) {
       }
     } else {
       setTimeout(function() {
-        let h = document.querySelector(window.decodeURI(window.location.hash));
+        let h = this.document.querySelector(window.decodeURI(window.location.hash));
         if (h) {
           h.scrollIntoView();
         }
@@ -541,7 +535,7 @@ fallback(names) {
 }
 try {
-  if (window) {
+  if (typeof window !== 'undefined') {
       window.CETEI = CETEI;
       window.addEventListener("beforeunload", CETEI.savePosition);
       var ceteiceanLoad = new Event("ceteiceanload");
@@ -551,4 +545,4 @@ try {
   console.log(e);
 }
-export default CETEI
+export default CETEI;

package/src/defaultBehaviors.js CHANGED Viewed

@@ -27,16 +27,18 @@ export default {
     "list": [
       // will only run on a list where @type="gloss"
       ["[type=gloss]", function(elt) {
-        let dl = document.createElement("dl");
+        const doc = elt.ownerDocument;
+        let dl = doc.createElement("dl");
         for (let child of Array.from(elt.children)) {
-          if (child.nodeType == Node.ELEMENT_NODE) {
+          // nodeType 1 is Node.ELEMENT_NODE
+          if (child.nodeType == 1) {
             if (child.localName == "tei-label") {
-              let dt = document.createElement("dt");
+              let dt = doc.createElement("dt");
               dt.innerHTML = child.innerHTML;
               dl.appendChild(dt);
             }
             if (child.localName == "tei-item") {
-              let dd = document.createElement("dd");
+              let dd = doc.createElement("dd");
               dd.innerHTML = child.innerHTML;
               dl.appendChild(dd);
             }
@@ -48,25 +50,26 @@ export default {
     "note": [
       // Make endnotes
       ["[place=end]", function(elt){
+        const doc = elt.ownerDocument;
         if (!this.noteIndex){
           this["noteIndex"] = 1;
         } else {
           this.noteIndex++;
         }
         let id = "_note_" + this.noteIndex;
-        let link = document.createElement("a");
+        let link = doc.createElement("a");
         link.setAttribute("id", "src" + id);
         link.setAttribute("href", "#" + id);
         link.innerHTML = this.noteIndex;
-        let content = document.createElement("sup");
+        let content = doc.createElement("sup");
         content.appendChild(link);
-        let notes = this.dom.querySelector("ol.notes");
+        let notes = doc.querySelector("ol.notes");
         if (!notes) {
-          notes = document.createElement("ol");
+          notes = doc.createElement("ol");
           notes.setAttribute("class", "notes");
           this.dom.appendChild(notes);
         }
-        let note = document.createElement("li");
+        let note = doc.createElement("li");
         note.id = id;
         note.innerHTML = elt.innerHTML
         notes.appendChild(note);
@@ -79,15 +82,17 @@ export default {
     },
     "title": [
       ["tei-titlestmt>tei-title", function(elt) {
-        let title = document.createElement("title");
+        const doc = elt.ownerDocument;
+        let title = doc.createElement("title");
         title.innerHTML = elt.innerText;
-        document.querySelector("head").appendChild(title);
+        doc.querySelector("head").appendChild(title);
       }]
     ],
   },
   "teieg": {
     "egXML": function(elt) {
-      let pre = document.createElement("pre");
+      const doc = elt.ownerDocument;
+      let pre = doc.createElement("pre");
       let content = this.serialize(elt, true).replace(/</g, "&lt;");
       let ws = content.match(/^[\t ]+/);
       if (ws) {

package/src/utilities.js CHANGED Viewed

@@ -16,8 +16,12 @@ export function getOrdinality(elt, name) {
   out child elements introduced by CETEIcean.
 */
 export function copyAndReset(node) {
+  const doc = node.ownerDocument;
   let clone = (n) => {
-    let result = n.nodeType === Node.ELEMENT_NODE?document.createElement(n.nodeName):n.cloneNode(true);
+    // nodeType 1 is Node.ELEMENT_NODE
+    let result = n.nodeType === 1
+      ? doc.createElement(n.nodeName)
+      : n.cloneNode(true);
     if (n.attributes) {
       for (let att of Array.from(n.attributes)) {
         if (att.name !== "data-processed") {
@@ -26,12 +30,14 @@ export function copyAndReset(node) {
       }
     }
     for (let nd of Array.from(n.childNodes)){
-      if (nd.nodeType == Node.ELEMENT_NODE) {
+      // nodeType 1 is Node.ELEMENT_NODE
+      if (nd.nodeType == 1) {
         if (!n.hasAttribute("data-empty")) {
           if (nd.hasAttribute("data-original")) {
             for (let childNode of Array.from(nd.childNodes)) {
               let child = result.appendChild(clone(childNode));
-              if (child.nodeType === Node.ELEMENT_NODE && child.hasAttribute("data-origid")) {
+              // nodeType 1 is Node.ELEMENT_NODE
+              if (child.nodeType === 1 && child.hasAttribute("data-origid")) {
                 child.setAttribute("id", child.getAttribute("data-origid"));
                 child.removeAttribute("data-origid");
               }
@@ -64,14 +70,16 @@ export function first(urls) {
   with display set to "none".
 */
 export function hideContent(elt, rewriteIds = true) {
+  const doc = elt.ownerDocument;
   if (elt.childNodes.length > 0) {
-    let hidden = document.createElement("span");
+    let hidden = doc.createElement("span");
     elt.appendChild(hidden);
     hidden.setAttribute("hidden", "");
     hidden.setAttribute("data-original", "");
     for (let node of Array.from(elt.childNodes)) {
       if (node !== hidden) {
-        if (node.nodeType === Node.ELEMENT_NODE) {
+        // nodeType 1 is Node.ELEMENT_NODE
+        if (node.nodeType === 1) {
           node.setAttribute("data-processed", "");
           for (let e of node.querySelectorAll("*")) {
             e.setAttribute("data-processed", "");
@@ -148,7 +156,8 @@ export function serialize(el, stripElt, ws) {
   let ignorable = (txt) => {
     return !(/[^\t\n\r ]/.test(txt));
   }
-  if (!stripElt && el.nodeType == Node.ELEMENT_NODE) {
+  // nodeType 1 is Node.ELEMENT_NODE
+  if (!stripElt && el.nodeType == 1) {
     if ((typeof ws === "string") && ws !== "") {
       str += "\n" + ws + "<";
     } else  {
@@ -173,18 +182,21 @@ export function serialize(el, stripElt, ws) {
   }
   //TODO: Be smarter about skipping generated content with hidden original
   for (let node of Array.from(el.childNodes)) {
+    // nodeType 1 is Node.ELEMENT_NODE
+    // nodeType 7 is Node.PROCESSING_INSTRUCTION_NODE
+    // nodeType 8 is Node.COMMENT_NODE
     switch (node.nodeType) {
-      case Node.ELEMENT_NODE:
+      case 1:
         if (typeof ws === "string") {
-          str += this.serialize(node, false, ws + "  ");
+          str += serialize(node, false, ws + "  ");
         } else {
-          str += this.serialize(node, false, ws);
+          str += serialize(node, false, ws);
         }
         break;
-      case Node.PROCESSING_INSTRUCTION_NODE:
+      case 7:
         str += "<?" + node.nodeValue + "?>";
         break;
-      case Node.COMMENT_NODE:
+      case 8:
         str += "<!--" + node.nodeValue + "-->";
         break;
       default:
@@ -214,3 +226,50 @@ export function unEscapeEntities(str) {
             .replace(/&apos;/, "'")
             .replace(/&amp;/, "&");
 }
+// Given a qualified name (e.g. tei:text), return the element name
+export function tagName(name) {
+  if (name.includes(":"), 1) {
+    return name.replace(/:/,"-").toLowerCase();
+  } else {
+    return "ceteicean-" + name.toLowerCase();
+  }
+}
+export function defineCustomElement(name, behavior = null, debug = false) {
+  /*
+  Registers the list of elements provided with the browser.
+  Called by makeHTML5(), but can be called independently if, for example,
+  you've created Custom Elements via an XSLT transformation instead.
+  */
+  try {
+    window.customElements.define(tagName(name), class extends HTMLElement {
+      constructor() {
+        super();
+        if (!this.matches(":defined")) { // "Upgraded" undefined elements can have attributes & children; new elements can't
+          if (behavior) {
+            behavior.call(this);
+          }
+          // We don't want to double-process elements, so add a flag
+          this.setAttribute("data-processed", "");
+        }
+      }
+      // Process new elements when they are connected to the browser DOM
+      connectedCallback() {
+        if (!this.hasAttribute("data-processed")) {
+          if (behavior) {
+            behavior.call(this);
+          }
+          this.setAttribute("data-processed", "");
+        }
+      };
+    });
+  } catch (error) {
+    // When using the same CETEIcean instance for multiple TEI files, this error becomes very common.
+    // It's muted by default unless the debug option is set.
+    if (debug) {
+        console.log(tagName(name) + " couldn't be registered or is already registered.");
+        console.log(error);
+    }
+  }
+}

package/test/externalgetTest.html CHANGED Viewed

@@ -20,7 +20,6 @@
           CETEIcean.makeHTML5(TEI, function(data) {
             document.getElementById("TEI").appendChild(data);
-            CETEIcean.addStyle(document, data);
           });
         }
       };

package/test/nodeTest.js ADDED Viewed

@@ -0,0 +1,24 @@
+import { JSDOM } from 'jsdom';
+import CETEI from '../src/CETEI.js';
+const jdom = new JSDOM(`<TEI xmlns="http://www.tei-c.org/ns/1.0"><div>test</div></TEI>`, {contentType: 'text/xml'});
+const teiDoc = jdom.window.document;
+const test = () => {
+  console.log('Get HTML5 from JSDOM');
+  const processedTEI = (new CETEI({documentObject: teiDoc})).domToHTML5(teiDoc);
+  if (processedTEI) {
+    console.log(' > pass');
+  } else {
+    console.log(' > fail');
+    return;
+  }
+  console.log('Check content');
+  if (processedTEI.querySelector("tei-div")) {
+    console.log(' > pass');
+  } else {
+    console.log(' > fail');
+  }
+};
+test();