fix: make sure HelmetData uses the same context data under the hood

RSC cannot serialize methods and functions between the server and client,
so we need to support recreating `HelmetData` with the serialized data
from the server. This works because `HelmetData` itself is just a wrapper
over a context object and an instances array. Those can be the same refs
in memory for multiple HelmetData instances.

Author: blittle

__tests__/server/__snapshots__/helmetData.test.js.snap

@@ -11,3 +11,5 @@ exports[`Helmet Data server renders declarative without context 1`] = `"<base da
 exports[`Helmet Data server renders without context 1`] = `"<base data-rh=\\"true\\" target=\\"_blank\\" href=\\"http://localhost/\\"/>"`;
 
 exports[`Helmet Data server sets base tag based on deepest nested component 1`] = `"<base data-rh=\\"true\\" href=\\"http://mysite.com/public\\"/>"`;
+
+exports[`Helmet Data server works with the same context object but separate HelmetData instances 1`] = `"<base data-rh=\\"true\\" href=\\"http://mysite.com/public\\"/>"`;

__tests__/server/helmetData.test.js

@@ -73,6 +73,28 @@ describe('Helmet Data', () => {
       expect(head.base.toString).toBeDefined();
       expect(head.base.toString()).toMatchSnapshot();
     });
+
+    it('works with the same context object but separate HelmetData instances', () => {
+      const context = {};
+      const instances = [];
+
+      render(
+        <div>
+          <Helmet helmetData={new HelmetData(context, instances)}>
+            <base href="http://mysite.com" />
+          </Helmet>
+          <Helmet helmetData={new HelmetData(context, instances)}>
+            <base href="http://mysite.com/public" />
+          </Helmet>
+        </div>
+      );
+
+      const head = context.helmet;
+
+      expect(head.base).toBeDefined();
+      expect(head.base.toString).toBeDefined();
+      expect(head.base.toString()).toMatchSnapshot();
+    });
   });
 
   describe('browser', () => {

index.d.ts

@@ -80,6 +80,10 @@ declare module 'react-helmet-async' {
     context?: {};
   }
 
+  export class HelmetData {
+    constructor(context: any, instances?: Array<any>)
+  }
+
   export class HelmetProvider extends React.Component<ProviderProps> {
     static canUseDOM: boolean;
   }

src/HelmetData.js

@@ -19,9 +19,13 @@ export default class HelmetData {
     },
   };
 
-  constructor(context) {
+  constructor(context, instances) {
     this.context = context;
 
+    if (instances) {
+      this.instances = instances;
+    }
+
     if (!HelmetData.canUseDOM) {
       context.helmet = mapStateOnServer({
         baseTag: [],

src/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import fastCompare from 'react-fast-compare';
 import invariant from 'invariant';
 import { Context } from './Provider';
+import HelmetData from './HelmetData';
 import Dispatcher from './Dispatcher';
 import { TAG_NAMES, VALID_TAG_NAMES, HTML_TAG_MAP } from './constants';
 
@@ -220,13 +221,18 @@ export class Helmet extends Component {
   }
 
   render() {
-    const { children, helmetData, ...props } = this.props;
+    const { children, ...props } = this.props;
     let newProps = { ...props };
+    let { helmetData } = props;
 
     if (children) {
       newProps = this.mapChildrenToProps(children, newProps);
     }
 
+    if (helmetData && !(helmetData instanceof HelmetData)) {
+      helmetData = new HelmetData(helmetData.context, helmetData.instances);
+    }
+
     return helmetData ? (
       // eslint-disable-next-line react/jsx-props-no-spreading
       <Dispatcher {...newProps} context={helmetData.value} />