How to render bunch of XML files in JHipster React Application

Question

I have a bunch of XML files( around 100 files) which I need to render it inside react application with proper navigation and styling. These XMLs can have anchors to different XML files for navigation and also xml-stylesheet reference too. I have used JHipster's React Template for React app. Now I want to use those static XML files and render it as HTML with React. Here is sample of one of the XML file with anchors and stylesheet reference too.

<?xml-stylesheet type="text/xsl" href="../vxml/styles/tmref.xslt"?>
<topic>
<metadata id="my_portal"
   name="VoiceXML 2.0"
   type="overview"
/>

<content>
<fm>
<p>Looking for technical information on using VoiceXML 2.0? This reference 
will help guide you through ........
</p>

   <ul class="ref">
      <li><a href="overview/">VoiceXML 2.0 Overview</a></li>
      <li><a href="ref/elements/">VoiceXML 2.0 Element Reference</a></li>
      <li><a href="ref/functions/">VoiceXML 2.0 Function Reference</a></li>
      <li><a href="ref/objects/">VoiceXML 2.0 Object Reference</a></li>
   </ul>

<note>You must upgrade that code to be compliant with VoiceXML 2.0
in order for it to continue to run on the <tvan/>.
Please refer to the <a href="overview/migration2.html">Migration Guide</a> for details.
</note>

</fm>

</content>
</topic>

Example for referenced tmref.xslt

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="xml" omit-xml-declaration="yes" />

<!-- location of common attribute data -->
<xsl:param name="common_attrs_uri" select="'vxml2_attrs_common.xml'"/>

<xsl:variable name="str_element_unsupported">Some static text</xsl:variable>

<xsl:template match="/">
    <xsl:apply-templates select="/topic"/>
</xsl:template>

<xsl:include href="util.xslt"/>
<xsl:include href="refutil.xslt"/>
<xsl:include href="studio/reg_util.xslt"/>

<xsl:include href="globalparams.xslt"/>

<xsl:include href="grammar.xslt"/>
</xsl:stylesheet>

I have used couple for npm libraries for react in order to achieve the proper rendering but result of most of the tries were just XML as it is on browser screen instead of transformed version.

Answer 1

xslt- processor

Install xslt-processor using npm or yarn:

npm install xslt-processor yarn add xslt-processor Within your ES2015+ code, import the Xslt class, the XmlParser class and use this way:

import { Xslt, XmlParser } from 'xslt-processor'

// xmlString: string of xml file contents
// xsltString: string of xslt file contents
// outXmlString: output xml string.
const xslt = new Xslt();
const xmlParser = new XmlParser();
const outXmlString = xslt.xsltProcess(
    xmlParser.xmlParse(xmlString),
    xmlParser.xmlParse(xsltString)
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>