Add node support

[mrfrase3]

trafficstars

• Adds nodeCanvas prop.
• Updates download method
  • method now returns a promise, that will resolve with the image URI
  • buffer option that returns a buffer instead of a URI (only if using nodeCanvas)
  • skipDownload option if someone only wants the URI, and not have the client download the image.
• Added unit test
• Updated Readme

closes #9 closes #39

[randomprogramming]

Could you just add the Canvas type in QROptions so that people know what they need to pass in without looking at the source?

QROptions.ts: add import {Canvas} from "canvas"; change the Options type to: nodeCanvas?: Canvas;

Sorry didn't want to create a new PR for this small change

[mrfrase3]

Can do when I'm at my computer next

[randomprogramming]

I implemented the change in my local copy of the module and in the examples it worked fine and the tests passed fine as well, but when I tried using it in my actual project I get an TS error:

Type 'typeof import("d:/.../node_modules/canvas/types/index")' is missing the following properties from type 'Canvas': width, height, type, PNG_NO_FILTERS, and 12 more.

[charles-goode]

@mrfrase3 Would love to use this. I'm trying to run the example in your modified README. I created a folder and installed canvas and this PR. Then in another file I pasted in the JS example and tried to run it, but got: Error: Cannot find module 'qr-code-styling/lib/qr-code-styling.common.js' Are there any other steps? For proof, my package.json

{
  "dependencies": {
    "canvas": "^2.8.0",
    "qr-code-styling": "kozakdenys/qr-code-styling#pull/43/head"
  }
}

[mrfrase3]

that file is made when this package is deployed for release.

It looks like a recent update to add SVG support has made a lot of my changes to the download method redundant as getRawData seems to be preferred, although it needs to be updated to return a buffer instead of a blob on node.

I'll take a look at merging this with the current master build and making the changes. I would not recommend using this until then.

[mrfrase3]

@randomprogramming I've redone this to take in the latest updates, with tests and not using the devil's any :smiling_imp:

[mrfrase3]

might also @kozakdenys

[charles-goode]

Thanks again @mrfrase3, I've forked the repo, attempted to reimplement this PR, and published a scoped version of the package. FYI with the new example usage, I'm getting UnhandledPromiseRejectionWarning: ReferenceError: Image is not defined as well as the printout of the super long base64 from imageToBlob. Perhaps related to the error, I didn't end up with a test.png file. test_blob.svg looks just fine, and test.svg has that broken image link icon in the middle (which I think you said in the README might happen).

I should also note that it seems to be failing one of the tests now. Hopefully I didn't miss something while copying off the changes of this PR into each file. It seems to be the final test: Test QRCodeStyling class › Compatible with jsdom . The output base64 URI's are almost the same, but on the received is missing the last 4 characters.

Hope this helps and isn't just some mistakes I've made while copying these changes in.

[mrfrase3]

If all you want is the qr-code-styling.common.js file, I'd suggest just cloning my branch and building it, instead of forking the main repo and copy-pasting the changes.

The 4 characters sounds like your IDE put a newline at the end on the svg file when you copy-pasted it.

Not sure about the Image is not defined error, should only happen if nodecanvas doesn't exist.

[charles-goode]

Ok cloning and building worked perfectly. I don't know how to google some of this stuff, so thanks for the help!

[vadimluminous]

@mrfrase3 @charles-goode

How do I use this in my node server? I've tried

npm i kozakdenys/qr-code-styling#pull/43/head

or

npm i https://github.com/mrfrase3/qr-code-styling#node-support

But it just gives me a mostly empty qr-code-styling folder with the LICENSE, package.json, and README.md files, nothing else.

I did go into this folder and run npm i and then npm run build but get errors building. Did I miss a step

[charles-goode]

@vadimluminous For one, I probably used yarn like yarn add <user>/<repo>#<id>/head. Its been a few weeks so I don't really every detail, but judging my earlier comment, I must have had success with simply running yarn run-script build. You may have success simply using what I published: @charles-goode/qr-code-styling where the import would be

const { QRCodeStyling } = require('@charles-goode/qr-code-styling/lib/qr-code-styling.common.js');
const nodeCanvas = require('canvas');
const { JSDOM } = require('jsdom')

On my fork I also developed support for an extra setting for the cornerDots: extra-rounded to match extra-rounded cornerSquares

[vadimluminous]

Thanks for responding @charles-goode

How do you get the /lib/ folder? I tried running a build command and get many errors like this

ERROR in ./src/constants/cornerDotTypes.ts 6:2 Module parse failed: Unexpected token (6:2) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | dot: "dot", | square: "square" } as CornerDotTypes; | @ ./src/index.ts 3:0-56 13:0-22:2

I'm not too familiar with actual packages, I just use them.

[charles-goode]

@vadimluminous /lib/ is the output of a successful build. This has something to do with webpack which is a build library. Make sure that you run yarn install to build all of the dependencies before you try to build the actual package. Your error seems to indicate you have not installed a TypeScript loader for webpack which is one of the devDependencies in the package.json (its named ts-loader). FYI I'm also really unfamiliar with this stuff, and this was my first time getting anything like it to work which is why I can't be of much instructional help.

[vadimluminous]

@charles-goode

So odd, I did install all packages, and verified that node_modules/ts-loader is in there.

Tried with yarn instead of npm as well

Thanks for responding though!

[vadimluminous]

@charles-goode

Ended up figuring this out, will list my process for anyone in the future

Runnin npm i to the pull request or mrfrase3s branch did not work.

I had to clone mrfrase3s node-support branch

Then I put the files into my root node folders /custom-scripts/qr-code-styling/

Which includes the src and package.json plus all the other files in there.

For deploying I use this npm run script

"install:a": "cd custom-scripts/qr-code-styling && npm install && npm run build", and

"postinstall": "npm run install:a && npm run build",

Alls good from here on.

Thank you @mrfrase3 for this package modification!!!

[mackbjon]

I've forked @mrfrase3's repo and modified it so it can be built and installed directly from github.

Just add "qr-code-styling": "github:mackbjon/qr-code-styling#node-support", to your package.json and npm i.

Huge thanks to @mrfrase3 for making this compatible with node!

[lsmonzon-zz]

Thanks for this, we hope to merge soon

[kuttz-dev]

Hi, I am having problems with everyone's solution to this. The repos you made (@mackbjon, @charles-goode) give me the same error: ReferenceError: self is not defined at Object.<anonymous> (C:\Users\...\node_modules\qr-code-styling-node\lib\qr-code-styling.js:1:208)

[charles-goode]

@kuttz-dev perhaps this is related https://stackoverflow.com/a/64639975/12026421

[kuttz-dev]

Oh, it looks like it may be. That means that now I need to learn webpack in order to compile it my self. Thanks @charles-goode .

[dupasj]

I wrote a comment on the following issue: https://github.com/kozakdenys/qr-code-styling/issues/9#issuecomment-977857608

Where and how could I share my code ? (All the test unit will fail)

[seebeen]

I got so pissed off because this wouldn't work properly in node.

You have a complete, installable NPM package on my repo - https://github.com/oblakstudio/qr-code-styling

You'll need to import the files like this:

import * as qrs from '@oblakstudio/qr-code-styling/lib/qr-code-styling.common.js';
const nodeCanvas = require('canvas');
const { JSDOM } = require('jsdom');

I'm gonna rewrite this lib for nodeJS using native functions and modules, without this jerry-rigging

[HUSKUT]

~After a shitload of trying to make this work, I am still getting errors that document is not defined (which is logical in nodeJS) even though I cloned the forked branch. At this point nothing is working and its annoying the hell out of me.~

EDIT: Apparently I cloned the master branch, and not the node-support branch.

I am still having the issue that "window is not defined"

    const qrCodeImage = new QRCodeStyling({
        nodeCanvas, // this is required
        ...options
    }

    res.send(qrCodeImage.getRawData("png"))

error message: ReferenceError: document is not defined

Also: I had to remove the brackets at the import due to nodejs being a crybaby saying that its not a constructor.

[AshuTheDoughnut]

Can we add node support for this library? Really waiting for it.

[AshuTheDoughnut]

@mrfrase3 @charles-goode @vadimluminous

If all you want is the qr-code-styling.common.js file, I'd suggest just cloning my branch and building it, instead of forking the main repo and copy-pasting the changes.

The 4 characters sounds like your IDE put a newline at the end on the svg file when you copy-pasted it.

Not sure about the Image is not defined error, should only happen if nodecanvas doesn't exist.

I am also getting the Image is not defined error even tho I have installed node canvas and even ran npm install, but If I set it to "svg", It just kills the whole process on

const buffer = await qrCode.getRawData('svg');
console.log(buffer);

The console log buffer never prints. It just ends the program trying to get the Raw Data. Just nothing seems to make it work on node. Any suggestions please?

[trongithust]

@kozakdenys Please merge and release new version.

[KilianB]

If somsone is looking for an alternative, I was in the need for this as well and created my own version only supporting node via skia-canvas, bumping dependencies and incorporating #110 . Nothing fancy but working for my own projects

https://github.com/KilianB/qr-code-styling-node

[seebeen]

@KilianB Seems better than what I made. PRs welcome? :)

[charanjit-singh]

I installed styled-qr-code compiler is not able to resolve the module