surplus - npm Package Compare versions

Comparing version 0.5.0-beta17 to 0.5.0-beta18

compiler/es/fieldData.js

@@ -11,2 +11,4 @@ var
     for: ['htmlFor', null, 0 /* Property */],
+    "accept-charset": ['acceptCharset', null, 0 /* Property */],
+    "http-equiv": ['httpEquiv', null, 0 /* Property */],
     // a few React oddities, mostly disagreeing about casing
@@ -16,4 +18,8 @@ onDoubleClick: ['ondblclick', null, 0 /* Property */],
     allowFullScreen: ['allowFullscreen', null, 0 /* Property */],
+    autoCapitalize: ['autocapitalize', null, 0 /* Property */],
     autoFocus: ['autofocus', null, 0 /* Property */],
     autoPlay: ['autoplay', null, 0 /* Property */],
+    // other
+    // role is part of the ARIA spec but not caught by the aria- attr filter
+    role: ['role', null, 1 /* Attribute */]
 }, svgFieldCache = {
@@ -27,2 +33,3 @@ // special props
     htmlFor: ['for', null, 1 /* Attribute */],
+    tabIndex: ['tabindex', null, 1 /* Attribute */],
     // React compat
@@ -93,4 +100,4 @@ onDoubleClick: ['ondblclick', null, 0 /* Property */],
 };
-var attributeOnlyRx = /^(aria|data)[\-A-Z]/, isAttrOnlyField = function (prop) { return attributeOnlyRx.test(prop); }, propOnlyRx = /^(on|style)/, isPropOnlyField = function (prop) { return propOnlyRx.test(prop); }, propPartRx = /[a-z][A-Z]/g, getAttrName = function (prop) { return prop.replace(propPartRx, function (m) { return m[0] + '-' + m[1]; }).toLowerCase(); }, jsxEventPropRx = /^on[A-Z]/, attrPartRx = /\-(?:[a-z]|$)/g, getPropName = function (attr) {
-    var prop = attr.replace(attrPartRx, function (m) { return m.length === 1 ? '' : m[1].toUpperCase(); });
+var attributeOnlyRx = /-/, deepAttrRx = /^style-/, isAttrOnlyField = function (field) { return attributeOnlyRx.test(field) && !deepAttrRx.test(field); }, propOnlyRx = /^(on|style)/, isPropOnlyField = function (field) { return propOnlyRx.test(field); }, propPartRx = /[a-z][A-Z]/g, getAttrName = function (field) { return field.replace(propPartRx, function (m) { return m[0] + '-' + m[1]; }).toLowerCase(); }, jsxEventPropRx = /^on[A-Z]/, attrPartRx = /\-(?:[a-z]|$)/g, getPropName = function (field) {
+    var prop = field.replace(attrPartRx, function (m) { return m.length === 1 ? '' : m[1].toUpperCase(); });
     return jsxEventPropRx.test(prop) ? prop.toLowerCase() : prop;
@@ -97,0 +104,0 @@ }, deepPropRx = /^(style)([A-Z])/, buildPropData = function (prop) {

compiler/index.js

@@ -508,2 +508,4 @@ (function (global, factory) {
     for: ['htmlFor', null, 0 /* Property */],
+    "accept-charset": ['acceptCharset', null, 0 /* Property */],
+    "http-equiv": ['httpEquiv', null, 0 /* Property */],
     // a few React oddities, mostly disagreeing about casing
@@ -513,4 +515,8 @@ onDoubleClick: ['ondblclick', null, 0 /* Property */],
     allowFullScreen: ['allowFullscreen', null, 0 /* Property */],
+    autoCapitalize: ['autocapitalize', null, 0 /* Property */],
     autoFocus: ['autofocus', null, 0 /* Property */],
     autoPlay: ['autoplay', null, 0 /* Property */],
+    // other
+    // role is part of the ARIA spec but not caught by the aria- attr filter
+    role: ['role', null, 1 /* Attribute */]
 };
@@ -525,2 +531,3 @@ var svgFieldCache = {
     htmlFor: ['for', null, 1 /* Attribute */],
+    tabIndex: ['tabindex', null, 1 /* Attribute */],
     // React compat
@@ -591,12 +598,13 @@ onDoubleClick: ['ondblclick', null, 0 /* Property */],
 };
-var attributeOnlyRx = /^(aria|data)[\-A-Z]/;
-var isAttrOnlyField = function (prop) { return attributeOnlyRx.test(prop); };
+var attributeOnlyRx = /-/;
+var deepAttrRx = /^style-/;
+var isAttrOnlyField = function (field) { return attributeOnlyRx.test(field) && !deepAttrRx.test(field); };
 var propOnlyRx = /^(on|style)/;
-var isPropOnlyField = function (prop) { return propOnlyRx.test(prop); };
+var isPropOnlyField = function (field) { return propOnlyRx.test(field); };
 var propPartRx = /[a-z][A-Z]/g;
-var getAttrName = function (prop) { return prop.replace(propPartRx, function (m) { return m[0] + '-' + m[1]; }).toLowerCase(); };
+var getAttrName = function (field) { return field.replace(propPartRx, function (m) { return m[0] + '-' + m[1]; }).toLowerCase(); };
 var jsxEventPropRx = /^on[A-Z]/;
 var attrPartRx = /\-(?:[a-z]|$)/g;
-var getPropName = function (attr) {
-    var prop = attr.replace(attrPartRx, function (m) { return m.length === 1 ? '' : m[1].toUpperCase(); });
+var getPropName = function (field) {
+    var prop = field.replace(attrPartRx, function (m) { return m.length === 1 ? '' : m[1].toUpperCase(); });
     return jsxEventPropRx.test(prop) ? prop.toLowerCase() : prop;
@@ -603,0 +611,0 @@ };

es/fieldData.js

@@ -11,2 +11,4 @@ var
     for: ['htmlFor', null, 0 /* Property */],
+    "accept-charset": ['acceptCharset', null, 0 /* Property */],
+    "http-equiv": ['httpEquiv', null, 0 /* Property */],
     // a few React oddities, mostly disagreeing about casing
@@ -16,4 +18,8 @@ onDoubleClick: ['ondblclick', null, 0 /* Property */],
     allowFullScreen: ['allowFullscreen', null, 0 /* Property */],
+    autoCapitalize: ['autocapitalize', null, 0 /* Property */],
     autoFocus: ['autofocus', null, 0 /* Property */],
     autoPlay: ['autoplay', null, 0 /* Property */],
+    // other
+    // role is part of the ARIA spec but not caught by the aria- attr filter
+    role: ['role', null, 1 /* Attribute */]
 }, svgFieldCache = {
@@ -27,2 +33,3 @@ // special props
     htmlFor: ['for', null, 1 /* Attribute */],
+    tabIndex: ['tabindex', null, 1 /* Attribute */],
     // React compat
@@ -93,4 +100,4 @@ onDoubleClick: ['ondblclick', null, 0 /* Property */],
 };
-var attributeOnlyRx = /^(aria|data)[\-A-Z]/, isAttrOnlyField = function (prop) { return attributeOnlyRx.test(prop); }, propOnlyRx = /^(on|style)/, isPropOnlyField = function (prop) { return propOnlyRx.test(prop); }, propPartRx = /[a-z][A-Z]/g, getAttrName = function (prop) { return prop.replace(propPartRx, function (m) { return m[0] + '-' + m[1]; }).toLowerCase(); }, jsxEventPropRx = /^on[A-Z]/, attrPartRx = /\-(?:[a-z]|$)/g, getPropName = function (attr) {
-    var prop = attr.replace(attrPartRx, function (m) { return m.length === 1 ? '' : m[1].toUpperCase(); });
+var attributeOnlyRx = /-/, deepAttrRx = /^style-/, isAttrOnlyField = function (field) { return attributeOnlyRx.test(field) && !deepAttrRx.test(field); }, propOnlyRx = /^(on|style)/, isPropOnlyField = function (field) { return propOnlyRx.test(field); }, propPartRx = /[a-z][A-Z]/g, getAttrName = function (field) { return field.replace(propPartRx, function (m) { return m[0] + '-' + m[1]; }).toLowerCase(); }, jsxEventPropRx = /^on[A-Z]/, attrPartRx = /\-(?:[a-z]|$)/g, getPropName = function (field) {
+    var prop = field.replace(attrPartRx, function (m) { return m.length === 1 ? '' : m[1].toUpperCase(); });
     return jsxEventPropRx.test(prop) ? prop.toLowerCase() : prop;
@@ -97,0 +104,0 @@ }, deepPropRx = /^(style)([A-Z])/, buildPropData = function (prop) {

index.js

@@ -611,2 +611,4 @@ (function (global, factory) {
     for: ['htmlFor', null, 0 /* Property */],
+    "accept-charset": ['acceptCharset', null, 0 /* Property */],
+    "http-equiv": ['httpEquiv', null, 0 /* Property */],
     // a few React oddities, mostly disagreeing about casing
@@ -616,4 +618,8 @@ onDoubleClick: ['ondblclick', null, 0 /* Property */],
     allowFullScreen: ['allowFullscreen', null, 0 /* Property */],
+    autoCapitalize: ['autocapitalize', null, 0 /* Property */],
     autoFocus: ['autofocus', null, 0 /* Property */],
     autoPlay: ['autoplay', null, 0 /* Property */],
+    // other
+    // role is part of the ARIA spec but not caught by the aria- attr filter
+    role: ['role', null, 1 /* Attribute */]
 };
@@ -628,2 +634,3 @@ var svgFieldCache = {
     htmlFor: ['for', null, 1 /* Attribute */],
+    tabIndex: ['tabindex', null, 1 /* Attribute */],
     // React compat
@@ -694,12 +701,13 @@ onDoubleClick: ['ondblclick', null, 0 /* Property */],
 };
-var attributeOnlyRx = /^(aria|data)[\-A-Z]/;
-var isAttrOnlyField = function (prop) { return attributeOnlyRx.test(prop); };
+var attributeOnlyRx = /-/;
+var deepAttrRx = /^style-/;
+var isAttrOnlyField = function (field) { return attributeOnlyRx.test(field) && !deepAttrRx.test(field); };
 var propOnlyRx = /^(on|style)/;
-var isPropOnlyField = function (prop) { return propOnlyRx.test(prop); };
+var isPropOnlyField = function (field) { return propOnlyRx.test(field); };
 var propPartRx = /[a-z][A-Z]/g;
-var getAttrName = function (prop) { return prop.replace(propPartRx, function (m) { return m[0] + '-' + m[1]; }).toLowerCase(); };
+var getAttrName = function (field) { return field.replace(propPartRx, function (m) { return m[0] + '-' + m[1]; }).toLowerCase(); };
 var jsxEventPropRx = /^on[A-Z]/;
 var attrPartRx = /\-(?:[a-z]|$)/g;
-var getPropName = function (attr) {
-    var prop = attr.replace(attrPartRx, function (m) { return m.length === 1 ? '' : m[1].toUpperCase(); });
+var getPropName = function (field) {
+    var prop = field.replace(attrPartRx, function (m) { return m.length === 1 ? '' : m[1].toUpperCase(); });
     return jsxEventPropRx.test(prop) ? prop.toLowerCase() : prop;
@@ -706,0 +714,0 @@ };

package.json

 {
   "name": "surplus",
-  "version": "0.5.0-beta17",
+  "version": "0.5.0-beta18",
   "description": "High-performance JSX web views for S.js applications",
@@ -5,0 +5,0 @@ "keywords": [

spec/compiler/staticproperty.spec.js

@@ -54,2 +54,10 @@ describe("JSX static property", function () {
 
+    it("can set custom attributes (identified by containing a dash '-')", function () {
+        eval(window.SurplusCompiler.compile(`
+            var input = <input custom-attribute="foo" />;
+
+            expect(input.getAttribute("custom-attribute")).toBe("foo");
+        `));
+    });
+
     it("can set sub-properties", function () {
@@ -56,0 +64,0 @@ eval(window.SurplusCompiler.compile(`

src/compiler/fieldData.ts

@@ -18,14 +18,20 @@ // WARNING: this file "lives" in the compiler source, and is copied into the runtime at build
         // special props
-        style          : [ 'style'          , null, FieldFlags.Assign    ],
-        ref            : [ 'ref'            , null, FieldFlags.Ignore    ],
-        fn             : [ 'fn'             , null, FieldFlags.Ignore    ],
+        style           : [ 'style'          , null, FieldFlags.Assign    ],
+        ref             : [ 'ref'            , null, FieldFlags.Ignore    ],
+        fn              : [ 'fn'             , null, FieldFlags.Ignore    ],
         // attr compat
-        class          : [ 'className'      , null, FieldFlags.Property  ],
-        for            : [ 'htmlFor'        , null, FieldFlags.Property  ],
+        class           : [ 'className'      , null, FieldFlags.Property  ],
+        for             : [ 'htmlFor'        , null, FieldFlags.Property  ],
+        "accept-charset": [ 'acceptCharset'  , null, FieldFlags.Property  ],
+        "http-equiv"    : [ 'httpEquiv'      , null, FieldFlags.Property  ],
         // a few React oddities, mostly disagreeing about casing
-        onDoubleClick  : [ 'ondblclick'     , null, FieldFlags.Property  ],
-        spellCheck     : [ 'spellcheck'     , null, FieldFlags.Property  ],
-        allowFullScreen: [ 'allowFullscreen', null, FieldFlags.Property  ],
-        autoFocus      : [ 'autofocus'      , null, FieldFlags.Property  ],
-        autoPlay       : [ 'autoplay'       , null, FieldFlags.Property  ],
+        onDoubleClick   : [ 'ondblclick'     , null, FieldFlags.Property  ],
+        spellCheck      : [ 'spellcheck'     , null, FieldFlags.Property  ],
+        allowFullScreen : [ 'allowFullscreen', null, FieldFlags.Property  ],
+        autoCapitalize  : [ 'autocapitalize' , null, FieldFlags.Property  ],
+        autoFocus       : [ 'autofocus'      , null, FieldFlags.Property  ],
+        autoPlay        : [ 'autoplay'       , null, FieldFlags.Property  ],
+        // other
+        // role is part of the ARIA spec but not caught by the aria- attr filter
+        role           : [ 'role'           , null, FieldFlags.Attribute ]
     } as { [ field : string ] : FieldData },
@@ -40,2 +46,3 @@ svgFieldCache = {
         htmlFor      : [ 'for'        , null, FieldFlags.Attribute ],
+        tabIndex     : [ 'tabindex'   , null, FieldFlags.Attribute ],
         // React compat
@@ -108,12 +115,13 @@ onDoubleClick: [ 'ondblclick' , null, FieldFlags.Property  ],
 const
-    attributeOnlyRx = /^(aria|data)[\-A-Z]/,
-    isAttrOnlyField = (prop : string) => attributeOnlyRx.test(prop),
+    attributeOnlyRx = /-/,
+    deepAttrRx = /^style-/,
+    isAttrOnlyField = (field : string) => attributeOnlyRx.test(field) && !deepAttrRx.test(field),
     propOnlyRx      = /^(on|style)/,
-    isPropOnlyField = (prop : string) => propOnlyRx.test(prop),
+    isPropOnlyField = (field : string) => propOnlyRx.test(field),
     propPartRx      = /[a-z][A-Z]/g,
-    getAttrName     = (prop : string) => prop.replace(propPartRx, m => m[0] + '-' + m[1]).toLowerCase(),
+    getAttrName     = (field : string) => field.replace(propPartRx, m => m[0] + '-' + m[1]).toLowerCase(),
     jsxEventPropRx  = /^on[A-Z]/,
     attrPartRx      = /\-(?:[a-z]|$)/g,
-    getPropName     = (attr : string) => {
-        var prop = attr.replace(attrPartRx, m => m.length === 1 ? '' : m[1].toUpperCase());
+    getPropName     = (field : string) => {
+        var prop = field.replace(attrPartRx, m => m.length === 1 ? '' : m[1].toUpperCase());
         return jsxEventPropRx.test(prop) ? prop.toLowerCase() : prop;
@@ -120,0 +128,0 @@ },

src/runtime/fieldData.ts

@@ -18,14 +18,20 @@ // WARNING: this file "lives" in the compiler source, and is copied into the runtime at build
         // special props
-        style          : [ 'style'          , null, FieldFlags.Assign    ],
-        ref            : [ 'ref'            , null, FieldFlags.Ignore    ],
-        fn             : [ 'fn'             , null, FieldFlags.Ignore    ],
+        style           : [ 'style'          , null, FieldFlags.Assign    ],
+        ref             : [ 'ref'            , null, FieldFlags.Ignore    ],
+        fn              : [ 'fn'             , null, FieldFlags.Ignore    ],
         // attr compat
-        class          : [ 'className'      , null, FieldFlags.Property  ],
-        for            : [ 'htmlFor'        , null, FieldFlags.Property  ],
+        class           : [ 'className'      , null, FieldFlags.Property  ],
+        for             : [ 'htmlFor'        , null, FieldFlags.Property  ],
+        "accept-charset": [ 'acceptCharset'  , null, FieldFlags.Property  ],
+        "http-equiv"    : [ 'httpEquiv'      , null, FieldFlags.Property  ],
         // a few React oddities, mostly disagreeing about casing
-        onDoubleClick  : [ 'ondblclick'     , null, FieldFlags.Property  ],
-        spellCheck     : [ 'spellcheck'     , null, FieldFlags.Property  ],
-        allowFullScreen: [ 'allowFullscreen', null, FieldFlags.Property  ],
-        autoFocus      : [ 'autofocus'      , null, FieldFlags.Property  ],
-        autoPlay       : [ 'autoplay'       , null, FieldFlags.Property  ],
+        onDoubleClick   : [ 'ondblclick'     , null, FieldFlags.Property  ],
+        spellCheck      : [ 'spellcheck'     , null, FieldFlags.Property  ],
+        allowFullScreen : [ 'allowFullscreen', null, FieldFlags.Property  ],
+        autoCapitalize  : [ 'autocapitalize' , null, FieldFlags.Property  ],
+        autoFocus       : [ 'autofocus'      , null, FieldFlags.Property  ],
+        autoPlay        : [ 'autoplay'       , null, FieldFlags.Property  ],
+        // other
+        // role is part of the ARIA spec but not caught by the aria- attr filter
+        role           : [ 'role'           , null, FieldFlags.Attribute ]
     } as { [ field : string ] : FieldData },
@@ -40,2 +46,3 @@ svgFieldCache = {
         htmlFor      : [ 'for'        , null, FieldFlags.Attribute ],
+        tabIndex     : [ 'tabindex'   , null, FieldFlags.Attribute ],
         // React compat
@@ -108,12 +115,13 @@ onDoubleClick: [ 'ondblclick' , null, FieldFlags.Property  ],
 const
-    attributeOnlyRx = /^(aria|data)[\-A-Z]/,
-    isAttrOnlyField = (prop : string) => attributeOnlyRx.test(prop),
+    attributeOnlyRx = /-/,
+    deepAttrRx = /^style-/,
+    isAttrOnlyField = (field : string) => attributeOnlyRx.test(field) && !deepAttrRx.test(field),
     propOnlyRx      = /^(on|style)/,
-    isPropOnlyField = (prop : string) => propOnlyRx.test(prop),
+    isPropOnlyField = (field : string) => propOnlyRx.test(field),
     propPartRx      = /[a-z][A-Z]/g,
-    getAttrName     = (prop : string) => prop.replace(propPartRx, m => m[0] + '-' + m[1]).toLowerCase(),
+    getAttrName     = (field : string) => field.replace(propPartRx, m => m[0] + '-' + m[1]).toLowerCase(),
     jsxEventPropRx  = /^on[A-Z]/,
     attrPartRx      = /\-(?:[a-z]|$)/g,
-    getPropName     = (attr : string) => {
-        var prop = attr.replace(attrPartRx, m => m.length === 1 ? '' : m[1].toUpperCase());
+    getPropName     = (field : string) => {
+        var prop = field.replace(attrPartRx, m => m.length === 1 ? '' : m[1].toUpperCase());
         return jsxEventPropRx.test(prop) ? prop.toLowerCase() : prop;
@@ -120,0 +128,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

424653

increased by0.72%

Lines of code

10159

increased by0.51%

No dependency changes