fix(render/meta): include itemprop and httpequiv in existing element check

src/render.ts

@@ -1,6 +1,6 @@
-import { hasAttributes, isTextNode } from './util';
-import { createElement } from './dom';
 import type { ChildNode, FunctionalUtilities, VNode } from '@stencil/core';
+import { createElement } from './dom';
+import { hasAttributes, isTextNode } from './util';
 
 const hasChildren = (node: ChildNode) => Array.isArray(node.vchildren);
 
@@ -23,8 +23,22 @@ function title(node: ChildNode, head: HTMLElement, utils: FunctionalUtilities) {
 }
 
 function meta(node: ChildNode, head: HTMLElement, utils: FunctionalUtilities) {
-  const namePropKey = node.vattrs?.property ? 'property' : 'name';
-  const namePropValue = node.vattrs?.property || node.vattrs?.name;
+  const namePropKey = (() => {
+    if (node.vattrs?.property) {
+      return 'property';
+    }
+
+    if (node.vattrs?.itemprop || node.vattrs?.itemProp) {
+      return 'itemprop';
+    }
+
+    if (node.vattrs?.httpequiv || node.vattrs?.httpEquiv) {
+      return 'httpequiv';
+    }
+
+    return 'name';
+  })();
+  const namePropValue = node.vattrs?.property || node.vattrs?.name || node.vattrs?.itemprop || node.vattrs?.itemProp || node.vattrs?.httpequiv || node.vattrs?.httpEquiv;
 
   const existingElement = head.querySelector(`meta[${namePropKey}="${namePropValue}"]`);
   if (existingElement !== null) {

src/stencil-helmet.ts

@@ -11,9 +11,6 @@ const isValidNode = (node: ChildNode) => validTagNames.indexOf(node.vtag as stri
 const renderNode = (node: ChildNode, utils: FunctionalUtilities): HTMLElement => RenderTypes[node.vtag as string](node, document.head, utils);
 
 export const Helmet = (_props: any, children: VNode[], utils: FunctionalUtilities) => {
-  console.log("HELMET2");
-  console.trace();
-  // eval('debugger');
   if (!headExists) {
     return null;
   }
@@ -27,7 +24,6 @@ export const Helmet = (_props: any, children: VNode[], utils: FunctionalUtilitie
     }
   });
 
-  console.log('RENDERING NODES', rendered, rendered.filter(shouldApplyToHead));
   // Build an HTMLElement for each provided virtual child
   rendered
     .filter(shouldApplyToHead)

test/render.spec.ts

@@ -1,7 +1,7 @@
 import type { ChildNode } from '@stencil/core';
-
 import RenderTypes from '../src/render';
 
+
 beforeEach(() => {
   document.head.innerHTML = '';
 });
@@ -28,26 +28,76 @@ describe('title', () => {
 });
 
 describe('meta', () => {
-  const metaNode: ChildNode = {
-    vtag: 'meta',
-    vattrs: {
-      name: 'foo',
-      content: 'bar'
-    },
-    vchildren: null,
-    vtext: null
-  };
 
-  it('should return one element without a match', () => {
-    expect(RenderTypes.meta(metaNode, document.head))
-      .toBeInstanceOf(HTMLElement);
+  describe('name attribute', () => {
+    const metaNode: ChildNode = {
+      vtag: 'meta',
+      vattrs: {
+        name: 'foo',
+        content: 'bar'
+      },
+      vchildren: null,
+      vtext: null
+    };
+
+    it('should return one element without a match', () => {
+      expect(RenderTypes.meta(metaNode, document.head))
+        .toBeInstanceOf(HTMLElement);
+    });
+
+    it('should return two elements with a match', () => {
+      document.head.innerHTML = `<meta name="foo" content="test"/>`;
+      expect(RenderTypes.meta(metaNode, document.head))
+        .toHaveLength(2);
+    });
   });
 
-  it('should return two elements with a match', () => {
-    document.head.innerHTML = `<meta name="foo" content="test"/>`;
-    expect(RenderTypes.meta(metaNode, document.head))
-      .toHaveLength(2);
+  describe('itemprop attribute', () => {
+    const metaNode: ChildNode = {
+      vtag: 'meta',
+      vattrs: {
+        itemprop: 'foo',
+        content: 'bar'
+      },
+      vchildren: null,
+      vtext: null
+    };
+
+    it('should return one element without a match', () => {
+      expect(RenderTypes.meta(metaNode, document.head))
+        .toBeInstanceOf(HTMLElement);
+    });
+
+    it('should return two elements with a match', () => {
+      document.head.innerHTML = `<meta itemprop="foo" content="test"/>`;
+      expect(RenderTypes.meta(metaNode, document.head))
+        .toHaveLength(2);
+    });
   });
+
+  describe('httpequiv attribute', () => {
+    const metaNode: ChildNode = {
+      vtag: 'meta',
+      vattrs: {
+        httpequiv: 'foo',
+        content: 'bar'
+      },
+      vchildren: null,
+      vtext: null
+    };
+
+    it('should return one element without a match', () => {
+      expect(RenderTypes.meta(metaNode, document.head))
+        .toBeInstanceOf(HTMLElement);
+    });
+
+    it('should return two elements with a match', () => {
+      document.head.innerHTML = `<meta httpequiv="foo" content="test"/>`;
+      expect(RenderTypes.meta(metaNode, document.head))
+        .toHaveLength(2);
+    });
+  });
+
 });
 
 describe('link', () => {