tldraw/apps/www/pages/api/export.ts

import { NextApiRequest, NextApiResponse } from 'next'
import puppeteer from 'puppeteer'
import Cors from 'cors'
import { TDExport, TDExportTypes, TldrawApp } from '@tldraw/tldraw'

const cors = Cors({
  methods: ['POST'],
})

function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) return reject(result)
      return resolve(result)
    })
  })
}

const FRONTEND_URL =
  process.env.NODE_ENV === 'development'
    ? 'http://localhost:3000/?exportMode'
    : 'https://www.tldraw.com/?exportMode'

declare global {
  interface Window {
    app: TldrawApp
  }
}

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  await runMiddleware(req, res, cors)
  const { body } = req
  const {
    size: [width, height],
    type,
  } = body
  if (type === TDExportTypes.PDF) res.status(500).send('Not implemented yet.')
  let browser: puppeteer.Browser = null
  try {
    browser = await puppeteer.launch({
      slowMo: 50,
      ignoreHTTPSErrors: true,
      headless: true,
    })
    const page = await browser.newPage()
    await page.setUserAgent(
      'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36'
    )
    await page.setViewport({ width: Math.floor(width), height: Math.floor(height) })
    await page.goto(FRONTEND_URL, { timeout: 15 * 1000, waitUntil: 'networkidle0' })
    await page.evaluateHandle('document.fonts.ready')
    await page.evaluate(async (body: TDExport) => {
      let app = window.app
      if (!app) app = await new Promise((resolve) => setTimeout(() => resolve(window.app), 250))
      await app.ready
      const { assets, shapes } = body
      app.patchAssets(assets)
      app.createShapes(...shapes)
      app.selectAll()
      app.zoomToSelection()
      app.selectNone()
    }, body)
    const imageBuffer = await page.screenshot({
      type,
    })
    res.status(200).send(imageBuffer)
  } catch (err) {
    console.error(err.message)
    res.status(500).send(err)
  } finally {
    await browser.close()
  }
}