Infographic
Infographic copied to clipboard
feat: Implement SSR rendering pipeline
Add SSR mode support (global flag __ANTV_INFOGRAPHIC_SSR__).
- Use
LinkeDOMfor 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)