refactoring code so it will be easier to add plugins

Author: mientjan

lib/parser.js

@@ -1,44 +1,54 @@
+import React, { Component, PropTypes } from "react";
+import { Text, View } from "react-native";
+import getUniqueID from "./util/getUniqueID";
+
+export function rootRenderRule(children) {
+  return <View key={getUniqueID()}>{children}</View>;
+}
+
 /**
  *
  */
 export default class AstRenderer {
-
-	/**
-     *
-	 * @param {Object.<string, function>} renderRules
-	 * @param {any} style
-	 */
+  /**
+   *
+   * @param {Object.<string, function>} renderRules
+   * @param {any} style
+   */
   constructor(renderRules, style) {
     this._renderRules = renderRules;
     this._style = style;
   }
 
   /**
-     *
-	 * @param {string} type
-	 * @return {string}
-	 */
+   *
+   * @param {string} type
+   * @return {string}
+   */
   getRenderFunction = type => {
     const renderFunction = this._renderRules[type];
+
     if (!renderFunction) {
-      throw new Error(`${type} renderer not defined`);
+      throw new Error(
+        `${type} renderRule not defined example: <Markdown rules={renderRules}>`
+      );
     }
     return renderFunction;
   };
 
   /**
-     *
-	 * @param node
-	 * @param parentNodes
-	 * @return {*}
-	 */
+   *
+   * @param node
+   * @param parentNodes
+   * @return {*}
+   */
   renderNode = (node, parentNodes) => {
     const renderFunction = this.getRenderFunction(node.type);
 
     const parents = [...parentNodes];
     parents.unshift(node);
 
-    if (node.type === 'text') {
+    if (node.type === "text") {
       return renderFunction(node, [], parentNodes, this._style);
     }
 
@@ -55,10 +65,8 @@ export default class AstRenderer {
    * @return {*}
    */
   render = nodes => {
-    const children = nodes.map(value => {
-      return this.renderNode(value, []);
-    });
-    const renderFunction = this.getRenderFunction('root');
-    return renderFunction(children);
+    console.log(nodes);
+    const children = nodes.map(value => this.renderNode(value, []));
+    return rootRenderRule(children);
   };
 }

index.js src/index.jsindex.js renamed to src/index.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { View } from "react-native";
+import tokensToAST from "./util/tokensToAST";
+import removeInlineTokens from "./util/removeInlineTokens";
+import groupTextTokens from "./util/groupTextTokens";
+import getTokenTypeByToken from "./util/getTokenTypeByToken";
+
+export function stringToTokens(source, markdownIt) {
+  let result = [];
+  try {
+    result = markdownIt.parse(source, {});
+  } catch (err) {
+    console.warn(err);
+  }
+
+  result.forEach(token => (token.type = getTokenTypeByToken(token)));
+
+  return result;
+}
+
+/**
+ *
+ * @param {string} source
+ * @param {function} [renderer]
+ * @param {AstRenderer} [markdownIt]
+ * @return {View}
+ */
+export function parser(source, renderer, markdownIt) {
+  const tokens = groupTextTokens(
+    removeInlineTokens(stringToTokens(source, markdownIt))
+  );
+  const asttree = tokensToAST(tokens);
+
+  return renderer(asttree);
+}

lib/AstRenderer.js src/lib/AstRenderer.jslib/AstRenderer.js renamed to src/lib/AstRenderer.js

@@ -11,14 +11,11 @@ const renderRules = {
   unknown: (node, children, parent, styles) => {
     return (
       <View key={node.key}>
-        <Text>unknown {node.type}</Text> {children}
+        <Text>{node.type}</Text>
       </View>
     );
   },
 
-  // `root` is a special case.
-  root: children => <View key={getUniqueID()}>{children}</View>,
-
   textgroup: (node, children, parent, styles) => {
     return <Text key={node.key}>{children}</Text>;
   },
@@ -114,40 +111,61 @@ const renderRules = {
       {children}
     </View>
   ),
-  code: (node, children, parent, styles) => {
-    switch (node.sourceType) {
-      case "code_inline": {
-        return (
-          <Text key={node.key} style={styles.codeInline}>
-            {node.content}
-          </Text>
-        );
-        break;
-      }
-      case "code_block": {
-        return (
-          <Text key={node.key} style={styles.codeBlock}>
-            {node.content}
-          </Text>
-        );
-        break;
-      }
-      case "fence": {
-        return (
-          <Text key={node.key} style={styles.codeBlock}>
-            {node.content}
-          </Text>
-        );
-        break;
-      }
-    }
-
+  code_inline: (node, children, parent, styles) => {
     return (
-      <View key={node.key} style={styles.codeInline}>
-        {children}
-      </View>
+      <Text key={node.key} style={styles.codeInline}>
+        {node.content}
+      </Text>
+    );
+  },
+  code_block: (node, children, parent, styles) => {
+    return (
+      <Text key={node.key} style={styles.codeBlock}>
+        {node.content}
+      </Text>
+    );
+  },
+  fence: (node, children, parent, styles) => {
+    return (
+      <Text key={node.key} style={styles.codeBlock}>
+        {node.content}
+      </Text>
     );
   },
+  // code: (node, children, parent, styles) => {
+  //   switch (node.sourceType) {
+  //     case "code_inline": {
+  //       return (
+  //         <Text key={node.key} style={styles.codeInline}>
+  //           {node.content}
+  //         </Text>
+  //       );
+  //       break;
+  //     }
+  //     case "code_block": {
+  //       return (
+  //         <Text key={node.key} style={styles.codeBlock}>
+  //           {node.content}
+  //         </Text>
+  //       );
+  //       break;
+  //     }
+  //     case "fence": {
+  //       return (
+  //         <Text key={node.key} style={styles.codeBlock}>
+  //           {node.content}
+  //         </Text>
+  //       );
+  //       break;
+  //     }
+  //   }
+  //
+  //   return (
+  //     <View key={node.key} style={styles.codeInline}>
+  //       {children}
+  //     </View>
+  //   );
+  // },
   pre: (node, children, parent, styles) => (
     <View key={node.key} style={styles.pre}>
       {children}

src/lib/parser.js

@@ -1,6 +1,6 @@
 export default class Token {
   constructor(type, nesting = 0, children = null) {
-    this.tag = type;
+    this.type = type;
     this.nesting = nesting;
     this.children = children;
   }