Merge pull request #166 from kristerkari/prepare-version-1

Prepare version 1.0.0

CHANGELOG.md

@@ -1,3 +1,9 @@
+## v1.0.0
+
+- Breaking: drop support for `react-native` versions older than 0.59
+- Breaking: drop support for `react-native-svg` versions older than 12
+- Removed: `semver` dependency.
+
 ## v0.20.0
 
 - Updated: `@svgr/core` dependency to v6.1.2.

README.md

@@ -20,8 +20,6 @@ You can then use your image as a component:
 <Logo width={120} height={40} />
 ```
 
-_If you use React Native version 0.56 or older, you need to rename your `.svg` files to `.svgx`._
-
 ### Demo / Expo demo (iOS/Android/Web)
 
 - [react-native-svg-example](https://github.com/kristerkari/react-native-svg-example)
@@ -31,7 +29,7 @@ _If you use React Native version 0.56 or older, you need to rename your `.svg` f
 
 ### Step 1: Install react-native-svg library
 
-Make sure that you have installed and linked `react-native-svg` library:
+Make sure that you have installed the `react-native-svg` library:
 
 - https://github.com/react-native-community/react-native-svg#installation
 
@@ -43,18 +41,13 @@ yarn add --dev react-native-svg-transformer
 
 ### Step 3: Configure the react native packager
 
-#### For Expo SDK v40.0.0 or newer
+#### For Expo SDK v41.0.0 or newer
 
 Merge the contents from your project's `metro.config.js` file with this config (create the file if it does not exist already).
 
 `metro.config.js`:
 
 ```js
-// expo v40:
-const { getDefaultConfig } = require("@expo/metro-config");
-
-// expo v41:
-// remove the @ (see: https://blog.expo.io/expo-sdk-41-12cc5232f2ef)
 const { getDefaultConfig } = require("expo/metro-config");
 
 module.exports = (() => {
@@ -78,9 +71,9 @@ module.exports = (() => {
 
 ---
 
-#### For React Native v0.57 or newer / Expo SDK v31.0.0 or newer
+#### For React Native v0.59 or newer
 
-If you are using [Expo](https://expo.io/), merge the contents from your project's `metro.config.js` file with this config (create the file if it does not exist already).
+Merge the contents from your project's `metro.config.js` file with this config (create the file if it does not exist already).
 
 `metro.config.js`:
 
@@ -103,51 +96,6 @@ module.exports = (async () => {
 })();
 ```
 
-If you are using [Expo](https://expo.io/), you also need to add this to `app.json`:
-
-```json
-{
-  "expo": {
-    "packagerOpts": {
-      "config": "metro.config.js",
-      "sourceExts": [
-        "expo.ts",
-        "expo.tsx",
-        "expo.js",
-        "expo.jsx",
-        "ts",
-        "tsx",
-        "js",
-        "jsx",
-        "json",
-        "wasm",
-        "svg"
-      ]
-    }
-  }
-}
-```
-
----
-
-#### For React Native v0.56 or older
-
-React Native versions older than 0.57 do not support running the transformer for `.svg` file extension. That is why a `.svgx` file extension should be used instead for your SVG files. This is fixed in React Native 0.57 and newer versions.
-
-Add this to your `rn-cli.config.js` (create the file if it does not exist already):
-
-```js
-module.exports = {
-  getTransformModulePath() {
-    return require.resolve("react-native-svg-transformer");
-  },
-  getSourceExts() {
-    return ["js", "jsx", "svgx"];
-  }
-};
-```
-
-
 ### Using TypeScript
 
 If you are using TypeScript, you need to add this to your `declarations.d.ts` file (create one if you don't have one already, but don't put in the root folder of your project):
@@ -252,4 +200,3 @@ In addition to React Native, this transformer depends on the following libraries
 - [@svgr/core](https://github.com/gregberge/svgr/tree/main/packages/core#readme)
 - [@svgr/plugin-svgo](https://github.com/gregberge/svgr/tree/main/packages/plugin-svgo#readme)
 - [path-dirname](https://github.com/gulpjs/path-dirname#readme)
-- [semver](https://github.com/npm/node-semver#readme)

index.js

@@ -1,50 +1,8 @@
-var semver = require("semver");
-var svgrTransform = require("@svgr/core").transform;
-var resolveConfig = require("@svgr/core").resolveConfig;
-var resolveConfigDir = require("path-dirname");
+const { resolveConfig, transform } = require("@svgr/core");
+const resolveConfigDir = require("path-dirname");
+const upstreamTransformer = require("metro-react-native-babel-transformer");
 
-var upstreamTransformer = null;
-
-var reactNativeVersionString = require("react-native/package.json").version;
-var reactNativeMinorVersion = semver(reactNativeVersionString).minor;
-
-if (reactNativeMinorVersion >= 59) {
-  upstreamTransformer = require("metro-react-native-babel-transformer");
-} else if (reactNativeMinorVersion >= 56) {
-  upstreamTransformer = require("metro/src/reactNativeTransformer");
-} else if (reactNativeMinorVersion >= 52) {
-  upstreamTransformer = require("metro/src/transformer");
-} else if (reactNativeMinorVersion >= 47) {
-  upstreamTransformer = require("metro-bundler/src/transformer");
-} else if (reactNativeMinorVersion === 46) {
-  upstreamTransformer = require("metro-bundler/build/transformer");
-} else {
-  // handle RN <= 0.45
-  var oldUpstreamTransformer = require("react-native/packager/transformer");
-  upstreamTransformer = {
-    transform({ src, filename, options }) {
-      return oldUpstreamTransformer.transform(src, filename, options);
-    }
-  };
-}
-
-// xlink:href is supported in react-native-svg
-// starting from version 9.0.4.
-//
-// TODO: remove this fix in v1.0.0.
-function xlinkHrefToHref(svgrOutput) {
-  return svgrOutput.replace(/xlinkHref=/g, "href=");
-}
-
-function xmlnsSvgToXmlns(svgrOutput) {
-  return svgrOutput.replace(/xmlns:svg=/gi, "xmlns=");
-}
-
-function fixRenderingBugs(svgrOutput) {
-  return xmlnsSvgToXmlns(xlinkHrefToHref(svgrOutput));
-}
-
-var defaultsvgrConfig = {
+const defaultSVGRConfig = {
   native: true,
   plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
   svgoConfig: {
@@ -64,20 +22,14 @@ var defaultsvgrConfig = {
   }
 };
 
-module.exports.transform = function(src, filename, options) {
-  if (typeof src === "object") {
-    // handle RN >= 0.46
-    ({ src, filename, options } = src);
-  }
-
-  if (filename.endsWith(".svg") || filename.endsWith(".svgx")) {
-    var config = resolveConfig.sync(resolveConfigDir(filename));
-    var svgrConfig = config
-      ? Object.assign({}, defaultsvgrConfig, config)
-      : defaultsvgrConfig;
-    var jsCode = svgrTransform.sync(src, svgrConfig);
+module.exports.transform = async({ src, filename, options }) => {
+  if (filename.endsWith(".svg")) {
+    const config = await resolveConfig(resolveConfigDir(filename));
+    const svgrConfig = config
+      ? { ...defaultSVGRConfig, ...config }
+      : defaultSVGRConfig;
     return upstreamTransformer.transform({
-      src: fixRenderingBugs(jsCode),
+      src: await transform(src, svgrConfig),
       filename,
       options
     });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-svg-transformer",
-  "version": "0.20.0",
+  "version": "1.0.0",
   "description": "SVG transformer for react-native",
   "main": "index.js",
   "repository": "https://github.com/kristerkari/react-native-svg-transformer",
@@ -19,12 +19,11 @@
   "dependencies": {
     "@svgr/core": "^6.1.2",
     "@svgr/plugin-svgo": "^6.1.2",
-    "path-dirname": "^1.0.2",
-    "semver": "^5.6.0"
+    "path-dirname": "^1.0.2"
   },
   "peerDependencies": {
-    "react-native": ">=0.45.0",
-    "react-native-svg": ">=6.5.1"
+    "react-native": ">=0.59.0",
+    "react-native-svg": ">=12.0.0"
   },
   "devDependencies": {
     "eslint": "^5.16.0",

yarn.lock

@@ -2269,7 +2269,7 @@ semver-compare@^1.0.0:
   resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
   integrity sha1-De4hahyUGrN+nvsXiPavxf9VN/w=
 
-"semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.5.0, semver@^5.5.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==