rename

rename

README.ja.md

@@ -46,6 +46,10 @@ VITE_KINTONE_APP=1
 ```
 
 ## Example
-kintone + vue example: [vue3-porject-kintone-demo](https://github.com/GuSanle/vite-plugin-kintone-dev/tree/main/example/vue3-porject-kintone-demo)
+kintone + vue + vite   
+example: [vue-kintone-vite-demo](https://github.com/GuSanle/vite-plugin-kintone-dev/tree/main/example/vue-kintone-vite-demo)
+
+kintone + react + vite   
+example: [react-kintone-vite-demo](https://github.com/GuSanle/vite-plugin-kintone-dev/tree/main/example/react-kintone-vite-demo)
 
 

README.md

@@ -46,7 +46,11 @@ VITE_KINTONE_APP=1
 ```
 
 ## Example
-kintone + vue example: [vue3-porject-kintone-demo](https://github.com/GuSanle/vite-plugin-kintone-dev/tree/main/example/vue3-porject-kintone-demo)
+kintone + vue + vite   
+example: [vue-kintone-vite-demo](https://github.com/GuSanle/vite-plugin-kintone-dev/tree/main/example/vue-kintone-vite-demo)
+
+kintone + react + vite   
+example: [react-kintone-vite-demo](https://github.com/GuSanle/vite-plugin-kintone-dev/tree/main/example/react-kintone-vite-demo)
 
 
 

README.zh-CN.md

@@ -48,7 +48,11 @@ VITE_KINTONE_APP=1
 ```
 
 ## Example
-kintone + vue example: [vue3-porject-kintone-demo](https://github.com/GuSanle/vite-plugin-kintone-dev/tree/main/example/vue3-porject-kintone-demo)
+kintone + vue + vite   
+example: [vue-kintone-vite-demo](https://github.com/GuSanle/vite-plugin-kintone-dev/tree/main/example/vue-kintone-vite-demo)
+
+kintone + react + vite   
+example: [react-kintone-vite-demo](https://github.com/GuSanle/vite-plugin-kintone-dev/tree/main/example/react-kintone-vite-demo)
 
 
 

example/react-kintone-vite-demo/README.md

@@ -0,0 +1,14 @@
+# react-kintone-vite-demo
+
+This demo was built using @vitejs/vite-plugin-react. 
+Please refer to [@vitejs/vite-plugin-react](https://github.com/vitejs/vite-plugin-react)
+
+## Project run
+```
+npm run dev
+```
+
+## Project build
+```
+npm run build
+```

example/react-project-kintone-demo/package.json → example/react-kintone-vite-demo/package.json

@@ -1,8 +1,7 @@
 {
   "name": "react-project-kintone-demo",
-  "private": true,
   "version": "0.0.0",
-  "type": "module",
+  "license": "MIT",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

example/react-kintone-vite-demo/src/App.tsx

@@ -0,0 +1,19 @@
+// export default function () {
+//   // return <h1>Hello</h1>
+//   return (
+//     <>
+//       <h1>Vite + React</h1>
+//     </>
+//   )
+// }
+
+const App= ()=> {
+  // return <h1>Hello</h1>
+  return (
+    <>
+      <h1>Vite + React</h1>
+    </>
+  )
+}
+
+export default App

example/react-kintone-vite-demo/vite-plugin/devUpdate.ts

@@ -0,0 +1,108 @@
+import kintoneApi from "./kintoneApi";
+import path from "node:path";
+const devFileName = "kintone_module_hack.js";
+import {
+  type Type,
+  type EnvSetting,
+  type TypeInput,
+  type JsList,
+} from "kintone-types";
+
+const urlPrefix = (url: string) => {
+  if (
+    url.substring(0, 7).toLowerCase() == "http://" ||
+    url.substring(0, 8).toLowerCase() == "https://"
+  ) {
+    url = url;
+  } else {
+    url = "https://" + url;
+  }
+  return url;
+};
+
+//步骤：上传文件，获取系统设置，准备新的自定义文件列表，更新系统设置
+export default async function devUpdate(
+  env: EnvSetting,
+  fileList: Array<string>,
+  type: TypeInput
+) {
+  const {
+    VITE_KINTONE_URL: url,
+    VITE_KINTONE_USER_NAME: username,
+    VITE_KINTONE_PASSWORD: password,
+    VITE_KINTONE_APP: app,
+  } = env;
+  const k = new kintoneApi(urlPrefix(url), username, password);
+  try {
+    //上传文件
+    const fileNameList = fileList.map((filePath) => path.basename(filePath));
+    const uploadPromise = await Promise.all(
+      fileList.map((filePath) => {
+        return k.uploadFile(filePath, path.basename(filePath));
+      })
+    );
+
+    let jsList: JsList = {
+      DESKTOP: [],
+      MOBILE: [],
+      DESKTOP_CSS: [],
+      MOBILE_CSS: [],
+    };
+
+    //准备构建好的文件
+    for (const index in uploadPromise) {
+      const { fileKey } = uploadPromise[index];
+      const fileType: Type =
+        path.extname(fileNameList[index]).slice(1) === "js"
+          ? type.type
+          : `${type.type}_CSS`;
+      jsList[fileType].push(fileKey);
+    }
+    //获取自定义设置
+    let customSetting;
+    let appName = "";
+
+    if (type.platform === "PORTAL") {
+      customSetting = await k.getSystemSetting();
+    } else if (app) {
+      const result = await k.getAppInfo(app);
+      appName = result.name;
+      customSetting = await k.getAppSetting(app);
+    } else {
+      console.log("env setting error");
+      return;
+    }
+
+    const { scripts, scope } = customSetting.result;
+
+    //补充之前的自定义配置，排除老的构建文件
+    scripts.forEach((setting) => {
+      const { locationType, type, name, contentUrl, contentId } = setting;
+      if (locationType === "URL") {
+        jsList[type as Type].push(contentUrl);
+      } else if (locationType === "BLOB") {
+        if (!fileNameList.includes(name) && name !== devFileName) {
+          jsList[type as Type].push(contentId);
+        }
+      }
+    });
+
+    const jsFiles = [
+      { jsType: "DESKTOP", fileKeys: jsList["DESKTOP"] },
+      { jsType: "MOBILE", fileKeys: jsList["MOBILE"] },
+      { jsType: "DESKTOP_CSS", fileKeys: jsList["DESKTOP_CSS"] },
+      { jsType: "MOBILE_CSS", fileKeys: jsList["MOBILE_CSS"] },
+    ];
+
+    //更新系统设置
+    if (type.platform === "PORTAL") {
+      await k.updateSystemSetting(scope, jsFiles);
+    } else if (app) {
+      await k.updateAppSetting(app, scope, jsFiles, appName);
+      await k.deploySetting(app);
+    }
+    console.log("update success");
+  } catch (err) {
+    console.log(err);
+  }
+}

example/react-kintone-vite-demo/vite-plugin/index.ts

@@ -0,0 +1,163 @@
+import { ResolvedConfig, type Plugin, loadEnv, normalizePath } from "vite";
+import devUpdate from "./devUpdate";
+import path from "node:path";
+import fs from "node:fs";
+import { load } from "cheerio";
+const fileName = "kintone_module_hack.js";
+import {
+  type EnvSetting,
+  type TypeInput,
+  type ScriptList,
+} from "kintone-types";
+
+//类型守卫函数
+function isEnvSetting(obj: any): obj is EnvSetting {
+  return (
+    obj &&
+    typeof obj.VITE_KINTONE_URL === "string" &&
+    typeof obj.VITE_KINTONE_USER_NAME === "string" &&
+    typeof obj.VITE_KINTONE_PASSWORD === "string" &&
+    (typeof obj.VITE_KINTONE_APP === "undefined" ||
+      typeof obj.VITE_KINTONE_APP === "string")
+  );
+}
+
+const getIndexHtmlContent = () => {
+  const url = path.resolve("index.html");
+  const htmlContent = fs.readFileSync(url, "utf-8");
+
+  const $ = load(htmlContent);
+  const scriptTags = $("body script");
+
+  const scriptList: ScriptList = [];
+  scriptTags.each((index, element) => {
+    const data = {
+      type: $(element).attr("type"),
+      src: $(element).attr("src"),
+    };
+    scriptList.push(data);
+  });
+  return scriptList;
+};
+
+const kintoneModuleHack = (devServerUrl: string, scriptList: ScriptList) => {
+  return `(function () {
+    const scriptList = ${JSON.stringify(scriptList)};
+    function loadScript(src,type) {
+      const script = document.createElement("script");
+      script.type = type;
+      script.src = "${devServerUrl}"+src;
+      document.body.appendChild(script);
+    }
+    for (const script of scriptList){
+      const {src,type}=script
+      loadScript(src,type)
+    }
+  })();
+  `;
+};
+
+const getDirFiles = (dir: string, extList: string[]) => {
+  let result: string[] = [];
+  let files = fs.readdirSync(dir, { withFileTypes: true });
+  files.forEach((file) => {
+    const filepath = path.join(dir, file.name);
+    const ext = path.extname(filepath).slice(1);
+    if (file.isFile() && extList.includes(ext)) {
+      result.push(filepath);
+    } else if (file.isDirectory()) {
+      result.push(...getDirFiles(filepath, extList));
+    }
+  });
+  return result;
+};
+
+export default function kintoneDev(inputType: TypeInput): Plugin[] {
+  let viteConfig: ResolvedConfig;
+  const validateEnv = (viteConfig: ResolvedConfig): EnvSetting | undefined => {
+    const resolvedRoot = normalizePath(
+      viteConfig.root ? path.resolve(viteConfig.root) : process.cwd()
+    );
+
+    const envDir = viteConfig.envDir
+      ? normalizePath(path.resolve(resolvedRoot, viteConfig.envDir))
+      : resolvedRoot;
+
+    const env = loadEnv("", envDir, viteConfig.envPrefix);
+    return isEnvSetting(env) ? env : undefined;
+  };
+  return [
+    {
+      name: "vite-plugin-kintone-dev:dev",
+      apply: "serve",
+      enforce: "post", // 指定运行顺序
+      configResolved(config) {
+        viteConfig = config;
+      },
+      configureServer(server) {
+        server.httpServer?.once("listening", () => {
+          const outputDir = path.resolve(viteConfig.build.outDir);
+          const address = server.httpServer?.address();
+          if (!address || typeof address === "string") {
+            console.error("Unexpected dev server address", address);
+            process.exit(1);
+          }
+          const protocol = server.config.server.https ? "https" : "http";
+          const host = address.address;
+          const port = address.port;
+          const devServerUrl = `${protocol}://${host}:${port}`;
+          if (!fs.existsSync(outputDir)) {
+            fs.mkdirSync(outputDir);
+          }
+          const fileUrl = path.resolve(outputDir, fileName);
+
+          const scriptList = getIndexHtmlContent();
+
+          fs.writeFileSync(
+            fileUrl,
+            kintoneModuleHack(devServerUrl, scriptList)
+          );
+
+          const env = validateEnv(viteConfig);
+
+          if (env) {
+            devUpdate(env, [fileUrl], inputType).then((r) => {
+              fs.unlinkSync(fileUrl);
+            });
+          } else {
+            console.log("env error");
+          }
+        });
+      },
+    },
+    {
+      name: "vite-plugin-kintone-dev:build",
+      apply: "build",
+      enforce: "post",
+      config: () => ({
+        build: {
+          cssCodeSplit: false,
+          rollupOptions: {
+            output: {
+              format: "iife",
+            },
+          },
+        },
+      }),
+      configResolved(config) {
+        viteConfig = config;
+      },
+      async closeBundle() {
+        const outputDir = path.resolve(viteConfig.build.outDir);
+        const extList = ["js", "css"];
+        const fileList = getDirFiles(outputDir, extList);
+        const env = validateEnv(viteConfig);
+        if (env) {
+          devUpdate(env, fileList, inputType);
+        } else {
+          console.log("env error");
+        }
+      },
+    },
+  ];
+}