NciDsJsInit component outputs escaped html instead of script when publishing to doc site.

[bryanpizzillo]

Issue description

ESTIMATE TBD

Using the Header component page as an example of this not working correctly, but:

<NciDsJsInit>{`
const elements = preview.querySelectorAll('.nci-header');
elements.forEach((element) => {
	switch (element.id) {
		case 'default-header-example':
			window.ncids.NCIExtendedHeaderWithMegaMenu.create(element, {
				megaMenuSource: new window.ncids.DefaultMegaMenuSource(),
				mobileMenuSource: new window.ncids.DefaultMobileMenuSource(),
			});
			break;
		case 'header-with-mega-menu-example':
			window.ncids.NCIExtendedHeaderWithMegaMenu.create(element, {
				megaMenuSource: window.adapter,
				mobileMenuSource: new window.ncids.DefaultMobileMenuSource(),
			});
			break;
	}
});
`}</NciDsJsInit>

Is being generated as:

<div>
   const elements = preview.querySelectorAll(&#x27;.nci-header&#x27;);
   elements.forEach((element) =&gt; {
   switch (element.id) {
   case &#x27;default-header-example&#x27;:
   window.ncids.NCIExtendedHeaderWithMegaMenu.create(element, {
   megaMenuSource: new window.ncids.DefaultMegaMenuSource(),
   mobileMenuSource: new window.ncids.DefaultMobileMenuSource(),
   });
   break;
   case &#x27;header-with-mega-menu-example&#x27;:
   window.ncids.NCIExtendedHeaderWithMegaMenu.create(element, {
   megaMenuSource: window.adapter,
   mobileMenuSource: new window.ncids.DefaultMobileMenuSource(),
   });
   break;
   }
   });
   </div>

It should be:

<script>
const elements = preview.querySelectorAll('.nci-header');
elements.forEach((element) => {
	switch (element.id) {
		case 'default-header-example':
			window.ncids.NCIExtendedHeaderWithMegaMenu.create(element, {
				megaMenuSource: new window.ncids.DefaultMegaMenuSource(),
				mobileMenuSource: new window.ncids.DefaultMobileMenuSource(),
			});
			break;
		case 'header-with-mega-menu-example':
			window.ncids.NCIExtendedHeaderWithMegaMenu.create(element, {
				megaMenuSource: window.adapter,
				mobileMenuSource: new window.ncids.DefaultMobileMenuSource(),
			});
			break;
	}
});
</script>

[bryanpizzillo]

This maybe related, but the error:

warning Component NciDsJsInit was not imported, exported, or provided by MDXProvider as global scope                                                                                            
warning Component NciDsJsInit was not imported, exported, or provided by MDXProvider as global scope                                                                                            
warning Component NciDsJsInit was not imported, exported, or provided by MDXProvider as global scope  

Appears in the build logs. Additionally there are 3 mdx pages under docs/content/components that have <NciDsJsInit>. 3 errors, 3 files. Probably not a coincident.

Is appearing in the build output.

[bryanpizzillo]

The fix only stopped errors. The NCI Header with Mega Menu example does not initialize.
It appears that it is related to the code in NciDsJsInit.jsx:

...SNIP...
	window.ncidsPreviewHandlers = window.ncidsPreviewHandlers || {};
	  if (!window.ncidsPreviewHandlers['${path}']) {
			const handler = (preview) => {
				${children}
		  }
	  }
...SNIP...

We never actually add the created handlers to window.ncidsPreviewHandlers.

This should probably change to:

...SNIP...
	window.ncidsPreviewHandlers = window.ncidsPreviewHandlers || {};
	  if (!window.ncidsPreviewHandlers['${path}']) {
			window.ncidsPreviewHandlers['${path}'] = (preview) => {
				${children}
		  }
	  }
...SNIP...

[dlescarbeau]

This issue remains open / on hold. There is a PR raised that worked to address this, but it ran into problems related to Gatsby.

The Javascript required by the components' Previews is not called on first page load due to how Gatsby handles the page rendering. This also includes navigating to the page via our Side Navigation or other link on the site due to how Gatsby's Link component preload's the destination page's resources.

Refreshing the page allows the javascript to fire and therefore the Javascript needed by the Preview is able to work appropriately (for example, the initialization of the Header Mega Menu or Site Alert). This is consistent across pages with Javascript required by their component previews.

Without a refresh, the first visit to these documentation pages will display the previewed components without working javascript.