cramped - npm Package Compare versions

Comparing version 0.0.2-alpha.2 to 0.0.3

dist/cramped.js

@@ -1,2 +0,2 @@
-var e=require("react"),t=require("goober");function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function r(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}var o=t.css({position:"fixed",height:"100%",width:"100%",zIndex:1,top:0,left:0,bottom:0,right:0,overflow:"hidden",display:"flex"}),i=t.css({backgroundColor:"rgba(0, 0, 0, 0.5)",position:"absolute",top:0,left:0,bottom:0,right:0,zIndex:0});function a(e,t){return void 0===t&&(t=1),t>0?e.reduce(function(e,n){return e.concat(Array.isArray(n)?a(n,t-1):n)},[]):e.slice()}var l=function(){return a([].slice.call(arguments),Infinity).map(function(e,n){return"object"==typeof e?t.css.call({o:!n},e):e}).filter(Boolean).join(" ").trim()},c=function(e){var n={};if("onPress"in e&&(n.onClickCapture=e.onPress,delete e.onPress),"style"in e&&(n.className=l(e.style),delete e.style),"className"in e&&(n.className=(e.className+" "+(n.className||"")).trim()),"flex"in e){var r=t.css({flex:e.flex||1,flexDirection:"column",display:"flex",overflow:"hidden"});n.className=((n.className||"")+" "+r).trim(),delete e.flex}return Object.assign({},e||{},n)},s=function(t){var n=t.children,o=r(t,["children"]),i=c(o);return e.createElement("div",i,n)},u={shell:{display:"flex",position:"relative",width:"4rem",height:"4rem"},circle:{display:"flex",border:"4px solid currentColor",borderRadius:"50%",animation:"spin 1s linear infinite",borderColor:"currentColor transparent transparent transparent",width:"4rem",height:"4rem"},center:{alignSelf:"center"}},f={get:function(e){switch(e){case"window":return{width:"undefined"==typeof window?414:window.innerWidth,height:"undefined"==typeof window?414:window.innerHeight}}}},d=function(e){return Object.keys(e).map(function(t){return t+"("+e[t]+")"}).join(" ")},m=[function(e){for(var t in e){var n=e[t];Array.isArray(n)&&(e[t]="transform"===t?n.map(d).join(" "):n.join(" "))}},function(e){var t=null;for(var n in e)/^(shadow|elevation)/.test(n)&&((t=t||{})[n]=e[n],delete e[n]);if(t){if(t.shadowOpacity){var r=t.shadowColor.match(/\d+/g);t.shadowColor="rgba("+r[0]+", "+r[1]+", "+r[2]+", "+t.shadowOpacity+")"}var o=t.shadowOffset||{},i=(o.height||0)+(/em$/.test(o.height)?"":"px"),a=(o.width||0)+(/em$/.test(o.width)?"":"px"),l=(t.shadowRadius||0)+(/em$/.test(t.shadowRadius)?"":"px");e.boxShadow=a+" "+i+" "+l+" "+t.shadowColor}},function(e){var t=/horizontal/i,n=/vertical/i;for(var r in e){if(t.test(r)){var o=r.replace(t,"");e[o+"Left"]=e[o+"Right"]=e[r],delete e[r]}if(n.test(r)){var i=r.replace(n,"");e[i+"Top"]=e[i+"Bottom"]=e[r],delete e[r]}}},function(e){"borderWidth"in e&&!("borderStyle"in e)&&(e.borderStyle="solid");var t=/border([A-Z]+[a-z]+)Color/g;for(var n in e){var r=t.exec(n);r&&!e["border"+r[1]+"Style"]&&(e["border"+r[1]+"Style"]="solid")}},function(e){var t=/(end|start)/i;for(var n in e){var r=t.exec(n);t.test(n)&&(e[n.replace(r[0],"Start"===r[0]?"Left":"Right")]=e[n],delete e[n])}},function(e){var t=/^(fl|al|ju)/i;if(!e.display||"flex"!==e.display){var n=!1;for(var r in e)t.test(r)&&(n=!0);n&&Object.assign(e,{display:"flex"})}}],p={flatten:function(e){return e.reduce(function(e,t){return t?Array.isArray(t)?Object.assign(e,p.flatten(t)):Object.assign(e,t):e},{})},create:function(e){var t={},n=function(n){var r=e[n];m.forEach(function(e){return e(r)}),t[n]=r};for(var r in e)n(r);return t},absoluteFillObject:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:1}},x=function(t){var n=t.tag,o=void 0===n?"span":n,i=r(t,["tag"]),a=c(i);return e.createElement(o,a,i.children)},h=function(t){var n=t.children,o=r(t,["children"]),i=c(o);return e.cloneElement(n,i)},y={cursor:"pointer",border:0,outline:0,background:"none",margin:0,padding:0},g=function(t){var o=t.children,i=t.style,a=r(t,["children","style"]),l=c(n({style:[y].concat(i)},a));return e.createElement("button",l,o)},v=function(){return null},w=v,b=v,E=v,C=h,S=h,I=p.create({scrollView:{flexDirection:"column",display:"flex",overflow:"auto",flexShrink:0},scrollViewHorizontal:{width:"100%",flexDirection:"row"},container:{display:"flex",flex:1,flexDirection:"column"},containerHorizontal:{display:"flex",flex:1,flexDirection:"row"}}),L=function(t){var n=t.horizontal;return e.createElement(s,{style:[I.scrollView,t.style,n&&I.scrollViewHorizontal]},e.createElement(s,{style:[n?I.containerHorizontal:I.container,t.contentContainerStyle]},t.children))},k=function(t){return"function"==typeof t?e.createElement(t,null):t},O=function(t){var o=t.ListHeaderComponent,i=t.ListFooterComponent,a=t.ItemSeparatorComponent,l=t.renderItem,c=t.ListItemComponent,u=t.data,f=t.numColumns,d=t.style,m=t.forceScroll,p=t.columnWrapperStyle,x=r(t,["ListHeaderComponent","ListFooterComponent","ItemSeparatorComponent","renderItem","ListItemComponent","data","numColumns","style","forceScroll","columnWrapperStyle"]),h=(f&&f>1?function(e,t){return Array.from({length:Math.ceil(e.length/t)},function(n,r){return e.slice(r*t,r*t+t)})}(u,f):u||[]).map(function(t,n){return Array.isArray(t)?e.createElement(s,{style:[p,{display:"flex",flexDirection:"row"}]},t.map(function(e,t){return l({item:e,index:n.toString()+t})})):c?e.createElement(c,{item:t}):l({item:t,index:n})});return e.createElement(e.Fragment,null,k(o),e.createElement(L,n({style:[d,m&&{flexShrink:1}]},x),h.map(function(t,n){return a&&n!==h.length-1?[t,e.createElement(a,{key:n})]:t})),k(i))},A=x,N=x,j=h,F=g,T=g,z=g,H=s,R={alert:function(e){function t(t){return e.apply(this,arguments)}return t.toString=function(){return e.toString()},t}(function(e){return alert(e)})},V={isRTL:!1,forceRTL:function(e){V.isRTL=e}},P=x,D={event:function(){},parallel:function(e){var t=e.reduce(function(e,t){return Math.max(e,t.config.duration)},0);return{start:function(e){setTimeout(e,t)}}},timing:function(e,t){return{ref:e,config:t}},Value:function(e){this.interpolate=function(){return e}},View:s,FlatList:O};exports.ActivityIndicator=function(t){var o=t.color,i=t.center,a=t.styles,l=r(t,["color","center","styles"]);return e.createElement(s,n({style:[u.shell,o&&{color:o},i&&u.center,a]},l),e.createElement(s,{style:u.circle}))},exports.Alert=R,exports.Animated=D,exports.BackHandler={},exports.Dimensions=f,exports.Easing={},exports.FlatList=O,exports.I18nManager=V,exports.Image=function(t){return t.webp?e.createElement("picture",null,e.createElement("source",{srcset:t.webp,type:"image/webp"}),e.createElement("img",n({className:l(t.style),src:t.source?t.source.uri:t.source},t))):e.createElement("img",n({className:l(t.style),src:t.source?t.source.uri:t.source},t))},exports.ImageBackground=A,exports.InteractionManager=C,exports.Keyboard={dismiss:function(){}},exports.KeyboardAvoidingView=S,exports.LayoutAnimation={easeInEaseOut:function(){},configureNext:function(e){}},exports.Linking=E,exports.Modal=function(t){var n=t.children;return t.visible?e.createElement("div",{className:o},e.createElement("div",{className:i,onClickCapture:t.onBackdropPress}),n):null},exports.PanResponder={create:function(){return{panHandlers:{}}}},exports.Picker=function(t){var o=t.style,i=t.children,a=t.items,c=t.onValueChange,s=r(t,["style","children","items","onValueChange"]),u=e.useState(!1),f=u[0],d=u[1],m=e.useRef(),p=function(e){m.current.contains(e.target)||d(!1)};e.useEffect(function(){return document.addEventListener("mousedown",p),function(){document.removeEventListener("mousedown",p)}},[]);var x=l(o);return e.createElement("div",{ref:m},e.createElement("div",{onClick:function(){d(!f)}},i),e.createElement("div",n({className:x,style:{position:"absolute",right:"auto",left:"auto",backgroundColor:"#f1f1f1",minWidth:"160px",overFlow:"auto",boxShadow:"0px 8px 16px 0px rgba(0,0,0,0.2)",zIndex:"1"}},s),f&&a.map(function(t){return e.createElement("a",n({onClick:function(){c(t.value),d(!1)},value:t.value},s),t.label)})))},exports.PixelRatio={getPixelSizeForLayoutSize:function(e){return e/8+"rem"},roundToNearestPixel:function(e){return"string"==typeof e?e:e+"px"},get:function(){return 2}},exports.Platform={OS:"web",select:function(e){return e&&"web"in e?e.web:e.default}},exports.RefreshControl=b,exports.SafeAreaView=H,exports.ScrollView=L,exports.SectionList=function(t){var n=t.renderItem,o=t.renderSectionHeader,i=t.ItemSeparatorComponent,a=t.ListFooterComponent,l=t.sections,c=r(t,["renderItem","renderSectionHeader","ItemSeparatorComponent","ListFooterComponent","sections"]);return e.createElement(L,c,l.map(function(t){return e.createElement(e.Fragment,null,o&&o({section:t}),t.data&&t.data.map(function(t,r){return e.createElement(e.Fragment,null,0!==r?e.createElement(i,null):null,n({item:t,index:r}))}))}),e.createElement(a,null))},exports.StatusBar=w,exports.StyleSheet=p,exports.Switch=P,exports.Text=N,exports.TextInput=function(t){var o=t.style,i=t.onChangeText,a=t.onSubmitEditing,c=r(t,["style","onChangeText","onSubmitEditing"]),s={};return a&&(s.onKeyDown=function(e){13===e.keyCode&&a()}),e.createElement("input",n({className:l(o),onChange:i},c,s))},exports.TouchableHighlight=z,exports.TouchableNativeFeedback=T,exports.TouchableOpacity=F,exports.TouchableWithoutFeedback=j,exports.View=s;
+var e=require("react"),t=require("goober");function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function r(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}var o,i=t.css({position:"fixed",height:"100%",width:"100%",zIndex:1,top:0,left:0,bottom:0,right:0,overflow:"hidden",display:"flex"}),a=t.css({backgroundColor:"rgba(0, 0, 0, 0.5)",position:"absolute",top:0,left:0,bottom:0,right:0,zIndex:0});function l(e,t){return void 0===t&&(t=1),t>0?e.reduce(function(e,n){return e.concat(Array.isArray(n)?l(n,t-1):n)},[]):e.slice()}t.glob(((o={})["html,body"]={margin:0,padding:0,display:"flex",flex:1,width:"100%",height:"100%"},o["*"]={boxSizing:"border-box",lineHeight:1,"-webkitFontSmoothing":"antialiased"},o));var c=function(){return l([].slice.call(arguments),Infinity).map(function(e,n){return"object"==typeof e?t.css.call({o:!n},e):e}).filter(Boolean).join(" ").trim()},s=function(e){var n={};if("onPress"in e&&(n.onClickCapture=e.onPress,delete e.onPress),"style"in e&&(n.className=c(e.style),delete e.style),"className"in e&&(n.className=(e.className+" "+(n.className||"")).trim()),"flex"in e){var r=t.css({flex:e.flex||1,flexDirection:"column",display:"flex",overflow:"hidden"});n.className=((n.className||"")+" "+r).trim(),delete e.flex}return Object.assign({},e||{},n)},u=function(t){var n=t.children,o=r(t,["children"]),i=s(o);return e.createElement("div",i,n)},f={shell:{display:"flex",position:"relative",width:"4rem",height:"4rem"},circle:{display:"flex",border:"4px solid currentColor",borderRadius:"50%",animation:"spin 1s linear infinite",borderColor:"currentColor transparent transparent transparent",width:"4rem",height:"4rem"},center:{alignSelf:"center"}},d={getPixelSizeForLayoutSize:function(e){return Math.round(e*d.get()/1.33)+"px"},roundToNearestPixel:function(e){return"string"==typeof e?e:e+"px"},get:function(){return 1.33}},p={get:function(e){switch(e){case"window":return{width:"undefined"==typeof window?414:window.innerWidth,height:"undefined"==typeof window?414:window.innerHeight}}}},m=function(e){return Object.keys(e).map(function(t){return t+"("+e[t]+")"}).join(" ")},x=[function(e){for(var t in e){var n=e[t];Array.isArray(n)&&(e[t]="transform"===t?n.map(m).join(" "):n.join(" "))}},function(e){var t=null;for(var n in e)/^(shadow|elevation)/.test(n)&&((t=t||{})[n]=e[n],delete e[n]);if(t){if(t.shadowOpacity){var r=t.shadowColor.match(/\d+/g);t.shadowColor="rgba("+r[0]+", "+r[1]+", "+r[2]+", "+t.shadowOpacity+")"}var o=t.shadowOffset||{},i=(o.height||0)+(/em$/.test(o.height)?"":"px"),a=(o.width||0)+(/em$/.test(o.width)?"":"px"),l=(t.shadowRadius||0)+(/em$/.test(t.shadowRadius)?"":"px");e.boxShadow=a+" "+i+" "+l+" "+t.shadowColor}},function(e){var t=/horizontal/i,n=/vertical/i;for(var r in e){if(t.test(r)){var o=r.replace(t,"");e[o+"Left"]=e[o+"Right"]=e[r],delete e[r]}if(n.test(r)){var i=r.replace(n,"");e[i+"Top"]=e[i+"Bottom"]=e[r],delete e[r]}}},function(e){"borderWidth"in e&&!("borderStyle"in e)&&(e.borderStyle="solid");var t=/border([A-Z]+[a-z]+)Color/g;for(var n in e){var r=t.exec(n);r&&!e["border"+r[1]+"Style"]&&(e["border"+r[1]+"Style"]="solid")}},function(e){var t=/(end|start)/i;for(var n in e){var r=t.exec(n);t.test(n)&&(e[n.replace(r[0],"Start"===r[0]?"Left":"Right")]=e[n],delete e[n])}},function(e){var t=/^(fl|al|ju)/i;if(!e.display||"flex"!==e.display){var n=!1;for(var r in e)t.test(r)&&(n=!0);n&&Object.assign(e,{display:"flex"})}},function(e){var t=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;for(var n in e)"number"!=typeof e[n]||t.test(n)||(e[n]=d.getPixelSizeForLayoutSize(e[n]))}],h={flatten:function(e){return e.reduce(function(e,t){return t?Array.isArray(t)?Object.assign(e,h.flatten(t)):Object.assign(e,t):e},{})},create:function(e){var t={},n=function(n){var r=e[n];x.forEach(function(e){return e(r)}),t[n]=r};for(var r in e)n(r);return t},absoluteFillObject:{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:1}},g=function(t){var n=t.tag,o=void 0===n?"span":n,i=r(t,["tag"]),a=s(i);return e.createElement(o,a,i.children)},y=function(t){var n=t.children,o=r(t,["children"]),i=s(o);return e.cloneElement(n,i)},v={cursor:"pointer",border:0,outline:0,background:"none",margin:0,padding:0},b=function(t){var o=t.children,i=t.style,a=r(t,["children","style"]),l=s(n({style:[v].concat(i)},a));return e.createElement("button",l,o)},w=function(){return null},S=w,C=w,E=w,I=y,L=y,k=h.create({scrollView:{flexDirection:"column",display:"flex",overflow:"auto",flexShrink:0},scrollViewHorizontal:{width:"100%",flexDirection:"row"},container:{display:"flex",flex:1,flexDirection:"column"},containerHorizontal:{display:"flex",flex:1,flexDirection:"row"}}),z=function(t){var n=t.horizontal;return e.createElement(u,{style:[k.scrollView,t.style,n&&k.scrollViewHorizontal]},e.createElement(u,{style:[n?k.containerHorizontal:k.container,t.contentContainerStyle]},t.children))},A=function(t){return"function"==typeof t?e.createElement(t,null):t},O=function(t){var o=t.ListHeaderComponent,i=t.ListFooterComponent,a=t.ItemSeparatorComponent,l=t.renderItem,c=t.ListItemComponent,s=t.data,f=t.numColumns,d=t.style,p=t.forceScroll,m=t.columnWrapperStyle,x=r(t,["ListHeaderComponent","ListFooterComponent","ItemSeparatorComponent","renderItem","ListItemComponent","data","numColumns","style","forceScroll","columnWrapperStyle"]),h=(f&&f>1?function(e,t){return Array.from({length:Math.ceil(e.length/t)},function(n,r){return e.slice(r*t,r*t+t)})}(s,f):s||[]).map(function(t,n){return Array.isArray(t)?e.createElement(u,{style:[m,{display:"flex",flexDirection:"row"}]},t.map(function(e,t){return l({item:e,index:n.toString()+t})})):c?e.createElement(c,{item:t}):l({item:t,index:n})});return e.createElement(e.Fragment,null,A(o),e.createElement(z,n({style:[d,p&&{flexShrink:1}]},x),h.map(function(t,n){return a&&n!==h.length-1?[t,e.createElement(a,{key:n})]:t})),A(i))},F=g,N=g,j=y,T=b,H=b,R=b,P=u,V={alert:function(e){function t(t){return e.apply(this,arguments)}return t.toString=function(){return e.toString()},t}(function(e){return alert(e)})},D={isRTL:!1,forceRTL:function(e){D.isRTL=e}},B=g,M={event:function(){},parallel:function(e){var t=e.reduce(function(e,t){return Math.max(e,t.config.duration)},0);return{start:function(e){setTimeout(e,t)}}},timing:function(e,t){return{ref:e,config:t}},Value:function(e){this.interpolate=function(){return e}},View:u,FlatList:O};exports.ActivityIndicator=function(t){var o=t.color,i=t.center,a=t.styles,l=r(t,["color","center","styles"]);return e.createElement(u,n({style:[f.shell,o&&{color:o},i&&f.center,a]},l),e.createElement(u,{style:f.circle}))},exports.Alert=V,exports.Animated=M,exports.AppRegistry={registerComponent:function(e,t){}},exports.BackHandler={},exports.Dimensions=p,exports.Easing={},exports.FlatList=O,exports.I18nManager=D,exports.Image=function(t){return t.webp?e.createElement("picture",null,e.createElement("source",{srcset:t.webp,type:"image/webp"}),e.createElement("img",n({className:c(t.style),src:t.source?t.source.uri:t.source},t))):e.createElement("img",n({className:c(t.style),src:t.source?t.source.uri:t.source},t))},exports.ImageBackground=F,exports.InteractionManager=I,exports.Keyboard={dismiss:function(){}},exports.KeyboardAvoidingView=L,exports.LayoutAnimation={easeInEaseOut:function(){},configureNext:function(e){}},exports.Linking=E,exports.Modal=function(t){var n=t.children;return t.visible?e.createElement("div",{className:i},e.createElement("div",{className:a,onClickCapture:t.onBackdropPress}),n):null},exports.PanResponder={create:function(){return{panHandlers:{}}}},exports.Picker=function(t){var o=t.style,i=t.children,a=t.items,l=t.onValueChange,s=r(t,["style","children","items","onValueChange"]),u=e.useState(!1),f=u[0],d=u[1],p=e.useRef(),m=function(e){p.current.contains(e.target)||d(!1)};e.useEffect(function(){return document.addEventListener("mousedown",m),function(){document.removeEventListener("mousedown",m)}},[]);var x=c(o);return e.createElement("div",{ref:p},e.createElement("div",{onClick:function(){d(!f)}},i),e.createElement("div",n({className:x,style:{position:"absolute",right:"auto",left:"auto",backgroundColor:"#f1f1f1",minWidth:"160px",overFlow:"auto",boxShadow:"0px 8px 16px 0px rgba(0,0,0,0.2)",zIndex:"1"}},s),f&&a.map(function(t){return e.createElement("a",n({onClick:function(){l(t.value),d(!1)},value:t.value},s),t.label)})))},exports.PixelRatio=d,exports.Platform={OS:"web",select:function(e){return e&&"web"in e?e.web:e.default}},exports.RefreshControl=C,exports.SafeAreaView=P,exports.ScrollView=z,exports.SectionList=function(t){var n=t.renderItem,o=t.renderSectionHeader,i=t.ItemSeparatorComponent,a=t.ListFooterComponent,l=t.sections,c=r(t,["renderItem","renderSectionHeader","ItemSeparatorComponent","ListFooterComponent","sections"]);return e.createElement(z,c,l.map(function(t){return e.createElement(e.Fragment,null,o&&o({section:t}),t.data&&t.data.map(function(t,r){return e.createElement(e.Fragment,null,0!==r?e.createElement(i,null):null,n({item:t,index:r}))}))}),e.createElement(a,null))},exports.StatusBar=S,exports.StyleSheet=h,exports.Switch=B,exports.Text=N,exports.TextInput=function(t){var o=t.style,i=t.onChangeText,a=t.onSubmitEditing,l=r(t,["style","onChangeText","onSubmitEditing"]),s={};return a&&(s.onKeyDown=function(e){13===e.keyCode&&a()}),e.createElement("input",n({className:c(o),onChange:i},l,s))},exports.TouchableHighlight=R,exports.TouchableNativeFeedback=H,exports.TouchableOpacity=T,exports.TouchableWithoutFeedback=j,exports.View=u;
 //# sourceMappingURL=cramped.js.map

package.json

 {
   "name": "cramped",
-  "version": "0.0.2-alpha.2",
+  "version": "0.0.3",
   "main": "dist/cramped.js",
@@ -5,0 +5,0 @@ "umd:main": "dist/cramped.umd.js",

src/api/concat.js

@@ -1,7 +0,24 @@
-import { css } from 'goober';
+import { css, glob } from 'goober';
 
+glob({
+    ['html,body']: {
+        margin: 0,
+        padding: 0,
+        display: 'flex',
+        flex: 1,
+        width: '100%',
+        height: '100%'
+    },
+    '*': {
+        boxSizing: 'border-box',
+        lineHeight: 1,
+        '-webkitFontSmoothing': 'antialiased'
+    }
+});
+
 function flatDeep(arr, d = 1) {
-    return d > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val), [])
-                 : arr.slice();
- }
+    return d > 0
+        ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val), [])
+        : arr.slice();
+}
 
@@ -8,0 +25,0 @@ export const concat = (...styles) =>

src/api/handle-props.js

@@ -1,5 +0,5 @@
-import { css } from "goober";
-import { concat } from "./concat";
+import { css } from 'goober';
+import { concat } from './concat';
 
-export const handleProps = props => {
+export const handleProps = (props) => {
     const spread = {};
@@ -31,5 +31,6 @@
         spread.className = `${spread.className || ''} ${flexClassName}`.trim();
+
         delete props.flex;
     }
     return Object.assign({}, props || {}, spread);
-};
+};

src/core/view.js

 import { createElement } from 'react';
-import { handleProps } from "../api/handle-props";
+import { handleProps } from '../api/handle-props';
 
@@ -7,2 +7,2 @@ export const View = ({ children, ...props }) => {
     return <div {...spread}>{children}</div>;
-};
+};

src/index.js

@@ -11,4 +11,6 @@ import { createElement, cloneElement, Fragment } from 'react';
 const PixelRatio = {
-    getPixelSizeForLayoutSize: val => `${val / 8}rem`,
-    roundToNearestPixel: val => {
+    // According to web sources 1dp = 1.33px at 100%, and o transform it to em we consider 16px to be the base.
+    // Also we multiply with the PixelRatio
+    getPixelSizeForLayoutSize: (val) => `${Math.round((val * PixelRatio.get()) / 1.33)}px`,
+    roundToNearestPixel: (val) => {
         if (typeof val === 'string') {
@@ -20,3 +22,3 @@ return val;
     },
-    get: () => 2
+    get: () => 1.33
 };
@@ -37,7 +39,7 @@
 
-const flattenObject = value => {
+const flattenObject = (value) => {
     const keys = Object.keys(value);
 
     return keys
-        .map(key => {
+        .map((key) => {
             return `${key}(${value[key]})`;
@@ -50,3 +52,3 @@ })
     // transforms and list
-    entry => {
+    (entry) => {
         for (let prop in entry) {
@@ -66,3 +68,3 @@ const val = entry[prop];
     // shadow to boxShadow
-    entry => {
+    (entry) => {
         let collected = null;
@@ -85,5 +87,7 @@ for (let prop in entry) {
 
-            const height = (shadowOffset.height || 0) + (/em$/.test(shadowOffset.height) ? '' : 'px');
+            const height =
+                (shadowOffset.height || 0) + (/em$/.test(shadowOffset.height) ? '' : 'px');
             const width = (shadowOffset.width || 0) + (/em$/.test(shadowOffset.width) ? '' : 'px');
-            const radius = (collected.shadowRadius || 0) + (/em$/.test(collected.shadowRadius) ? '' : 'px');
+            const radius =
+                (collected.shadowRadius || 0) + (/em$/.test(collected.shadowRadius) ? '' : 'px');
 
@@ -95,3 +99,3 @@ entry.boxShadow = `${width} ${height} ${radius} ${collected.shadowColor}`;
     // horizontal and vertical
-    entry => {
+    (entry) => {
         const horizontalRule = /horizontal/i;
@@ -116,3 +120,3 @@ const verticalRule = /vertical/i;
     // Border for web
-    entry => {
+    (entry) => {
         if ('borderWidth' in entry && !('borderStyle' in entry)) {
@@ -134,3 +138,3 @@ entry.borderStyle = 'solid';
     // Start/end
-    entry => {
+    (entry) => {
         const rule = /(end|start)/i;
@@ -147,3 +151,3 @@ for (let prop in entry) {
     // Auto define display: flex;
-    entry => {
+    (entry) => {
         const rule = /^(fl|al|ju)/i;
@@ -166,2 +170,12 @@ const hasDisplaySetToFlex = entry.display && entry.display === 'flex';
         }
+    },
+
+    // Add `em` value for numeric props
+    (entry) => {
+        const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
+        for (let prop in entry) {
+            if (typeof entry[prop] == 'number' && !IS_NON_DIMENSIONAL.test(prop)) {
+                entry[prop] = PixelRatio.getPixelSizeForLayoutSize(entry[prop]);
+            }
+        }
     }
@@ -191,3 +205,3 @@ ];
             // Gotta have transformers
-            stlyeTransformers.forEach(fn => fn(entry));
+            stlyeTransformers.forEach((fn) => fn(entry));
 
@@ -211,3 +225,3 @@ map[name] = entry;
     OS: 'web',
-    select: val => (val && 'web' in val ? val.web : val.default)
+    select: (val) => (val && 'web' in val ? val.web : val.default)
 };
@@ -223,3 +237,3 @@ const Primitive = ({ tag: Tag = 'span', ...props }) => {
     if (onSubmitEditing) {
-        handlers.onKeyDown = e => {
+        handlers.onKeyDown = (e) => {
             if (e.keyCode === 13) {
@@ -287,3 +301,8 @@ onSubmitEditing();
         <View style={[styles.scrollView, style, horizontal && styles.scrollViewHorizontal]}>
-            <View style={[horizontal ? styles.containerHorizontal : styles.container, contentContainerStyle]}>
+            <View
+                style={[
+                    horizontal ? styles.containerHorizontal : styles.container,
+                    contentContainerStyle
+                ]}
+            >
                 {children}
@@ -306,3 +325,3 @@ </View>
 
-const renderReferenceOrFunction = Value => {
+const renderReferenceOrFunction = (Value) => {
     if (typeof Value === 'function') {
@@ -315,4 +334,2 @@ return <Value />;
 
-const RNPickerSelect = Primitive;
-
 const FlatList = ({
@@ -374,3 +391,3 @@ ListHeaderComponent,
         <ScrollView {...props}>
-            {sections.map(section => {
+            {sections.map((section) => {
                 return (
@@ -396,3 +413,3 @@ <>
 
-const Image = props => {
+const Image = (props) => {
     if (props.webp) {
@@ -427,3 +444,3 @@ return (
 const Alert = {
-    alert: msg => alert(msg)
+    alert: (msg) => alert(msg)
 };
@@ -433,3 +450,3 @@
     isRTL: false,
-    forceRTL: val => {
+    forceRTL: (val) => {
         I18nManager.isRTL = val;
@@ -441,4 +458,4 @@ }
 const Animated = {
-    event: function() {},
-    parallel: function(entries) {
+    event: function () {},
+    parallel: function (entries) {
         const maxDuration = entries.reduce((out, item) => {
@@ -454,7 +471,7 @@ return Math.max(out, item.config.duration);
     },
-    timing: function(ref, config) {
+    timing: function (ref, config) {
         return { ref, config };
     },
     Value: function Value(val) {
-        this.interpolate = function() {
+        this.interpolate = function () {
             return val;
@@ -478,3 +495,8 @@ };
 
+const AppRegistry = {
+    registerComponent: (name, renderFn) => {}
+};
+
 export {
+    AppRegistry,
     Alert,
@@ -481,0 +503,0 @@ ActivityIndicator,

No alert changes

Improved metrics

Total package byte prevSize

29538

increased by5.48%

Lines of code

689

increased by6.33%

No dependency changes