From 6632bd2406e2e8c93756847dbe7b973fccfb0792 Mon Sep 17 00:00:00 2001
From: MrWangJustToDo <2711470541@qq.com>
Date: Fri, 22 Mar 2024 00:28:51 +0800
Subject: [PATCH] improve component api

---
 packages/lowlight/src/index.ts           |  2 ++
 packages/vue/src/components/DiffView.tsx |  2 +-
 ui/react-example/src/Example.tsx         | 16 +++++++---------
 ui/react-example/src/worker.ts           |  2 +-
 ui/vue-example/src/App.vue               | 21 ++++++++++++++-------
 5 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/packages/lowlight/src/index.ts b/packages/lowlight/src/index.ts
index db50300..410a0a9 100644
--- a/packages/lowlight/src/index.ts
+++ b/packages/lowlight/src/index.ts
@@ -124,4 +124,6 @@ Object.defineProperty(instance, "processAST", {
   },
 });
 
+export { processAST } from "./processAST";
+
 export const highlighter: Highlighter = instance as Highlighter;
diff --git a/packages/vue/src/components/DiffView.tsx b/packages/vue/src/components/DiffView.tsx
index 823f410..364dbb2 100644
--- a/packages/vue/src/components/DiffView.tsx
+++ b/packages/vue/src/components/DiffView.tsx
@@ -185,7 +185,7 @@ export const DiffView = defineComponent<
 
     onUnmounted(() => diffFile.value._destroy?.());
 
-    options.expose({ getDiffView: () => diffFile.value });
+    options.expose({ getDiffFileInstance: () => diffFile.value });
 
     return () => {
       if (!diffFile.value) return null;
diff --git a/ui/react-example/src/Example.tsx b/ui/react-example/src/Example.tsx
index cb1d46c..defc5f7 100644
--- a/ui/react-example/src/Example.tsx
+++ b/ui/react-example/src/Example.tsx
@@ -161,10 +161,10 @@ export function Example() {
             <div className="border border-solid border-[rgb(200,200,200)] rounded-[4px]">
               <div className="my-[5px] mx-[4px]">
                 <div className="w-[24px] h-[24px] inline-flex items-center justify-center rounded-full bg-slate-300">
-                  W
+                  @
                 </div>
-                <span className="mx-[2px]">:</span>
-                <span className="text-[12px]">{new Date().toDateString()}</span>
+                <span className="text-[11px] mx-[4px] text-[grey]">:</span>
+                <span className="text-[11px] text-[grey]">{new Date().toLocaleString()}</span>
               </div>
               <div className="bg-[rgb(210,210,210)] h-[1px] my-[5px]"></div>
               <div className="indent-1 my-[5px] mx-[4px]">
@@ -246,15 +246,13 @@ export function Example() {
               h(
                 "div",
                 { class: "w-[24px] h-[24px] inline-flex items-center justify-center rounded-full bg-slate-300" },
-                "W"
+                "@"
               ),
-              h("span", { class: "mx-[2px]" }, ":"),
-              h("span", { class: "text-[12px]" }, new Date().toDateString()),
+              h("span", { class: "text-[11px] mx-[4px] text-[grey]" }, ":"),
+              h("span", { class: "text-[11px] text-[grey]" }, new Date().toLocaleString()),
             ]),
             h("div", { class: "bg-[rgb(210,210,210)] h-[1px] my-[5px]" }),
-            h("div", { class: "indent-1 my-[5px] mx-[4px]" }, [
-              h("span", { class: "text-[15px]" }, data),
-            ]),
+            h("div", { class: "indent-1 my-[5px] mx-[4px]" }, [h("span", { class: "text-[15px]" }, data)]),
           ]),
         ]);
       },
diff --git a/ui/react-example/src/worker.ts b/ui/react-example/src/worker.ts
index 3d23872..d093d30 100644
--- a/ui/react-example/src/worker.ts
+++ b/ui/react-example/src/worker.ts
@@ -1,5 +1,5 @@
+import { DiffFile } from "@git-diff-view/react";
 // import { highlighter } from "@git-diff-view/shiki";
-import { DiffFile } from "@git-diff-view/vue";
 
 import type { DiffViewProps } from "@git-diff-view/react";
 
diff --git a/ui/vue-example/src/App.vue b/ui/vue-example/src/App.vue
index 22e57c3..0d0c0f4 100644
--- a/ui/vue-example/src/App.vue
+++ b/ui/vue-example/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import * as data from "./data";
 import { DiffModeEnum, DiffView, DiffViewProps, SplitSide, DiffFile } from "@git-diff-view/vue";
 import { MessageData } from "./worker";
@@ -35,6 +35,12 @@ const k = ref<Key>("a");
 
 const v = ref("");
 
+const instance = ref<{ getDiffFileInstance: () => DiffFile }>();
+
+onMounted(() => {
+  console.log(instance.value);
+})
+
 const _data = computed(() => data[k.value]);
 
 const extendData = ref<DiffViewProps<any>["extendData"]>({ oldFile: {}, newFile: {} });
@@ -89,7 +95,8 @@ const resetV = () => (v.value = "");
   </div>
   <div class="w-[90%] m-auto border border-[#c1c1c1] border-solid rounded-[5px] overflow-hidden mb-[5em]">
     <DiffView :diff-file="diffFile" :diff-view-font-size="14" :diff-view-mode="mode" :diff-view-highlight="highlight"
-      :diff-view-add-widget="true" :diff-view-wrap="wrap" @on-add-widget-click="resetV" :extend-data="extendData">
+      :diff-view-add-widget="true" ref="instance" :diff-view-wrap="wrap" @on-add-widget-click="resetV"
+      :extend-data="extendData">
       <template #widget="{ onClose, lineNumber, side }">
         <div class="border flex flex-col w-full px-[4px] py-[8px]">
           <textarea class="w-full border min-h-[80px] p-[2px]" v-model="v" />
@@ -97,12 +104,12 @@ const resetV = () => (v.value = "");
             <div class="inline-flex gap-x-[12px] justify-end">
               <button class="border px-[12px] py-[6px] rounded-[4px]" @click="onClose">cancel</button>
               <button class="border px-[12px] py-[6px] rounded-[4px]" @click="() => {
-          if (v.length) {
-            const _side = side === SplitSide.old ? 'oldFile' : 'newFile';
-            extendData![_side]![lineNumber] = { data: v };
-            onClose();
-          }
+        if (v.length) {
+          const _side = side === SplitSide.old ? 'oldFile' : 'newFile';
+          extendData![_side]![lineNumber] = { data: v };
+          onClose();
         }
+      }
         ">
                 submit
               </button>