feat: add Docker image (#4)

Author: fathyb

Dockerfile

@@ -1,4 +1,6 @@
-FROM debian:11 AS chromium-build
+# Build environment
+# ==========================
+FROM --platform=linux/amd64 debian:11 AS chromium-build
 
 WORKDIR /app
 
@@ -9,34 +11,104 @@ ENV DEBIAN_FRONTEND=noninteractive
 ENV CHROMIUM_BUILDTOOLS_PATH=/app/electron/src/buildtools
 RUN apt-get update && \
         apt-get install -y git sudo curl ccache python3 bzip2 xz-utils && \
-    curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && \
+    curl -fsSL https://deb.nodesource.com/setup_16.x | bash - && \
     apt-get install -y nodejs && \
     git clone --depth 1 --single-branch https://chromium.googlesource.com/chromium/tools/depot_tools.git
 
 COPY electron/.gclient electron/
 COPY scripts/gclient.sh scripts/
-RUN --mount=type=cache,target=/app/.git_cache scripts/gclient.sh
+RUN --mount=type=cache,target=/app/.git_cache scripts/gclient.sh --revision "src/electron@cb22573c3e76e09df9fbad36dc372080c04d349e"
 
 RUN electron/src/build/install-build-deps.sh
 
 COPY scripts/patch.sh /app/scripts/
 COPY src/chromium.patch /app/src/
-RUN scripts/patch.sh
+COPY src/skia.patch /app/src/
+RUN scripts/patch.sh && ccache --max-size=0
+
+ENV CCACHE_DIR=/app/.ccache
+ENV CCACHE_CPP2=yes
+ENV CCACHE_SLOPPINESS=time_macros
 
-FROM chromium-build AS chromium-arm64
+
+# ARM64 binaries
+# ==============
+FROM --platform=linux/amd64 chromium-build AS chromium-arm64
 
 RUN electron/src/build/linux/sysroot_scripts/install-sysroot.py --arch=arm64
 
 COPY scripts/gn.sh /app/scripts/
-RUN GN_ARGS='target_cpu="arm64" cc_wrapper="env CCACHE_DIR=/app/.ccache CCACHE_SLOPPINESS=time_macros ccache"' \
+RUN GN_ARGS='cc_wrapper="ccache" target_cpu="arm64"' \
+        scripts/gn.sh release
+
+COPY scripts/ninja.sh /app/scripts/
+RUN --mount=type=cache,target=/app/.ccache \
+    --mount=type=cache,target=/app/.git_cache \
+    scripts/ninja.sh release -j200
+
+RUN electron/src/electron/script/strip-binaries.py -d electron/src/out/release --target-cpu=arm64 && \
+    ninja -C electron/src/out/release electron:electron_dist_zip
+
+
+# AMD64 binaries
+# ==============
+FROM --platform=linux/amd64 chromium-build AS chromium-amd64
+
+RUN electron/src/build/linux/sysroot_scripts/install-sysroot.py --arch=amd64
+
+COPY scripts/gn.sh /app/scripts/
+RUN GN_ARGS='cc_wrapper="ccache"' \
         scripts/gn.sh release
 
 COPY scripts/ninja.sh /app/scripts/
 RUN --mount=type=cache,target=/app/.ccache \
     --mount=type=cache,target=/app/.git_cache \
-    electron/src/build/linux/sysroot_scripts/install-sysroot.py --arch=arm64 && \
     scripts/ninja.sh release -j200
 
-FROM chromium-arm64
+RUN electron/src/electron/script/strip-binaries.py -d electron/src/out/release && \
+    ninja -C electron/src/out/release electron:electron_dist_zip
+
+
+# Release binaries
+# ================
+FROM debian:11 AS html2svg-binaries
+
+RUN apt-get update && apt-get install -y unzip
+
+COPY --from=chromium-arm64 /app/electron/src/out/release/dist.zip /arm64.zip
+COPY --from=chromium-amd64 /app/electron/src/out/release/dist.zip /amd64.zip
+RUN unzip /arm64.zip -d /arm64
+RUN unzip /amd64.zip -d /amd64
+
+# TypeScript build
+# ================
+FROM --platform=$BUILDPLATFORM node:18 AS html2svg-js 
+
+WORKDIR /app
+COPY package.json yarn.lock /app/
+RUN yarn
+
+COPY tsconfig.json /app/
+COPY src /app/src
+RUN yarn tsc -b
+
+# Main image
+# ==========
+FROM node:18
+
+RUN apt-get update && \
+    apt-get install --yes \
+        libglib2.0-0 libnss3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libdrm2 libgtk-3-0 libgbm1 libasound2 \
+        xvfb x11-xkb-utils xfonts-100dpi xfonts-75dpi xfonts-scalable xfonts-cyrillic x11-apps
+
+WORKDIR /app
+COPY package.json yarn.lock /app/
+RUN yarn --production
+
+ARG TARGETARCH
+COPY --from=html2svg-js /app/build /app/build
+COPY --from=html2svg-binaries /${TARGETARCH} /runtime
+COPY /scripts/docker-entrypoint.sh /app/scripts/docker-entrypoint.sh
+
+ENTRYPOINT ["/app/scripts/docker-entrypoint.sh"]
 
-COPY --from=chromium-build /app/electron/src/out /app/electron/src/out

google.svg

@@ -4,24 +4,21 @@ Convert HTML and `<canvas>` to SVG using Chromium.
 
 ## Usage
 
-> A Docker image is currently being built.
-
-### CLI
-
 ```shell
-$ html2svg http://google.com > google.svg
+$ docker run fathyb/html2svg https://google.com > google.svg
 ```
 
-### Server
+## Development
+
+> - Building Chromium for ARM on Linux or Windows is not officially supported, cross-compile from x64 instead.
+
+### Docker
 
 ```shell
-$ html2svg serve --port 8765
-$ curl -d http://google.com http://localhost:8765 > google.svg
+$ docker buildx build . --platform linux/arm64,linux/amd64
 ```
 
-## Development
-
-> -   Building Chromium for ARM on Linux or Windows is not officially supported, cross-compile from x64 instead.
+### Local
 
 1. Fetch dependencies:
     ```shell

readme.md

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+set -e
+
+export DISPLAY=:99
+
+Xvfb $DISPLAY -screen 0 1920x1080x8 &
+/runtime/electron --no-sandbox --headless --disable-dev-shm-usage /app/build/html2svg.js "$@"
+

scripts/docker-entrypoint.sh

@@ -2,5 +2,5 @@
 
 set -eo pipefail
 
-git -C electron/src apply --ignore-space-change --ignore-whitespace < src/chromium.patch
-git -C electron/src/third_party/skia apply --ignore-space-change --ignore-whitespace < src/skia.patch
+git -C electron/src apply --ignore-space-change --ignore-whitespace --reject < src/chromium.patch
+git -C electron/src/third_party/skia apply --ignore-space-change --ignore-whitespace --reject < src/skia.patch

scripts/patch.sh

@@ -1,8 +1,8 @@
 diff --git a/content/renderer/render_frame_impl.cc b/content/renderer/render_frame_impl.cc
-index 6a7e5ab92e6fa..be390eac56d3c 100644
+index 97cf24ad5f4a6..c1191c49697ca 100644
 --- a/content/renderer/render_frame_impl.cc
 +++ b/content/renderer/render_frame_impl.cc
-@@ -254,6 +254,12 @@
+@@ -256,6 +256,12 @@
  #include "content/renderer/java/gin_java_bridge_dispatcher.h"
  #endif
 
@@ -15,7 +15,7 @@ index 6a7e5ab92e6fa..be390eac56d3c 100644
  using base::Time;
  using blink::ContextMenuData;
  using blink::WebContentDecryptionModule;
-@@ -3842,6 +3848,93 @@ void RenderFrameImpl::DidClearWindowObject() {
+@@ -3822,6 +3828,93 @@ void RenderFrameImpl::DidClearWindowObject() {
 
    for (auto& observer : observers_)
      observer.DidClearWindowObject();
@@ -110,10 +110,10 @@ index 6a7e5ab92e6fa..be390eac56d3c 100644
 
  void RenderFrameImpl::DidCreateDocumentElement() {
 diff --git a/skia/BUILD.gn b/skia/BUILD.gn
-index edc61a93bb7a1..62c4b418aedae 100644
+index 7a096b9a887d9..7440e54650989 100644
 --- a/skia/BUILD.gn
 +++ b/skia/BUILD.gn
-@@ -307,6 +307,15 @@ component("skia") {
+@@ -316,6 +316,15 @@ component("skia") {
      ]
    }
 
@@ -129,18 +129,18 @@ index edc61a93bb7a1..62c4b418aedae 100644
    # The *_public variables should be added to 'public' not 'sources'.
    # However, Skia does not export enough *_public variables to make Chromium
    # 'gn check' clean. Until that can be done add the *_public variables to
-@@ -369,9 +378,6 @@ component("skia") {
+@@ -386,9 +395,6 @@ component("skia") {
      sources += [ "//third_party/skia/src/core/SkUtilsArm.cpp" ]
    }
 
 -  # Remove unused util sources.
 -  sources -= [ "//third_party/skia/src/utils/SkParsePath.cpp" ]
 -
    if (is_win) {
-     libs = [ "fontsub.lib" ]
-   }
+     sources -= [
+       # Keeping _win.cpp
 diff --git a/third_party/blink/public/web/web_frame_widget.h b/third_party/blink/public/web/web_frame_widget.h
-index 6264d513b398c..f304767c1bcdd 100644
+index 9b9d54e43a1a1..e2eaad722cc08 100644
 --- a/third_party/blink/public/web/web_frame_widget.h
 +++ b/third_party/blink/public/web/web_frame_widget.h
 @@ -48,6 +48,10 @@
@@ -154,7 +154,7 @@ index 6264d513b398c..f304767c1bcdd 100644
  namespace cc {
  struct ApplyViewportChangesArgs;
  class LayerTreeHost;
-@@ -227,6 +231,9 @@ class WebFrameWidget : public WebWidget {
+@@ -223,6 +227,9 @@ class WebFrameWidget : public WebWidget {
    // GPU benchmarking extension needs access to the LayerTreeHost
    friend class GpuBenchmarkingContext;
 
@@ -165,7 +165,7 @@ index 6264d513b398c..f304767c1bcdd 100644
    // WebFrameWidgetImpl is the only concrete subclass that implements
    // WebFrameWidget, so that it is safe to downcast to WebFrameWidgetImpl.
 diff --git a/third_party/blink/renderer/core/frame/remote_frame_view.cc b/third_party/blink/renderer/core/frame/remote_frame_view.cc
-index 52e5d82981643..1d1865d641313 100644
+index a3e8944556ccd..874863225fda7 100644
 --- a/third_party/blink/renderer/core/frame/remote_frame_view.cc
 +++ b/third_party/blink/renderer/core/frame/remote_frame_view.cc
 @@ -419,7 +419,9 @@ uint32_t RemoteFrameView::Print(const gfx::Rect& rect,
@@ -180,7 +180,7 @@ index 52e5d82981643..1d1865d641313 100644
    // RACE: there is a possibility that the embedding token will be null and
    // still be in a valid state. This can occur is the frame has recently
 diff --git a/third_party/blink/renderer/platform/fonts/font.cc b/third_party/blink/renderer/platform/fonts/font.cc
-index 7b5c0ef5121e1..34718e30fb614 100644
+index 67ba540bfc2b0..f22e6988cf488 100644
 --- a/third_party/blink/renderer/platform/fonts/font.cc
 +++ b/third_party/blink/renderer/platform/fonts/font.cc
 @@ -230,15 +230,22 @@ void Font::DrawText(cc::PaintCanvas* canvas,

src/chromium.patch

@@ -1,14 +1,34 @@
 import { app, BrowserWindow } from 'electron'
 
-app.dock.hide()
-// app.commandLine.appendSwitch('enable-logging')
-app.commandLine.appendSwitch('headless')
-app.whenReady()
-    .then(async () => {
+
+Promise.resolve().then(async () => {
+    const entry = process.argv.find(a => a.endsWith('html2svg.js'))
+    const index = entry ? process.argv.indexOf(entry) : -1
+    const args = process.argv.slice(Math.max(2, index + 1))
+    const [url] = args
+    
+    if (!url) {
+        throw new Error('Usage: html2svg [url]')
+    }
+    
+    app.dock?.hide()
+    app.commandLine.appendSwitch('headless')
+    app.commandLine.appendSwitch('no-sandbox')
+    app.commandLine.appendSwitch('disable-gpu')
+
+    await app.whenReady()
+
+    return url
+})
+    .then(async (url) => {
         const page = new BrowserWindow({
             show: false,
             width: 1920,
             height: 1080,
+
+            webPreferences: {
+                sandbox: false,
+            }
         })
 
         try {
@@ -28,7 +48,7 @@ app.whenReady()
 
                         page.webContents.once('did-finish-load', listener)
 
-                        await page.loadURL('https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes/_sample_.making_combinations.html')
+                        await page.loadURL(url)
                     })
                     .catch(reject),
             )
@@ -61,8 +81,8 @@ app.whenReady()
             page.destroy()
         }
     })
-    .then((result) => {
-        console.log(result)
+    .then(async (result) => {
+        await print(result)
 
         process.exit(0)
     })
@@ -71,3 +91,17 @@ app.whenReady()
 
         process.exit(1)
     })
+
+// Electron seems to drop lines if we send them too fast on slow streams like Docker..
+async function print(output: string) {
+    const awfulBugSizeHeuristic = 1024
+
+    for(let i = 0; i < output.length; i += awfulBugSizeHeuristic) {
+        await new Promise<void>((resolve, reject) =>
+            process.stdout.write(
+                output.slice(i, i + awfulBugSizeHeuristic),
+                error => error ? reject(error) : resolve(),
+            )
+        )
+    }
+}