Merge branch 'master' into pr/jonathaningram/56

# Conflicts:
#	src/index.test.js

.babelrc

@@ -1,10 +1,29 @@
 {
-  "presets": ["env", "stage-2", "react"],
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
   "env": {
     "production": {
       "ignore": [
         "**/*.test.js"
       ]
     }
-  }
+  },
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-json-strings",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-throw-expressions"
+  ]
 }

.circleci/config.yml

@@ -6,21 +6,6 @@ defaults: &defaults
 version: 2
 
 jobs:
-  size:
-    <<: *defaults
-    steps:
-      - checkout
-      - restore_cache:
-          keys:
-          - v1-dependencies-{{ checksum "yarn.lock" }}
-          - v1-dependencies-
-      - run: yarn install
-      - save_cache:
-          paths:
-            - node_modules
-          key: v1-dependencies-{{ checksum "yarn.lock" }}
-      - run: yarn size
-
   test:
     <<: *defaults
     steps:
@@ -55,5 +40,4 @@ workflows:
   build_accept_deploy:
     jobs:
       - test
-      - size
       - lint

README.md

@@ -58,7 +58,7 @@ compiled.toc // The table of contents, based on usage of headers
 ```
 
 ### Components
-You can also add your own custom components. You do this by importing `marksy/components`. This build of marksy includes babel transpiler which will convert any HTML to elements and allow for custom components:
+You can also add your own custom components. You do this by importing `marksy/jsx`. This build of marksy includes babel transpiler which will convert any HTML to elements and allow for custom components:
 
 <pre lang="js"><code>
 import React, {createElement} from 'react'
@@ -89,7 +89,7 @@ You can take one step further and create components wherever you want in the mar
 
 <pre lang="js"><code>
 import React, {createElement} from 'react'
-import marksy from 'marksy/components'
+import marksy from 'marksy/jsx'
 
 const compile = marksy({
   createElement,
@@ -118,7 +118,7 @@ You might need to pass in general information to your custom elements and compon
 
 ```js
 import React, {createElement} from 'react'
-import marksy from 'marksy/components'
+import marksy from 'marksy/jsx'
 
 const compile = marksy({
   createElement,
@@ -147,7 +147,7 @@ import {createElement} from 'react'
 import 'highlight.js/styles/github.css';
 import hljs from 'highlight.js/lib/highlight';
 import hljsJavascript from 'highlight.js/lib/languages/javascript';
-import marksy from 'marksy/components'
+import marksy from 'marksy/jsx'
 
 hljs.registerLanguage('javascript', hljsJavascript);
 
@@ -173,5 +173,5 @@ Meaning that the `code` element is added a classname based on the language.
 
 ## Developing
 1. Clone repo
-2. `npm install`
-3. `npm start` -> localhost:8080 (development app)
+2. `yarn install`
+3. `yarn start` -> localhost:8080 (development app)

app/main.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 /* eslint-disable import/no-extraneous-dependencies */
 
 import 'highlight.js/styles/github.css';
@@ -7,8 +8,8 @@ import React from 'react';
 import { render } from 'react-dom';
 
 // eslint-disable-next-line import/no-unresolved
-import marksy from 'marksy/components';
 import { document } from 'global';
+import marksy from '../components';
 
 hljs.registerLanguage('javascript', hljsJavascript);
 
@@ -64,12 +65,14 @@ class App extends React.Component {
       value: demo,
     };
   }
+
   onTextareaChange(event) {
     this.setState({
       tree: compile(event.target.value).tree,
       value: event.target.value,
     });
   }
+
   render() {
     return (
       <div>