Feature Request: support WinterCG environment

[hikerpig]

Seperating from issue #225 .

It'd be cool if pintora can run in WinterCG environment.

Maybe I can start with trying to run pintora in https://github.com/wasmerio/winterjs

[hikerpig]

winterjs is relatively new and unstable for now, so I chose to test pintora in Vercel's edge-runtime.
I managed to to replace all Node.js module with JS polyfill and bundle the whole pintora and its runtime dependency into one JS file. As demonstrated in a conceptual demostration in #233 .

A packages/pintora-target-wintercg/dist/runtime.js file can be built from the repo - docs are coming soon.

Currently:

1. text-metric is implemented with the help of fontkit, but font loading is not yet supported
2. only svg renderer is supported in this runtime

[atian25]

only svg renderer is supported in this runtime

Developers can simply use @resvg/resvg-wasm to convert to PNG as needed, Pintora does not need to support other formats.

[hikerpig]

@atian25 I'm not sure how are you going to use it but we can have a try and improve it later, see the docs in https://pintorajs.vercel.app/docs/advanced/api-usage/#pitora-in-wintercg-runtime

[atian25]

cool~ I'll try it later today.

[atian25]

https://bots-test.fn.goofy-edge.cn/api/uml?api/uml?code=%0A%20%20mindmap%0A%20%20title%3A%20Mind%20Map%20levels~~%0A%20%20*%20UML%20Diagrams%0A%20%20**%20Behavior%20Diagrams%0A%20%20***%20Sequence%20Diagram%0A%20%20***%20State%20Diagram%0A

it works~

[hikerpig]

I see the output image of your demo is kind of blury, but it's a good start. Now at least it can run in edge-runtime and goofy worker.

I've also gave a try on wasmerio/winterjs, it works without error in Pintora's side, but has some trouble with fetch event handler wasmerio/winterjs#37, let's give it some time.

[atian25]

https://bots-test.fn.goofy-edge.cn/api/uml2svg?code=%0A%20%20mindmap%0A%20%20title%3A%20Mind%20Map%20levels~~%0A%20%20*%20UML%20Diagrams%0A%20%20**%20Behavior%20Diagrams%0A%20%20***%20Sequence%20Diagram%0A%20%20***%20State%20Diagram%0A

https://bots-test.fn.goofy-edge.cn/api/uml2svg?code=sequenceDiagram%0A%20%20title%3A%20%E6%97%B6%E5%BA%8F%E5%9B%BE%E4%BE%8B%E5%AD%90%0A%20%20autonumber%0A%20%20participant%20%5B%3Cactor%3E%20%E7%94%A8%E6%88%B7%5D%0A%20%20%E7%94%A8%E6%88%B7-%3E%3EPintora%3A%20%E5%B8%AE%E6%88%91%E7%94%BB%E5%BC%A0%E6%97%B6%E5%BA%8F%E5%9B%BE%EF%BC%88%E5%9B%BE%E8%A1%A8%20DSL%EF%BC%89%0A%20%20activate%20Pintora%0A%20%20Pintora-%3E%3EPintora%3A%20%E8%A7%A3%E6%9E%90%20DSL%EF%BC%8C%E7%BB%98%E5%88%B6%E5%9B%BE%E5%83%8F%0A%20%20alt%20DSL%20%E6%AD%A3%E7%A1%AE%0A%20%20%20%20Pintora-%3E%3E%E7%94%A8%E6%88%B7%3A%20%E8%BF%94%E5%9B%9E%E7%BB%98%E5%88%B6%E5%A5%BD%E7%9A%84%E5%9B%BE%E8%A1%A8%0A%20%20else%20DSL%20%E6%9C%89%E8%AF%AF%0A%20%20%20%20Pintora-%3E%3E%E7%94%A8%E6%88%B7%3A%20%E8%BF%94%E5%9B%9E%E6%8A%A5%E9%94%99%E4%BF%A1%E6%81%AF%0A%20%20end%0A%20%20deactivate%20Pintora%0A%20%20%40note%20left%20of%20Pintora%0A%20%20%E6%B8%B2%E6%9F%93%E7%9B%AE%E6%A0%87%E4%B8%8D%E5%90%8C%EF%BC%8C%E7%BB%93%E6%9E%9C%E5%AA%92%E4%BB%8B%E4%BC%9A%E6%9C%89%E6%89%80%E4%B8%8D%E5%90%8C%0A%20%201.%20%E6%B5%8F%E8%A7%88%E5%99%A8%EF%BC%8C%E5%8F%AF%E7%9B%B4%E6%8E%A5%E6%B8%B2%E6%9F%93%E5%88%B0%E9%A1%B5%E9%9D%A2%E4%B8%8A%20svg%20%2F%20canvas%0A%20%202.%20Node.js%EF%BC%8C%E9%BB%98%E8%AE%A4%20canvas%EF%BC%8C%E8%BE%93%E5%87%BA%20PNG%20%E4%BD%8D%E5%9B%BE%0A%20%20%40end_note

This is for generating an svg using only pintora.
The previous URL may be a problem with the use of resvg.

[hikerpig]

Text metric will absolute be a problem when you use CJK characters.
I'll see what I can do with font loading next week.