Don't require JavaScript modules dynamically

In release mode, React Native's packager replaces the module name passed
to `require` with an ID. This means that requiring a dynamic module name
won't work in release mode, because the module name can't be found.

generator/elm-transformer.js

@@ -26,9 +26,8 @@ class ElmTransformer {
     return ejs.render(this.elementTemplate, { elementName: elementName, elementFuncName: elementFuncName });
   }
 
-  elementCustom(elementName, elementFuncName, moduleName, exportedName) {
-    return ejs.render(this.elementCustomTemplate, { elementName: elementName, elementFuncName: elementFuncName,
-      moduleName: moduleName, exportedName: exportedName });
+  elementCustom(elementName, elementFuncName) {
+    return ejs.render(this.elementCustomTemplate, { elementName: elementName, elementFuncName: elementFuncName });
   }
 
   property(propName, propType) {

generator/generate.js

@@ -123,20 +123,11 @@ const allowedPropTypes = [
   "func"
 ];
 
-const customElements = {
-  "NavigationCardStack": {
-    moduleName: "NavigationCardStack",
-    exportedName: "Nothing"
-  },
-  "NavigationHeader": {
-    moduleName: "NavigationHeader",
-    exportedName: "Nothing"
-  },
-  "NavigationHeaderTitle": {
-    moduleName: "NavigationHeaderTitle",
-    exportedName: "Nothing"
-  }
-};
+const customElements = [
+  "NavigationCardStack",
+  "NavigationHeader",
+  "NavigationHeaderTitle"
+];
 
 
 const elmTransformer = new ElmTransformer();
@@ -169,11 +160,10 @@ function generateElm(moduleJson) {
 
     let elementFuncName = decapitalize(moduleName);
 
-    if (customElements[moduleName]) {
-      elements[elementFuncName] = elmTransformer.elementCustom(moduleName, elementFuncName,
-        customElements[moduleName].moduleName, customElements[moduleName].exportedName);
-    } else {
+    if (customElements.indexOf(moduleName) == -1) {
       elements[elementFuncName] = elmTransformer.element(moduleName, elementFuncName);
+    } else {
+      elements[elementFuncName] = elmTransformer.elementCustom(moduleName, elementFuncName);
     }
 
     propNames.forEach(function(propName) {

generator/templates/element-custom.ejs

@@ -1,4 +1,4 @@
 {-| -}
 <%- elementFuncName %> : List (Property msg) -> List (Node msg) -> Node msg
 <%- elementFuncName %> =
-    customNode "<%- elementName %>" "<%- moduleName %>" <%- exportedName %>
+    customNode "<%- elementName %>" Native.NativeUi.Elements.<%- elementFuncName %>

generator/templates/elements-module.ejs

@@ -6,6 +6,7 @@ module NativeUi.Elements exposing (<%- moduleExports %>)
 -}
 
 import NativeUi exposing (Property, Node, customNode, node)
+import Native.NativeUi.Elements
 
 
-<%- content %>
+<%- content %>

src/Native/NativeUi.js

@@ -93,21 +93,14 @@ var _elm_native_ui$elm_native_ui$Native_NativeUi = (function () {
   /**
    * A non-standard node that renders a React Native component with props and children
    */
-  function customNode(tagName, moduleName, maybeExportedName) {
-    var exportedName = null;
-
-    if (maybeExportedName.ctor !== 'Nothing') {
-      exportedName = maybeExportedName._0;
-    }
-
+  function customNode(tagName, nativeComponent) {
     return F2(function(factList, childList) {
       return {
         type: 'component',
         tagName: tagName,
         facts: toArray(factList),
         children: toArray(childList),
-        moduleName: moduleName,
-        exportedName: exportedName
+        nativeComponent: nativeComponent
       };
     });
   }
@@ -261,17 +254,11 @@ var _elm_native_ui$elm_native_ui$Native_NativeUi = (function () {
     if (ReactNative[node.tagName]) {
       return React.createElement(ReactNative[node.tagName], finalProps);
     } else {
-      if (!node.moduleName) {
+      if (!node.nativeComponent) {
           throw Error('Unable to find a node called ' + node.tagName + ' in ReactNative. Try defining it as a customNode');
       }
 
-      var customComponent = require(node.moduleName);
-
-      if(node.exportedName) {
-          return React.createElement(customComponent[node.exportedName], finalProps);
-      } else {
-          return React.createElement(customComponent, finalProps);
-      }
+      return React.createElement(node.nativeComponent, finalProps);
     }
   }
 
@@ -383,7 +370,7 @@ var _elm_native_ui$elm_native_ui$Native_NativeUi = (function () {
     program: program,
     node: node,
     voidNode: voidNode,
-    customNode: F3(customNode),
+    customNode: F2(customNode),
     string: string,
     map: F2(map),
     on: F2(on),

src/Native/NativeUi/Elements.js

@@ -0,0 +1,7 @@
+const _elm_native_ui$elm_native_ui$Native_NativeUi_Elements = function () {
+  return {
+    navigationCardStack: require("NavigationCardStack"),
+    navigationHeader: require("NavigationHeader"),
+    navigationHeaderTitle: require("NavigationHeaderTitle"),
+  };
+}();

src/NativeUi.elm

@@ -30,14 +30,23 @@ type Property msg
     = Property
 
 
+{-| This type represents a reference to a React component.
+
+  You should not use this type from Elm. It only exists to keep track of
+  JavaScript components that are passed through Elm to Native modules.
+-}
+type NativeComponent
+    = NativeComponent
+
+
 {-| -}
 node : String -> List (Property msg) -> List (Node msg) -> Node msg
 node =
     Native.NativeUi.node
 
 
 {-| -}
-customNode : String -> String -> Maybe String -> List (Property msg) -> List (Node msg) -> Node msg
+customNode : String -> NativeComponent -> List (Property msg) -> List (Node msg) -> Node msg
 customNode =
     Native.NativeUi.customNode
 

src/NativeUi/Elements.elm

@@ -6,6 +6,7 @@ module NativeUi.Elements exposing (text, image, activityIndicator, mapView, pick
 -}
 
 import NativeUi exposing (Property, Node, customNode, node)
+import Native.NativeUi.Elements
 
 
 {-| -}
@@ -125,16 +126,16 @@ view =
 {-| -}
 navigationCardStack : List (Property msg) -> List (Node msg) -> Node msg
 navigationCardStack =
-    customNode "NavigationCardStack" "NavigationCardStack" Nothing
+    customNode "NavigationCardStack" Native.NativeUi.Elements.navigationCardStack
 
 
 {-| -}
 navigationHeader : List (Property msg) -> List (Node msg) -> Node msg
 navigationHeader =
-    customNode "NavigationHeader" "NavigationHeader" Nothing
+    customNode "NavigationHeader" Native.NativeUi.Elements.navigationHeader
 
 
 {-| -}
 navigationHeaderTitle : List (Property msg) -> List (Node msg) -> Node msg
 navigationHeaderTitle =
-    customNode "NavigationHeaderTitle" "NavigationHeaderTitle" Nothing
+    customNode "NavigationHeaderTitle" Native.NativeUi.Elements.navigationHeaderTitle