@konomi-app/k2 0.5.0 → 0.7.0

package/dist/commands/plugin-dev/create-manifest.js

@@ -0,0 +1,29 @@
+import { outputManifest } from '../../lib/plugin-manifest.js';
+export const getManifest = async (params) => {
+    const { config, port } = params;
+    return outputManifest('dev', {
+        config: {
+            ...config,
+            manifest: {
+                ...config.manifest,
+                dev: {
+                    config: {
+                        ...config.manifest?.dev?.config,
+                        js: [`https://localhost:${port}/config.js`],
+                        css: [`https://localhost:${port}/config.css`],
+                    },
+                    desktop: {
+                        ...config.manifest?.dev?.desktop,
+                        js: [`https://localhost:${port}/desktop.js`],
+                        css: [`https://localhost:${port}/desktop.css`],
+                    },
+                    mobile: {
+                        ...config.manifest?.dev?.mobile,
+                        js: [`https://localhost:${port}/desktop.js`],
+                        css: [`https://localhost:${port}/desktop.css`],
+                    },
+                },
+            },
+        },
+    });
+};

package/dist/commands/plugin-dev/index.js

@@ -0,0 +1,44 @@
+import { program } from 'commander';
+import { importPluginConfig } from '../../lib/import.js';
+import path from 'path';
+import { DEFAULT_PORT, PLUGIN_DEVELOPMENT_DIRECTORY, PLUGIN_WORKSPACE_DIRECTORY, } from '../../lib/constants.js';
+import base from '../dev-base-esbuild.js';
+import { getManifest } from './create-manifest.js';
+import { watchContentsAndUploadZip } from './upload.js';
+import { watchCss } from './tailwind.js';
+export default function command() {
+    program
+        .command('dev')
+        .option('-p, --ppk <ppk>', '.ppk file path', path.join(PLUGIN_WORKSPACE_DIRECTORY, 'private.ppk'))
+        .description('Start development server.')
+        .action(action);
+}
+export async function action(options) {
+    console.group('🍳 Start development server');
+    try {
+        const { ppk: ppkPath } = options;
+        const config = await importPluginConfig();
+        const port = config.server?.port ?? DEFAULT_PORT;
+        const manifest = await getManifest({ config, port });
+        console.log(`📝 manifest.json generated`);
+        Promise.all([watchContentsAndUploadZip({ manifest, ppkPath }), watchCss(config), build(port)]);
+    }
+    catch (error) {
+        throw error;
+    }
+    finally {
+        console.groupEnd();
+    }
+}
+async function build(port) {
+    const entryPoints = ['desktop', 'config'].map((dir) => ({
+        in: path.join('src', dir, 'index.ts'),
+        out: dir,
+    }));
+    base({
+        port,
+        entryPoints,
+        certDir: PLUGIN_WORKSPACE_DIRECTORY,
+        staticDir: PLUGIN_DEVELOPMENT_DIRECTORY,
+    });
+}

package/dist/commands/plugin-dev/tailwind.js

@@ -0,0 +1,67 @@
+import fs from 'fs-extra';
+import path from 'path';
+import postcss from 'postcss';
+import tailwindcss from 'tailwindcss';
+import { PLUGIN_DEVELOPMENT_DIRECTORY } from '../../lib/constants.js';
+import { esmImport } from '../../lib/import.js';
+import chokidar from 'chokidar';
+import chalk from 'chalk';
+async function buildTailwindCSS(params) {
+    const { inputFile, outputFileName, config } = params;
+    const inputPath = path.resolve(inputFile);
+    const outputPath = path.join(PLUGIN_DEVELOPMENT_DIRECTORY, outputFileName);
+    const css = await fs.readFile(inputPath, 'utf8');
+    const watcher = chokidar.watch([...(config.content ?? ['./src/**/*.{ts,tsx}']), inputPath], {
+        ignored: /node_modules/,
+        persistent: true,
+        awaitWriteFinish: {
+            stabilityThreshold: 2000,
+            pollInterval: 100,
+        },
+    });
+    let initialScanComplete = false;
+    const listener = async (type, path) => {
+        try {
+            if (type === 'add' && !initialScanComplete) {
+                return;
+            }
+            const result = await postcss([tailwindcss(config)]).process(css, {
+                from: inputPath,
+                to: outputPath,
+            });
+            await fs.writeFile(outputPath, result.css);
+            if (result.map) {
+                await fs.writeFile(`${outputPath}.map`, result.map.toString());
+            }
+            console.log(chalk.hex('#e5e7eb')(`${new Date().toLocaleTimeString()} `) +
+                chalk.cyan(`[css] `) +
+                outputFileName +
+                (type === 'init' ? ' init' : ` rebuilt`));
+        }
+        catch (error) {
+            console.error('Error building Tailwind CSS:', error);
+        }
+    };
+    await listener('init');
+    watcher.on('ready', () => {
+        initialScanComplete = true;
+    });
+    watcher.on('change', (path) => listener('change', path));
+    watcher.on('add', (path) => listener('add', path));
+    watcher.on('unlink', () => listener('unlink'));
+}
+export const watchCss = async (pluginConfig) => {
+    if (!pluginConfig.tailwind?.css || !pluginConfig.tailwind?.config) {
+        return;
+    }
+    const { css, config: configPath } = pluginConfig.tailwind;
+    const configPathForDesktop = typeof configPath === 'string' ? configPath : configPath.desktop;
+    const configPathForConfig = typeof configPath === 'string' ? configPath : configPath.config;
+    const desktopConfig = (await esmImport(path.resolve(configPathForDesktop))).default;
+    const configConfig = (await esmImport(path.resolve(configPathForConfig))).default;
+    const inputFile = path.resolve(css);
+    return Promise.all([
+        buildTailwindCSS({ inputFile, outputFileName: 'desktop.css', config: desktopConfig }),
+        buildTailwindCSS({ inputFile, outputFileName: 'config.css', config: configConfig }),
+    ]);
+};

package/dist/commands/plugin-dev/upload.js

@@ -0,0 +1,50 @@
+import packer from '@kintone/plugin-packer';
+import { copyPluginContents } from '../../lib/plugin-contents.js';
+import { getContentsZipBuffer, getZipFileNameSuffix, outputContentsZip } from '../../lib/zip.js';
+import fs from 'fs-extra';
+import path from 'path';
+import { PLUGIN_WORKSPACE_DIRECTORY } from '../../lib/constants.js';
+import { uploadZip } from '../../lib/utils.js';
+import chokider from 'chokidar';
+import chalk from 'chalk';
+export const watchContentsAndUploadZip = async (params) => {
+    const { manifest, ppkPath } = params;
+    let initialScanComplete = false;
+    const contentsListener = async () => {
+        try {
+            if (!initialScanComplete) {
+                return;
+            }
+            await copyPluginContents();
+            console.log(chalk.hex('#e5e7eb')(`${new Date().toLocaleTimeString()} `) +
+                chalk.cyan(`[contents] `) +
+                `updated`);
+        }
+        catch (error) {
+            console.error('Error copying plugin contents:', error);
+            return;
+        }
+        await outputContentsZip(manifest);
+        const buffer = await getContentsZipBuffer();
+        const pluginPrivateKey = await fs.readFile(path.resolve(ppkPath), 'utf8');
+        const output = await packer(buffer, pluginPrivateKey);
+        const zipFileName = `plugin${getZipFileNameSuffix('dev')}.zip`;
+        await fs.writeFile(path.join(PLUGIN_WORKSPACE_DIRECTORY, zipFileName), output.plugin);
+        console.log(chalk.hex('#e5e7eb')(`${new Date().toLocaleTimeString()} `) +
+            chalk.cyan(`[upload] `) +
+            `start uploading`);
+        await uploadZip('dev');
+        console.log(chalk.hex('#e5e7eb')(`${new Date().toLocaleTimeString()} `) + chalk.cyan(`[upload] `) + `done`);
+    };
+    const contentsWatcher = chokider.watch(['src/contents/**/*'], {
+        ignored: /node_modules/,
+        persistent: true,
+    });
+    contentsWatcher.on('ready', () => {
+        initialScanComplete = true;
+        contentsListener();
+    });
+    contentsWatcher.on('change', contentsListener);
+    contentsWatcher.on('add', contentsListener);
+    contentsWatcher.on('unlink', contentsListener);
+};

package/dist/commands/{init/index.js → plugin-init.js}

@@ -2,10 +2,10 @@ import { program } from 'commander';
 import fs from 'fs-extra';
 import path from 'path';
 import packer from '@kintone/plugin-packer';
-import { outputManifest } from '../../lib/plugin-manifest.js';
-import { PLUGIN_WORKSPACE_DIRECTORY } from '../../lib/constants.js';
-import { getContentsZipBuffer, outputContentsZip } from '../../lib/zip.js';
-import { copyPluginContents } from '../../lib/plugin-contents.js';
+import { outputManifest } from '../lib/plugin-manifest.js';
+import { PLUGIN_WORKSPACE_DIRECTORY } from '../lib/constants.js';
+import { getContentsZipBuffer, outputContentsZip } from '../lib/zip.js';
+import { copyPluginContents } from '../lib/plugin-contents.js';
 export default function command() {
     program.command('init').description('generate private.ppk and kitting config').action(action);
 }
@@ -26,10 +26,10 @@ export async function action() {
         const output = await packer(buffer, privateKey);
         if (!privateKey) {
             await fs.writeFile(path.join(PLUGIN_WORKSPACE_DIRECTORY, 'private.ppk'), output.privateKey);
-            console.log('🔐 private.ppk generated');
+            console.log('🔑 private.ppk generated');
         }
         else {
-            console.log('🔐 private.ppk already exists. The existing private.ppk will be used.');
+            console.log('🔑 private.ppk already exists. The existing private.ppk will be used.');
         }
         await fs.writeFile(path.join(PLUGIN_WORKSPACE_DIRECTORY, 'plugin.zip'), output.plugin);
         console.log('📦 plugin.zip generated');

package/dist/lib/esbuild.js

@@ -43,9 +43,9 @@ export const getEsbuildContext = async (params) => {
         plugins: [
             {
                 name: 'on-end',
-                setup: ({ onEnd }) => onEnd(() => console.log(chalk.hex('#d1d5db')(`${new Date().toLocaleTimeString()} `) +
-                    chalk.cyan(`[content] `) +
-                    `Compiled successfully.`)),
+                setup: ({ onEnd }) => onEnd(() => console.log(chalk.hex('#e5e7eb')(`${new Date().toLocaleTimeString()} `) +
+                    chalk.cyan(`[js] `) +
+                    `rebuilt`)),
             },
             getSassPlugin(),
         ],

package/dist/lib/utils.js

@@ -20,6 +20,5 @@ KINTONE_PASSWORD
     if (KINTONE_BASIC_AUTH_USERNAME && KINTONE_BASIC_AUTH_PASSWORD) {
         command += ` --basic-auth-username ${KINTONE_BASIC_AUTH_USERNAME} --basic-auth-password ${KINTONE_BASIC_AUTH_PASSWORD}`;
     }
-    command += ' --watch --waiting-dialog-ms 3000';
     return exec(command);
 };

package/dist/plugin.js

@@ -1,14 +1,14 @@
 #!/usr/bin/env node
 import { program } from 'commander';
 import build from './commands/plugin-build.js';
-import dev from './commands/plugin-dev.js';
+import dev from './commands/plugin-dev/index.js';
 import genkey from './commands/plugin-genkey.js';
-import init from './commands/init/index.js';
+import init from './commands/plugin-init.js';
 import manifest from './commands/manifest/index.js';
 import test from './commands/test/index.js';
 import upload from './commands/upload/index.js';
 import zip from './commands/plugin-zip.js';
-program.name('plugin').version('0.0.1').description('');
+program.name('plugin').version('0.7.0').description('');
 build();
 dev();
 genkey();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konomi-app/k2",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "kintone sdk",
   "main": "./dist/index.js",
   "type": "module",
@@ -37,9 +37,11 @@
     "fs-extra": "^11",
     "html-minifier": "^4",
     "mini-css-extract-plugin": "^2",
+    "postcss": "^8.4.38",
     "sass": "^1",
     "sass-loader": "^14",
     "style-loader": "^4",
+    "tailwindcss": "^3.4.4",
     "terser-webpack-plugin": "^5",
     "ts-loader": "^9",
     "tsconfig-paths-webpack-plugin": "^4",
@@ -54,4 +56,4 @@
     "@types/html-minifier": "^4",
     "typescript": "*"
   }
-}
+}

package/types/k2.d.ts

@@ -23,8 +23,6 @@ type Resources = {
 };
 
 declare namespace K2 {
-  type Env = 'dev' | 'prod' | 'standalone';
-
   /**
    * 公開しているプラグインテンプレートで使用する設定ファイル
    */

package/types/plugin.d.ts

@@ -64,12 +64,32 @@ declare namespace Plugin {
      * @see {@link https://github.com/local-bias/kintone-plugin-template | kintone-plugin-template}
      */
     type Config = {
+      /** 一意となるプラグインID */
       id: string;
+      /**
+       * プラグインのバージョン
+       * この設定ファイルの互換性の管理に使用されます
+       */
       version?: 1;
+      /**
+       * プラグインのmanifest.jsonの設定
+       *
+       * `base`プロパティを基準として、環境ごとに`dev`、`prod`、`standalone`のプロパティを上書きする形でマージされます
+       *
+       * - `dev` - 開発環境の設定
+       * - `prod` - 本番環境での設定
+       * - `standalone` - スタンドアロン環境での設定
+       *
+       * @see {@link https://cybozu.dev/ja/kintone/tips/development/plugins/development-plugin/development-kintone-plugin/#manifest | マニフェストファイルの作成}
+       */
       manifest: {
+        /** プラグインの基本設定 */
         base: Manifest;
+        /** 開発環境のmanifest.json */
         dev?: Partial<Manifest>;
+        /** 本番環境のmanifest.json */
         prod?: Partial<Manifest>;
+        /** スタンドアロン環境のmanifest.json */
         standalone?: Partial<Manifest>;
       };
       pluginReleasePageUrl?: string;
@@ -81,6 +101,35 @@ declare namespace Plugin {
         /** 0から65535までのポート番号 */
         port?: number;
       };
+      /**
+       * tailwindcssを使用している場合、設定ファイルのパスとCSSファイルのパスを指定することで、JavaScriptファイルのビルド時にCSSファイルを生成します
+       *
+       * @see {@link https://tailwindcss.com/docs/installation | Tailwind CSS}
+       * @example
+       * ```json
+       * // 共通の設定ファイルを使用する場合
+       * {
+       *  "tailwind": {
+       *   "config": "tailwind.config.js",
+       *  "css": "src/styles/tailwind.css"
+       * }
+       *
+       * // 設定ファイルをプラグイン設定画面、アプリで分ける場合
+       * {
+       * "tailwind": {
+       *   "config": {
+       *     "config": "tailwind.config.js",
+       *     "desktop": "src/styles/tailwind-desktop.css"
+       *   },
+       *   "css": "src/styles/tailwind-mobile.css"
+       * }
+       * ```
+       */
+      tailwind?: {
+        config?: string | { config: string; desktop: string };
+        /** CSSファイルのパス */
+        css?: string;
+      };
     };
   }
 }

package/dist/commands/plugin-dev.js

@@ -1,98 +0,0 @@
-import { program } from 'commander';
-import { importPluginConfig } from '../lib/import.js';
-import path from 'path';
-import { DEFAULT_PORT, PLUGIN_DEVELOPMENT_DIRECTORY, PLUGIN_WORKSPACE_DIRECTORY, } from '../lib/constants.js';
-import fs from 'fs-extra';
-import { outputManifest } from '../lib/plugin-manifest.js';
-import { copyPluginContents } from '../lib/plugin-contents.js';
-import chokider from 'chokidar';
-import { getContentsZipBuffer, getZipFileNameSuffix, outputContentsZip } from '../lib/zip.js';
-import packer from '@kintone/plugin-packer';
-import { uploadZip } from '../lib/utils.js';
-import base from './dev-base-esbuild.js';
-export default function command() {
-    program
-        .command('dev')
-        .option('-p, --ppk <ppk>', '.ppk file path', path.join(PLUGIN_WORKSPACE_DIRECTORY, 'private.ppk'))
-        .description('Start development server.')
-        .action(action);
-}
-export async function action(options) {
-    console.group('🍳 Start development server');
-    try {
-        const { ppk: ppkPath } = options;
-        const config = await importPluginConfig();
-        const port = config.server?.port ?? DEFAULT_PORT;
-        const manifest = await outputManifest('dev', {
-            config: {
-                ...config,
-                manifest: {
-                    ...config.manifest,
-                    dev: {
-                        config: {
-                            ...config.manifest?.dev?.config,
-                            js: [`https://localhost:${port}/config.js`],
-                            css: [`https://localhost:${port}/config.css`],
-                        },
-                        desktop: {
-                            ...config.manifest?.dev?.desktop,
-                            js: [`https://localhost:${port}/desktop.js`],
-                            css: [`https://localhost:${port}/desktop.css`],
-                        },
-                        mobile: {
-                            ...config.manifest?.dev?.mobile,
-                            js: [`https://localhost:${port}/desktop.js`],
-                            css: [`https://localhost:${port}/desktop.css`],
-                        },
-                    },
-                },
-            },
-        });
-        console.log(`📝 manifest.json generated`);
-        const contentsListener = async () => {
-            try {
-                await copyPluginContents();
-                console.log('📁 contents updated');
-            }
-            catch (error) {
-                console.error('📁 contents update failed');
-            }
-        };
-        await contentsListener();
-        const watcher = chokider.watch(['src/contents/**/*'], {
-            ignored: /node_modules/,
-            persistent: true,
-        });
-        watcher.on('change', contentsListener);
-        watcher.on('add', contentsListener);
-        watcher.on('unlink', contentsListener);
-        await outputContentsZip(manifest);
-        const buffer = await getContentsZipBuffer();
-        const pluginPrivateKey = await fs.readFile(path.resolve(ppkPath), 'utf8');
-        const output = await packer(buffer, pluginPrivateKey);
-        const zipFileName = `plugin${getZipFileNameSuffix('dev')}.zip`;
-        await fs.writeFile(path.join(PLUGIN_WORKSPACE_DIRECTORY, zipFileName), output.plugin);
-        console.log(`📤 uploading ${zipFileName} to your kintone`);
-        uploadZip('dev').then(({ stdout, stderr }) => {
-            console.log(stdout);
-            console.error(stderr);
-            console.log('📤 Plugin uploaded');
-        });
-        const entryPoints = ['desktop', 'config'].map((dir) => ({
-            in: path.join('src', dir, 'index.ts'),
-            out: dir,
-        }));
-        base({
-            port,
-            entryPoints,
-            certDir: PLUGIN_WORKSPACE_DIRECTORY,
-            staticDir: PLUGIN_DEVELOPMENT_DIRECTORY,
-        });
-    }
-    catch (error) {
-        throw error;
-    }
-    finally {
-        console.groupEnd();
-    }
-}