Merge pull request #32 from mapbox/ch-ch-changes

Update for remark@7.0.0

.editorconfig

@@ -2,14 +2,8 @@ root = true
 
 [*]
 indent_style = space
-indent_size = 4
+indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
-
-[*.{html,json,remarkrc,eslintrc,sh}]
-indent_size = 2
-
-[*.md]
-trim_trailing_whitespace = false

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
 *.log
+.nyc_output/
 coverage/
 node_modules/

index.js

@@ -1,16 +1,17 @@
 'use strict';
 
-/*
- * Dependencies.
- */
+module.exports = remarkReact;
 
 var toHAST = require('mdast-util-to-hast');
 var sanitize = require('hast-util-sanitize');
 var toH = require('hast-to-hyperscript');
+var xtend = require('xtend');
+
+var globalCreateElement;
 
 try {
-    var globalCreateElement = require('react').createElement;
-} catch (e) { }
+  globalCreateElement = require('react').createElement;
+} catch (err) {}
 
 var own = {}.hasOwnProperty;
 
@@ -30,73 +31,80 @@ var TABLE_ELEMENTS = ['table', 'thead', 'tbody', 'tfoot', 'tr'];
  * @param {Function?} [options.createElement]
  *   - `h()`.
  */
-function plugin(processor, options) {
-    var settings = options || {};
-    var createElement = settings.createElement || globalCreateElement;
-    var components = settings.remarkReactComponents || {};
-    var clean = settings.sanitize !== false;
-    var scheme = clean && (typeof settings.sanitize !== 'boolean') ? settings.sanitize : null;
-    var toHastOptions = settings.toHast || {};
-
-    /**
-     * Wrapper around `createElement` to pass
-     * components in.
-     *
-     * @param {string} name - Element name.
-     * @param {Object} props - Attributes.
-     * @return {ReactElement} - React element.
+function remarkReact(options) {
+  var settings = options || {};
+  var createElement = settings.createElement || globalCreateElement;
+  var clean = settings.sanitize !== false;
+  var scheme = clean && (typeof settings.sanitize !== 'boolean') ? settings.sanitize : null;
+  var toHastOptions = settings.toHast || {};
+  var components = xtend({
+    td: createTableCellComponent('td'),
+    th: createTableCellComponent('th')
+  }, settings.remarkReactComponents);
+
+  this.Compiler = compile;
+
+  /**
+   * Wrapper around `createElement` to pass
+   * components in.
+   *
+   * @param {string} name - Element name.
+   * @param {Object} props - Attributes.
+   * @return {ReactElement} - React element.
+   */
+  function h(name, props, children) {
+    var component = own.call(components, name) ? components[name] : name;
+
+    /*
+     * Currently, a warning is triggered by react for
+     * *any* white-space in tables.  So we remove the
+     * pretty lines for now:
+     * https://github.com/facebook/react/pull/7081
      */
-    function h(name, props, children) {
-        var component = own.call(components, name) ? components[name] : name;
-
-        /*
-         * Currently, a warning is triggered by react for
-         * *any* white-space in tables.  So we remove the
-         * pretty lines for now:
-         * https://github.com/facebook/react/pull/7081
-         */
-        if (children && TABLE_ELEMENTS.indexOf(component) !== -1) {
-            children = children.filter(function (child) {
-                return child !== '\n';
-            });
-        }
-
-        return createElement(component, props, children);
+    if (children && TABLE_ELEMENTS.indexOf(component) !== -1) {
+      children = children.filter(function (child) {
+        return child !== '\n';
+      });
     }
 
-    /**
-     * Extensible constructor.
-     */
-    function Compiler() {}
-
-    /**
-     * Compile MDAST to React.
-     *
-     * @param {Node} node - MDAST node.
-     * @return {ReactElement} - React element.
-     */
-    function compile(node) {
-        var hast = {
-            type: 'element',
-            tagName: 'div',
-            properties: {},
-            children: toHAST(node, toHastOptions).children
-        };
-
-        if (clean) {
-            hast = sanitize(hast, scheme);
-        }
-
-        return toH(h, hast, settings.prefix);
+    return createElement(component, props, children);
+  }
+
+  /**
+   * Compile MDAST to React.
+   *
+   * @param {Node} node - MDAST node.
+   * @return {ReactElement} - React element.
+   */
+  function compile(node) {
+    var hast = {
+      type: 'element',
+      tagName: 'div',
+      properties: {},
+      children: toHAST(node, toHastOptions).children
+    };
+
+    if (clean) {
+      hast = sanitize(hast, scheme);
     }
 
-    Compiler.prototype.compile = compile;
-
-    processor.Compiler = Compiler;
+    return toH(h, hast, settings.prefix);
+  }
+
+  /**
+   * Create a functional React component for a cell.
+   * We need this because GFM uses `align`, whereas React
+   * forbids that and wants `style.textAlign` instead.
+   */
+  function createTableCellComponent(tagName) {
+    return TableCell;
+
+    function TableCell(props) {
+      return createElement(tagName, xtend(props, {
+        align: undefined,
+        children: undefined,
+        style: {textAlign: props.align}
+      }), props.children);
+    }
+  }
 }
-
-/*
- * Expose `plugin`.
- */
-
-module.exports = plugin;

package.json

@@ -18,20 +18,20 @@
   "dependencies": {
     "hast-to-hyperscript": "^2.0.1",
     "hast-util-sanitize": "^1.0.0",
-    "mdast-util-to-hast": "^1.0.0"
+    "mdast-util-to-hast": "^2.0.0",
+    "xtend": "^4.0.1"
   },
   "devDependencies": {
-    "commonmark.json": "^0.26.0",
-    "eslint": "^3.9.0",
-    "istanbul": "^0.4.2",
     "mocha": "^3.1.0",
-    "remark": "^6.0.0",
-    "remark-cli": "^2.0.0",
-    "remark-github": "^6.0.0",
-    "remark-preset-lint-consistent": "^1.0.0",
-    "remark-preset-lint-recommended": "^1.0.0",
-    "remark-toc": "^3.0.0",
-    "vfile": "^2.0.0"
+    "nyc": "^10.1.2",
+    "remark": "^7.0.0",
+    "remark-cli": "^3.0.0",
+    "remark-github": "^7.0.0",
+    "remark-preset-lint-consistent": "^2.0.0",
+    "remark-preset-lint-recommended": "^2.0.0",
+    "remark-toc": "^4.0.0",
+    "vfile": "^2.0.0",
+    "xo": "^0.17.1"
   },
   "files": [
     "index.js",
@@ -52,10 +52,44 @@
   "bugs": "https://github.com/mapbox/remark-react/issues",
   "scripts": {
     "sub-install": "cd test/react/v0.14 && npm install && cd ../..",
-    "build": "remark . --output --quiet --frail",
-    "lint": "eslint .",
+    "build": "remark *.md --output --quiet --frail",
+    "lint": "xo",
     "test-api": "mocha --check-leaks test/index.js",
-    "test-coverage": "istanbul cover _mocha -- --check-leaks test/index.js",
+    "test-coverage": "nyc --reporter lcov mocha test/index.js",
     "test": "npm run build && npm run lint && npm run sub-install && npm run test-coverage"
+  },
+  "nyc": {
+    "check-coverage": true,
+    "lines": 100,
+    "functions": 100,
+    "branches": 100
+  },
+  "xo": {
+    "space": true,
+    "rules": {
+      "import/no-extraneous-dependencies": "off",
+      "import/no-unresolved": "off",
+      "import/no-dynamic-require": "off",
+      "max-nested-callbacks": "off",
+      "no-eq-null": "off",
+      "eqeqeq": [
+        "error",
+        "always",
+        {
+          "null": "ignore"
+        }
+      ]
+    }
+  },
+  "remarkConfig": {
+    "plugins": [
+      "preset-lint-recommended",
+      "preset-lint-consistent",
+      "github",
+      "toc"
+    ],
+    "settings": {
+      "bullet": "*"
+    }
   }
 }

readme.md

@@ -62,7 +62,7 @@ var App = React.createClass({
                 value={this.state.text}
                 onChange={this.onChange} />
             <div id='preview'>
-                {remark().use(reactRenderer).process(this.state.text).contents}
+                {remark().use(reactRenderer).processSync(this.state.text).contents}
             </div>
         </div>);
     }
@@ -100,6 +100,12 @@ All options, including the `options` object itself, are optional:
     }
     ```
 
+    Note: as GFM uses `align` on `td` and `th`, and React doesn’t like that,
+    we [overwrite](https://github.com/mapbox/remark-react/blob/master/index.js#L94)
+    them through `remarkReactComponents` to use `style.textAlign` instead.
+    This means that if you set `td` or `td`, you’ll need to handle `align`
+    yourself.
+
 *   `toHast` (`object`, default: `{}`)
     — Provides options for transforming MDAST document to HAST.
     See [mdast-util-to-hast](https://github.com/wooorm/mdast-util-to-hast#api)