rev1.0.3

* svg renderer added
* json renderer moved to render/json.js
* xml renerer uses HTML one temporary
* README.md updated to reflect ^^

README.md

@@ -2,12 +2,13 @@
 
 are covering the typical UI tasks:
 1. fetch data via [fetch() api](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
-2. populate data into UI via custom render callback or provided content-type sensitive renderers: JSON to table or html.
+2. populate data into UI via custom render callback or provided content-type sensitive renderers: JSON/XML data to table,
+   inline for HTML/SVG (aka html import); exposes customize-able transformation pipeline.
 3. control UI parts(slots) depending on fetch state.
 
 [![git](https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg) GitHub](https://github.com/sashafirsov/slotted-element)
-| Demo: [slotted-element](https://unpkg.com/slotted-element@1.0.2/demo/index.html)
-, [fetch-element JSON as table](https://unpkg.com/slotted-element@1.0.2/demo/render-from-json.html)
+| Demo: [slotted-element](https://unpkg.com/slotted-element@1.0.3/demo/index.html)
+, [fetch-element JSON as table](https://unpkg.com/slotted-element@1.0.3/demo/render-from-json.html)
 | [tests project](https://github.com/sashafirsov/slotted-element-test)
 
 [![NPM version][npm-image]][npm-url]
@@ -17,6 +18,9 @@ As slots **without shadow DOM** primarily would be used for displaying remotely
 the `slotted-element` is derived from `fetch-element`.
 
 # Use
+## install
+    npm i -P slotted-element
+## or from CDN
 1. if JS served by CDN as in demo, skip this step. Otherwise add `slotted-element` dependency into project via package manager 
    like npm, yarn, bower, bit.dev. 
    Or simply clone `fetch-element.js` and `slotted-element.js` into project tree
@@ -80,9 +84,12 @@ Overrides for `fetched-element` to support following fetch() lifecycle slots `lo
 
 1. exposes interruptible [fetch() api](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) as web component. 
 2. Input parameters and result are exposed via element attributes
-3. Provides default rendering for HTML and JSON as table
+3. Provides default rendering for JSON and XML as table, inline SVG and HTML
 4. Exposes overriding methods for `fetch()` and render life cycle  
 
+The rendering code is loading on demand according to `content-type` 
+reducing initial JS size to 4.5kb uncompressed / 1.7 gzipped.
+
 ## API
 * `get headers()` override to set headers programmatically is no matching attribute is given
 * `async fetch( url, options )` invokes native `fetch()` API. return Promise resolved upon data rendering.
@@ -99,9 +106,9 @@ fetch lifecycle overrides:
 Callbacks:
 * `render( data, contentType, code, responseHeaders )` callback allows to apply data 
   which could be used for inner DOM changing.
-  Returns
-    * html string to be populated as internal content or
-    * true to state that internally provided rendering should be omitted.
+  Returns either
+    * `html string` to be populated as internal content or
+    * `true` to state that internally provided rendering should be omitted.
 * `onError( error )`
 * `json2table( data )` - default render JSON object or array to table. Override for custom render. Return html string.
 * `getKeys( obj )` - override to limit or define the order of keys on json object to be rendered in table.
@@ -132,6 +139,8 @@ The data and content rendering customization is done by callbacks via inheritanc
 reside in separate repository https://github.com/sashafirsov/slotted-element-test to avoid unnecessary dependency in 
 source repo and npm.
 
+# dependencies
+None, just a browser with Web Components support.
 
 [npm-image]:      https://img.shields.io/npm/v/slotted-element.svg
 [npm-url]:        https://npmjs.org/package/slotted-element

demo/index.html

@@ -52,8 +52,12 @@ <h1> slotted-element demo </h1>
 <html-demo-element legend="array dwarfs.json as table">
     <slotted-element src="dwarfs.json"></slotted-element>
 </html-demo-element>
+
+<html-demo-element legend="src is image confused.svg">
+    <slotted-element src="confused.svg"></slotted-element>
+</html-demo-element>
 </main>
-<script type="module" src="https://unpkg.com/html-demo-element@1.0.5/html-demo-element.js"></script>
+<script type="module" src="https://unpkg.com/html-demo-element@1.0.7/html-demo-element.js"></script>
 <script type="module" src="../slotted-element.js"></script>
 
 </body>

demo/render-from-json.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>render table from json - FetchElement</title>
-    <script type="module" src="https://unpkg.com/html-demo-element@1.0.5/html-demo-element.js"></script>
+    <script type="module" src="https://unpkg.com/html-demo-element@1.0.7/html-demo-element.js"></script>
     <style>
         @import "demo.css";
     </style>
@@ -38,5 +38,9 @@ <h1> fetch-element render from JSON demo </h1>
         <fetch-element src="dwarfs.json"></fetch-element>
     </html-demo-element>
 </main>
+<main>
+    <html-demo-element legend="dwarfs.json" src="dwarfs.json"></html-demo-element>
+    <html-demo-element legend="doc.json" src="doc.json"></html-demo-element>
+</main>
 </body>
 </html>

demo/render-from-xml.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>render table from json - FetchElement</title>
+    <script type="module" src="https://unpkg.com/html-demo-element@1.0.7/html-demo-element.js"></script>
+    <style>
+        @import "demo.css";
+    </style>
+</head>
+<body>
+<h1> fetch-element render from JSON demo </h1>
+<a href="https://github.com/sashafirsov/slotted-element"><img src="https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg">git</a> |
+<a href="index.html"> slotted-element demo </a>
+<main>
+    <html-demo-element legend="Custom renderer">
+        <json-render-element src="doc.json"></json-render-element>
+        <script type="module">
+            import FetchElement from '../fetch-element.js';
+            window.customElements.define('json-render-element',
+                class JsonElement extends FetchElement
+                {
+                    render(json)
+                    {
+                        return `<h1>${ json.name }</h1>
+                                <img src="${ json.portrait }" alt="" />
+                                `;
+                    }
+                });
+        </script>
+    </html-demo-element>
+
+    <html-demo-element legend="Default as table">
+        <fetch-element src="doc.json"></fetch-element>
+    </html-demo-element>
+
+    <html-demo-element legend="Array as table">
+        <fetch-element src="dwarfs.json"></fetch-element>
+    </html-demo-element>
+</main>
+</body>
+</html>

demo/template-demo.html

@@ -5,7 +5,7 @@
     <style>
         @import "demo.css";
     </style>
-    <script type="module" src="https://unpkg.com/html-demo-element@1.0.5/html-demo-element.js"></script>
+    <script type="module" src="https://unpkg.com/html-demo-element@1.0.7/html-demo-element.js"></script>
     <script type="module" src="../slotted-element.js"></script>
 
 </head>

fetch-element.js

@@ -20,6 +20,9 @@ FetchElement extends HTMLElement
 
     static get mime2mod(){ return   {   'application/json':'./render/json.js'
                                     ,   'text/html': FetchElement.prototype.renderHtml
+                                    ,   'text/xml': FetchElement.prototype.renderHtml
+                                    ,   'application/xml': FetchElement.prototype.renderHtml
+                                    ,   'image/svg+xml': FetchElement.prototype.renderHtml
                                     }}
 
     get headers(){ return {} }
@@ -140,39 +143,6 @@ FetchElement extends HTMLElement
 
     getKeys( obj ){ return Object.keys( obj ); }
 
-    json2table( data, path )
-    {
-        if( Array.isArray( data ) )
-        {
-            if( !data.length )
-                return '';
-            const keys = this.getKeys( data[ 0 ] );
-
-            return `
-<table>
-    <tr>${ keys.map( k => `<th>${ k }</th>` ).join( '\n' ) }</tr>
-    ${ data.map( ( r, i ) => `
-    <tr>${ keys.map( k => `
-        <td key="${ toKebbabCase( k ) }">
-            ${ this.json2table( r[ k ], [ ...path, i, k ] ) }
-        </td>` ).join( '' )
-            }
-    </tr>` ).join( '\n' ) }
-</table>
-`
-        }
-        if( typeof data !== 'object' || data === null )
-            return data;
-        const keys = this.getKeys( data );
-        return `
-<table>
-    ${ keys.map( k => `
-<tr><th>${ k }</th>
-    <td key="${ toKebbabCase( k ) }">${ this.json2table( data[ k ], [ ...path, k ] ) }</td>
-</tr>` ).join( '' ) }
-</table>
-`
-    }
 
 }
 

package.json

@@ -1,7 +1,7 @@
 {
     "name": "slotted-element",
-    "version": "1.0.2",
-    "description": "Web component fetch-element for ajax and render JSON as table and slotted-element without shadow DOM",
+    "version": "1.0.3",
+    "description": "Web component fetch-element for ajax and render JSON/XML data as table and slotted-element without shadow DOM",
     "author":
     {   "name": "Sasha Firsov",
         "email": "suns@simulationworks.com",