surplus - npm Package Compare versions

Comparing version 0.4.3 to 0.5.0-beta1

es/dom.d.ts

@@ -1,4 +0,4 @@
-export declare function createElement(tag: string): HTMLElement;
-export declare function createComment(text: string): Comment;
-export declare function createTextNode(text: string): Text;
-export declare function appendChild(parent: Node, child: Node): void;
+export declare function createElement(tag: string, className: string | null, parent: HTMLElement | null): HTMLElement;
+export declare function createSvgElement(tag: string, className: string | null, parent: HTMLElement | null): SVGElement;
+export declare function createComment(text: string, parent: HTMLElement): Comment;
+export declare function createTextNode(text: string, parent: HTMLElement): Text;

es/dom.js

@@ -1,12 +0,27 @@
-export function createElement(tag) {
-    return document.createElement(tag);
+var svgNS = "http://www.w3.org/2000/svg";
+export function createElement(tag, className, parent) {
+    var el = document.createElement(tag);
+    if (className)
+        el.className = className;
+    if (parent)
+        parent.appendChild(el);
+    return el;
 }
-export function createComment(text) {
-    return document.createComment(text);
+export function createSvgElement(tag, className, parent) {
+    var el = document.createElementNS(svgNS, tag);
+    if (className)
+        el.setAttribute("class", className);
+    if (parent)
+        parent.appendChild(el);
+    return el;
 }
-export function createTextNode(text) {
-    return document.createTextNode(text);
+export function createComment(text, parent) {
+    var comment = document.createComment(text);
+    parent.appendChild(comment);
+    return comment;
 }
-export function appendChild(parent, child) {
-    parent.appendChild(child);
+export function createTextNode(text, parent) {
+    var node = document.createTextNode(text);
+    parent.appendChild(node);
+    return node;
 }

es/insert.d.ts

@@ -0,0 +0,0 @@ export interface Range {

es/insert.js

@@ -1,2 +0,2 @@
-import { S } from './Surplus';
+import { S } from './index';
 var DOCUMENT_FRAGMENT_NODE = 11, TEXT_NODE = 3;
@@ -3,0 +3,0 @@ export function insert(range, value) {

index.d.ts

@@ -1,2 +0,2 @@
-export * from './es/Surplus';
+export * from './es/';
 
@@ -190,2 +190,24 @@ // JSX type definitions for Surplus initially based on those for React v0.14
 			ref?: T;
+			fn?: <U>(node : T, state? : U) => any;
+			fn0?: <U>(node : T, state? : U) => any;
+			fn1?: <U>(node : T, state? : U) => any;
+			fn2?: <U>(node : T, state? : U) => any;
+			fn3?: <U>(node : T, state? : U) => any;
+			fn4?: <U>(node : T, state? : U) => any;
+			fn5?: <U>(node : T, state? : U) => any;
+			fn6?: <U>(node : T, state? : U) => any;
+			fn7?: <U>(node : T, state? : U) => any;
+			fn8?: <U>(node : T, state? : U) => any;
+			fn9?: <U>(node : T, state? : U) => any;
+			fn10?: <U>(node : T, state? : U) => any;
+			fn11?: <U>(node : T, state? : U) => any;
+			fn12?: <U>(node : T, state? : U) => any;
+			fn13?: <U>(node : T, state? : U) => any;
+			fn14?: <U>(node : T, state? : U) => any;
+			fn15?: <U>(node : T, state? : U) => any;
+			fn16?: <U>(node : T, state? : U) => any;
+			fn17?: <U>(node : T, state? : U) => any;
+			fn18?: <U>(node : T, state? : U) => any;
+			fn19?: <U>(node : T, state? : U) => any;
+			fn20?: <U>(node : T, state? : U) => any;
 		}
@@ -192,0 +214,0 @@

index.js

@@ -7,3 +7,3 @@ (function (global, factory) {
 
-S = 'default' in S ? S['default'] : S;
+S = S && 'default' in S ? S['default'] : S;
 
@@ -163,21 +163,288 @@ var TEXT_NODE = 3;
 
-function createElement(tag) {
-    return document.createElement(tag);
+var svgNS = "http://www.w3.org/2000/svg";
+function createElement(tag, className, parent) {
+    var el = document.createElement(tag);
+    if (className)
+        el.className = className;
+    if (parent)
+        parent.appendChild(el);
+    return el;
 }
-function createComment(text) {
-    return document.createComment(text);
+function createSvgElement(tag, className, parent) {
+    var el = document.createElementNS(svgNS, tag);
+    if (className)
+        el.setAttribute("class", className);
+    if (parent)
+        parent.appendChild(el);
+    return el;
 }
-function createTextNode(text) {
-    return document.createTextNode(text);
+function createComment(text, parent) {
+    var comment = document.createComment(text);
+    parent.appendChild(comment);
+    return comment;
 }
-function appendChild(parent, child) {
-    parent.appendChild(child);
+function createTextNode(text, parent) {
+    var node = document.createTextNode(text);
+    parent.appendChild(node);
+    return node;
 }
 
+var assign = 'assign' in Object ? Object.assign :
+    function assign(a, b) {
+        var props = Object.keys(b);
+        for (var i = 0, len = props.length; i < len; i++) {
+            var name = props[i];
+            a[name] = b[name];
+        }
+    };
+function staticSpread(node, obj, svg) {
+    var props = Object.keys(obj);
+    for (var i = 0, len = props.length; i < len; i++) {
+        var rawName = props[i];
+        if (rawName === 'style') {
+            assign(node.style, obj.style);
+        }
+        else {
+            var propName = translateJSXPropertyName(rawName);
+            setField(node, propName, obj[rawName], svg);
+        }
+    }
+}
+
+var SingleSpreadState = (function () {
+    function SingleSpreadState(namedProps) {
+        this.namedProps = namedProps;
+        this.oldProps = null;
+        this.oldStyles = null;
+    }
+    SingleSpreadState.prototype.apply = function (node, props, svg) {
+        var oldProps = this.oldProps, newProps = Object.keys(props), newLen = newProps.length, i = 0;
+        if (oldProps === null) {
+            for (; i < newLen; i++) {
+                this.setField(node, newProps[i], props, svg);
+            }
+        }
+        else {
+            var oldLen = oldProps.length, len = oldLen < newLen ? oldLen : newLen;
+            for (; i < len; i++) {
+                var propName = newProps[i], oldPropName = oldProps[i];
+                if (oldPropName !== propName) {
+                    this.check(node, oldPropName, props, svg);
+                }
+                this.setField(node, propName, props, svg);
+            }
+            for (; i < newLen; i++) {
+                this.setField(node, newProps[i], props, svg);
+            }
+            for (; i < oldLen; i++) {
+                this.check(node, oldProps[i], props, svg);
+            }
+        }
+        this.oldProps = newProps;
+    };
+    SingleSpreadState.prototype.applyStyle = function (node, style) {
+        var oldStyles = this.oldStyles, newStyles = Object.keys(style), newLen = newStyles.length, i = 0;
+        if (oldStyles === null) {
+            for (; i < newLen; i++) {
+                setStyle(node, newStyles[i], style);
+            }
+        }
+        else {
+            var oldLen = oldStyles.length, len = oldLen < newLen ? oldLen : newLen;
+            for (; i < len; i++) {
+                var propName = newStyles[i], oldPropName = oldStyles[i];
+                if (oldPropName !== propName && !style.hasOwnProperty(oldPropName)) {
+                    clearStyle(node, oldPropName);
+                }
+                setStyle(node, propName, style);
+            }
+            for (; i < newLen; i++) {
+                setStyle(node, newStyles[i], style);
+            }
+            for (; i < oldLen; i++) {
+                oldPropName = oldStyles[i];
+                if (!style.hasOwnProperty(oldPropName)) {
+                    clearStyle(node, oldPropName);
+                }
+            }
+        }
+        this.oldStyles = newStyles;
+    };
+    SingleSpreadState.prototype.check = function (node, rawName, props, svg) {
+        if (!props.hasOwnProperty(rawName)) {
+            var propName = translateJSXPropertyName(rawName);
+            if (!this.namedProps.hasOwnProperty(propName)) {
+                clearField(node, propName, svg);
+            }
+        }
+    };
+    SingleSpreadState.prototype.setField = function (node, rawName, props, svg) {
+        var value = props[rawName];
+        if (rawName === 'style') {
+            this.applyStyle(node, value);
+        }
+        else {
+            var propName = translateJSXPropertyName(rawName);
+            setField(node, propName, value, svg);
+        }
+    };
+    return SingleSpreadState;
+}());
+var MultiSpreadState = (function () {
+    function MultiSpreadState(namedProps) {
+        this.namedProps = namedProps;
+        this.current = 1;
+        this.propAges = {};
+        this.oldProps = [];
+        this.checkProps = [];
+        this.styleAges = {};
+        this.oldStyles = null;
+        this.checkStyles = null;
+    }
+    MultiSpreadState.prototype.apply = function (node, props, n, last, svg) {
+        var oldProps = this.oldProps[n], newProps = Object.keys(props), newLen = newProps.length, i = 0;
+        if (oldProps === undefined) {
+            for (; i < newLen; i++) {
+                this.setField(node, newProps[i], props, n, last, svg);
+            }
+        }
+        else {
+            var oldLen = oldProps.length, len = oldLen < newLen ? oldLen : newLen;
+            for (; i < len; i++) {
+                var propName = newProps[i], oldPropName = oldProps[i];
+                if (oldPropName !== propName) {
+                    this.check(oldPropName, props);
+                }
+                this.setField(node, propName, props, n, last, svg);
+            }
+            for (; i < newLen; i++) {
+                this.setField(node, newProps[i], props, n, last, svg);
+            }
+            for (; i < oldLen; i++) {
+                this.check(oldProps[i], props);
+            }
+        }
+        this.oldProps[n] = newProps;
+        if (last) {
+            for (i = 0, len = this.checkProps.length; i < len; i++) {
+                propName = this.checkProps.pop();
+                if (this.propAges[propName] !== this.current) {
+                    clearField(node, propName, svg);
+                }
+            }
+            this.current++;
+        }
+    };
+    MultiSpreadState.prototype.applyStyle = function (node, style, n, last) {
+        var oldStyles = this.oldStyles && this.oldStyles[n], newStyles = Object.keys(style), styleAges = this.styleAges, current = this.current, styleAges = this.styleAges, checkStyles = this.checkStyles, newLen = newStyles.length, i = 0;
+        if (!oldStyles) {
+            for (; i < newLen; i++) {
+                setStyle(node, newStyles[i], style);
+            }
+        }
+        else {
+            var oldLen = oldStyles.length, len = oldLen < newLen ? oldLen : newLen;
+            for (; i < len; i++) {
+                var propName = newStyles[i], oldPropName = oldStyles[i];
+                if (oldPropName !== propName && !style.hasOwnProperty(oldPropName)) {
+                    if (checkStyles === null)
+                        checkStyles = this.checkStyles = [oldPropName];
+                    else
+                        checkStyles.push(oldPropName);
+                }
+                styleAges[propName] = current;
+                setStyle(node, propName, style);
+            }
+            for (; i < newLen; i++) {
+                propName = newStyles[i];
+                styleAges[propName] = current;
+                setStyle(node, propName, style);
+            }
+            for (; i < oldLen; i++) {
+                oldPropName = oldStyles[i];
+                if (!style.hasOwnProperty(oldPropName)) {
+                    if (checkStyles === null)
+                        checkStyles = this.checkStyles = [oldPropName];
+                    else
+                        checkStyles.push(oldPropName);
+                }
+            }
+        }
+        if (this.oldStyles === null)
+            this.oldStyles = [];
+        this.oldStyles[n] = newStyles;
+        if (last) {
+            if (checkStyles !== null) {
+                for (i = 0, len = checkStyles.length; i < len; i++) {
+                    propName = checkStyles.pop();
+                    if (styleAges[propName] !== current) {
+                        clearStyle(node, propName);
+                    }
+                }
+            }
+            this.current++;
+        }
+    };
+    MultiSpreadState.prototype.check = function (rawName, props) {
+        if (!props.hasOwnProperty(rawName)) {
+            var propName = translateJSXPropertyName(rawName);
+            if (!this.namedProps.hasOwnProperty(propName)) {
+                this.checkProps.push(propName);
+            }
+        }
+    };
+    MultiSpreadState.prototype.setField = function (node, rawName, props, n, last, svg) {
+        var value = props[rawName];
+        if (rawName === 'style') {
+            this.applyStyle(node, value, n, last);
+        }
+        else {
+            var propName = translateJSXPropertyName(rawName);
+            this.propAges[propName] = this.current;
+            setField(node, propName, value, svg);
+        }
+    };
+    return MultiSpreadState;
+}());
+function setField(node, name, value, svg) {
+    if (name in node && !svg)
+        node[name] = value;
+    else if (value === false || value === null || value === undefined)
+        node.removeAttribute(name);
+    else
+        node.setAttribute(name, value);
+}
+function clearField(node, name, svg) {
+    if (name in node && !svg)
+        node[name] = defaultValue(node.tagName, name);
+    else
+        node.removeAttribute(name);
+}
+function setStyle(node, name, style) {
+    node.style[name] = style[name];
+}
+function clearStyle(node, name) {
+    node.style[name] = '';
+}
+var defaultValues = {};
+function defaultValue(tag, name) {
+    var emptyNode = defaultValues[tag] || (defaultValues[tag] = document.createElement(tag));
+    return emptyNode[name];
+}
+var jsxEventProperty = /^on[A-Z]/;
+function translateJSXPropertyName(name) {
+    return jsxEventProperty.test(name)
+        ? (name === "onDoubleClick" ? "ondblclick" : name.toLowerCase())
+        : name;
+}
+
 exports.insert = insert$$1;
+exports.staticSpread = staticSpread;
+exports.SingleSpreadState = SingleSpreadState;
+exports.MultiSpreadState = MultiSpreadState;
 exports.S = S;
 exports.createElement = createElement;
+exports.createSvgElement = createSvgElement;
 exports.createComment = createComment;
 exports.createTextNode = createTextNode;
-exports.appendChild = appendChild;
 
@@ -184,0 +451,0 @@ Object.defineProperty(exports, '__esModule', { value: true });

package.json

 {
   "name": "surplus",
-  "version": "0.4.3",
-  "module": "es/Surplus.js",
-  "description": "Javascript pre-processor that converts JSX syntax into inline DOM instructions",
+  "version": "0.5.0-beta1",
+  "description": "High-performance JSX web views for S.js applications",  
   "keywords": [
-    "javascript",
+    "JSX",
     "html",
-    "JSX",
     "DOM",
-    "template",
-    "templating"
+    "template"
   ],
-  "dependencies": {
-    "s-js": "^0.4.3"
+  "module": "es/index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "test": "karma start",
+    "build": "tsc -p src/runtime/tsconfig.json && tsc -p src/compiler/tsconfig.json && rollup -c src/runtime/rollup.config.js && rollup -c src/compiler/rollup.config.js"
   },
   "author": "Adam Haile",
-  "license": "MIT"
+  "homepage": "https://github.com/adamhaile/surplus",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adamhaile/surplus.git"
+  },
+  "bugs": {
+    "url": "https://github.com/adamhaile/issues"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "s-js": "^0.4.4"
+  },
+  "devDependencies": {
+    "jasmine": "^2.6.0",
+    "karma": "^1.7.0",
+    "karma-jasmine": "^1.1.0",
+    "karma-chrome-launcher": "^2.1.1",
+    "rollup": "^0.43.0",
+    "typescript": "^2.5.2"
+  }
 }

New alerts

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

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

286149

increased by650.91%

Number of package files

61

increased by577.78%

Lines of code

6679

increased by628.35%

Number of low quality alerts

1

decreased by-50%

Number of medium quality alerts

1

decreased by-50%

Number of lines in readme file

341

increased byInfinity%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

6

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removeds-js@^0.4.3