@konomi-app/k2 0.8.0 → 0.9.0

package/dist/commands/dev-base.js

@@ -10,7 +10,7 @@ export default function action(params) {
 }
 async function build(params) {
     const { entryPoints, staticDir: outdir } = params;
-    return buildWithEsbuild({ entryPoints, outdir });
+    return buildWithEsbuild({ entryPoints, outdir, watch: true });
 }
 async function server(params) {
     const { certDir, port, staticDir } = params;

package/dist/commands/lint.js

@@ -0,0 +1,19 @@
+import { program } from 'commander';
+import { lint } from '../lib/lint.js';
+export default function command() {
+    program
+        .command('lint')
+        .description('Lint source files')
+        .option('-c, --config <config>', 'Config file path')
+        .action(action);
+}
+export async function action(options) {
+    try {
+        lint();
+    }
+    catch (error) {
+        throw error;
+    }
+    finally {
+    }
+}

package/dist/commands/plugin-build.js

@@ -5,6 +5,7 @@ import { PLUGIN_CONTENTS_DIRECTORY } from '../lib/constants.js';
 import { importPluginConfig } from '../lib/import.js';
 import { getTailwindConfig, outputCss } from '../lib/tailwind.js';
 import base from './build-base.js';
+import { lint } from '../lib/lint.js';
 export default function command() {
     program
         .command('build')
@@ -15,6 +16,9 @@ export async function action() {
     console.group('🍳 Build the project for production');
     try {
         const config = await importPluginConfig();
+        if (config?.lint?.build) {
+            await lint();
+        }
         if (!fs.existsSync(PLUGIN_CONTENTS_DIRECTORY)) {
             await fs.mkdir(PLUGIN_CONTENTS_DIRECTORY, { recursive: true });
         }
@@ -26,16 +30,13 @@ export async function action() {
             const tailwindConfig = await getTailwindConfig(config.tailwind);
             const inputFile = path.resolve(config.tailwind.css);
             const inputPath = path.resolve(inputFile);
-            const css = await fs.readFile(inputPath, 'utf8');
             await outputCss({
-                css,
                 inputPath,
                 outputPath: path.join(PLUGIN_CONTENTS_DIRECTORY, 'config.css'),
                 config: tailwindConfig.config,
             });
             console.log('✨ Built config.css');
             await outputCss({
-                css,
                 inputPath,
                 outputPath: path.join(PLUGIN_CONTENTS_DIRECTORY, 'desktop.css'),
                 config: tailwindConfig.config,

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

@@ -1,4 +1,3 @@
-import fs from 'fs-extra';
 import path from 'path';
 import { PLUGIN_DEVELOPMENT_DIRECTORY } from '../../lib/constants.js';
 import chokidar from 'chokidar';
@@ -8,7 +7,6 @@ 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,
@@ -23,7 +21,7 @@ async function buildTailwindCSS(params) {
             if (type === 'add' && !initialScanComplete) {
                 return;
             }
-            await outputCss({ css, inputPath, outputPath, config });
+            await outputCss({ inputPath, outputPath, config });
             console.log(chalk.hex('#e5e7eb')(`${new Date().toLocaleTimeString()} `) +
                 chalk.cyan(`[css] `) +
                 outputFileName +

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

@@ -42,7 +42,8 @@ export const watchContentsAndUploadZip = async (params) => {
         catch (error) {
             console.log(chalk.hex('#e5e7eb')(`${new Date().toLocaleTimeString()} `) +
                 chalk.cyan(`[upload] `) +
-                chalk.red(`failed`));
+                chalk.red(`failed`) +
+                chalk.hex('#e5e7eb')(`: ${error?.message ?? 'Unknown error'}`));
         }
     };
     const contentsWatcher = chokider.watch(['src/contents/**/*'], {

package/dist/commands/plugin-esbuild.js

@@ -0,0 +1,61 @@
+import { program } from 'commander';
+import fs from 'fs-extra';
+import path from 'path';
+import { PLUGIN_CONTENTS_DIRECTORY } from '../lib/constants.js';
+import { importPluginConfig } from '../lib/import.js';
+import { getTailwindConfig, outputCss } from '../lib/tailwind.js';
+import { buildWithEsbuild } from '../lib/esbuild.js';
+export default function command() {
+    program
+        .command('esbuild')
+        .description("Build the project for production. (It's a wrapper of webpack build command.)")
+        .action(action);
+}
+export async function action() {
+    console.group('🍳 Build the project for production');
+    try {
+        const config = await importPluginConfig();
+        if (!fs.existsSync(PLUGIN_CONTENTS_DIRECTORY)) {
+            await fs.mkdir(PLUGIN_CONTENTS_DIRECTORY, { recursive: true });
+        }
+        const entries = {
+            desktop: path.join('src', 'desktop', 'index.ts'),
+            config: path.join('src', 'config', 'index.ts'),
+        };
+        if (config.tailwind?.css && config.tailwind?.config) {
+            const tailwindConfig = await getTailwindConfig(config.tailwind);
+            const inputFile = path.resolve(config.tailwind.css);
+            const inputPath = path.resolve(inputFile);
+            await outputCss({
+                inputPath,
+                outputPath: path.join(PLUGIN_CONTENTS_DIRECTORY, 'config.css'),
+                config: tailwindConfig.config,
+            });
+            console.log('✨ Built config.css');
+            await outputCss({
+                inputPath,
+                outputPath: path.join(PLUGIN_CONTENTS_DIRECTORY, 'desktop.css'),
+                config: tailwindConfig.config,
+            });
+            console.log('✨ Built desktop.css');
+        }
+        const entryPoints = ['desktop', 'config'].map((dir) => ({
+            in: path.join('src', dir, 'index.ts'),
+            out: dir,
+        }));
+        await buildWithEsbuild({
+            entryPoints,
+            outdir: PLUGIN_CONTENTS_DIRECTORY,
+            minify: true,
+            sourcemap: false,
+        });
+        console.log('✨ Built desktop.js and config.js');
+        console.log('✨ Build success.');
+    }
+    catch (error) {
+        throw error;
+    }
+    finally {
+        console.groupEnd();
+    }
+}

package/dist/index.js

@@ -6,11 +6,13 @@ import dev from './commands/dev.js';
 import viteDev from './commands/dev-vite.js';
 import genkey from './commands/genkey.js';
 import esbuildBuild from './commands/build-esbuild.js';
-program.name('k2').version('0.8.0').description('k2 - 🍳 kintone kitchen 🍳');
+import lint from './commands/lint.js';
+program.name('k2').version('0.9.0').description('k2 - 🍳 kintone kitchen 🍳');
 build();
 viteBuild();
 esbuildBuild();
 dev();
 viteDev();
 genkey();
+lint();
 program.parse(process.argv);

package/dist/lib/esbuild-sass-plugin.js

@@ -0,0 +1,36 @@
+import { compile } from 'sass';
+import { resolve } from 'path';
+export const getSassPlugin = () => {
+    const pluginName = 'esbuild-plugin-sass';
+    return {
+        name: pluginName,
+        setup(build) {
+            build.onResolve({ filter: /\.s[ac]ss$/ }, (args) => ({
+                path: resolve(args.resolveDir, args.path),
+                namespace: pluginName,
+            }));
+            build.onLoad({ filter: /.*/, namespace: pluginName }, async (args) => {
+                try {
+                    const result = compile(args.path);
+                    return {
+                        contents: result.css,
+                        loader: 'css',
+                        watchFiles: [args.path],
+                    };
+                }
+                catch (error) {
+                    return {
+                        pluginName,
+                        errors: [
+                            {
+                                text: error instanceof Error ? error.message : JSON.stringify(error),
+                                pluginName,
+                                location: { file: args.path, namespace: pluginName },
+                            },
+                        ],
+                    };
+                }
+            });
+        },
+    };
+};

package/dist/lib/esbuild.js

@@ -1,58 +1,39 @@
 import chalk from 'chalk';
 import esbuild from 'esbuild';
-import { compile } from 'sass';
-import { resolve } from 'path';
-export const getSassPlugin = () => {
-    const pluginName = 'esbuild-plugin-sass';
+import { getSassPlugin } from './esbuild-sass-plugin.js';
+const completeBuildOptions = (params) => {
     return {
-        name: pluginName,
-        setup(build) {
-            build.onResolve({ filter: /\.s[ac]ss$/ }, (args) => ({
-                path: resolve(args.resolveDir, args.path),
-                namespace: pluginName,
-            }));
-            build.onLoad({ filter: /.*/, namespace: pluginName }, async (args) => {
-                try {
-                    const result = compile(args.path);
-                    return {
-                        contents: result.css,
-                        loader: 'css',
-                        watchFiles: [args.path],
-                    };
-                }
-                catch (error) {
-                    return {
-                        pluginName,
-                        errors: [
-                            {
-                                text: error instanceof Error ? error.message : JSON.stringify(error),
-                                pluginName,
-                                location: { file: args.path, namespace: pluginName },
-                            },
-                        ],
-                    };
-                }
-            });
-        },
-    };
-};
-export const getEsbuildContext = async (params) => {
-    return esbuild.context({
         bundle: true,
         platform: 'browser',
+        ...params,
+        plugins: [...(params.plugins ?? []), getSassPlugin()],
+    };
+};
+const completeDevBuildOptions = (params) => {
+    return completeBuildOptions({
+        ...params,
         plugins: [
+            ...(params.plugins ?? []),
             {
                 name: 'on-end',
                 setup: ({ onEnd }) => onEnd(() => console.log(chalk.hex('#e5e7eb')(`${new Date().toLocaleTimeString()} `) +
                     chalk.cyan(`[js] `) +
                     `rebuilt`)),
             },
-            getSassPlugin(),
         ],
-        ...params,
     });
 };
+export const getEsbuildContext = async (params) => {
+    return esbuild.context(completeDevBuildOptions(params));
+};
 export const buildWithEsbuild = async (params) => {
-    const context = await getEsbuildContext(params);
-    context.watch();
+    const { watch = false, ...rest } = params;
+    if (watch) {
+        const context = await getEsbuildContext(rest);
+        context.watch();
+    }
+    else {
+        const options = completeBuildOptions(rest);
+        await esbuild.build(options);
+    }
 };

package/dist/lib/lint.js

@@ -0,0 +1,54 @@
+import { ESLint } from 'eslint';
+export async function lint() {
+    const eslint = new ESLint({
+        baseConfig: {
+            env: {
+                browser: true,
+                es2021: true,
+            },
+            extends: [
+                'eslint:recommended',
+                'plugin:@typescript-eslint/recommended',
+                'plugin:react/recommended',
+                'prettier',
+            ],
+            parser: '@typescript-eslint/parser',
+            parserOptions: {
+                ecmaVersion: 'latest',
+                sourceType: 'module',
+                project: './tsconfig.json',
+                ecmaFeatures: {
+                    jsx: true,
+                },
+            },
+            plugins: ['@typescript-eslint', 'react'],
+            rules: {
+                'react/prop-types': 'off',
+            },
+            overrides: [
+                {
+                    files: ['*.ts', '*.tsx'],
+                    rules: {
+                        'react/prop-types': 'off',
+                    },
+                },
+            ],
+            settings: {
+                react: {
+                    version: 'detect',
+                },
+            },
+        },
+    });
+    const results = await eslint.lintFiles(['src/**/*.ts', 'src/**/*.tsx']);
+    const formatter = await eslint.loadFormatter('stylish');
+    const resultText = formatter.format(results);
+    console.group('👕 Lint Results');
+    console.log(resultText);
+    console.groupEnd();
+    const hasErrors = results.some((result) => result.errorCount > 0);
+    if (hasErrors) {
+        console.error('🚨 Lint errors found');
+        process.exit(1);
+    }
+}

package/dist/lib/tailwind.js

@@ -15,7 +15,8 @@ export const getTailwindConfig = async (config) => {
     return { desktop: desktopConfig, config: configConfig };
 };
 export const outputCss = async (params) => {
-    const { inputPath, outputPath, config, css, minify = false } = params;
+    const { inputPath, outputPath, config, minify = false } = params;
+    const css = await fs.readFile(inputPath, 'utf8');
     const result = await postcss([tailwindcss(config), ...(minify ? [cssnanoPlugin()] : [])]).process(css, {
         from: inputPath,
         to: outputPath,

package/dist/plugin.js

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 import { program } from 'commander';
 import build from './commands/plugin-build.js';
+import esbuild from './commands/plugin-esbuild.js';
 import dev from './commands/plugin-dev/index.js';
 import genkey from './commands/plugin-genkey.js';
 import init from './commands/plugin-init.js';
@@ -8,8 +9,10 @@ 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.8.0').description('🍳 kintone kitchen 🍳 for kintone plugin');
+import lint from './commands/lint.js';
+program.name('plugin').version('0.9.0').description('🍳 kintone kitchen 🍳 for kintone plugin');
 build();
+esbuild();
 dev();
 genkey();
 init();
@@ -17,4 +20,5 @@ manifest();
 test();
 upload();
 zip();
+lint();
 program.parse(process.argv);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konomi-app/k2",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "kintone sdk",
   "main": "./dist/index.js",
   "type": "module",
@@ -26,6 +26,8 @@
   "dependencies": {
     "@kintone/plugin-packer": "^8",
     "@kintone/plugin-uploader": "^9",
+    "@typescript-eslint/eslint-plugin": "^7.12.0",
+    "@typescript-eslint/parser": "^7.12.0",
     "archiver": "^7",
     "chalk": "^5",
     "chokidar": "^3",
@@ -34,6 +36,12 @@
     "cssnano": "^7.0.2",
     "dotenv": "^16",
     "esbuild": "^0.21",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^17.8.1",
+    "eslint-plugin-promise": "^6.2.0",
+    "eslint-plugin-react": "^7.34.2",
     "express": "^4",
     "fs-extra": "^11",
     "html-minifier": "^4",

package/types/k2.d.ts

@@ -32,5 +32,16 @@ declare namespace K2 {
       /** 0から65535までのポート番号 */
       port?: number;
     };
+
+    /**
+     * tailwindcssを使用している場合、設定ファイルのパスとCSSファイルのパスを指定することで、JavaScriptファイルのビルド時にCSSファイルを生成します
+     *
+     * @see {@link https://tailwindcss.com/docs/installation | Tailwind CSS}
+     */
+    tailwind?: {
+      config?: string;
+      /** CSSファイルのパス */
+      css?: string;
+    };
   };
 }

package/types/plugin.d.ts

@@ -101,6 +101,12 @@ declare namespace Plugin {
         /** 0から65535までのポート番号 */
         port?: number;
       };
+
+      lint?: {
+        build?: boolean;
+        dev?: boolean;
+      };
+
       /**
        * tailwindcssを使用している場合、設定ファイルのパスとCSSファイルのパスを指定することで、JavaScriptファイルのビルド時にCSSファイルを生成します
        *