💥Add commonjs, with-native, with-web options

Author: MoOx

README.md

@@ -8,30 +8,61 @@
 
 > Turns SVG files into React Native (Web) (+ optional ReasonML) components
 
+## Install
+
+```console
+npm install react-from-svg
+
+# or
+
+yarn add react-from-svg
+```
+
 ## Usage
 
 ```console
-react-from-svg [sourcePath] [outputPath] [--with-reason] [--remove-fill] [--remove-stroke] [--reason-module-path]
+react-from-svg --help
+
+Usage
+    $ react-from-svg <sourcePath> <outputPath> [--with-native|--with-web]
+
+  Options
+    --with-native, -native  Output code for react-native-svg
+    --with-web, -web        Output code for DOM. If --with-native is also used, will be output as .web.js files
+    --with-reason, -bs      Output ReasonML bindings code
+    --remove-fill, -rf      Remove all 'fill' properties from SVGs, convenient for icons
+    --remove-stroke, -rs    Remove all 'stroke' properties from SVGs, convenient for icons
+    --commonjs, -cjs        Export as commonjs instead of es6 import/export
+    --bs-module-path, -bsp  Allow to customise ReasonML output path
+
+  Example
+    $ react-from-svg assets/svgs src/Svgs --remove-fill
 ```
 
 ### Examples
 
-Just React Native / React Native Web SVGs, with fill svg props removed, nice for
-icons
+#### React DOM, no options
 
 ```console
-react-from-svg assets/svgs src/Svgs --remove-fill
+react-from-svg assets/svgs src/Svgs --with-web
 ```
 
-React Native (Web) + ReasonML bindings SVGs
+#### React Native with fill svg props removed
 
 ```console
-react-from-svg assets/svgs src/Svgs --with-reason
+react-from-svg assets/svgs src/Svgs --with-native --remove-fill
 ```
 
-React Native (Web) + ReasonML bindings SVGs and absolute path : it's usefull if
-you defined a webpack alias and you don't generate your bucklescript output
-"in-source"
+#### React Native + ReasonML bindings SVGs
+
+```console
+react-from-svg assets/svgs src/Svgs --with-native --with-reason
+```
+
+#### React Native + ReasonML bindings SVGs and absolute path
+
+It's usefull if you defined a webpack alias and you don't generate your
+bucklescript output `"in-source"`
 
 ```console
 react-from-svg assets/svgs src/Svgs --with-reason --reason-module-path=./src/components

__tests__/Test.re

@@ -5,7 +5,13 @@ open Expect;
 
 let snap = (svg, ~removeFill, ~removeStroke) => {
   svg
-  ->Transformer.transformSvg(removeFill, removeStroke)
+  ->Transformer.transformSvg(
+      ~removeFill,
+      ~removeStroke,
+      ~commonjs=false,
+      ~pascalCaseTag=true,
+      ~template=Templates.native,
+    )
   ->expect
   ->toMatchSnapshot;
 };

__tests__/__snapshots__/Test.proxy.js.snap

@@ -25,7 +25,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 <Svg viewBox=\\"0 0 30 30\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"m15 3c-6.627 0-12 5.373-12 12 0 5.623 3.872 10.328 9.092 11.63-.056-.162-.092-.35-.092-.583v-2.051c-.487 0-1.303 0-1.508 0-.821 0-1.551-.353-1.905-1.009-.393-.729-.461-1.844-1.435-2.526-.289-.227-.069-.486.264-.451.615.174 1.125.596 1.605 1.222.478.627.703.769 1.596.769.433 0 1.081-.025 1.691-.121.328-.833.895-1.6 1.588-1.962-3.996-.411-5.903-2.399-5.903-5.098 0-1.162.495-2.286 1.336-3.233-.276-.94-.623-2.857.106-3.587 1.798 0 2.885 1.166 3.146 1.481.896-.307 1.88-.481 2.914-.481 1.036 0 2.024.174 2.922.483.258-.313 1.346-1.483 3.148-1.483.732.731.381 2.656.102 3.594.836.945 1.328 2.066 1.328 3.226 0 2.697-1.904 4.684-5.894 5.097 1.098.573 1.899 2.183 1.899 3.396v2.734c0 .104-.023.179-.035.268 4.676-1.639 8.035-6.079 8.035-11.315 0-6.627-5.373-12-12-12z\\"/></Svg>
@@ -59,7 +58,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 <Svg viewBox=\\"0 0 30 30\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"m15 3c-6.627 0-12 5.373-12 12 0 5.623 3.872 10.328 9.092 11.63-.056-.162-.092-.35-.092-.583v-2.051c-.487 0-1.303 0-1.508 0-.821 0-1.551-.353-1.905-1.009-.393-.729-.461-1.844-1.435-2.526-.289-.227-.069-.486.264-.451.615.174 1.125.596 1.605 1.222.478.627.703.769 1.596.769.433 0 1.081-.025 1.691-.121.328-.833.895-1.6 1.588-1.962-3.996-.411-5.903-2.399-5.903-5.098 0-1.162.495-2.286 1.336-3.233-.276-.94-.623-2.857.106-3.587 1.798 0 2.885 1.166 3.146 1.481.896-.307 1.88-.481 2.914-.481 1.036 0 2.024.174 2.922.483.258-.313 1.346-1.483 3.148-1.483.732.731.381 2.656.102 3.594.836.945 1.328 2.066 1.328 3.226 0 2.697-1.904 4.684-5.894 5.097 1.098.573 1.899 2.183 1.899 3.396v2.734c0 .104-.023.179-.035.268 4.676-1.639 8.035-6.079 8.035-11.315 0-6.627-5.373-12-12-12z\\"/></Svg>
@@ -93,7 +91,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 <Svg viewBox=\\"0 0 30 30\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"m15 3c-6.627 0-12 5.373-12 12 0 5.623 3.872 10.328 9.092 11.63-.056-.162-.092-.35-.092-.583v-2.051c-.487 0-1.303 0-1.508 0-.821 0-1.551-.353-1.905-1.009-.393-.729-.461-1.844-1.435-2.526-.289-.227-.069-.486.264-.451.615.174 1.125.596 1.605 1.222.478.627.703.769 1.596.769.433 0 1.081-.025 1.691-.121.328-.833.895-1.6 1.588-1.962-3.996-.411-5.903-2.399-5.903-5.098 0-1.162.495-2.286 1.336-3.233-.276-.94-.623-2.857.106-3.587 1.798 0 2.885 1.166 3.146 1.481.896-.307 1.88-.481 2.914-.481 1.036 0 2.024.174 2.922.483.258-.313 1.346-1.483 3.148-1.483.732.731.381 2.656.102 3.594.836.945 1.328 2.066 1.328 3.226 0 2.697-1.904 4.684-5.894 5.097 1.098.573 1.899 2.183 1.899 3.396v2.734c0 .104-.023.179-.035.268 4.676-1.639 8.035-6.079 8.035-11.315 0-6.627-5.373-12-12-12z\\"/></Svg>
@@ -127,7 +124,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 <Svg viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48\\"/></Svg>
@@ -162,7 +158,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 <Svg viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48\\"/></Svg>
@@ -197,7 +192,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 <Svg viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48\\"/></Svg>
@@ -232,7 +226,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 <Svg viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32\\"/></Svg>
@@ -267,7 +260,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 <Svg viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48\\" stroke=\\"#000\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32\\"/></Svg>
@@ -302,7 +294,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 <Svg viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M336 192h40a40 40 0 0140 40v192a40 40 0 01-40 40H136a40 40 0 01-40-40V232a40 40 0 0140-40h40M336 128l-80-80-80 80M256 321V48\\" fill=\\"none\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32\\"/></Svg>
@@ -337,7 +328,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 
@@ -373,7 +363,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 
@@ -409,7 +398,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 
@@ -445,7 +433,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 <Svg  viewBox=\\"0 0 30 30\\" width={width} height={height} fill={fill} stroke={stroke}><G fillRule=\\"evenodd\\"><Path d=\\"m0 0h30v30h-30z\\"/><Path d=\\"m10.2955556 11.5277778h-3.39250004l-1.67166667-3.17944447h-2.22888889v3.17944447h-2.99916667v-11.48861113h5.1625c3.04833334 0 4.78555556 1.475 4.78555556 4.03166666 0 1.73722223-.72111111 3.01555556-2.04861111 3.70388889zm-7.2930556-9.09583336v3.52361112h2.17972222c1.21277778 0 1.9175-.62277778 1.9175-1.78638889 0-1.13083334-.70472222-1.73722223-1.9175-1.73722223zm8.8663889-2.39277777h9.0630555v2.39277777h-6.0638888v2.14694445h5.4738888v2.37638889l-5.4738888.01638889v2.16333333h6.2277777v2.3927778h-9.2269444z\\" fillRule=\\"nonzero\\" transform=\\"translate(7.5 15.833333)\\"/></G></Svg>
@@ -479,7 +466,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 <Svg  viewBox=\\"0 0 30 30\\" width={width} height={height} fill={fill} stroke={stroke}><G fillRule=\\"evenodd\\"><Path d=\\"m0 0h30v30h-30z\\"/><Path d=\\"m10.2955556 11.5277778h-3.39250004l-1.67166667-3.17944447h-2.22888889v3.17944447h-2.99916667v-11.48861113h5.1625c3.04833334 0 4.78555556 1.475 4.78555556 4.03166666 0 1.73722223-.72111111 3.01555556-2.04861111 3.70388889zm-7.2930556-9.09583336v3.52361112h2.17972222c1.21277778 0 1.9175-.62277778 1.9175-1.78638889 0-1.13083334-.70472222-1.73722223-1.9175-1.73722223zm8.8663889-2.39277777h9.0630555v2.39277777h-6.0638888v2.14694445h5.4738888v2.37638889l-5.4738888.01638889v2.16333333h6.2277777v2.3927778h-9.2269444z\\" fillRule=\\"nonzero\\" transform=\\"translate(7.5 15.833333)\\"/></G></Svg>
@@ -513,7 +499,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 <Svg  viewBox=\\"0 0 30 30\\" width={width} height={height} fill={fill} stroke={stroke}><G fill=\\"none\\" fillRule=\\"evenodd\\"><Path d=\\"m0 0h30v30h-30z\\" fill=\\"#dd4b39\\"/><Path d=\\"m10.2955556 11.5277778h-3.39250004l-1.67166667-3.17944447h-2.22888889v3.17944447h-2.99916667v-11.48861113h5.1625c3.04833334 0 4.78555556 1.475 4.78555556 4.03166666 0 1.73722223-.72111111 3.01555556-2.04861111 3.70388889zm-7.2930556-9.09583336v3.52361112h2.17972222c1.21277778 0 1.9175-.62277778 1.9175-1.78638889 0-1.13083334-.70472222-1.73722223-1.9175-1.73722223zm8.8663889-2.39277777h9.0630555v2.39277777h-6.0638888v2.14694445h5.4738888v2.37638889l-5.4738888.01638889v2.16333333h6.2277777v2.3927778h-9.2269444z\\" fill=\\"#fff\\" fillRule=\\"nonzero\\" transform=\\"translate(7.5 15.833333)\\"/></G></Svg>
@@ -547,7 +532,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 <Svg  viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M256,160c16-63.16,76.43-95.41,208-96a15.94,15.94,0,0,1,16,16V368a16,16,0,0,1-16,16c-128,0-177.45,25.81-208,64-30.37-38-80-64-208-64-9.88,0-16-8.05-16-17.93V80A15.94,15.94,0,0,1,48,64C179.57,64.59,240,96.84,256,160Z\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32px\\"/><Line x1=\\"256\\" y1=\\"160\\" x2=\\"256\\" y2=\\"448\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32px\\"/></Svg>
@@ -582,7 +566,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 <Svg  viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M256,160c16-63.16,76.43-95.41,208-96a15.94,15.94,0,0,1,16,16V368a16,16,0,0,1-16,16c-128,0-177.45,25.81-208,64-30.37-38-80-64-208-64-9.88,0-16-8.05-16-17.93V80A15.94,15.94,0,0,1,48,64C179.57,64.59,240,96.84,256,160Z\\" stroke=\\"#000\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32px\\"/><Line x1=\\"256\\" y1=\\"160\\" x2=\\"256\\" y2=\\"448\\" stroke=\\"#000\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32px\\"/></Svg>
@@ -617,7 +600,6 @@ import Svg, {
   Pattern,
   Mask,
 } from 'react-native-svg';
-
 export default ({width, height, fill, stroke}) => {
   return (
 <Svg  viewBox=\\"0 0 512 512\\" width={width} height={height} fill={fill} stroke={stroke}><Path d=\\"M256,160c16-63.16,76.43-95.41,208-96a15.94,15.94,0,0,1,16,16V368a16,16,0,0,1-16,16c-128,0-177.45,25.81-208,64-30.37-38-80-64-208-64-9.88,0-16-8.05-16-17.93V80A15.94,15.94,0,0,1,48,64C179.57,64.59,240,96.84,256,160Z\\" fill=\\"none\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32px\\"/><Line x1=\\"256\\" y1=\\"160\\" x2=\\"256\\" y2=\\"448\\" fill=\\"none\\" strokeLinecap=\\"round\\" strokeLinejoin=\\"round\\" strokeWidth=\\"32px\\"/></Svg>

bin.js

@@ -1,37 +1,44 @@
 #!/usr/bin/env node
+"use strict";
+const meow = require("meow");
 
-function hasArg(args, option) {
-  return Boolean(args.find(arg => arg[0] === option));
-}
-
-function getArg(args, option) {
-  const argWithValue = args.find(arg => arg[0] === option);
-  return argWithValue && argWithValue.length == 2 ? argWithValue[1] : undefined;
-}
-
-const args = process.argv.slice(0);
-args.shift(); // node
-args.shift(); // bin name
-const sourcePath = args.shift();
-const outputPath = args.shift();
+// UPDATE README IF YOU UPDATE THIS PLEASE
+const cli = meow(
+  `
+  Usage
+    $ react-from-svg <sourcePath> <outputPath> [--with-native|--with-web]
 
-const acceptedOptions = [
-  "--with-reason",
-  "--remove-fill",
-  "--remove-stroke",
-  "--reason-module-path",
-];
+  Options
+    --with-native, -native  Output code for react-native-svg
+    --with-web, -web        Output code for DOM. If --with-native is also used, will be output as .web.js files
+    --with-reason, -bs      Output ReasonML bindings code
+    --remove-fill, -rf      Remove all 'fill' properties from SVGs, convenient for icons
+    --remove-stroke, -rs    Remove all 'stroke' properties from SVGs, convenient for icons
+    --commonjs, -cjs        Export as commonjs instead of es6 import/export
+    --bs-module-path, -bsp  Allow to customise ReasonML output path
 
-const splitArgs = args.map(arg => arg.split("="));
+  Example
+    $ react-from-svg assets/svgs src/Svgs --remove-fill
+`,
+  {
+    flags: {
+      "with-native": { type: "boolean", alias: "native" },
+      "with-web": { type: "boolean", alias: "web" },
+      "with-reason": { type: "boolean", alias: "bs" },
+      "remove-fill": { type: "boolean", alias: "rf" },
+      "remove-stroke": { type: "boolean", alias: "rs" },
+      commonjs: { type: "boolean", alias: "cjs" },
+      "bs-module-path": { type: "string", alias: "bsp" },
+    },
+  },
+);
 
-if (!sourcePath) {
-  throw new Error("source path is required");
-}
-if (!outputPath) {
-  throw new Error("output path is required");
-}
-if (splitArgs.filter(arg => !acceptedOptions.includes(arg[0])).length > 0) {
-  throw new Error("only accepted options are: " + acceptedOptions);
+if (cli.flags.withNative === undefined && cli.flags.withWeb === undefined) {
+  console.error(
+    "You should at least choose an option between --with-native or --with web!",
+  );
+  cli.showHelp();
+  process.exit(1);
 }
 
 ///
@@ -68,12 +75,5 @@ setTimeout(function() {
     );
   }
 
-  transformer.make(
-    sourcePath,
-    outputPath,
-    hasArg(splitArgs, "--with-reason"),
-    hasArg(splitArgs, "--remove-fill"),
-    hasArg(splitArgs, "--remove-stroke"),
-    getArg(splitArgs, "--reason-module-path"),
-  );
+  transformer.make(cli.input, cli.flags);
 }, 0);

package.json

@@ -37,6 +37,7 @@
   "dependencies": {
     "bs-platform": "^7.2.2",
     "glob": "^7.1.3",
+    "meow": "^6.1.0",
     "mkdirp": "^0.5.1",
     "reason-future": "^2.4.0",
     "reason-react": "^0.7.0"