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 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 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;
   }

lib/plugin/PluginContainer.js renamed to src/lib/plugin/PluginContainer.js

@@ -24,15 +24,18 @@ const regSelectHofH1 = /\w/g;
  * @param token
  * @return {String}
  */
-function getTokenTypeByToken(token) {
-  let cleanedType = "root";
-
-  const result = !(cleanedType === "root");
+export default function getTokenTypeByToken(token) {
+  let cleanedType = "unknown";
 
   if (token.type) {
     cleanedType = token.type.replace(regSelectOpenClose, "");
   }
 
+  if(cleanedType === 'unknown')
+  {
+    console.log(token);
+  }
+
   switch (cleanedType) {
     case "heading": {
       cleanedType = `${cleanedType}${token.tag.substr(1)}`;
@@ -42,3 +45,5 @@ function getTokenTypeByToken(token) {
 
   return cleanedType;
 }
+
+

lib/plugin/blockPlugin.js renamed to src/lib/plugin/blockPlugin.js

@@ -6,4 +6,5 @@
  */
 export default function hasParents(parents, type) {
   return parents.findIndex(el => el.type === type) > -1;
+
 }

lib/renderRules.js renamed to src/lib/renderRules.js

@@ -1,4 +1,5 @@
 import getUniqueID from './getUniqueID';
+import getTokenTypeByToken from './getTokenTypeByToken';
 
 /**
  *
@@ -7,26 +8,20 @@ import getUniqueID from './getUniqueID';
  * @return {{type: string, content, tokenIndex: *, index: number, attributes: {}, children: *}}
  */
 function createNode(token, tokenIndex) {
-  let type = 'root';
-
-  if (token) {
-    if (!token.type) {
-      type = token.tag;
-    } else {
-      type = token.type;
-    }
-  }
-
+  const type = getTokenTypeByToken(token);
   const content = token.content;
+
   let attributes = {};
 
   if (token.attrs) {
     attributes = token.attrs.reduce((prev, curr) => {
       const [name, value] = curr;
       return { ...prev, [name]: value };
     }, {});
+
   }
 
+
   return {
     type,
     key: getUniqueID(),