Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Uncouple from node-canvas. #136

Open
VictorioBerra opened this issue Nov 17, 2020 · 12 comments
Open

Uncouple from node-canvas. #136

VictorioBerra opened this issue Nov 17, 2020 · 12 comments

Comments

@VictorioBerra
Copy link

VictorioBerra commented Nov 17, 2020 •
edited
Loading

node-canvas requires node gyp and its a nightmare to use with things like electron or docker. Is there a way to fully uncouple from canvas and instead have an abstraction where the user can decide?

For example, svg is a good start but if I install Trianglify I am forced to download node-canvas even if I dont want it.

Maybe some possible alternatives:
@VictorioBerra
Copy link
Author

VictorioBerra commented Nov 18, 2020 •
edited
Loading

Thinking about this more. Could we have Canvas be a peer dependency, that is not needed in browser, but in node, if it exists, pattern.js will try and create a canvas from it. We could have it in devDependencies for Jest.

@VictorioBerra VictorioBerra mentioned this issue Nov 18, 2020
Closed
@qrohlf
Copy link
Owner

qrohlf commented Nov 18, 2020 •
edited
Loading

@VictorioBerra I've gone back and forth on this a fair amount. node-canvas was previously an optionalDependency, but that created UX issues with developers (and frankly the npm behavior around optional deps is really confusing/bad).

The latest version of node-canvas includes a browsers: implementation that just shims to the native HTML5 canvas implementation. If you're building for a browser or browser-like runtime, your build tool should be using this shim rather than trying to boot up node-canvas itself.

Can you give a specific example of your use case and the pain point that you're hitting? Both pureimage and camanjs look interesting, but I'm hesitant to swap out a dependency that has served this project well for 5+ years without more information.

@VictorioBerra
Copy link
Author

VictorioBerra commented Nov 19, 2020 •
edited
Loading

My issue is mainly with Electron. Since electron is being built on Node it will still fire up the node-gyp try and download the precompiled binary but none exists. Even though electron uses Chrome, any native dependencies like node-canvas are still re-built.

I definitely understand your point about optionalDependency nightmares, and not wanting to move away from it.

Maybe the solution is for me to just fork and publish a non none-canvas build so that it works for my niche usecase. Although I wish there was an easy way for this to be more optional. Just like Jest and Canvas.

The following happens during an npm i

PS C:\Users\toryb\Desktop\triangle-wallpaper> npm i

> [email protected] postinstall C:\Users\toryb\Desktop\triangle-wallpaper
> electron-builder install-app-deps

  • electron-builder  version=22.9.1
  • rebuilding native dependencies  [email protected] platform=win32 arch=x64
  ⨯ cannot execute  cause=exit status 1
                    out=
    > [email protected] install C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas
    > node-pre-gyp install --fallback-to-build

    Building the projects in this solution one at a time. To enable parallel build, please add the "-m" switch.
      Backend.cc
      ImageBackend.cc
      PdfBackend.cc
      SvgBackend.cc
      BMPParser.cc
      Backends.cc
      Canvas.cc
      CanvasGradient.cc
      CanvasPattern.cc
      CanvasRenderingContext2d.cc
      closure.cc
      color.cc
      Image.cc
      ImageData.cc
      init.cc
      register_font.cc
      win_delay_load_hook.cc
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\backend\ImageBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\backend\ImageBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\backend\Backend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\backend\Backend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\CanvasPattern.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\CanvasPattern.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\ImageData.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\ImageData.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\backend\PdfBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\backend\PdfBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\CanvasGradient.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\CanvasGradient.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\backend\SvgBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\CanvasRenderingContext2d.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\backend\SvgBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\CanvasRenderingContext2d.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\Backends.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\Backends.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\Canvas.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\Canvas.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\closure.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\closure.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\Image.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\Image.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9116,39): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\init.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8.h(9124,42): warning C4996: 'v8::MicrotasksCompletedCallback': Use *WithData version. (compiling source file ..\src\init.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(295,1): warning C4127: conditional expression is constant (compiling source file ..\src\backend\ImageBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(233): message : see reference to function template instantiation 'T v8::internal::Internals::ReadRawField<uint16_t>(v8::internal::Address,int)' being compiled [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
              with
              [
                  T=uint16_t
              ] (compiling source file ..\src\backend\ImageBackend.cc)
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(295,1): warning C4127: conditional expression is constant (compiling source file ..\src\backend\Backend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(233): message : see reference to function template instantiation 'T v8::internal::Internals::ReadRawField<uint16_t>(v8::internal::Address,int)' being compiled [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
              with
              [
                  T=uint16_t
              ] (compiling source file ..\src\backend\Backend.cc)
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(295,1): warning C4127: conditional expression is constant (compiling source file ..\src\ImageData.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(233): message : see reference to function template instantiation 'T v8::internal::Internals::ReadRawField<uint16_t>(v8::internal::Address,int)' being compiled [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
              with
              [
                  T=uint16_t
              ] (compiling source file ..\src\ImageData.cc)
    C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\src\closure.h(6,10): fatal error C1083: Cannot open include file: 'jpeglib.h': No such file or directory (compiling source file ..\src\backend\PdfBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\src\closure.h(6,10): fatal error C1083: Cannot open include file: 'jpeglib.h': No such file or directory (compiling source file ..\src\backend\SvgBackend.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\src\closure.h(6,10): fatal error C1083: Cannot open include file: 'jpeglib.h': No such file or directory (compiling source file ..\src\Backends.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(295,1): warning C4127: conditional expression is constant (compiling source file ..\src\CanvasGradient.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(233): message : see reference to function template instantiation 'T v8::internal::Internals::ReadRawField<uint16_t>(v8::internal::Address,int)' being compiled [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
              with
              [
                  T=uint16_t
              ] (compiling source file ..\src\CanvasGradient.cc)
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(295,1): warning C4127: conditional expression is constant (compiling source file ..\src\CanvasPattern.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(233): message : see reference to function template instantiation 'T v8::internal::Internals::ReadRawField<uint16_t>(v8::internal::Address,int)' being compiled [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
              with
              [
                  T=uint16_t
              ] (compiling source file ..\src\CanvasPattern.cc)
    C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\src\closure.h(6,10): fatal error C1083: Cannot open include file: 'jpeglib.h': No such file or directory (compiling source file ..\src\Canvas.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\src\closure.h(6,10): fatal error C1083: Cannot open include file: 'jpeglib.h': No such file or directory (compiling source file ..\src\closure.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(295,1): warning C4127: conditional expression is constant (compiling source file ..\src\init.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]   
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(233): message : see reference to function template instantiation 'T v8::internal::Internals::ReadRawField<uint16_t>(v8::internal::Address,int)' being compiled [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
              with
              [
                  T=uint16_t
              ] (compiling source file ..\src\init.cc)
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(295,1): warning C4127: conditional expression is constant (compiling source file ..\src\Image.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]  
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(233): message : see reference to function template instantiation 'T v8::internal::Internals::ReadRawField<uint16_t>(v8::internal::Address,int)' being compiled [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
              with
              [
                  T=uint16_t
              ] (compiling source file ..\src\Image.cc)
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(295,1): warning C4127: conditional expression is constant (compiling source file ..\src\CanvasRenderingContext2d.cc) [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
    C:\Users\toryb\.electron-gyp\9.3.4\include\node\v8-internal.h(233): message : see reference to function template instantiation 'T v8::internal::Internals::ReadRawField<uint16_t>(v8::internal::Address,int)' being compiled [C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\canvas.vcxproj]
              with
              [
                  T=uint16_t
              ] (compiling source file ..\src\CanvasRenderingContext2d.cc)
    Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js build --fallback-to-build --module=C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\Release\canvas.node --module_name=canvas --module_path=C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\Release --napi_version=7 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=electron-v9.3' (1)

                    errorOut=node-pre-gyp WARN Using request for node-pre-gyp https download
    node-pre-gyp WARN Tried to download(404): https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-electron-v9.3-win32-unknown-x64.tar.gz
    node-pre-gyp WARN Pre-built binaries not found for [email protected] and [email protected] (electron-v9.3 ABI, unknown) (falling back to source compile with node-gyp)
    gyp ERR! build error
    gyp ERR! stack Error: `C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\Current\Bin\MSBuild.exe` failed with exit code: 1
    gyp ERR! stack     at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\build.js:194:23)
    gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
    gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)
    gyp ERR! System Windows_NT 10.0.19041
    gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "build" "--fallback-to-build" "--module=C:\\Users\\toryb\\Desktop\\triangle-wallpaper\\node_modules\\canvas\\build\\Release\\canvas.node" "--module_name=canvas" "--module_path=C:\\Users\\toryb\\Desktop\\triangle-wallpaper\\node_modules\\canvas\\build\\Release" "--napi_version=7" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=electron-v9.3"
    gyp ERR! cwd C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas
    gyp ERR! node -v v14.15.0
    gyp ERR! node-gyp -v v5.1.0
    gyp ERR! not ok
    node-pre-gyp ERR! build error
    node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js build --fallback-to-build --module=C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\Release\canvas.node --module_name=canvas --module_path=C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas\build\Release --napi_version=7 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=electron-v9.3' (1)   
    node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\node-pre-gyp\lib\util\compile.js:83:29)
    node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:315:20)
    node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:1048:16)
    node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
    node-pre-gyp ERR! System Windows_NT 10.0.19041
    node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\toryb\\Desktop\\triangle-wallpaper\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build"
    node-pre-gyp ERR! cwd C:\Users\toryb\Desktop\triangle-wallpaper\node_modules\canvas
    node-pre-gyp ERR! node -v v14.15.0
    node-pre-gyp ERR! node-pre-gyp -v v0.11.0
    node-pre-gyp ERR! not ok
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! [email protected] install: `node-pre-gyp install --fallback-to-build`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the [email protected] install script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\toryb\AppData\Roaming\npm-cache\_logs\2020-11-19T00_59_58_550Z-debug.log

                    command='C:\Program Files\nodejs\node.exe' 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js' rebuild [email protected]
                    workingDir=
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `electron-builder install-app-deps`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\toryb\AppData\Roaming\npm-cache\_logs\2020-11-19T00_59_58_820Z-debug.log

You can see: WARN Tried to download(404): https://github.com/node-gfx/node-canvas-prebuilt/releases/download/v2.6.1/canvas-v2.6.1-electron-v9.3-win32-unknown-x64.tar.gz

@qrohlf
Copy link
Owner

qrohlf commented Nov 19, 2020

That makes sense, there's no prebuilt version available so it blows up. It's also definitely not ideal that users with supported architectures who only need the browser shim have to download the whole node-canvas package including a heavy binary, despite only needing about 15 lines of JS from it. I'd like to improve the situation, I'm just a bit cautious because my past attempts (using peerDependencies and optionalDependencies) to try to resolve this issue have led to more developer confusion versus less.

Brainstorming a little bit here:

  • Pureimage doesn't have a stable release yet, doesn't have a ton of momentum/contributors, and generally isn't a super mature project. It's a cool initiative, but it's not at the point where I'm comfortable using it as a dep for a package this popular.
  • Camanjs looks like it's a library for manipulating bitmap images (contrast/brightness/hue/etc adjustments), not a general purpose 2d graphics library.
  • I think it's unlikely that anything will unseat node-canvas here. Automattic has been really generous about contributing time/resources to the project, the fact that it's doing the heavy lifting in C++ means it blows JS drawing libraries out of the water performance-wise. On the other hand, it's built on top of Cairo, which is shaky ground to build on these days. I wonder if they're going to migrate to Skia?

The thing that might make the most sense would be to publish a separate trianglify-browser package in addition to the core trianglify package - the only difference between the two would be that instead of pulling in node-canvas, trianglify-browser would have its own createCanvas shim instead. This could potentially eliminate some pain as well when developers are trying to use trianglify with a module bundler that isn't respecting the "browsers" field correctly.

@VictorioBerra - would publishing a trianglify-browser package without the node-canvas dep solve your issue? It seems like it would.

@VictorioBerra
Copy link
Author

Yes I think that's the best course of action. I was going to do that myself tomorrow. But I'd rather it come from you that way it benifits from all the updates and issues here.

Would you want to publish a core library to be used by both? That way you don't have duplication.

@qrohlf
Copy link
Owner

qrohlf commented Nov 19, 2020

@VictorioBerra as long as the only difference is the absence of the node-canvas dep, the code between the two libraries will be 100% identical. I think what I'm going to do is just tweak my deploy automation so that the browser UMD build gets published as its own module with the appropriate package.json tweaks, that way everything "Just Works" without having to add a third "trianglify-core" module into the mix.

@VictorioBerra
Copy link
Author

Sounds great I look forward to testing it!

@VictorioBerra
Copy link
Author

@qrohlf https://github.com/VictorioBerra/trianglify-desktop-wallpaper
See it in action on Linux via the Snap Store https://snapcraft.io/triangle-wallpaper release GPLv3 in accordance with Trianglify license.
For now, I released Trianglify no-canvas so I could push forward and keep working on the app: https://www.npmjs.com/package/@victorioberra/trianglify-browser

But id love to switch to your official package when you get this done.

Thanks for making this library!

@knrdl
Copy link

knrdl commented Dec 16, 2022

I would also love to see an official trianglify-browser package on npm. That could reduce confusion about what package to use.

@qrohlf
Copy link
Owner

qrohlf commented Dec 16, 2022 •
edited
Loading

@knrdl agree that it's confusing!

I want to avoid publishing two different packages since there are projects (including the project that funds this library) that do use on Trianglify on both the server-side and the browser and it's very helpful to have a single package to ensure that the browser and server rendering of patterns is always deterministic and matches.

This package is in fact fully browser-compatible, as node-canvas just exports a very thin shim with no dependencies when imported in a bundler/browser environment.

The real problem is that installation of node-canvas will fail when you try to compile native binaries for the server-side implementation of node-canvas on a machine without the correct dependencies installed. This is especially problematic for folks who are building projects within environments like Docker or Electron.

In the past I've listed node-canvas as an optionalDependency so that the npm install doesn't fail if the native build fails. However, I think the behavior in modern package installers is to remove the JS source files for optionalDependencies if the native build fails, which means that the node-canvas shim won't be available and the browser package build will fail as a result.

@knrdl For now, the situation is that this package is the official browser implementation of Trianglify, and it requires an environment where node-canvas can be installed in order to use it. I'm open for suggestions on how to work around this limitation if you have any ideas.

@VictorioBerra could you please either update your package to track the latest version of Trainglify, or un-publish your package/mark it deprecated so that module consumers are not confused?

@VictorioBerra
Copy link
Author

could you please either update your package to track the latest version of Trainglify, or un-publish your package/mark it deprecated so that module consumers are not confused?

@qrohlf I listed my package with the prefix @VictorioBerra/ to try and make it clear its a fork from my account, to install it you would need the full prefix IE: npm i @victorioberra/trianglify-browser. I do not think this is too confusing.

What do I need to do to update my package? My package is a fork of trianglify, it does not depend on it.

@knrdl
Copy link

knrdl commented Dec 17, 2022

I am currently using the version provided by @VictorioBerra . My goal is to use trianglify client side but in a Sveltekit project (nodejs server). The builds are handled by docker. So I run into the exact problems @qrohlf described in detail above.
If I want to use the official package (instead of @victorioberra/trianglify-browser) I would have to do something like:

npm i
npm i trianglify || exit 0

this workaround is just a bit ugly ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@qrohlf @VictorioBerra @knrdl