improve build (#91)

* improve build

* minify umd format

* fix exports declaration

.babelrc

@@ -4,7 +4,6 @@
     "@babel/preset-env"
   ],
   "plugins": [
-    "@babel/plugin-proposal-object-rest-spread",
-    "@babel/plugin-proposal-class-properties"
+    "@babel/plugin-transform-runtime"
   ]
 }

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": "eslint:recommended",
+  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
   "env": {
     "es6": true,
     "browser": true,
@@ -17,40 +17,28 @@
   "settings": {
     "react": { "version": "detect" }
   },
-  "plugins": [
-    "react"
-  ],
+  "plugins": ["react"],
   "rules": {
     "eqeqeq": 2,
     "no-const-assign": 2,
     "prefer-const": 2,
-    "semi": [2, "always"],
-
     "array-bracket-spacing": [1, "never"],
-    "arrow-spacing": 1,
-    "brace-style": [1, "1tbs", {"allowSingleLine": true}],
-    "comma-style": [1, "last"],
-    "indent": [1, 2],
-    "keyword-spacing": 1,
-    "linebreak-style": [1, "unix"],
     "no-console": 1,
     "no-unused-vars": 1,
     "no-trailing-spaces": 1,
-    "object-curly-spacing": [1, "always", {"objectsInObjects": false, "arraysInObjects": false}],
     "padded-blocks": [1, "never"],
-    "space-before-blocks": 1,
-    "space-in-parens": 1,
-    "space-infix-ops": 1,
-
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
     "react/jsx-no-undef": 2,
     "react/no-did-mount-set-state": 2,
     "react/no-did-update-set-state": 2,
     "react/no-direct-mutation-state": 2,
     "react/no-unknown-property": 2,
-    "react/sort-comp": [1, {
-      "order": ["static-methods", "lifecycle", "render", "everything-else"]
-    }]
+    "react/sort-comp": [
+      1,
+      {
+        "order": ["static-methods", "lifecycle", "render", "everything-else"]
+      }
+    ]
   }
 }

.gitignore

@@ -2,3 +2,4 @@ npm-debug.log
 node_modules/
 .DS_Store
 dist/
+demo-dist/

.npmignore

@@ -1,3 +1,4 @@
 demo/
 src/
 test/
+demo-dist/

.prettierignore

@@ -0,0 +1,2 @@
+dist/
+node_modules/

.prettierrc

@@ -0,0 +1,3 @@
+{
+    "singleQuote": true
+}

demo/ClickCounterAtom.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { classToDOMAtom } from '../src';
+import { classToDOMAtom } from 'react-mobiledoc-editor';
 
 /**
  * Component-based atoms are rendered with these props:
@@ -19,21 +19,19 @@ class Counter extends React.Component {
     const { payload, save, value } = this.props;
     const clicks = (payload.clicks || 0) + 1;
     save(value, { ...payload, clicks }); // updates payload.clicks, rerenders button
-  }
+  };
 
   render() {
     const { payload } = this.props;
 
     return (
-      <button onClick={this.handleClick}>
-        Clicks: {payload.clicks || 0}
-      </button>
+      <button onClick={this.handleClick}>Clicks: {payload.clicks || 0}</button>
     );
   }
 }
 
-Counter.displayName = 'Counter'
+Counter.displayName = 'Counter';
 
 const ClickCounterAtom = classToDOMAtom(Counter);
 
-export default ClickCounterAtom;
+export default ClickCounterAtom;

demo/ImageCard.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { classToDOMCard } from '../src';
+import { classToDOMCard } from 'react-mobiledoc-editor';
 
 /**
  * Component-based cards are rendered with these props:
@@ -27,21 +27,39 @@ import { classToDOMCard } from '../src';
 class ImageCard extends React.Component {
   render() {
     const { isInEditor, payload, save, edit, isEditing } = this.props;
-    
+
     if (isEditing) {
       return (
         <div>
-          <input type="text" ref={r => (this.srcEl = r)} defaultValue={payload.src} /><br />
-          <input type="text" ref={r => (this.captionEl = r)} defaultValue={payload.caption} /><br />
-          <button onClick={() => save({ src: this.srcEl.value, caption: this.captionEl.value })}>Save</button>
+          <input
+            type="text"
+            ref={(r) => (this.srcEl = r)}
+            defaultValue={payload.src}
+          />
+          <br />
+          <input
+            type="text"
+            ref={(r) => (this.captionEl = r)}
+            defaultValue={payload.caption}
+          />
+          <br />
+          <button
+            onClick={() =>
+              save({ src: this.srcEl.value, caption: this.captionEl.value })
+            }
+          >
+            Save
+          </button>
         </div>
       );
     } else {
       const onClick = isInEditor ? edit : null;
       return (
         <div>
-          <img src={payload.src} onClick={onClick} /><br />
-          <small>{payload.caption}</small><br />
+          <img src={payload.src} onClick={onClick} />
+          <br />
+          <small>{payload.caption}</small>
+          <br />
           {isInEditor && <button onClick={onClick}>Edit</button>}
         </div>
       );

demo/index.html

@@ -1,15 +1,16 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
   <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
     <title>MobileDoc</title>
     <style type="text/css">
       /* Core Mobiledoc CSS is imported via webpack in index.js */
-      .active { font-weight: bold; }
+      .active {
+        font-weight: bold;
+      }
     </style>
   </head>
   <body>
     <div id="root"></div>
-    <script src="main.js"></script>
   </body>
 </html>

demo/index.js

@@ -1,21 +1,27 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import 'mobiledoc-kit/dist/mobiledoc.css';
 
-import * as ReactMobiledoc from '../src';
+import * as ReactMobiledoc from 'react-mobiledoc-editor';
 import ImageCard from './ImageCard';
 import ClickCounterAtom from './ClickCounterAtom';
 
-
 const config = {
   cards: [ImageCard],
   atoms: [ClickCounterAtom],
-  placeholder: "Welcome to Mobiledoc!",
-  willCreateEditor:() => { console.log('creating editor...'); },
-  didCreateEditor:(e) => { console.log('created editor:', e); },
+  placeholder: 'Welcome to Mobiledoc!',
+  willCreateEditor: () => {
+    console.log('creating editor...');
+  },
+  didCreateEditor: (e) => {
+    console.log('created editor:', e);
+  },
 };
 
-const imgPayload = { caption: "Edit this right meow!", src: "http://www.placekitten.com/200/200" };
-
+const imgPayload = {
+  caption: 'Edit this right meow!',
+  src: 'http://www.placekitten.com/200/200',
+};
 
 const ImageButton = (props) => {
   const { isEditing } = props;
@@ -25,7 +31,6 @@ const ImageButton = (props) => {
   return <button onClick={onClick}>Image Card</button>;
 };
 
-
 const ClickCounterButton = () => {
   const { editor } = React.useContext(ReactMobiledoc.ReactMobileDocContext);
   const onClick = () => editor.insertAtom('Counter', '', { clicks: 0 });
@@ -37,7 +42,11 @@ const App = () => {
 
   return (
     <div>
-      <ReactMobiledoc.Container {...config} mobiledoc={state} onChange={setState}>
+      <ReactMobiledoc.Container
+        {...config}
+        mobiledoc={state}
+        onChange={setState}
+      >
         <ReactMobiledoc.Toolbar />
         <ImageButton />
         <ClickCounterButton />
@@ -49,5 +58,3 @@ const App = () => {
 };
 
 ReactDOM.render(<App />, document.getElementById('root'));
-
-require("!style-loader!css-loader!../node_modules/mobiledoc-kit/dist/mobiledoc.css");

karma.conf.js

@@ -1,4 +1,4 @@
-module.exports = function(config) {
+module.exports = function (config) {
   config.set({
     // base path that will be used to resolve all patterns (eg. files, exclude)
     basePath: './test',
@@ -8,35 +8,38 @@ module.exports = function(config) {
     frameworks: ['mocha'],
 
     // list of files / patterns to load in the browser
-    files: [
-      'setup.js'
-    ],
+    files: ['setup.js'],
 
     // list of files to exclude
     exclude: [],
 
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
-      '**/*': ['webpack', 'sourcemap']
+      '**/*': ['webpack', 'sourcemap'],
     },
 
     webpack: {
       mode: 'development',
       devtool: 'inline-source-map',
+      resolve: {
+        alias: {
+          'react-mobiledoc-editor': __dirname,
+        },
+      },
       module: {
         rules: [
           {
             test: /\.js$/,
             loader: 'babel-loader',
-            exclude: /node_modules\//
-          }
-        ]
-      }
+            exclude: /node_modules\//,
+          },
+        ],
+      },
     },
 
     webpackMiddleware: {
-      noInfo: true
+      noInfo: true,
     },
 
     // test results reporter to use
@@ -64,6 +67,6 @@ module.exports = function(config) {
 
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits
-    singleRun: false
+    singleRun: false,
   });
 };