Infographic icon indicating copy to clipboard operation
Infographic copied to clipboard

feat: Implement SSR rendering pipeline

Open yrom opened this issue 1 month ago • 13 comments

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)

yrom avatar Dec 27 '25 02:12 yrom