refactor _document.page.tsx

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

@@ -1,7 +1,28 @@
+import { readFileSync } from 'fs';
+import path from 'path';
+
 import { CustomWindow } from '~/interfaces/global';
+import { GrowiPlugin } from '~/interfaces/plugin';
+import { resolveFromRoot } from '~/utils/project-dir-utils';
+
+
+export type GrowiPluginManifestEntries = [growiPlugin: GrowiPlugin, manifest: any][];
+
 
 export class ActivatePluginService {
 
+  static async retrievePluginManifests(growiPlugins: GrowiPlugin[]): Promise<GrowiPluginManifestEntries> {
+    const entries: GrowiPluginManifestEntries = [];
+
+    growiPlugins.forEach(async(growiPlugin) => {
+      const manifestPath = resolveFromRoot(path.join('tmp/plugins', growiPlugin.installedPath, 'dist/manifest.json'));
+      const customManifestStr: string = await readFileSync(manifestPath, 'utf-8');
+      entries.push([growiPlugin, JSON.parse(customManifestStr)]);
+    });
+
+    return entries;
+  }
+
   static activateAll(): void {
     const { pluginActivators } = window as CustomWindow;
 

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

@@ -1,15 +1,12 @@
 import React from 'react';
 
-import fs from 'fs';
-import path from 'path';
-
 import Document, {
   DocumentContext, DocumentInitialProps,
   Html, Head, Main, NextScript,
 } from 'next/document';
 
+import { ActivatePluginService, GrowiPluginManifestEntries } from '~/client/services/activate-plugin';
 import { GrowiPlugin, GrowiPluginResourceType } from '~/interfaces/plugin';
-import { resolveFromRoot } from '~/utils/project-dir-utils';
 
 
 // FIXME: dummy data
@@ -30,24 +27,38 @@ const growiPluginsExample: GrowiPlugin[] = [
 // ------------------
 
 
-type GrowiPluginManifestEntries = [growiPlugin: GrowiPlugin, manifest: any][];
-
-interface GrowiDocumentProps {
+type HeadersForGrowiPluginProps = {
   pluginManifestEntries: GrowiPluginManifestEntries;
 }
-declare type GrowiDocumentInitialProps = DocumentInitialProps & GrowiDocumentProps;
 
-async function retrievePluginManifests(growiPlugins: GrowiPlugin[]): Promise<GrowiPluginManifestEntries> {
-  const entries: GrowiPluginManifestEntries = [];
+const HeadersForGrowiPlugin = (props: HeadersForGrowiPluginProps): JSX.Element => {
+  const { pluginManifestEntries } = props;
+
+  return (
+    <>
+      { pluginManifestEntries.map(([growiPlugin, manifest]) => {
+        // type: script
+        if (growiPlugin.meta.types.includes(GrowiPluginResourceType.Script)) {
+          return (
+            <>
+              <link rel="stylesheet" key={`link_${growiPlugin.installedPath}`}
+                href={`/plugins/${growiPlugin.installedPath}/dist/${manifest['client-entry.tsx'].css}`} />
+              {/* eslint-disable-next-line @next/next/no-sync-scripts */ }
+              <script type="module" key={`script_${growiPlugin.installedPath}`}
+                src={`/plugins/${growiPlugin.installedPath}/dist/${manifest['client-entry.tsx'].file}`} />
+            </>
+          );
+        }
+        return <></>;
+      }) }
+    </>
+  );
+};
 
-  growiPlugins.forEach(async(growiPlugin) => {
-    const manifestPath = resolveFromRoot(path.join('tmp/plugins', growiPlugin.installedPath, 'dist/manifest.json'));
-    const customManifestStr: string = await fs.readFileSync(manifestPath, 'utf-8');
-    entries.push([growiPlugin, JSON.parse(customManifestStr)]);
-  });
-
-  return entries;
+interface GrowiDocumentProps {
+  pluginManifestEntries: GrowiPluginManifestEntries;
 }
+declare type GrowiDocumentInitialProps = DocumentInitialProps & GrowiDocumentProps;
 
 class GrowiDocument extends Document<GrowiDocumentProps> {
 
@@ -55,8 +66,8 @@ class GrowiDocument extends Document<GrowiDocumentProps> {
     const initialProps: DocumentInitialProps = await Document.getInitialProps(ctx);
 
     // TODO: load GrowiPlugin documents from DB
-    // const pluginManifestEntries: GrowiPluginManifestEntries = await retrievePluginManifests(growiPluginsExample);
-    const pluginManifestEntries: GrowiPluginManifestEntries = await retrievePluginManifests([]);
+    // const pluginManifestEntries: GrowiPluginManifestEntries = await ActivatePluginService.retrievePluginManifests(growiPluginsExample);
+    const pluginManifestEntries: GrowiPluginManifestEntries = await ActivatePluginService.retrievePluginManifests([]);
 
     return { ...initialProps, pluginManifestEntries };
   }
@@ -72,17 +83,7 @@ class GrowiDocument extends Document<GrowiDocumentProps> {
           {renderScriptTagsByGroup('basis')}
           {renderStyleTagsByGroup('basis')}
           */}
-          { pluginManifestEntries.map(([growiPlugin, manifest]) => (
-            growiPlugin.meta.types.includes(GrowiPluginResourceType.Script) && (
-              <>
-                <link rel="stylesheet" key={`link_${growiPlugin.installedPath}`}
-                  href={`/plugins/${growiPlugin.installedPath}/dist/${manifest['client-entry.tsx'].css}`} />
-                {/* eslint-disable-next-line @next/next/no-sync-scripts */ }
-                <script type="module" key={`script_${growiPlugin.installedPath}`}
-                  src={`/plugins/${growiPlugin.installedPath}/dist/${manifest['client-entry.tsx'].file}`} />
-              </>
-            )
-          )) }
+          <HeadersForGrowiPlugin pluginManifestEntries={pluginManifestEntries} />
         </Head>
         <body>
           <Main />