literaljs - npm Package Compare versions

Comparing version 1.1.6 to 1.1.7

build/index.js

@@ -6,2 +6,5 @@ 'use strict';
 });
+
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 var Literal = {
@@ -11,5 +14,9 @@ Component: function Component(html) {
   },
-  Render: function Render(rootComponent, documentNode) {
+  Render: function Render(components, documentNodeID) {
     window.addEventListener('DOMContentLoaded', function () {
-      document.body.innerHTML = components;
+      if (typeof components === 'string') {
+        document.querySelector('#' + documentNodeID).innerHTML = components;
+      } else if ((typeof components === 'undefined' ? 'undefined' : _typeof(components)) === 'object') {
+        createElementsFromJSON(components, documentNodeID);
+      }
     });
@@ -19,2 +26,31 @@ }
 
+var createElementsFromJSON = function createElementsFromJSON(json, node) {
+  var foundDOMNode = typeof node === 'string' ? document.getElementById(node) : node;
+
+  for (var i in json) {
+    var object = json[i];
+    var obj = document.createElement(object.element);
+
+    for (var key in object) {
+      if (!['children', 'element', 'innerHTML', 'events'].includes(key)) obj.setAttribute(key, object[key]);
+
+      if (key === 'innerHTML') obj.innerHTML = object[key];
+
+      if (key === 'events') {
+        if (object[key] instanceof Array) {
+          for (var event in object[key]) {
+            obj.addEventListener(object[key][event].type, object[key][event].action);
+          }
+        } else if (object[key] instanceof Object) {
+          obj.addEventListener(object[key].type, object[key].action);
+        }
+      }
+    }
+
+    if (_typeof(object.children) === 'object') createElementsFromJSON(object.children, obj);
+
+    foundDOMNode.appendChild(obj);
+  }
+};
+
 exports.default = Literal;

package.json

 {
   "name": "literaljs",
-  "version": "1.1.6",
-  "description": "Lightweight components using template literals.",
+  "version": "1.1.7",
+  "description":
+    "Lightweight components using template literals, strings, or arrays and objects.",
   "main": "build/index.js",
@@ -6,0 +7,0 @@ "scripts": {

readme.md

 # LiteralJS
 
-Is a simple view library for creating components with Template Literals.
+Is a simple view library for creating components with Template Literals, Strings, or Arrays and Objects.
 
@@ -19,5 +19,5 @@ # Usage without NPM
         `<div>
-          This should render like React.
+          This should render.
           <p>Isn't this lovely?</p>
-          ${otherComponent}
+          ${secondComponent}
         </div>`
@@ -32,3 +32,3 @@ );
 
-      Literal.Render(firstComponent);
+      Literal.Render(firstComponent, 'app');
     </script>
@@ -41,5 +41,7 @@ </body>
 
-#### Component
+#### Component([string, array])
 
-```
+With template literals, strings:
+
+```js
 Literal.Component(
@@ -54,11 +56,54 @@ `<p class="corn">
 
-Components just accept Template Literals and generate markup.
-You can combine components with `${ }`, like this:
+You can also use an **array with multiple objects**. Besides the example below, **objects should accept any attributes** and generate proper markup:
 
+```js
+Literal.Component([
+  {
+    element: 'div',
+    class: 'layout',
+    children: [
+      {
+        element: 'h1',
+        id: 'child',
+        innerHTML: 'This is a child of layout',
+        'data-example': 'data-works'
+      },
+      {
+        element: 'p',
+        class: 'content',
+        innerHTML: 'Amazing!',
+        events: [
+          {
+            type: 'click',
+            action: function() {
+              console.log('This event listener is working!');
+            }
+          }
+        ]
+      }
+    ]
+  },
+  {
+    element: 'div',
+    id: 'notchild',
+    innerHTML: 'This is not a child of layout.',
+    events: {
+      type: 'click',
+      action: function() {
+        console.log('This also works!');
+      }
+    }
+  }
+]);
 ```
+
+Components just accept **Template Literals**, **Strings**, or an **Array of Objects** and generate markup.
+You can combine template literal components with `${ }`, or just call another component directly inside of the component object:
+
+```js
 var firstComponent = Literal.Component(
   `<div>
-      This should render like React.
-      <p>Isn't this lovely?</p>
-      ${secondComponent}
+    This should render like React.
+    <p>Isn't this lovely?</p>
+    ${secondComponent}
   </div>`
@@ -74,8 +119,10 @@ );
 
+**It is recommended to use either template literals, strings, or object arrays and not mix them within the same Render call.**
+
 #### Render
 
+```js
+Literal.Render(RootComponent, 'app');
 ```
-Literal.Render(MainComponent);
-```
 
-The Render method takes the main parent component of your app.
+The Render method takes the main parent component of your app and `id` of the DOM node you want to attach the markup to.

No alert changes

Improved metrics

Total package byte prevSize

63398

increased by4.66%

Lines of code

42

increased by180%

Number of lines in readme file

124

increased by61.04%

No dependency changes