use IIFE for entry points.

package.json

@@ -1,13 +1,15 @@
 {
   "name": "kintone-plugin-docx",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "scripts": {
-    "prepare": "node scripts/prepare-private-key.js",
+    "gen": "run-s gen:*",
+    "gen:key": "node scripts/generate-private-key.js",
     "start": "node scripts/npm-start.js",
     "develop": "npm run build -- --watch",
-    "build": "npm run prepare && cross-env NODE_ENV=development rspack build",
+    "prebuild": "npm run gen",
-    "build:prod": "npm run prepare && cross-env NODE_ENV=production rspack build",
+    "prebuild:prod": "npm run gen",
-    "dts-gen": "kintone-dts-gen",
+    "build": "cross-env NODE_ENV=development rspack build",
+    "build:prod": "cross-env NODE_ENV=production rspack build",
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
     "upload": "env-cmd --silent kintone-plugin-uploader dist/plugin.zip --watch --waiting-dialog-ms 3000"
   },
@@ -16,7 +18,7 @@
     "angular-expressions": "^1.4.3",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
-    "docxtemplater": "^3.63.2",
+    "docxtemplater": "^3.65.1",
     "file-saver": "^2.0.5",
     "moize": "^6.1.6",
     "pizzip": "^3.2.0",
@@ -30,22 +32,21 @@
     "@kintone/dts-gen": "^8.1.2",
     "@kintone/plugin-uploader": "^9.1.5",
     "@kintone/webpack-plugin-kintone-plugin": "^8.0.11",
-    "@rspack/cli": "^1.3.13",
+    "@rspack/cli": "^1.4.2",
-    "@rspack/core": "^1.3.13",
+    "@rspack/core": "^1.4.2",
     "@shin-chan/kypes": "^0.0.7",
-    "@swc/helpers": "^0.5.17",
     "@types/file-saver": "^2.0.7",
-    "@types/react": "^19.1.6",
+    "@types/node": "^24.0.10",
-    "@types/react-dom": "^19.1.5",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
     "cross-env": "^7.0.3",
-    "css-loader": "^7.1.2",
     "env-cmd": "^10.1.0",
-    "eslint": "^9.28.0",
+    "eslint": "^9.30.1",
     "eslint-plugin-react": "^7.37.5",
-    "globals": "^16.2.0",
+    "globals": "^16.3.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.2",
-    "style-loader": "^4.0.0",
+    "ts-node": "^10.9.2",
     "typescript": "^5.8.3"
   }
 }

plugin/manifest.json

@@ -1,18 +1,21 @@
 {
   "$schema": "https://raw.githubusercontent.com/kintone/js-sdk/%40kintone/plugin-manifest-validator%4010.2.0/packages/plugin-manifest-validator/manifest-schema.json",
   "manifest_version": 1,
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "APP",
   "desktop": {
-    "js": ["js/desktop.js"]
+    "js": ["js/desktop.js"],
+    "css": ["js/desktop.css"]
   },
   "mobile": {
-    "js": ["js/desktop.js"]
+    "js": ["js/desktop.js"],
+    "css": ["js/desktop.css"]
   },
   "icon": "image/icon.png",
   "config": {
     "html": "html/config.html",
     "js": ["js/config.js"],
+    "css": ["js/config.css"],
     "required_params": ["template"]
   },
   "name": {

rspack.config.js

@@ -1,99 +0,0 @@
-/* eslint-env node */
-
-const path = require('path');
-const KintonePlugin = require('@kintone/webpack-plugin-kintone-plugin');
-
-const isProduction = process.env.NODE_ENV === 'production';
-
-module.exports = {
-  mode: isProduction ? 'production' : 'development',
-  devtool: isProduction ? false : 'inline-cheap-module-source-map',
-  entry: { config: './src/config/index.tsx', desktop: './src/desktop/index.tsx' },
-  output: {
-    path: path.resolve(__dirname, 'plugin', 'js'),
-    filename: '[name].js',
-  },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js'],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(j|t)s$/,
-        exclude: [/[\\/]node_modules[\\/]/],
-        loader: 'builtin:swc-loader',
-        options: {
-          sourceMaps: !isProduction,
-          jsc: {
-            parser: {
-              syntax: 'typescript',
-            },
-            transform: {
-              react: {
-                runtime: 'automatic',
-                development: !isProduction,
-              },
-            },
-            externalHelpers: true,
-          },
-          env: {
-            targets: 'Chrome >= 48',
-          },
-        },
-      },
-      {
-        test: /\.(j|t)sx$/,
-        loader: 'builtin:swc-loader',
-        exclude: [/[\\/]node_modules[\\/]/],
-        options: {
-          sourceMaps: !isProduction,
-          jsc: {
-            parser: {
-              syntax: 'typescript',
-              tsx: true,
-            },
-            transform: {
-              react: {
-                runtime: 'automatic',
-                development: !isProduction,
-              },
-            },
-            externalHelpers: true,
-          },
-          env: {
-            targets: 'Chrome >= 48', // browser compatibility
-          },
-        },
-      },
-      {
-        test: /\.css$/i,
-        use: ['style-loader', 'css-loader'],
-        exclude: /\.module\.css$/,
-      },
-      {
-        test: /\.module\.css$/i,
-        use: [
-          'style-loader',
-          {
-            loader: 'css-loader',
-            options: {
-              importLoaders: 1,
-              sourceMap: !isProduction,
-              modules: {
-                localIdentName: isProduction ? '[hash:base64]' : '[name]__[local]--[hash:base64:5]',
-                namedExport: false,
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-  plugins: [
-    new KintonePlugin({
-      manifestJSONPath: './plugin/manifest.json',
-      privateKeyPath: './private.ppk',
-      pluginZipPath: './dist/plugin.zip',
-    }),
-  ],
-};

rspack.config.ts

@@ -0,0 +1,70 @@
+import { defineConfig } from '@rspack/cli';
+import { rspack } from '@rspack/core';
+
+import KintonePlugin from '@kintone/webpack-plugin-kintone-plugin';
+
+const isDev = process.env.NODE_ENV === 'development';
+
+// Target browsers, see: https://github.com/browserslist/browserslist
+const targets = ['last 2 versions', '> 0.2%', 'not dead', 'Firefox ESR'];
+
+export default defineConfig({
+  mode: isDev ? 'development' : 'production',
+  devtool: isDev ? 'inline-cheap-module-source-map' : false,
+  entry: { config: './src/config/index.tsx', desktop: './src/desktop/index.tsx' },
+  output: {
+    path: './plugin/js',
+    filename: '[name].js',
+  },
+  resolve: {
+    extensions: ['...', '.ts', '.tsx', '.jsx'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(jsx?|tsx?)$/,
+        use: [
+          {
+            loader: 'builtin:swc-loader',
+            options: {
+              jsc: {
+                parser: {
+                  syntax: 'typescript',
+                  tsx: true,
+                },
+              },
+              env: { targets },
+            },
+          },
+        ],
+      },
+    ],
+    parser: {
+      'css/auto': {
+        namedExports: false,
+      },
+    },
+  },
+  plugins: [
+    new KintonePlugin({
+      manifestJSONPath: './plugin/manifest.json',
+      privateKeyPath: './private.ppk',
+      pluginZipPath: './dist/plugin.zip',
+    }),
+  ],
+  optimization: {
+    minimizer: [
+      new rspack.SwcJsMinimizerRspackPlugin(),
+      new rspack.LightningCssMinimizerRspackPlugin({
+        minimizerOptions: { targets },
+      }),
+    ],
+  },
+  experiments: {
+    css: true,
+  },
+  performance: {
+    maxEntrypointSize: 1024000,
+    maxAssetSize: 1024000,
+  },
+});

src/common/Loading.module.css

@@ -7,14 +7,16 @@
   background-color: rgba(0, 0, 0, 0.7);
   z-index: 9999;
 }
-.spinner-container {
+
+.spinnerContainer {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10000;
 }
-.spinner-container .spinner {
+
+.spinnerContainer .spinner {
   font-size: 10px;
   width: 1em;
   height: 1em;
@@ -24,6 +26,7 @@
   animation: mulShdSpin 1.1s infinite ease;
   transform: translateZ(0);
 }
+
 @keyframes mulShdSpin {
   0%,
   100% {

src/common/constants.ts

@@ -0,0 +1 @@
+export const DOCX_CONTENT_TYPE = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';

src/common/kintoneUtils.ts

@@ -1,8 +1,5 @@
 import invariant from 'tiny-invariant';
 
-export const PLUGIN_ID = kintone.$PLUGIN_ID;
-invariant(PLUGIN_ID, 'The PLUGIN_ID is not available. Please ensure you are on a Kintone plugin page.');
-
 const KintoneUserLanguages = ['en', 'ja', 'zh', 'zh-TW', 'es', 'pt-BR', 'th'] as const;
 export type KintoneUserLanguages = (typeof KintoneUserLanguages)[number];
 export const LANGUAGE = kintone.getLoginUser().language as KintoneUserLanguages;
@@ -10,5 +7,3 @@ invariant(
   KintoneUserLanguages.includes(LANGUAGE),
   `Unsupported language: ${LANGUAGE}. Supported languages are: ${KintoneUserLanguages.join(', ')}`,
 );
-
-export const DOCX_CONTENT_TYPE = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';

src/common/stringUtils.ts

@@ -0,0 +1,7 @@
+export const naturalCompare = (a: string, b: string): number => {
+  const locales = new Set<string>([...navigator.languages, 'en-US', 'ja-JP']);
+  return new Intl.Collator(Array.from(locales), {
+    sensitivity: 'variant',
+    numeric: true,
+  }).compare(a, b);
+};

src/common/types.ts

@@ -0,0 +1,5 @@
+import { KintoneFormFieldProperty } from '@kintone/rest-api-client';
+
+export type KintoneFormFieldProperties = {
+  [fieldCode: string]: KintoneFormFieldProperty.OneOf;
+};

src/common/ui/51-modern-default.css

@@ -40,7 +40,7 @@
   color: #f6f6f6;
 }
 
-/* Row for the settings　*/
+/* Row for the settings */
 /*
 <div class="kintoneplugin-row">Settings 1</div>
 <div class="kintoneplugin-row">Settings 2</div>
@@ -49,7 +49,7 @@
   margin-bottom: 24px;
 }
 
-/* Heading for each settings*/
+/* Heading for each settings */
 /* Heading */
 /*
 <div class="kintoneplugin-label">Heading for the setting</div>
@@ -79,7 +79,7 @@
   color: #888;
 }
 
-/* Required settings*/
+/* Required settings */
 /*
 <div class="kintoneplugin-label">Title<span class="kintoneplugin-require">*</span></div>
 */

src/common/ui/KintonePluginAlert.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 
 import clsx from 'clsx';
 
-interface KintonePluginAlertProps {
+export type KintonePluginAlertProps = React.PropsWithChildren<{
   className?: string;
-  children: React.ReactNode;
+}>;
-}
 
 const KintonePluginAlert: React.FC<KintonePluginAlertProps> = (props) => {
   const { className, children } = props;

src/common/ui/KintonePluginButton.tsx

@@ -2,16 +2,15 @@ import React from 'react';
 
 import clsx from 'clsx';
 
-interface KintonePluginButtonProps {
+export type KintonePluginButtonProps = React.PropsWithChildren<{
   className?: string;
-  variant: 'normal' | 'disabled' | 'dialog-ok' | 'dialog-cancel';
+  variant: 'normal' | 'disabled' | 'dialog-ok' | 'dialog-cancel' | 'add-row-image' | 'remove-row-image';
   type?: 'button' | 'submit' | 'reset';
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  children: React.ReactNode;
+}>;
-}
 
 const KintonePluginButton: React.FC<KintonePluginButtonProps> = (props) => {
-  const { className, variant, type, onClick, children } = props;
+  const { className, variant, type = 'button', onClick, children } = props;
   return (
     <button
       className={clsx(`kintoneplugin-button-${variant}`, className)}

src/common/ui/KintonePluginDesc.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 
 import clsx from 'clsx';
 
-interface KintonePluginDescProps {
+export type KintonePluginDescProps = React.PropsWithChildren<{
   className?: string;
-  children: React.ReactNode;
+}>;
-}
 
 const KintonePluginDesc: React.FC<KintonePluginDescProps> = (props) => {
   const { className, children } = props;

src/common/ui/KintonePluginLabel.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 
 import clsx from 'clsx';
 
-interface KintonePluginLabelProps {
+export type KintonePluginLabelProps = React.PropsWithChildren<{
   className?: string;
-  children: React.ReactNode;
+}>;
-}
 
 const KintonePluginLabel: React.FC<KintonePluginLabelProps> = (props) => {
   const { className, children } = props;

src/common/ui/KintonePluginRequire.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 
 import clsx from 'clsx';
 
-interface KintonePluginRequire {
+export type KintonePluginRequire = React.PropsWithChildren<{
   className?: string;
-  children: React.ReactNode;
+}>;
-}
 
 const KintonePluginRequire: React.FC<KintonePluginRequire> = (props) => {
   const { className, children } = props;

src/common/ui/KintonePluginRow.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 
 import clsx from 'clsx';
 
-interface KintonePluginRowProps {
+export type KintonePluginRowProps = React.PropsWithChildren<{
   className?: string;
-  children: React.ReactNode;
+}>;
-}
 
 const KintonePluginRow: React.FC<KintonePluginRowProps> = (props) => {
   const { className, children } = props;

src/common/ui/KintonePluginSelect.tsx

@@ -2,32 +2,42 @@ import React from 'react';
 
 import clsx from 'clsx';
 
-export interface KintonePluginSelectOptionData {
+export type KintonePluginSelectOptionData = {
-  key: string;
   value: string;
   label: string;
   disabled?: boolean;
-}
+};
 
-interface KintonePluginSelectProps {
+export type KintonePluginSelectProps = {
   className?: string;
-  defaultValue?: string;
+  value: string;
-  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  onChange: (value: string) => void;
   options: KintonePluginSelectOptionData[];
-}
+};
 
 const KintonePluginSelect: React.FC<KintonePluginSelectProps> = (props) => {
-  const { className, defaultValue, onChange, options } = props;
+  const { className, value, onChange, options } = props;
-  if (!options || options.length === 0) {
+  const optionWithKeys = React.useMemo(
-    return null; // Return null if no options are provided
+    () =>
+      options.map((option) => ({
+        ...option,
+        key: crypto.randomUUID(),
+      })),
+    [options],
+  );
+  if (options.length === 0) {
+    return null;
   }
+  const handleOnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    onChange(e.target.value);
+  };
   return (
     <div className={clsx('kintoneplugin-select-outer', className)}>
       <div className="kintoneplugin-select">
-        <select defaultValue={defaultValue} onChange={onChange}>
+        <select value={value} onChange={handleOnChange}>
-          {options.map((option) => (
+          {optionWithKeys.map(({ key, value: itemValue, label, disabled }) => (
-            <option key={option.key} value={option.value} disabled={option.disabled}>
+            <option key={key} value={itemValue} disabled={disabled}>
-              {option.label}
+              {label}
             </option>
           ))}
         </select>

src/common/ui/KintonePluginTitle.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 
 import clsx from 'clsx';
 
-interface KintonePluginTitleProps {
+export type KintonePluginTitleProps = React.PropsWithChildren<{
   className?: string;
-  children: React.ReactNode;
+}>;
-}
 
 const KintonePluginTitle: React.FC<KintonePluginTitleProps> = (props) => {
   const { className, children } = props;

src/config/ConfigApp.tsx

@@ -5,11 +5,16 @@ import ErrorFallback from '../common/ErrorFallback';
 import Loading from '../common/Loading';
 import Settings from './Settings';
 
-const ConfigApp: React.FC = () => {
+interface ConfigAppProps {
+  pluginId: string;
+}
+
+const ConfigApp: React.FC<ConfigAppProps> = (props) => {
+  const { pluginId } = props;
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       <React.Suspense fallback={<Loading />}>
-        <Settings />
+        <Settings pluginId={pluginId} />
       </React.Suspense>
     </ErrorBoundary>
   );

src/config/Settings.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { KintoneRestAPIClient } from '@kintone/rest-api-client';
-import { Properties as KintoneFormFieldProperties } from '@kintone/rest-api-client/lib/src/client/types';
 import moize from 'moize';
 import invariant from 'tiny-invariant';
-import { PLUGIN_ID } from '../common/global';
+import { naturalCompare } from '../common/stringUtils';
+import { KintoneFormFieldProperties } from '../common/types';
 import KintonePluginAlert from '../common/ui/KintonePluginAlert';
 import KintonePluginButton from '../common/ui/KintonePluginButton';
 import KintonePluginDesc from '../common/ui/KintonePluginDesc';
@@ -22,18 +22,24 @@ const cachedFormFieldsProperties = moize.promise(async (appId: number): Promise<
   return properties;
 });
 
-const Settings: React.FC = () => {
+interface SettingsProps {
-  const config = kintone.plugin.app.getConfig(PLUGIN_ID);
+  pluginId: string;
+}
+
+const Settings: React.FC<SettingsProps> = (props) => {
+  const { pluginId } = props;
+  const config = kintone.plugin.app.getConfig(pluginId);
   const appId = kintone.app.getId();
   invariant(appId, 'The app ID is not available. Please ensure you are on a Kintone app page.');
   const properties = React.use(cachedFormFieldsProperties(appId));
-  const fileFields = Object.values(properties).filter((property) => property.type === 'FILE');
+  const fileFields = Object.values(properties)
+    .filter((property) => property.type === 'FILE')
+    .sort((a, b) => naturalCompare(`${a.label} (${a.code})`, `${b.label} (${b.code})`));
   const options: KintonePluginSelectOptionData[] = [
-    { key: '-', value: '', label: 'Select a File field', disabled: true }, // Default option
+    { value: '', label: 'Select a File field', disabled: true }, // Default option
     ...fileFields.map((property) => ({
-      key: property.code,
       value: property.code,
-      label: property.label,
+      label: `${property.label} (${property.code})`,
     })),
   ];
 
@@ -49,8 +55,8 @@ const Settings: React.FC = () => {
     });
   };
 
-  const handleOnChangeTemplate = (e: React.ChangeEvent<HTMLSelectElement>) => {
+  const handleOnChangeTemplate = (value: string) => {
-    setTemplate(e.target.value);
+    setTemplate(value);
   };
 
   const handleOnClickCancel = () => {
@@ -71,7 +77,7 @@ const Settings: React.FC = () => {
               No file fields found in the app. Please add a file field to use this plugin.
             </KintonePluginAlert>
           ) : (
-            <KintonePluginSelect defaultValue={template} onChange={handleOnChangeTemplate} options={options} />
+            <KintonePluginSelect value={template} onChange={handleOnChangeTemplate} options={options} />
           )}
         </KintonePluginRow>
         <KintonePluginRow className={styles.buttons}>

src/config/index.tsx

@@ -6,11 +6,13 @@ import ConfigApp from './ConfigApp';
 
 import '../common/ui/51-modern-default.css';
 
-const root = document.getElementById('plugin-config-root');
+((PLUGIN_ID) => {
-invariant(root, 'The plugin configuration root element "plugin-config-root" is not found.');
+  const root = document.getElementById('plugin-config-root');
+  invariant(root, 'The plugin configuration root element "plugin-config-root" is not found.');
 
-ReactDOM.createRoot(root).render(
+  ReactDOM.createRoot(root).render(
-  <React.StrictMode>
+    <React.StrictMode>
-    <ConfigApp />
+      <ConfigApp pluginId={PLUGIN_ID} />
-  </React.StrictMode>,
+    </React.StrictMode>,
-);
+  );
+})(kintone.$PLUGIN_ID);

src/desktop/DesktopApp.tsx

@@ -6,15 +6,16 @@ import Loading from '../common/Loading';
 import MenuPanel from './MenuPanel';
 
 interface DesktopAppProps {
+  pluginId: string;
   event: kintone.events.AppRecordDetailShowEvent | kintone.events.MobileAppRecordDetailShowEvent;
 }
 
 const DesktopApp: React.FC<DesktopAppProps> = (props) => {
-  const { event } = props;
+  const { pluginId, event } = props;
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
       <React.Suspense fallback={<Loading />}>
-        <MenuPanel event={event} />
+        <MenuPanel pluginId={pluginId} event={event} />
       </React.Suspense>
     </ErrorBoundary>
   );

src/desktop/MenuPanel.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 
 import { KintoneFormFieldProperty, KintoneRestAPIClient } from '@kintone/rest-api-client';
-import { Properties as KintoneFormFieldProperties } from '@kintone/rest-api-client/lib/src/client/types';
 import { KintoneRecord } from '@shin-chan/kypes/types/page';
 import dayjs from 'dayjs';
 import Docxtemplater from 'docxtemplater';
@@ -10,7 +9,9 @@ import { saveAs } from 'file-saver';
 import moize from 'moize';
 import PizZip from 'pizzip';
 import invariant from 'tiny-invariant';
-import { DOCX_CONTENT_TYPE, LANGUAGE, PLUGIN_ID } from '../common/global';
+import { DOCX_CONTENT_TYPE } from '../common/constants';
+import { LANGUAGE } from '../common/kintoneUtils';
+import { KintoneFormFieldProperties } from '../common/types';
 import KintonePluginAlert from '../common/ui/KintonePluginAlert';
 import KintonePluginButton from '../common/ui/KintonePluginButton';
 
@@ -19,6 +20,7 @@ interface TemplateData {
 }
 
 interface MenuPanelProps {
+  pluginId: string;
   event: kintone.events.AppRecordDetailShowEvent | kintone.events.MobileAppRecordDetailShowEvent;
 }
 
@@ -181,10 +183,10 @@ const record2data = (properties: KintoneFormFieldProperties, record: Partial<Kin
 };
 
 const MenuPanel: React.FC<MenuPanelProps> = (props) => {
-  const { event } = props;
+  const { pluginId, event } = props;
   const appId = event.appId;
   const properties = React.use(cachedFormFieldsProperties(appId));
-  const config = kintone.plugin.app.getConfig(PLUGIN_ID);
+  const config = kintone.plugin.app.getConfig(pluginId);
   const template: string = config.template ?? '';
   if (template === '') {
     return (
@@ -218,6 +220,7 @@ const MenuPanel: React.FC<MenuPanelProps> = (props) => {
       </KintonePluginAlert>
     );
   }
+
   const handleOnClickOutputButton = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
     const client = new KintoneRestAPIClient();
@@ -229,6 +232,7 @@ const MenuPanel: React.FC<MenuPanelProps> = (props) => {
           paragraphLoop: true,
           linebreaks: true,
           parser: expressionParser,
+          nullGetter: () => '',
         });
         doc.render(record2data(properties, event.record));
         const out = doc.getZip().generate({ type: 'blob', mimeType: DOCX_CONTENT_TYPE });

src/desktop/index.tsx

@@ -6,27 +6,29 @@ import DesktopApp from './DesktopApp';
 
 import '../common/ui/51-modern-default.css';
 
-kintone.events.on(
+((PLUGIN_ID) => {
-  ['app.record.detail.show', 'mobile.app.record.detail.show'],
+  kintone.events.on(
-  async (event: kintone.events.AppRecordDetailShowEvent | kintone.events.MobileAppRecordDetailShowEvent) => {
+    ['app.record.detail.show', 'mobile.app.record.detail.show'],
-    const spaceElement =
+    async (event: kintone.events.AppRecordDetailShowEvent | kintone.events.MobileAppRecordDetailShowEvent) => {
-      event.type === 'app.record.detail.show'
+      const spaceElement =
-        ? kintone.app.record.getHeaderMenuSpaceElement()
+        event.type === 'app.record.detail.show'
-        : kintone.mobile.app.getHeaderSpaceElement();
+          ? kintone.app.record.getHeaderMenuSpaceElement()
-    invariant(
+          : kintone.mobile.app.getHeaderSpaceElement();
-      spaceElement,
+      invariant(
-      'The header menu space element is not available. Please ensure you are on a Kintone app record detail page.',
+        spaceElement,
-    );
+        'The header menu space element is not available. Please ensure you are on a Kintone app record detail page.',
+      );
 
-    const root = document.createElement('div');
+      const root = document.createElement('div');
-    spaceElement.appendChild(root);
+      spaceElement.appendChild(root);
 
-    ReactDOM.createRoot(root).render(
+      ReactDOM.createRoot(root).render(
-      <React.StrictMode>
+        <React.StrictMode>
-        <DesktopApp event={event} />
+          <DesktopApp pluginId={PLUGIN_ID} event={event} />
-      </React.StrictMode>,
+        </React.StrictMode>,
-    );
+      );
 
-    return event;
+      return event;
-  },
+    },
-);
+  );
+})(kintone.$PLUGIN_ID);

src/kintone-env.d.ts

@@ -7,11 +7,6 @@ declare module '*.module.css' {
   const classes: CSSModuleClasses;
   export default classes;
 }
-declare module '*.module.scss' {
-  const classes: CSSModuleClasses;
-  export default classes;
-}
 
 // CSS
 declare module '*.css' {}
-declare module '*.scss' {}

tsconfig.json

@@ -1,73 +1,28 @@
 {
   "compilerOptions": {
-    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+    "lib": ["DOM", "ES2020"],
+    "jsx": "react-jsx",
+    "target": "ES2020",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "useDefineForClassFields": true,
 
-    /* Basic Options */
+    /* modules */
-    // "incremental": true,                   /* Enable incremental compilation */
+    "module": "ESNext",
-    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+    "resolveJsonModule": true,
-    "module": "es2015",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+    "moduleResolution": "bundler",
-    "lib": ["dom", "es2020"],                             /* Specify library files to be included in the compilation. */
+    "esModuleInterop": true,
-    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    "allowImportingTsExtensions": true,
-    // "checkJs": true,                       /* Report errors in .js files. */
-    "jsx": "react",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
-    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
-    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
-    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
-    // "outFile": "./",                       /* Concatenate and emit output to single file. */
-    "outDir": "./plugin",                        /* Redirect output structure to the directory. */
-    "rootDir": "./src",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
-    // "composite": true,                     /* Enable project compilation */
-    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
-    // "removeComments": true,                /* Do not emit comments to output. */
-    // "noEmit": true,                        /* Do not emit outputs. */
-    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
-    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
-    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
 
-    /* Strict Type-Checking Options */
+    /* type checking */
-    "strict": true,                           /* Enable all strict type-checking options. */
+    "strict": true,
-    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    "noUnusedLocals": true,
-    // "strictNullChecks": true,              /* Enable strict null checks. */
+    "noUnusedParameters": true
-    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
-    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
-    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
-    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
-    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
-
-    /* Additional Checks */
-    // "noUnusedLocals": true,                /* Report errors on unused locals. */
-    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
-    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
-    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
-
-    /* Module Resolution Options */
-    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
-    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
-    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
-    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
-    // "typeRoots": [],                       /* List of folders to include type definitions from. */
-    // "types": [],                           /* Type declaration files to be included in compilation. */
-    // "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
-    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
-    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
-    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
-
-    /* Source Map Options */
-    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
-    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
-    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
-    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
-
-    /* Experimental Options */
-    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
-    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
-
-    /* Advanced Options */
-    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
-    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
   },
-  "include": [
+  "include": ["src/**/*", "./node_modules/@kintone/dts-gen/kintone.d.ts"],
-    "src/**/*",
+  "ts-node": {
-    "./node_modules/@kintone/dts-gen/kintone.d.ts"
+    "compilerOptions": {
-  ]
+      "module": "CommonJS"
+    }
+  }
 }