From 4dc8c5e1219e0d6f65d761baa07860f9e987245a Mon Sep 17 00:00:00 2001
From: higuaifan <higuaifan@higuaifan.com>
Date: Mon, 26 Feb 2024 21:52:17 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20[nuxt]=20add=20shuimo=20nuxt=20plug?=
 =?UTF-8?q?in?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #64
---
 cli/build/config/es.config.ts                 |  6 +-
 doc/app.vue                                   | 12 ++-
 doc/modules/shuimo/index.ts                   | 33 -------
 doc/modules/shuimo/plugin.ts                  | 17 ----
 doc/nuxt.config.ts                            |  1 +
 doc/package.json                              |  6 +-
 lib/package.json                              |  3 +-
 lib/utils/install/importComponents.ts         |  3 +
 package.json                                  |  7 +-
 plugins/nuxt/README.md                        | 86 +++++++++++++++++++
 plugins/nuxt/package.json                     | 35 ++++++++
 plugins/nuxt/src/module.ts                    | 72 ++++++++++++++++
 .../src/runtime}/components/MLoadingLogo.vue  |  4 +-
 .../runtime}/components/MLoadingPreview.vue   | 17 ++--
 plugins/nuxt/src/runtime/directive.ts         | 16 ++++
 plugins/nuxt/src/utils/shuimoPath.ts          | 15 ++++
 plugins/nuxt/tsconfig.json                    |  3 +
 pnpm-workspace.yaml                           |  1 +
 18 files changed, 264 insertions(+), 73 deletions(-)
 delete mode 100644 doc/modules/shuimo/index.ts
 delete mode 100644 doc/modules/shuimo/plugin.ts
 create mode 100644 plugins/nuxt/README.md
 create mode 100644 plugins/nuxt/package.json
 create mode 100644 plugins/nuxt/src/module.ts
 rename {doc/modules/shuimo => plugins/nuxt/src/runtime}/components/MLoadingLogo.vue (96%)
 rename {doc/modules/shuimo => plugins/nuxt/src/runtime}/components/MLoadingPreview.vue (56%)
 create mode 100644 plugins/nuxt/src/runtime/directive.ts
 create mode 100644 plugins/nuxt/src/utils/shuimoPath.ts
 create mode 100644 plugins/nuxt/tsconfig.json

diff --git a/cli/build/config/es.config.ts b/cli/build/config/es.config.ts
index 86b326d4..dcdabc89 100644
--- a/cli/build/config/es.config.ts
+++ b/cli/build/config/es.config.ts
@@ -6,10 +6,10 @@
  *
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
-import { defineConfig, normalizePath, PluginOption } from 'vite';
+import { defineConfig, normalizePath } from 'vite';
 import fs from 'fs';
 import path from 'path';
-import { baseRoot, buildConfig, fileName, getPath, plugins as basePlugins, rollupOptions } from './common.config';
+import { baseRoot, buildConfig, fileName, getPath, plugins as basePlugins } from './common.config';
 
 const outputRoot = path.resolve(__dirname, '../../../lib/dist');
 
@@ -108,7 +108,7 @@ export class EsConfig {
             ...entries,
             'index': getPath('./index.ts'),
           },
-        }
+        },
       },
     });
   }
diff --git a/doc/app.vue b/doc/app.vue
index 6352d6d1..56ec9c7e 100644
--- a/doc/app.vue
+++ b/doc/app.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="shuimo-ui m-cursor">
     <Title>水墨UI</Title>
-    <MLoadingPreview v-model="isLoading" v-if="isLoading"/>
-    <m-rice-paper v-else class="layout">
+    <client-only>
+      <MLoadingPreview v-model="isLoading" v-if="isLoading" :preInit="preInit"/>
+    </client-only>
+    <m-rice-paper v-if="!isLoading" class="layout">
       <BaseHeaderBase :show-index-button="showIndexButton"/>
       <NuxtLayout>
         <NuxtPage/>
@@ -20,6 +22,12 @@ const showIndexButton = computed(() => {
 
 const isLoading = ref(true);
 
+const preInit = async () => {
+  await import('assets/style/markdown.css');
+  await import('assets/style/shikiji.css');
+  return true;
+};
+
 useHead({
   meta: [
     { name: 'author', content: '极客江湖,阿怪,higuaifan' },
diff --git a/doc/modules/shuimo/index.ts b/doc/modules/shuimo/index.ts
deleted file mode 100644
index c88c2f9e..00000000
--- a/doc/modules/shuimo/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * @description
- * @author 阿怪
- * @date 2024/1/9 23:14
- * @version v1.0.0
- *
- * 江湖的业务千篇一律，复杂的代码好几百行。
- */
-import { addComponent, addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit';
-
-export default defineNuxtModule({
-  setup(options, nuxtApp) {
-
-    const { resolve } = createResolver(import.meta.url);
-    nuxtApp.hook('nitro:config', async nitroConfig => {
-      nitroConfig.publicAssets ||= [];
-      nitroConfig.publicAssets.push({
-        // dir: resolve('../../node_modules/shuimo-ui/public'),
-        dir: resolve('../../../lib/public/icon'),
-        baseURL: 'm-shuimo',
-        maxAge: 60 * 60 * 24 * 30,
-      });
-    });
-    addPlugin(resolve('./plugin.ts'));
-
-    addComponent({
-      name: 'MLoadingPreview',
-      filePath: resolve('./components/MLoadingPreview.vue'),
-    });
-
-    // nuxtApp.options.css.push(resolve('../../node_modules/shuimo-ui/dist/style.css'));
-  },
-});
diff --git a/doc/modules/shuimo/plugin.ts b/doc/modules/shuimo/plugin.ts
deleted file mode 100644
index dc1f290c..00000000
--- a/doc/modules/shuimo/plugin.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * @description
- * @author 阿怪
- * @date 2024/1/9 23:14
- * @version v1.0.0
- *
- * 江湖的业务千篇一律，复杂的代码好几百行。
- */
-
-import { createMUI } from 'shuimo-ui';
-
-export default defineNuxtPlugin(nuxtApp => {
-  nuxtApp.vueApp.use(createMUI({
-    disableWebComponent: ['MBorder', 'MRicePaper'],
-    svgInject: 'nuxt',
-  }));
-});
diff --git a/doc/nuxt.config.ts b/doc/nuxt.config.ts
index 2b01bb37..594ee711 100644
--- a/doc/nuxt.config.ts
+++ b/doc/nuxt.config.ts
@@ -8,6 +8,7 @@ export default defineNuxtConfig({
   modules: [
     './modules/markdown',
     './modules/fontmin',
+    '@shuimo-design/shuimo-ui-nuxt',
   ],
   css: ['./assets/style/index.css'],
   alias: {
diff --git a/doc/package.json b/doc/package.json
index 5c967890..5bae9e7d 100644
--- a/doc/package.json
+++ b/doc/package.json
@@ -15,10 +15,8 @@
     "doc:fontmin": "cd ./script/fontmin && npm run replace"
   },
   "devDependencies": {
-    "@nuxt/devtools": "latest",
-    "@types/node": "^18.17.1",
-    "nuxt": "^3.9.3",
-    "shuimo-ui": "workspace:*"
+    "shuimo-ui": "workspace:*",
+    "@shuimo-design/shuimo-ui-nuxt": "workspace:*"
   },
   "web-types": "../cli/build/config/output/web-types.json",
   "dependencies": {
diff --git a/lib/package.json b/lib/package.json
index 14d171ba..140fa091 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -44,8 +44,7 @@
     "@vue/test-utils": "^2.4.4",
     "dayjs": "^1.11.10",
     "happy-dom": "^13.3.8",
-    "interactjs": "^1.10.26",
-    "vitest": "^1.3.0"
+    "interactjs": "^1.10.26"
   },
   "repository": {
     "type": "git",
diff --git a/lib/utils/install/importComponents.ts b/lib/utils/install/importComponents.ts
index a07fd7aa..6dcd724b 100644
--- a/lib/utils/install/importComponents.ts
+++ b/lib/utils/install/importComponents.ts
@@ -32,6 +32,7 @@ import MTreeNode from '../../components/base/tree/MTreeNode';
 // [other]
 import MDivider from '../../components/other/divider/MDivider';
 import MLoading from '../../components/other/loading/MLoading';
+import { loadingDirective } from '../../components/other/loading/directive';
 import MDarkMode from '../../components/other/darkMode/MDarkMode';
 import MDeleteIcon from '../../components/other/deleteIcon/MDeleteIcon';
 import MPrinter from '../../components/other/printer/Printer';
@@ -113,6 +114,8 @@ export {
   useDialog,
   useDarkModeStorage,
 
+  loadingDirective,
+
   // [base]
   MAvatar,
   MButton,
diff --git a/package.json b/package.json
index 1c3724f1..4c53e013 100644
--- a/package.json
+++ b/package.json
@@ -30,10 +30,15 @@
   "devDependencies": {
     "@janghood/config": "0.0.1-3",
     "@janghood/lint": "0.0.5",
+    "@nuxt/devtools": "latest",
+    "@types/node": "^18.17.1",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
+    "nuxt": "^3.10.3",
     "rimraf": "^5.0.5",
+    "typescript": "^5.3.3",
     "vite": "^5.1.3",
-    "vue": "^3.4.19"
+    "vue": "^3.4.19",
+    "vitest": "^1.3.0"
   }
 }
diff --git a/plugins/nuxt/README.md b/plugins/nuxt/README.md
new file mode 100644
index 00000000..08e5dc96
--- /dev/null
+++ b/plugins/nuxt/README.md
@@ -0,0 +1,86 @@
+# Shuimo UI Nuxt module
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+[Shuimo UI](https://github.com/shuimo-design/shuimo-ui) module for [Nuxt](https://nuxt.com/)
+
+# Features
+
+- 🧩 Automatically import components and styles on demand.
+- ✨ Provide Some useful layout components.
+
+# Quick Setup
+
+1. Add `@shuimo-design/shuimo-ui-nuxt` dependency to your project
+
+```bash
+# Using pnpm
+pnpm add -D @shuimo-design/shuimo-ui-nuxt
+
+# Using yarn
+yarn add --dev @shuimo-design/shuimo-ui-nuxt
+
+# Using npm
+npm install --save-dev @shuimo-design/shuimo-ui-nuxt
+```
+
+2. Add `shuimo-ui` to the `modules` section of `nuxt.config.ts`
+
+```js
+export default defineNuxtConfig({
+  modules: [
+    '@shuimo-design/shuimo-ui-nuxt'
+  ]
+})
+```
+
+That's it! You can now use Shuimo UI in your Nuxt app ✨
+
+# Usage
+
+## Components: `MLoadingPreview`
+
+We provide a component called `MLoadingPreview`.
+you can used it when you want to do some time-consuming operations like preload some assets and show a loading animation.
+
+```vue
+
+<template>
+  <div>
+    <client-only>
+      <MLoadingPreview v-model="isLoading" v-if="isLoading" :preInit="preInit"/>
+    </client-only>
+    <your-main-display-component v-if="!isLoading">
+
+    </your-main-display-component>
+  </div>
+</template>
+
+
+<script setup lang="ts">
+
+  const isLoading = ref(true);
+
+  const preInit = async () => {
+    await import('ASSET_URL');
+    // or other time-consuming operations
+    return true;
+  };
+</script>
+```
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/shuimo-ui?style=flat&colorA=020420&label=shuimo-ui%40latest&color=861717
+[npm-version-href]: https://npmjs.com/package/shuimo-ui
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/shuimo-ui.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-downloads-href]: https://npmjs.com/package/shuimo-ui
+
+[license-src]: https://img.shields.io/npm/l/shuimo-ui.svg?style=flat&colorA=020420&colorB=00DC82
+[license-href]: https://npmjs.com/package/shuimo-ui
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
+[nuxt-href]: https://nuxt.com
diff --git a/plugins/nuxt/package.json b/plugins/nuxt/package.json
new file mode 100644
index 00000000..cbad06a1
--- /dev/null
+++ b/plugins/nuxt/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "@shuimo-design/shuimo-ui-nuxt",
+  "version": "0.0.1-beta.1",
+  "description": "shuimo-ui nuxt module",
+  "author": "阿怪 <higuaifan@higuaifan.com>",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepack": "nuxt-module-build build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/shuimo-design/shuimo-ui.git"
+  },
+  "peerDependencies": {
+    "shuimo-ui": "workspace:*"
+  },
+  "devDependencies": {
+    "@nuxt/module-builder": "^0.5.5",
+    "@nuxt/kit": "^3.10.3",
+    "shuimo-ui": "workspace:*"
+  }
+}
diff --git a/plugins/nuxt/src/module.ts b/plugins/nuxt/src/module.ts
new file mode 100644
index 00000000..070658b3
--- /dev/null
+++ b/plugins/nuxt/src/module.ts
@@ -0,0 +1,72 @@
+/**
+ * @description shuimo nuxt module
+ * @author 阿怪
+ * @date 2024/2/26 15:40
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+
+import { addComponent, addPlugin, createResolver, defineNuxtModule } from '@nuxt/kit';
+import { SHUIMO_ROOT_PATH } from './utils/shuimoPath';
+import { readdirSync } from 'node:fs';
+
+// Module options TypeScript interface definition
+export interface ShuimoNuxtModuleOptions {
+}
+
+const { resolve } = createResolver(import.meta.url);
+
+export default defineNuxtModule<ShuimoNuxtModuleOptions>({
+  meta: {
+    name: 'shuimo-ui',
+    configKey: 'shuimoUIModule',
+  },
+  defaults: {},
+  hooks: {
+    'components:dirs': async (dirs) => {
+      // todo: use addComponent ?
+
+      const typeDirentList = readdirSync(`${SHUIMO_ROOT_PATH}/dist/es/components`, { withFileTypes: true });
+      typeDirentList.forEach(d => {
+        const dir = d.name;
+        if (d.isDirectory()) {
+          const nameDirentList = readdirSync(`${SHUIMO_ROOT_PATH}/dist/es/components/${dir}`, { withFileTypes: true });
+          nameDirentList.forEach(n => {
+            if (n.isDirectory()) {
+              dirs.push({
+                path: resolve(`${SHUIMO_ROOT_PATH}/dist/es/components/${dir}/${n.name}`),
+                prefix: 'M',
+              });
+            }
+          });
+        }
+      });
+
+
+    },
+  },
+  async setup(options, nuxt) {
+    nuxt.hook('nitro:config', async nitroConfig => {
+      nitroConfig.publicAssets ||= [];
+      nitroConfig.publicAssets.push({
+        dir: resolve(`${SHUIMO_ROOT_PATH}/public`),
+        baseURL: 'm-shuimo',
+        maxAge: 60 * 60 * 24 * 30,
+      });
+    });
+    nuxt.options.build.transpile ||= [];
+    nuxt.options.build.transpile.push('shuimo-ui');
+
+    nuxt.options.css.push(resolve(`${SHUIMO_ROOT_PATH}/dist/es/assets/style/global.css`));
+
+    addPlugin(resolve('./runtime/directive'));
+
+    await addComponent({
+      name: 'MLoadingPreview',
+      export: 'default',
+      filePath: resolve('runtime/components/MLoadingPreview.vue'),
+    });
+
+  },
+});
diff --git a/doc/modules/shuimo/components/MLoadingLogo.vue b/plugins/nuxt/src/runtime/components/MLoadingLogo.vue
similarity index 96%
rename from doc/modules/shuimo/components/MLoadingLogo.vue
rename to plugins/nuxt/src/runtime/components/MLoadingLogo.vue
index 93a7384b..ed15ad33 100644
--- a/doc/modules/shuimo/components/MLoadingLogo.vue
+++ b/plugins/nuxt/src/runtime/components/MLoadingLogo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /**
- * @description
+ * @description shuimo loading logo component
  * @author 阿怪
  * @date 2024/1/29 10:07
  * @version v1.0.0
@@ -56,7 +56,7 @@ onUnmounted(() => {
   margin-top: 2vw;
 }
 
-.m-loading-main{
+.m-loading-main {
   grid-area: main;
   max-width: 100%;
   max-height: 100%;
diff --git a/doc/modules/shuimo/components/MLoadingPreview.vue b/plugins/nuxt/src/runtime/components/MLoadingPreview.vue
similarity index 56%
rename from doc/modules/shuimo/components/MLoadingPreview.vue
rename to plugins/nuxt/src/runtime/components/MLoadingPreview.vue
index 4c79fc87..bea124d5 100644
--- a/doc/modules/shuimo/components/MLoadingPreview.vue
+++ b/plugins/nuxt/src/runtime/components/MLoadingPreview.vue
@@ -1,24 +1,23 @@
 <script setup lang="ts">
 /**
- * @description
+ * @description shuimo ui nuxt loading preview
  * @author 阿怪
  * @date 2024/1/29 01:59
  * @version v1.0.0
  *
  * 江湖的业务千篇一律，复杂的代码好几百行。
  */
-import MLoadingLogo from '~/modules/shuimo/components/MLoadingLogo.vue';
+import MLoadingLogo from './MLoadingLogo.vue';
 
 const [loading] = defineModel({});
+const props = defineProps<{
+  preInit?: () => Promise<boolean>;
+}>();
 
 onMounted(async () => {
-  await import('shuimo-ui/dist/style.css');
-
-  // todo add to plugin setting
-  await import('assets/style/markdown.css');
-  await import('assets/style/shikiji.css');
-
-
+  if (props.preInit) {
+    await props.preInit();
+  }
   loading.value = false;
 });
 
diff --git a/plugins/nuxt/src/runtime/directive.ts b/plugins/nuxt/src/runtime/directive.ts
new file mode 100644
index 00000000..7025563f
--- /dev/null
+++ b/plugins/nuxt/src/runtime/directive.ts
@@ -0,0 +1,16 @@
+// @ts-nocheck
+/**
+ * @description shuimo-ui nuxt directive plugin
+ * @author 阿怪
+ * @date 2024/2/26 17:03
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ * todo fix ts error
+ */
+import { defineNuxtPlugin } from '#app';
+import { loadingDirective } from 'shuimo-ui';
+
+export default defineNuxtPlugin(async nuxtApp => {
+  nuxtApp.vueApp.directive('loading', loadingDirective);
+});
diff --git a/plugins/nuxt/src/utils/shuimoPath.ts b/plugins/nuxt/src/utils/shuimoPath.ts
new file mode 100644
index 00000000..029e593e
--- /dev/null
+++ b/plugins/nuxt/src/utils/shuimoPath.ts
@@ -0,0 +1,15 @@
+/**
+ * @description resolve shuimo-ui path
+ * @author 阿怪
+ * @date 2024/2/26 11:06
+ * @version v1.0.0
+ *
+ * 江湖的业务千篇一律，复杂的代码好几百行。
+ */
+import path from 'path';
+
+
+const pkgName = 'shuimo-ui';
+const shuimoEntryPath = require.resolve(pkgName);
+const shuimoEntryDir = path.parse(shuimoEntryPath).dir;
+export const SHUIMO_ROOT_PATH = path.resolve(`${shuimoEntryDir}/../../`);
diff --git a/plugins/nuxt/tsconfig.json b/plugins/nuxt/tsconfig.json
new file mode 100644
index 00000000..026870e6
--- /dev/null
+++ b/plugins/nuxt/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../doc/.nuxt/tsconfig.json"
+}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 790607bd..a54cd2d4 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -3,4 +3,5 @@ packages:
   - 'doc/**'
   - 'playground/**'
   - 'cli/**'
+  - 'plugins/**'
   - '!cli/build/config/**'