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

CETEIcean 1.7.2 → 1.8.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

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();