refactor importing plugin modules

apps/app/src/client/services/activate-plugin.ts

@@ -1,42 +0,0 @@
-import { initializeGrowiFacade, registerGrowiFacade } from '~/utils/growi-facade';
-import loggerFactory from '~/utils/logger';
-
-declare global {
-  // eslint-disable-next-line vars-on-top, no-var
-  var pluginActivators: {
-    [key: string]: {
-      activate: () => void,
-      deactivate: () => void,
-    },
-  };
-}
-
-const logger = loggerFactory('growi:cli:ActivatePluginService');
-
-
-export class ActivatePluginService {
-
-  static async activateAll(): Promise<void> {
-    initializeGrowiFacade();
-
-    // register renderer options to facade
-    const { generateViewOptions, generatePreviewOptions } = await import('./renderer/renderer');
-    registerGrowiFacade({
-      markdownRenderer: {
-        optionsGenerators: {
-          generateViewOptions,
-          generatePreviewOptions,
-        },
-      },
-    });
-
-    if (!('pluginActivators' in window)) {
-      return;
-    }
-
-    Object.entries(pluginActivators).forEach(([, activator]) => {
-      activator.activate();
-    });
-  }
-
-}

apps/app/src/features/activate-plugin/components/GrowiPluginsActivator.client.tsx

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+
+import { initializeGrowiFacade, registerGrowiFacade } from '../utils/growi-facade-utils';
+
+declare global {
+  // eslint-disable-next-line vars-on-top, no-var
+  var pluginActivators: {
+    [key: string]: {
+      activate: () => void,
+      deactivate: () => void,
+    },
+  };
+}
+
+async function activateAll(): Promise<void> {
+  initializeGrowiFacade();
+
+  // register renderer options to facade
+  const { generateViewOptions, generatePreviewOptions } = await import('~/client/services/renderer/renderer');
+  registerGrowiFacade({
+    markdownRenderer: {
+      optionsGenerators: {
+        generateViewOptions,
+        generatePreviewOptions,
+      },
+    },
+  });
+
+  if (!('pluginActivators' in window)) {
+    return;
+  }
+
+  Object.entries(pluginActivators).forEach(([, activator]) => {
+    activator.activate();
+  });
+}
+
+
+export const GrowiPluginsActivator = (): JSX.Element => {
+
+  useEffect(() => {
+    activateAll();
+  }, []);
+
+  return <></>;
+};

apps/app/src/features/activate-plugin/components/index.ts

@@ -0,0 +1 @@
+export * from './GrowiPluginsActivator.client';

apps/app/src/features/activate-plugin/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './utils';

apps/app/src/features/activate-plugin/utils/index.ts

@@ -0,0 +1 @@
+export { getGrowiFacade } from './growi-facade-utils';

apps/app/src/pages/[[...path]].page.tsx

@@ -68,6 +68,7 @@ declare global {
 }
 
 
+const GrowiPluginsActivator = dynamic(() => import('~/features/activate-plugin').then(mod => mod.GrowiPluginsActivator), { ssr: false });
 const DescendantsPageListModal = dynamic(() => import('../components/DescendantsPageListModal').then(mod => mod.DescendantsPageListModal), { ssr: false });
 const UnsavedAlertDialog = dynamic(() => import('../components/UnsavedAlertDialog'), { ssr: false });
 const GrowiSubNavigationSwitcher = dynamic<GrowiSubNavigationSwitcherProps>(() => import('../components/Navbar/GrowiSubNavigationSwitcher')
@@ -368,6 +369,7 @@ const Layout = ({ children, ...props }: LayoutProps): JSX.Element => {
 Page.getLayout = function getLayout(page: React.ReactElement<Props>) {
   return (
     <>
+      <GrowiPluginsActivator />
       <DrawioViewerScript />
 
       <Layout {...page.props}>

apps/app/src/pages/_app.page.tsx

@@ -7,7 +7,6 @@ import { SWRConfig } from 'swr';
 
 import * as nextI18nConfig from '^/config/next-i18next.config';
 
-import { ActivatePluginService } from '~/client/services/activate-plugin';
 import { useI18nextHMR } from '~/services/i18next-hmr';
 import {
   useAppTitle, useConfidential, useGrowiVersion, useSiteUrl, useIsDefaultLogo, useForcedColorScheme,
@@ -22,6 +21,7 @@ import '~/styles/font-icons.scss';
 import '~/styles/style-app.scss';
 import '~/styles/prebuilt/apply-colors.css';
 
+
 const isDev = process.env.NODE_ENV === 'development';
 
 
@@ -44,10 +44,6 @@ function GrowiApp({ Component, pageProps }: GrowiAppProps): JSX.Element {
     import('bootstrap/dist/js/bootstrap');
   }, []);
 
-  useEffect(() => {
-    ActivatePluginService.activateAll();
-  }, []);
-
 
   const commonPageProps = pageProps as CommonProps;
   useAppTitle(commonPageProps.appTitle);

apps/app/src/stores/renderer.tsx

@@ -3,8 +3,8 @@ import { useCallback } from 'react';
 import type { HtmlElementNode } from 'rehype-toc';
 import useSWR, { type SWRResponse } from 'swr';
 
+import { getGrowiFacade } from '~/features/activate-plugin';
 import type { RendererOptions } from '~/interfaces/renderer-options';
-import { getGrowiFacade } from '~/utils/growi-facade';
 
 
 import {

apps/app/src/stores/template.tsx

@@ -1,7 +1,7 @@
 import { ITemplate } from '@growi/core';
 import useSWR, { SWRResponse } from 'swr';
 
-import { getGrowiFacade } from '~/utils/growi-facade';
+import { getGrowiFacade } from '~/features/activate-plugin';
 
 const presetTemplates: ITemplate[] = [
   // preset 1