jsxon - npm Package Compare versions

Comparing version 0.0.2 to 0.0.8

bower.json

 {
   "name": "jsxon",
-  "version": "0.0.2",
+  "version": "0.0.8",
   "homepage": "https://github.com/re5et/jsxon",
@@ -5,0 +5,0 @@ "authors": [

Gruntfile.js

@@ -1,19 +0,17 @@
-module.exports = function(grunt){
+module.exports = function(grunt) {
   grunt.initConfig({
-    react: {
-      dynamic_mappings: {
-        files: [
-          {
-            expand: true,
-            cwd: './jsx',
-            src: ['**/*.jsx'],
-            dest: 'js',
-            ext: '.js'
-          }
-        ]
+    'mocha-chai-sinon': {
+      build: {
+        src: ['./specs/**/*.spec.js'],
+        options: {
+          ui: 'bdd',
+          reporter: 'spec'
+        }
       }
     }
   });
-
-  grunt.loadNpmTasks('grunt-react');
-}
+  grunt.loadNpmTasks("grunt-mocha-chai-sinon");
+  grunt.registerTask('test', [
+    'mocha-chai-sinon'
+  ]);
+};

jsxon.amd.js

 define(['react'], function(React){
 
-  var jsxon = function(obj, rootElement){
+  var specialProperties = ['el', 'children', 'text', 'defaultType'];
+
+  var jsxon = function(obj, defaultType){
+
+    defaultType = defaultType || "div";
+
+    if(obj.className && obj.className.join){
+      obj.className = obj.className.join(' ');
+    }
+
     var props = {};
+
     for(var prop in obj){
-      if(prop != "el" && prop != "children" && prop != "text"){
+      if(specialProperties.indexOf(prop) == -1){
         props[prop] = obj[prop];
       }
     }
-    var element = React.createElement(obj.el, props, obj.text);
-    if(!rootElement){
-      rootElement = element;
+
+    if(typeof(obj.children) == "string"){
+      obj.text = obj.children;
+      delete obj.children;
     }
-    if(obj.children){
-      element.props.children = obj.children.map(function(child){
-        return jsxon(child, rootElement);
+
+    if(obj.defaultType){
+      defaultType = obj.defaultType;
+    }
+
+    var elementType = obj.el || obj.defaultType || defaultType;
+
+    if(obj.text || obj.children){
+      var children = obj.text || obj.children.map(function(child){
+        return jsxon(child, defaultType);
       });
-      return element;
-    } else {
-      return element;
     }
+
+    return React.createElement(elementType, props, children);
   };
@@ -23,0 +40,0 @@

jsxon.cjs.js

 var React = require('react');
 
-var jsxon = function(obj, rootElement){
+var specialProperties = ['type', 'children', 'text', 'defaultType'];
+
+var jsxon = function(obj, defaultType){
+
+  defaultType = defaultType || "div";
+
+  if(obj.className && obj.className.join){
+    obj.className = obj.className.join(' ');
+  }
+
   var props = {};
+
   for(var prop in obj){
-    if(prop != "el" && prop != "children" && prop != "text"){
+    if(specialProperties.indexOf(prop) == -1){
       props[prop] = obj[prop];
     }
   }
-  var element = React.createElement(obj.el, props, obj.text);
-  if(!rootElement){
-    rootElement = element;
+
+  if(typeof(obj.children) == "string"){
+    obj.text = obj.children;
+    delete obj.children;
   }
-  if(obj.children){
-    element.props.children = obj.children.map(function(child){
-      return jsxon(child, rootElement);
+
+  if(obj.defaultType){
+    defaultType = obj.defaultType;
+  }
+
+  var elementType = obj.type || obj.defaultType || defaultType;
+
+  if(obj.text || obj.children){
+    var children = obj.text || obj.children.map(function(child){
+      return jsxon(child, defaultType);
     });
-    return element;
-  } else {
-    return element;
   }
+
+  return React.createElement(elementType, props, children);
 };
 
 module.exports = jsxon;

package.json

 {
   "name": "jsxon",
-  "version": "0.0.2",
+  "version": "0.0.8",
   "description": "JSX object notation - converts from simple javascript objects to JSX",
@@ -23,4 +23,7 @@ "author": "atom smith <@re5et>",
   "devDependencies": {
+    "grunt": "*",
+    "grunt-cli": "*",
+    "grunt-mocha-chai-sinon": "*"
   },
   "license": "MIT"
 }

README.md

 # jsxon
 
-jsx html is annoying. React.createElement is annoying.
+jsx is annoying.  I made this because I prefer to do things with
+js, and React.createElement is too much of a hassle.
+
+# what this lets you do:
+
+* just use js
+* no compile step
+* no hoop jumping to get your text editor to play nice (it is just js)
+* you only have to call jsxon once, when you are ready to render.
+  Your entire application could have a single jsxon call if you
+  wanted. You can split up your logic and build up the object you pass
+  in however you want.
+
+# example
+
+```javascript
+return jsxon({
+    type: 'ul',
+    defaultElement: 'li'
+    children: [0,1,2,3,4].map(function(i){
+        return {
+            text: i
+            key: "item-"+i
+        }
+    })
+});
+```
+
+is equivalent to this jsx:
+
+```jsx
+var listItems = function(){
+  return [0,1,2,3,4].map(function(i){
+    return <li key="item-{i}">{i}</li>
+  })
+}
+
+return (<ul>
+  {listtItems()}
+</ul>)
+```
+
+# All keys are passed on to react except the following special keys:
+
+* type: the element type to use (div / ul / li / etc)
+* text: key to specify text for element (instead of children)
+* children: key to specify the child nodes of an element
+* defaultType: set the default type of element to use for type
+  (hierachical), see: defaultType
+
+# things this does that jsx doesn't do for you)
+
+* defaultType
+
+You can set the default element for "here on down".  See the example
+of lists of lists:
+
+```javascript
+var lists = ['fooList', 'barList', 'bazList'];
+var items = [0,1,2,3];
+
+return jsxon({
+  type: 'ol',
+  defaultElement: 'li',
+  children: lists.sort.map(function(list){
+    return {
+            type: 'ul'
+      children: items.map(function(item){
+                return {
+                    defaultElement: 'span'
+                    children: [{
+                        text: list
+                    },{
+                        text: ' item: '
+                    },{
+                        text: item
+                    }]
+                }
+            })
+    }
+  })
+});
+```
+
+is equivalent to this jsx:
+
+```jsx
+return (<ol>
+    <li>
+        <ul>
+            <li>
+                <span>barList</span>
+                <span> item: </span>
+                <span>0</span>
+            </li>
+            <li>
+                <span>barList</span>
+                <span> item: </span>
+                <span>1</span>
+            </li>
+            <li>
+                <span>barList</span>
+                <span> item: </span>
+                <span>2</span>
+            </li>
+            <li>
+                <span>barList</span>
+                <span> item: </span>
+                <span>3</span>
+            </li>
+        </ul>
+    </li>
+    <li>
+        <ul>
+            <li>
+                <span>bazList</span>
+                <span> item: </span>
+                <span>0</span>
+            </li>
+            <li>
+                <span>bazList</span>
+                <span> item: </span>
+                <span>1</span>
+            </li>
+            <li>
+                <span>bazList</span>
+                <span> item: </span>
+                <span>2</span>
+            </li>
+            <li>
+                <span>bazList</span>
+                <span> item: </span>
+                <span>3</span>
+            </li>
+        </ul>
+    </li>
+    <li>
+        <ul>
+            <li>
+                <span>fooList</span>
+                <span> item: </span>
+                <span>0</span>
+            </li>
+            <li>
+                <span>fooList</span>
+                <span> item: </span>
+                <span>1</span>
+            </li>
+            <li>
+                <span>fooList</span>
+                <span> item: </span>
+                <span>2</span>
+            </li>
+            <li>
+                <span>fooList</span>
+                <span> item: </span>
+                <span>3</span>
+            </li>
+        </ul>
+    </li>
+</ol>)
+```
+
+* className
+
+You can optionally use an array to specify className, it will be
+joined for you.  This can be handy, for stuff like:
+
+```javascript
+classNames = [];
+
+if(showTheThing()){
+  classNames.push('show');
+}
+else{
+  classNames.push('hide');
+}
+
+return jsxon({
+  id: 'foo',
+  className: classNames
+});
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12177

increased by298.33%

Number of package files

10

increased by11.11%

Lines of code

261

increased by128.95%

Number of lines in readme file

186

increased by4550%

Worsened metrics

Dev dependency count

3

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes