Merge pull request #33 from simonguo/next

Refactor via typescirpt

.eslintrc.js

@@ -1,71 +1,39 @@
-'use strict';
-
 const OFF = 0;
 const WARNING = 1;
 const ERROR = 2;
 
 module.exports = {
-  extends: 'airbnb',
   env: {
     browser: true,
-    node: true,
-    es6: true,
-    mocha: true
-  },
-  globals: {
-    assert: true
-  },
-  parser: 'babel-eslint',
-  plugins: ['react', 'babel'],
-  parserOptions: {
-    ecmaVersion: 6,
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-      experimentalObjectRestSpread: true
-    }
+    es6: true
   },
+  parser: '@typescript-eslint/parser',
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'prettier'
+  ],
+  parserOptions: {},
+  plugins: ['@typescript-eslint', 'react'],
   rules: {
-    indent: [ERROR, 2, { SwitchCase: 1 }], //规定代码的缩进方式：2个空格
-    camelcase: ERROR, //强制驼峰法命名
-    curly: ERROR, //必须使用 if(){} 中的{}
-    eqeqeq: ERROR, //必须使用全等
-    'brace-style': [ERROR, '1tbs'], //大括号风格
-    quotes: [ERROR, 'single'], //引号类型
-    semi: [ERROR, 'always'], //语句强制分号结尾
-    'space-infix-ops': ERROR, //中缀操作符周围要不要有空格
-    'no-param-reassign': OFF, //不允许对函数的形参进行赋值
-    'prefer-spread': ERROR, //首选展开运算
-    'comma-dangle': OFF, //不允许或强制在对象字面量或者数组属性的结尾使用逗号
-    'padded-blocks': OFF, //规定代码块前后是否要加空行
-    'prefer-const': OFF,
+    semi: [ERROR, 'always'],
+    'space-infix-ops': ERROR,
+    'prefer-spread': ERROR,
     'no-multi-spaces': ERROR,
-    'no-var': OFF,
-    'one-var': OFF,
     'class-methods-use-this': WARNING,
-    'no-unused-expressions': [ERROR, { allowShortCircuit: true }],
     'arrow-parens': [ERROR, 'as-needed'],
-    'no-mixed-operators': OFF,
-    /**
-     * https://github.com/airbnb/javascript/tree/master/react
-     */
-    'react/prefer-es6-class': [WARNING, 'always'], //使用 class extends React.Component
-    'react/jsx-pascal-case': ERROR, //骆驼式命名
-    'react/jsx-closing-bracket-location': ERROR, //JSX语法缩进/格式
-    'react/jsx-curly-spacing': ERROR, //JSX {} 引用括号里两边加空格
-    'react/jsx-boolean-value': [OFF, 'always'], //如果属性值为 true, 可以直接省略
-    'jsx-quotes': [ERROR, 'prefer-double'], //JSX属性值总是使用双引号(")
-    'react/no-string-refs': ERROR, //Refs里使用回调函数
-    'react/jsx-wrap-multilines': ERROR, //多行的JSX标签写在 ()里
-    'react/self-closing-comp': ERROR, //没有子元素的标签来说总是自己关闭标签
-    'react/jsx-no-bind': ERROR, //当在 render() 里使用事件处理方法时，提前在构造函数里把 this 绑定上去
-    'react/no-is-mounted': ERROR, //不要再使用 isMounted
-    'react/prop-types': [ERROR, { ignore: ['children', 'className', 'style'] }],
-    'jsx-a11y/href-no-hash': OFF,
-    'jsx-a11y/label-has-for': OFF,
-    'react/jsx-filename-extension': OFF,
-    'react/prefer-stateless-function': OFF,
-    'react/require-default-props': OFF,
-    'react/forbid-prop-types': OFF
+    '@typescript-eslint/no-unused-vars': ERROR,
+    '@typescript-eslint/no-explicit-any': OFF,
+    '@typescript-eslint/explicit-function-return-type': OFF,
+    '@typescript-eslint/explicit-member-accessibility': OFF,
+    '@typescript-eslint/no-namespace': OFF,
+    '@typescript-eslint/explicit-module-boundary-types': OFF,
+    'react/display-name': OFF
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
   }
 };

.gitignore

@@ -38,6 +38,5 @@ node_modules
 build
 lib
 
-.tern-project
+dist
 assets
-yarn.lock

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  singleQuote: true,
+  arrowParens: 'avoid',
+  trailingComma: 'none'
+};

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Simon Guo
+
+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:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,113 +1,110 @@
 # react-code-view
 
-English | [中文版][readm-cn]
-
-## Why use this component?
-
-Let the code in Markdown run in real time, why is there such a need?
-
-In our front-end team, technical-related documents are written in Markdown. There are often a lot of sample code in the documentation. We hope that when you read the documentation, you can run the sample code to see the rendering interface.
-
-## What are the requirements?
-
-- Let the code in Markdown run and preview.
-- The code can be edited online.
-- Does not affect the layout of the entire document stream.
-- Support React, support code highlighting.
-- Babel can be configured.
-
-After understanding the requirements, I wrote a React component to satisfy these functions, [`react-code-view`](https://github.com/simonguo/react-code-view) , first look at the preview:
+Let the React code in Markdown be rendered to the page, and support online editing.
 
 ![preview](https://user-images.githubusercontent.com/1203827/44707274-a30c0f80-aad6-11e8-8cc5-9cf7daf4d9e2.gif)
 
-Preview: https://simonguo.github.io/react-code-view/
-
-## Principle of implementation
-
-- Parse the Markdown document with `markdown-loader` and `html-loader`.
-- Take the code out of the regular expression and give it to `codemirror`
-- Compile the code in `codemirror` through babel and render it to the specified container via `ReactDOM.render` .
-
 ## Install
 
 ```
 npm install react-code-view
 ```
 
-### Configure webpack .
-
-Support for `markdown-loader` needs to be added in webpack. Need to install:
-
-```
-npm install html-loader --save-dev
-npm install markdown-loader@5.0.0 --save-dev
-npm install react-markdown-reader@1.2.0 --save-dev
-```
-
-`webpack.config.js`
+### Configure Webpack
 
 ```js
+// webpack.config.js
+export default {
+  module: {
+    rules: [
+      {
+        test: /\.md$/,
+        loader: 'react-code-view/webpack-md-loader'
+      }
+    ]
+  }
+};
+```
 
-const markdownRenderer = require('react-markdown-reader').renderer;
+#### Options
 
-...
+```json
 {
-  test: /\.md$/,
-  use: [{
-    loader: 'html-loader'
-  }, {
-    loader: 'markdown-loader',
-    options: {
-      renderer: markdownRenderer(/**languages:Array<string>**/)
-    }
-  }]
+  "parseLanguages": [
+    // Supported languages for highlight.js
+    // default: "javascript", "bash", "xml", "css", "markdown", "less", "typescript"
+    // See https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md
+  ],
+  "htmlOptions": {
+    // HTML Loader options
+    // See https://github.com/webpack-contrib/html-loader#options
+  },
+  "markedOptions": {
+    // Pass options to marked
+    // See https://marked.js.org/using_advanced#options
+  }
 }
 ```
 
-languages 默认值：`["javascript", "bash", "xml", "css", "markdown", "less"]`;
-
-### Add Babel
+**webpack.config.js**
 
-The sample code usually uses `ES2015+`, `React`, etc., and needs to compile the code in real time, so introduce `Babel` in `HTML`:
+```js
 
-```html
-<script
-  type="text/javascript"
-  src="//cdn.staticfile.org/babel-standalone/6.24.0/babel.min.js"
-></script>
+export default {
+  module: {
+    rules: [
+      {
+        test: /\.md$/,
+        use:[
+          loader: 'react-code-view/webpack-md-loader',
+          options:{
+            parseLanguages: ['typescript','rust']
+          }
+        ]
+      }
+    ]
+  }
+};
 ```
 
-> If `cdn.staticfile.org` is not well accessed in your area, you can change other CDN.
-
-## Example
+## Usage
 
 ```js
 import CodeView from 'react-code-view';
-import 'react-code-view/lib/less/index.less';
-
 import { Button } from 'rsuite';
 
-<CodeView dependencies={{ Button }}>{require('./example.md')}</CodeView>;
+import 'react-code-view/styles/react-code-view.css';
+
+return (
+  <CodeView
+    dependencies={{
+      Button
+    }}
+  >
+    {require('./example.md')}
+  </CodeView>
+);
 ```
 
-The source code is uniformly written in markdown, reference:
-[example.md](https://raw.githubusercontent.com/simonguo/react-code-view/master/docs/example.md)
-
-> The important thing to note here is that the code that needs to be run must be placed in `<!--start-code-->` and `<!--end-code-->` between.
-
-## API
+The source code is written in markdown, refer to [example.md](https://raw.githubusercontent.com/simonguo/react-code-view/master/docs/example.md)
 
-| Name                  | Type     | Default value                               | Description                                       |
-| --------------------- | -------- | ------------------------------------------- | ------------------------------------------------- |
-| babelTransformOptions | Object   | { presets: ['stage-0', 'react', 'es2015'] } | Babel configuration parameters [options][babeljs] |
-| dependencies          | Object   |                                             | Dependent components.                             |
-| renderToolbar         | Function |                                             | Custom toolbar.                                   |
-| showCode              | boolean  | true                                        | Display code.                                     |
-| theme                 | string   | 'light'                                     | Theme, options `light` and `dark`.                |
+> Note: The code to be rendered must be placed between `<!--start-code-->` and `<!--end-code-->`
 
-## Who is using?
+## Props
 
-- [React Suite](https://rsuitejs.com/)
+### `<CodeView>`
 
-[babeljs]: https://babeljs.io/docs/usage/api/#options
-[readm-cn]: https://github.com/simonguo/react-code-view/blob/master/README_zh-CN.md
+| Name           | Type                              | Default value           | Description                                                               |
+| -------------- | --------------------------------- | ----------------------- | ------------------------------------------------------------------------- |
+| afterCompile   | (code: string) => string          |                         | Executed after compiling the code                                         |
+| beforeCompile  | (code: string) => string          |                         | Executed before compiling the code                                        |
+| children       | any                               |                         | The code to be rendered is executed. Usually imported via markdown-loader |
+| compiler       | (code: string) => string          |                         | A compiler that transforms the code. Use swc.transformSync by default     |
+| dependencies   | object                            |                         | Dependent objects required by the executed code                           |
+| editable       | boolean                           | false                   | Renders a code editor that can modify the source code                     |
+| editor         | object                            |                         | Editor properties                                                         |
+| onChange       | (code?: string) => void           |                         | Callback triggered after code change                                      |
+| renderToolbar  | (buttons: ReactNode) => ReactNode |                         | Customize the rendering toolbar                                           |
+| sourceCode     | string                            |                         | The code to be rendered is executed                                       |
+| theme          | 'light' , 'dark'                  | 'light'                 | Code editor theme, applied to CodeMirror                                  |
+| compileOptions | object                            | defaultTransformOptions | swc configuration https://swc.rs/docs/configuration/compilation           |