refactor retrieving resource paths

packages/app/src/pages/_document.page.tsx

@@ -9,8 +9,7 @@ import Document, {
 } from 'next/document';
 
 import type { CrowiRequest } from '~/interfaces/crowi-request';
-import { GrowiPluginResourceType } from '~/interfaces/plugin';
-import type { IPluginService, GrowiPluginManifestEntries } from '~/server/service/plugin';
+import type { IPluginService, GrowiPluginResourceEntries } from '~/server/service/plugin';
 import loggerFactory from '~/utils/logger';
 
 const logger = loggerFactory('growi:page:_document');
@@ -50,35 +49,23 @@ const HeadersForThemes = (props: HeadersForThemesProps): JSX.Element => {
 };
 
 type HeadersForGrowiPluginProps = {
-  pluginManifestEntries: GrowiPluginManifestEntries;
+  pluginResourceEntries: GrowiPluginResourceEntries;
 }
 const HeadersForGrowiPlugin = (props: HeadersForGrowiPluginProps): JSX.Element => {
-  const { pluginManifestEntries } = props;
+  const { pluginResourceEntries } = props;
 
   return (
     <>
-      { pluginManifestEntries.map(([growiPlugin, manifest]) => {
-        const { types } = growiPlugin.meta;
-
-        const elements: JSX.Element[] = [];
-
-        // add script
-        if (types.includes(GrowiPluginResourceType.Script) || types.includes(GrowiPluginResourceType.Template)) {
-          elements.push(<>
-            {/* eslint-disable-next-line @next/next/no-sync-scripts */ }
-            <script type="module" key={`script_${growiPlugin.installedPath}`}
-              src={`/static/plugins/${growiPlugin.installedPath}/dist/${manifest['client-entry.tsx'].file}`} />
-          </>);
+      { pluginResourceEntries.map(([installedPath, href]) => {
+        if (href.endsWith('.js')) {
+          // eslint-disable-next-line @next/next/no-sync-scripts
+          return <script type="module" key={`script_${installedPath}`} src={href} />;
         }
-        // add link
-        if (types.includes(GrowiPluginResourceType.Script) || types.includes(GrowiPluginResourceType.Style)) {
-          elements.push(<>
-            <link rel="stylesheet" key={`link_${growiPlugin.installedPath}`}
-              href={`/static/plugins/${growiPlugin.installedPath}/dist/${manifest['client-entry.tsx'].css}`} />
-          </>);
+        if (href.endsWith('.css')) {
+          // eslint-disable-next-line @next/next/no-sync-scripts
+          return <link rel="stylesheet" key={`link_${installedPath}`} href={href} />;
         }
-
-        return elements;
+        return <></>;
       }) }
     </>
   );
@@ -89,7 +76,7 @@ interface GrowiDocumentProps {
   customCss: string;
   presetThemesManifest: ViteManifest,
   pluginThemeHref: string | undefined,
-  pluginManifestEntries: GrowiPluginManifestEntries;
+  pluginResourceEntries: GrowiPluginResourceEntries;
 }
 declare type GrowiDocumentInitialProps = DocumentInitialProps & GrowiDocumentProps;
 
@@ -107,7 +94,7 @@ class GrowiDocument extends Document<GrowiDocumentInitialProps> {
     const presetThemesManifest = await import('@growi/preset-themes/dist/themes/manifest.json').then(imported => imported.default);
 
     // retrieve plugin manifests
-    const pluginManifestEntries = await (pluginService as IPluginService).retrieveAllPluginManifestEntries();
+    const pluginResourceEntries = await (pluginService as IPluginService).retrieveAllPluginResourceEntries();
     const pluginThemeHref = await (pluginService as IPluginService).retrieveThemeHref(theme);
 
     return {
@@ -116,13 +103,13 @@ class GrowiDocument extends Document<GrowiDocumentInitialProps> {
       customCss,
       presetThemesManifest,
       pluginThemeHref,
-      pluginManifestEntries,
+      pluginResourceEntries,
     };
   }
 
   override render(): JSX.Element {
     const {
-      customCss, theme, presetThemesManifest, pluginThemeHref, pluginManifestEntries,
+      customCss, theme, presetThemesManifest, pluginThemeHref, pluginResourceEntries,
     } = this.props;
 
     return (
@@ -143,7 +130,7 @@ class GrowiDocument extends Document<GrowiDocumentInitialProps> {
           <link rel='preload' href="/static/fonts/Lato-Bold-latin-ext.woff2" as="font" type="font/woff2" />
           <HeadersForThemes theme={theme}
             presetThemesManifest={presetThemesManifest} pluginThemeHref={pluginThemeHref} />
-          <HeadersForGrowiPlugin pluginManifestEntries={pluginManifestEntries} />
+          <HeadersForGrowiPlugin pluginResourceEntries={pluginResourceEntries} />
         </Head>
         <body>
           <Main />

packages/app/src/server/service/plugin.ts

@@ -23,8 +23,9 @@ const pluginStoringPath = resolveFromRoot('tmp/plugins');
 // https://regex101.com/r/fK2rV3/1
 const githubReposIdPattern = new RegExp(/^\/([^/]+)\/([^/]+)$/);
 
+const PLUGINS_STATIC_DIR = '/static/plugins'; // configured by express.static
 
-export type GrowiPluginManifestEntries = [growiPlugin: GrowiPlugin, manifest: ViteManifest][];
+export type GrowiPluginResourceEntries = [installedPath: string, href: string][];
 
 
 function retrievePluginManifest(growiPlugin: GrowiPlugin): ViteManifest {
@@ -36,7 +37,7 @@ function retrievePluginManifest(growiPlugin: GrowiPlugin): ViteManifest {
 export interface IPluginService {
   install(origin: GrowiPluginOrigin): Promise<void>
   retrieveThemeHref(theme: string): Promise<string | undefined>
-  retrieveAllPluginManifestEntries(): Promise<GrowiPluginManifestEntries>
+  retrieveAllPluginResourceEntries(): Promise<GrowiPluginResourceEntries>
 }
 
 export class PluginService implements IPluginService {
@@ -223,8 +224,7 @@ export class PluginService implements IPluginService {
     try {
       if (matchedPlugin != null && matchedThemeMetadata != null) {
         const manifest = await retrievePluginManifest(matchedPlugin);
-        return '/static/plugins' // configured by express.static
-          + `/${matchedPlugin.installedPath}/dist/${manifest[matchedThemeMetadata.manifestKey].file}`;
+        return `${PLUGINS_STATIC_DIR}/${matchedPlugin.installedPath}/dist/${manifest[matchedThemeMetadata.manifestKey].file}`;
       }
     }
     catch (e) {
@@ -232,19 +232,30 @@ export class PluginService implements IPluginService {
     }
   }
 
-  async retrieveAllPluginManifestEntries(): Promise<GrowiPluginManifestEntries> {
+  async retrieveAllPluginResourceEntries(): Promise<GrowiPluginResourceEntries> {
 
     const GrowiPlugin = mongoose.model('GrowiPlugin') as GrowiPluginModel;
 
-    const entries: GrowiPluginManifestEntries = [];
+    const entries: GrowiPluginResourceEntries = [];
 
     try {
       const growiPlugins = await GrowiPlugin.findEnabledPlugins();
 
       growiPlugins.forEach(async(growiPlugin) => {
         try {
+          const { types } = growiPlugin.meta;
           const manifest = await retrievePluginManifest(growiPlugin);
-          entries.push([growiPlugin, manifest]);
+
+          // add script
+          if (types.includes(GrowiPluginResourceType.Script) || types.includes(GrowiPluginResourceType.Template)) {
+            const href = `${PLUGINS_STATIC_DIR}/${growiPlugin.installedPath}/dist/${manifest['client-entry.tsx'].file}`;
+            entries.push([growiPlugin.installedPath, href]);
+          }
+          // add link
+          if (types.includes(GrowiPluginResourceType.Script) || types.includes(GrowiPluginResourceType.Style)) {
+            const href = `${PLUGINS_STATIC_DIR}/${growiPlugin.installedPath}/dist/${manifest['client-entry.tsx'].css}`;
+            entries.push([growiPlugin.installedPath, href]);
+          }
         }
         catch (e) {
           logger.warn(e);