✨ [nuxt] add shuimo nuxt plugin

ref #64

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'),
           },
-        }
+        },
       },
     });
   }

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' },

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: {

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": {

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",

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,

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"
   }
 }

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

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": "阿怪 <[email protected]>",
+  "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:*"
+  }
+}

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'),
+    });
+
+  },
+});

doc/modules/shuimo/components/MLoadingLogo.vue → 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%;