feat: 新增oml2d vite插件

docs/package.json

@@ -19,6 +19,7 @@
   "devDependencies": {
     "sass": "^1.64.1",
     "typescript": "^5.1.6",
-    "vitepress": "1.0.0-rc.45"
+    "vitepress": "1.0.0-rc.45",
+    "vite-plugin-oml2d": "workspace:*"
   }
 }

docs/src/.vitepress/blog-theme.ts

@@ -17,21 +17,21 @@ import { getThemeConfig } from '@sugarat/theme/node';
 
 // 所有配置项，详见文档: https://theme.sugarat.top/
 const blogTheme = getThemeConfig({
-  oml2d: {
-    models: [
-      {
-        path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Senko_Normals/senko.model3.json'
-      },
-      {
-        path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Pio/model.json',
-        scale: 0.4,
-        position: [0, 50],
-        stageStyle: {
-          height: 300
-        }
-      }
-    ]
-  },
+  // oml2d: {
+  //   models: [
+  //     {
+  //       path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Senko_Normals/senko.model3.json'
+  //     },
+  //     {
+  //       path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Pio/model.json',
+  //       scale: 0.4,
+  //       position: [0, 50],
+  //       stageStyle: {
+  //         height: 300
+  //       }
+  //     }
+  //   ]
+  // },
   blog: false,
   // 开启RSS支持
   // RSS,

docs/src/.vitepress/config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'vitepress';
-
+import { oml2d } from 'vite-plugin-oml2d';
 // 导入主题的配置
 import { blogTheme } from './blog-theme.js';
 import sidebarData from '../../sideBarData.json';
@@ -113,5 +113,31 @@ export default defineConfig({
         link: 'https://github.com/oh-my-live2d/oh-my-live2d'
       }
     ]
+  },
+  vite: {
+    plugins: [
+      oml2d({
+        models: [
+          {
+            path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Senko_Normals/senko.model3.json'
+          },
+          {
+            path: 'https://registry.npmmirror.com/oml2d-models/latest/files/models/Pio/model.json',
+            scale: 0.4,
+            position: [0, 50],
+            stageStyle: {
+              height: 300
+            }
+          }
+        ],
+        tips: {
+          idleTips: {
+            wordTheDay: () => {
+              return '-------------';
+            }
+          }
+        }
+      })
+    ]
   }
 });

packages/vite-plugin/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "vite-plugin-oml2d",
+  "version": "0.10.0",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b tsconfig.build.json"
+  },
+  "dependencies": {
+    "oh-my-live2d": "workspace:*",
+    "telejson": "^7.2.0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "javascript-stringify": "^2.1.0"
+  }
+}

packages/vite-plugin/src/index.ts

@@ -0,0 +1,38 @@
+import fs from 'fs';
+import path from 'path';
+
+import { stringify } from 'javascript-stringify';
+import type { Options } from 'oh-my-live2d';
+import type { IndexHtmlTransformResult, PluginOption } from 'vite';
+
+import { getModuleDir } from './utils.js';
+
+export const oml2d = (options: Options = {}): PluginOption => {
+  return {
+    name: 'vite-plugin-oh-my-live2d',
+
+    transformIndexHtml(): IndexHtmlTransformResult | void | Promise<IndexHtmlTransformResult | void> {
+      const oml2dModuleDir = getModuleDir('oh-my-live2d');
+      const res = fs.readFileSync(path.join(oml2dModuleDir!, 'dist/index.min.js'));
+
+      return [
+        {
+          tag: 'script',
+          attrs: {
+            type: 'text/javascript'
+          },
+          children: res.toString(),
+          injectTo: 'body-prepend'
+        },
+        {
+          tag: 'script',
+          children: `OML2D.loadOml2d(${stringify(options)});`,
+          attrs: {
+            type: 'text/javascript'
+          },
+          injectTo: 'body-prepend'
+        }
+      ];
+    }
+  };
+};

packages/vite-plugin/src/utils.ts

@@ -0,0 +1,15 @@
+import fs from 'fs';
+import { createRequire } from 'module';
+import path from 'path';
+
+export const getModuleDir = (moduleEntry: string): string | undefined => {
+  const packageName = moduleEntry.includes('/')
+    ? moduleEntry.startsWith('@')
+      ? moduleEntry.split('/').slice(0, 2).join('/')
+      : moduleEntry.split('/')[0]
+    : moduleEntry;
+  const require = createRequire(import.meta.url);
+  const lookupPaths = require.resolve.paths(moduleEntry)?.map((p) => path.join(p, packageName));
+
+  return lookupPaths?.find((p) => fs.existsSync(p));
+};

packages/vite-plugin/tsconfig.build.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "declaration": true,
+    "lib": ["ESNext", "DOM"],
+    "outDir": "./dist",
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

packages/vuepress-plugin/src/client/config.ts

@@ -1,13 +1,12 @@
 import type { Options } from 'oh-my-live2d';
 import { onMounted } from 'vue';
-import { defineClientConfig } from 'vuepress/client';
 
 declare const __OML2D_OPTIONS__: Options;
 
-export default defineClientConfig({
-  setup: () => {
+export default {
+  setup: (): void => {
     onMounted(() => {
       void import('oh-my-live2d').then(({ loadOml2d }) => loadOml2d(__OML2D_OPTIONS__));
     });
   }
-});
+};

packages/vuepress-plugin/tsconfig.build.json

@@ -3,6 +3,7 @@
     "target": "ES2022",
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
+    "declaration": true,
     "lib": ["ESNext", "DOM"],
     "outDir": "./dist",
     "strict": true,