Develop

README.md

@@ -3,24 +3,22 @@
 Vue diff viewer plugin for Vue@3  
 <a href="https://hoiheart.github.io/vue-diff/demo/index.html" target="_blank">demo</a>
 
-> ⚠️ This plugin does not support Vue2
-
 ## Table of Contents
 
-* [Table of Contents](#table-of-contents)
-* [Introduction](#introduction)
-* [Features](#features)
-* [Install plugin](#install-plugin)
-  + [Options](#options)
-* [Usage diff viewer](#usage-diff-viewer)
-  + [Settings with default props](#settings-with-default-props)
-  + [Settings with full props](#settings-with-full-props)
-  + [Props](#props)
-* [Custom theme](#custom-theme)
-* [Extend languages](#extend-languages)
-  + [Default supported languages and values](#default-supported-languages-and-values)
-* [Virtual scroll](#virtual-scroll)
-    - [Object props](#object-props)
+- [Table of Contents](#table-of-contents)
+- [Introduction](#introduction)
+- [Features](#features)
+- [Install plugin](#install-plugin)
+  - [Options](#options)
+- [Usage diff viewer](#usage-diff-viewer)
+  - [Settings with default props](#settings-with-default-props)
+  - [Settings with full props](#settings-with-full-props)
+  - [Props](#props)
+- [Custom theme](#custom-theme)
+- [Extend languages](#extend-languages)
+  - [Default supported languages and values](#default-supported-languages-and-values)
+- [Virtual scroll](#virtual-scroll)
+  - [Object props](#object-props)
 
 ## Introduction
 
@@ -32,11 +30,12 @@ Here is the <a href="https://hoiheart.github.io/vue-diff/demo/index.html" target
 
 ## Features
 
-* Support split / unified mode
-* Support multiple languages and can be extended
-* Support two themes (dark / light) and can be customized
-* Virtual scroll for large text comparison
-* Folding view (*Partial folding is not supported*)
+- Support split / unified mode
+- Support multiple languages and can be extended
+- Support two themes (dark / light) and can be customized
+- Virtual scroll for large text comparison
+- Folding view (_Partial folding is not supported_)
+- Support typescript
 
 ## Install plugin
 
@@ -47,28 +46,31 @@ npm install vue-diff
 And install plugin in vue application
 
 ```ts
-import VueDiff from 'vue-diff'
+import VueDiff from 'vue-diff';
 
-import 'vue-diff/dist/index.css'
+import 'vue-diff/dist/index.css';
 
-app.use(VueDiff)
+app.use(VueDiff);
 ```
+
 ### Options
 
 ```ts
 app.use(VueDiff, {
-  componentName: 'VueDiff'
-})
+  componentName: 'VueDiff',
+});
 ```
 
-| name | type | detault | description |
-|- | - | - | - |
-| componentName | `string` | `Diff` | Global diff component name |
+| name          | type     | detault | description                |
+| ------------- | -------- | ------- | -------------------------- |
+| componentName | `string` | `Diff`  | Global diff component name |
 
 ## Usage diff viewer
 
 Insert the diff component with props.
+
 ### Settings with default props
+
 ```vue
 <template>
   <!-- If the changed componentName
@@ -103,23 +105,23 @@ Insert the diff component with props.
 
 ### Props
 
-| name | type | detault | values | description
-|- | - | - | - |- |
-| mode | `string` | `split` | `split`, `unified` | 
-| theme | `string` | `dark` | `dark`, `light` | See <a href="#custom-theme">Custom theme</a>
-| language | `string` | `plaintext` |  | See <a href="#extend-languages">Extend languages</a>
-| prev | `string` | `''` |  | Prev code |
-| current | `string` | `''` |  | Current Code |
-| folding | `boolean` | `false` |  | Folding not different |
-| inputDelay | `number` | `0` |  | Setting up rendering debounce for changes for performance benefit (mode, prev, curr) |
-| virtualScroll | `boolean\|object` | `false` |  | *Default value when setting true :*<br>`{ height: 500, lineMinHeight: 24, delay: 100 }`<br>See <a href="#virtual-scroll">virtual scroll</a> |
+| name          | type              | detault     | values             | description                                                                                                                                 |
+| ------------- | ----------------- | ----------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| mode          | `string`          | `split`     | `split`, `unified` |
+| theme         | `string`          | `dark`      | `dark`, `light`    | See <a href="#custom-theme">Custom theme</a>                                                                                                |
+| language      | `string`          | `plaintext` |                    | See <a href="#extend-languages">Extend languages</a>                                                                                        |
+| prev          | `string`          | `''`        |                    | Prev code                                                                                                                                   |
+| current       | `string`          | `''`        |                    | Current Code                                                                                                                                |
+| folding       | `boolean`         | `false`     |                    | Folding not different                                                                                                                       |
+| inputDelay    | `number`          | `0`         |                    | Setting up rendering debounce for changes for performance benefit (mode, prev, curr)                                                        |
+| virtualScroll | `boolean\|object` | `false`     |                    | _Default value when setting true :_<br>`{ height: 500, lineMinHeight: 24, delay: 100 }`<br>See <a href="#virtual-scroll">virtual scroll</a> |
 
 ## Custom theme
 
 `vue-diff` uses the following <a href="https://github.com/highlightjs/highlight.js/tree/master/src/styles">highlight.js themes</a> and can be customized.
 
-* dark: `highlight.js/scss/monokai.scss`
-* light: `highlight.js/scss/vs.scss`
+- dark: `highlight.js/scss/monokai.scss`
+- light: `highlight.js/scss/vs.scss`
 
 ```bash
 npm install highlight.js
@@ -151,28 +153,28 @@ npm install highlight.js
 
 ### Default supported languages and values
 
-* `css`
-* `xml`: `xml`, `html`, `xhtml`, `rss`, `atom`, `xjb`, `xsd`, `xsl`, `plist`, `svg`
-* `markdown`: `markdown`, `md`, `mkdown`, `mkd`
-* `javascript`: `javascript`, `js`, `jsx`
-* `json`
-* `plaintext`: `plaintext`, `txt`, `text`
-* `typescript`: `typescript`, `ts`
+- `css`
+- `xml`: `xml`, `html`, `xhtml`, `rss`, `atom`, `xjb`, `xsd`, `xsl`, `plist`, `svg`
+- `markdown`: `markdown`, `md`, `mkdown`, `mkd`
+- `javascript`: `javascript`, `js`, `jsx`
+- `json`
+- `plaintext`: `plaintext`, `txt`, `text`
+- `typescript`: `typescript`, `ts`
 
 ```bash
 npm install highlight.js
 ```
 
 ```ts
-import VueDiff from 'vue-diff'
-import 'vue-diff/dist/index.css'
+import VueDiff from 'vue-diff';
+import 'vue-diff/dist/index.css';
 
 // extend yaml language
-import yaml from 'highlight.js/lib/languages/yaml'
+import yaml from 'highlight.js/lib/languages/yaml';
 
-VueDiff.hljs.registerLanguage('yaml', yaml)
+VueDiff.hljs.registerLanguage('yaml', yaml);
 
-app.use(VueDiff)
+app.use(VueDiff);
 ```
 
 > <a href="https://github.com/highlightjs/highlight.js/blob/master/SUPPORTED_LANGUAGES.md">Check supported languages of Highlight.js</a>
@@ -186,8 +188,8 @@ With virtualScroll props, virtualScroll applies. (Self-made for this plug-in.)
 
 When using virtual scroll, the css of all code lines is changed to the absolute position, which requires detailed settings.
 
-* height (`number`): Diff box height (Applies only to px values)
-* lineMinHeight (`number`): minimum height of line
+- height (`number`): Diff box height (Applies only to px values)
+- lineMinHeight (`number`): minimum height of line
   > Minimum height value of line is required for visible area calculation.<br>The default is 24, but you can set it yourself if you need to adjust it according to the page's front-size, line-height, etc.
-* delay (`number`): re-rendering delay when scrolling or resizing
-  > Performance problems occur when too often a re-rendering function is invoked based on scrolling or resizing<br>This setting applies a delay using throttle.
+- delay (`number`): re-rendering delay when scrolling or resizing
+  > Performance problems occur when too often a re-rendering function is invoked based on scrolling or resizing<br>This setting applies a delay using throttle.

__tests__/utils.spec.ts

@@ -71,15 +71,15 @@ describe('Utils unit', () => {
     );
   });
 
-  // it('setHighlightCode', async () => {
-  //   const highlightCode = ref('');
+  it('setHighlightCode', async () => {
+    const highlightCode = ref('');
 
-  //   setHighlightCode({
-  //     highlightCode,
-  //     language: 'plaintext',
-  //     code: `a ${MODIFIED_START_TAG}c${MODIFIED_CLOSE_TAG} c`,
-  //   });
+    setHighlightCode({
+      highlightCode,
+      language: 'plaintext',
+      code: `a ${MODIFIED_START_TAG}c${MODIFIED_CLOSE_TAG} c`,
+    });
 
-  //   expect(highlightCode.value).toBe('a <span class="modified">c</span> c');
-  // });
+    expect(highlightCode.value).toBe('a <span class="modified">c</span> c');
+  });
 });

dist/env.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
+  import type { DefineComponent } from 'vue';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }

dist/index.d.ts

@@ -1,6 +1,14 @@
+/// <reference types="highlight.js" />
+import Diff from './Diff.vue';
 import type { App } from 'vue';
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        Diff: typeof Diff;
+    }
+}
 declare const _default: {
     install: (app: App, options?: {}) => void;
-    hljs: any;
+    hljs: import("highlight.js").HLJSApi;
 };
 export default _default;
+export { Diff };

dist/index.es.js

@@ -5578,6 +5578,7 @@ const setHighlightCode = ({
   const startEntity = MODIFIED_START_TAG.replace("<", "&lt;").replace(">", "&gt;");
   const closeEntity = MODIFIED_CLOSE_TAG.replace("<", "&lt;").replace(">", "&gt;");
   highlightCode.value = pureElement.innerHTML.replace(new RegExp(startEntity, "g"), '<span class="modified">').replace(new RegExp(closeEntity, "g"), "</span>");
+  console.log(highlightCode.value);
   pureElement = null;
 };
 const useRender = (props, viewer, scrollOptions) => {
@@ -5973,4 +5974,4 @@ var index = {
   },
   hljs: HighlightJS
 };
-export { index as default };
+export { Diff, index as default };

package.json

@@ -30,6 +30,7 @@
   },
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
   "dependencies": {
     "@vueuse/core": "^8.3.1",
     "diff-match-patch": "^1.0.5",
@@ -44,7 +45,6 @@
     "eslint": "^8.14.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-vue": "^8.7.1",
-    "happy-dom": "^2.55.0",
     "jsdom": "^19.0.0",
     "prettier": "2.6.2",
     "sass": "^1.50.1",

src/env.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
+  import type { DefineComponent } from 'vue';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }

src/index.ts

@@ -5,6 +5,12 @@ import './style.scss';
 import type { App } from 'vue';
 import type { PluginOptions } from './types';
 
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    Diff: typeof Diff;
+  }
+}
+
 export default {
   install: (app: App, options = {}) => {
     const { componentName = 'Diff' } = options as PluginOptions;
@@ -13,3 +19,5 @@ export default {
   },
   hljs,
 };
+
+export { Diff }

src/utils.ts

@@ -336,6 +336,8 @@ const setHighlightCode = ({
     .replace(new RegExp(startEntity, 'g'), '<span class="modified">')
     .replace(new RegExp(closeEntity, 'g'), '</span>');
 
+  console.log(highlightCode.value);
+
   // @ts-ignore
   pureElement = null;
 };

vite.config.ts

@@ -26,6 +26,6 @@ export default defineConfig({
   },
   plugins: [vue(), dts()],
   test: {
-    environment: 'happy-dom',
+    environment: 'jsdom',
   },
 });