Merge pull request #19 from andurils/dev

release(v0.5.0): typescript rewrite

Author: andurils

.eslintrc.js

@@ -3,9 +3,16 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
+  extends: [
+    "eslint:recommended",
+    "plugin:vue/essential",
+    "@vue/eslint-config-typescript",
+    "@vue/eslint-config-prettier",
+  ],
   parserOptions: {
-    parser: "babel-eslint",
+    ecmaVersion: 2020,
+    parser: "@typescript-eslint/parser",
+    warnOnUnsupportedTypeScriptVersion: false, // Version of TypeScript not officially supported
   },
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",

.gitignore

@@ -13,7 +13,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
+*pnpm-debug.log*
 
 # Editor directories and files
 .idea
@@ -23,7 +23,3 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
-
-
-yarn.lock
-package-lock.json

INSPIRED.zh-CN.md

@@ -1,4 +1,6 @@
-# Inspired By
+# 💡 灵感
+
+> 感谢以下以下开源项目、技术分享！
 
 ## playground
 
@@ -8,6 +10,12 @@
 <https://github.com/vuejs/repl>  
 <https://github.com/wheatjs/vue-hako>  
 
+## vue2.7
+
+<https://blog.vuejs.org/posts/vue-2-7-naruto.html>
+
+<https://juejin.cn/post/7075874786110341133>
+
 ## react-code-view
 
 [simonguo/react-code-view](https://github.com/simonguo/react-code-view)
@@ -38,7 +46,7 @@
 
 [vue-cli3开发组件库](https://blog.csdn.net/u010622874/article/details/103312051)
 
-[vue-cli4 全面配置](https://github.com/andurils/vue-cli4-config)
+[vue-cli4 全面配置](https://github.com/staven630/vue-cli4-config)
 
 [vue-cli css 预处理器](https://cli.vuejs.org/zh/guide/css.html#预处理器)
 
@@ -68,19 +76,22 @@ cnpm i --save-dev markdown-it markdown-it-anchor markdown-it-chain markdown-it-c
 
 ## css 预处理器
 
-[sassmeister](https://www.sassmeister.com/)
-
-[tiny-sass-compiler](https://github.com/wizardpisces/tiny-sass-compiler)
+[sass-loader](https://github.com/webpack-contrib/sass-loader/blob/master/src/index.js)
 
-[tiny-sass-compiler demo](https://wizardpisces.github.io/sass)
+[less-loader](https://github.com/webpack-contrib/less-loader/blob/master/src/index.js)
 
-[webpack-contrib/less-loader](https://github.com/webpack-contrib/less-loader/blob/master/src/index.js)
+[stylus-loader](https://github.com/webpack-contrib/stylus-loader/blob/master/src/index.js)
 
 [stylus-lang](https://stylus-lang.com/)
 
----
+[sassmeister](https://www.sassmeister.com/)
+
+## commit lint
+
+<https://commitlint.js.org/>
+[Commitizen](https://zj-git-guide.readthedocs.io/zh_CN/latest/message/%5BCommitizen%5D%E4%BF%A1%E6%81%AF%E4%BA%A4%E4%BA%92%E5%B7%A5%E5%85%B7/)
+
 
-# Tools
 
 ## badge
 
@@ -92,3 +103,5 @@ cnpm i --save-dev markdown-it markdown-it-anchor markdown-it-chain markdown-it-c
 
 <https://svgporn.com/>
 <https://simpleicons.org/>
+
+

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://andurils.github.io/vue-code-view/">
-    <img width="200" src="https://iconfont.alicdn.com/t/5602941b-e109-4b22-99c5-21b0b041f234.png">
+    <img width="200" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/adee625fddf74e8db0225890aee88059~tplv-k3u1fbpfcp-watermark.image">
   </a>
 </p>
 
@@ -22,7 +22,7 @@ So can there be such a component that can support editing code in the page, edit
 
 Special thanks to the component [react-code-view](https://github.com/simonguo/react-code-view), based on which the vue version of the component was written! Using this component, you can edit the running code and preview the effect in real time by using the multi-sample code in the `vue` page or the `markdown` document.
 
-## Online Demo
+## ⚡ Online Demo
 
 ![示例][preview-ol-v03]  
 
@@ -78,28 +78,30 @@ new Vue({
 }).$mount("#app");
 ```
 
-## API
+## 📚 API
 
-### Attributes
+### Props
 
-| 参数          | 说明                         | 类型              | 默认值 | 版本 |
-| ------------- | ---------------------------- | ----------------- | ------ | ---- |
-| themeMode         | code editor theme mode,default `light`  | `` \| `dark` | `` |      |
+| Property | Description  | Type | Default | Version |
+| --- | ----- | ---- | ----- | ---- |
+| themeMode   | code editor theme mode,default `light`  | `` \| `dark` | `` |      |
 | showCode      | show the code editor ,  only  `layout` value is `top` takes effect          | boolean           | false  |      |
 | source        | source code               | string            | -      |      |
-| layout        | render view layout             |  `top` \| `right`  \| `left`  | `top` | `0.4.0` |
+| layout        | render view layout             |  `top` \| `right`  \| `left`  | `top` | `0.4.0+` |
 
-## Changelog
+<!-- ### Events -->
+
+## 📋 Changelog
 
 Detailed changes for each release are documented in the [release notes](./CHANGELOG.zh-CN.md).
 
 ## 💡 Inspired
 
-[links](./INSPIRED.zh-CN.md).
+Inspired by [shared links](./INSPIRED.zh-CN.md).
 
-## License
+## 💳 License
 
-VCV is licensed under the terms of the [MIT License](./LICENSE)
+VCV is licensed under the terms of the [MIT License](./LICENSE).
 
 Copyright (c) 2021-present Anduril
 

README.zh-CN.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="https://andurils.github.io/vue-code-view/">
-    <img width="200" src="https://iconfont.alicdn.com/t/5602941b-e109-4b22-99c5-21b0b041f234.png">
+    <img width="200" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/adee625fddf74e8db0225890aee88059~tplv-k3u1fbpfcp-watermark.image"> 
   </a>
 </p>
 
@@ -22,7 +22,7 @@
 
 特别感谢组件 [react-code-view](https://github.com/simonguo/react-code-view)，基于此编写了vue 版本的组件！使用此组件在 `vue` 页面还是 `markdown` 文档中的多示例代码，都可以实时编辑运行代码、预览效果。
 
-## 在线预览
+## ⚡ 在线预览
 
 ![示例][preview-ol-v03]  
 
@@ -78,28 +78,30 @@ new Vue({
 }).$mount("#app");
 ```
 
-## API
+## 📚 API
 
-### Attributes
+### Props
 
-| 参数          | 说明                         | 类型              | 默认值 | 版本 |
-| ------------- | ---------------------------- | ----------------- | ------ | ---- |
+| 参数  | 说明   | 类型     | 默认值 | 版本 |
+| --- | ----- | ---- | ----- | ---- |
 | themeMode      | 主题theme mode,默认`light`,支持 `dark` | `` \| `dark` | `` |      |
 | showCode      | 是否显示代码编辑器,只有在`layout`值为`top`生效           | boolean           | false  |      |
 | source        | 运行示例源码                 | string            | -      |      |
 | layout        | render 视图布局             |  `top` \| `right`  \| `left`  | `top` | `0.4.0`|
 
-## 更新日志
+<!-- ### Events -->
 
-Detailed changes for each release are documented in the [release notes](./CHANGELOG.zh-CN.md).
+## 📋 更新日志
 
-## 💡 Inspired
+每个版本的详细更改记录在[发行说明](./CHANGELOG.zh-CN.md)。
 
-[links](./INSPIRED.zh-CN.md).
+## 💡 灵感
 
-## License
+灵感来自源于以下[分享](./INSPIRED.zh-CN.md)。
 
-VCV is licensed under the terms of the [MIT License](./LICENSE)
+## 💳 License
+
+`VCV` is licensed under the terms of the [MIT License](./LICENSE) .
 
 Copyright (c) 2021-present Anduril
 

build/md-loader/index.js renamed to build/markdown-loader/index.js

@@ -1,8 +1,8 @@
 const { escapeBackticks } = require("./util");
-const md = require("./config");
+const md = require("../markdown");
 
 module.exports = function (source) {
-  const content = md.render(source);
+  const content = md().render(source);
   const startTag = "<!--vcv-demo:";
   const startTagLen = startTag.length;
   const endTag = ":vcv-demo-->";
@@ -60,7 +60,7 @@ module.exports = function (source) {
 
   return `
     <template>
-      <section class="markdown api-container">
+      <section class="markdown-body">
         ${output.join("")}
       </section>
     </template>