From de04603bf71ccfefe335bc017205abc3a58fa34b Mon Sep 17 00:00:00 2001 From: Guillaume FORTAINE Date: Fri, 23 Dec 2022 00:11:07 +0100 Subject: [PATCH] feat(javascript): enable use with NPM --- typescript-javascript/.gitignore | 7 +++ typescript-javascript/build.sh | 3 +- typescript-javascript/package-lock.json | 37 +++++++++++++ typescript-javascript/package.json | 55 +++++++++++++++++++ .../qrcodegen-input-demo.html | 4 +- typescript-javascript/qrcodegen-input-demo.ts | 45 +-------------- .../qrcodegen-output-demo.html | 4 +- .../qrcodegen-output-demo.ts | 22 +------- typescript-javascript/qrcodegen.ts | 3 + typescript-javascript/tsconfig.base.json | 9 +++ typescript-javascript/tsconfig.es5.json | 7 +++ typescript-javascript/tsconfig.es6.json | 7 +++ typescript-javascript/utils/index.ts | 55 +++++++++++++++++++ 13 files changed, 189 insertions(+), 69 deletions(-) create mode 100644 typescript-javascript/.gitignore mode change 100644 => 100755 typescript-javascript/build.sh create mode 100644 typescript-javascript/package-lock.json create mode 100644 typescript-javascript/package.json create mode 100644 typescript-javascript/tsconfig.base.json create mode 100644 typescript-javascript/tsconfig.es5.json create mode 100644 typescript-javascript/tsconfig.es6.json create mode 100644 typescript-javascript/utils/index.ts diff --git a/typescript-javascript/.gitignore b/typescript-javascript/.gitignore new file mode 100644 index 00000000..d117436f --- /dev/null +++ b/typescript-javascript/.gitignore @@ -0,0 +1,7 @@ +# Dependency directories +node_modules/ + +# build artifacts +dist +dist-* +types \ No newline at end of file diff --git a/typescript-javascript/build.sh b/typescript-javascript/build.sh old mode 100644 new mode 100755 index 5875c15a..311ef17f --- a/typescript-javascript/build.sh +++ b/typescript-javascript/build.sh @@ -21,5 +21,4 @@ # Software. # -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 +./node_modules/.bin/tsc --strict --lib DOM,DOM.Iterable,ES6 --target ES6 *.ts utils/index.ts --outDir dist-demo diff --git a/typescript-javascript/package-lock.json b/typescript-javascript/package-lock.json new file mode 100644 index 00000000..095243cd --- /dev/null +++ b/typescript-javascript/package-lock.json @@ -0,0 +1,37 @@ +{ + "name": "qr-code-generator", + "version": "1.8.1", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "qr-code-generator", + "version": "1.8.1", + "license": "MIT", + "devDependencies": { + "typescript": "^4.9.4" + } + }, + "node_modules/typescript": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", + "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", + "dev": true, + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=4.2.0" + } + } + }, + "dependencies": { + "typescript": { + "version": "4.9.4", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz", + "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==", + "dev": true + } + } +} diff --git a/typescript-javascript/package.json b/typescript-javascript/package.json new file mode 100644 index 00000000..150ab7b4 --- /dev/null +++ b/typescript-javascript/package.json @@ -0,0 +1,55 @@ +{ + "name": "qr-code-generator", + "version": "1.8.1", + "description": "QR Code generator library in multiple languages", + "type": "module", + "exports": { + ".": { + "import": "./dist-esm/qrcodegen-v1.8.1-es6.js", + "require": "./dist-esm/qrcodegen-v1.8.1-es5.js" + }, + "./utils": { + "import": "./dist-esm/utils/index.js", + "require": "./dist/utils/index.js" + } + }, + "typesVersions": { + "*": { + "utils": ["types/utils/index.d.ts"] + } + }, + "types": "types/qrcodegen.d.ts", + "files": [ + "dist", + "dist-esm", + "types" + ], + "scripts": { + "build:es5": "tsc -p ./tsconfig.es5.json && mv dist/{qrcodegen.js,qrcodegen-v$npm_package_version-es5.js}", + "build:es6": "tsc -p ./tsconfig.es6.json && mv dist-esm/{qrcodegen.js,qrcodegen-v$npm_package_version-es6.js}", + "build": "npm run clean && (npm run build:es5 & npm run build:es6)", + "clean": "rm -rf dist dist-* types", + "predemo": "./build.sh", + "demo": "npx --yes browser-sync start --server --index qrcodegen-$npm_config_type-demo.html --no-notify --no-open --no-snippet --no-ui --no-ghost-mode", + "prepublishOnly": "npm run build" + }, + "devDependencies": { + "typescript": "^4.9.4" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/nayuki/QR-Code-generator.git" + }, + "keywords": [ + "qr", + "qrcode", + "generator", + "svg" + ], + "author": "Project Nayuki (me@nayuki.io)", + "license": "MIT", + "bugs": { + "url": "https://github.com/nayuki/QR-Code-generator/issues" + }, + "homepage": "https://github.com/nayuki/QR-Code-generator#readme" +} \ No newline at end of file diff --git a/typescript-javascript/qrcodegen-input-demo.html b/typescript-javascript/qrcodegen-input-demo.html index cc46d6e0..b4b49c01 100644 --- a/typescript-javascript/qrcodegen-input-demo.html +++ b/typescript-javascript/qrcodegen-input-demo.html @@ -147,8 +147,8 @@

QR Code generator input demo (JavaScript)

- - + +

Copyright © Project Nayuki – https://www.nayuki.io/page/qr-code-generator-library

diff --git a/typescript-javascript/qrcodegen-input-demo.ts b/typescript-javascript/qrcodegen-input-demo.ts index 47586321..f9619416 100644 --- a/typescript-javascript/qrcodegen-input-demo.ts +++ b/typescript-javascript/qrcodegen-input-demo.ts @@ -23,6 +23,8 @@ "use strict"; +import qrcodegen from "./qrcodegen.js"; +import { drawCanvas, toSvgString } from "./utils/index.js"; namespace app { @@ -145,49 +147,6 @@ namespace app { `data bits = ${qrcodegen.QrSegment.getTotalBits(segs, qr.version) as number}.`; } - - // Draws the given QR Code, with the given module scale and border modules, onto the given HTML - // canvas element. The canvas's width and height is resized to (qr.size + border * 2) * scale. - // The drawn image is purely dark and light, and fully opaque. - // The scale must be a positive integer and the border must be a non-negative integer. - function drawCanvas(qr: qrcodegen.QrCode, scale: number, border: number, lightColor: string, darkColor: string, canvas: HTMLCanvasElement): void { - if (scale <= 0 || border < 0) - throw new RangeError("Value out of range"); - const width: number = (qr.size + border * 2) * scale; - canvas.width = width; - canvas.height = width; - let ctx = canvas.getContext("2d") as CanvasRenderingContext2D; - for (let y = -border; y < qr.size + border; y++) { - for (let x = -border; x < qr.size + border; x++) { - ctx.fillStyle = qr.getModule(x, y) ? darkColor : lightColor; - ctx.fillRect((x + border) * scale, (y + border) * scale, scale, scale); - } - } - } - - - // Returns a string of SVG code for an image depicting the given QR Code, with the given number - // of border modules. The string always uses Unix newlines (\n), regardless of the platform. - function toSvgString(qr: qrcodegen.QrCode, border: number, lightColor: string, darkColor: string): string { - if (border < 0) - throw new RangeError("Border must be non-negative"); - let parts: Array = []; - for (let y = 0; y < qr.size; y++) { - for (let x = 0; x < qr.size; x++) { - if (qr.getModule(x, y)) - parts.push(`M${x + border},${y + border}h1v1h-1z`); - } - } - return ` - - - - - -` - } - - export function handleVersionMinMax(which: "min"|"max"): void { const minElem: HTMLInputElement = getInput("version-min-input"); const maxElem: HTMLInputElement = getInput("version-max-input"); diff --git a/typescript-javascript/qrcodegen-output-demo.html b/typescript-javascript/qrcodegen-output-demo.html index 697b762f..163ee320 100644 --- a/typescript-javascript/qrcodegen-output-demo.html +++ b/typescript-javascript/qrcodegen-output-demo.html @@ -57,8 +57,8 @@

QR Code generator output demo (JavaScript)

(Are the JavaScript files missing?)

(The JavaScript code needs to be compiled from the TypeScript code.)

- - + +

Copyright © Project Nayuki – https://www.nayuki.io/page/qr-code-generator-library

diff --git a/typescript-javascript/qrcodegen-output-demo.ts b/typescript-javascript/qrcodegen-output-demo.ts index 764b806b..82dda84d 100644 --- a/typescript-javascript/qrcodegen-output-demo.ts +++ b/typescript-javascript/qrcodegen-output-demo.ts @@ -23,6 +23,8 @@ "use strict"; +import qrcodegen from "./qrcodegen.js"; +import { drawCanvas } from "./utils/index.js"; namespace app { @@ -200,26 +202,6 @@ namespace app { } - // Draws the given QR Code, with the given module scale and border modules, onto the given HTML - // canvas element. The canvas's width and height is resized to (qr.size + border * 2) * scale. - // The drawn image is purely dark and light, and fully opaque. - // The scale must be a positive integer and the border must be a non-negative integer. - function drawCanvas(qr: qrcodegen.QrCode, scale: number, border: number, lightColor: string, darkColor: string, canvas: HTMLCanvasElement): void { - if (scale <= 0 || border < 0) - throw new RangeError("Value out of range"); - const width: number = (qr.size + border * 2) * scale; - canvas.width = width; - canvas.height = width; - let ctx = canvas.getContext("2d") as CanvasRenderingContext2D; - for (let y = -border; y < qr.size + border; y++) { - for (let x = -border; x < qr.size + border; x++) { - ctx.fillStyle = qr.getModule(x, y) ? darkColor : lightColor; - ctx.fillRect((x + border) * scale, (y + border) * scale, scale, scale); - } - } - } - - function toUtf8ByteArray(str: string): Array { str = encodeURI(str); let result: Array = []; diff --git a/typescript-javascript/qrcodegen.ts b/typescript-javascript/qrcodegen.ts index 9e680329..f1f0b6eb 100644 --- a/typescript-javascript/qrcodegen.ts +++ b/typescript-javascript/qrcodegen.ts @@ -989,3 +989,6 @@ namespace qrcodegen.QrSegment { } } + +// https://github.com/nayuki/QR-Code-generator/issues/10#issuecomment-831582482 +export default qrcodegen; diff --git a/typescript-javascript/tsconfig.base.json b/typescript-javascript/tsconfig.base.json new file mode 100644 index 00000000..f97588dc --- /dev/null +++ b/typescript-javascript/tsconfig.base.json @@ -0,0 +1,9 @@ +{ + "compilerOptions": { + "strict": true, + "declaration": true, + "declarationDir": "./types" + }, + "include": ["qrcodegen.ts", "utils/index.ts"] + } + \ No newline at end of file diff --git a/typescript-javascript/tsconfig.es5.json b/typescript-javascript/tsconfig.es5.json new file mode 100644 index 00000000..34608956 --- /dev/null +++ b/typescript-javascript/tsconfig.es5.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig.base", + "compilerOptions": { + "target": "ES5", + "outDir": "dist" + } +} diff --git a/typescript-javascript/tsconfig.es6.json b/typescript-javascript/tsconfig.es6.json new file mode 100644 index 00000000..ba6e71ba --- /dev/null +++ b/typescript-javascript/tsconfig.es6.json @@ -0,0 +1,7 @@ +{ + "extends": "./tsconfig.base", + "compilerOptions": { + "target": "ES2015", + "outDir": "dist-esm" + } +} diff --git a/typescript-javascript/utils/index.ts b/typescript-javascript/utils/index.ts new file mode 100644 index 00000000..942d2e8b --- /dev/null +++ b/typescript-javascript/utils/index.ts @@ -0,0 +1,55 @@ +import qrcodegen from "../qrcodegen"; + +// Draws the given QR Code, with the given module scale and border modules, onto the given HTML +// canvas element. The canvas's width and height is resized to (qr.size + border * 2) * scale. +// The drawn image is purely dark and light, and fully opaque. +// The scale must be a positive integer and the border must be a non-negative integer. +export function drawCanvas( + qr: qrcodegen.QrCode, + scale: number, + border: number, + lightColor: string, + darkColor: string, + canvas: HTMLCanvasElement +): void { + if (scale <= 0 || border < 0) throw new RangeError("Value out of range"); + + const width: number = (qr.size + border * 2) * scale; + canvas.width = width; + canvas.height = width; + let ctx = canvas.getContext("2d") as CanvasRenderingContext2D; + + for (let y = -border; y < qr.size + border; y++) { + for (let x = -border; x < qr.size + border; x++) { + ctx.fillStyle = qr.getModule(x, y) ? darkColor : lightColor; + ctx.fillRect((x + border) * scale, (y + border) * scale, scale, scale); + } + } +} + +// Returns a string of SVG code for an image depicting the given QR Code, with the given number +// of border modules. The string always uses Unix newlines (\n), regardless of the platform. +export function toSvgString( + qr: qrcodegen.QrCode, + border: number, + lightColor: string, + darkColor: string +): string { + if (border < 0) throw new RangeError("Border must be non-negative"); + let parts: Array = []; + for (let y = 0; y < qr.size; y++) { + for (let x = 0; x < qr.size; x++) { + if (qr.getModule(x, y)) + parts.push(`M${x + border},${y + border}h1v1h-1z`); + } + } + return ` + + + + + +`; +}