snabbdom-jsx - npm Package Compare versions

Comparing version 0.1.3 to 0.2.0

examples/counter/build.js

@@ -0,0 +0,0 @@ (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

examples/counter/js/counter.js

@@ -0,0 +0,0 @@ /** @jsx html */

examples/counter/js/counterList.js

@@ -0,0 +0,0 @@ /** @jsx html */

examples/counter/js/main.js

@@ -0,0 +0,0 @@ import snabbdom from 'snabbdom';

examples/counter/package.json

@@ -0,0 +0,0 @@ {

examples/hello-svg/build.js

@@ -0,0 +0,0 @@ (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

examples/hello-svg/main.js

@@ -0,0 +0,0 @@ /** @jsx html */

examples/hello-svg/package.json

@@ -0,0 +0,0 @@ {

examples/hello-svg/snabbdom-modules/attributes.js

@@ -0,0 +0,0 @@ function updateAttrs(oldVnode, vnode) {

examples/hello-svg/svg.js

@@ -0,0 +0,0 @@ /** @jsx svg */

examples/hello/build.js

@@ -0,0 +0,0 @@ (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

examples/hello/main.js

@@ -0,0 +0,0 @@ /** @jsx html */

examples/hello/package.json

@@ -0,0 +0,0 @@ {

examples/todomvc/build.js

@@ -0,0 +0,0 @@ (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

examples/todomvc/js/helpers.js

@@ -0,0 +0,0 @@

examples/todomvc/js/main.js

@@ -0,0 +0,0 @@ import snabbdom from 'snabbdom';

examples/todomvc/js/snabbdom-modules/window-events.js

@@ -0,0 +0,0 @@ import eventlisteners from 'snabbdom/modules/eventlisteners';

examples/todomvc/js/task.js

@@ -0,0 +0,0 @@ /** @jsx html */

examples/todomvc/js/todos.js

@@ -0,0 +0,0 @@ /** @jsx html */

examples/todomvc/package.json

@@ -0,0 +0,0 @@ {

package.json

 {
   "name": "snabbdom-jsx",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Write snabbdom views using JSX and Babel",
   "main": "snabbdom-jsx.js",
   "scripts": {
-    "test": "babel test.js | node"
+    "test": "babel-node test.js"
   },
@@ -25,2 +25,4 @@ "repository": {
   "devDependencies": {
+    "babel-cli": "^6.1.18",
+    "babel-plugin-syntax-jsx": "^6.0.14",
     "babel-plugin-transform-es2015-destructuring": "^6.0.18",
@@ -30,5 +32,4 @@ "babel-plugin-transform-es2015-modules-commonjs": "^6.1.3",
     "babel-plugin-transform-react-jsx": "^6.0.18",
-    "babel-plugin-syntax-jsx": "^6.0.14",
     "tape": "^4.0.3"
   }
 }

README.md

@@ -5,3 +5,3 @@ Write [Snabbdom](https://github.com/paldepind/snabbdom) virtual DOM with [Babel's JSX](http://babeljs.io/docs/advanced/transformers/other/react/).
 
-Babel is JavaScript compiler that converts ES2015 (modern JavaScript) into compatible JavaScript (ES5) code. A nice feature of Babel is that it supports [React JSX syntax](http://facebook.github.io/react/docs/displaying-data.html#jsx-syntax) and in the same time allows you to take the result of this JSX (attributes + body) and do wharever you like with it. Snabbdom-jsx transforms this JSX data into snabbdom virtual nodes. 
+Babel is JavaScript compiler that converts ES2015 (modern JavaScript) into compatible JavaScript (ES5) code. A nice feature of Babel is that it supports [React JSX syntax](http://facebook.github.io/react/docs/displaying-data.html#jsx-syntax) and in the same time allows you to take the result of this JSX (attributes + body) and do wharever you like with it. Snabbdom-jsx transforms this JSX data into snabbdom virtual nodes.
 
@@ -11,3 +11,3 @@ Features:
 - Transforms Babel JSX templates into Snabbdom virtual nodes
-- Straightforward mapping from JSX attributes to Snabbdom data attributes using namespaces 
+- Straightforward mapping from JSX attributes to Snabbdom data attributes using namespaces
 - JSX Components are simple functions `(attributes, children) => vnode`. No more messy classes.
@@ -48,3 +48,3 @@
 ```js
-const myInput = h('input', { 
+const myInput = h('input', {
   props: { type: 'text' }       // handled by the props module
@@ -92,3 +92,3 @@ on: { change: someCallback }, // handled by the eventlisteners module
   class-enabled={isEnabled}>
-  
+
   ...
@@ -99,8 +99,8 @@ </div>
 
-h('div', { 
-  class: { visible: isVisible, enabled: isEnabled } 
+h('div', {
+  class: { visible: isVisible, enabled: isEnabled }
 }, [...])
 ```
 
-But you can also specify an unique object the same way as in the `h` function, this is useful when you have a dynamic object 
+But you can also specify an unique object the same way as in the `h` function, this is useful when you have a dynamic object
 
@@ -110,3 +110,3 @@ ```js
   style={ ({fontWeight: 'bold', color: 'red'}) }>
-  
+
   ...
@@ -117,4 +117,4 @@ </div>
 
-h('div', { 
-  style: {fontWeight: 'bold', color: 'red'} 
+h('div', {
+  style: {fontWeight: 'bold', color: 'red'}
 }, [...])
@@ -130,3 +130,3 @@ ```
   class-enabled={isEnabled}>
-  
+
   ...
@@ -139,3 +139,3 @@ </div>
 
-In Snabbdom you can create an element using a css-like syntax 
+In Snabbdom you can create an element using a css-like syntax
 
@@ -146,3 +146,3 @@ ```js
 
-This will add the class names to the classList of the element. Unlike classes specified in the `class` namesapce, those are static classes meaning they will not be re-updated during patch operations. 
+This will add the class names to the classList of the element. Unlike classes specified in the `class` namesapce, those are static classes meaning they will not be re-updated during patch operations.
 
@@ -192,5 +192,5 @@ In JSX you can use the `classNames` attribute to create static classes
 
-As in React, note that all components must start with a capital letter, while regular HTML tags start with lower case letters. This the way Babel also distinguish component invocation from simple tag creation. 
+As in React, note that all components must start with a capital letter, while regular HTML tags start with lower case letters. This the way Babel also distinguish component invocation from simple tag creation.
 
-Perhaps of less obvious utility, but instead of a function, a component can also be an object with a `view` function; i added this in order to support nesting in UI patterns; especially in the Elm architecture, where a component is an object with a `view` function (among others)
+Perhaps of less obvious utility, but instead of a function, a component can also be an object with a `view` or `render` function; i added this in order to support nesting in UI patterns; especially in the Elm architecture, where a component is an object with a `view` (or `render`) function (among others)
 
@@ -215,3 +215,9 @@ for example you can have a `Task` component
 
+You can also add a `key` attribute directly to a Component. It will be copied inside the resulting vnode
 
+```js
+Todos.view = ({todos}) =>
+  todos.map( task => <Task key={task.id} task={task} /> )
+```
+
 If you're wondering how Components would fit in a large application, you can look into the [todomvc example](https://github.com/yelouafi/snabbdom-jsx/tree/master/examples/todomvc). The application is implemented using the Elm architecture. For more information see [React-less Virtual DOM with Snabbdom : functions everywhere!](https://medium.com/@yelouafi/react-less-virtual-dom-with-snabbdom-functions-everywhere-53b672cb2fe3)

snabbdom-jsx.js

 "use strict";
 
 var SVGNS = "http://www.w3.org/2000/svg";
-var modulesNS = ['key', 'hook', 'on', 'style', 'class', 'props'];
+var modulesNS = ['hook', 'on', 'style', 'class', 'props'];
 var slice = Array.prototype.slice;
@@ -31,6 +31,8 @@
   return map;
-  
+
   function addAttr(namespace, key, val) {
-    var ns = map[namespace] || (map[namespace] = {});
-    ns[key] = val;
+    if(key !== 'key') {
+      var ns = map[namespace] || (map[namespace] = {});
+      ns[key] = val;
+    }
   }
@@ -44,17 +46,28 @@ }
     tag = tag + '.' + (
-      Array.isArray(cns) ? cns.join('.') : cns.replace(/\s+/g, '.')  
+      Array.isArray(cns) ? cns.join('.') : cns.replace(/\s+/g, '.')
     );
   }
+
   if(typeof tag === 'string') {
-    return { 
-      sel       : tag, 
-      data      : normalizeAttrs(attrs, nsURI, defNS, modules), 
-      children  : children.map( function(c) { 
+    return {
+      sel       : tag,
+      data      : normalizeAttrs(attrs, nsURI, defNS, modules),
+      children  : children.map( function(c) {
         return isPrimitive(c) ? {text: c} : c;
-      })
+      }),
+      key: attrs.key
     };
-  } else if(typeof tag === 'function')
-    return tag(attrs, children);
-  else if(tag && typeof tag.view === 'function')
-    return tag.view(attrs, children);
+  } else {
+    var res;
+    if(typeof tag === 'function')
+      res = tag(attrs, children);
+    else if(tag && typeof tag.view === 'function')
+      res = tag.view(attrs, children);
+    else if(tag && typeof tag.render === 'function')
+      res = tag.view(attrs, children);
+    else
+      throw "JSX tag must be either a string, a function or an object with 'view' or 'render' methods";
+    res.key = attrs.key;
+    return res;
+  }
 }
@@ -70,6 +83,6 @@
 
-module.exports = { 
-  html: JSX(undefined), 
-  svg: JSX(SVGNS, 'attrs'), 
-  JSX: JSX 
+module.exports = {
+  html: JSX(undefined),
+  svg: JSX(SVGNS, 'attrs'),
+  JSX: JSX
 };

test.js

@@ -7,10 +7,10 @@ /** @jsx html */
 test('jsx -> html vnode', (assert) => {
-  
+
   function callback() {};
   const style = { fontWeight: 'bold' };
-  const div1 = 
+  const div1 =
     <div classNames="c1 c2">
       <label htmlFor="someid">label</label>
     </div>;
-  
+
   assert.equal(div1.sel, 'div.c1.c2');
@@ -25,10 +25,12 @@ assert.equal(div1.data.ns, undefined);
       },
-      children: [{ text: 'label'}]
-    }  
+      children: [{ text: 'label'}],
+      key: undefined
+    }
   ]);
-  
-  const div2 = 
+
+  const div2 =
     <div>
-      <input 
-        type="text" 
+      <input
+        type="text"
+        key="key"
         style={style}
@@ -39,3 +41,3 @@ style-color='red'
     </div>;
-    
+
   assert.deepEqual(div2.children[0], {
@@ -50,3 +52,4 @@ sel: 'input',
     },
-    children: []
+    children: [],
+    key: 'key'
   });
@@ -58,3 +61,3 @@
 test('jsx components', (assert) => {
-  
+
   const MyDiv = ({color, fontWeight}) =>
@@ -64,5 +67,5 @@ <div
     </div>;
-    
-  const mydiv1 = <MyDiv color="red" fontWeight="bold" />;
-  
+
+  const mydiv1 = <MyDiv key="key" color="red" fontWeight="bold" />;
+
   assert.deepEqual(mydiv1,
@@ -75,8 +78,9 @@ {
       },
-      children: []
-    }  
+      children: [],
+      key: 'key'
+    }
   );
-  
 
+
   assert.end();
-});
+});

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

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

Lines of code

3347

increased by0.51%

Number of lines in readme file

212

increased by2.91%

Worsened metrics

Total package byte prevSize

134569

decreased by-15.34%

Dev dependency count

7

increased by16.67%

Number of package files

31

decreased by-20.51%

No dependency changes