From fe3f62629060045fbb8f1c652bb00a12ec3b851f Mon Sep 17 00:00:00 2001
From: xue jiahao <xuejiahao@alicorns.co.jp>
Date: Fri, 17 Jan 2025 09:13:55 +0800
Subject: [PATCH] fix vite plugin

---
 vue-project/my-kintone-plugin/README.md      |  2 +-
 vue-project/my-kintone-plugin/src/main.ts    |  1 -
 vue-project/my-kintone-plugin/vite.config.js | 22 ++++++++++++++++++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/vue-project/my-kintone-plugin/README.md b/vue-project/my-kintone-plugin/README.md
index c92516b..8aa7e0b 100644
--- a/vue-project/my-kintone-plugin/README.md
+++ b/vue-project/my-kintone-plugin/README.md
@@ -10,6 +10,6 @@
 
 3. 关于组件：
    - 使用了 https://ui-component.kintone.dev/ 组件库，但是它没有支持 Vue，所以需要作为 Web Component 来使用
-   - 又由于 Web Component 的格式是类似 `<kuc-button-1-18-0>`，为了开发方便能写成 `<kuc-button>`，手动进行了全局替换（见 `vite.config.js`）
+   - 又由于 Web Component 的格式是类似 `<kuc-button-1-18-0>`，为了开发方便能写成 `<kuc-button>`，手动进行了全局替换和引入包（见 `vite.config.js`）
    - 同时也定死了 kintone-ui-component 版本号，更新版本号需要修改 `vite.config.js` 的插件
    - 目前尚未实现 `<template>` 中组件的 ts 提示
\ No newline at end of file
diff --git a/vue-project/my-kintone-plugin/src/main.ts b/vue-project/my-kintone-plugin/src/main.ts
index 2f1e4d3..2972b0c 100644
--- a/vue-project/my-kintone-plugin/src/main.ts
+++ b/vue-project/my-kintone-plugin/src/main.ts
@@ -1,5 +1,4 @@
 import { createApp } from 'vue';
 import Config from './components/Config.vue';
-import allComponent from 'kintone-ui-component';
 
 createApp(Config, { pluginId: kintone.$PLUGIN_ID }).mount('#app');
diff --git a/vue-project/my-kintone-plugin/vite.config.js b/vue-project/my-kintone-plugin/vite.config.js
index b48ff41..c91e6ee 100644
--- a/vue-project/my-kintone-plugin/vite.config.js
+++ b/vue-project/my-kintone-plugin/vite.config.js
@@ -10,9 +10,27 @@ function replaceKucTagsPlugin() {
       if (id.endsWith('.vue')) {
         const content = await fs.promises.readFile(id, 'utf-8');
 
-        return content
+        const usedComponent = {}
+
+        let res = content
           .replace(/<\/kuc-([a-zA-Z0-9-]+)(?![0-9-])>/g, (match, p1) => `</kuc-${p1}-1-18-0>`)
-          .replace(/<kuc-([a-zA-Z0-9-]+)(?![0-9-])([^>]*)>/g, (match, p1, p2) => `<kuc-${p1}-1-18-0${p2}>`);
+          .replace(/<kuc-([a-zA-Z0-9-]+)(?![0-9-])([^>]*)>/g, (match, p1, p2) => {
+            usedComponent[p1] = true;
+            return `<kuc-${p1}-1-18-0${p2}>`
+          });
+        if (Object.keys(usedComponent).length) {
+          let importScript = '<script lang="ts">'
+          Object.keys(usedComponent).forEach((key) => {
+            const keyPascal = key.split('-')
+              .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+              .join('');
+            importScript += `import * as Kuc${keyPascal} from "kintone-ui-component/lib/${key}";`
+          });
+          importScript += '</script>';
+          res = importScript + res;
+        }
+
+        return res;
       }
     }
   };