refactor: support config metadata, update script and build config (#6460

)

* refactor: support config metadata, update script and build config

* refactor: add waitForRender config

---------

Co-authored-by: antv <[email protected]>

packages/g6-ssr/__tests__/test.spec.ts → packages/g6-ssr/__tests__/graph.spec.ts

@@ -1,17 +1,35 @@
 import { existsSync, readFileSync } from 'fs';
 import { join } from 'path';
-import type { Graph } from '../src';
+import type { Graph, MetaData } from '../src';
 import { createGraph } from '../src';
 
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace jest {
     interface Matchers<R> {
-      toMatchFile(path: string): R;
+      toMatchFile(path: string, meta?: MetaData): R;
     }
   }
 }
 
+expect.extend({
+  toMatchFile: (received: Graph, path: string, meta?: MetaData) => {
+    const _path = join(__dirname, path);
+    const pass = existsSync(_path) ? received.toBuffer(meta).equals(readFileSync(_path)) : true;
+    if (pass) {
+      return {
+        message: () => 'passed',
+        pass: true,
+      };
+    } else {
+      return {
+        message: () => 'expected files are equal',
+        pass: false,
+      };
+    }
+  },
+});
+
 describe('createGraph', () => {
   const fn = async (outputType?: any) => {
     const data = (await fetch('https://assets.antv.antgroup.com/g6/circular.json').then((res) => res.json())) as any;
@@ -36,24 +54,7 @@ describe('createGraph', () => {
     });
   };
 
-  expect.extend({
-    toMatchFile: (received: Graph, path: string) => {
-      const pass = existsSync(path) ? received.toBuffer().equals(readFileSync(path)) : true;
-      if (pass) {
-        return {
-          message: () => 'passed',
-          pass: true,
-        };
-      } else {
-        return {
-          message: () => 'expected files are equal',
-          pass: false,
-        };
-      }
-    },
-  });
-
-  it('image image', async () => {
+  it('image png', async () => {
     const graph = await fn();
 
     expect(graph).toMatchFile('./assets/image.png');
@@ -66,7 +67,19 @@ describe('createGraph', () => {
   it('file pdf', async () => {
     const graph = await fn('pdf');
 
-    graph.exportToFile(join(__dirname, '/assets/file'));
+    const metadata = {
+      title: 'Chart',
+      author: 'AntV',
+      creator: 'Aaron',
+      subject: 'Test',
+      keywords: 'antv g2 chart pdf',
+      creationDate: new Date(1730304000000), // 2024-10-31 00:00:00 UTC+8
+      modDate: new Date(1730304000000), // 2024-10-31 00:00:00 UTC+8
+    };
+
+    expect(graph).toMatchFile('./assets/file.pdf', metadata);
+
+    graph.exportToFile(join(__dirname, '/assets/file'), metadata);
 
     graph.destroy();
   });

packages/g6-ssr/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antv/g6-ssr",
   "version": "0.0.1",
-  "description": "",
+  "description": "Support SSR for G6",
   "keywords": [
     "antv",
     "g6",
@@ -19,19 +19,19 @@
   "scripts": {
     "build": "rimraf ./dist && rollup -c",
     "ci": "run-s lint type-check build test",
-    "dev": "tsx ./src/index.ts",
     "lint": "eslint ./src __tests__ --quiet && prettier ./src __tests__ --check",
     "prepublishOnly": "npm run ci",
-    "test": "jest",
+    "test": "run-s test:*",
+    "test:bin": "node ./bin/g6-ssr.js export -i ./__tests__/graph-options.json -o __tests__/assets/bin",
+    "test:unit": "jest",
     "type-check": "tsc --noEmit -p tsconfig.test.json"
   },
   "dependencies": {
     "@antv/g": "^6.1.3",
     "@antv/g-canvas": "^2.0.12",
-    "@antv/g6": "5.0.28-alpha.1",
+    "@antv/g6": "workspace:*",
     "cac": "^6.7.14",
-    "canvas": "^2.11.2",
-    "webpack-cli": "^5.1.4"
+    "canvas": "^2.11.2"
   },
   "publishConfig": {
     "access": "public",

packages/g6-ssr/rollup.config.mjs

@@ -12,8 +12,6 @@ export default [
       file: 'dist/g6-ssr.cjs',
       format: 'cjs',
       exports: 'named',
-      // format: 'umd',
-      // name: 'G6SSR',
       sourcemap: true,
     },
     plugins: [

packages/g6-ssr/src/graph.ts

@@ -1,7 +1,7 @@
 import { Graph as G6Graph } from '@antv/g6';
 import { existsSync, lstatSync, writeFileSync } from 'fs';
 import { createCanvas } from './canvas';
-import type { Graph, Options } from './types';
+import type { Graph, MetaData, Options } from './types';
 
 /**
  * <zh/> 获取输出文件的扩展名
@@ -10,13 +10,15 @@ import type { Graph, Options } from './types';
  * @param options - <zh/>配置项 | <en/>options
  * @returns <zh/>输出文件的扩展名 | <en/>The extension name of the output file
  */
-function getExtendNameOf(options: Options) {
+function getInfoOf(options: Options) {
   const { outputType } = options;
-  if (outputType === 'pdf') return '.pdf';
-  if (outputType === 'svg') return '.svg';
-  return '.png';
+  if (outputType === 'pdf') return ['.pdf', 'application/pdf'] as const;
+  if (outputType === 'svg') return ['.svg', undefined] as const;
+  return ['.png', 'image/png'] as const;
 }
 
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
 /**
  * <zh/> 创建图并等待渲染完成
  *
@@ -27,29 +29,33 @@ function getExtendNameOf(options: Options) {
 export async function createGraph(options: Options) {
   const [g6Canvas, nodeCanvas] = createCanvas(options);
 
-  const { outputType, ...restOptions } = options;
+  const { outputType, waitForRender = 16, ...restOptions } = options;
   const graph = new G6Graph({
     animation: false,
     ...restOptions,
     container: g6Canvas,
   });
 
+  const [extendName, mimeType] = getInfoOf(options);
+
+  await graph.render();
+
+  await sleep(waitForRender); // wait for the rendering to complete
+
   // @ts-expect-error extend Graph
-  graph.exportToFile = (file: string) => {
-    const extendName = getExtendNameOf(options);
+  graph.exportToFile = (file: string, meta?: MetaData) => {
     if (!file.endsWith(extendName)) {
       if (!existsSync(file)) file += extendName;
       else if (lstatSync(file).isDirectory()) file = `${file}/image${extendName}`;
       else file += extendName;
     }
 
-    writeFileSync(file, nodeCanvas.toBuffer());
+    // @ts-expect-error skip type check
+    writeFileSync(file, nodeCanvas.toBuffer(mimeType, meta));
   };
 
   // @ts-expect-error extend Graph
-  graph.toBuffer = () => nodeCanvas.toBuffer();
-
-  await graph.render();
+  graph.toBuffer = (meta?: MetaData) => nodeCanvas.toBuffer(mimeType, meta);
 
   return graph as Graph;
 }

packages/g6-ssr/src/index.ts

@@ -1,3 +1,3 @@
 export { createCanvas } from './canvas';
 export { createGraph } from './graph';
-export type { Graph, Options } from './types';
+export type { Graph, MetaData, Options } from './types';

packages/g6-ssr/src/types.ts

@@ -1,9 +1,17 @@
 import type { GraphOptions } from '@antv/g6';
 import { Graph as G6Graph } from '@antv/g6';
+import type { PdfConfig, PngConfig } from 'canvas';
 
 export interface Options extends Omit<GraphOptions, 'renderer' | 'container'> {
   width: number;
   height: number;
+  /**
+   * <zh/> 等待渲染的时间，默认为 16ms
+   *
+   * <en/> The time to wait for rendering, default is 16ms
+   * @defaultValue 16
+   */
+  waitForRender?: number;
   /**
    * <zh/> 输出文件类型，默认导出为图片
    *
@@ -13,7 +21,9 @@ export interface Options extends Omit<GraphOptions, 'renderer' | 'container'> {
   outputType?: 'image' | 'pdf' | 'svg';
 }
 
+export type MetaData = PdfConfig | PngConfig;
+
 export interface Graph extends G6Graph {
-  exportToFile: (file: string) => void;
-  toBuffer: () => Buffer;
+  exportToFile: (file: string, meta?: MetaData) => void;
+  toBuffer: (meta?: MetaData) => Buffer;
 }