feat: show Node-Casbin version in top-right corner (#106)

* feat: Add function to fetch and display Casbin version

* refactor: Remove redundant code for fetching casbin version

* build: Add GenerateCasbinVersionPlugin to next.config.mjs

.gitignore

@@ -12,6 +12,7 @@
 # next.js
 /.next/
 /out/
+/public/casbin-version.json
 
 # production
 /build

app/components/editor/index.tsx

@@ -15,7 +15,7 @@
 'use client';
 import React, { isValidElement, useState, useEffect } from 'react';
 import { example, ModelKind } from './casbin-mode/example';
-import { e, m, p, r } from '@/app/components/editor/hooks/useSetupEnforceContext'; // prettier-ignore
+import { e, m, p, r } from '@/app/components/editor/hooks/useSetupEnforceContext';
 import { clsx } from 'clsx';
 import CodeMirror from '@uiw/react-codemirror';
 import { monokai } from '@uiw/codemirror-theme-monokai';
@@ -48,6 +48,16 @@ export const EditorScreen = () => {
     onChange: setEnforceContextDataPersistent,
     data: enforceContextData,
   });
+  const [casbinVersion, setCasbinVersion] = useState('');
+
+  useEffect(() => {
+    const fetchCasbinVersion = async () => {
+      const response = await fetch('/casbin-version.json');
+      const data = await response.json();
+      setCasbinVersion(data.casbinVersion);
+    };
+    fetchCasbinVersion();
+  }, []);
 
   useEffect(() => {
     if (modelKind) {
@@ -185,7 +195,14 @@ export const EditorScreen = () => {
           </div>
           <div className={'flex-1'}>
             <div>
-              <div className={clsx('h-12 font-bold', 'flex items-center justify-start ')}>Policy</div>
+              <div className={clsx('h-12 font-bold flex items-center justify-between')}>
+                <div>Policy</div>
+                <div className="text-right font-bold mr-4 text-sm text-[#e13c3c]">
+                <a href={`https://github.com/casbin/node-casbin/releases/tag/v${casbinVersion}`} target="_blank" rel="noopener noreferrer">
+                  Node-Casbin v{casbinVersion}
+                </a>
+                </div>
+              </div>
               <div style={{ height: '100%' }}>
                 <CodeMirror
                   height={'343px'}

generateCasbinVersionPlugin.js

@@ -0,0 +1,33 @@
+const fs = require('fs');
+const path = require('path');
+
+class GenerateCasbinVersionPlugin {
+  apply(compiler) {
+    compiler.hooks.emit.tapAsync('GenerateCasbinVersionPlugin', (compilation, callback) => {
+      const packageJsonPath = path.resolve(__dirname, 'node_modules/casbin/package.json');
+      fs.readFile(packageJsonPath, 'utf-8', (err, data) => {
+        if (err) {
+          console.error('Error reading package.json:', err);
+          callback();
+          return;
+        }
+
+        const packageJson = JSON.parse(data);
+        const casbinVersion = packageJson.version;
+        const outputPath = path.resolve(__dirname, 'public/casbin-version.json');
+        const jsonContent = JSON.stringify({ casbinVersion });
+
+        fs.writeFile(outputPath, jsonContent, (err) => {
+          if (err) {
+            console.error('Error writing casbin-version.json:', err);
+          } else {
+            console.log('Casbin version generated:', casbinVersion);
+          }
+          callback();
+        });
+      });
+    });
+  }
+}
+
+module.exports = GenerateCasbinVersionPlugin;

next.config.mjs

@@ -1,3 +1,4 @@
+import GenerateCasbinVersionPlugin from './generateCasbinVersionPlugin.js';
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   /**
@@ -35,6 +36,10 @@ const nextConfig = {
       })
     );
 
+    if (!isServer) {
+      config.plugins.push(new GenerateCasbinVersionPlugin());
+    }
+
     return config;
   },