Merge pull request #7 from sashafirsov/develop

rev1.0.3
sashafirsov · Jul 8, 2021 · cbdc0d4 · cbdc0d4
2 parents a1aa1a7 + 2cd0838
commit cbdc0d4
Show file tree

Hide file tree

Showing 12 changed files with 347 additions and 99 deletions.
diff --git a/.gitignore b/.gitignore
@@ -105,3 +105,5 @@ dist
 
 # TernJS port file
 .tern-port
+
+.gradle
diff --git a/README.md b/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

diff --git a/demo/confused.svg b/demo/confused.svg
diff --git a/demo/demo.css b/demo/demo.css
@@ -0,0 +1,2 @@
+main{ display: flex; flex-wrap: wrap; justify-content:space-evenly; }
+html-demo-element{margin: 1rem 0;}
diff --git a/demo/index.html b/demo/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="utf-8">
     <style>
-
+        @import "demo.css";
     </style>
 </head>
 <body>
@@ -12,22 +12,24 @@ <h1> slotted-element 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="render-from-json.html"> fetch-element demo </a> |
 <a href="template-demo.html"> template demo </a>
+
 <p>
     <var>slotted-element</var> is web component implementing slots without shadow DOM.
     It is based on <var>fetch-element</var> component to fetch data and render from retrieved JSON or HTML.
 </p>
-<html-demo-element>
+<main>
+<html-demo-element legend="From url">
     <slotted-element src="embedded.html"></slotted-element>
 </html-demo-element>
 
-<html-demo-element title="Error case">
+<html-demo-element legend="Error case">
     <slotted-element src="https://badUrl.heck">
         <p slot="loading" hidden>Loading... ⏳ </p>
         <p slot="error" hidden>Something went wrong. 😭 </p>
     </slotted-element>
 </html-demo-element>
 
-<html-demo-element title="Content would be placed inside of 'loaded' slot ">
+<html-demo-element legend="Content would be placed inside of 'loaded' slot ">
     <slotted-element src="embedded.html">
         <fieldset>
             <legend> Slots located in wrapper </legend>
@@ -38,7 +40,7 @@ <h1> slotted-element demo </h1>
     </slotted-element>
 </html-demo-element>
 
-<html-demo-element>
+<html-demo-element legend="From key:value JSON">
     <slotted-element src="doc.json">
         <fieldset>
             <legend> <b>doc.json</b> as table </legend>
@@ -47,11 +49,15 @@ <h1> slotted-element demo </h1>
     </slotted-element>
 </html-demo-element>
 
-<html-demo-element title="array dwarfs.json as table">
+<html-demo-element legend="array dwarfs.json as table">
     <slotted-element src="dwarfs.json"></slotted-element>
 </html-demo-element>
 
-<script type="module" src="https://unpkg.com/html-demo-element@1.0.1/html-demo-element.js"></script>
+<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.7/html-demo-element.js"></script>
 <script type="module" src="../slotted-element.js"></script>
 
 </body>

diff --git a/demo/render-from-json.html b/demo/render-from-json.html
@@ -3,37 +3,44 @@
 <head>
     <meta charset="UTF-8">
     <title>render table from json - FetchElement</title>
-    <script type="module" src="https://unpkg.com/html-demo-element@1.0.1/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>
 </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>
-
-<html-demo-element title="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)
+<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
                 {
-                    return `<h1>${ json.name }</h1>
-                            <img src="${ json.portrait }" alt="" />
-                            `;
-                }
-            });
-    </script>
-</html-demo-element>
-
-<html-demo-element title="Default as table">
-    <fetch-element src="doc.json"></fetch-element>
-</html-demo-element>
+                    render(json)
+                    {
+                        return `<h1>${ json.name }</h1>
+                                <img src="${ json.portrait }" alt="" />
+                                `;
+                    }
+                });
+        </script>
+    </html-demo-element>
 
-<html-demo-element title="Array as table">
-    <fetch-element src="dwarfs.json"></fetch-element>
-</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>
+<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>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -105,3 +105,5 @@ dist

		# TernJS port file
		.tern-port

		.gradle
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		main{ display: flex; flex-wrap: wrap; justify-content:space-evenly; }
		html-demo-element{margin: 1rem 0;}