1

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.

  • What about CETEIcean.js (https://github.com/TEIC/CETEIcean) with custom behaviors for your XML? Or you might take a look at SaxonJS and do the transformation on the server. – B Polit Jun 01 '21 at 19:51

0 Answers0