comment and fragment nodes

QwikDev · Oct 1, 2021 · 2c72da8 · 2c72da8 · vercel · Oct 1, 2021
1 parent 0120543
commit 2c72da8
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 21 deletions.
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -107,19 +107,29 @@ export interface MemberTypeInfo {
 }
 
 export const enum InterfaceType {
-  Window = 0,
-  Element = 1, // same as NodeType (ELEMENT_NODE)
-  Method = 2,
-  TextNode = 3, // same as NodeType (TEXT_NODE)
-  NamedNodeMap = 4,
-  DOMStringMap = 5,
-  DOMTokenList = 6,
-  NodeList = 7,
-  History = 8,
-  Document = 9, // same as NodeType (DOCUMENT_NODE)
-  DocumentTypeNode = 10, // same as NodeType (DOCUMENT_TYPE_NODE)
-  Storage = 11,
+  // https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
+
+  Element = 1, // ELEMENT_NODE
+  AttributeNode = 2, // ATTRIBUTE_NODE
+  TextNode = 3, // TEXT_NODE
+  CDataSectionNode = 4, // CDATA_SECTION_NODE
+
+  Window = 5, // (node type 5 not used in the standard)
+  NodeList = 6, // (node type 6 not used in the standard)
+
+  ProcessingInstructionNode = 7, // PROCESSING_INSTRUCTION_NODE
+  CommentNode = 8, // COMMENT_NODE
+  Document = 9, // DOCUMENT_NODE
+  DocumentTypeNode = 10, // DOCUMENT_TYPE_NODE
+  DocumentFragmentNode = 11, // DOCUMENT_FRAGMENT_NODE
+
   CSSStyleDeclaration = 12,
+  DOMStringMap = 13,
+  DOMTokenList = 14,
+  History = 15,
+  Method = 16,
+  NamedNodeMap = 17,
+  Storage = 18,
 }
 
 export const enum PlatformInstanceId {

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -5,7 +5,7 @@ import {
   webWorkerCtx,
   WinIdKey,
 } from './web-worker/worker-constants';
-import { InterfaceType, MainWindowContext, PlatformInstanceId } from './types';
+import { InterfaceType, MainWindowContext, NodeName, PlatformInstanceId } from './types';
 
 export const debug = (globalThis as any).partytownDebug;
 
@@ -119,12 +119,18 @@ const logTargetProp = (target: any, memberPath: string[]) => {
       n = 'sessionStorage.';
     } else if (target.nodeType === 1) {
       n = toLower(target.nodeName) + '.';
-    } else if (target[InterfaceTypeKey] === InterfaceType.TextNode) {
-      n = 'node.';
     } else if (target[InterfaceTypeKey] === InterfaceType.Element && target[NodeNameKey]) {
       n = `<${toLower(target[NodeNameKey])}>`;
+    } else if (target[InterfaceTypeKey] === InterfaceType.CommentNode) {
+      n = 'comment.';
+    } else if (target[InterfaceTypeKey] === InterfaceType.AttributeNode) {
+      n = 'attribute.';
+    } else if (target[InterfaceTypeKey] === InterfaceType.DocumentFragmentNode) {
+      n = 'fragment.';
     } else if (target[InterfaceTypeKey] === InterfaceType.DocumentTypeNode) {
       n = 'documentTypeNode.';
+    } else if (target[InterfaceTypeKey] <= InterfaceType.DocumentFragmentNode) {
+      n = 'node.';
     } else {
       n = '¯\\_(ツ)_/¯ TARGET.';
       console.warn('¯\\_(ツ)_/¯ TARGET', target);
@@ -157,7 +163,7 @@ const logValue = (memberPath: string[], v: any): string => {
         return `<body>`;
       }
       if (instanceId === PlatformInstanceId.document) {
-        return `#document`;
+        return NodeName.Document;
       }
       if (instanceId === PlatformInstanceId.documentElement) {
         return `<html>`;
@@ -174,15 +180,15 @@ const logValue = (memberPath: string[], v: any): string => {
       if (instanceId === PlatformInstanceId.window) {
         return `[window]`;
       }
-      if (v[InterfaceTypeKey] === InterfaceType.TextNode) {
-        return `#text`;
-      }
       if (v[InterfaceTypeKey] === InterfaceType.Element && v[NodeNameKey]) {
         return `<${toLower(v[NodeNameKey])}>`;
       }
       if (v[InterfaceTypeKey] === InterfaceType.DocumentTypeNode) {
         return `<!DOCTYPE ${v[NodeNameKey]}>`;
       }
+      if (v[InterfaceTypeKey] <= InterfaceType.DocumentFragmentNode) {
+        return v[NodeNameKey];
+      }
       return '¯\\_(ツ)_/¯ instance obj';
     }
     if (v[Symbol.iterator]) {

diff --git a/src/lib/web-worker/worker-constructors.ts b/src/lib/web-worker/worker-constructors.ts
@@ -18,6 +18,10 @@ export const constructInstance = (
       ? NodeName.Document
       : interfaceType === InterfaceType.TextNode
       ? NodeName.Text
+      : interfaceType === InterfaceType.CommentNode
+      ? NodeName.Comment
+      : interfaceType === InterfaceType.DocumentFragmentNode
+      ? NodeName.DocumentFragment
       : interfaceType === InterfaceType.DocumentTypeNode
       ? NodeName.DocumentTypeNode
       : nodeName;
@@ -33,10 +37,10 @@ const getConstructor = (interfaceType: InterfaceType, nodeName?: string): typeof
     return WorkerDocument;
   } else if (interfaceType === InterfaceType.Window) {
     return WorkerContentWindow;
-  } else if (interfaceType === InterfaceType.TextNode) {
-    return WorkerNode;
   } else if (interfaceType === InterfaceType.DocumentTypeNode) {
     return WorkerDocumentTypeNode;
+  } else if (interfaceType <= InterfaceType.DocumentFragmentNode) {
+    return WorkerNode;
   } else {
     return WorkerInstance;
   }

diff --git a/tests/platform/node/index.html b/tests/platform/node/index.html
@@ -124,6 +124,30 @@ <h1 class="title">Node</h1>
         </script>
       </li>
 
+      <li>
+        <strong>comment</strong>
+        <code id="testComment"></code>
+        <script type="text/partytown">
+          (function () {
+            const elm = document.getElementById('testComment');
+            const c = document.createComment('1.21');
+            elm.textContent = c.nodeType + ' ' + c.nodeName + ' ' + c.data;
+          })();
+        </script>
+      </li>
+
+      <li>
+        <strong>fragment</strong>
+        <code id="testFragment"></code>
+        <script type="text/partytown">
+          (function () {
+            const elm = document.getElementById('testFragment');
+            const f = document.createDocumentFragment();
+            elm.textContent = f.nodeType + ' ' + f.nodeName;
+          })();
+        </script>
+      </li>
+
       <script type="text/partytown">
         (function () {
           document.body.classList.add('completed');

diff --git a/tests/platform/node/node.spec.ts b/tests/platform/node/node.spec.ts
@@ -22,4 +22,10 @@ test('node', async ({ page }) => {
 
   const testParentNode = page.locator('#testParentNode');
   await expect(testParentNode).toHaveText('hasParentNode');
+
+  const testComment = page.locator('#testComment');
+  await expect(testComment).toHaveText('8 #comment 1.21');
+
+  const testFragment = page.locator('#testFragment');
+  await expect(testFragment).toHaveText('11 #document-fragment');
 });