snabbdom - npm Package Compare versions

Comparing version 0.7.3 to 0.7.4

es/modules/attributes.d.ts

 import { Module } from './module';
-declare global  {
+declare global {
     interface Element {
@@ -4,0 +4,0 @@ setAttribute(name: string, value: string | number | boolean): void;

es/modules/hero.js

@@ -99,3 +99,3 @@ var raf = (typeof window !== 'undefined' && window.requestAnimationFrame) || setTimeout;
             origTransition = newStyle.transition;
-            if (newComputedStyle.display === 'inline')
+            if (newComputedStyle.display === 'inline') //inline elements cannot be transformed
                 newStyle.display = 'inline-block'; //this does not appear to have any negative side effects
@@ -111,3 +111,3 @@ newStyle.transition = origTransition + 'transform 0s';
             // Animate old element
-            for (var key in oldVnode.savedStyle) {
+            for (var key in oldVnode.savedStyle) { //re-apply saved inherited properties
                 if (parseInt(key) != key) {
@@ -117,3 +117,3 @@ var ms = key.substring(0, 2) === 'ms';
                     var webkit = key.substring(0, 6) === 'webkit';
-                    if (!ms && !moz && !webkit)
+                    if (!ms && !moz && !webkit) //ignore prefixed style properties
                         oldStyle[key] = oldVnode.savedStyle[key];
@@ -120,0 +120,0 @@ }

es/modules/style.js

@@ -62,3 +62,3 @@ // Bindig `requestAnimationFrame` like this fixes a bug in IE/Edge. See #360 and #409.
     if (!reflowForced) {
-        getComputedStyle(document.body).transform;
+        vnode.elm.offsetLeft;
         reflowForced = true;
@@ -65,0 +65,0 @@ }

es/snabbdom.js

@@ -149,3 +149,3 @@ import vnode from './vnode';
                 }
-                else {
+                else { // Text node
                     api.removeChild(parentElm, ch.elm);
@@ -191,3 +191,3 @@ }
             }
-            else if (sameVnode(oldStartVnode, newEndVnode)) {
+            else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
                 patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
@@ -198,3 +198,3 @@ api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm));
             }
-            else if (sameVnode(oldEndVnode, newStartVnode)) {
+            else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
                 patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
@@ -210,3 +210,3 @@ api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);
                 idxInOld = oldKeyToIdx[newStartVnode.key];
-                if (isUndef(idxInOld)) {
+                if (isUndef(idxInOld)) { // New element
                     api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
@@ -213,0 +213,0 @@ newStartVnode = newCh[++newStartIdx];

es/vnode.js

 export function vnode(sel, data, children, text, elm) {
     var key = data === undefined ? undefined : data.key;
-    return { sel: sel, data: data, children: children,
-        text: text, elm: elm, key: key };
+    return { sel: sel, data: data, children: children, text: text, elm: elm, key: key };
 }
 export default vnode;
 //# sourceMappingURL=vnode.js.map

karma.conf.js

@@ -5,4 +5,3 @@ const ci = !!process.env.CI;
 
-const identifier = process.env.BROWSERSTACK_LOCAL_IDENTIFIER;
-const ip = process.env.IP_ADDR;
+const ip = 'bs-local.com';
 
@@ -39,5 +38,3 @@ const browserstack = require('./browserstack-karma.js');
       name: 'Snabbdom',
-      startTunnel: false,
       retryLimit: 3,
-      tunnelIdentifier: identifier,
     },
@@ -44,0 +41,0 @@ browserNoActivityTimeout: 1000000,

modules/attributes.d.ts

 import { Module } from './module';
-declare global  {
+declare global {
     interface Element {
@@ -4,0 +4,0 @@ setAttribute(name: string, value: string | number | boolean): void;

modules/hero.js

@@ -101,3 +101,3 @@ "use strict";
             origTransition = newStyle.transition;
-            if (newComputedStyle.display === 'inline')
+            if (newComputedStyle.display === 'inline') //inline elements cannot be transformed
                 newStyle.display = 'inline-block'; //this does not appear to have any negative side effects
@@ -113,3 +113,3 @@ newStyle.transition = origTransition + 'transform 0s';
             // Animate old element
-            for (var key in oldVnode.savedStyle) {
+            for (var key in oldVnode.savedStyle) { //re-apply saved inherited properties
                 if (parseInt(key) != key) {
@@ -119,3 +119,3 @@ var ms = key.substring(0, 2) === 'ms';
                     var webkit = key.substring(0, 6) === 'webkit';
-                    if (!ms && !moz && !webkit)
+                    if (!ms && !moz && !webkit) //ignore prefixed style properties
                         oldStyle[key] = oldVnode.savedStyle[key];
@@ -122,0 +122,0 @@ }

modules/style.js

@@ -64,3 +64,3 @@ "use strict";
     if (!reflowForced) {
-        getComputedStyle(document.body).transform;
+        vnode.elm.offsetLeft;
         reflowForced = true;
@@ -67,0 +67,0 @@ }

package.json

 {
   "name": "snabbdom",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "A virtual DOM library with focus on simplicity, modularity, powerful features and performance.",
@@ -21,6 +21,7 @@ "main": "snabbdom.js",
     "gulp-uglify": "^3.0.0",
+    "husky": "^3.0.5",
     "karma": "^3.0.0",
     "karma-browserstack-launcher": "^1.3.0",
     "karma-chrome-launcher": "^2.2.0",
-    "karma-firefox-launcher": "^1.1.0",
+    "karma-firefox-launcher": "^1.2.0",
     "karma-mocha": "^1.3.0",
@@ -35,3 +36,3 @@ "karma-typescript": "^3.0.13",
     "pretest": "npm run compile",
-    "test": "testem",
+    "test": "karma start",
     "compile": "npm run compile-es && npm run compile-commonjs",
@@ -61,3 +62,8 @@ "compile-es": "tsc --outDir es --module es6 --moduleResolution node",
   },
-  "homepage": "https://github.com/paldepind/snabbdom#readme"
+  "homepage": "https://github.com/paldepind/snabbdom#readme",
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm test"
+    }
+  }
 }

README.md

@@ -1,2 +0,2 @@
-# Snabbdom
+<img src="logo.png" width="356px">
 
@@ -6,6 +6,11 @@ A virtual DOM library with focus on simplicity, modularity, powerful features
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT) [![npm version](https://badge.fury.io/js/snabbdom.svg)](https://badge.fury.io/js/snabbdom) [![npm downloads](https://img.shields.io/npm/dm/snabbdom.svg)](https://www.npmjs.com/package/snabbdom)
-
+[![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT)
+[![Build Status](https://travis-ci.org/snabbdom/snabbdom.svg?branch=master)](https://travis-ci.org/snabbdom/snabbdom)
+[![npm version](https://badge.fury.io/js/snabbdom.svg)](https://badge.fury.io/js/snabbdom)
+[![npm downloads](https://img.shields.io/npm/dm/snabbdom.svg)](https://www.npmjs.com/package/snabbdom)
 [![Join the chat at https://gitter.im/paldepind/snabbdom](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/paldepind/snabbdom?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
+Thanks to [Browserstack](https://www.browserstack.com/) for providing access to
+their great cross-browser testing tools.
+
 ## Table of contents
@@ -96,2 +101,5 @@
 patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state
+
+// to unmount from the DOM and clean up, simply pass null
+patch(newVnode, null)
 ```
@@ -181,3 +189,2 @@
 patch(toVNode(document.querySelector('.container')), newVNode)
-
 ```
@@ -719,2 +726,4 @@
 * [Backbone.VDOMView](https://github.com/jcbrand/backbone.vdomview) - A [Backbone](http://backbonejs.org/) View with VirtualDOM capability via Snabbdom.
+* [Rosmaro Snabbdom starter](https://github.com/lukaszmakuch/rosmaro-snabbdom-starter) - Building user interfaces with state machines and Snabbdom.
+* [Pureact](https://github.com/irony/pureact) - "65 lines implementation of React incl Redux and hooks with only one dependency - Snabbdom"
 
@@ -721,0 +730,0 @@ Be sure to share it if you're building an application in another way

snabbdom.js

@@ -153,3 +153,3 @@ "use strict";
                 }
-                else {
+                else { // Text node
                     api.removeChild(parentElm, ch.elm);
@@ -195,3 +195,3 @@ }
             }
-            else if (sameVnode(oldStartVnode, newEndVnode)) {
+            else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
                 patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
@@ -202,3 +202,3 @@ api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm));
             }
-            else if (sameVnode(oldEndVnode, newStartVnode)) {
+            else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
                 patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
@@ -214,3 +214,3 @@ api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);
                 idxInOld = oldKeyToIdx[newStartVnode.key];
-                if (isUndef(idxInOld)) {
+                if (isUndef(idxInOld)) { // New element
                     api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
@@ -217,0 +217,0 @@ newStartVnode = newCh[++newStartIdx];

src/modules/style.ts

@@ -72,3 +72,3 @@ import {VNode, VNodeData} from '../vnode';
   if(!reflowForced) {
-    getComputedStyle(document.body).transform;
+    (vnode.elm as any).offsetLeft;
     reflowForced = true;
@@ -75,0 +75,0 @@ }

src/thunk.ts

@@ -58,3 +58,3 @@ import {VNode, VNodeData} from './vnode';
     key: key,
-    hook: {init: init, prepatch: prepatch},
+    hook: {init, prepatch},
     fn: fn,
@@ -61,0 +61,0 @@ args: args

src/vnode.ts

@@ -45,6 +45,5 @@ import {Hooks} from './hooks';
   let key = data === undefined ? undefined : data.key;
-  return {sel: sel, data: data, children: children,
-          text: text, elm: elm, key: key};
+  return {sel, data, children, text, elm, key};
 }
 
 export default vnode;

vnode.js

@@ -5,4 +5,3 @@ "use strict";
     var key = data === undefined ? undefined : data.key;
-    return { sel: sel, data: data, children: children,
-        text: text, elm: elm, key: key };
+    return { sel: sel, data: data, children: children, text: text, elm: elm, key: key };
 }
@@ -9,0 +8,0 @@ exports.vnode = vnode;

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

827732

2.98%

Number of package files

182

3.41%

Lines of code

8674

0.43%

Number of lines in readme file

768

1.19%

Number of low supply chain risk alerts

51

-3.77%

Worsened metrics

Dev dependency count

19

5.56%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes