change to accept lists of elements or not

CHANGELOG.md

 # Changelog of json2html-lib
 
+## V0.0.3 (2020-10-14)
+
+- change to accept lists of elements or not
+
 ## V0.0.2 (2020-10-14)
 
 - Fix attributs render

README.md

@@ -13,9 +13,11 @@ npm i json2html-lib --save
 Only for demo:
 - Angular 10.0.0 and more
 
+<!--
 ## Demo
 
 [See a live demonstation](http://test.ikilote.net/json2html-demo/)
+-->
 
 ## Usage
 
@@ -27,14 +29,26 @@ import { Json2html } from 'json2html-lib';
 console.log(new Json2html({
       tag: 'div',
       attrs: { id: 'test1', class: 'testclasse' },
-      body: ['test',
+      body: [
+        'test',
         {
           tag: 'div',
           attrs: { id: 'test2', class: 'foobar' },
           body: 'test'
         }
       ]
-    }, { formatting: 'inline' }).toString());
+    }, { formatting: 'multiline' }).toString());
+/*
+<div id="test1"
+     class="testclasse">
+    test
+    <div id="test2"
+         class="foobar">
+        test
+    </div>
+</div>
+*/
+
 ```
 
 ## Publishing the library

projects/json2html/package.json

 {
   "name": "json2html-lib",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "MIT",
   "repository": {
     "type": "git",

projects/json2html/src/lib/json2html.ts

@@ -3,10 +3,12 @@ export interface Json2htmlAttr {
     [key: string]: string | number | null;
 }
 
+export type Json2htmlBody = (Json2htmlRef | string)[] | Json2htmlRef | string;
+
 export interface Json2htmlRef {
     tag: string;
     attrs?: Json2htmlAttr;
-    body?: (Json2htmlRef | string)[] | string;
+    body?: Json2htmlBody;
 }
 
 export interface Json2htmlOptions {
@@ -53,21 +55,29 @@ export class Json2html {
     };
 
     constructor(
-        public json: Json2htmlRef,
+        public json: Json2htmlRef | Json2htmlRef[],
         option: Json2htmlOptions = {}
     ) {
         Object.assign(this.options, option);
     }
 
     toString() {
-        return `${this._getSpacing(0)}${this._generate(0, this.json)}`;
+        let html = '';
+        if (!Array.isArray(this.json)) {
+            html = `${this._getSpacing(0)}${this._generate(0, this.json)}`;
+        } else {
+            this.json.forEach((element, index) => {
+                html += `${index > 0 ? '\n' : ''}${this._getSpacing(0)}${this._generate(0, element)}`;
+            });
+        }
+        return html;
     }
 
     private _generate(lvl: number, json: Json2htmlRef) {
         const hasContent = !this.options.noContentTags.includes(json.tag.toLowerCase());
         let string = `<${json.tag}${this._generateAttrs(lvl, json)}>`;
         if (hasContent) {
-            let tagcontent = this._generateHtml(lvl, json);
+            let tagcontent = this._generateBody(lvl, json);
             if (tagcontent && this._hasMultiline()) {
                 tagcontent = `${tagcontent}\n${this._getSpacing(lvl)}`;
             }
@@ -111,7 +121,7 @@ export class Json2html {
         return string;
     }
 
-    private _generateHtml(lvl: number, json: Json2htmlRef) {
+    private _generateBody(lvl: number, json: Json2htmlRef) {
         let string = '';
         if (json.body) {
             if (typeof json.body === 'string') {
@@ -119,20 +129,28 @@ export class Json2html {
                     string = `\n${this._getSpacing(lvl + 1)}`;
                 }
                 string += json.body;
+            } else if (!Array.isArray(json.body)) {
+                string += this._generateBodyElement(lvl, json);
             } else {
-                json.body.forEach((element) => {
-                    if (this._hasMultiline()) {
-                        string += `\n${this._getSpacing(lvl + 1)}`;
-                    }
-                    string += typeof element === 'string'
-                        ? element
-                        : this._generate(lvl + 1, element);
+                json.body.forEach(element => {
+                    string += this._generateBodyElement(lvl, element);
                 });
             }
         }
         return string;
     }
 
+    private _generateBodyElement(lvl: number, element: Json2htmlRef | string): string {
+        let string = '';
+        if (this._hasMultiline()) {
+            string += `\n${this._getSpacing(lvl + 1)}`;
+        }
+        string += typeof element === 'string'
+            ? element
+            : this._generate(lvl + 1, element);
+        return string;
+    }
+
     private _hasMultiline(): boolean {
         return this.options.formatting === 'multiline';
     }

src/app/app.component.ts

 import { Component } from '@angular/core';
+
 import { Json2html } from 'projects/json2html/src/public_api';
 
 @Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss']
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
 
-  constructor() {
+    constructor() {
 
-    console.log(new Json2html({
-      tag: 'div',
-      attrs: { id: 'test1', class: 'testclasse' },
-      body: ['test',
-        {
-          tag: 'div',
-          attrs: { id: 'test2', class: 'foobar' },
-          body: 'test'
-        }
-      ]
-    }, { formatting: 'inline' }).toString());
+        console.log(new Json2html({
+            tag: 'div',
+            attrs: { id: 'test1', class: 'testclasse' },
+            body: [
+                'test',
+                {
+                    tag: 'div',
+                    attrs: { id: 'test2', class: 'foobar' },
+                    body: 'test'
+                }
+            ]
+        }, { formatting: 'multiline' }).toString());
 
-    console.log(new Json2html({
-      tag: 'div',
-      attrs: { id: 'test', class: 'testclasse', test: null },
-      body: [
-        'test',
-        {
-          tag: 'div',
-          attrs: { id: 'test-div', class: 'foo' },
-          body: [
-            'test2',
-            {
-              tag: 'div',
-              attrs: { id: 'test-subdiv', class: 'foobar' },
-              body: 'test3'
-            }
-          ]
+        console.log(new Json2html([{
+            tag: 'div',
+            attrs: { id: 'test', class: 'testclasse', test: null },
+            body: [
+                'test',
+                {
+                    tag: 'div',
+                    attrs: { id: 'test-div', class: 'foo' },
+                    body: [
+                        'test2',
+                        {
+                            tag: 'div',
+                            attrs: { id: 'test-subdiv', class: 'foobar' },
+                            body: 'test3'
+                        }
+                    ]
+                },
+                {
+                    tag: 'hr'
+                },
+                {
+                    tag: 'span',
+                    attrs: { id: 'test-span', class: 'bar' },
+                    body: [
+                        'test2'
+                    ]
+                },
+            ]
         },
         {
-          tag: 'hr'
-        },
-        {
-          tag: 'span',
-          attrs: { id: 'test-span', class: 'bar', },
-          body: [
-            'test2'
-          ]
-        },
-      ]
-    }, {
-      spaceBase: 5
-    }).toString());
+            tag: 'span',
+            attrs: { id: 'attr-2', class: 'bar' },
+            body: [
+                'test2'
+            ]
+        }], {
+            spaceBase: 5
+        }).toString());
 
-  }
+    }
 }