Add --with-native-for-reason, --with-web-for-reason & remove --with-reason & --bs-module-path

Author: MoOx

README.md

@@ -28,43 +28,47 @@ 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
+    --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-native-for-reason, -bsnative   Output code for @reason-react-native/svg
+    --with-web-for-reason, -bsnweb        Output code for reason-react
+    --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
 
   Example
-    $ react-from-svg assets/svgs src/Svgs --remove-fill
+    $ react-from-svg assets/svgs src/Svgs --with-native --remove-fill
 ```
 
-### Examples
+## Requirements
 
-#### React DOM, no options
+### `--with-web`
 
-```console
-react-from-svg assets/svgs src/Svgs --with-web
-```
+Need you to install have:
 
-#### React Native with fill svg props removed
+- [React](https://reactjs.org)
 
-```console
-react-from-svg assets/svgs src/Svgs --with-native --remove-fill
-```
+### `--with-web-for-reason`
 
-#### React Native + ReasonML bindings SVGs
+Need you to install have:
 
-```console
-react-from-svg assets/svgs src/Svgs --with-native --with-reason
-```
+- [React](https://reactjs.org)
+- [`reason-react`](https://reasonml.github.io/reason-react/)
 
-#### React Native + ReasonML bindings SVGs and absolute path
+### `--with-native`
 
-It's usefull if you defined a webpack alias and you don't generate your
-bucklescript output `"in-source"`
+Need you to install have:
 
-```console
-react-from-svg assets/svgs src/Svgs --with-reason --reason-module-path=./src/components
-```
+- [React](https://reactjs.org)
+- [React Native](https://reactnative.dev) (or an alternative platform like
+  [React Native Web](https://github.com/necolas/react-native-web))
+- [`react-native-svg`](https://github.com/react-native-community/react-native-svg)
+
+### `--with-native-for-reason`
+
+In addition to `--with-native` requirements, you need to install & add as
+`bs-dependencies` in your `bsconfig.json`:
+
+- [`reason-react`](https://reasonml.github.io/reason-react/)
+- [`reason-react-native`](https://reason-react-native.github.io)
+- [`@reason-react-native/svg`](https://github.com/reason-react-native/svg)

__tests__/TransformNative.re

@@ -0,0 +1,55 @@
+open Node.Fs;
+
+open Jest;
+open Expect;
+
+let fixtures = "./__tests__/__fixtures__";
+
+let snap = (svg, ~removeFill, ~removeStroke) => {
+  svg
+  ->Transformer.transformSvg(
+      ~removeFill,
+      ~removeStroke,
+      ~js=true,
+      ~pascalCaseTag=true,
+      ~template=Templates.native(~commonjs=false),
+    )
+  ->expect
+  ->toMatchSnapshot;
+};
+
+let testAll = svg => {
+  test("all options", () =>
+    svg->snap(~removeFill=true, ~removeStroke=true)
+  );
+  test("remove-fill", () =>
+    svg->snap(~removeFill=true, ~removeStroke=false)
+  );
+  test("remove-stroke", () =>
+    svg->snap(~removeFill=false, ~removeStroke=true)
+  );
+};
+
+describe("simple svg", () =>
+  readFileSync(fixtures ++ "/simple.svg", `utf8)->testAll
+);
+
+describe("edge case width svg", () =>
+  readFileSync(fixtures ++ "/edge-case-width.svg", `utf8)->testAll
+);
+
+describe("clean & minimal svg", () =>
+  readFileSync(fixtures ++ "/clean.svg", `utf8)->testAll
+);
+
+describe("sketch export", () =>
+  readFileSync(fixtures ++ "/sketch-export.svg", `utf8)->testAll
+);
+
+describe("with fill", () =>
+  readFileSync(fixtures ++ "/with-fill.svg", `utf8)->testAll
+);
+
+describe("with stroke", () =>
+  readFileSync(fixtures ++ "/with-stroke.svg", `utf8)->testAll
+);

__tests__/Test.re renamed to __tests__/TransformNativeForReason.re

@@ -3,14 +3,16 @@ open Node.Fs;
 open Jest;
 open Expect;
 
+let fixtures = "./__tests__/__fixtures__";
+
 let snap = (svg, ~removeFill, ~removeStroke) => {
   svg
   ->Transformer.transformSvg(
       ~removeFill,
       ~removeStroke,
-      ~commonjs=false,
+      ~js=false,
       ~pascalCaseTag=true,
-      ~template=Templates.native,
+      ~template=Templates.nativeForReason,
     )
   ->expect
   ->toMatchSnapshot;
@@ -29,25 +31,25 @@ let testAll = svg => {
 };
 
 describe("simple svg", () =>
-  readFileSync("./__tests__/fixtures/simple.svg", `utf8)->testAll
+  readFileSync(fixtures ++ "/simple.svg", `utf8)->testAll
 );
 
 describe("edge case width svg", () =>
-  readFileSync("./__tests__/fixtures/edge-case-width.svg", `utf8)->testAll
+  readFileSync(fixtures ++ "/edge-case-width.svg", `utf8)->testAll
 );
 
 describe("clean & minimal svg", () =>
-  readFileSync("./__tests__/fixtures/clean.svg", `utf8)->testAll
+  readFileSync(fixtures ++ "/clean.svg", `utf8)->testAll
 );
 
 describe("sketch export", () =>
-  readFileSync("./__tests__/fixtures/sketch-export.svg", `utf8)->testAll
+  readFileSync(fixtures ++ "/sketch-export.svg", `utf8)->testAll
 );
 
 describe("with fill", () =>
-  readFileSync("./__tests__/fixtures/with-fill.svg", `utf8)->testAll
+  readFileSync(fixtures ++ "/with-fill.svg", `utf8)->testAll
 );
 
 describe("with stroke", () =>
-  readFileSync("./__tests__/fixtures/with-stroke.svg", `utf8)->testAll
+  readFileSync(fixtures ++ "/with-stroke.svg", `utf8)->testAll
 );

__tests__/TransformWeb.re

@@ -0,0 +1,55 @@
+open Node.Fs;
+
+open Jest;
+open Expect;
+
+let fixtures = "./__tests__/__fixtures__";
+
+let snap = (svg, ~removeFill, ~removeStroke) => {
+  svg
+  ->Transformer.transformSvg(
+      ~removeFill,
+      ~removeStroke,
+      ~js=true,
+      ~pascalCaseTag=false,
+      ~template=Templates.web(~commonjs=false),
+    )
+  ->expect
+  ->toMatchSnapshot;
+};
+
+let testAll = svg => {
+  test("all options", () =>
+    svg->snap(~removeFill=true, ~removeStroke=true)
+  );
+  test("remove-fill", () =>
+    svg->snap(~removeFill=true, ~removeStroke=false)
+  );
+  test("remove-stroke", () =>
+    svg->snap(~removeFill=false, ~removeStroke=true)
+  );
+};
+
+describe("simple svg", () =>
+  readFileSync(fixtures ++ "/simple.svg", `utf8)->testAll
+);
+
+describe("edge case width svg", () =>
+  readFileSync(fixtures ++ "/edge-case-width.svg", `utf8)->testAll
+);
+
+describe("clean & minimal svg", () =>
+  readFileSync(fixtures ++ "/clean.svg", `utf8)->testAll
+);
+
+describe("sketch export", () =>
+  readFileSync(fixtures ++ "/sketch-export.svg", `utf8)->testAll
+);
+
+describe("with fill", () =>
+  readFileSync(fixtures ++ "/with-fill.svg", `utf8)->testAll
+);
+
+describe("with stroke", () =>
+  readFileSync(fixtures ++ "/with-stroke.svg", `utf8)->testAll
+);

__tests__/TransformWebForReason.re

@@ -0,0 +1,55 @@
+open Node.Fs;
+
+open Jest;
+open Expect;
+
+let fixtures = "./__tests__/__fixtures__";
+
+let snap = (svg, ~removeFill, ~removeStroke) => {
+  svg
+  ->Transformer.transformSvg(
+      ~removeFill,
+      ~removeStroke,
+      ~js=false,
+      ~pascalCaseTag=false,
+      ~template=Templates.webForReason,
+    )
+  ->expect
+  ->toMatchSnapshot;
+};
+
+let testAll = svg => {
+  test("all options", () =>
+    svg->snap(~removeFill=true, ~removeStroke=true)
+  );
+  test("remove-fill", () =>
+    svg->snap(~removeFill=true, ~removeStroke=false)
+  );
+  test("remove-stroke", () =>
+    svg->snap(~removeFill=false, ~removeStroke=true)
+  );
+};
+
+describe("simple svg", () =>
+  readFileSync(fixtures ++ "/simple.svg", `utf8)->testAll
+);
+
+describe("edge case width svg", () =>
+  readFileSync(fixtures ++ "/edge-case-width.svg", `utf8)->testAll
+);
+
+describe("clean & minimal svg", () =>
+  readFileSync(fixtures ++ "/clean.svg", `utf8)->testAll
+);
+
+describe("sketch export", () =>
+  readFileSync(fixtures ++ "/sketch-export.svg", `utf8)->testAll
+);
+
+describe("with fill", () =>
+  readFileSync(fixtures ++ "/with-fill.svg", `utf8)->testAll
+);
+
+describe("with stroke", () =>
+  readFileSync(fixtures ++ "/with-stroke.svg", `utf8)->testAll
+);