diff --git a/.eslintignore b/.eslintignore
index 1ade275..f1c8bcb 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,6 +1,8 @@
lib
*.svg.react.js
+*.md
coverage
-flow-typed
node_modules
-example/public/
+example
+tests/resources
+jest.config.js
diff --git a/.eslintrc b/.eslintrc
index 0b6348f..7a1ebbc 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,10 +1,14 @@
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
- "project": "./packages/tsconfig.json",
- "sourceType": "module"
+ "sourceType": "module",
+ "project": "./tsconfig.eslint.json"
},
- "plugins": ["react", "prettier", "@typescript-eslint"],
+ "plugins": [
+ "react",
+ "prettier",
+ "@typescript-eslint"
+ ],
"env": {
"node": true,
"es6": true
@@ -20,6 +24,11 @@
"extends": [
"eslint:recommended",
"plugin:react/recommended",
- "plugin:@typescript-eslint/eslint-recommended"
+ "plugin:@typescript-eslint/recommended",
+ "plugin:markdown/recommended",
+ "prettier"
+ ],
+ "ignorePatterns": [
+ "plugin:@typescript-eslint/no-var-requires"
]
}
diff --git a/.github/workflows/lint-test.yml b/.github/workflows/lint-test.yml
index 3925550..3885c57 100644
--- a/.github/workflows/lint-test.yml
+++ b/.github/workflows/lint-test.yml
@@ -1,4 +1,4 @@
-name: react-svg-loader
+name: Test and Lint
on: [push]
@@ -7,33 +7,30 @@ jobs:
name: Lint
runs-on: ubuntu-latest
steps:
- - uses: actions/checkout@v1
- - name: Setup Node 12 for Lint
- uses: actions/setup-node@v1
- with:
- node-version: 12
- - name: Lint
- run: |
- yarn
- yarn lint
- env:
- CI: true
+ - uses: actions/checkout@v1
+ - name: Setup Node 12 for Lint
+ uses: actions/setup-node@v1
+ with:
+ node-version: 12
+ - name: Lint
+ run: |
+ yarn install
+ yarn lint
+ env:
+ CI: true
build:
name: Build
runs-on: ubuntu-latest
- strategy:
- matrix:
- node-version: [8.x, 10.x, 12.x]
steps:
- - uses: actions/checkout@v1
- - name: Use Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v1
- with:
- node-version: ${{ matrix.node-version }}
- - name: npm install, build, and test
- run: |
- yarn
- yarn build
- yarn test
- env:
- CI: true
+ - uses: actions/checkout@v1
+ - name: Use Node.js 12 for Build
+ uses: actions/setup-node@v1
+ with:
+ node-version: 12
+ - name: install, build, and test
+ run: |
+ yarn install
+ yarn build
+ yarn test
+ env:
+ CI: true
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 0000000..a86e16d
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,15 @@
+{
+ "arrowParens": "avoid",
+ "bracketSpacing": true,
+ "endOfLine": "lf",
+ "bracketSameLine": false,
+ "jsxSingleQuote": true,
+ "printWidth": 100,
+ "proseWrap": "preserve",
+ "quoteProps": "as-needed",
+ "semi": false,
+ "singleQuote": true,
+ "tabWidth": 2,
+ "trailingComma": "all",
+ "useTabs": false
+}
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index cbaaa49..0000000
--- a/.travis.yml
+++ /dev/null
@@ -1,54 +0,0 @@
-sudo: false
-language: node_js
-cache: yarn
-
-stages:
- - lint
- - test
- - name: publish
- if: (branch = master) AND (repo = boopathi/react-svg-loader)
-
-jobs:
- include:
- - stage: lint
- node_js: "12"
- script: yarn lint
- - stage: publish
- node_js: "12"
- script: 'echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc'
- deploy:
- provider: script
- script: npm run publish-master
- skip_cleanup: true
- api_key: $NPM_TOKEN
-
-env:
- global:
- - CC_TEST_REPORTER_ID=9f4bef923b520da4cbdb209f004a8db49b215fc0f443efd2a1698585e65c21cb
-
-node_js:
- - "12"
- - "10"
- - "8"
-
-before_install:
- - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.16.0
- - export PATH=$HOME/.yarn/bin:$PATH
- - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
- - chmod +x ./cc-test-reporter
-
-before_script:
- - yarn clean
- - yarn build
- - "./cc-test-reporter before-build"
-
-script:
- - yarn cover
-
-after_script:
- - "./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT"
-
-addons:
- code_climate:
- repo_token:
- secure: hU3p2PlR6A4ZdTDzkYsKpXbuFsgdgSTDBW+b+SSs7ePpz1hbY86oYCP6SLNB87qMwM97oFae21/mGGQhrwc6lQiDNNYLM5C4twypjHk1sbXfyCtIOvJI9EjlxqOtPy1/FJ7jzeCSm9zts/r7IhNrEJpvA8Usg8hX9agI1W2Wy006sKplmhE7WNIhr9iikkhMVlIftWy4/nWDDQ66DiRh526VMi5ruv8jp22zeH3Nj6DrE3pCfj6+NXbNLYuP7KqGRDN9WWUrVOSHGwa215SOP9GYocNXoqhdgbWiestMpyj3GLOfHAqitw7Sdem9+yyPf1x9cMfuSYLddjIGEhLo6AE5KjjI86njycX2/di8ykMNXyevZEuKN3W7rcuVW817FC7ehEpjPphPHTsuku8nwtJlGSgCbNWffq+k+kc421Nm92TAWkdIBtqaG2dX6pBE420BaMNlT7FxqEDznzWuKbFh+Hcdx7RHbfJbWfAJEvztGEN6jKLjSq+T58d6Q6PSs1pjUxe/wPrw9oksem6lKGNxzlbV2/89WSfU5p57NBOlIuTr3Tt5//PlHeStgeVNWF/zkJQzqk8DnE38fD+EALX7sU8kirO2gtD71F7ZzuDZ06agPQoM7hgtDBaKt/GC4OZsxVli8MZlG80yPXaIe8E3tpxYSG7Uw4bPQSGM3xc=
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f290ba1..31d5fbd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
# Changelog
+## 4.0.0
+
+- Update svgo to v2
+- Update babel to v7
+- Using jest instead of tap
+- Fuller use of types
+
## 3.0.3
- Ignore babel config files during transformation [#264](https://github.com/boopathi/react-svg-loader/pull/264)
@@ -39,10 +46,10 @@ Tests are run on Node 4, 6, and 8
Previously, the output of the react-svg-loader was -
```js
-import React from "react";
+import React from 'react'
export default class SVG extends React.Component {
render() {
- return ;
+ return
}
}
```
@@ -50,8 +57,8 @@ export default class SVG extends React.Component {
and now it is -
```js
-import React from "react";
-export default props => ;
+import React from 'react'
+export default props =>
```
### Overridable classnames (to use with css-modules)
@@ -71,15 +78,15 @@ is transformed to
So, you can pass/override some styles in the svg, for example -
```js
-import Image from "react-svg-loader!./image.svg";
-import styles from "./styles.css"; // with css-modules
+import Image from 'react-svg-loader!./image.svg'
+import styles from './styles.css' // with css-modules
const imageStyles = {
foo: styles.foo,
- bar: styles.bar
-};
+ bar: styles.bar,
+}
-let component = ;
+let component =
```
### Drop option `es5`
@@ -88,7 +95,7 @@ Previously, you could do,
```js
{
- loader: "react-svg-loader",
+ loader: 'react-svg-loader',
options: {
es5: true
}
@@ -111,7 +118,7 @@ This is now deprecated and the **recommended** way to use react-svg-loader is to
and with [babel-preset-env](https://github.com/babel/babel-preset-env) in `.babelrc`:
-```json
+```js
{
"presets": [
[
diff --git a/README.md b/README.md
index e9e408d..d77bacf 100644
--- a/README.md
+++ b/README.md
@@ -14,10 +14,15 @@
### Current
-VERSION: `3.x` (master)
+VERSION: `4.x` (master)
Refer [CHANGELOG](CHANGELOG.md)
+### v3.x
+
+[branch=v3](https://github.com/boopathi/react-svg-loader/tree/v3)
+
+
### v2.x
[branch=v2](https://github.com/boopathi/react-svg-loader/tree/v2)
diff --git a/example/index.js b/example/index.js
index b1c15a9..abae385 100644
--- a/example/index.js
+++ b/example/index.js
@@ -1,9 +1,9 @@
/* global document */
-import React from "react";
-import ReactDOM from "react-dom";
-import Her from "./her.svg";
-import Pic from "./image.svg";
-import Dummy from "./dummy.svg";
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Her from './her.svg'
+import Pic from './image.svg'
+import Dummy from './dummy.svg'
let Root = (
@@ -11,6 +11,6 @@ let Root = (
-);
+)
-ReactDOM.render(Root, document.getElementById("test"));
+ReactDOM.render(Root, document.getElementById('test'))
diff --git a/example/rollup.config.js b/example/rollup.config.js
index 125a6f9..29087fa 100644
--- a/example/rollup.config.js
+++ b/example/rollup.config.js
@@ -1,32 +1,31 @@
-import babel from "rollup-plugin-babel";
-import nodeResolve from "rollup-plugin-node-resolve";
-import cjs from "rollup-plugin-commonjs";
-import replace from "rollup-plugin-replace";
+import babel from 'rollup-plugin-babel'
+import nodeResolve from 'rollup-plugin-node-resolve'
+import cjs from 'rollup-plugin-commonjs'
+import replace from 'rollup-plugin-replace'
-import reactSvg from "rollup-plugin-react-svg";
+import reactSvg from 'rollup-plugin-react-svg'
export default {
- input: "index.js",
+ input: 'index.js',
output: {
- format: "iife",
- file: "public/bundle.js"
+ format: 'iife',
+ file: 'public/bundle.js',
},
plugins: [
babel({
- exclude: "node_modules/**"
+ exclude: 'node_modules/**',
}),
nodeResolve(),
cjs(),
replace({
- "process.env.NODE_ENV": JSON.stringify("production")
+ 'process.env.NODE_ENV': JSON.stringify('production'),
}),
// USAGE:
reactSvg({
// svgo options
svgo: {
- plugins: [], // passed to svgo
- multipass: true
+ multipass: true,
},
// whether to output jsx
@@ -34,7 +33,7 @@ export default {
include: null,
- exclude: null
- })
- ]
-};
+ exclude: null,
+ }),
+ ],
+}
diff --git a/example/webpack.config.js b/example/webpack.config.js
index 83e9b11..0a73c92 100644
--- a/example/webpack.config.js
+++ b/example/webpack.config.js
@@ -1,11 +1,11 @@
-const reactSvgLoader = require.resolve("../packages/react-svg-loader");
-const path = require("path");
+const reactSvgLoader = require.resolve('../packages/react-svg-loader')
+const path = require('path')
module.exports = {
- entry: "./index.js",
+ entry: './index.js',
output: {
- path: path.join(__dirname, "public"),
- filename: "bundle.js"
+ path: path.join(__dirname, 'public'),
+ filename: 'bundle.js',
},
module: {
rules: [
@@ -13,23 +13,17 @@ module.exports = {
test: /\.svg$/,
exclude: /node_modules/,
use: [
- "babel-loader",
+ 'babel-loader',
{
loader: reactSvgLoader, // 'react-svg'
- query: {
- svgo: {
- pretty: true,
- plugins: [{ removeStyleElement: true }]
- }
- }
- }
- ]
+ },
+ ],
},
{
test: /\.js$/,
- loader: "babel-loader",
- exclude: /node_modules/
- }
- ]
- }
-};
+ loader: 'babel-loader',
+ exclude: /node_modules/,
+ },
+ ],
+ },
+}
diff --git a/jest.config.js b/jest.config.js
new file mode 100644
index 0000000..6cdf4f9
--- /dev/null
+++ b/jest.config.js
@@ -0,0 +1,6 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+ preset: 'ts-jest',
+ testEnvironment: 'node',
+ collectCoverageFrom: ['**/*[^d].ts'],
+}
diff --git a/lerna.json b/lerna.json
index 9b2e910..b5572a7 100644
--- a/lerna.json
+++ b/lerna.json
@@ -4,5 +4,10 @@
],
"useWorkspaces": true,
"npmClient": "yarn",
- "version": "3.0.3"
+ "version": "4.0.0-alpha.0",
+ "command": {
+ "publish": {
+ "registry": "https://npm.pkg.github.com"
+ }
+ }
}
diff --git a/package.json b/package.json
index fd498d8..1944d9a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,5 @@
{
- "name": "react-svg-loader",
- "version": "3.0.0",
+ "version": "4.0.0",
"private": true,
"description": "Optimize svg and load it as a React Component",
"keywords": [
@@ -10,13 +9,13 @@
"webpack",
"webpack-loader"
],
- "homepage": "https://github.com/boopathi/react-svg-loader#readme",
+ "homepage": "https://github.com/lagunovsky/react-svg-loader#readme",
"bugs": {
- "url": "https://github.com/boopathi/react-svg-loader/issues"
+ "url": "https://github.com/lagunovsky/react-svg-loader/issues"
},
"repository": {
"type": "git",
- "url": "git+https://github.com/boopathi/react-svg-loader.git"
+ "url": "git+https://github.com/lagunovsky/react-svg-loader.git"
},
"license": "MIT",
"author": "boopathi",
@@ -25,49 +24,41 @@
],
"scripts": {
"build": "tsc -b packages",
- "clean": "yarn build --clean && rm -rf example/public coverage .nyc_output",
- "cover": "NODE_ENV=test nyc --reporter=lcov ts-node ./node_modules/tape/bin/tape tests/*.ts",
- "eslint": "eslint .",
- "lint": "yarn eslint",
- "publish-master": "lerna publish -c --yes -m 'chore(nightly): publish %s'",
- "test": "NODE_ENV=test ts-node ./node_modules/tape/bin/tape tests/*.ts | faucet",
+ "clean": "yarn build --clean",
+ "lint": "eslint . --ext .js,.ts",
+ "test": "jest",
"watch": "yarn build --watch"
},
"devDependencies": {
- "@babel/core": "^7.5.4",
- "@babel/preset-env": "^7.5.4",
- "@babel/preset-flow": "^7.0.0",
- "@babel/register": "^7.4.4",
+ "@babel/core": "^7.15.8",
+ "@babel/preset-env": "^7.15.8",
+ "@babel/preset-flow": "^7.14.5",
+ "@babel/register": "^7.15.3",
+ "@types/babel__core": "^7.1.16",
+ "@types/jest": "^27.0.2",
"@types/lodash.clonedeep": "^4.5.6",
- "@types/node": "^12.6.2",
- "@types/tape": "^4.2.33",
- "@typescript-eslint/eslint-plugin": "^1.11.0",
- "@typescript-eslint/parser": "^1.11.0",
- "babel-plugin-add-module-exports": "^1.0.2",
- "babel-plugin-istanbul": "^5.1.4",
- "chalk": "^2.4.2",
- "eslint": "^6.0.1",
- "eslint-plugin-prettier": "^3.1.0",
- "eslint-plugin-react": "^7.14.2",
- "faucet": "0.0.1",
- "lerna": "^3.15.0",
- "nyc": "^14.1.1",
- "prettier": "^1.18.2",
+ "@types/node": "^16.10.9",
+ "@types/react-test-renderer": "^16.8",
+ "@types/svgo": "^2.6.0",
+ "@types/tape": "^4.13.2",
+ "@types/webpack": "^5.28.0",
+ "@types/yargs": "^17.0.4",
+ "@typescript-eslint/eslint-plugin": "^5.0.0",
+ "@typescript-eslint/parser": "^5.0.0",
+ "eslint": "^8.0.1",
+ "eslint-config-prettier": "^8.3.0",
+ "eslint-plugin-markdown": "^2.2.1",
+ "eslint-plugin-prettier": "^4.0.0",
+ "eslint-plugin-react": "^7.26.1",
+ "jest": "^27.2.5",
+ "lerna": "^4.0.0",
+ "prettier": "^2.4.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-test-renderer": "^16.8.6",
- "tap-nyc": "^1.0.3",
- "tape": "^4.11.0",
- "ts-node": "^8.3.0",
- "typescript": "^3.5.3"
- },
- "nyc": {
- "all": true,
- "include": [
- "packages/**"
- ],
- "extension": [
- ".ts"
- ]
+ "ts-jest": "^27.0.6",
+ "ts-node": "^10.3.0",
+ "tslint-config-prettier": "^1.18.0",
+ "typescript": "^4.4.4"
}
}
diff --git a/packages/babel-core.d.ts b/packages/babel-core.d.ts
deleted file mode 100644
index a969813..0000000
--- a/packages/babel-core.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-declare module "@babel/core" {
- interface BabelCore {
- types: BabelTypes;
- }
-
- interface BabelTypes {
- [method: string]: (...args: any[]) => any;
- }
-
- export function transformSync(...args: any[]): any;
-
- export default BabelCore;
-}
diff --git a/packages/babel-plugin-react-svg/CHANGELOG.md b/packages/babel-plugin-react-svg/CHANGELOG.md
new file mode 100644
index 0000000..de423f7
--- /dev/null
+++ b/packages/babel-plugin-react-svg/CHANGELOG.md
@@ -0,0 +1,49 @@
+# Change Log
+
+All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 3.1.0 (2021-10-13)
+
+## 3.0.3 (2019-06-03)
+
+## 3.0.1 (2019-05-06)
+
+# 2.1.0 (2017-10-12)
+
+# 2.0.0 (2017-10-11)
+
+# 2.0.0-alpha.4 (2017-10-11)
+
+**Note:** Version bump only for package @lagunovsky/babel-plugin-react-svg
+
+# 3.2.0 (2021-10-13)
+
+## 3.1.1 (2021-10-13)
+
+## 3.0.3 (2019-06-03)
+
+## 3.0.1 (2019-05-06)
+
+# 2.1.0 (2017-10-12)
+
+# 2.0.0 (2017-10-11)
+
+# 2.0.0-alpha.4 (2017-10-11)
+
+**Note:** Version bump only for package @lagunovsky/babel-plugin-react-svg
+
+## 3.1.2 (2021-10-13)
+
+## 3.1.1 (2021-10-13)
+
+## 3.0.3 (2019-06-03)
+
+## 3.0.1 (2019-05-06)
+
+# 2.1.0 (2017-10-12)
+
+# 2.0.0 (2017-10-11)
+
+# 2.0.0-alpha.4 (2017-10-11)
+
+**Note:** Version bump only for package @lagunovsky/babel-plugin-react-svg
diff --git a/packages/babel-plugin-react-svg/README.md b/packages/babel-plugin-react-svg/README.md
index dadf9a0..738b78f 100644
--- a/packages/babel-plugin-react-svg/README.md
+++ b/packages/babel-plugin-react-svg/README.md
@@ -16,42 +16,55 @@ yarn add babel-plugin-react-svg --dev
Input SVG:
-```html
-