use IIFE for entry points.

package-lock.json

@@ -1638,9 +1638,9 @@
       }
     },
     "node_modules/@types/node-forge": {
-      "version": "1.3.11",
-      "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.11.tgz",
-      "integrity": "sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==",
+      "version": "1.3.12",
+      "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.12.tgz",
+      "integrity": "sha512-a0ToKlRVnUw3aXKQq2F+krxZKq7B8LEQijzPn5RdFAMatARD2JX9o8FBpMXOOrjob0uc13aN+V/AXniOXW4d9A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -10,7 +10,6 @@
     "prebuild:prod": "npm run gen",
     "build": "cross-env NODE_ENV=development rspack build",
     "build:prod": "cross-env NODE_ENV=production rspack build",
-    "dts-gen": "kintone-dts-gen",
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
     "upload": "env-cmd --silent kintone-plugin-uploader dist/plugin.zip --watch --waiting-dialog-ms 3000"
   },

rspack.config.ts

@@ -9,6 +9,8 @@ const isDev = process.env.NODE_ENV === 'development';
 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',
@@ -17,7 +19,6 @@ export default defineConfig({
   resolve: {
     extensions: ['...', '.ts', '.tsx', '.jsx'],
   },
-  devtool: isDev ? 'inline-cheap-module-source-map' : false,
   module: {
     rules: [
       {

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/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>

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

@@ -3,7 +3,6 @@ import React from 'react';
 import { KintoneRestAPIClient } from '@kintone/rest-api-client';
 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';
@@ -23,8 +22,13 @@ const cachedFormFieldsProperties = moize.promise(async (appId: number): Promise<
   return properties;
 });
 
-const Settings: React.FC = () => {
-  const config = kintone.plugin.app.getConfig(PLUGIN_ID);
+interface SettingsProps {
+  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));

src/config/index.tsx

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

@@ -9,7 +9,8 @@ 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();

src/desktop/index.tsx

@@ -6,6 +6,7 @@ import DesktopApp from './DesktopApp';
 
 import '../common/ui/51-modern-default.css';
 
+((PLUGIN_ID) => {
   kintone.events.on(
     ['app.record.detail.show', 'mobile.app.record.detail.show'],
     async (event: kintone.events.AppRecordDetailShowEvent | kintone.events.MobileAppRecordDetailShowEvent) => {
@@ -23,10 +24,11 @@ kintone.events.on(
 
       ReactDOM.createRoot(root).render(
         <React.StrictMode>
-        <DesktopApp event={event} />
+          <DesktopApp pluginId={PLUGIN_ID} event={event} />
         </React.StrictMode>,
       );
 
       return event;
     },
   );
+})(kintone.$PLUGIN_ID);