feat: new client integration

package.json

@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@apidevtools/swagger-parser": "^10.1.0",
-    "@diplodoc/client": "0.0.6",
+    "@diplodoc/client": "0.0.7",
     "@diplodoc/markdown-translation": "^0.12.0",
     "@diplodoc/mermaid-extension": "0.0.5",
     "@diplodoc/openapi-extension": "^1.2.7",

scripts/build.cli.js

@@ -1,8 +1,18 @@
 const esbuild = require('esbuild');
+const shell = require('shelljs');
+
+const client = require('./client');
 const {version, dependencies} = require('../package.json');
-const {target} = require('../tsconfig.json').compilerOptions;
+const {compilerOptions: {target}} = require('../tsconfig.json');
+
 const diplodocExtensions = Object.keys(dependencies).filter((name) => name.startsWith('@diplodoc'));
 
+for (const [type, path] of Object.entries(client.src)) {
+    const dst = client.dst[type];
+
+    shell.cp('-f', path, dst);
+}
+
 const commonConfig = {
     tsconfig: './tsconfig.json',
     packages: 'external',

scripts/client.js

@@ -0,0 +1,21 @@
+const path = require('path');
+
+const CLIENT_PATH = path.dirname(require.resolve('@diplodoc/client'));
+const BUILD_PATH = 'build';
+const BUNDLE_JS_FILENAME = 'app.client.js';
+const BUNDLE_CSS_FILENAME = 'app.client.css';
+
+const src = (target) => path.resolve(CLIENT_PATH, target);
+const dst = (target) => path.resolve(BUILD_PATH, target);
+
+
+module.exports = {
+    dst: {
+        js: dst(BUNDLE_JS_FILENAME),
+        css: dst(BUNDLE_CSS_FILENAME),
+    },
+    src: {
+        js: src(BUNDLE_JS_FILENAME),
+        css: src(BUNDLE_CSS_FILENAME),
+    },
+};

src/steps/processAssets.ts

@@ -1,8 +1,7 @@
 import walkSync from 'walk-sync';
-import {resolve} from 'path';
 import shell from 'shelljs';
 
-import {BUNDLE_JS_FILENAME, BUNDLE_CSS_FILENAME, BUILD_FOLDER_PATH} from '../constants';
+import client from '../../scripts/client';
 import {ArgvService} from '../services';
 import {copyFiles} from '../utils';
 
@@ -28,11 +27,10 @@ export function processAssets(outputBundlePath: string) {
 
     copyFiles(inputFolderPath, outputFolderPath, assetFilePath);
 
-    const src = (file: string) => resolve(BUILD_FOLDER_PATH, file);
-    const dst = (file: string) => resolve(outputBundlePath, file);
-
     /* Copy js bundle to user' output folder */
     shell.mkdir('-p', outputBundlePath);
-    shell.cp(src(BUNDLE_JS_FILENAME), dst(BUNDLE_JS_FILENAME));
-    shell.cp(src(BUNDLE_CSS_FILENAME), dst(BUNDLE_CSS_FILENAME));
+
+    for (const path of Object.values(client.dst)) {
+        shell.cp(path, outputBundlePath);
+    }
 }

src/steps/processPages.ts

@@ -58,7 +58,7 @@ export async function processPages(outputBundlePath: string): Promise<void> {
     }));
 
     if (singlePage) {
-        await saveSinglePages(outputBundlePath);
+        await saveSinglePages();
     }
 }
 
@@ -97,10 +97,9 @@ function getPathData(
     return pathData;
 }
 
-async function saveSinglePages(outputBundlePath: string) {
+async function saveSinglePages() {
     const {
         input: inputFolderPath,
-        output: outputFolderPath,
         lang,
         resources,
     } = ArgvService.getConfig();
@@ -133,13 +132,10 @@ async function saveSinglePages(outputBundlePath: string) {
                 lang: lang || Lang.RU,
             };
 
-            const outputTocDir = resolve(outputFolderPath, relative(inputFolderPath, tocDir));
-            const relativeOutputBundlePath = relative(outputTocDir, outputBundlePath);
-
             // Save the full single page for viewing locally
             const singlePageFn = join(tocDir, SINGLE_PAGE_FILENAME);
             const singlePageDataFn = join(tocDir, SINGLE_PAGE_DATA_FILENAME);
-            const singlePageContent = generateStaticMarkup(pageData, relativeOutputBundlePath);
+            const singlePageContent = generateStaticMarkup(pageData);
 
             writeFileSync(singlePageFn, singlePageContent);
             writeFileSync(singlePageDataFn, JSON.stringify(pageData));

src/utils/markup.ts

@@ -1,17 +1,18 @@
 import {platform} from 'process';
 
-import {BUNDLE_JS_FILENAME, BUNDLE_CSS_FILENAME, CUSTOM_STYLE, Platforms, ResourceType} from '../constants';
+import {CUSTOM_STYLE, Platforms, ResourceType} from '../constants';
 import {SinglePageResult, Resources} from '../models';
 import {ArgvService, PluginService} from '../services';
 import {preprocessPageHtmlForSinglePage} from './singlePage';
 import {render, DocInnerProps, DocPageData} from '@diplodoc/client';
+import client from '../../scripts/client';
 
 export interface TitleMeta {
     title?: string;
 }
 export type Meta = TitleMeta & Resources;
 
-export function generateStaticMarkup(props: DocInnerProps<DocPageData>, pathToBundle: string): string {
+export function generateStaticMarkup(props: DocInnerProps<DocPageData>): string {
     const {title: metaTitle, style, script} = props.data.meta as Meta || {};
     const {title: tocTitle} = props.data.toc;
     const {title: pageTitle} = props.data;
@@ -40,7 +41,7 @@ export function generateStaticMarkup(props: DocInnerProps<DocPageData>, pathToBu
                         height: 100vh;
                     }
                 </style>
-                <link type="text/css" rel="stylesheet" href="${pathToBundle}/${BUNDLE_CSS_FILENAME}" />
+                <link type="text/css" rel="stylesheet" href="${client.dst.css}" />
                 ${PluginService.getHeadContent()}
                 ${resources}
             </head>
@@ -50,7 +51,7 @@ export function generateStaticMarkup(props: DocInnerProps<DocPageData>, pathToBu
                    window.STATIC_CONTENT = ${staticContent}
                    window.__DATA__ = ${JSON.stringify(props)};
                 </script>
-                <script type="application/javascript" src="${pathToBundle}/${BUNDLE_JS_FILENAME}"></script>
+                <script type="application/javascript" src="${client.dst.js}"></script>
             </body>
         </html>
     `;