From 50c394c290c359328d80fdec9a5400b81f4cffe6 Mon Sep 17 00:00:00 2001 From: Adam LaCombe Date: Thu, 4 Feb 2021 11:02:42 -0500 Subject: [PATCH 1/3] fix(meta): include itemprop and httpequiv in existing element check --- src/render.ts | 22 +++++++++--- test/render.spec.ts | 84 ++++++++++++++++++++++++++++++++++++--------- 2 files changed, 85 insertions(+), 21 deletions(-) diff --git a/src/render.ts b/src/render.ts index f474962..1e3ff43 100644 --- a/src/render.ts +++ b/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) { diff --git a/test/render.spec.ts b/test/render.spec.ts index f2b9dcc..d0b0616 100644 --- a/test/render.spec.ts +++ b/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 = ``; + expect(RenderTypes.meta(metaNode, document.head)) + .toHaveLength(2); + }); }); - it('should return two elements with a match', () => { - document.head.innerHTML = ``; - 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 = ``; + 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 = ``; + expect(RenderTypes.meta(metaNode, document.head)) + .toHaveLength(2); + }); + }); + }); describe('link', () => { From 38168da930ee006fc648df3d157a1e8defc6a495 Mon Sep 17 00:00:00 2001 From: Adam LaCombe Date: Thu, 4 Feb 2021 11:12:46 -0500 Subject: [PATCH 2/3] remove debug code --- src/stencil-helmet.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/stencil-helmet.ts b/src/stencil-helmet.ts index 1cef1c2..6856e55 100644 --- a/src/stencil-helmet.ts +++ b/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; } From 1f40ee5c04186af823b624ff3a854faa50b3aa9d Mon Sep 17 00:00:00 2001 From: Adam LaCombe Date: Thu, 4 Feb 2021 11:26:34 -0500 Subject: [PATCH 3/3] remove debug code --- src/stencil-helmet.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/stencil-helmet.ts b/src/stencil-helmet.ts index 6856e55..202d9dd 100644 --- a/src/stencil-helmet.ts +++ b/src/stencil-helmet.ts @@ -24,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)