refactor: Add jsx.

Author: leezng

.babelrc

@@ -5,7 +5,8 @@
       "targets": {
         "browsers": ["> 1%", "last 10 versions", "not ie <= 11"]
       }
-    }]
+    }],
+    '@vue/babel-preset-jsx'
   ],
   "plugins": ["@babel/plugin-transform-runtime"],
   "env": {

build/webpack.base.conf.js

@@ -30,7 +30,7 @@ module.exports = {
     publicPath: isProd ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
   },
   resolve: {
-    extensions: ['.js', '.vue', '.json'],
+    extensions: ['.js', '.jsx', '.vue', '.json'],
     alias: {
       vue: 'vue/dist/vue.esm.js',
       src: resolve('src'),
@@ -42,7 +42,7 @@ module.exports = {
         test: /\.(js|vue)$/,
         loader: 'eslint-loader',
         enforce: 'pre',
-        include: [resolve('src'), resolve('test'), resolve('test')],
+        include: [resolve('src'), resolve('example'), resolve('test')],
         options: {
           formatter: require('eslint-friendly-formatter'),
         },
@@ -52,9 +52,9 @@ module.exports = {
         loader: 'vue-loader',
       },
       {
-        test: /\.js$/,
+        test: /\.js[x]$/,
         loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'), resolve('test')],
+        include: [resolve('src'), resolve('example'), resolve('test')],
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

example/App.jsx

@@ -0,0 +1,50 @@
+import Basic from './Basic';
+import VirtualList from './VirtualList';
+import SelectControl from './SelectControl';
+import './styles.less';
+
+export default {
+  render() {
+    const list = [
+      {
+        title: 'Basic Use',
+        key: 'basic',
+        component: <Basic />,
+      },
+      {
+        title: 'Virtual List',
+        key: 'virtual-list',
+        component: <VirtualList />,
+      },
+      {
+        title: 'Selector',
+        key: 'select-control',
+        component: <SelectControl />,
+      },
+    ];
+
+    return (
+      <div class="example">
+        {list.map(item => (
+          <div class="example-box" id={item.key}>
+            <h2 class="title">{item.title}</h2>
+            {item.component}
+          </div>
+        ))}
+
+        <a
+          style="position: fixed; right: 0; top: 0;"
+          href="https://github.com/leezng/vue-json-pretty"
+          target="_blank"
+        >
+          <img
+            style="position: absolute; top: 0; right: 0; border: 0;"
+            src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67"
+            alt="Fork me on GitHub"
+            data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"
+          />
+        </a>
+      </div>
+    );
+  },
+};

example/App.vue

@@ -9,7 +9,6 @@
         <div>
           <label>selectableType</label>
           <select v-model="selectableType">
-            <option label="-" />
             <option>single</option>
             <option>multiple</option>
           </select>

example/SelectControl.vue

@@ -0,0 +1,55 @@
+html,
+body {
+  margin: 0;
+  background-color: #f9f9f9;
+}
+.example {
+  position: relative;
+  padding: 0 15px;
+  margin: 0 auto;
+  width: 1200px;
+}
+.example-box {
+  margin: 0 -15px;
+  overflow: hidden;
+  h3 {
+    display: inline-block;
+  }
+  .title {
+    text-align: center;
+  }
+  .block {
+    float: left;
+    padding: 0 15px;
+    width: 50%;
+    box-sizing: border-box;
+  }
+  input,
+  select,
+  textarea {
+    padding: 3px 8px;
+    box-sizing: border-box;
+    border-radius: 5px;
+    border: 1px solid #bbb;
+    font-family: inherit;
+    &:focus {
+      outline: none;
+      border-color: #1d8ce0;
+      box-shadow: 0 0 3px #1d8ce0;
+    }
+  }
+  textarea {
+    width: 100%;
+    height: 150px;
+    resize: vertical;
+  }
+  pre {
+    margin: 0;
+    font-family: Consolas;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .options {
+    font-size: 14px;
+  }
+}