chore(TokenTree): Improved token tree building based off of open/closed rather than level

Author: HHogg

src/Renderer.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import assign from './assign';
+import defaultComponents from './defaultComponents';
+import defaultRemarkableProps from './defaultRemarkableProps';
+import defaultTokens from './defaultTokens';
+import TokenTree from './TokenTree';
+
+export default class Renderer {
+  constructor(options = {}) {
+    this.options = assign({
+      keyGen: (token, index) => index,
+    }, options, {
+      components: assign({}, defaultComponents, options.components),
+      remarkableProps: assign({}, defaultRemarkableProps, options.remarkableProps),
+      tokens: assign({}, defaultTokens, options.tokens),
+    });
+  }
+
+  render(tokens = [], remarkableOptions) {
+    return this.renderTokenTree(
+      this.buildTokenTree(tokens, remarkableOptions)
+    );
+  }
+
+  buildTokenTree(tokens, remarkableOptions) {
+    return new TokenTree(tokens, this.options, remarkableOptions);
+  }
+
+  renderTokenTree(token, index = 0) {
+    if (Array.isArray(token)) return token.map((token, indx) => this.renderTokenTree(token, indx));
+    if (!token || !token.type) return token;
+    if (!this.options.components[token.type]) return null;
+
+    return React.createElement(
+      this.options.components[token.type], assign({}, token.props, {
+        key: this.options.keyGen(token, index),
+      }), this.renderTokenTree(token.children),
+    );
+  }
+}

src/TokenTree.js

@@ -0,0 +1,129 @@
+const OPEN_IDENTIFIER = '_open';
+const CLOSE_IDENTIFIER = '_close';
+const INLINE_TYPE = 'inline';
+
+const isOpenToken = ({ type }) => type.includes(OPEN_IDENTIFIER);
+const isCloseToken = ({ type }) => type.includes(CLOSE_IDENTIFIER);
+const isInlineToken = ({ type }) => type === INLINE_TYPE;
+
+export default class TokenTree {
+  constructor(tokens = [], options, rOptions) {
+    this.i = -1;
+    this.tokens = tokens;
+    this.options = options;
+    this.rOptions = rOptions;
+
+    return this.buildTokenTree();
+  }
+
+  getType(token) {
+    return typeof this.options.tokens[token.type] === 'function'
+      ? this.options.tokens[token.type](token, this.rOptions)
+      : this.options.tokens[token.type];
+  }
+
+  buildToken(token, type = this.getType(token), children) {
+    if (Array.isArray(type)) {
+      return type.reduceRight((child, typee, index) => (
+        this.buildToken(token, typee, index < type.length - 1 ? [child] : undefined)
+      ), null);
+    }
+
+    if (!type) {
+      return token.content;
+    }
+
+    return ({
+      type,
+      props: this.buildTokenProps(type, token),
+      children: token.content,
+    });
+  }
+
+  buildTokenTree() {
+    const ts = this.tokens;
+    const collection = [];
+
+    while (++this.i < ts.length) {
+      if (isOpenToken(ts[this.i])) {
+        collection.push(
+          this.buildToken(
+            ts[this.i],
+            this.getType(ts[this.i]),
+            this.buildTokenTree()
+          )
+        );
+      } else if (isCloseToken(ts[this.i])) {
+        return collection;
+      } else if (isInlineToken(ts[this.i])) {
+        new TokenTree(ts[this.i].children, this.options, this.rOptions)
+          .forEach((token) => collection.push(token));
+      } else {
+        collection.push(this.buildToken(ts[this.i]));
+      }
+    }
+
+    return collection;
+  }
+
+  buildTokenProps(type, token) {
+    const props = {};
+
+    if (typeof this.options.components[type] === 'function') {
+      props.options = this.rOptions;
+    }
+
+    [token, this.rOptions].forEach((prps) => {
+      Object.keys(prps).forEach((prop) => {
+        const propValue = this.resolveProp(type, prop, prps[prop]);
+        if (propValue) props[propValue.key] = propValue.value;
+      });
+    });
+
+    return props;
+  }
+
+  resolveProp(type, prop, propValue) {
+    const component = this.options.components[type];
+    const resolver = this.options.remarkableProps[prop];
+
+    if (!resolver) return;
+
+    if (typeof resolver === 'function') {
+      return this.resolveFunctionProp(type, resolver(propValue, type), prop, propValue);
+    }
+
+    if (typeof resolver === 'string') {
+      return this.resolveStringProp(resolver, propValue);
+    }
+
+    if (resolver === true || typeof component === 'function') {
+      return this.resolveTrueProp(prop, propValue);
+    }
+  }
+
+  resolveFunctionProp(type, keyValue, prop, propValue) {
+    if (keyValue) {
+      return {
+        key: keyValue.key || prop,
+        value: keyValue.hasOwnProperty('value')
+          ? keyValue.value
+          : propValue,
+      };
+    }
+  }
+
+  resolveStringProp(resolver, propValue) {
+    return {
+      key: resolver,
+      value: propValue,
+    };
+  }
+
+  resolveTrueProp(prop, propValue) {
+    return {
+      key: prop,
+      value: propValue,
+    };
+  }
+}

src/utils.js src/assign.jssrc/utils.js renamed to src/assign.js

@@ -1,8 +1,8 @@
-export const assign = Object.assign || ((target, ...args) => {
+export default Object.assign || ((target, ...args) => {
   for (let i = 1; i < args.length; i++) {
     const source = args[i];
 
-    for (let key in source) {
+    for (const key in source) {
       if (Object.prototype.hasOwnProperty.call(source, key)) {
         target[key] = source[key];
       }

src/defaultComponents.js

@@ -0,0 +1,33 @@
+export default {
+  a: 'a',
+  blockquote: 'blockquote',
+  br: 'br',
+  code: 'code',
+  del: 'del',
+  em: 'em',
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  hr: 'hr',
+  html: 'div',
+  img: 'img',
+  ins: 'ins',
+  li: 'li',
+  mark: 'mark',
+  ol: 'ol',
+  p: 'p',
+  pre: 'pre',
+  strong: 'strong',
+  sub: 'sub',
+  sup: 'sup',
+  table: 'table',
+  tbody: 'tbody',
+  td: 'td',
+  th: 'th',
+  thead: 'thead',
+  tr: 'tr',
+  ul: 'ul',
+};

src/defaultRemarkableProps.js

@@ -0,0 +1,25 @@
+export default {
+  align: (align) => align ? ({
+    key: 'style',
+    value: { textAlign: align },
+  }) : false,
+  alt: true,
+  block: false,
+  content: (content, type) => type === 'html' && ({
+    key: 'dangerouslySetInnerHTML',
+    value: { __html: content },
+  }),
+  hLevel: false,
+  href: true,
+  level: false,
+  lines: false,
+  linkTarget: (target, type) => type === 'a' && ({
+    key: 'target',
+  }),
+  order: false,
+  params: false,
+  src: true,
+  tight: false,
+  title: true,
+  type: false,
+};

src/defaultTokens.js

@@ -0,0 +1,29 @@
+export default {
+  blockquote_open: 'blockquote',
+  bullet_list_open: 'ul',
+  code: 'code',
+  del_open: 'del',
+  em_open: 'em',
+  fence: ['pre', 'code'],
+  hardbreak: 'br',
+  heading_open: ({ hLevel }) => `h${hLevel}`,
+  hr: 'hr',
+  htmlblock: (_, { html }) => html && 'html',
+  image: 'img',
+  ins_open: 'ins',
+  link_open: 'a',
+  list_item_open: 'li',
+  mark_open: 'mark',
+  ordered_list_open: 'ol',
+  paragraph_open: 'p',
+  softbreak: (_, { breaks }) => breaks ? 'br' : undefined,
+  strong_open: 'strong',
+  sub: 'sub',
+  sup: 'sup',
+  table_open: 'table',
+  tbody_open: 'tbody',
+  td_open: 'td',
+  th_open: 'th',
+  thead_open: 'thead',
+  tr_open: 'tr',
+};

src/index.js

@@ -0,0 +1 @@
+export { default as default } from './Renderer';