v-code-diff 0.3.12 → 1.0.0-alpha.1

package/package.json

@@ -1,43 +1,44 @@
 {
   "name": "v-code-diff",
-  "description": "A diff plugin of vue, support vue2 and vue3",
-  "version": "0.3.12",
-  "scripts": {
-    "dev": "pnpm switch:3 && vite",
-    "dev:2": "pnpm switch:2 && cd ./dev/vue2.7 && pnpm dev",
-    "build": "npx rimraf dist && rollup --config rollup.config.js",
-    "switch:3": "vue-demi-switch 3",
-    "switch:2": "vue-demi-switch 2.7 vue2",
-    "serve": "vite preview",
-    "commit": "git-cz",
-    "gh-pages": "vite build --base=/v-code-diff/ && gh-pages -d ./pages"
+  "version": "1.0.0-alpha.1",
+  "description": "template component for vue-demi, can dev and build",
+  "main": "dist/index.cjs",
+  "module": "dist/index.es.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    }
   },
-  "main": "dist/v-code-diff.cjs.js",
-  "module": "dist/v-code-diff.esm.js",
-  "unpkg": "dist/v-code-diff.umd.js",
   "files": [
+    "scripts",
     "dist",
-    "src/lib"
-  ],
-  "types": "dist/index.d.ts",
-  "keywords": [
-    "vue",
-    "vue3",
-    "code",
-    "diff"
+    "src",
+    "types"
   ],
+  "scripts": {
+    "build": "npm run clean && run-s build:*",
+    "build:2": "vue-demi-switch 2 vue2 && pnpm --filter vue2-playground build",
+    "build:2.7": "vue-demi-switch 2.7 vue2 && pnpm --filter vue2.7-playground build",
+    "build:3": "vue-demi-switch 3 vue3 && pnpm --filter vue3-playground build",
+    "clean": "rimraf ./dist",
+    "dev:2": "vue-demi-switch 2 vue2 && pnpm --filter vue2-playground dev",
+    "dev:2.7": "vue-demi-switch 2.7 vue2 && pnpm --filter vue2.7-playground dev",
+    "dev:3": "vue-demi-switch 3 vue3 && pnpm --filter vue3-playground dev",
+    "lint:fix": "eslint . --ext .vue,.js,.jsx,.ts,.tsx --fix --ignore-path .gitignore",
+    "postinstall": "node scripts/postinstall.js",
+    "prepublishOnly": "npm run build",
+    "release": "bumpp --no-commit --no-push --no-tag --preid alpha && npm publish --tag alpha"
+  },
   "author": "Shimada666<649940882@qq.com>",
   "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/Shimada666/v-code-diff/issues"
-  },
   "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Shimada666/v-code-diff.git"
+    "type": "git"
   },
   "peerDependencies": {
-    "@vue/composition-api": "^1.0.0-beta.1",
-    "vue": "^2.0.0 || >=3.0.0-rc.0"
+    "@vue/composition-api": "^1.4.9",
+    "vue": "^2.6.0 || >=3.0.0"
   },
   "peerDependenciesMeta": {
     "@vue/composition-api": {
@@ -46,67 +47,23 @@
   },
   "dependencies": {
     "diff": "^5.0.0",
-    "diff2html": "^3.4.5",
-    "highlight.js": "^10.5.0",
-    "vue-demi": "^0.13.6"
+    "highlight.js": "^11.6.0",
+    "vue-demi": "latest"
   },
   "devDependencies": {
-    "@ant-design-vue/use": "^0.0.1-alpha.10",
-    "@commitlint/cli": "^8.2.0",
-    "@commitlint/config-conventional": "^8.2.0",
-    "@rollup/plugin-node-resolve": "^11.1.1",
+    "@antfu/eslint-config": "^0.34.0",
     "@types/diff": "^5.0.0",
-    "@types/node": "^14.14.41",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
-    "@vitejs/plugin-legacy": "^1.5.3",
-    "@vitejs/plugin-vue": "^1.6.2",
-    "@vitejs/plugin-vue-jsx": "^1.1.8",
-    "@vue/eslint-config-standard": "^4.0.0",
-    "@vue/eslint-config-typescript": "^4.0.0",
-    "@vueuse/core": "^4.11.2",
-    "ant-design-vue": "^2.2.7",
-    "body-parser": "^1.19.0",
-    "commitizen": "^4.2.3",
-    "conventional-changelog-cli": "^2.1.1",
-    "cross-env": "^7.0.3",
-    "dotenv": "^8.2.0",
-    "eslint": "^7.22.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-vue": "^7.17.0",
-    "gh-pages": "^3.2.1",
-    "lint-staged": "^10.5.4",
-    "rollup": "^2.38.5",
-    "rollup-plugin-styles": "^3.14.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.29.0",
-    "rollup-plugin-vue": "^6.0.0",
-    "sass": "^1.35.1",
-    "stylelint": "^13.12.0",
-    "stylelint-config-prettier": "^8.0.2",
-    "stylelint-config-standard": "^21.0.0",
-    "stylelint-order": "^4.1.0",
-    "typescript": "^4.4.2",
-    "vite": "^2.5.6",
-    "vue": "^3.2.11",
-    "vue-eslint-parser": "^7.11.0",
-    "vue-tsc": "^0.3.0",
+    "@types/node": "^18.11.18",
+    "bumpp": "^8.2.1",
+    "eslint": "^8.31.0",
+    "npm-run-all": "^4.1.5",
+    "rimraf": "^3.0.2",
+    "sass": "^1.57.1",
+    "typescript": "~4.7.4",
+    "vite": "^4.0.4",
+    "vite-plugin-css-injected-by-js": "^2.4.0",
+    "vue-tsc": "^0.40.13",
     "vue2": "npm:vue@2",
-    "yorkie": "^2.0.0"
-  },
-  "gitHooks": {
-    "pre-commit": "lint-staged",
-    "commit-msg": "commitlint -e"
-  },
-  "config": {
-    "commitizen": {
-      "path": "cz-conventional-changelog"
-    }
-  },
-  "lint-staged": {
-    "*.{js,vue,ts}": [
-      "eslint  --ext .ts,.vue,.tsx src",
-      "git add"
-    ]
+    "vue3": "npm:vue@3"
   }
 }

package/scripts/postinstall.js

@@ -0,0 +1,18 @@
+const { switchVersion, loadModule } = require('./utils')
+
+const Vue = loadModule('vue')
+
+if (!Vue || typeof Vue.version !== 'string')
+  console.warn('[vue-demi-sfc-component-template] Vue is not found. Please run "npm install vue" to install.')
+
+else if (Vue.version.startsWith('2.7.'))
+  switchVersion('2.7')
+
+else if (Vue.version.startsWith('2.'))
+  switchVersion('2')
+
+else if (Vue.version.startsWith('3.'))
+  switchVersion('3')
+
+else
+  console.warn(`[vue-demi-sfc-component-template] Vue version v${Vue.version} is not suppported.`)

package/scripts/utils.js

@@ -0,0 +1,36 @@
+const fs = require('fs')
+const path = require('path')
+
+const dir = path.resolve(__dirname, '..', 'dist')
+
+function loadModule(name) {
+  try {
+    return require(name)
+  }
+  catch (e) {
+    return undefined
+  }
+}
+
+function copy(name, version, vue) {
+  vue = vue || 'vue'
+  const src = path.join(dir, `v${version}`, name)
+  const dest = path.join(dir, name)
+  let content = fs.readFileSync(src, 'utf-8')
+  content = content.replace(/'vue'/g, `'${vue}'`)
+  // unlink for pnpm, #92
+  try {
+    fs.unlinkSync(dest)
+  }
+  catch (error) {
+  }
+  fs.writeFileSync(dest, content, 'utf-8')
+}
+
+function switchVersion(version, vue) {
+  copy('index.es.js', version, vue)
+  copy('index.cjs.js', version, vue)
+}
+
+module.exports.loadModule = loadModule
+module.exports.switchVersion = switchVersion

package/src/CodeDiff.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue-demi'
+import { createSplitDiff, createUnifiedDiff } from './utils'
+import UnifiedViewer from './unified/UnifiedViewer.vue'
+import SplitViewer from './split/SplitViewer.vue'
+
+import './style.scss'
+import 'highlight.js/scss/vs.scss'
+
+interface Props {
+  newString: string
+  oldString: string
+  language?: string
+  context?: number
+  diffStyle?: 'word' | 'char'
+  outputFormat?: 'line-by-line' | 'side-by-side'
+  trim?: boolean
+  noDiffLineFeed?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  language: 'plaintext',
+  context: 10,
+  diffStyle: 'word',
+  outputFormat: 'line-by-line',
+  trim: false,
+  noDiffLineFeed: false,
+})
+
+const isUnifiedViewer = computed(() => props.outputFormat === 'line-by-line')
+
+const oldString = computed(() => {
+  const value = props.trim ? props.oldString.trim() : props.oldString
+  return props.noDiffLineFeed ? value.replace(/(\r\n)/g, '\n') : value
+})
+const newString = computed(() => {
+  const value = props.trim ? props.newString.trim() : props.newString
+  return props.noDiffLineFeed ? value.replace(/(\r\n)/g, '\n') : value
+})
+
+const diffChange = computed(() =>
+  isUnifiedViewer.value
+    ? createUnifiedDiff(oldString.value, newString.value, props.language, props.diffStyle, props.context)
+    : createSplitDiff(oldString.value, newString.value, props.language, props.diffStyle, props.context),
+)
+</script>
+
+<template>
+  <div class="code-diff-view">
+    <UnifiedViewer v-if="isUnifiedViewer" :diff-change="diffChange" />
+    <SplitViewer v-else :diff-change="diffChange" />
+  </div>
+</template>
+
+<style lang="scss">
+
+</style>

package/src/highlight.ts

@@ -0,0 +1,23 @@
+import hljs from 'highlight.js/lib/core'
+
+import xml from 'highlight.js/lib/languages/xml'
+import javascript from 'highlight.js/lib/languages/javascript'
+import json from 'highlight.js/lib/languages/json'
+import yaml from 'highlight.js/lib/languages/yaml'
+import plaintext from 'highlight.js/lib/languages/plaintext'
+import python from 'highlight.js/lib/languages/python'
+import java from 'highlight.js/lib/languages/java'
+import bash from 'highlight.js/lib/languages/bash'
+import sql from 'highlight.js/lib/languages/sql'
+
+hljs.registerLanguage('xml', xml)
+hljs.registerLanguage('javascript', javascript)
+hljs.registerLanguage('json', json)
+hljs.registerLanguage('yaml', yaml)
+hljs.registerLanguage('plaintext', plaintext)
+hljs.registerLanguage('python', python)
+hljs.registerLanguage('java', java)
+hljs.registerLanguage('bash', bash)
+hljs.registerLanguage('sql', sql)
+
+export default hljs

package/src/index.ts

@@ -0,0 +1,15 @@
+import CodeDiff from './CodeDiff.vue'
+import hljs from './highlight'
+
+const install = (app: any) => {
+  app.component('CodeDiff', CodeDiff)
+}
+
+export {
+  CodeDiff,
+}
+
+export default {
+  install,
+  hljs,
+}

package/src/split/SplitLine.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { DiffType } from '../types'
+import type { SplitDiffLine } from '../types'
+
+const props = defineProps<{
+  splitLine: SplitDiffLine
+}>()
+
+const getCodeMarker = (type: DiffType) => {
+  if (type === DiffType.DELETE)
+    return '-'
+  if (type === DiffType.ADD)
+    return '+'
+  return ''
+}
+</script>
+
+<template>
+  <tr v-if="splitLine.fold">
+    <td class="blob-num blob-num-empty empty-cell" colspan="1">
+      >
+    </td>
+    <td class="blob-code blob-code-empty empty-cell" colspan="3" align="left">
+      ⋯
+    </td>
+  </tr>
+  <tr v-else>
+    <template v-for="line in [splitLine.left, splitLine.right]">
+      <!-- eslint-disable -->
+      <template v-if="line.type === DiffType.EMPTY">
+        <td class="blob-num blob-num-empty empty-cell" />
+        <td class="blob-code blob-code-empty empty-cell" />
+      </template>
+      <template v-else>
+        <td
+          class="blob-num"
+          :class="{
+            'blob-num-deletion': line.type === DiffType.DELETE,
+            'blob-num-addition': line.type === DiffType.ADD,
+            'blob-num-context': line.type === DiffType.EQUAL,
+          }"
+        >
+          {{ line.num }}
+        </td>
+        <td
+          class="blob-code"
+          :class="{
+            'blob-code-deletion': line.type === DiffType.DELETE,
+            'blob-code-addition': line.type === DiffType.ADD,
+            'blob-code-context': line.type === DiffType.EQUAL,
+          }"
+        >
+          <span
+            class="blob-code-inner blob-code-marker"
+            :data-code-marker="getCodeMarker(line.type)"
+            v-html="line.code"
+          />
+        </td>
+      </template>
+      <!-- eslint-enable -->
+    </template>
+  </tr>
+</template>
+
+<style lang="scss">
+</style>

package/src/split/SplitViewer.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { SplitViewerChange } from '../types'
+import SplitLine from './SplitLine.vue'
+
+const props = defineProps<{
+  diffChange: SplitViewerChange
+}>()
+</script>
+
+<template>
+  <div class="file">
+    <table class="file-diff-split diff-table">
+      <colgroup>
+        <col width="44">
+        <col>
+        <col width="44">
+        <col>
+      </colgroup>
+      <tbody>
+        <SplitLine v-for="(item, index) in diffChange" :key="index" :split-line="item" />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped></style>

package/src/style.scss

@@ -0,0 +1,114 @@
+@import "./var";
+
+.code-diff-view {
+  * {
+    position: static;
+  }
+
+  .file {
+    position: relative;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    border: 1px solid var(--color-border-default, #ddd);
+    border-radius: 2px;
+
+    table {
+      border-spacing: 0;
+    }
+    .diff-table {
+      width: 100%;
+
+      .blob-num {
+        position: relative;
+        width: 1%;
+        min-width: 50px;
+        padding-right: 10px;
+        padding-left: 10px;
+        font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+        font-size: 12px;
+        line-height: 20px;
+        color: var(--color-fg-subtle);
+        text-align: right;
+        white-space: nowrap;
+        vertical-align: top;
+        cursor: pointer;
+        -webkit-user-select: none;
+        user-select: none;
+      }
+      .blob-num-deletion {
+        color: var(--color-diff-blob-deletion-num-text);
+        background-color: var(--color-diff-blob-deletion-num-bg);
+        border-color: var(--color-danger-emphasis);
+      }
+      .blob-num-addition {
+        color: var(--color-diff-blob-addition-num-text);
+        background-color: var(--color-diff-blob-addition-num-bg);
+        border-color: var(--color-success-emphasis);
+      }
+
+      .blob-code {
+        position: relative;
+        padding-right: 10px;
+        padding-left: 10px;
+        line-height: 20px;
+        vertical-align: top;
+        .blob-code-inner {
+          display: table-cell;
+          overflow: visible;
+          font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+          font-size: 12px;
+          color: var(--color-fg-default);
+          word-wrap: anywhere;
+          white-space: pre-wrap;
+        }
+      }
+      .blob-code-deletion {
+        background-color: var(--color-diff-blob-deletion-line-bg);
+        outline: 1px dashed transparent;
+
+        .x {
+          color: var(--color-diff-blob-deletion-fg);
+          background-color: var(--color-diff-blob-deletion-word-bg);
+        }
+      }
+      .blob-code-addition {
+        background-color: var(--color-diff-blob-addition-line-bg);
+        outline: 1px dotted transparent;
+
+        .x {
+          color: var(--color-diff-blob-addition-fg);
+          background-color: var(--color-diff-blob-addition-word-bg);
+        }
+      }
+
+      .blob-code-context,
+      .blob-code-addition,
+      .blob-code-deletion {
+        padding-left: 22px !important;
+      }
+
+      .blob-code-marker::before {
+        position: absolute;
+        top: 1px;
+        left: 8px;
+        padding-right: 8px;
+        content: attr(data-code-marker);
+      }
+    }
+
+    .file-diff-split {
+      table-layout: fixed;
+
+      .blob-code + .blob-num {
+        border-left: 1px solid var(--color-border-muted);
+      }
+    }
+
+    .empty-cell {
+      cursor: default;
+      background-color: var(--color-neutral-subtle);
+      border-right-color: var(--color-border-muted);
+    }
+  }
+
+}

package/src/types.ts

@@ -0,0 +1,29 @@
+export const enum DiffType {
+  EQUAL = 'equal',
+  DELETE = 'removed',
+  ADD = 'added',
+  EMPTY = 'empty',
+}
+
+export interface DiffLine {
+  type: DiffType
+  code?: string
+  num?: number
+}
+
+export interface SplitDiffLine {
+  fold?: boolean
+  left: DiffLine
+  right: DiffLine
+}
+
+export interface UnifiedLine {
+  fold?: boolean
+  type: DiffType
+  code: string
+  delNum?: number
+  addNum?: number
+}
+
+export type SplitViewerChange = SplitDiffLine[]
+export type UnifiedViewerChange = UnifiedLine[]

package/src/unified/UnifiedLine.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import type { UnifiedLine } from '../types'
+import { DiffType } from '../types'
+
+const props = defineProps<{
+  line: UnifiedLine
+}>()
+
+const getCodeMarker = (type: DiffType) => {
+  if (type === DiffType.DELETE)
+    return '-'
+  if (type === DiffType.ADD)
+    return '+'
+  return ''
+}
+</script>
+
+<template>
+  <tr v-if="line.fold">
+    <td class="blob-num blob-num-empty empty-cell">
+      >
+    </td>
+    <td class="blob-num blob-num-empty empty-cell">
+      >
+    </td>
+    <td class="blob-code blob-code-empty empty-cell" align="left">
+      ⋯
+    </td>
+  </tr>
+  <tr v-else>
+    <td
+      class="blob-num"
+      :class="{
+        'blob-num-deletion': line.type === DiffType.DELETE,
+        'blob-num-addition': line.type === DiffType.ADD,
+        'blob-num-context': line.type === DiffType.EQUAL,
+      }"
+    >
+      {{ line.delNum }}
+    </td>
+    <td
+      class="blob-num"
+      :class="{
+        'blob-num-deletion': line.type === DiffType.DELETE,
+        'blob-num-addition': line.type === DiffType.ADD,
+        'blob-num-context': line.type === DiffType.EQUAL,
+      }"
+    >
+      {{ line.addNum }}
+    </td>
+    <td
+      class="blob-code"
+      :class="{
+        'blob-code-deletion': line.type === DiffType.DELETE,
+        'blob-code-addition': line.type === DiffType.ADD,
+        'blob-code-context': line.type === DiffType.EQUAL,
+      }"
+    >
+      <span class="blob-code-inner blob-code-marker" :data-code-marker="getCodeMarker(line.type)" v-html="line.code" />
+    </td>
+  </tr>
+</template>

package/src/unified/UnifiedViewer.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { UnifiedViewerChange } from '../types'
+import UnifiedLine from './UnifiedLine.vue'
+
+const props = defineProps<{
+  diffChange: UnifiedViewerChange
+}>()
+</script>
+
+<template>
+  <div class="file">
+    <table class="diff-table">
+      <tbody>
+        <UnifiedLine v-for="(item, index) in diffChange" :key="index" :line="item" />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style scoped></style>