nayuki / QR-Code-generator

High-quality QR Code generator library in Java, TypeScript/JavaScript, Python, Rust, C++, C.

Home Page:https://www.nayuki.io/page/qr-code-generator-library

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Publish the JS package

lucafaggianelli opened this issue · comments

It's such a great library, why don't you publish it on NPM so we can install it with npm install qrcodegen?

Happy to help if you want!

I don't know how to publish a package on NPM. It takes time to figure out build tools and packaging standards.

Cargo (Rust) was pretty straightforward. PyPI (Python) took more steps and had some ambiguity. Maven Central (Java) was an absolute nightmare to learn and configure and took me several days to figure out, not to mention writing and auditing that opaque pom.xml file.

Also, I come from the oldschool style of development of manually downloading source files and dropping them into a project...

Yeah, I see its never a straightforward thing!
NPM is quite painless though, I’d come up with a PR if you want, otherwise nothing 😊 I’ll just manually download the TS source

Alternatively to NPM, we've been using the JS files. We added the UMD module for supporting modules and not module importing: https://github.com/Cyphrme/qrgen

See this line: https://github.com/Cyphrme/qrgen/blob/7776160432f435779c29a4c9cdd617cd52643cff/qrgen.js#L1084

@zamicol: I see that your copy of qrgen.js comes from my old code. It is the hand-written JavaScript port that existed up until 2019-07-16, before being deleted and superseded by the TypeScript port. Any reason why you chose to package the old JavaScript code?

Nayuki , thank you for your work!

That's when I forked it and have not updated it since. I will update using the Typescript port, and include a Javascript minified distributable, when I get a chance. I'd love to help out with the Javascript process if you'd find that useful.

I was thinking about doing it soon and wanted to see if this repo had done that yet, so I searched for an issue and found this by happenstance. What's your Javascript pipeline look like?We typically use esbuild, but the module stuff has to be done manually for now because of a bug. (As a matter of preference, we like having an option of a pipeline that has no dependency on Node.)

@zamicol: Thanks. For your reference, you can grab my officially compiled JavaScript code at https://github.com/nayuki/QR-Code-generator/tags , for example https://github.com/nayuki/QR-Code-generator/releases/tag/v1.8.0 .

My JavaScript build pipeline is: tsc --strict --target ES2015 *.ts 😂

Thanks Nayuki,

TL;DR:

May I suggest the following addition?

tsc --strict --lib DOM,DOM.Iterable,ES6 --target ES6 *.ts
esbuild qrcodegen.js --minify --outfile=qrcodegen.min.js && cat module_append.txt >> qrcodegen.min.js

Long:

There's a few more things: build instructions for a stand alone qrcodegen file, minification, UMD modules, and a working out-of-the-box demo with JS files included with the release/distributable. Below is detailed suggestions.

Looks like build instructions and modules have been mentioned in a previous open issue. I left a comment there as well to link the issues.

Modules

Modules help integrating with other Javascript applications more expressive,
easier to debug, and the UMD modules allows universal module/not module usage.

See this file as a suggested way to add UMD module support. Here's an example of it integrated into code here. (Note, this has to be added after esbuild because of a not-yet-fixed bug.)

Minification

Using this command on the release

esbuild qrcodegen-v1.8.0-es6.js --minify --outfile=qrcodegen-v1.8.0-es6.min.js

The file size is reduced from 45.3 kB to 11.6kB (link).

Building/Compiling

The existing build.sh does not have build instructions for the main qrcodegen.js. A one line addition makes this clear.

tsc --strict --lib DOM,DOM.Iterable,ES6 --target ES6 qrcodegen.ts
tsc --strict --lib DOM,DOM.Iterable,ES6 --target ES6 qrcodegen.ts qrcodegen-input-demo.ts
tsc --strict --lib DOM,DOM.Iterable,ES6 --target ES6 qrcodegen.ts qrcodegen-output-demo.ts

Or alternatively as you just suggested:

tsc --strict --lib DOM,DOM.Iterable,ES6 --target ES6 *.ts

See also #159

The output files can be included in the release and demo (see below).

Demo

As far as the release, (QR-Code-generator-1.8.0.tar.gz or
QR-Code-generator-1.8.0.zip), it is missing the referred files:

  • qrcodegen.js
  • qrcodegen-input-demo.js
  • qrcodegen-output-demo.js

It seems like a good idea to include these in the release so that the demo works out-of-the-box. Here's an example of included those files so it works out-of-the-box.

Thank you again for all your hard work.

commented

There is already PR for this: #25.
It's not complete (references author's repo) but may help

Hello again! I was also wondering if #159 had been considered?

I don't know how to publish a package on NPM. It takes time to figure out build tools and packaging standards.

Cargo (Rust) was pretty straightforward. PyPI (Python) took more steps and had some ambiguity. Maven Central (Java) was an absolute nightmare to learn and configure and took me several days to figure out, not to mention writing and auditing that opaque pom.xml file.

Also, I come from the oldschool style of development of manually downloading source files and dropping them into a project...

Please find our PR : #168

A few comments :

  • we tried to stay as close as possible to the Makefile philosophy leveraging everything possible to reduce the need of 3rd party packages (mv & rm Unix commands, npm "pre" scripts)
  • we moved some utils functions (drawCanvas & toSvgString) to a dedicated submodule (/utils)
  • we used the latest functionalities of the npm/JS/TS ecosystem (exports & typesVersions in package.json, as well as npx & npm argument parser w/ npm_config_ for launching the demo)

I published WebAssembly version on npm

https://github.com/toyobayashi/qrcodegen

@nayuki Is there a plan?

I've also published a fully refactored non-WASM version with premade renderers for both the terminal and canvas/svg.