Create Mapnik configuration with JSX and included code autocompletion and type validation support, thanks to TypeScript.

1. create a new TypeScript project and install JsxNik (npm i jsxnik).
2. Add following lines to your tsconfig.json:

   "jsx": "react-jsx",
   "jsxImportSource": "jsxnik"

3. create and use Mapnik configuration; sample.tsx:

   import { serialize } from "jsxnik/serialize";
   import { Datasource, Map, Parameter, Style, Rule, PolygonSymbolizer, Layer, StyleName } from "jsxnik/mapnikConfig";
   
   const mapnikConfig = serialize(
     <Map backgroundColor="blue">
       <Datasource name="db">
         <Parameter name="type">sqlite</Parameter>
         <Parameter name="file">map.sqlite</Parameter>
       </Datasource>
   
       <Style name="some_style">
         <Rule>
           <PolygonSymbolizer fill="green" />
         </Rule>
   
         {/* this is a comment */}
   
         {/* including markup as a string */}
         <Raw>{`
           <Rule>
             <PolygonSymbolizer fill="green" />
           </Rule>
         `}</Raw>
       </Style>
   
       <Layer srs="+init=epsg:3857">
        <StyleName>some_style</StyleName>
   
        <Datasource base="db">
          <Parameter name="table">
            some_table
          </Parameter>
        </Datasource>
       </Layer>
     </Map>
   );

TODO instruction for JavaScript-only projects by using Babel