Add support for paths in @genType.as when importing components from JS. Also, simply support renaming.

Normally the assumption is that JS components use default exports.
When instead JS components use named export, they can now be imported by specifying the name in `genType.as`.
In addition, paths are also supported, so one can import a component whose name is specified by a path.

Examples are included for TS and Flow.

Fixes #113.

Author: cristianoc

Changes.md

@@ -1,3 +1,6 @@
+# master
+- Add support for paths in `@genType.as` when importing components from JS. Also, simply support renaming.
+
 # 1.6.1
 - Fix missing import React when importing component in untyped back-end.
 

examples/flow-react-example/src/TestImport.bs.js

@@ -16,6 +16,15 @@ import {ValueStartingWithUpperCaseLetter as valueStartingWithUpperCaseLetterNotC
 // flowlint-next-line nonstrict-import:off
 import {default as defaultValueNotChecked} from './exportNestedValues';
 
+// flowlint-next-line nonstrict-import:off
+import {TopLevelClass as TopLevelClass} from './interop/MyBanner.component';
+
+// $FlowExpectedError: Reason checked type sufficiently
+import * as React from 'react';
+
+// $FlowExpectedError: Reason checked type sufficiently
+import * as ReasonReact from 'reason-react/src/ReasonReact.js';
+
 // In case of type error, check the type of 'innerStuffContents' in 'TestImport.re' and './exportNestedValues'.
 export const innerStuffContentsTypeChecked: {|+x: number|} = innerStuffContentsNotChecked.MiddleLevelElements.stuff.InnerStuff.innerStuffContents;
 
@@ -39,3 +48,15 @@ export const defaultValueTypeChecked: number = defaultValueNotChecked;
 
 // Export 'defaultValue' early to allow circular import from the '.bs.js' file.
 export const defaultValue: mixed = defaultValueTypeChecked;
+
+export type Props = {|+show: boolean, +Message: ?string|};
+
+// In case of type error, check the type of 'make' in 'TestImport.re' and the props of './interop/MyBanner.component'.
+export function MyBannerInternalTypeChecked(props: Props) {
+  return <TopLevelClass.MiddleLevelElements.MyBannerInternal {...props}/>;
+}
+
+// Export 'make' early to allow circular import from the '.bs.js' file.
+export const make: mixed = function _(show, Message, children) { return ReasonReact.wrapJsForReason(TopLevelClass.MiddleLevelElements.MyBannerInternal, {show: show, Message: Message}, children); };
+
+export type message = {|+text: string|};

examples/flow-react-example/src/TestImport.gen.js

@@ -22,4 +22,24 @@ external valueStartingWithUpperCaseLetter: string = "";
 [@genType.import "./exportNestedValues"]
 [@genType.as "default"]
 [@bs.module "./TestImport.gen"]
-external defaultValue: int = "";
+external defaultValue: int = "";
+
+[@genType]
+type message = {text: string};
+
+[@genType.import "./interop/MyBanner.component"]
+[@genType.as "TopLevelClass.MiddleLevelElements.MyBannerInternal"]
+[@bs.module "./ImportMyBanner.gen"]
+external make:
+  (~show: bool) =>
+  [@genType.as "Message"] (
+    (~message: Js.Nullable.t(string), 'a) =>
+    ReasonReact.component(
+      ReasonReact.stateless,
+      ReasonReact.noRetainedProps,
+      ReasonReact.actionless,
+    )
+  ) =
+  "";
+
+let make = make;

examples/flow-react-example/src/TestImport.re

@@ -23,4 +23,10 @@ class App extends React.Component<Props> {
   }
 }
 
-module.exports = App;
+export default App;
+
+export class TopLevelClass {
+  static MiddleLevelElements = {
+    MyBannerInternal: App
+  };
+}

examples/flow-react-example/src/interop/MyBanner.component.js

@@ -22,4 +22,10 @@ class App extends React.PureComponent<Props> {
   }
 }
 
+export class TopLevelClass {
+  static MiddleLevelElements = {
+    MyBannerInternal: App
+  };
+}
+
 export default App;

examples/typescript-react-example/src/MyBanner.tsx

@@ -8,6 +8,13 @@ import {ValueStartingWithUpperCaseLetter as valueStartingWithUpperCaseLetterNotC
 
 import {default as defaultValueNotChecked} from './exportNestedValues';
 
+import {TopLevelClass as TopLevelClass} from './MyBanner';
+
+import * as React from 'react';
+
+// tslint:disable-next-line:no-var-requires
+const ReasonReact = require('reason-react/src/ReasonReact.js');
+
 // In case of type error, check the type of 'innerStuffContents' in 'TestImport.re' and './exportNestedValues'.
 export const innerStuffContentsTypeChecked: {readonly x: number} = innerStuffContentsNotChecked.MiddleLevelElements.stuff.InnerStuff.innerStuffContents;
 
@@ -31,3 +38,17 @@ export const defaultValueTypeChecked: number = defaultValueNotChecked;
 
 // Export 'defaultValue' early to allow circular import from the '.bs.js' file.
 export const defaultValue: unknown = defaultValueTypeChecked as number;
+
+// tslint:disable-next-line:interface-over-type-literal
+export type Props = {readonly show: boolean, readonly message?: message};
+
+// In case of type error, check the type of 'make' in 'TestImport.re' and the props of './MyBanner'.
+export function MyBannerInternalTypeChecked(props: Props) {
+  return <TopLevelClass.MiddleLevelElements.MyBannerInternal {...props}/>;
+}
+
+// Export 'make' early to allow circular import from the '.bs.js' file.
+export const make: unknown = function _(show: any, message: any, children: any) { return ReasonReact.wrapJsForReason(TopLevelClass.MiddleLevelElements.MyBannerInternal, {show: show, message: (message == null ? message : {text:message[0]})}, children); };
+
+// tslint:disable-next-line:interface-over-type-literal
+export type message = {readonly text: string};

examples/typescript-react-example/src/TestImport.bs.js

@@ -22,4 +22,21 @@ external valueStartingWithUpperCaseLetter: string = "";
 [@genType.import "./exportNestedValues"]
 [@genType.as "default"]
 [@bs.module "./TestImport.gen"]
-external defaultValue: int = "";
+external defaultValue: int = "";
+
+[@genType]
+type message = {text: string};
+
+[@genType.import "./MyBanner"]
+[@genType.as "TopLevelClass.MiddleLevelElements.MyBannerInternal"]
+[@bs.module "./ImportMyBanner.gen"]
+external make:
+  (~show: bool, ~message: option(message)=?, 'a) =>
+  ReasonReact.component(
+    ReasonReact.stateless,
+    ReasonReact.noRetainedProps,
+    ReasonReact.actionless,
+  ) =
+  "";
+
+let make = make;

examples/typescript-react-example/src/TestImport.gen.tsx

@@ -30,6 +30,7 @@ type exportVariantType = {
 };
 
 type importComponent = {
+  asPath: string,
   childrenTyp: typ,
   exportType,
   fileName: ModuleName.t,