From e2ea5913e681ec782c5cadb47cb8ecc0f61cc675 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Roger=20Sch=C3=B6nb=C3=A4chler?=
<42278642+schoero@users.noreply.github.com>
Date: Sun, 1 Oct 2023 09:46:08 +0200
Subject: [PATCH] feat: add pre-built bundle
---
.eslintrc.json | 9 ++++++
docs/importing.md | 29 ++++++++++++++++---
.../.vscode/settings.json | 3 ++
examples/browser-prebuilt-bundle/index.html | 22 ++++++++++++++
examples/browser-prebuilt-bundle/src/pdf.js | 23 +++++++++++++++
package.json | 2 +-
tsconfig.vite.json | 7 +++++
vite.config.bundle.ts | 21 ++++++++++++++
vite.config.ts | 2 +-
9 files changed, 112 insertions(+), 6 deletions(-)
create mode 100644 examples/browser-prebuilt-bundle/.vscode/settings.json
create mode 100644 examples/browser-prebuilt-bundle/index.html
create mode 100644 examples/browser-prebuilt-bundle/src/pdf.js
create mode 100644 tsconfig.vite.json
create mode 100644 vite.config.bundle.ts
diff --git a/.eslintrc.json b/.eslintrc.json
index f982689..c41d4dc 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -7,6 +7,15 @@
"@typescript-eslint/no-unnecessary-condition": "off"
}
},
+ {
+ "files": ["vite.config.ts", "vite.config.bundle.ts"],
+ "parser": "@typescript-eslint/parser",
+ "parserOptions": {
+ "ecmaVersion": "latest",
+ "project": ["tsconfig.vite.json"],
+ "sourceType": "module"
+ }
+ },
{
"files": ["examples/**/*.js", "examples/**/*.ts"],
"rules": {
diff --git a/docs/importing.md b/docs/importing.md
index 9bdd55b..df29ed1 100644
--- a/docs/importing.md
+++ b/docs/importing.md
@@ -9,12 +9,13 @@ Each example below is available as a StackBlitz project. Please note that they o
### Node.js
-- [Node ESM import](node-esm-import) - [StackBlitz][node esm javascript]
-- [Node CJS import](node-cjs-import) - [StackBlitz][node cjs javascript]
+- [Node ESM import](node-esm-import)
+- [Node CJS import](node-cjs-import)
### Browser
-- [Node CJS import](node-cjs-import) - [bundling with webpack][bundling with webpack]
+- [Browser bundling with webpack](browser-bundling-with-webpack)
+- [Browser pre-built bundle](browser-prebuilt-bundle)
### Node JS
@@ -50,6 +51,26 @@ const { SwissQRBill } = require("swissqrbill/pdf");
const { SwissQRBill } = require("swissqrbill/svg");
```
+## Browser
+
+### Browser bundling with webpack
+
+[
+][browser bundling with webpack]
+
+> **Warning**
+>
+> This demo on StackBlitz does only work in Chrome. If you want to try it in another browser, you need to download the project and run it locally.
+
+As PDFKit internally relies on several different built in modules of Node.js, it is not possible to use it directly in the browser. Instead, you need to bundle it with a tool like webpack. More information can be found in the [PDFKit repository](https://github.com/foliojs/pdfkit/tree/master/examples/webpack)
+
+### Browser pre-built bundle
+
+[
+][browser prebuilt bundle]
+
+PDFKit also provides a pre-built bundle that can be used directly in the browser.
+
[node esm javascript]: https://stackblitz.com/fork/github/schoero/swissqrbill/tree/feat/stackblitz-examples/examples/node-esm-javascript
[node cjs javascript]: https://stackblitz.com/fork/github/schoero/swissqrbill/tree/feat/stackblitz-examples/examples/node-cjs-javascript
-[bundling with webpack]: https://stackblitz.com/fork/github/schoero/swissqrbill/tree/feat/stackblitz-examples/examples/browser-bundling-with-webpack
+[browser bundling with webpack]: https://stackblitz.com/fork/github/schoero/swissqrbill/tree/feat/stackblitz-examples/examples/browser-bundling-with-webpack
diff --git a/examples/browser-prebuilt-bundle/.vscode/settings.json b/examples/browser-prebuilt-bundle/.vscode/settings.json
new file mode 100644
index 0000000..7d6e1c1
--- /dev/null
+++ b/examples/browser-prebuilt-bundle/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "prettier": false
+}
\ No newline at end of file
diff --git a/examples/browser-prebuilt-bundle/index.html b/examples/browser-prebuilt-bundle/index.html
new file mode 100644
index 0000000..1b3156a
--- /dev/null
+++ b/examples/browser-prebuilt-bundle/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/browser-prebuilt-bundle/src/pdf.js b/examples/browser-prebuilt-bundle/src/pdf.js
new file mode 100644
index 0000000..e2918ae
--- /dev/null
+++ b/examples/browser-prebuilt-bundle/src/pdf.js
@@ -0,0 +1,23 @@
+const data = {
+ creditor: {
+ account: "CH58 0079 1123 0008 8901 2",
+ address: "Creditor Address",
+ city: "Creditor City",
+ country: "CH",
+ name: "Creditor FirstName LastName",
+ zip: 1234
+ },
+ currency: "CHF"
+};
+
+const pdf = new PDFDocument({ size: "A4" });
+const stream = pdf.pipe(blobStream());
+const qrBill = new SwissQRBill(data);
+
+stream.on("finish", () => {
+ const url = stream.toBlobURL("application/pdf");
+ iframe.src = url;
+});
+
+qrBill.attachTo(pdf);
+pdf.end();
diff --git a/package.json b/package.json
index 19f3362..2ddd616 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
},
"types": "./lib/shared/types.d.ts",
"scripts": {
- "build": "vite build",
+ "build": "vite build --config vite.config.ts && vite build --config vite.config.bundle.ts",
"docs": "npm run docs:pdf && npm run docs:svg && npm run docs:table && npm run docs:shared",
"docs:pdf": "unwritten src/pdf/swissqrbill.ts src/shared/types.ts -t tsconfig.docs.json -o docs/pdf/",
"docs:shared": "unwritten src/shared/utils.ts -t tsconfig.docs.json -o docs/utils/",
diff --git a/tsconfig.vite.json b/tsconfig.vite.json
new file mode 100644
index 0000000..dd28984
--- /dev/null
+++ b/tsconfig.vite.json
@@ -0,0 +1,7 @@
+{
+ "extends": "./tsconfig.json",
+ "include": [
+ "vite.config.ts",
+ "vite.config.bundle.ts"
+ ]
+}
diff --git a/vite.config.bundle.ts b/vite.config.bundle.ts
new file mode 100644
index 0000000..30369bd
--- /dev/null
+++ b/vite.config.bundle.ts
@@ -0,0 +1,21 @@
+import { config, defineConfig } from "@schoero/vite-config";
+
+
+/** @type {import('vitest/config').UserConfig} */
+export default defineConfig({
+ ...config,
+ build: {
+ emptyOutDir: false,
+ lib: {
+ entry: "src/svg/swissqrbill.ts",
+ fileName: "bundle",
+ formats: ["es"]
+ },
+ minify: true,
+ outDir: "lib",
+ target: "es6"
+ },
+ plugins: [
+ ...config.plugins ?? []
+ ]
+});
diff --git a/vite.config.ts b/vite.config.ts
index e5ca7c2..34de13d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,7 +11,7 @@ export default defineConfig({
build: {
emptyOutDir: true,
lib: {
- entry: sync("src/**/*.ts", { ignore: ["src/**/*.test.ts", "test/**"] }),
+ entry: sync("src/**/*.ts", { ignore: ["src/**/*.test.ts", "test/**", "src/svg/"] }),
formats: ["es", "cjs"]
},
minify: false,