feat: server side rendering #163

Aarebecca · 2026-01-14T02:00:57Z

Modified based on #160 and #104, fixed #68

使用方式：

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

const syntax = `infographic list-row-simple-horizontal-arrow
data
  items
    - label Step 1
      desc Start
    - label Step 2
      desc In Progress
    - label Step 3
      desc Complete`;

const svg = await renderToString(syntax);

注意事项：

字体采用 xml-stylesheet 进行内嵌，因此需在联网环境下使用，或者系统安装相关字体。

* feat(ssr): Implement SSR rendering pipeline * test(ssr): make renderer tests async and use string input format * refactor: remove unused code * ci: add CLI build step to workflow * fix: lint error * refactor(build): replace custom esm import fixer with tsc-alias * feat: export resource types * feat(ssr): add non-browser rendering documentation * feat(ssr): replace JSDOM with LinkeDOM * fix: ignore unused error parameter * test(ssr): remove debug console.log from renderer test * refactor(ssr): simplify SVG serialization and DOM setup remove custom XMLSerializer implementation in favor of native outerHTML move svgo optimization to CLI level with option * fix(ssr): improve error handling and validation in renderer - Add fast fail for syntax errors - Validate template existence * Refactor: move CLI to internal SSR tests and remove CLI module This commit removes the standalone CLI module and moves examples to internal SSR tests for better integration. * Update documentation and remove CLI references Remove CLI tool documentation and references after CLI module removal, update SSR documentation, and remove teardownDOM function from exports. * Move SSR examples test files to proper location Relocate SSR example files from __tests__/ssr/examples to __tests__/unit/ssr/examples and update test file path reference. * Update project configuration and SSR test outputs Update various project files including configuration, SSR tests, and generated SVG outputs. * Add render_error type and improve type safety in SSR renderer --------- Co-authored-by: Yrom <yrom@qq.com>

gemini-code-assist · 2026-01-14T02:01:59Z

Summary of Changes

Hello @Aarebecca, I'm Gemini Code Assist¹! 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 extends the library's capabilities by integrating server-side rendering (SSR) support. It enables the generation of infographics as SVG strings in Node.js environments, broadening the application scope to include server-driven content creation and static site generation. The changes involve setting up a virtual DOM, adapting rendering processes for non-browser contexts, and ensuring resource handling is robust for offline rendering.

Highlights

Server-Side Rendering (SSR) Capability: Introduced a new renderToSVG function that allows infographics to be rendered into SVG strings within a Node.js environment, enabling non-browser use cases like static site generation (SSG) and AI-driven content generation.
DOM Environment Shim: Implemented linkedom to create a lightweight, in-memory DOM environment in Node.js, complete with shims for SVGElement and document.fonts, ensuring compatibility for rendering logic outside of a browser.
Comprehensive Testing: Added extensive unit tests for the SSR functionality, including golden file comparisons for various infographic examples, and tests for error handling, options, multi-language support (Chinese characters), and special character rendering.
Resource Preloading and Embedding: Developed a mechanism to automatically preload all icon and illustration resources in SSR mode, and configured the exported SVG to embed all resources by default, ensuring complete and self-contained output.
Documentation Updates: Updated the README.md and added new dedicated documentation pages (in both English and Chinese) detailing the basic usage, API, complete examples, custom resource loading, and important notes for non-browser rendering.

Ignored Files

Ignored by pattern: .github/workflows/** (1)
- .github/workflows/build.yml

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 👍 and 👎 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.

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. ↩

src/ssr/renderer.ts

gemini-code-assist

Code Review

This pull request introduces server-side rendering (SSR) capabilities, a significant and well-executed feature. The implementation includes a new rendering pipeline for Node.js, a DOM shim using linkedom, resource preloading for a consistent output, and comprehensive tests and documentation. The code is well-structured and the approach is solid. I have a couple of suggestions to enhance maintainability and error reporting.

src/ssr/renderer.ts

src/utils/text.ts

codecov-commenter · 2026-01-14T02:05:37Z

Codecov Report

❌ Patch coverage is 75.86207% with 56 lines in your changes missing coverage. Please review.
✅ Project coverage is 44.63%. Comparing base (d6c5066) to head (215cc61).

Files with missing lines	Patch %	Lines
src/ssr/dom-shim.ts	80.18%	22 Missing ⚠️
src/renderer/renderer.ts	19.04%	17 Missing ⚠️
src/utils/text.ts	52.17%	11 Missing ⚠️
src/ssr/renderer.ts	95.00%	3 Missing ⚠️
src/resource/loader.ts	33.33%	1 Missing and 1 partial ⚠️
src/utils/recognizer.ts	87.50%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff             @@
##             main     #163       +/-   ##
===========================================
+ Coverage   31.44%   44.63%   +13.19%     
===========================================
  Files         325      328        +3     
  Lines       26026    26215      +189     
  Branches     1433     2033      +600     
===========================================
+ Hits         8184    11702     +3518     
+ Misses      17839    14503     -3336     
- Partials        3       10        +7

Flag	Coverage Δ
infographic	`44.63% <75.86%> (+13.19%)`	⬆️

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	`18.96% <100.00%> (+9.40%)`	⬆️
src/renderer/fonts/registry.ts	`62.06% <ø> (+17.24%)`	⬆️
src/ssr/index.ts	`100.00% <100.00%> (ø)`
src/utils/data.ts	`100.00% <100.00%> (ø)`
src/utils/index.ts	`100.00% <100.00%> (ø)`
src/utils/svg.ts	`100.00% <ø> (ø)`
src/utils/recognizer.ts	`74.71% <87.50%> (+2.09%)`	⬆️
src/resource/loader.ts	`76.00% <33.33%> (+67.83%)`	⬆️
src/ssr/renderer.ts	`95.00% <95.00%> (ø)`
... and 3 more

... and 57 files with indirect coverage changes

🚀 New features to boost your workflow:

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

Aarebecca · 2026-01-14T09:38:26Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces server-side rendering (SSR) capabilities, which is a significant feature addition. The implementation includes a DOM shim using linkedom, a new renderToString function, and comprehensive snapshot tests for various infographic examples. The changes are well-structured, with necessary adjustments in the rendering pipeline and utility functions to support a non-browser environment. My review focuses on dependency management and test code maintainability. I've identified an incorrect dev dependency and suggested an improvement for test data management. Overall, this is a solid implementation of SSR.

package.json

__tests__/unit/ssr/examples.test.ts

Aarebecca · 2026-01-14T09:57:19Z

@copilot Review

Copilot · 2026-01-14T09:57:28Z

@Aarebecca I've opened a new pull request, #165, to work on those changes. Once the pull request is ready, I'll request review from you.

Aarebecca · 2026-01-14T11:14:21Z

/gemini review

gemini-code-assist

Code Review

This pull request introduces server-side rendering (SSR) capabilities, which is a great addition. The implementation involves creating a DOM shim for Node.js environments and adapting the rendering logic to be environment-agnostic. The new test suite for SSR is also a good way to ensure correctness.

I've identified a couple of high-severity issues that could lead to runtime errors or incorrect output, particularly related to resource handling in the SSR renderer and text measurement logic. I've also pointed out a typing issue that could affect type safety. Please see my detailed comments for suggestions on how to address these.

src/ssr/renderer.ts

src/utils/text.ts

__tests__/unit/ssr/examples.test.ts

src/utils/recognizer.ts

__tests__/unit/ssr/examples.test.ts

github-code-quality bot found potential problems Jan 14, 2026

View reviewed changes

src/ssr/renderer.ts Fixed Show fixed Hide fixed

gemini-code-assist bot reviewed Jan 14, 2026

View reviewed changes

src/ssr/renderer.ts Outdated Show resolved Hide resolved

src/utils/text.ts Outdated Show resolved Hide resolved

revert: unnecessary changes

ce500ae

Aarebecca force-pushed the dev/ssr branch from d464f36 to ce500ae Compare January 14, 2026 03:14

Aarebecca added 4 commits January 14, 2026 15:17

refactor(utils): optimize utils

3a7febe

refactor(ssr): optimize ssr implement

930883a

test(ssr): update test case and output

d7c3dcc

docs: update docs

0d99b7a

gemini-code-assist bot reviewed Jan 14, 2026

View reviewed changes

package.json Show resolved Hide resolved

__tests__/unit/ssr/examples.test.ts Show resolved Hide resolved

Copilot AI mentioned this pull request Jan 14, 2026

No changes needed - SSR implementation reviewed #165

Closed

refactor: optimize code

d3d2f3c

gemini-code-assist bot reviewed Jan 14, 2026

View reviewed changes

src/ssr/renderer.ts Show resolved Hide resolved

src/utils/text.ts Show resolved Hide resolved

__tests__/unit/ssr/examples.test.ts Show resolved Hide resolved

src/utils/recognizer.ts Outdated Show resolved Hide resolved

fix: fix cr issues

d5b3251

Aarebecca changed the title ~~wip: server side rendering~~ feat: server side rendering Jan 14, 2026

hustcc reviewed Jan 14, 2026

View reviewed changes

__tests__/unit/ssr/examples.test.ts Show resolved Hide resolved

docs: remove trailing whitespace in index.en.md

215cc61

hustcc approved these changes Jan 14, 2026

View reviewed changes

Aarebecca merged commit 72bfdb8 into main Jan 14, 2026
3 checks passed

Aarebecca deleted the dev/ssr branch January 14, 2026 11:46

feat: server side rendering #163

feat: server side rendering #163

Uh oh!

Conversation

Aarebecca commented Jan 14, 2026 • edited by hustcc Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot commented Jan 14, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

codecov-commenter commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Aarebecca commented Jan 14, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Aarebecca commented Jan 14, 2026

Uh oh!

Copilot AI commented Jan 14, 2026

Uh oh!

Aarebecca commented Jan 14, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Aarebecca commented Jan 14, 2026 •

edited by hustcc

Loading

codecov-commenter commented Jan 14, 2026 •

edited

Loading