From 83f29b8e6369fc15315776a9496b3fc21f33baaf Mon Sep 17 00:00:00 2001 From: Yoshihiro OKUMURA Date: Thu, 3 Jul 2025 18:24:31 +0900 Subject: [PATCH] use IIFE for entry points. --- package-lock.json | 6 ++-- package.json | 1 - rspack.config.ts | 3 +- src/common/constants.ts | 1 + src/common/{global.ts => kintoneUtils.ts} | 5 --- src/common/ui/51-modern-default.css | 6 ++-- src/config/ConfigApp.tsx | 9 +++-- src/config/Settings.tsx | 10 ++++-- src/config/index.tsx | 16 +++++---- src/desktop/DesktopApp.tsx | 5 +-- src/desktop/MenuPanel.tsx | 9 +++-- src/desktop/index.tsx | 44 ++++++++++++----------- 12 files changed, 64 insertions(+), 51 deletions(-) create mode 100644 src/common/constants.ts rename src/common/{global.ts => kintoneUtils.ts} (62%) diff --git a/package-lock.json b/package-lock.json index 2442f07..1808b6a 100644 --- a/package-lock.json +++ b/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": { diff --git a/package.json b/package.json index 607b682..fc510b9 100644 --- a/package.json +++ b/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" }, diff --git a/rspack.config.ts b/rspack.config.ts index 6ab9a18..7f2c7ee 100644 --- a/rspack.config.ts +++ b/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: [ { diff --git a/src/common/constants.ts b/src/common/constants.ts new file mode 100644 index 0000000..23f9f90 --- /dev/null +++ b/src/common/constants.ts @@ -0,0 +1 @@ +export const DOCX_CONTENT_TYPE = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'; diff --git a/src/common/global.ts b/src/common/kintoneUtils.ts similarity index 62% rename from src/common/global.ts rename to src/common/kintoneUtils.ts index ac176e3..7cd9920 100644 --- a/src/common/global.ts +++ b/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'; diff --git a/src/common/ui/51-modern-default.css b/src/common/ui/51-modern-default.css index de6fbce..40d076d 100644 --- a/src/common/ui/51-modern-default.css +++ b/src/common/ui/51-modern-default.css @@ -40,7 +40,7 @@ color: #f6f6f6; } -/* Row for the settings　*/ +/* Row for the settings */ /*
Settings 1
Settings 2
@@ -49,7 +49,7 @@ margin-bottom: 24px; } -/* Heading for each settings*/ +/* Heading for each settings */ /* Heading */ /*
Heading for the setting
@@ -79,7 +79,7 @@ color: #888; } -/* Required settings*/ +/* Required settings */ /*
Title*
*/ diff --git a/src/config/ConfigApp.tsx b/src/config/ConfigApp.tsx index 1088f19..b8983b3 100644 --- a/src/config/ConfigApp.tsx +++ b/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 = (props) => { + const { pluginId } = props; return ( }> - + ); diff --git a/src/config/Settings.tsx b/src/config/Settings.tsx index 3e69092..363c405 100644 --- a/src/config/Settings.tsx +++ b/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 = (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)); diff --git a/src/config/index.tsx b/src/config/index.tsx index d53d932..de63d1b 100644 --- a/src/config/index.tsx +++ b/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'); -invariant(root, 'The plugin configuration root element "plugin-config-root" is not found.'); +((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( - - - , -); + ReactDOM.createRoot(root).render( + + + , + ); +})(kintone.$PLUGIN_ID); diff --git a/src/desktop/DesktopApp.tsx b/src/desktop/DesktopApp.tsx index 322676b..b1ea522 100644 --- a/src/desktop/DesktopApp.tsx +++ b/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 = (props) => { - const { event } = props; + const { pluginId, event } = props; return ( }> - + ); diff --git a/src/desktop/MenuPanel.tsx b/src/desktop/MenuPanel.tsx index acb9580..97483a0 100644 --- a/src/desktop/MenuPanel.tsx +++ b/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 = (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 = (props) => { ); } + const handleOnClickOutputButton = (e: React.MouseEvent) => { e.preventDefault(); const client = new KintoneRestAPIClient(); diff --git a/src/desktop/index.tsx b/src/desktop/index.tsx index 13711bc..6f26fd9 100644 --- a/src/desktop/index.tsx +++ b/src/desktop/index.tsx @@ -6,27 +6,29 @@ import DesktopApp from './DesktopApp'; import '../common/ui/51-modern-default.css'; -kintone.events.on( - ['app.record.detail.show', 'mobile.app.record.detail.show'], - async (event: kintone.events.AppRecordDetailShowEvent | kintone.events.MobileAppRecordDetailShowEvent) => { - const spaceElement = - event.type === 'app.record.detail.show' - ? kintone.app.record.getHeaderMenuSpaceElement() - : kintone.mobile.app.getHeaderSpaceElement(); - invariant( - spaceElement, - 'The header menu space element is not available. Please ensure you are on a Kintone app record detail page.', - ); +((PLUGIN_ID) => { + kintone.events.on( + ['app.record.detail.show', 'mobile.app.record.detail.show'], + async (event: kintone.events.AppRecordDetailShowEvent | kintone.events.MobileAppRecordDetailShowEvent) => { + const spaceElement = + event.type === 'app.record.detail.show' + ? kintone.app.record.getHeaderMenuSpaceElement() + : kintone.mobile.app.getHeaderSpaceElement(); + invariant( + 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'); - spaceElement.appendChild(root); + const root = document.createElement('div'); + spaceElement.appendChild(root); - ReactDOM.createRoot(root).render( - - - , - ); + ReactDOM.createRoot(root).render( + + + , + ); - return event; - }, -); + return event; + }, + ); +})(kintone.$PLUGIN_ID);