Merge pull request #20 from yisibl/update-napi

feat: implement renderAsync

Author: Brooooooklyn

.eslintignore

@@ -0,0 +1,3 @@
+js-binding.js
+js-binding.d.ts
+target

.gitattributes

@@ -0,0 +1,14 @@
+# Auto detect text files and perform LF normalization
+*        text=auto
+
+
+*.ts    text eol=lf merge=union 
+*.tsx   text eol=lf merge=union 
+*.rs    text eol=lf merge=union 
+*.js    text eol=lf merge=union 
+*.json  text eol=lf merge=union 
+*.debug text eol=lf merge=union 
+
+# Generated files
+js-binding.js linguist-detectable=false
+js-binding.d.ts linguist-detectable=false

.github/workflows/CI.yaml

@@ -40,7 +40,7 @@ jobs:
             target: 'x86_64-pc-windows-msvc'
           - host: windows-latest
             build: |
-              export CARGO_PROFILE_RELEASE_CODEGEN_UNITS=32;
+              export CARGO_PROFILE_RELEASE_CODEGEN_UNITS=64;
               export CARGO_PROFILE_RELEASE_LTO=false
               yarn build --target i686-pc-windows-msvc
               yarn test
@@ -66,6 +66,11 @@ jobs:
           - host: macos-latest
             target: 'aarch64-apple-darwin'
             build: |
+              sudo rm -Rf /Library/Developer/CommandLineTools/SDKs/*;
+              export CC=$(xcrun -f clang);
+              export CXX=$(xcrun -f clang++);
+              SYSROOT=$(xcrun --sdk macosx --show-sdk-path);
+              export CFLAGS="-isysroot $SYSROOT -isystem $SYSROOT";
               yarn build --target=aarch64-apple-darwin
               strip -x *.node
           - host: ubuntu-latest
@@ -84,14 +89,16 @@ jobs:
             target: 'aarch64-linux-android'
             build: |
               export CARGO_TARGET_AARCH64_LINUX_ANDROID_LINKER="${ANDROID_NDK_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/aarch64-linux-android24-clang"
+              export PATH="${ANDROID_NDK_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin:${PATH}"
               yarn build --target aarch64-linux-android
+              ${ANDROID_NDK_HOME}/toolchains/llvm/prebuilt/linux-x86_64/bin/aarch64-linux-android-strip *.node
           - host: ubuntu-latest
             target: 'aarch64-unknown-linux-musl'
             docker: |
               docker login -u $DOCKER_USERNAME -p $DOCKER_PASSWORD $DOCKER_REGISTRY_URL
               docker pull ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine
               docker tag ghcr.io/napi-rs/napi-rs/nodejs-rust:lts-alpine builder
-            build: docker run --rm -v ~/.cargo/git:/root/.cargo/git -v ~/.cargo/registry:/root/.cargo/registry -v $(pwd):/resvgjs -w /resvgjs builder sh -c "yarn build -- --target=aarch64-unknown-linux-musl"
+            build: docker run --rm -v ~/.cargo/git:/root/.cargo/git -v ~/.cargo/registry:/root/.cargo/registry -v $(pwd):/resvgjs -w /resvgjs builder sh -c "rustup toolchain install $(cat ./rust-toolchain) && rustup target add aarch64-unknown-linux-musl && yarn build -- --target=aarch64-unknown-linux-musl"
           - host: windows-latest
             target: 'aarch64-pc-windows-msvc'
             build: yarn build --target aarch64-pc-windows-msvc
@@ -105,15 +112,14 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
           check-latest: true
 
       - name: Install
         uses: actions-rs/toolchain@v1
         with:
           profile: minimal
           override: true
-          toolchain: stable
           target: ${{ matrix.settings.target }}
 
       - name: Generate Cargo.lock
@@ -125,19 +131,19 @@ jobs:
         uses: actions/cache@v2
         with:
           path: ~/.cargo/registry
-          key: ${{ matrix.settings.target }}-node@14-cargo-registry-trimmed-${{ hashFiles('**/Cargo.lock') }}
+          key: ${{ matrix.settings.target }}-node@16-cargo-registry-trimmed-${{ hashFiles('**/Cargo.lock') }}
 
       - name: Cache cargo index
         uses: actions/cache@v2
         with:
           path: ~/.cargo/git
-          key: ${{ matrix.settings.target }}-node@14-cargo-index-trimmed-${{ hashFiles('**/Cargo.lock') }}
+          key: ${{ matrix.settings.target }}-node@16-cargo-index-trimmed-${{ hashFiles('**/Cargo.lock') }}
 
       - name: Cache NPM dependencies
         uses: actions/cache@v2
         with:
           path: node_modules
-          key: npm-cache-${{ matrix.settings.target }}-node@14-${{ hashFiles('yarn.lock') }}
+          key: npm-cache-${{ matrix.settings.target }}-node@16-${{ hashFiles('yarn.lock') }}
 
       - name: Pull latest image
         run: ${{ matrix.settings.docker }}

.github/workflows/lint.yaml

@@ -0,0 +1,46 @@
+name: Lint
+
+on:
+  push:
+    branches:
+      - main
+    tags-ignore:
+      - '**'
+  pull_request:
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+
+      - name: Install
+        uses: actions-rs/toolchain@v1
+        with:
+          profile: minimal
+          override: true
+          components: rustfmt, clippy
+
+      - name: Cache NPM dependencies
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: npm-cache-lint-node@16-${{ hashFiles('yarn.lock') }}
+
+      - name: 'Install dependencies'
+        run: yarn install --frozen-lockfile --registry https://registry.npmjs.org --network-timeout 300000
+
+      - name: ESLint
+        run: yarn lint
+
+      - name: Cargo fmt
+        run: cargo fmt -- --check
+
+      - name: Clippy
+        run: cargo clippy

.prettierignore

@@ -1 +1,3 @@
 target
+js-binding.js
+js-binding.d.ts

Cargo.toml

@@ -1,24 +1,28 @@
 [package]
-name = "resvg-js"
-version = "1.0.0"
 authors = ["yisibl <[email protected]>"]
-license = "MPL-2.0"
 edition = "2021"
+license = "MPL-2.0"
+name = "resvg-js"
+version = "1.0.0"
 
 [lib]
 crate-type = ["cdylib"]
 
 [dependencies]
-napi = { version = "1", features = ["serde-json"] }
-napi-derive = "1"
-resvg = { version = "0.19.0", default-features = false, features = ["filter"] }
-usvg = { version = "0.19.0", default-features = false, features = ["export", "filter", "text"] }
-svgtypes = "0.8.0"
-tiny-skia = "0.6.1"
+env_logger = "0.9.0"
 fontdb = "0.7.0"
 log = "0.4"
-env_logger = "0.9.0"
-serde = { version = "1", features = ["derive"] }
+napi = {version = "2.0.0-alpha.2", features = ["serde-json"]}
+napi-derive = "2.0.0-alpha.3"
+resvg = {version = "0.19.0", default-features = false, features = ["filter"]}
+serde = {version = "1", features = ["derive"]}
+serde_json = "1"
+svgtypes = "0.8.0"
+tiny-skia = "0.6.1"
+usvg = {version = "0.19.0", default-features = false, features = ["export", "filter", "text"]}
+
+[target.'cfg(all(not(all(target_os = "linux", target_arch = "aarch64", target_env = "musl")), not(all(target_os = "windows", target_arch = "aarch64"))))'.dependencies]
+mimalloc-rust = {version = "0.1"}
 
 [build-dependencies]
 napi-build = "1"

__test__/index.spec.ts

@@ -4,7 +4,7 @@ import { join } from 'path'
 import test from 'ava'
 import jimp from 'jimp'
 
-import { render } from '../index'
+import { render, renderAsync } from '../index'
 
 test('fit to width', async (t) => {
   const filePath = '../example/text.svg'
@@ -63,3 +63,49 @@ test('Load custom font', async (t) => {
   t.is(result.getWidth(), 1324)
   t.is(result.getHeight(), 687)
 })
+
+test('Async rendering', async (t) => {
+  const filePath = '../example/text.svg'
+  const svg = await fs.readFile(join(__dirname, filePath))
+  const params = {
+    font: {
+      fontFiles: ['./example/SourceHanSerifCN-Light-subset.ttf'], // Load custom fonts.
+      loadSystemFonts: false, // It will be faster to disable loading system fonts.
+      defaultFontFamily: 'Source Han Serif CN Light',
+    },
+  }
+  const syncRenderingResult = render(svg, params)
+  const asyncRenderingResult = await renderAsync(svg, params)
+  t.is(syncRenderingResult.length, asyncRenderingResult.length)
+  // Do not run this assert in non-x64 environment.
+  // It's too slow
+  if (process.arch === 'x64') {
+    t.deepEqual(syncRenderingResult, asyncRenderingResult)
+  }
+})
+
+const MaybeTest = typeof AbortController !== 'undefined' ? test : test.skip
+
+MaybeTest('should be able to abort queued async rendering', async (t) => {
+  // fill the task queue
+  for (const _ of Array.from({ length: 100 })) {
+    process.nextTick(() => {})
+  }
+  const filePath = '../example/text.svg'
+  const svg = await fs.readFile(join(__dirname, filePath))
+  const params = {
+    font: {
+      fontFiles: ['./example/SourceHanSerifCN-Light-subset.ttf'], // Load custom fonts.
+      loadSystemFonts: false, // It will be faster to disable loading system fonts.
+      defaultFontFamily: 'Source Han Serif CN Light',
+    },
+  }
+  const controller = new AbortController()
+  const renderingPromise = renderAsync(svg, params, controller.signal)
+  // renderingPromise is in the queue now and have not started yet.
+  controller.abort()
+  const err = await t.throwsAsync(() => renderingPromise)
+  t.is(err.message, 'AbortError')
+  // @ts-expect-error
+  t.is(err.code, 'Cancelled')
+})

benchmark/bench.ts

@@ -1,11 +1,12 @@
 import { promises as fs } from 'fs'
 import { join } from 'path'
-import b from 'benny'
 
-import { render } from '../index'
+import { createCanvas, Image } from '@napi-rs/canvas'
+import b from 'benny'
 import sharp from 'sharp'
 import svg2img from 'svg2img'
-import { createCanvas, Image } from '@napi-rs/canvas'
+
+import { render } from '../index'
 
 async function run() {
   const svg1 = await fs.readFile(join(__dirname, '../example/text.svg'))
@@ -15,7 +16,7 @@ async function run() {
   await b.suite(
     'resize width',
     b.add('resvg-js(Rust)', () => {
-      render(svg1.toString('utf-8'), {
+      render(svg1, {
         background: '#eeebe6',
         fitTo: {
           mode: 'width',
@@ -33,7 +34,7 @@ async function run() {
     }),
 
     // test from https://github.com/Brooooooklyn/canvas/blob/main/example/resize-svg.js
-    b.add('skr-canvas(Rust)', async () => {
+    b.add('skr-canvas(Rust)', () => {
       const image = new Image()
       image.src = svg1
 
@@ -50,11 +51,11 @@ async function run() {
 
       // fill the canvas with the image
       ctx.drawImage(image, 0, 0)
-      await canvas.encode('png')
+      canvas.toBuffer('image/png')
     }),
 
     b.add('svg2img(canvg and node-canvas)', () => {
-      svg2img(svg1, { width: 1200, height: 623 }, function (error, buffer) {})
+      svg2img(svg1.toString('utf8'), { width: 1200, height: 623 }, function (_error, _buffer) {})
     }),
 
     b.cycle(),
@@ -64,7 +65,7 @@ async function run() {
   await b.suite(
     'resize icon width',
     b.add('resvg-js(Rust)', () => {
-      render(icon.toString('utf-8'), {
+      render(icon, {
         fitTo: {
           mode: 'width',
           value: 386,
@@ -77,7 +78,7 @@ async function run() {
     }),
 
     b.add('sharp', async () => {
-      await sharp('__test__/icon-alarm.svg', {
+      await sharp(icon, {
         // https://github.com/lovell/sharp/issues/1421#issuecomment-514446234
         density: (72 * 386) / 24, // 72 * width / actual width
       })
@@ -86,7 +87,7 @@ async function run() {
     }),
 
     // test from https://github.com/Brooooooklyn/canvas/blob/main/example/resize-svg.js
-    b.add('skr-canvas(Rust)', async () => {
+    b.add('skr-canvas(Rust)', () => {
       const image = new Image()
       image.src = icon
 
@@ -103,11 +104,11 @@ async function run() {
 
       // fill the canvas with the image
       ctx.drawImage(image, 0, 0)
-      await canvas.encode('png')
+      canvas.toBuffer('image/png')
     }),
 
     b.add('svg2img(canvg and node-canvas)', () => {
-      svg2img(icon, { width: 386, height: 386 }, function (error, buffer) {})
+      svg2img(icon.toString('utf8'), { width: 386, height: 386 }, function (_error, _buffer) {})
     }),
 
     b.cycle(),
@@ -117,7 +118,7 @@ async function run() {
   await b.suite(
     'default options and no text',
     b.add('resvg-js(Rust)', () => {
-      render(tiger.toString('utf-8'), {
+      render(tiger, {
         font: {
           loadSystemFonts: false,
         },
@@ -126,10 +127,10 @@ async function run() {
     }),
 
     b.add('sharp', async () => {
-      await sharp('__test__/tiger.svg').toBuffer()
+      await sharp(tiger).toBuffer()
     }),
 
-    b.add('skr-canvas(Rust)', async () => {
+    b.add('skr-canvas(Rust)', () => {
       const image = new Image()
       image.src = tiger
 
@@ -146,16 +147,18 @@ async function run() {
 
       // fill the canvas with the image
       ctx.drawImage(image, 0, 0)
-      await canvas.encode('png')
+      canvas.toBuffer('image/png')
     }),
 
     b.add('svg2img(canvg and node-canvas)', () => {
-      svg2img(tiger, { width: 900, height: 900 }, function (error, buffer) {})
+      svg2img(tiger.toString('utf8'), { width: 900, height: 900 }, function (_error, _buffer) {})
     }),
 
     b.cycle(),
     b.complete(),
   )
 }
 
-run()
+run().catch((e) => {
+  console.error(e)
+})