Change the extension of generated files to .gen.tsx (TS) and .gen.js (Flow/Untyped).

README.md

@@ -19,6 +19,10 @@ The output of `genType` can be configured by using one of 3 back-ends: `untyped`
 # Project status.
 See [Changes.md](Changes.md) for a complete list of features, fixes, and changes for each release.
 
+> **Breaking Change:** From version 1.0.0, the extension of generated files is `.gen.tsx` (and `.gen.js`) instead of `.tsx` (and `.re.js`). You might need to adjust the argument of `@bs.module` when importing values and components to reflect this.
+Alternatively, to keep the old and now deprecated extensions, the extension of generated files is configurable by specifying `"generatedFileExtension"` in the `"gentypeconfig"` section of `bsconfig.json`. (The extension used in versions 0.XX.0 was `""` for TypeScript and `".re"` for Flow/Untyped).
+
+
 > **Disclaimer:** While most of the feature set is complete, the project is still growing and changing based on feedback. It is possible that the workflow will change in future.
 
 # Requirements
@@ -70,9 +74,9 @@ Configure your shim files in your `"gentypeconfig"` in [`bsconfig.json`](example
 
 ## Testing the whole setup
 
-Open any relevant `*.re` file and add `[@genType]` annotations to any bindings / values / functions to be used from JavaScript. If an annotated value uses a type, the type must be annotated too. See e.g. [Component1.re](examples/reason-react-example/src/basics/Component1.re).
+Open any relevant `*.re` file and add `[@genType]` annotations to any bindings / values / functions to be used from JavaScript. If an annotated value uses a type, the type must be annotated too. See e.g. [ReasonComponent.re](examples/typescript-react-example/src/ReasonComponent.re).
 
-Save the file and rebuild the project with BuckleScript. You should now see a `*.re.js` file with the same name (e.g. `MyComponent.re` -> `MyComponent.re.js`).
+Save the file and rebuild the project with BuckleScript. You should now see a `*.gen.tsx` (for TypeScript, or `*.gen.js` for Flow) file with the same name (e.g. `MyComponent.re` -> `MyComponent.gen.tsx`).
 
 # Examples
 
@@ -121,15 +125,15 @@ To import a function `realValue` from  JS module `MyMath.ts` (or `MyMath.js`):
 
 ```reason
 [@genType.import "./MyMath"] /* This is the module to import from. */
-[@bs.module "./WrapJsValue"] /* Or "./WrapJsValue.re" for Flow/untyped. */
+[@bs.module "./WrapJsValue.gen"] /* Always the name of the current file plus ".gen". */
 /* Name and type of the JS value to import. */
 external realValue: complexNumber => float = "";
 
 ```
 
 Because of the `external` keyword, it's clear from context that this is an import, so you can also just use `@genType` and omit `.import`.
 
-**NOTE** The argument of `@bs.module` is different for the "typescript" and the "flow"/"untyped" back-ends. And must always be the name of the current file (In future, with compiler support, this could be automatically generated).
+**NOTE** The argument of `@bs.module`must always be the name of the current file plus `.gen` (In future, this could be automatically generated).
 
 ### Export and Import React Components
 
@@ -149,7 +153,7 @@ To import and wrap a ReactJS component for use by ReasonReact, the type of the `
 
 ```reason
 [@genType.import "./MyBanner"] /* Module with the JS component to be wrapped. */
-[@bs.module "./MyBannerWrapper"] /* Or "./MyBannerWrapper.re" for Flow/untyped. */
+[@bs.module "./MyBannerWrapper.gen"] /* Always the name of the current file plus ".gen". */
 /* The make function will be automatically generated from the types below. */
 external make:
   (~show: bool, ~message: option(message)=?, 'a) =>
@@ -163,7 +167,8 @@ external make:
 
 The type of `make` must have a named argument for each prop in the JS component. Optional props have option type. The `make` function will be generated by `genType`.
 
-**NOTE** The argument of `@bs.module` is different for the "typescript" and the "flow"/"untyped" back-ends.
+**NOTE** The argument of `@bs.module`must always be the name of the current file plus `.gen` (In future, this could be automatically generated).
+
 
 ### Type Expansion and @genType.opaque
 If an exported type `persons` references other types in its definition, those types are also exported by default, as long as they are defined in the same file:

examples/reason-react-example/clean.js

@@ -0,0 +1,18 @@
+const glob = require("glob");
+const fs = require("fs");
+const child_process = require("child_process");
+
+glob.glob("src/**/*.bs.js", function(er, files) {
+  files.forEach(fileBsJs => {
+    const fileTsx = fileBsJs.substring(0, fileBsJs.length - 6) + ".gen.js";
+    fs.unlink(fileTsx, err => {
+      return;
+    });
+  });
+});
+
+const isWindows = /^win/i.test(process.platform);
+
+child_process
+  .spawn("bsb", ["-clean-world"], { stdio: "inherit", stderr: "inherit", shell: isWindows })
+  .on("exit", code => process.exit(code));

examples/reason-react-example/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "build": "node ../run_bsb.js -make-world",
     "start": "node ../run_bsb.js -make-world -w",
-    "clean": "bsb -clean-world",
+    "clean": "node clean.js",
     "test": "exit 0",
     "webpack": "webpack -w",
     "webpack:production": "webpack --env.NODE_ENV=production"
@@ -16,7 +16,6 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "extension-replace-loader": "^0.0.1",
     "react": "^15.4.2",
     "react-dom": "^15.4.2",
     "reason-react": "^0.5.3"

examples/reason-react-example/src/TypeExpansion.re.js → examples/reason-react-example/src/TypeExpansion.gen.js

@@ -7,7 +7,7 @@
 // $FlowExpectedError: Reason checked type sufficiently
 const TypeExpansionBS = require('./TypeExpansion.bs');
 
-import type {person as Tuples_person} from '../src/basics/Tuples.re';
+import type {person as Tuples_person} from '../src/basics/Tuples.gen';
 
 export type personFromTuples = Tuples_person;
 

examples/reason-react-example/src/basics/Component1.re.js → examples/reason-react-example/src/basics/Component1.gen.js

@@ -15,7 +15,7 @@ const ReasonReact = require('reason-react/src/ReasonReact.js');
 
 import type {list} from '../../src/shims/ReasonPervasives.shim';
 
-import type {variant as Component2_variant} from './Component2.re';
+import type {variant as Component2_variant} from './Component2.gen';
 
 export type Props = {|+message?: string, +children?: mixed|};
 

examples/reason-react-example/src/basics/Records.re.js → examples/reason-react-example/src/basics/Records.gen.js

@@ -7,7 +7,7 @@
 // $FlowExpectedError: Reason checked type sufficiently
 const RecordsBS = require('./Records.bs');
 
-import type {weekday as Types_weekday} from './Types.re';
+import type {weekday as Types_weekday} from './Types.gen';
 
 export type coord = {|
   +x: number, 

examples/reason-react-example/src/basics/SomeFlowTypes.js

@@ -1,6 +1,6 @@
 /* @flow strict */
 
-const Types = require("./Types.re");
+const Types = require("./Types.gen");
 
 export type anInterestingFlowType = {
   an: string,

examples/reason-react-example/src/basics/Types.re

@@ -75,7 +75,7 @@ type someMutableFields = {
   [@bs.set] "mutable2": string,
 };
 
-[@genType.import "./name-with-dashes"] [@bs.module "./Types.re"]
+[@genType.import "./name-with-dashes"] [@bs.module "./Types.gen"]
 external foo: int => int = "";
 
 [@genType.opaque]

examples/reason-react-example/src/basics/UseStrictLocalFromStrict.js

@@ -1,3 +1,3 @@
 /* @flow strict */
 
-import type {someNonStrictType} from './StrictLocal.re';
+import type {someNonStrictType} from './StrictLocal.gen';

examples/reason-react-example/src/interop/InteropRoot.js

@@ -3,10 +3,10 @@
 const ReactDOM = require("react-dom");
 const React = require("react");
 
-const GreetingRe = require("./Greeting.re");
+const GreetingRe = require("./Greeting.gen");
 
 // Import a ReasonReact component!
-const PageReason = require("./Greeting.re").default;
+const PageReason = require("./Greeting.gen").default;
 
 const consoleLog = console.log;
 
@@ -19,7 +19,7 @@ const helloWorld = GreetingRe.concat("++", helloWorldList);
 
 const someNumber: number = GreetingRe.testDefaultArgs({ y: 10 });
 
-const WrapJsValue = require("./WrapJsValue.re");
+const WrapJsValue = require("./WrapJsValue.gen");
 
 consoleLog("interopRoot.js roundedNumber:", WrapJsValue.roundedNumber);
 consoleLog("interopRoot.js areaValue:", WrapJsValue.areaValue);
@@ -34,7 +34,7 @@ consoleLog("interopRoot.js callMyAreaDirectly:", callMyAreaDirectly);
 
 consoleLog("anInterestingFlowType ", require("../basics/SomeFlowTypes").c);
 
-const Enums = require("../basics/Enums.re");
+const Enums = require("../basics/Enums.gen");
 
 consoleLog("Enums: swap(sunday) =", Enums.swap("sunday"));
 consoleLog("Enums: fortytwoOK is", Enums.fortytwoOK);

examples/reason-react-example/src/interop/MyBannerWrapper.re

@@ -2,7 +2,7 @@
   * Wrap component MyBanner to be used from Reason.
   */
 [@genType.import "./MyBanner.component"] /* Module with the JS component to be wrapped. */
-[@bs.module "./MyBannerWrapper.re"] /* This must always be the name of the current module. */
+[@bs.module "./MyBannerWrapper.gen"] /* This must always be the name of the current module. */
 /* The make function will be automatically generated from the types below. */
 external make:
   (~show: bool) =>

examples/reason-react-example/src/interop/MyMath.js

@@ -1,6 +1,6 @@
 /* @flow strict */
 
-const WrapJsValue = require("./WrapJsValue.re");
+const WrapJsValue = require("./WrapJsValue.gen");
 
 export const round: number => number = Math.round;
 

examples/reason-react-example/src/interop/WrapJsValue.re

@@ -2,7 +2,7 @@
   * Wrap JS values to be used from Reason
   */
 [@genType.import "./MyMath"] /* This is the module to import from. */
-[@bs.module "./WrapJsValue.re"] /* This must always be the name of the current module. */
+[@bs.module "./WrapJsValue.gen"] /* This must always be the name of the current module. */
 /* Name and type of the JS value to bind to. */
 external round: float => float = "";
 
@@ -13,7 +13,7 @@ type point = {
 };
 
 [@genType.import "./MyMath"] /* This is the module to import from. */
-[@bs.module "./WrapJsValue.re"] /* This must always be the name of the current module. */
+[@bs.module "./WrapJsValue.gen"] /* This must always be the name of the current module. */
 /* Name and type of the JS value to bind to. */
 external area: point => int = "";
 
@@ -30,12 +30,12 @@ let areaValue = area({x: 3, y: None});
 type myArray('a);
 
 [@genType.import "./MyMath"] /* This is the module to import from. */
-[@bs.module "./WrapJsValue.re"] /* This must always be the name of the current module. */
+[@bs.module "./WrapJsValue.gen"] /* This must always be the name of the current module. */
 /* Name and type of the JS value to bind to. */
 external getValueAtIndex: (myArray(string), int) => string = "";
 
 [@genType.import "./MyMath"] /* This is the module to import from. */
-[@bs.module "./WrapJsValue.re"] /* This must always be the name of the current module. */
+[@bs.module "./WrapJsValue.gen"] /* This must always be the name of the current module. */
 /* Name and type of the JS value to bind to. */
 external functionWithRenamedArgument:
   string => [@genType.as "ArgRenamed"] ((~argToRename: string) => string) =

examples/reason-react-example/src/nested/Nested.re.js → examples/reason-react-example/src/nested/Nested.gen.js

@@ -10,7 +10,7 @@ const CreateBucklescriptBlock = require('bs-platform/lib/js/block.js');
 // $FlowExpectedError: Reason checked type sufficiently
 const NestedBS = require('./Nested.bs');
 
-import type {variant as Component2_variant} from '../../src/basics/Component2.re';
+import type {variant as Component2_variant} from '../../src/basics/Component2.gen';
 
 export opaque type VariantA = mixed;
 

examples/reason-react-example/webpack.config.js

@@ -26,12 +26,6 @@ module.exports = {
             ]
           }
         }
-      },
-      {
-        loader: "extension-replace-loader",
-        query: {
-          exts: [{ from: ".re", to: ".re.js" }]
-        }
       }
     ]
   }

examples/typescript-react-example/bsconfig.json

@@ -9,8 +9,7 @@
       "all": false,
       "basic": false
     },
-    "exportInterfaces": false,
-    "generatedFileExtension": ""
+    "exportInterfaces": false
   },
   "name": "sample-typescript-app",
   "reason": {

examples/typescript-react-example/clean.js

@@ -4,7 +4,7 @@ const child_process = require("child_process");
 
 glob.glob("src/**/*.bs.js", function(er, files) {
   files.forEach(fileBsJs => {
-    const fileTsx = fileBsJs.substring(0, fileBsJs.length - 6) + ".tsx";
+    const fileTsx = fileBsJs.substring(0, fileBsJs.length - 6) + ".gen.tsx";
     fs.unlink(fileTsx, err => {
       return;
     });

examples/typescript-react-example/src/MyBannerWrapper.re

@@ -6,7 +6,7 @@
 type message = {text: string};
 
 [@genType.import "./MyBanner"] /* Module with the JS component to be wrapped. */
-[@bs.module "./MyBannerWrapper"] /* This must always be the name of the current module. */
+[@bs.module "./MyBannerWrapper.gen"] /* This must always be the name of the current module. */
 /* The make function will be automatically generated from the types below. */
 external make:
   (~show: bool, ~message: option(message)=?, 'a) =>