feat: support customize component

BANG88 · BANG88 · commit 760cf08803f0 · 2018-10-22T14:36:27.000+08:00
diff --git a/index.ts b/index.ts
@@ -24,7 +24,7 @@ export interface Message {
 }
 
 // This is the only JSX element we can extract messages from:
-type ElementName = "FormattedMessage";
+type ElementName = "FormattedMessage" | string;
 // These are the two methods we can extract messages from:
 type MethodName = "defineMessages" | "formatMessage";
 // MessageExtracter defines a function type which can extract zero or more
@@ -171,11 +171,16 @@ function findMethodCallsWithName(
   });
   return messages;
 }
-
+export interface Options {
+  tagNames: string[];
+}
 /**
  * Parse tsx files
  */
-function main(contents: string): Message[] {
+function main(
+  contents: string,
+  options: Options = { tagNames: [] },
+): Message[] {
   const sourceFile = ts.createSourceFile(
     "file.ts",
     contents,
@@ -184,25 +189,38 @@ function main(contents: string): Message[] {
     ts.ScriptKind.TSX,
   );
 
-  const elements = findJsxOpeningLikeElementsWithName(
-    sourceFile,
-    "FormattedMessage",
-  );
   const dm = findMethodCallsWithName(
     sourceFile,
     "defineMessages",
     extractMessagesForDefineMessages,
   );
+
   // TODO formatMessage might not be the initializer for a VarDecl
   // eg console.log(formatMessage(...))
   const fm = findMethodCallsWithName(
     sourceFile,
     "formatMessage",
     extractMessagesForFormatMessage,
   );
+  const results: Message[] = [];
 
-  // convert JsxOpeningLikeElements to Message maps
-  const jsxMessages = elements
+  const tagNames = ["FormattedMessage"].concat(options.tagNames);
+  tagNames.forEach((tagName) => {
+    const elements = findJsxOpeningLikeElementsWithName(sourceFile, tagName);
+    // convert JsxOpeningLikeElements to Message maps
+    const jsxMessages = getElementsMessages(elements);
+    results.push(...jsxMessages);
+  });
+
+  return results.concat(dm).concat(fm);
+}
+
+/**
+ * convert JsxOpeningLikeElements to Message maps
+ * @param elements
+ */
+function getElementsMessages(elements: ts.JsxOpeningLikeElement[]) {
+  return elements
     .map((element) => {
       const msg: Partial<Message> = {};
       if (element.attributes) {
@@ -238,8 +256,6 @@ function main(contents: string): Message[] {
       return isValidMessage(msg) ? msg : null;
     })
     .filter(notNull);
-
-  return jsxMessages.concat(dm).concat(fm);
 }
 
 function notNull<T>(value: T | null): value is T {
diff --git a/lib/index.d.ts b/lib/index.d.ts
@@ -6,8 +6,11 @@ export interface Message {
     description?: string;
     id: string;
 }
+export interface Options {
+    tagNames: string[];
+}
 /**
  * Parse tsx files
  */
-declare function main(contents: string): Message[];
+declare function main(contents: string, options?: Options): Message[];
 export default main;
diff --git a/lib/index.js b/lib/index.js
diff --git a/lib/index.js.map b/lib/index.js.map
diff --git a/test/app/anotherText.tsx b/test/app/anotherText.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+export class AnotherText extends React.Component<FormattedMessage.Props,{}> {
+  // tslint:disable-next-line:member-access
+  render() {
+    return <FormattedMessage {...this.props}>
+	{
+		text => <span>{text}</span>
+	}
+	</FormattedMessage>;
+  }
+}
diff --git a/test/app/index.tsx b/test/app/index.tsx
@@ -1,11 +1,15 @@
 import React from "react";
 import { FormattedMessage } from "react-intl";
+import { AnotherText } from "./anotherText";
 import messages from "./defineMessages";
+import { MyComponent } from "./myComponent";
 
 export class App extends React.Component<any, any> {
   render() {
     return (
       <div>
+        <MyComponent id='my.component' defaultMessage='my messages'/>
+        <AnotherText id='another.text' defaultMessage='another messages'/>
         <FormattedMessage id="app" defaultMessage="the defualt message" />
         <FormattedMessage {...messages.intro} />
         <FormattedMessage id="expr" defaultMessage={"a jsx expression"} />
diff --git a/test/app/myComponent.tsx b/test/app/myComponent.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+export class MyComponent extends React.Component<FormattedMessage.Props,{}> {
+  // tslint:disable-next-line:member-access
+  render() {
+    return <FormattedMessage {...this.props}>
+	{
+		text => <span>{text}</span>
+	}
+	</FormattedMessage>;
+  }
+}
diff --git a/test/index.js b/test/index.js
@@ -7,7 +7,7 @@ var fs = require("fs");
 test("<FormattedMessage/>", (t) => {
   var content = fs.readFileSync(__dirname + "/app/index.tsx");
 
-  var res = p(content.toString());
+  var res = p(content.toString(), { tagNames: ["MyComponent", "AnotherText"] });
   console.log(res);
   var expected = [
     {
@@ -23,13 +23,11 @@ test("<FormattedMessage/>", (t) => {
       defaultMessage:
         "The installer has detected {numDrives, number} {numDrives, plural,\n      one {drive}\n      other {drives}\n    } and determined {numDrives, plural,\n      one {its}\n      other {their}\n    } best configuration.\n    If this is not the intended use of {numDrives, plural,\n      one {this drive}\n      other {these drives}\n    }, please change the configuration to your preferences.",
     },
-    // {
-    //   id: "concat",
-    //   defaultMessage: "concatenated strings"
-    // }
+    { id: "my.component", defaultMessage: "my messages" },
+    { id: 'another.text', defaultMessage: 'another messages' }
   ];
 
-  t.is(res.length, 3);
+  t.is(res.length, 5);
 
   t.deepEqual(res, expected);
 });
