feat: Implement SSR rendering pipeline

[yrom]

Add SSR mode support (global flag __ANTV_INFOGRAPHIC_SSR__).

• Use LinkeDOM for mocking DOM.
• Add a cli package for render syntax to svg

Test:

npm run build:esm
cd cli
npm install
npm run example
# view output/02-list-with-icons.svg

Related #68

Non-Browser Rendering

import { renderToSVG } from '@antv/infographic/ssr';

const result = await renderToSVG({
  input: `
infographic list-row-simple-horizontal-arrow
data
  items:
    - label: Step 1
      desc: Start
    - label: Step 2
      desc: In Progress
    - label: Step 3
      desc: Complete
`,
});

console.log(result.svg);
console.log('Errors:', result.errors);
console.log('Warnings:', result.warnings);

With custom ResourceLoader:

import { renderToSVG } from '@antv/infographic/ssr';
import { registerResourceLoader, loadSVGResource, type ResourceLoader, type ResourceConfig } from '@antv/infographic';

const customLoader: ResourceLoader =  (async (config: ResourceConfig) => {
  const {data, scene} = config;
  //... build url
  const url = ...;
  return loadSVGResource(url);
}

registerResourceLoader(customLoader);

const result = await renderToSVG({ input: syntax });

CLI Package documents

cli/README.md

npx @antv/infographic-cli input.txt -o output.svg ( available on @antv/infographic-cli published)

[gemini-code-assist[bot]]

Summary of Changes

Hello @yrom, I'm Gemini Code Assist[^1]! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly enhances the AntV Infographic library by introducing Server-Side Rendering (SSR) capabilities. This allows for the generation of SVG infographics in a Node.js environment, eliminating the need for a browser. A new command-line interface (CLI) tool is also provided, simplifying the process of converting infographic syntax into SVG files. The changes include robust DOM emulation using jsdom, intelligent resource preloading, and specific optimizations for server-side execution to ensure accurate and efficient rendering.

Highlights

• Server-Side Rendering (SSR) Pipeline: Introduced a comprehensive SSR pipeline, allowing AntV Infographic to render SVG outputs in a Node.js environment without a browser, leveraging jsdom for DOM mocking.
• New CLI Package: Added a new command-line interface (CLI) package, @antv/infographic-cli, which enables users to convert infographic syntax files directly into SVG images from the terminal.
• Resource Preloading for SSR: Implemented a resource preloading mechanism for icons and illustrations, ensuring all necessary assets are fetched before rendering in the SSR environment, crucial for generating complete SVG outputs.
• SSR-Specific Optimizations: Adjusted font loading, text measurement, and text content handling (innerText vs. textContent) to accommodate jsdom's limitations and optimize performance in a server-side context, controlled by a global __ANTV_INFOGRAPHIC_SSR__ flag.
• ESM Import Fixes: Added a post-build script to automatically append .js extensions to relative imports in ESM build outputs, resolving module resolution issues in Node.js environments.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with :thumbsup: and :thumbsdown: on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

[^1]: Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

[codecov-commenter]

Codecov Report

:x: Patch coverage is 64.77612% with 118 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 35.71%. Comparing base (6b6b431) to head (bd5539f).

Files with missing lines	Patch %	Lines
src/ssr/renderer.ts	68.29%	39 Missing :warning:
src/utils/text.ts	34.61%	34 Missing :warning:
src/renderer/renderer.ts	30.43%	16 Missing :warning:
src/ssr/dom-shim.ts	85.45%	16 Missing :warning:
src/resource/loader.ts	0.00%	13 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #104      +/-   ##
==========================================
+ Coverage   31.37%   35.71%   +4.33%     
==========================================
  Files         314      317       +3     
  Lines       23149    23454     +305     
  Branches     1257     1495     +238     
==========================================
+ Hits         7264     8377    +1113     
+ Misses      15882    15073     -809     
- Partials        3        4       +1     

Flag	Coverage Δ
infographic	35.71% <64.77%> (+4.33%)	:arrow_up:

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
src/index.ts	100.00% <100.00%> (ø)
src/renderer/fonts/loader.ts	20.63% <100.00%> (+6.84%)	:arrow_up:
src/renderer/fonts/registry.ts	44.82% <ø> (ø)
src/runtime/Infographic.tsx	65.58% <100.00%> (+47.40%)	:arrow_up:
src/ssr/index.ts	100.00% <100.00%> (ø)
src/utils/data.ts	100.00% <100.00%> (ø)
src/utils/measure-text.ts	32.75% <100.00%> (ø)
src/utils/recognizer.ts	73.80% <100.00%> (+1.19%)	:arrow_up:
src/utils/svg.ts	100.00% <ø> (ø)
src/resource/loader.ts	6.06% <0.00%> (-0.84%)	:arrow_down:
... and 4 more

... and 32 files with indirect coverage changes

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Aarebecca]

@yrom Thanks for your contribution. We’ll review this PR asap on workdays.

[Aarebecca]

@yrom Before initiating the human code review, it is recommended to first resolve the issues raised by Gemini.

[Aarebecca]

@copilot Code Review

[hustcc]

@yrom 挺牛的 PR，增加了两个大能力，可以在 PR 描述中加上描述：

1. ssr 的 API 使用，便于后续的功能封装，比如 MCP Server 可以用得上
2. cli 的大概使用文档

这两个功能，后续都需要在官网文档、Readme 中展示出来。

[yrom]

/gemini summary /gemini review

[gemini-code-assist[bot]]

@yrom It looks like you're trying to generate a new summary and review. The /gemini summary and /gemini review commands are typically used in a new comment to initiate these actions.

I've already provided a summary of this pull request in comment #1. If you'd like a fresh code review, please create a new comment with just /gemini review.

[yrom]

/gemini review

[Aarebecca]

这个 PR 的设计还存在诸多存在争议的点，为了避免后续对用户造成疑惑，所以我们需要花费更多的时间进行讨论和明确设计

[yrom]

To keep things manageable, I intentionally started simple: SSR just works out of the box, backed by a minimal CLI. IMHO, we can gradually add more advanced features later as needed.

[hustcc]

cli 其实是 ssr 能力的一种透出形态。

我觉得可以先提供 ssr 的 api，再来做 cli 相关的，而且我更建议 cli 作为项目周边，不放在这个仓库中，可以放到个人仓库，然后官网收录，因为这类封装可以有更多的形态。

然后 ssr 的 api 有多种设计方式。

1. 在现有 Infographic 类上增加 renderToSVGString 的类方法
2. 按照现在的方式，npm 新开一个目录来做 api

我其实更建议第一种，可以类似于 ReactDOM，这个可以讨论下。@Aarebecca @yrom

[hustcc]

对于单测，现在 cli 中的单测应该放到 infographic 主包中，测试 ssr 的能力。

cli 测试可以简化一下。

[hustcc]

@yrom 有啥进展不，要不加一个微信聊一下，我的微信在我 GitHub 主页有。

[yrom]

@hustcc 🈚️ 我没明白你们具体改进方向，另外这几天也没时间😂

[Aarebecca]

@yrom 我把 PR 先合并到开发分支了，后续我会进行处理