feat: allow DOM elements as insertion point

JoseRFelix · JoseRFelix · commit fc5e89b190b5 · 2020-12-27T22:11:37.000-04:00
diff --git a/README.md b/README.md
@@ -133,6 +133,50 @@ const App = () => {
 };
 ```
 
+### HTML Element Insertion Point
+
+Some libraries and frameworks make it hard to use comments in head for handling injection order. To solve this issue, you can provide a DOM element as the insertion point. Take for example a `<noscript></noscript>` element:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+
+      * {
+        color: inherit;
+      }
+
+      html {
+        font-family: 'Poppins', sans-serif;
+      }
+    </style>
+    <noscript id="inject-styles-here"></noscript>
+
+    <title>Playground</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
+```
+
+```jsx
+const App = () => {
+  return (
+    <ThemeSwitcherProvider
+      defaultTheme="light"
+      insertionPoint={document.getElementById('inject-styles-here')}
+      themeMap={themes}
+    >
+      <Component />
+    </ThemeSwitcherProvider>
+  );
+};
+```
+
 ## API
 
 ### ThemeSwitcherProvider
diff --git a/example/index.html b/example/index.html
@@ -15,7 +15,7 @@
         font-family: 'Poppins', sans-serif;
       }
     </style>
-    <!-- inject-styles-here -->
+    <noscript id="inject-styles-here"></noscript>
 
     <title>Playground</title>
   </head>
diff --git a/example/index.tsx b/example/index.tsx
@@ -82,7 +82,7 @@ const themes = {
 const App = () => {
   return (
     <ThemeSwitcherProvider
-      insertionPoint="inject-styles-here"
+      insertionPoint={document.getElementById('inject-styles-here')}
       themeMap={themes}
       defaultTheme={'dark'}
     >
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { findCommentNode, arrayToObject, createLinkElement } from './utils';
+import {
+  findCommentNode,
+  arrayToObject,
+  createLinkElement,
+  isElement,
+} from './utils';
 
 enum Status {
   idle = 'idle',
@@ -21,7 +26,7 @@ const ThemeSwitcherContext = React.createContext<
 interface Props {
   themeMap: Record<any, string>;
   children?: React.ReactNode;
-  insertionPoint?: string;
+  insertionPoint?: string | HTMLElement | null;
   id?: string;
   defaultTheme?: string;
   attr?: string;
@@ -40,8 +45,10 @@ export function ThemeSwitcherProvider({
 
   const insertStyle = React.useCallback(
     (linkElement: HTMLElement): HTMLElement | void => {
-      if (insertionPoint) {
-        const insertionPointElement = findCommentNode(insertionPoint);
+      if (insertionPoint || insertionPoint === null) {
+        const insertionPointElement = isElement(insertionPoint)
+          ? (insertionPoint as HTMLElement)
+          : findCommentNode(insertionPoint as string);
 
         if (!insertionPointElement) {
           console.warn(
@@ -106,7 +113,7 @@ export function ThemeSwitcherProvider({
   React.useEffect(() => {
     const themes = Object.keys(themeMap);
 
-    themes.map(theme => {
+    themes.map((theme) => {
       const themeAssetId = `theme-prefetch-${theme}`;
       if (!document.getElementById(themeAssetId)) {
         const stylePrefetch = document.createElement('link');
diff --git a/src/utils.ts b/src/utils.ts
@@ -9,9 +9,19 @@ export function findCommentNode(comment: string) {
   return null;
 }
 
+export function isElement(o: any) {
+  return typeof HTMLElement === 'object'
+    ? o instanceof HTMLElement //DOM2
+    : o &&
+        typeof o === 'object' &&
+        o !== null &&
+        o.nodeType === 1 &&
+        typeof o.nodeName === 'string';
+}
+
 export function arrayToObject(array: string[]): Record<any, string> {
   const obj: Record<any, string> = {};
-  array.forEach(el => (obj[el] = el));
+  array.forEach((el) => (obj[el] = el));
   return obj;
 }
 
diff --git a/test/index.test.tsx b/test/index.test.tsx
@@ -170,7 +170,7 @@ describe('Theme switcher', () => {
     );
   });
 
-  it('should insert styles on insertionPoint', () => {
+  it('should insert styles on comment insertionPoint', () => {
     const insertionPoint = 'insert-style-here';
 
     document.head.insertBefore(
@@ -211,7 +211,46 @@ describe('Theme switcher', () => {
     });
   });
 
-  it('should warn when insertionPoint does not exist', () => {
+  it('should insert styles on DOM insertionPoint', () => {
+    const insertionPoint = document.createElement('noscript');
+    insertionPoint.id = 'style-insertion-point';
+
+    document.head.insertBefore(insertionPoint, document.head.firstElementChild);
+
+    const otherElement = document.createElement('meta');
+    document.head.append(otherElement);
+    renderHook(() => useThemeSwitcher(), {
+      wrapper: Wrapper({
+        themeMap: themes,
+        defaultTheme: 'dark',
+        insertionPoint: document.getElementById(insertionPoint.id) ?? undefined,
+      }),
+    });
+
+    function allPreviousElements(element: Element | null) {
+      const previousElements: HTMLLinkElement[] = [];
+      while ((element = element!.previousElementSibling))
+        previousElements.push(element as HTMLLinkElement);
+
+      return previousElements;
+    }
+
+    document.getElementById(insertionPoint.id)?.remove();
+    const element = document.head.lastElementChild;
+    const previousElements = allPreviousElements(element);
+
+    previousElements.forEach(elem => {
+      const conditions = [
+        'current-theme-style',
+        'theme-prefetch-dark',
+        'theme-prefetch-light',
+      ];
+      const found = conditions.some(condition => elem.id === condition);
+      expect(found).toBeTruthy();
+    });
+  });
+
+  it('should warn when comment insertionPoint does not exist', () => {
     renderHook(() => useThemeSwitcher(), {
       wrapper: Wrapper({
         themeMap: themes,
@@ -227,6 +266,22 @@ describe('Theme switcher', () => {
     );
   });
 
+  it('should warn when DOM insertionPoint does not exist', () => {
+    renderHook(() => useThemeSwitcher(), {
+      wrapper: Wrapper({
+        themeMap: themes,
+        defaultTheme: 'dark',
+        insertionPoint: document.getElementById('not-in-dom-insertion-point'),
+      }),
+    });
+
+    expect(console.warn).toHaveBeenCalledTimes(3);
+    // @ts-ignore
+    expect(console.warn.mock.calls[0][0]).toMatchInlineSnapshot(
+      `"Insertion point 'null' does not exist. Be sure to add comment on head and that it matches the insertionPoint"`
+    );
+  });
+
   it('should append to head even when insertionPoint does not exist', async () => {
     const { wait } = renderHook(() => useThemeSwitcher(), {
       wrapper: Wrapper({

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@`
`15`	`15`	`font-family: 'Poppins', sans-serif;`
`16`	`16`	`}`
`17`	`17`	`</style>`
`18`		`- <!-- inject-styles-here -->`
	`18`	`+ <noscript id="inject-styles-here"></noscript>`
`19`	`19`
`20`	`20`	`<title>Playground</title>`
`21`	`21`	`</head>`
Original file line number	Diff line number	Diff line change
`@@ -82,7 +82,7 @@ const themes = {`
`82`	`82`	`const App = () => {`
`83`	`83`	`return (`
`84`	`84`	`<ThemeSwitcherProvider`
`85`		`- insertionPoint="inject-styles-here"`
	`85`	`+ insertionPoint={document.getElementById('inject-styles-here')}`
`86`	`86`	`themeMap={themes}`
`87`	`87`	`defaultTheme={'dark'}`
`88`	`88`	`>`