Revert "vue 2 version of "@vue/repl" (#31)"

This reverts commit 65579f9.

Author: andurils

.env

@@ -0,0 +1,2 @@
+NODE_ENV = development 
+VUE_APP_PUBLIC_PATH = /

.env.deploy

@@ -0,0 +1,3 @@
+NODE_ENV = production 
+VUE_APP_PUBLIC_PATH = /vue-code-view
+VUE_APP_ENV = deploy

.env.play

@@ -0,0 +1,3 @@
+NODE_ENV = development
+VUE_APP_PUBLIC_PATH = /
+VUE_APP_ENV = play

.env.production

@@ -0,0 +1,3 @@
+NODE_ENV = production 
+VUE_APP_PUBLIC_PATH = /
+VUE_APP_ENV = pub

.eslintignore

@@ -0,0 +1,14 @@
+src/utils/popper.js
+src/utils/date.js 
+node_modules
+lib
+coverage
+deploy
+*.md
+*.scss
+*.woff
+*.ttf
+
+
+output.js
+examples/pages

.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:vue/essential",
+    "@vue/eslint-config-typescript",
+    "@vue/eslint-config-prettier",
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+    parser: "@typescript-eslint/parser",
+    warnOnUnsupportedTypeScriptVersion: false, // Version of TypeScript not officially supported
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-useless-escape": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-unused-vars": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
+};

.gitignore

@@ -1,22 +1,23 @@
-# Logs
-logs
-*.log
+.DS_Store
+node_modules
+/dist
+/lib/*.html
+/lib/*.html.gz
+/deploy
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
+*pnpm-debug.log*
 
 # Editor directories and files
-.vscode/*
-!.vscode/extensions.json
 .idea
-.DS_Store
+.vscode
 *.suo
 *.ntvs*
 *.njsproj

.npmignore

@@ -0,0 +1,24 @@
+# 忽略目录
+.vscode/
+examples/
+node_modules/
+public/
+build/
+src/
+dist/
+deploy/
+lib/*.html
+lib/*.html.gz
+
+
+# 忽略指定文件 
+.browserslistrc 
+.eslintignore 
+.prettierignore 
+.env
+.env.*
+*.js
+*.yml
+
+CHANGELOG.zh-CN.md
+INSPIRED.zh-CN.md

.prettierignore

@@ -0,0 +1,5 @@
+*.md
+
+node_modules
+lib
+output.js

.prettierrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  endOfLine: 'auto',
+};

.travis.yml

@@ -0,0 +1,20 @@
+language: node_js
+node_js: 14
+install:
+  - yarn 
+
+script: npm run deploy:build
+after_script: 
+  - mkdir temp_web 
+  - cd temp_web
+  - git clone --depth 1 -b gh-pages --single-branch https://${TravisCI_Token}@${GH_REF} && cd vue-code-view 
+  - echo 'copy && commit' 
+  - rm -rf js fonts
+  - cp -rf ../../deploy/** .
+  - git config user.name "${U_NAME}"
+  - git config user.email "${U_EMAIL}"
+  - git add -A .
+  - git commit -m ":construction_worker:- Build & Deploy by Travis CI"
+  - git push origin gh-pages  
+  - echo "DONE, Bye~"
+  - exit 0

README.md

@@ -14,21 +14,83 @@
 
 English | [简体中文](./README.zh-CN.md)
 
-Vue SFC REPL as a Vue 2.7 component.
+A lightweight code interaction component based on `vue 2.x`, which can edit, run and preview the code effect display in real time on the web page.
 
-## 💻 Simple Usage
+When reading docs that contain a lot of code, many project docs implement a `render` representation of the sample code via the `markdown loader`, but it is static. When we want to debug code, we generally need to open the local IDE or open online editor websites such as `codepen`, `codesandbox`, and it is also subject to whether the computer has a development environment installed or whether the network connection is smooth.
 
-```vue
-<script setup>
-import { Repl } from 'vue-code-view'
-import 'vue-code-view/style.css'
-</script>
+So can there be such a component that can support editing code in the page, edit, run and preview the code effect display in real time in the web page?
 
-<template>
-  <Repl />
-</template>
+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
+
+![示例][preview-ol-v03]  
+
+demo address: <https://andurils.github.io/vue-code-view/#/demo>
+
+`codesandbox` example: [vue-code-view-example](https://codesandbox.io/s/vue-code-view-example-forked-nivmw?fontsize=14&hidenavigation=1&theme=dark)
+
+## ✨ Features
+
+- 💻 Code can be edited online and preview the effect in real time.
+- 🎨 Support sample code highlighting, configure themes.
+- 🌈 Support `<style>` parsing and rendering.
+- 📑 Support `Markdown` file example rendering
+
+## 📦 Install
+
+```bash
+npm i vue-code-view
+# or
+yarn add vue-code-view
+```
+
+## 🔨 Configure
+
+Using `vue cli` requires configuration in the `vue.config.js` file, which supports the use of Vue builds that include the runtime compiler.
+
+```javascript
+module.exports = {
+  runtimeCompiler: true,
+  // or
+  chainWebpack: (config) => { 
+    config.resolve.alias
+      .set("vue$", "vue/dist/vue.esm.js");
+  },
+}; 
 ```
 
+## 💻 Usage
+
+Components are introduced in the entry file `main.js`, and there is no need to manually introduce styles.
+
+```javascript
+import Vue from "vue";
+import App from "./App.vue";
+import CodeView from "vue-code-view";
+
+Vue.use(CodeView);
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount("#app");
+```
+
+## 📚 API
+
+### Props
+
+| 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+` |
+
+<!-- ### Events -->
+
 ## 📋 Changelog
 
 Detailed changes for each release are documented in the [release notes](./CHANGELOG.zh-CN.md).
@@ -43,4 +105,7 @@ VCV is licensed under the terms of the [MIT License](./LICENSE).
 
 Copyright (c) 2021-present Anduril
 
+[preview-ol]: https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/912bf867ef4c44d3a716e4bf723573ac~tplv-k3u1fbpfcp-watermark.image?
+[preview-ol-v01]:https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e056aef106b04752bde86e5bc48434c9~tplv-k3u1fbpfcp-watermark.image?
+[preview-ol-v02]:https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4550d42d98084cf99fe333fadb3f5983~tplv-k3u1fbpfcp-watermark.image?
 [preview-ol-v03]:https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/987ab9814e314f92a244fdf6510e6224~tplv-k3u1fbpfcp-watermark.image?

api-extractor.json

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};

babel.config.js

@@ -0,0 +1,69 @@
+const { escapeBackticks } = require("./util");
+const md = require("../markdown");
+
+module.exports = function (source) {
+  const content = md().render(source);
+  const startTag = "<!--vcv-demo:";
+  const startTagLen = startTag.length;
+  const endTag = ":vcv-demo-->";
+  const endTagLen = endTag.length;
+
+  let componenetsString = "";
+  let id = 0;
+  let output = [];
+  let start = 0;
+
+  let commentStart = content.indexOf(startTag);
+  let commentEnd = content.indexOf(endTag, commentStart + startTagLen);
+  while (commentStart !== -1 && commentEnd !== -1) {
+    output.push(content.slice(start, commentStart));
+    const commentContent = content.slice(
+      commentStart + startTagLen,
+      commentEnd
+    );
+    const demoComponentName = `vcv${id}`;
+    // output.push(
+    //   `<template slot="source"><code-viewer :source="${demoComponentName}"></code-viewer></template>`
+    // ); // 使用slot插槽 运行组件
+    output.push(
+      `<template slot="source"><code-viewer :source="${demoComponentName}"></code-viewer></template>`
+    ); // 使用slot插槽 运行组件
+    // output.push(`<template slot="source"><${demoComponentName} /></template>`); // 使用slot插槽 运行组件
+    componenetsString += `${demoComponentName}: \`${escapeBackticks(
+      commentContent
+    )}\`,`;
+
+    id++;
+    start = commentEnd + endTagLen;
+    commentStart = content.indexOf(startTag, start);
+    commentEnd = content.indexOf(endTag, commentStart + startTagLen);
+  }
+
+  let pageScript = "";
+  if (componenetsString) {
+    pageScript = `<script>
+      export default {
+        name: 'component-doc', 
+        data() {
+          return {
+            ${componenetsString}
+          };
+        }, 
+      }
+    </script>`;
+  } else if (content.indexOf("<script>") === 0) {
+    start = content.indexOf("</script>") + "</script>".length;
+    pageScript = content.slice(0, start);
+  }
+
+  output.push(content.slice(start));
+
+  return `
+    <template>
+      <section class="markdown-body">
+        ${output.join("")}
+      </section>
+    </template>
+    ${pageScript}
+  `;
+};

build/markdown-loader/index.js

@@ -0,0 +1,13 @@
+// eslint-disable-next-line no-useless-escape
+var templateStringsEscaper = /\`/g;
+
+// 模板字符串  反引号转义
+function escapeBackticks(content) {
+  return content
+    .replace(templateStringsEscaper, "<--backticks-->")
+    .replace(/<\/script>/g, `<\\/script>`);
+}
+
+module.exports = {
+  escapeBackticks,
+};