@konomi-app/k2 0.7.1 → 0.8.1

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/plugin-build.js

@@ -1,6 +1,9 @@
 import { program } from 'commander';
-import { PLUGIN_CONTENTS_DIRECTORY } from '../lib/constants.js';
+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 base from './build-base.js';
 export default function command() {
     program
@@ -11,11 +14,33 @@ export default function command() {
 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');
+        }
         await base({ entries, outDir: PLUGIN_CONTENTS_DIRECTORY });
+        console.log('✨ Built desktop.js and config.js');
         console.log('✨ Build success.');
     }
     catch (error) {

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

@@ -1,16 +1,12 @@
-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';
+import { getTailwindConfig, outputCss } from '../../lib/tailwind.js';
 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,
@@ -25,14 +21,7 @@ async function buildTailwindCSS(params) {
             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());
-            }
+            await outputCss({ inputPath, outputPath, config });
             console.log(chalk.hex('#e5e7eb')(`${new Date().toLocaleTimeString()} `) +
                 chalk.cyan(`[css] `) +
                 outputFileName +
@@ -54,14 +43,10 @@ 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);
+    const tailwindConfig = await getTailwindConfig(pluginConfig.tailwind);
+    const inputFile = path.resolve(pluginConfig.tailwind.css);
     return Promise.all([
-        buildTailwindCSS({ inputFile, outputFileName: 'desktop.css', config: desktopConfig }),
-        buildTailwindCSS({ inputFile, outputFileName: 'config.css', config: configConfig }),
+        buildTailwindCSS({ inputFile, outputFileName: 'desktop.css', config: tailwindConfig.desktop }),
+        buildTailwindCSS({ inputFile, outputFileName: 'config.css', config: tailwindConfig.config }),
     ]);
 };

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,7 +6,7 @@ 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.1.0').description('k2 - 🍳 kintone kitchen 🍳');
+program.name('k2').version('0.8.0').description('k2 - 🍳 kintone kitchen 🍳');
 build();
 viteBuild();
 esbuildBuild();

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/tailwind.js

@@ -0,0 +1,28 @@
+import cssnanoPlugin from 'cssnano';
+import fs from 'fs-extra';
+import path from 'path';
+import postcss from 'postcss';
+import tailwindcss from 'tailwindcss';
+import invariant from 'tiny-invariant';
+import { esmImport } from './import.js';
+export const getTailwindConfig = async (config) => {
+    invariant(config?.config, 'tailwind.config is required');
+    const { config: configPath } = config;
+    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;
+    return { desktop: desktopConfig, config: configConfig };
+};
+export const outputCss = async (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,
+    });
+    await fs.writeFile(outputPath, result.css);
+    if (result.map) {
+        await fs.writeFile(`${outputPath}.map`, result.map.toString());
+    }
+};

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,9 @@ 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.7.1').description('');
+program.name('plugin').version('0.8.0').description('🍳 kintone kitchen 🍳 for kintone plugin');
 build();
+esbuild();
 dev();
 genkey();
 init();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konomi-app/k2",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "description": "kintone sdk",
   "main": "./dist/index.js",
   "type": "module",
@@ -31,6 +31,7 @@
     "chokidar": "^3",
     "commander": "^12",
     "css-loader": "^7.1.2",
+    "cssnano": "^7.0.2",
     "dotenv": "^16",
     "esbuild": "^0.21",
     "express": "^4",
@@ -43,6 +44,7 @@
     "style-loader": "^4",
     "tailwindcss": "^3.4.4",
     "terser-webpack-plugin": "^5",
+    "tiny-invariant": "^1.3.3",
     "ts-loader": "^9",
     "tsconfig-paths-webpack-plugin": "^4",
     "vite": "^5",

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;
+    };
   };
 }