How to package for the web?

[born2net]

How to package for the web? tried Browserfy but could not use it, errored with can't find parseString... regards

Sean

[tflanagan]

Browserify works great for me, can you shed light on exactly what is going wrong?

[born2net]

tx for the reply, I ran browserify -s ./lib/xml2js.js -o ./lib/xml_browser.js and in code using system.js I run var parseString = require('xml2js').parseString; but it can't find parseString function

[born2net]

can you share your browserfied file? tx Sean

[mrvini]

by looking at issue #215 this should be taken care of by just requesting this file in the html page (using bower

<script type='application/javascript' src='./bower_components/xml2js/lib/xml2js.js'></script>

However, _this does not work_ as this file uses requires that does not resolve, getting an issue

Uncaught ReferenceError: require is not defined

Please advise..

Never mind, i just realize that this library is not supported in the browser by default, issue #230

[pietersv]

Add the following two scripts to package.json and run them after running npm test:

    "browserify": "browserify ./xml2js.js  -s xml2js -o ./xml2js.js",
    "minify": "cat ./xml2js.js  | uglifyjs > ./xml2js.min.js"

in HTML

<script type="text/javascript" src="/path/to/xml2js.min.js"></script>
<script>
    var xml = '<?xml version="1.0" encoding="UTF-8"?><note>Lorem ipsum dolor sit amet...</note>'
    var obj = xml2js.parseString(xml, function(err, res) { ... })
</script>

[oehm-smith]

In console after breaking in script following the <script type="text/javascript" src="/path/to/xml2js.min.js"></script>

> xml2js > VM275:1 Uncaught ReferenceError: xml2js is not defined at :1:1

I modified the xml2js to include a console.log("xml2js") and that displays.

[richardeschloss]

How far can we get with modern browsers built-in DOMParser for the conversion? (this will only work in the browser, not in node environments, so may fail with frameworks that do SSR).

Also, this may be limited in how deep the XML can be because the max call stack size can easily be exceeded in the browser :(.

// Recursive function to convert XML elements to JSON
function parseElement(xmlElement) {
  const result = {};
  if (xmlElement.nodeType === Node.ELEMENT_NODE) {
    if (xmlElement.children.length === 0) {
      // If the element has no child elements, use its text content as the value
      return xmlElement.textContent;
    } else {
      // If the element has child elements, recursively convert them to JSON
      for (const childElement of xmlElement.children) {
        const key = childElement.tagName;
        const value = parseElement(childElement);
  
        // If the key already exists, convert the value to an array
        if (result[key]) {
          if (!Array.isArray(result[key])) {
            result[key] = [result[key]];
          }
          result[key].push(value);
        } else {
          result[key] = value;
        }
      }
    }
  }
  return result;
}

export default function xml2js(xmlData) {
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(xmlData, 'text/xml');
  return parseElement(xmlDoc.documentElement)
}

// Example usage:
const xmlData = `
<root>
  <name>John</name>
  <age>30</age>
  <address>
    <city>New York</city>
    <country>USA</country>
  </address>
</root>`;

console.log(xml2js(xmlData))