Merge pull request #6 from yaycmyk/4

2.0.0

CHANGELOG.md

@@ -1,6 +1,14 @@
 # markdown-to-jsx
 ## Changelog
 
+### 2.0.0 (March 20, 2016)
+
+- Add jsnext:main field (5597aa4f745e9e57c9b84b250f8d13df1bba72cc)
+- Update to remark 4.x (cfa49465508dd16e68915657fcf4626d5b758e3d)
+- Add tag & props override functionality (ca7271b0139400e768a482083f6a4392c4d6be77)
+- Give a proper warning if improper arguments are passed (4adcd455a6ba3d6046ccd3da1ee16b8a92291b86)
+- Enable footnotes support by default (8764bb181f1f0f8d510cc74d0b417c90698e11b5)
+
 ### 1.2.0 (January 4, 2016)
 
 - Upgrade mdast 2.x to remark 3.x (same project, rewritten internals + changed name)

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Evan Jacobs
+Copyright (c) 2015-present Evan Jacobs
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -23,9 +23,40 @@ render(converter('# Hello world!'), document.body);
 [remark options](https://github.com/wooorm/remark#remarkprocessvalue-options-done) can be passed as the second argument:
 
 ```js
-converter('# Hello world[^2]!\n\n[^2]: A beautiful place.', {footnotes: true});
+converter('* abc\n* def\n* ghi', {bullet: '*'});
 ```
 
+_Footnotes are enabled by default as of `[email protected]`._
+
+## Overriding tags and adding props
+
+As of `[email protected]`, it's now possible to selectively override a given HTML tag's JSX representation. This is done through a new third argument to the converter: an object made of keys, each being the lowercase html tag name (p, figure, a, etc.) to be overridden.
+
+Each override can be given a `component` that will be substituted for the tag name and/or `props` that will be applied as you would expect.
+
+```js
+converter('Hello there!', {}, {
+    p: {
+        component: MyParagraph,
+        props: {
+            className: 'foo'
+        },
+    }
+});
+```
+
+The code above will replace all emitted `<p>` tags with the given component `MyParagraph`, and add the `className` specified in `props`.
+
+Depending on the type of element, there are some props that must be preserved to ensure the markdown is converted as intended. They are:
+
+- `a`: `title`, `href`
+- `img`: `title`, `alt`, `src`
+- `ol`: `start`
+- `td`: `style`
+- `th`: `style`
+
+Any conflicts between passed `props` and the specific properties above will be resolved in favor of `markdown-to-jsx`'s code.
+
 ## Known Issues
 
 - remark's handling of lists will sometimes add a child paragraph tag inside the

__tests__/index.js

@@ -8,6 +8,40 @@ describe('markdown-to-jsx', () => {
 
     afterEach(() => ReactDOM.unmountComponentAtNode(mountNode));
 
+    it('should throw if not passed a string (first arg)', () => {
+        expect(() => converter('')).not.toThrow();
+
+        expect(() => converter()).toThrow();
+        expect(() => converter(1)).toThrow();
+        expect(() => converter(function(){})).toThrow();
+        expect(() => converter({})).toThrow();
+        expect(() => converter([])).toThrow();
+        expect(() => converter(null)).toThrow();
+        expect(() => converter(true)).toThrow();
+    });
+
+    it('should throw if not passed an object or undefined (second arg)', () => {
+        expect(() => converter('')).not.toThrow();
+        expect(() => converter('', {})).not.toThrow();
+
+        expect(() => converter('', 1)).toThrow();
+        expect(() => converter('', function(){})).toThrow();
+        expect(() => converter('', [])).toThrow();
+        expect(() => converter('', null)).toThrow();
+        expect(() => converter('', true)).toThrow();
+    });
+
+    it('should throw if not passed an object or undefined (third arg)', () => {
+        expect(() => converter('', {})).not.toThrow();
+        expect(() => converter('', {}, {})).not.toThrow();
+
+        expect(() => converter('', {}, 1)).toThrow();
+        expect(() => converter('', {}, function(){})).toThrow();
+        expect(() => converter('', {}, [])).toThrow();
+        expect(() => converter('', {}, null)).toThrow();
+        expect(() => converter('', {}, true)).toThrow();
+    });
+
     it('should handle a basic string', () => {
         const element = render(converter('Hello.'));
         const elementNode = ReactDOM.findDOMNode(element);
@@ -520,7 +554,7 @@ describe('markdown-to-jsx', () => {
                 'foo[^abc] bar',
                 '',
                 '[^abc]: Baz baz',
-            ].join('\n'), {footnotes: true}));
+            ].join('\n')));
 
             const elementNode = ReactDOM.findDOMNode(element);
 
@@ -546,7 +580,7 @@ describe('markdown-to-jsx', () => {
                 'foo[^abc] bar',
                 '',
                 '[^abc]: Baz baz',
-            ].join('\n'), {footnotes: true}));
+            ].join('\n')));
 
             const elementNode = ReactDOM.findDOMNode(element);
             const definitions = elementNode.children[1];
@@ -563,7 +597,7 @@ describe('markdown-to-jsx', () => {
                 'foo[^abc] bar',
                 '',
                 '[^abc]: Baz',
-            ].join('\n'), {footnotes: true}));
+            ].join('\n')));
 
             const elementNode = ReactDOM.findDOMNode(element);
             const definitions = elementNode.children[1];
@@ -575,4 +609,29 @@ describe('markdown-to-jsx', () => {
             expect(definitions.children[0].textContent).toBe('[abc]: Baz');
         });
     });
+
+    describe('overrides', () => {
+        it('should substitute the appropriate JSX tag if given a component', () => {
+            const FakeParagraph = (props) => <p className='foo'>{props.children}</p>;
+            const element = render(
+                converter('Hello.', {}, {p: {component: FakeParagraph}})
+            );
+
+            const elementNode = ReactDOM.findDOMNode(element);
+
+            expect(elementNode.children.length).toBe(1);
+            expect(elementNode.children[0].className).toBe('foo');
+        });
+
+        it('should add props to the appropriate JSX tag if supplied', () => {
+            const element = render(
+                converter('Hello.', {}, {p: {props: {className: 'abc'}}})
+            );
+
+            const elementNode = ReactDOM.findDOMNode(element);
+
+            expect(elementNode.children.length).toBe(1);
+            expect(elementNode.children[0].className).toBe('abc');
+        });
+    });
 });