Use JavaScript functions for Component templates

Summary:
## Rationale
**Disclaimer**: This is an incremental step towards more maintainable/readable react-native-codegen generators. In the future, we may want to replace these templates/string concat logic with *something better*. But until we decide what that *something better* is, let's at least get rid of all this gross string find/replace.

Benefits of using Function templates over String.prototype.replace.
- **Self-documenting**: Template Functions enumerate/describe their exact data dependencies in their signature. You no longer have to read the template implementation to see what data you need to pass into the template.
- **Improved Readability**: JavaScript syntax highlighting makes it really easy to see where/how the data is inserted into the templates. Also template variables used be prefixed/suffixed with ::, which made things really confusing in C++ code (e.g: wtf is `::_CLASSNAME_::EventEmitter::::_EVENT_NAME_::`?).
- **Simpler Interpolation**: Don't have to worry about .replaceAll vs .replace, or calling these replace functions with regexes or strings.
- **Template Type-safety**: Ensure that the correct data types are passed to the component templates (e.g: flow will complain if you accidentally pass null/undefined when a template expects a string).
- **Template Type-safety**: Ensure that we don't pass in extra data to templates (this diff catches/fixes instances of this error). Ensure that we don't forget to pass in data to the template.
- etc.

After this diff, both our Component and NativeModule generators will be using template functions. This string find/replace exists no more in react-native-codegen.

This is also a very surface-level change. I made no efforts to simplify these templates. Let's take a look at that later, as necessary.

Changelog: [Internal]

Reviewed By: yungsters

Differential Revision: D32021441

fbshipit-source-id: f8f27069bcbf9d66dcafb7d1411da1f938eb6dcd

Author: RSNara

packages/react-native-codegen/src/generators/components/GenerateComponentDescriptorH.js

@@ -15,7 +15,13 @@ import type {SchemaType} from '../../CodegenSchema';
 // File path -> contents
 type FilesOutput = Map<string, string>;
 
-const template = `
+const FileTemplate = ({
+  componentDescriptors,
+  libraryName,
+}: {
+  componentDescriptors: string,
+  libraryName: string,
+}) => `
 /**
  * ${'C'}opyright (c) Facebook, Inc. and its affiliates.
  *
@@ -27,20 +33,21 @@ const template = `
 
 #pragma once
 
-#include <react/renderer/components/::_LIBRARY_::/ShadowNodes.h>
+#include <react/renderer/components/${libraryName}/ShadowNodes.h>
 #include <react/renderer/core/ConcreteComponentDescriptor.h>
 
 namespace facebook {
 namespace react {
 
-::_COMPONENT_DESCRIPTORS_::
+${componentDescriptors}
 
 } // namespace react
 } // namespace facebook
 `;
 
-const componentTemplate = `
-using ::_CLASSNAME_::ComponentDescriptor = ConcreteComponentDescriptor<::_CLASSNAME_::ShadowNode>;
+const ComponentTemplate = ({className}: {className: string}) =>
+  `
+using ${className}ComponentDescriptor = ConcreteComponentDescriptor<${className}ShadowNode>;
 `.trim();
 
 module.exports = {
@@ -70,16 +77,18 @@ module.exports = {
             if (components[componentName].interfaceOnly === true) {
               return;
             }
-            return componentTemplate.replace(/::_CLASSNAME_::/g, componentName);
+
+            return ComponentTemplate({className: componentName});
           })
           .join('\n');
       })
       .filter(Boolean)
       .join('\n');
 
-    const replacedTemplate = template
-      .replace(/::_COMPONENT_DESCRIPTORS_::/g, componentDescriptors)
-      .replace('::_LIBRARY_::', libraryName);
+    const replacedTemplate = FileTemplate({
+      componentDescriptors,
+      libraryName,
+    });
 
     return new Map([[fileName, replacedTemplate]]);
   },

packages/react-native-codegen/src/generators/components/GenerateComponentHObjCpp.js

@@ -37,53 +37,96 @@ function getOrdinalNumber(num: number): string {
   return 'unknown';
 }
 
-const protocolTemplate = `
-@protocol RCT::_COMPONENT_NAME_::ViewProtocol <NSObject>
-::_METHODS_::
+const ProtocolTemplate = ({
+  componentName,
+  methods,
+}: {
+  componentName: string,
+  methods: string,
+}) =>
+  `
+@protocol RCT${componentName}ViewProtocol <NSObject>
+${methods}
 @end
 `.trim();
 
-const commandHandlerIfCaseConvertArgTemplate = `
-  NSObject *arg::_ARG_NUMBER_:: = args[::_ARG_NUMBER_::];
+const CommandHandlerIfCaseConvertArgTemplate = ({
+  componentName,
+  expectedKind,
+  argNumber,
+  argNumberString,
+  expectedKindString,
+  argConversion,
+}: {
+  componentName: string,
+  expectedKind: string,
+  argNumber: number,
+  argNumberString: string,
+  expectedKindString: string,
+  argConversion: string,
+}) =>
+  `
+  NSObject *arg${argNumber} = args[${argNumber}];
 #if RCT_DEBUG
-  if (!RCTValidateTypeOfViewCommandArgument(arg::_ARG_NUMBER_::, ::_EXPECTED_KIND_::, @"::_EXPECTED_KIND_STRING_::", @"::_COMPONENT_NAME_::", commandName, @"::_ARG_NUMBER_STR_::")) {
+  if (!RCTValidateTypeOfViewCommandArgument(arg${argNumber}, ${expectedKind}, @"${expectedKindString}", @"${componentName}", commandName, @"${argNumberString}")) {
     return;
   }
 #endif
-  ::_ARG_CONVERSION_::
+  ${argConversion}
 `.trim();
 
-const commandHandlerIfCaseTemplate = `
-if ([commandName isEqualToString:@"::_COMMAND_NAME_::"]) {
+const CommandHandlerIfCaseTemplate = ({
+  componentName,
+  commandName,
+  numArgs,
+  convertArgs,
+  commandCall,
+}: {
+  componentName: string,
+  commandName: string,
+  numArgs: number,
+  convertArgs: string,
+  commandCall: string,
+}) =>
+  `
+if ([commandName isEqualToString:@"${commandName}"]) {
 #if RCT_DEBUG
-  if ([args count] != ::_NUM_ARGS_::) {
-    RCTLogError(@"%@ command %@ received %d arguments, expected %d.", @"::_COMPONENT_NAME_::", commandName, (int)[args count], ::_NUM_ARGS_::);
+  if ([args count] != ${numArgs}) {
+    RCTLogError(@"%@ command %@ received %d arguments, expected %d.", @"${componentName}", commandName, (int)[args count], ${numArgs});
     return;
   }
 #endif
 
-  ::_CONVERT_ARGS_::
+  ${convertArgs}
 
-  ::_COMMAND_CALL_::
+  ${commandCall}
   return;
 }
 `.trim();
 
-const commandHandlerTemplate = `
-RCT_EXTERN inline void RCT::_COMPONENT_NAME_::HandleCommand(
-  id<RCT::_COMPONENT_NAME_::ViewProtocol> componentView,
+const CommandHandlerTemplate = ({
+  componentName,
+  ifCases,
+}: {
+  componentName: string,
+  ifCases: string,
+}) =>
+  `
+RCT_EXTERN inline void RCT${componentName}HandleCommand(
+  id<RCT${componentName}ViewProtocol> componentView,
   NSString const *commandName,
   NSArray const *args)
 {
-  ::_IF_CASES_::
+  ${ifCases}
 
 #if RCT_DEBUG
-  RCTLogError(@"%@ received command %@, which is not a supported command.", @"::_COMPONENT_NAME_::", commandName);
+  RCTLogError(@"%@ received command %@, which is not a supported command.", @"${componentName}", commandName);
 #endif
 }
 `.trim();
 
-const template = `
+const FileTemplate = ({componentContent}: {componentContent: string}) =>
+  `
 /**
 * ${'C'}opyright (c) Facebook, Inc. and its affiliates.
 *
@@ -99,7 +142,7 @@ const template = `
 
 NS_ASSUME_NONNULL_BEGIN
 
-::_COMPONENT_CONTENT_::
+${componentContent}
 
 NS_ASSUME_NONNULL_END
 `.trim();
@@ -225,7 +268,7 @@ function generateProtocol(
   component: ComponentShape,
   componentName: string,
 ): string {
-  const commands = component.commands
+  const methods = component.commands
     .map(command => {
       const params = command.typeAnnotation.params;
       const paramString =
@@ -245,9 +288,10 @@ function generateProtocol(
     .join('\n')
     .trim();
 
-  return protocolTemplate
-    .replace(/::_COMPONENT_NAME_::/g, componentName)
-    .replace('::_METHODS_::', commands);
+  return ProtocolTemplate({
+    componentName,
+    methods,
+  });
 }
 
 function generateConvertAndValidateParam(
@@ -262,13 +306,14 @@ function generateConvertAndValidateParam(
     param.name
   } = ${getObjCRightHandAssignmentParamType(param, index)};`;
 
-  return commandHandlerIfCaseConvertArgTemplate
-    .replace(/::_COMPONENT_NAME_::/g, componentName)
-    .replace('::_ARG_CONVERSION_::', argConversion)
-    .replace(/::_ARG_NUMBER_::/g, '' + index)
-    .replace('::_ARG_NUMBER_STR_::', getOrdinalNumber(index + 1))
-    .replace('::_EXPECTED_KIND_::', expectedKind)
-    .replace('::_EXPECTED_KIND_STRING_::', expectedKindString);
+  return CommandHandlerIfCaseConvertArgTemplate({
+    componentName,
+    argConversion,
+    argNumber: index,
+    argNumberString: getOrdinalNumber(index + 1),
+    expectedKind,
+    expectedKindString,
+  });
 }
 
 function generateCommandIfCase(
@@ -294,12 +339,13 @@ function generateCommandIfCase(
           .join(' ');
   const commandCall = `[componentView ${command.name}${commandCallArgs}];`;
 
-  return commandHandlerIfCaseTemplate
-    .replace(/::_COMPONENT_NAME_::/g, componentName)
-    .replace(/::_COMMAND_NAME_::/g, command.name)
-    .replace(/::_NUM_ARGS_::/g, '' + params.length)
-    .replace('::_CONVERT_ARGS_::', convertArgs)
-    .replace('::_COMMAND_CALL_::', commandCall);
+  return CommandHandlerIfCaseTemplate({
+    componentName,
+    commandName: command.name,
+    numArgs: params.length,
+    convertArgs,
+    commandCall,
+  });
 }
 
 function generateCommandHandler(
@@ -314,9 +360,10 @@ function generateCommandHandler(
     .map(command => generateCommandIfCase(command, componentName))
     .join('\n\n');
 
-  return commandHandlerTemplate
-    .replace(/::_COMPONENT_NAME_::/g, componentName)
-    .replace('::_IF_CASES_::', ifCases);
+  return CommandHandlerTemplate({
+    componentName,
+    ifCases,
+  });
 }
 
 module.exports = {
@@ -362,10 +409,9 @@ module.exports = {
       .filter(Boolean)
       .join('\n\n');
 
-    const replacedTemplate = template.replace(
-      '::_COMPONENT_CONTENT_::',
+    const replacedTemplate = FileTemplate({
       componentContent,
-    );
+    });
 
     return new Map([[fileName, replacedTemplate]]);
   },