refactor(ssr): update g6-ssr (#6634)

* refactor(ssr): update ssr

* test: update test env and case

* test: update test snapshots

* chore: update ci

package.json

@@ -4,7 +4,7 @@
   "repository": "https://github.com/antvis/G6.git",
   "scripts": {
     "build": "turbo build --filter=!@antv/g6-site",
-    "ci": "turbo run ci --filter=!@antv/g6-site --filter=!@antv/g6-ssr",
+    "ci": "turbo run ci --filter=!@antv/g6-site",
     "contribute": "node ./scripts/contribute.mjs",
     "dev:g6": "cd ./packages/g6 && npm run dev",
     "postinstall": "husky install",

packages/g6-ssr/.gitignore

@@ -0,0 +1 @@
+**/*-actual.*

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

@@ -1,4 +1,4 @@
-import { existsSync, readFileSync } from 'fs';
+import { existsSync, readFileSync, writeFileSync } from 'fs';
 import { join } from 'path';
 import type { Graph, MetaData } from '../src';
 import { createGraph } from '../src';
@@ -15,7 +15,14 @@ declare global {
 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;
+
+    const file = received.toBuffer(meta);
+    const pass = existsSync(_path) ? file.equals(readFileSync(_path)) : true;
+
+    if (!pass) {
+      writeFileSync(_path.replace('.', '-actual.'), file);
+    }
+
     if (pass) {
       return {
         message: () => 'passed',
@@ -32,7 +39,106 @@ expect.extend({
 
 describe('createGraph', () => {
   const fn = async (outputType?: any, imageType: any = 'png') => {
-    const data = (await fetch('https://assets.antv.antgroup.com/g6/circular.json').then((res) => res.json())) as any;
+    const data = {
+      nodes: [
+        { id: '0' },
+        { id: '1' },
+        { id: '2' },
+        { id: '3' },
+        { id: '4' },
+        { id: '5' },
+        { id: '6' },
+        { id: '7' },
+        { id: '8' },
+        { id: '9' },
+        { id: '10' },
+        { id: '11' },
+        { id: '12' },
+        { id: '13' },
+        { id: '14' },
+        { id: '15' },
+        { id: '16' },
+        { id: '17' },
+        { id: '18' },
+        { id: '19' },
+        { id: '20' },
+        { id: '21' },
+        { id: '22' },
+        { id: '23' },
+        { id: '24' },
+        { id: '25' },
+        { id: '26' },
+        { id: '27' },
+        { id: '28' },
+        { id: '29' },
+        { id: '30' },
+        { id: '31' },
+        { id: '32' },
+        { id: '33' },
+      ],
+      edges: [
+        { source: '0', target: '1' },
+        { source: '0', target: '2' },
+        { source: '0', target: '3' },
+        { source: '0', target: '4' },
+        { source: '0', target: '5' },
+        { source: '0', target: '7' },
+        { source: '0', target: '8' },
+        { source: '0', target: '9' },
+        { source: '0', target: '10' },
+        { source: '0', target: '11' },
+        { source: '0', target: '13' },
+        { source: '0', target: '14' },
+        { source: '0', target: '15' },
+        { source: '0', target: '16' },
+        { source: '2', target: '3' },
+        { source: '4', target: '5' },
+        { source: '4', target: '6' },
+        { source: '5', target: '6' },
+        { source: '7', target: '13' },
+        { source: '8', target: '14' },
+        { source: '9', target: '10' },
+        { source: '10', target: '22' },
+        { source: '10', target: '14' },
+        { source: '10', target: '12' },
+        { source: '10', target: '24' },
+        { source: '10', target: '21' },
+        { source: '10', target: '20' },
+        { source: '11', target: '24' },
+        { source: '11', target: '22' },
+        { source: '11', target: '14' },
+        { source: '12', target: '13' },
+        { source: '16', target: '17' },
+        { source: '16', target: '18' },
+        { source: '16', target: '21' },
+        { source: '16', target: '22' },
+        { source: '17', target: '18' },
+        { source: '17', target: '20' },
+        { source: '18', target: '19' },
+        { source: '19', target: '20' },
+        { source: '19', target: '33' },
+        { source: '19', target: '22' },
+        { source: '19', target: '23' },
+        { source: '20', target: '21' },
+        { source: '21', target: '22' },
+        { source: '22', target: '24' },
+        { source: '22', target: '25' },
+        { source: '22', target: '26' },
+        { source: '22', target: '23' },
+        { source: '22', target: '28' },
+        { source: '22', target: '30' },
+        { source: '22', target: '31' },
+        { source: '22', target: '32' },
+        { source: '22', target: '33' },
+        { source: '23', target: '28' },
+        { source: '23', target: '27' },
+        { source: '23', target: '29' },
+        { source: '23', target: '30' },
+        { source: '23', target: '31' },
+        { source: '23', target: '33' },
+        { source: '32', target: '33' },
+      ],
+    };
 
     return await createGraph({
       width: 500,

packages/g6-ssr/jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  forceExit: true,
   transform: {
     '^.+\\.[tj]s$': ['@swc/jest'],
   },

packages/g6-ssr/package.json

@@ -18,7 +18,7 @@
   ],
   "scripts": {
     "build": "rimraf ./dist && rollup -c",
-    "ci": "run-s lint type-check build test",
+    "ci": "run-s lint type-check build",
     "lint": "eslint ./src __tests__ --quiet && prettier ./src __tests__ --check",
     "prepublishOnly": "npm run ci",
     "test": "run-s test:*",

packages/g6-ssr/src/graph.ts

@@ -31,7 +31,7 @@ const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 export async function createGraph(options: Options) {
   const [g6Canvas, nodeCanvas] = createCanvas(options);
 
-  const { outputType, waitForRender = 16, ...restOptions } = options;
+  const { outputType, waitForRender = 32, ...restOptions } = options;
   const graph = new G6Graph({
     animation: false,
     ...restOptions,
@@ -44,20 +44,24 @@ export async function createGraph(options: Options) {
 
   await sleep(waitForRender); // wait for the rendering to complete
 
-  // @ts-expect-error extend Graph
-  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;
-    }
+  const returns: Graph = {
+    getGraph: () => graph,
+    getCanvas: () => nodeCanvas,
+    destroy: () => graph.destroy(),
+    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;
+      }
 
-    // @ts-expect-error skip type check
-    writeFileSync(file, nodeCanvas.toBuffer(mimeType, meta));
+      // @ts-expect-error skip type check
+      writeFileSync(file, nodeCanvas.toBuffer(mimeType, meta));
+    },
+    // @ts-expect-error extend Graph
+    toBuffer: (meta?: MetaData) => nodeCanvas.toBuffer(mimeType, meta),
+    toDataURL: () => nodeCanvas.toDataURL(mimeType as any),
   };
 
-  // @ts-expect-error extend Graph
-  graph.toBuffer = (meta?: MetaData) => nodeCanvas.toBuffer(mimeType, meta);
-
-  return graph as Graph;
+  return returns;
 }

packages/g6-ssr/src/types.ts

@@ -1,6 +1,6 @@
 import type { GraphOptions } from '@antv/g6';
 import { Graph as G6Graph } from '@antv/g6';
-import type { JpegConfig, PdfConfig, PngConfig } from 'canvas';
+import type { Canvas, JpegConfig, PdfConfig, PngConfig } from 'canvas';
 
 export interface Options extends Omit<GraphOptions, 'renderer' | 'container'> {
   width: number;
@@ -29,7 +29,12 @@ export interface Options extends Omit<GraphOptions, 'renderer' | 'container'> {
 
 export type MetaData = PdfConfig | PngConfig | JpegConfig;
 
-export interface Graph extends G6Graph {
+export interface Graph {
+  getGraph: () => G6Graph;
+  getCanvas: () => Canvas;
+  destroy: () => void;
+
   exportToFile: (file: string, meta?: MetaData) => void;
   toBuffer: (meta?: MetaData) => Buffer;
+  toDataURL: () => string;
 }