expose internal DiffInstance

packages/react/src/components/DiffView.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import { DiffFile } from "@git-diff-view/core";
-import { memo, useEffect, useMemo } from "react";
+import { memo, useEffect, useMemo, forwardRef, useImperativeHandle } from "react";
 import * as React from "react";
 import { createStore, ref } from "reactivity-store";
 
@@ -12,7 +12,7 @@ import { DiffUnifiedView } from "./DiffUnifiedView";
 import { DiffModeEnum, DiffViewContext } from "./DiffViewContext";
 
 import type { highlighter } from "@git-diff-view/core";
-import type { CSSProperties, ReactNode } from "react";
+import type { CSSProperties, ForwardedRef, ReactNode } from "react";
 
 const diffFontSizeName = "--diff-font-size--";
 
@@ -266,7 +266,10 @@ const _InternalDiffView = <T extends unknown>(
 
 const InternalDiffView = memo(_InternalDiffView);
 
-export const DiffView = <T extends unknown>(props: DiffViewProps<T>) => {
+const DiffViewWithRef = <T extends unknown>(
+  props: DiffViewProps<T>,
+  ref: ForwardedRef<{ getDiffFileInstance: () => DiffFile }>
+) => {
   const { registerHighlighter, autoDetectLang, data, diffFile: _diffFile, ...restProps } = props;
 
   const diffFile = useMemo(() => {
@@ -314,6 +317,8 @@ export const DiffView = <T extends unknown>(props: DiffViewProps<T>) => {
 
   useUnmount(() => diffFile._destroy(), [diffFile]);
 
+  useImperativeHandle(ref, () => ({ getDiffFileInstance: () => diffFile }), [diffFile]);
+
   if (!diffFile) return null;
 
   return (
@@ -326,4 +331,11 @@ export const DiffView = <T extends unknown>(props: DiffViewProps<T>) => {
   );
 };
 
+export const DiffView = forwardRef(DiffViewWithRef) as (<T>(
+  props: DiffViewProps<T>,
+  ref?: ForwardedRef<{ getDiffFileInstance: () => DiffFile }>
+) => ReactNode) & { displayName?: string };
+
+DiffView.displayName = "DiffView";
+
 export const version = __VERSION__;

packages/vue/src/components/DiffView.tsx

@@ -182,11 +182,13 @@ export const DiffView = defineComponent<
 
     onUnmounted(() => diffFile.value._destroy?.());
 
+    options.expose({ getDiffView: () => diffFile.value });
+
     return () => {
       if (!diffFile.value) return null;
 
       return (
-        <div class="diff-tailwindcss-wrapper" data-component="git-diff-view">
+        <div class="diff-tailwindcss-wrapper" data-component="git-diff-view" data-version={__VERSION__}>
           <div class="diff-style-root" style={{ [diffFontSizeName]: props.diffViewFontSize + "px" }}>
             <div
               id={`diff-root${id.value}`}
@@ -220,6 +222,9 @@ export const DiffView = defineComponent<
       "registerHighlighter",
       "style",
     ],
+    // expose: ["getDiffView"],
     slots: Object as typeSlots,
   }
 );
+
+export const version = __VERSION__;

packages/vue/src/global.d.ts

@@ -0,0 +1,11 @@
+declare global {
+  const __VERSION__: string;
+
+  namespace NodeJS {
+    interface ProcessEnv {
+      NODE_ENV: "development" | "production" | "test";
+    }
+  }
+}
+
+export {};

packages/vue/vite.config.ts

@@ -5,6 +5,8 @@ import * as path from "path";
 import { defineConfig } from "vite";
 import dts from "vite-plugin-dts";
 
+import pkg from './package.json';
+
 export default defineConfig({
   plugins: [typescript({ tsconfig: "./tsconfig.json" }), vue(), vueJsx(), dts()],
   build: {
@@ -26,4 +28,7 @@ export default defineConfig({
       },
     },
   },
+  define: {
+    __VERSION__: JSON.stringify(pkg.version),
+  }
 });