snabbdom - npm Package Compare versions

Comparing version 0.7.0 to 0.7.1

gulpfile.js

@@ -35,2 +35,6 @@ var gulp = require('gulp')
 
+gulp.task('bundle:module:dataset', function() {
+  return standalone('snabbdom_dataset', './modules/dataset.js')
+})
+
 gulp.task('bundle:module:props', function() {
@@ -59,2 +63,3 @@ return standalone('snabbdom_props', './modules/props.js')
   'bundle:module:class',
+  'bundle:module:dataset',
   'bundle:module:props',
@@ -61,0 +66,0 @@ 'bundle:module:style',

h.d.ts

 import { VNode, VNodeData } from './vnode';
+export declare type VNodes = Array<VNode>;
+export declare type VNodesSparse = VNode | Array<VNode | undefined | null>;
 export declare function h(sel: string): VNode;
 export declare function h(sel: string, data: VNodeData): VNode;
 export declare function h(sel: string, text: string): VNode;
-export declare function h(sel: string, children: Array<VNode | undefined | null>): VNode;
+export declare function h(sel: string, children: VNodesSparse): VNode;
 export declare function h(sel: string, data: VNodeData, text: string): VNode;
-export declare function h(sel: string, data: VNodeData, children: Array<VNode | undefined | null>): VNode;
+export declare function h(sel: string, data: VNodeData, children: VNodesSparse): VNode;
 export default h;

h.js

@@ -47,3 +47,3 @@ "use strict";
             if (is.primitive(children[i]))
-                children[i] = vnode_1.vnode(undefined, undefined, undefined, children[i]);
+                children[i] = vnode_1.vnode(undefined, undefined, undefined, children[i], undefined);
         }
@@ -50,0 +50,0 @@ }

package.json

 {
   "name": "snabbdom",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "A virtual DOM library with focus on simplicity, modularity, powerful features and performance.",
   "main": "snabbdom.js",
+  "module": "es/snabbdom.js",
   "typings": "snabbdom.d.ts",
@@ -29,3 +30,5 @@ "directories": {
     "test": "testem",
-    "compile": "tsc",
+    "compile": "npm run compile-es && npm run compile-commonjs",
+    "compile-es": "tsc --outDir es --module es6 --moduleResolution node",
+    "compile-commonjs": "tsc --outDir ./",
     "prepublish": "npm run compile",
@@ -32,0 +35,0 @@ "release-major": "xyz --repo [e-mail]:paldepind/snabbdom.git --increment major",

README.md

@@ -156,2 +156,27 @@ # Snabbdom
 
+### `snabbdom/tovnode`
+
+Converts a DOM node into a virtual node. Especially good for patching over an pre-existing, 
+server-side generated content.
+
+```javascript
+var snabbdom = require('snabbdom')
+var patch = snabbdom.init([ // Init patch function with chosen modules
+  require('snabbdom/modules/class').default, // makes it easy to toggle classes
+  require('snabbdom/modules/props').default, // for setting properties on DOM elements
+  require('snabbdom/modules/style').default, // handles styling on elements with support for animations
+  require('snabbdom/modules/eventlisteners').default, // attaches event listeners
+]);
+var h = require('snabbdom/h').default; // helper function for creating vnodes
+var toVNode = require('snabbdom/tovnode').default;
+
+var newNode = h('div', {style: {color: '#000'}}, [
+  h('h1', 'Headline'),
+  h('p', 'A paragraph'),
+]);
+
+patch(toVNode(document.querySelector('.container')), newVNode)
+
+```
+
 ### Hooks
@@ -493,18 +518,24 @@
 
-#### Using Classes
-Due to a bug in certain browsers like IE 11 and below and UC Browser, SVG Objects in these browsers do not support classlist property. Hence, the classes module (which uses classlist property internally) will not work for these browsers.
+#### Using Classes in SVG Elements
 
-Also, using snabbdom/h to create an element by passing a className along with the element type will not work as className property is read-only for SVG elements.
+Certain browsers (like IE <=11) [do not support `classList` property in SVG elements](http://caniuse.com/#feat=classlist).
+Hence, the _class_ module (which uses `classList` property internally) will not work for these browsers.
 
-You can add classes to SVG elements for both of these cases by using the attributes module as shown below:-
-```javascript
-h('text', {
-    attrs: {
-      x: xPos,
-      y: yPos,
-      dy: "5",
-      class: 'text_class'
-    }},
-  text
-);
+The classes in selectors for SVG elements work fine from version 0.6.7.
+
+You can add dynamic classes to SVG elements for these cases by using the _attributes_ module and an Array as shown below:
+
+```js
+h('svg', [
+  h('text.underline', { // 'underline' is a selector class, remain unchanged between renders.
+      attrs: {
+        // 'active' and 'red' are dynamic classes, they can change between renders
+        // so we need to put them in the class attribute.
+        // (Normally we'd use the classModule, but it doesn't work inside SVG)
+        class: [isActive && "active", isColored && "red"].filter(Boolean).join(" ")
+      }
+    },
+    'Hello World'
+  )
+])
 ```
@@ -672,3 +703,3 @@
 * [Tung](https://github.com/Reon90/tung) –
-  A javascript library for rendering html. Tung helps to divide html and javascript development.
+  A JavaScript library for rendering html. Tung helps to divide html and JavaScript development.
 * [sprotty](https://github.com/theia-ide/sprotty) - "A web-based diagramming framework" uses Snabbdom.
@@ -678,2 +709,1 @@
 using Snabbdom.
-

snabbdom.js

@@ -229,9 +229,11 @@ "use strict";
         }
-        if (oldStartIdx > oldEndIdx) {
-            before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm;
-            addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
+        if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
+            if (oldStartIdx > oldEndIdx) {
+                before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm;
+                addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
+            }
+            else {
+                removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
+            }
         }
-        else if (newStartIdx > newEndIdx) {
-            removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
-        }
     }
@@ -238,0 +240,0 @@ function patchVnode(oldVnode, vnode, insertedVnodeQueue) {

src/h.ts

 import {vnode, VNode, VNodeData} from './vnode';
+export type VNodes = Array<VNode>;
+export type VNodesSparse = VNode | Array<VNode | undefined | null>;
 import * as is from './is';
 
-function addNS(data: any, children: Array<VNode> | undefined, sel: string | undefined): void {
+function addNS(data: any, children: VNodes | undefined, sel: string | undefined): void {
   data.ns = 'http://www.w3.org/2000/svg';
@@ -10,3 +12,3 @@ if (sel !== 'foreignObject' && children !== undefined) {
       if (childData !== undefined) {
-        addNS(childData, (children[i] as VNode).children as Array<VNode>, children[i].sel);
+        addNS(childData, (children[i] as VNode).children as VNodes, children[i].sel);
       }
@@ -20,5 +22,5 @@ }
 export function h(sel: string, text: string): VNode;
-export function h(sel: string, children: Array<VNode | undefined | null>): VNode;
+export function h(sel: string, children: VNodesSparse): VNode;
 export function h(sel: string, data: VNodeData, text: string): VNode;
-export function h(sel: string, data: VNodeData, children: Array<VNode | undefined | null>): VNode;
+export function h(sel: string, data: VNodeData, children: VNodesSparse): VNode;
 export function h(sel: any, b?: any, c?: any): VNode {
@@ -39,3 +41,3 @@ var data: VNodeData = {}, children: any, text: any, i: number;
     for (i = 0; i < children.length; ++i) {
-      if (is.primitive(children[i])) children[i] = (vnode as any)(undefined, undefined, undefined, children[i]);
+      if (is.primitive(children[i])) children[i] = vnode(undefined, undefined, undefined, children[i], undefined);
     }
@@ -42,0 +44,0 @@ }

src/snabbdom.ts

@@ -243,7 +243,9 @@ /* global module, document, Node */
     }
-    if (oldStartIdx > oldEndIdx) {
-      before = newCh[newEndIdx+1] == null ? null : newCh[newEndIdx+1].elm;
-      addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
-    } else if (newStartIdx > newEndIdx) {
-      removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
+    if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
+      if (oldStartIdx > oldEndIdx) {
+        before = newCh[newEndIdx+1] == null ? null : newCh[newEndIdx+1].elm;
+        addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
+      } else {
+        removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
+      }
     }
@@ -250,0 +252,0 @@ }

tsconfig.json

 {
     "compilerOptions": {
-        "module": "commonjs",
         "target": "ES5",
-        "outDir": "./",
         "noImplicitAny": true,
@@ -7,0 +5,0 @@ "sourceMap": true,

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

Total package byte prevSize

794972

increased by13.71%

Number of package files

173

increased by45.38%

Lines of code

8426

increased by17.62%

Number of lines in readme file

706

increased by4.44%

Worsened metrics

Number of low supply chain risk alerts

47

increased by4.44%

No dependency changes