@konomi-app/k2 0.8.0 → 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

@@ -26,16 +26,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/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

@@ -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';
@@ -10,6 +11,7 @@ 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');
 build();
+esbuild();
 dev();
 genkey();
 init();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konomi-app/k2",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "kintone sdk",
   "main": "./dist/index.js",
   "type": "module",

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