@teclone/xml-serializer

XML-Serializer

XML-Serializer is a complete JavaScript implementation of the W3C xml serialization specifications. All specifications have been implemented and includes the following specs:

• [ELEMENT_NODE Serialization]

• [DOCUMENT_NODE Serialization]

• [COMMENT_NODE Serialization]

• [TEXT_NODE Serialization]

• [DOCUMENT_FRAGMENT_NODE Serialization]

• [DOCUMENT_TYPE_NODE Serialization]

• [PROCESSING_INSTRUCTION_NODE Serialization]

Module Availability

This module is available as an npm scoped package and also has a browser build that is located inside the dist folder. It can easily be integrated with JSDOM for mockup testing.

Getting Started

The below command will install xml-serializer from npm into your project assuming you have the npm already installed.

Install as a development dependency:

npm install --save-dev @teclone/xml-serializer

Usage Guide

Following the specification, the XMLSerializer interface is a constructor and has a serializeToString(root) method exposed on the instance. To serialize any xml node, call the serializeToString(root) method on a constructed instance, passing in the xml node as like shown below:

import XMLSerializer from '@teclone/xml-serializer';

const instance = new XMLSerializer();
console.log(instance.serializeToString(someXmlNode));

The constructor can take a boolean argument that indicates if whitespace should be preserved in the serialized output. Default value is true;

// do not preserve white space
const instance = new XMLSerializer(false);
const xmlString = instance.serializeToString(document);

Using with JSDOM

Currently [at the time of creating this], JSDOM has not implemented the XMLSerializer interface. This can be easily integrated with JSDOM and any other similar mockup environment or for web scrapping and xml feed parsing like below.

//assumes jsdom has been installed.
import XMLSerializer from '@teclone/xml-serializer';
import { JSDOM } from 'jsdom';

const dom = new JSDOM();
XMLSerializer.installTo(dom.window);

global.window = dom.window;

//start running your tests or do something else.

Using on the browser

The browser build is available inside the build/dist folder when you npm install the package. You can also clone this repo and run the build command locally. It exposes an XMLSerializer construct on the window object.

<script
  type="text/javascript"
  src="node_modules/@teclone/xml-serializer/build/dist/main.js"
>
  <script>
  <script type="text/javascript">
      const serializer = new XMLSerializer();
      // do some serialization stuffs
</script>

Features & Improvements

By default, the serializer preserves white space during the serialization process. This can be turned off if you want a compact output by passing in false to the constructor at the time of creating an instance.

//do not preserve white space
const instance = new XMLSerializer(false);

Another improvement is that it removes all duplicate xml prefix definition on as recommended in the specification document unlike what web browsers do. Below is an example of this:

Original XML:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE root PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<?xml-stylesheet href="classic.css" alternate="yes" title="Classic"
 media="screen, print" type="text/css"?>

<!--notice that two namespaces have been defined on the root element-->
<root xmlns:h="http://www.w3.org/TR/html4/" xmlns:f="https://www.w3schools.com/furniture">

    <!--notice that it is declared again here. this is a duplicate-->
    <h:table xmlns:h="http://www.w3.org/TR/html4/" xmlns:f="https://www.w3schools.com/furniture">
        <h:tr>
            <h:td>
            <h:td>Apples</h:td>
            <h:td>Bananas</h:td>
        </h:tr>
    </h:table>

    <!--one is duplicated here-->
    <f:table xmlns:f="https://www.w3schools.com/furniture">
        <f:name>African Coffee Table</f:name>
        <f:width>80</f:width>
        <f:length>120</f:length>
    </f:table>

    <!--html section-->
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta name="description" content="this is html section" />
            <base href="http://localhost" />
        </head>
        <body>
            <p>this is a paragraph text</p>
            <hr />
            <template>
                <p>this is a template</p>
            </template>
        </body>
    </html>

    <svg:svg xmlns:svg="http://www.w3.org/2000/svg">
        <svg:style></svg:style>
        <title>my title<title>
    </svg:svg>

</root>

Chrome inbuilt XMLSerializer Output:

Notice that none of the duplicated namespaces is removed.

<?xml version="1.0" encoding="utf-8" ?><!DOCTYPE root PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<?xml-stylesheet href="classic.css" alternate="yes" title="Classic"
 media="screen, print" type="text/css"?>

<root xmlns:h="http://www.w3.org/TR/html4/" xmlns:f="https://www.w3schools.com/furniture">

    <!-- duplicates still remains -->
    <h:table xmlns:h="http://www.w3.org/TR/html4/" xmlns:f="https://www.w3schools.com/furniture">
        <h:tr>
            <h:td>
            <h:td>Apples</h:td>
            <h:td>Bananas</h:td>
        </h:tr>
    </h:table>

    <!--still remains-->
    <f:table xmlns:f="https://www.w3schools.com/furniture">
        <f:name>African Coffee Table</f:name>
        <f:width>80</f:width>
        <f:length>120</f:length>
    </f:table>

    <!--html section-->
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta name="description" content="this is html section" />
            <base href="http://localhost" />
        </head>
        <body>
            <p>this is a paragraph text</p>
            <hr />
            <template>
                <p>this is a template</p>
            </template>
        </body>
    </html>

    <svg:svg xmlns:svg="http://www.w3.org/2000/svg">
        <svg:style></svg:style>
        <title>my title<title>
    </svg:svg>

</root>

Output of this module:

Notice that all of the duplicated namespaces are removed.

<?xml version="1.0" encoding="utf-8" ?><!DOCTYPE root PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<?xml-stylesheet href="classic.css" alternate="yes" title="Classic"
 media="screen, print" type="text/css"?>

<!--notice that two namespaces have been defined on the root element-->
<root xmlns:h="http://www.w3.org/TR/html4/" xmlns:f="https://www.w3schools.com/furniture">

    <!--duplicates removed-->
    <h:table>
        <h:tr>
            <h:td>
            <h:td>Apples</h:td>
            <h:td>Bananas</h:td>
        </h:tr>
    </h:table>

    <!--duplicate removed-->
    <f:table>
        <f:name>African Coffee Table</f:name>
        <f:width>80</f:width>
        <f:length>120</f:length>
    </f:table>

    <!--html section-->
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta name="description" content="this is html section" />
            <base href="http://localhost" />
        </head>
        <body>
            <p>this is a paragraph text</p>
            <hr />
            <template>
                <p>this is a template</p>
            </template>
        </body>
    </html>

    <svg:svg xmlns:svg="http://www.w3.org/2000/svg">
        <svg:style></svg:style>
        <title>my title<title>
    </svg:svg>

</root>

Contributing

We welcome your own contributions, ranging from code refactoring, documentation improvements, new feature implementations, bugs/issues reporting, etc. We recommend you follow the steps below to actively contribute to this project:

• Decide on what to help us with.

• Fork this repo to your machine.

• Implement your ideas, and once stable,

• Create a pull request, explaining your improvements/features