Add support for namespaces

wooorm · wooorm · commit febe0575f3e5 · 2019-05-27T13:42:35.000+02:00
…and additionally:

*   Rewrite module
*   100% coverage
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ npm-debug.log
 yarn-error.log
 .DS_Store
 /dist
+/coverage
diff --git a/package.json b/package.json
@@ -25,7 +25,8 @@
     "dist/"
   ],
   "dependencies": {
-    "hastscript": "^5.0.0"
+    "hastscript": "^5.0.0",
+    "web-namespaces": "^1.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -45,5 +46,19 @@
     "lint": "eslint .",
     "test": "jest",
     "test:dev": "jest --watchAll"
+  },
+  "jest": {
+    "collectCoverage": true,
+    "coveragePathIgnorePatterns": [
+      "/src/utils.js"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "branches": 100,
+        "functions": 100,
+        "lines": 100,
+        "statements": 100
+      }
+    }
   }
 }
diff --git a/src/__fixtures__/svg/index.html b/src/__fixtures__/svg/index.html
@@ -2,5 +2,15 @@
   <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <circle cx="60"  cy="60" r="50" fill="red"/>
     <circle cx="170" cy="60" r="50" fill="green"/>
+    <switch fill="red">
+      <text systemLanguage="en">en</text>
+      <text>other</text>
+    </switch>
+    <foreignObject x="20" y="20" width="160" height="160">
+      <!-- In the context of SVG embedded in an HTML document, the XHTML
+      namespace could be omitted, but it is mandatory in the context of an SVG
+      document -->
+      <div width="100" xmlns="http://www.w3.org/1999/xhtml">Lorem ipsum.</div>
+    </foreignObject>
   </svg>
 </div>
diff --git a/src/__fixtures__/svg/index.json b/src/__fixtures__/svg/index.json
@@ -30,8 +30,8 @@
                   "type": "element",
                   "tagName": "svg",
                   "properties": {
-                    "width": 230,
-                    "height": 120,
+                    "width": "230",
+                    "height": "120",
                     "xmlns": "http://www.w3.org/2000/svg",
                     "xmlnsXLink": "http://www.w3.org/1999/xlink"
                   },
@@ -66,6 +66,103 @@
                       },
                       "children": []
                     },
+                    {
+                      "type": "text",
+                      "value": "\n    "
+                    },
+                    {
+                      "type": "element",
+                      "tagName": "switch",
+                      "properties": {
+                        "fill": "red"
+                      },
+                      "children": [
+                        {
+                          "type": "text",
+                          "value": "\n      "
+                        },
+                        {
+                          "type": "element",
+                          "tagName": "text",
+                          "properties": {
+                            "systemLanguage": [
+                              "en"
+                            ]
+                          },
+                          "children": [
+                            {
+                              "type": "text",
+                              "value": "en"
+                            }
+                          ]
+                        },
+                        {
+                          "type": "text",
+                          "value": "\n      "
+                        },
+                        {
+                          "type": "element",
+                          "tagName": "text",
+                          "properties": {},
+                          "children": [
+                            {
+                              "type": "text",
+                              "value": "other"
+                            }
+                          ]
+                        },
+                        {
+                          "type": "text",
+                          "value": "\n    "
+                        }
+                      ]
+                    },
+                    {
+                      "type": "text",
+                      "value": "\n    "
+                    },
+                    {
+                      "type": "element",
+                      "tagName": "foreignObject",
+                      "properties": {
+                        "x": "20",
+                        "y": "20",
+                        "width": "160",
+                        "height": "160"
+                      },
+                      "children": [
+                        {
+                          "type": "text",
+                          "value": "\n      "
+                        },
+                        {
+                          "type": "comment",
+                          "value": " In the context of SVG embedded in an HTML document, the XHTML\n      namespace could be omitted, but it is mandatory in the context of an SVG\n      document "
+                        },
+                        {
+                          "type": "text",
+                          "value": "\n      "
+                        },
+                        {
+                          "type": "element",
+                          "tagName": "div",
+                          "properties": {
+                            "width": 100,
+                            "xmlns": "http://www.w3.org/1999/xhtml"
+                          },
+                          "children": [
+                            {
+                              "type": "text",
+                              "value": "Lorem ipsum."
+                            }
+                          ]
+                        },
+                        {
+                          "type": "text",
+                          "value": "\n    "
+                        }
+                      ]
+                    },
                     {
                       "type": "text",
                       "value": "\n  "
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,6 @@
-import h from 'hastscript';
+import ns from 'web-namespaces';
+import h from 'hastscript/html';
+import s from 'hastscript/svg';
 
 const ELEMENT_NODE = 1;
 const TEXT_NODE = 3;
@@ -7,95 +9,90 @@ const DOCUMENT_NODE = 9;
 const DOCUMENT_TYPE_NODE = 10;
 const DOCUMENT_FRAGMENT_NODE = 11;
 
-function transform(el) {
-  const children = [];
-  const length = el.childNodes ? el.childNodes.length : 0;
-
-  for (let i = 0; i < length; i += 1) {
-    children.push(transform(el.childNodes[i]));
-  }
+function transform(value) {
+  const node = value || {};
 
-  switch (el.nodeType) {
+  switch (node.nodeType) {
+    case ELEMENT_NODE:
+      return element(node);
     case DOCUMENT_NODE:
     case DOCUMENT_FRAGMENT_NODE:
-      return root(el, children);
+      return root(node);
     case TEXT_NODE:
-      return text(el, children);
+      return text(node);
     case COMMENT_NODE:
-      return comment(el, children);
+      return comment(node);
     case DOCUMENT_TYPE_NODE:
-      return doctype(el, children);
-    case ELEMENT_NODE:
-      return element(el, children);
-    default:
-      break;
-  }
-
-  switch (el.nodeName) {
-    case '#document':
-    case '#document-fragment':
-      return root(el, children);
-    case '#text':
-      return text(el, children);
-    case '#comment':
-      return comment(el, children);
-    case 'html':
-    case '#documentType':
-      return doctype(el, children);
+      return doctype(node);
     default:
-      return element(el, children);
+      return null;
   }
 }
 
 // Transform a document.
-function root(el, children) {
-  return { type: 'root', children };
+function root(node) {
+  return { type: 'root', children: all(node) };
 }
 
 // Transform a doctype.
-function doctype(el) {
+function doctype(node) {
   return {
     type: 'doctype',
-    name: el.name || '',
-    public: el.publicId || null,
-    system: el.systemId || null,
+    name: node.name || '',
+    public: node.publicId || null,
+    system: node.systemId || null,
   };
 }
 
 // Transform text.
-function text(el) {
-  return { type: 'text', value: el.nodeValue };
+function text(node) {
+  return { type: 'text', value: node.nodeValue };
 }
 
 // Transform a comment.
-function comment(el) {
-  return { type: 'comment', value: el.data };
+function comment(node) {
+  return { type: 'comment', value: node.nodeValue };
 }
 
 // Transform an element.
-function element(el, children) {
-  const tagName = el.tagName.toLowerCase();
+function element(node) {
+  const space = node.namespaceURI;
+  const fn = space === ns.svg ? s : h;
+  const tagName = space === ns.html ? node.tagName.toLowerCase() : node.tagName;
+  const content = space === ns.html && tagName === 'template' ? node.content : node;
+  const attributes = node.getAttributeNames();
+  const { length } = attributes;
   const props = {};
-  const attrs = typeof el.getAttributeNames === 'function'
-    ? el.getAttributeNames()
-    : [];
-  const { length } = attrs;
-
-  for (let i = 0; i < length; i += 1) {
-    const key = attrs[i];
-    const value = el.getAttribute(key);
-    props[key] = value;
+  let index = 0;
+
+  while (index < length) {
+    const key = attributes[index];
+    props[key] = node.getAttribute(key);
+    index += 1;
   }
 
-  const node = h(tagName, props, children);
+  return fn(tagName, props, all(content));
+}
+
+function all(node) {
+  const nodes = node.childNodes;
+  const { length } = nodes;
+  const children = [];
+  let index = 0;
+
+  while (index < length) {
+    const child = transform(nodes[index]);
+
+    if (child !== null) {
+      children.push(child);
+    }
 
-  if (tagName === 'template' && 'content' in el) {
-    node.content = transform(el.content);
+    index += 1;
   }
 
-  return node;
+  return children;
 }
 
-export default function fromDOM(el) {
-  return transform(el);
+export default function fromDOM(node) {
+  return transform(node) || { type: 'root', children: [] };
 }
diff --git a/src/index.test.js b/src/index.test.js
@@ -65,6 +65,48 @@ describe('hast-util-from-dom', () => {
       ],
     });
   });
+
+  it('should support an empty fragment', () => {
+    const actual = fromDOM(document.createDocumentFragment());
+
+    expect(actual).toEqual({ type: 'root', children: [] });
+  });
+
+  it('should support a comment', () => {
+    const actual = fromDOM(document.createComment('alpha'));
+
+    expect(actual).toEqual({ type: 'comment', value: 'alpha' });
+  });
+
+  it('should support a text', () => {
+    const actual = fromDOM(document.createTextNode('bravo'));
+
+    expect(actual).toEqual({ type: 'text', value: 'bravo' });
+  });
+
+  it('should handle CDATA', () => {
+    const xmlDoc = new DOMParser().parseFromString('<xml></xml>', 'application/xml');
+    const actual = fromDOM(xmlDoc.createCDATASection('charlie'));
+
+    expect(actual).toEqual({ type: 'root', children: [] });
+  });
+
+  it('should handle CDATA in HTML', () => {
+    const xmlDoc = new DOMParser().parseFromString('<xml></xml>', 'application/xml');
+    const frag = document.createDocumentFragment();
+
+    frag.appendChild(xmlDoc.createCDATASection('charlie'));
+
+    const actual = fromDOM(frag);
+
+    expect(actual).toEqual({ type: 'root', children: [] });
+  });
+
+  it('should handle a missing DOM tree', () => {
+    const actual = fromDOM();
+
+    expect(actual).toEqual({ type: 'root', children: [] });
+  });
 });
 
 describe('fixtures', () => {
diff --git a/yarn.lock b/yarn.lock
@@ -4456,6 +4456,11 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+web-namespaces@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.3.tgz#9bbf5c99ff0908d2da031f1d732492a96571a83f"
+  integrity sha512-r8sAtNmgR0WKOKOxzuSgk09JsHlpKlB+uHi937qypOu3PZ17UxPrierFKDye/uNHjNTTEshu5PId8rojIPj/tA==
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
