svgs - npm Package Compare versions

Comparing version 3.3.1 to 4.0.0

CHANGELOG.md

 # CHANGELOG
 
+### 4.0.0
+
+- Upgrade to babel 7
+
 ### 3.3.1
@@ -4,0 +8,0 @@

lib/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,22 +6,40 @@ Object.defineProperty(exports, "__esModule", {
 });
-exports.Use = exports.TextPath = exports.Text = exports.TSpan = exports.Symbol = exports.Svg = exports.Stop = exports.Rect = exports.RadialGradient = exports.Polyline = exports.Polygon = exports.Pattern = exports.Path = exports.Mask = exports.LinearGradient = exports.Line = exports.Image = exports.G = exports.Ellipse = exports.Defs = exports.ClipPath = exports.Circle = undefined;
+exports.Circle = Circle;
+exports.ClipPath = ClipPath;
+exports.Defs = Defs;
+exports.Ellipse = Ellipse;
+exports.G = G;
+exports.Image = Image;
+exports.Line = Line;
+exports.LinearGradient = LinearGradient;
+exports.Mask = Mask;
+exports.Path = Path;
+exports.Pattern = Pattern;
+exports.Polygon = Polygon;
+exports.Polyline = Polyline;
+exports.RadialGradient = RadialGradient;
+exports.Rect = Rect;
+exports.Stop = Stop;
+exports.Svg = Svg;
+exports.Symbol = _Symbol;
+exports.TSpan = TSpan;
+exports.Text = Text;
+exports.TextPath = TextPath;
+exports.Use = Use;
+exports.default = void 0;
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _propTypes = require('prop-types');
+var _react = _interopRequireDefault(require("react"));
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _ripOut = _interopRequireDefault(require("rip-out"));
 
-var _react = require('react');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _react2 = _interopRequireDefault(_react);
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-var _ripOut = require('rip-out');
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-var _ripOut2 = _interopRequireDefault(_ripOut);
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 /**
@@ -33,4 +51,3 @@ * PropType specification where a value can be represented as number and string.
  */
-var numb = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]);
-
+var numb = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]);
 /**
@@ -45,4 +62,6 @@ * Helper function to copy and paste over properties to a different object if
  */
+
+
 function copypaste(from, to) {
-  for (var _len = arguments.length, props = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+  for (var _len = arguments.length, props = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
     props[_key - 2] = arguments[_key];
@@ -55,3 +74,2 @@ }
 }
-
 /**
@@ -66,8 +84,7 @@ * The `react-native-svg` has some crazy api's that do not match with the
  */
-function prepare(props) {
-  var clean = (0, _ripOut2.default)(props, 'translate', 'scale', 'rotate', 'skewX', 'skewY', 'originX', 'originY', 'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'style');
 
-  var transform = [];
 
-  //
+function prepare(props) {
+  var clean = (0, _ripOut.default)(props, 'translate', 'scale', 'rotate', 'skewX', 'skewY', 'originX', 'originY', 'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'style');
+  var transform = []; //
   // Correctly apply the transformation properties.
@@ -77,17 +94,15 @@ // To apply originX and originY we need to translate the element on those values and
   //
-  if ('originX' in props || 'originY' in props) transform.push('translate(' + (props.originX || 0) + ', ' + (props.originY || 0) + ')');
-  if ('translate' in props) transform.push('translate(' + props.translate + ')');
-  if ('scale' in props) transform.push('scale(' + props.scale + ')');
-  if ('rotate' in props) transform.push('rotate(' + props.rotate + ')');
-  if ('skewX' in props) transform.push('skewX(' + props.skewX + ')');
-  if ('skewY' in props) transform.push('skewY(' + props.skewY + ')');
-  if ('originX' in props || 'originY' in props) transform.push('translate(' + (-props.originX || 0) + ', ' + (-props.originY || 0) + ')');
-  if (transform.length) clean.transform = transform.join(' ');
 
-  //
+  if ('originX' in props || 'originY' in props) transform.push("translate(".concat(props.originX || 0, ", ").concat(props.originY || 0, ")"));
+  if ('translate' in props) transform.push("translate(".concat(props.translate, ")"));
+  if ('scale' in props) transform.push("scale(".concat(props.scale, ")"));
+  if ('rotate' in props) transform.push("rotate(".concat(props.rotate, ")"));
+  if ('skewX' in props) transform.push("skewX(".concat(props.skewX, ")"));
+  if ('skewY' in props) transform.push("skewY(".concat(props.skewY, ")"));
+  if ('originX' in props || 'originY' in props) transform.push("translate(".concat(-props.originX || 0, ", ").concat(-props.originY || 0, ")"));
+  if (transform.length) clean.transform = transform.join(' '); //
   // Correctly set the initial style value.
   //
-  var style = 'style' in props ? props.style : {};
 
-  //
+  var style = 'style' in props ? props.style : {}; //
   // This is the nasty part where we depend on React internals to work as
@@ -98,6 +113,5 @@ // intended. If we add an empty object as style, it shouldn't render a `style`
   //
+
   copypaste(props, style, 'fontFamily', 'fontSize', 'fontWeight', 'fontStyle');
-  clean.style = style;
-
-  //
+  clean.style = style; //
   // React-Native svg provides as a default of `xMidYMid` if aspectRatio is not
@@ -107,3 +121,5 @@ // specified with align information. So we need to support this behavior and
   //
+
   var preserve = clean.preserveAspectRatio;
+
   if (preserve && preserve !== 'none' && !~preserve.indexOf(' ')) {
@@ -115,3 +131,2 @@ clean.preserveAspectRatio = 'xMidYMid ' + preserve;
 }
-
 /**
@@ -124,6 +139,7 @@ * Return a circle SVG element.
  */
+
+
 function Circle(props) {
-  return _react2.default.createElement('circle', prepare(props));
+  return _react.default.createElement("circle", prepare(props));
 }
-
 /**
@@ -136,6 +152,7 @@ * Return a clipPath SVG element.
  */
+
+
 function ClipPath(props) {
-  return _react2.default.createElement('clipPath', prepare(props));
+  return _react.default.createElement("clipPath", prepare(props));
 }
-
 /**
@@ -148,6 +165,7 @@ * Return a defs SVG element.
  */
+
+
 function Defs(props) {
-  return _react2.default.createElement('defs', prepare(props));
+  return _react.default.createElement("defs", prepare(props));
 }
-
 /**
@@ -160,6 +178,7 @@ * Return a ellipse SVG element.
  */
+
+
 function Ellipse(props) {
-  return _react2.default.createElement('ellipse', prepare(props));
+  return _react.default.createElement("ellipse", prepare(props));
 }
-
 /**
@@ -172,14 +191,15 @@ * Return a g SVG element.
  */
+
+
 function G(props) {
   var x = props.x,
       y = props.y,
-      rest = _objectWithoutProperties(props, ['x', 'y']);
+      rest = _objectWithoutProperties(props, ["x", "y"]);
 
   if ((x || y) && !rest.translate) {
-    rest.translate = (x || 0) + ', ' + (y || 0);
+    rest.translate = "".concat(x || 0, ", ").concat(y || 0);
   }
 
-  return _react2.default.createElement('g', prepare(rest));
+  return _react.default.createElement("g", prepare(rest));
 }
-
 /**
@@ -191,2 +211,4 @@ * PropType validation for the <G />.
  */
+
+
 G.propTypes = {
@@ -196,3 +218,2 @@ x: numb,
 };
-
 /**
@@ -205,6 +226,6 @@ * Return a image SVG element.
  */
+
 function Image(props) {
-  return _react2.default.createElement('image', prepare(props));
+  return _react.default.createElement("image", prepare(props));
 }
-
 /**
@@ -217,6 +238,7 @@ * Return a line SVG element.
  */
+
+
 function Line(props) {
-  return _react2.default.createElement('line', prepare(props));
+  return _react.default.createElement("line", prepare(props));
 }
-
 /**
@@ -229,6 +251,7 @@ * Return a linearGradient SVG element.
  */
+
+
 function LinearGradient(props) {
-  return _react2.default.createElement('linearGradient', prepare(props));
+  return _react.default.createElement("linearGradient", prepare(props));
 }
-
 /**
@@ -241,6 +264,7 @@ * Return a path SVG element.
  */
+
+
 function Path(props) {
-  return _react2.default.createElement('path', prepare(props));
+  return _react.default.createElement("path", prepare(props));
 }
-
 /**
@@ -253,6 +277,7 @@ * Return a polygon SVG element.
  */
+
+
 function Polygon(props) {
-  return _react2.default.createElement('polygon', prepare(props));
+  return _react.default.createElement("polygon", prepare(props));
 }
-
 /**
@@ -265,6 +290,7 @@ * Return a polyline SVG element.
  */
+
+
 function Polyline(props) {
-  return _react2.default.createElement('polyline', prepare(props));
+  return _react.default.createElement("polyline", prepare(props));
 }
-
 /**
@@ -277,6 +303,7 @@ * Return a radialGradient SVG element.
  */
+
+
 function RadialGradient(props) {
-  return _react2.default.createElement('radialGradient', prepare(props));
+  return _react.default.createElement("radialGradient", prepare(props));
 }
-
 /**
@@ -289,6 +316,7 @@ * Return a rect SVG element.
  */
+
+
 function Rect(props) {
-  return _react2.default.createElement('rect', prepare(props));
+  return _react.default.createElement("rect", prepare(props));
 }
-
 /**
@@ -301,6 +329,7 @@ * Return a stop SVG element.
  */
+
+
 function Stop(props) {
-  return _react2.default.createElement('stop', prepare(props));
+  return _react.default.createElement("stop", prepare(props));
 }
-
 /**
@@ -313,22 +342,17 @@ * Return a SVG element.
  */
+
+
 function Svg(props) {
   var title = props.title,
-      rest = _objectWithoutProperties(props, ['title']);
+      rest = _objectWithoutProperties(props, ["title"]);
 
   if (title) {
-    return _react2.default.createElement(
-      'svg',
-      _extends({ role: 'img', 'aria-label': '[title]' }, prepare(rest)),
-      _react2.default.createElement(
-        'title',
-        null,
-        title
-      ),
-      props.children
-    );
+    return _react.default.createElement("svg", _extends({
+      role: "img",
+      "aria-label": "[title]"
+    }, prepare(rest)), _react.default.createElement("title", null, title), props.children);
   }
 
-  return _react2.default.createElement('svg', prepare(rest));
+  return _react.default.createElement("svg", prepare(rest));
 }
-
 /**
@@ -340,7 +364,8 @@ * PropType validation for the <Svg />.
  */
+
+
 Svg.propTypes = {
-  title: _propTypes2.default.string,
-  children: _propTypes2.default.any
+  title: _propTypes.default.string,
+  children: _propTypes.default.any
 };
-
 /**
@@ -353,6 +378,6 @@ * Return a symbol SVG element.
  */
+
 function _Symbol(props) {
-  return _react2.default.createElement('symbol', prepare(props));
+  return _react.default.createElement("symbol", prepare(props));
 }
-
 /**
@@ -370,2 +395,4 @@ * Return a text SVG element.
  */
+
+
 function Text(props) {
@@ -377,7 +404,12 @@ var x = props.x,
       rotate = props.rotate,
-      rest = _objectWithoutProperties(props, ['x', 'y', 'dx', 'dy', 'rotate']);
+      rest = _objectWithoutProperties(props, ["x", "y", "dx", "dy", "rotate"]);
 
-  return _react2.default.createElement('text', _extends({}, prepare(rest), { x: x, y: y, dx: dx, dy: dy, rotate: rotate }));
+  return _react.default.createElement("text", _extends({}, prepare(rest), {
+    x: x,
+    y: y,
+    dx: dx,
+    dy: dy,
+    rotate: rotate
+  }));
 }
-
 /**
@@ -389,2 +421,4 @@ * PropType validation for the <Text />.
  */
+
+
 Text.propTypes = {
@@ -397,3 +431,2 @@ x: numb,
 };
-
 /**
@@ -411,2 +444,3 @@ * Return a tspan SVG element.
  */
+
 function TSpan(props) {
@@ -418,7 +452,12 @@ var x = props.x,
       rotate = props.rotate,
-      rest = _objectWithoutProperties(props, ['x', 'y', 'dx', 'dy', 'rotate']);
+      rest = _objectWithoutProperties(props, ["x", "y", "dx", "dy", "rotate"]);
 
-  return _react2.default.createElement('tspan', _extends({}, prepare(rest), { x: x, y: y, dx: dx, dy: dy, rotate: rotate }));
+  return _react.default.createElement("tspan", _extends({}, prepare(rest), {
+    x: x,
+    y: y,
+    dx: dx,
+    dy: dy,
+    rotate: rotate
+  }));
 }
-
 /**
@@ -430,4 +469,5 @@ * PropType validation for the <TSpan />.
  */
+
+
 TSpan.propTypes = Text.propTypes;
-
 /**
@@ -440,6 +480,6 @@ * Return a textpath SVG element.
  */
+
 function TextPath(props) {
-  return _react2.default.createElement('textPath', prepare(props));
+  return _react.default.createElement("textPath", prepare(props));
 }
-
 /**
@@ -452,6 +492,7 @@ * Return a use SVG element.
  */
+
+
 function Use(props) {
-  return _react2.default.createElement('use', prepare(props));
+  return _react.default.createElement("use", prepare(props));
 }
-
 /**
@@ -464,6 +505,7 @@ * Return a mask SVG element.
  */
+
+
 function Mask(props) {
-  return _react2.default.createElement('mask', prepare(props));
+  return _react.default.createElement("mask", prepare(props));
 }
-
 /**
@@ -476,31 +518,12 @@ * Return a pattern SVG element.
  */
+
+
 function Pattern(props) {
-  return _react2.default.createElement('pattern', prepare(props));
-}
-
-//
+  return _react.default.createElement("pattern", prepare(props));
+} //
 // Expose everything in the same way as `react-native-svg` is doing.
 //
-exports.Circle = Circle;
-exports.ClipPath = ClipPath;
-exports.Defs = Defs;
-exports.Ellipse = Ellipse;
-exports.G = G;
-exports.Image = Image;
-exports.Line = Line;
-exports.LinearGradient = LinearGradient;
-exports.Mask = Mask;
-exports.Path = Path;
-exports.Pattern = Pattern;
-exports.Polygon = Polygon;
-exports.Polyline = Polyline;
-exports.RadialGradient = RadialGradient;
-exports.Rect = Rect;
-exports.Stop = Stop;
-exports.Svg = Svg;
-exports.Symbol = _Symbol;
-exports.TSpan = TSpan;
-exports.Text = Text;
-exports.TextPath = TextPath;
-exports.Use = Use;
-exports.default = Svg;
+
+
+var _default = Svg;
+exports.default = _default;

package.json

 {
   "name": "svgs",
-  "version": "3.3.1",
+  "version": "4.0.0",
   "description": "svgs is a compatiblity layer between svg and react-native-svg",
   "main": "./lib",
+  "browser": "./lib",
+  "module": "./index",
   "react-native": "./index",
@@ -35,7 +37,8 @@ "scripts": {
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-register": "^6.26.0",
+    "@babel/cli": "^7.1.2",
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/register": "^7.0.0",
     "assume": "^2.1.0",
@@ -65,7 +68,7 @@ "coveralls": "^3.0.0",
     "plugins": [
-      "transform-object-rest-spread"
+      "@babel/plugin-proposal-object-rest-spread"
     ],
     "presets": [
-      "babel-preset-es2015",
-      "babel-preset-react"
+      "@babel/preset-env",
+      "@babel/preset-react"
     ]
@@ -72,0 +75,0 @@ },

No alert changes

Worsened metrics

Total package byte prevSize

34958

decreased by-65.01%

Dev dependency count

22

increased by4.76%

Number of package files

10

decreased by-33.33%

Lines of code

880

decreased by-26.97%

No dependency changes