baltpeter
commented
7 months ago Typst.ts has two main approaches for how it can be used: by importing an "all-in-one" bundle that does a whole bunch of plumbing for you, or by manually doing the necessary work yourself.
With the AIO bundle, compiling a string to PDF is easy:
import { $typst } from '@myriaddreamin/typst.ts/dist/esm/contrib/snippet.mjs';
export const compile = async () => {
const source = `
= Introduction
#lorem(60)
`;
return await $typst.pdf({ mainContent: source });
};However, the maintainer recommends going the manual route. I struggled a bit getting that to work, so I wanted to document what I found out in case anyone else has the same problem. While the code above worked just fine for me, trying to manually recreate that, I always got an entirely blank PDF. I ended up duplicating snippet.mts locally and removing stuff until I finally found the problem. The one thing different between my code and snippet.mts was this:
This ensures (quite opaquely) that ccOptions.beforeBuild is not undefined. ccOptions here is what gets passed to cc.init(). I wasn't doing that, I didn't provide an argument since it isn't required. I didn't investigate this more thoroughly, but from a quick glance, not having beforeBuild seems to cause fonts not to be loaded (https://github.com/Myriad-Dreamin/typst.ts/blob/9644b7088696a0d2fb14b5ee664f855270c78fd5/packages/typst.ts/src/compiler.mts#L162-L186).
Anyway, here is a working minimal example of how to render a PDF with typst.ts using the manual approach:
import { createTypstCompiler } from '@myriaddreamin/typst.ts/dist/esm/compiler.mjs';
export const compile = async () => {
const mainFilePath = '/main.typ';
const source = `
= Introduction
#lorem(60)
`;
const cc = createTypstCompiler();
await cc.init({ beforeBuild: [] });
cc.addSource(mainFilePath, source);
return await cc.compile({ mainFilePath, format: 'pdf' });
};
As explained in https://github.com/tweaselORG/meta/issues/41#issuecomment-1833351873