docs: add examples

schoero · Sep 30, 2023 · 832bc09 · 832bc09
1 parent d07b30a
commit 832bc09
Show file tree

Hide file tree

Showing 23 changed files with 872 additions and 483 deletions.
diff --git a/docs/importing.md b/docs/importing.md
@@ -0,0 +1,23 @@
+
+# Importing the library
+
+Depending how you intend to use the library, there are different ways to import it. While it is straight forward to import SwissQRBill, it may be a bit more complicated to import PDFKit, which is used to create the PDF itself.
+
+## Table of contents
+
+### Node.js
+
+- [bundling with webpack](https://stackblitz.com/github/schoero/swissqrbill/tree/master/examples/)
+
+### Browser
+
+- [bundling with webpack](https://stackblitz.com/github/schoero/swissqrbill/tree/master/examples/)
+
+### Node JS
+
+#### Node ESM import
+
+Importing the library in Node.js is straight forward. You can use the following import statement:
+
+```ts
+``;
diff --git a/examples/a4.mjs → examples-old/a4.mjs b/examples/a4.mjs → examples-old/a4.mjs
diff --git a/examples/a6.mjs → examples-old/a6.mjs b/examples/a6.mjs → examples-old/a6.mjs
diff --git a/examples/browser.js → examples-old/browser.js b/examples/browser.js → examples-old/browser.js
diff --git a/examples/callback.mjs → examples-old/callback.mjs b/examples/callback.mjs → examples-old/callback.mjs
diff --git a/examples/event.mjs → examples-old/event.mjs b/examples/event.mjs → examples-old/event.mjs
diff --git a/examples/how-to-create-a-complete-bill.mjs → ...les-old/how-to-create-a-complete-bill.mjs b/examples/how-to-create-a-complete-bill.mjs → ...les-old/how-to-create-a-complete-bill.mjs
diff --git a/examples/multipage.mjs → examples-old/multipage.mjs b/examples/multipage.mjs → examples-old/multipage.mjs
diff --git a/examples/normal-iban-creditor-reference.mjs → ...es-old/normal-iban-creditor-reference.mjs b/examples/normal-iban-creditor-reference.mjs → ...es-old/normal-iban-creditor-reference.mjs
diff --git a/examples/normal-iban-no-reference.mjs → examples-old/normal-iban-no-reference.mjs b/examples/normal-iban-no-reference.mjs → examples-old/normal-iban-no-reference.mjs
diff --git a/examples/qr-iban.mjs → examples-old/qr-iban.mjs b/examples/qr-iban.mjs → examples-old/qr-iban.mjs
diff --git a/examples/svg.mjs → examples-old/svg.mjs b/examples/svg.mjs → examples-old/svg.mjs
diff --git a/examples/browser-bundling-with-webpack/.vscode/settings.json b/examples/browser-bundling-with-webpack/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "prettier": false
+}
diff --git a/examples/browser-bundling-with-webpack/index.html b/examples/browser-bundling-with-webpack/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <script type="module" src="./lib/pdf.js"></script>
+  </head>
+  <body></body>
+</html>
diff --git a/examples/browser-bundling-with-webpack/package.json b/examples/browser-bundling-with-webpack/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "browser-bundling-with-webpack",
+  "author": "Roger Schönbächler",
+  "scripts": {
+    "build": "webpack",
+    "start": "webpack serve --mode development"
+  },
+  "dependencies": {
+    "blob-stream": "^0.1.3",
+    "pdfkit": "^0.13.0",
+    "swissqrbill": "alpha"
+  },
+  "devDependencies": {
+    "assert": "^2.0.0",
+    "brfs": "^2.0.2",
+    "browserify-zlib": "^0.2.0",
+    "buffer": "^6.0.3",
+    "eslint": "^8.38.0",
+    "process": "^0.11.10",
+    "readable-stream": "^3.6.2",
+    "transform-loader": "^0.2.4",
+    "ts-loader": "^9.4.2",
+    "typescript": "^5.0.4",
+    "util": "^0.12.5",
+    "webpack": "^5.78.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.2"
+  }
+}
diff --git a/examples/browser-bundling-with-webpack/src/pdf.js b/examples/browser-bundling-with-webpack/src/pdf.js
@@ -0,0 +1,37 @@
+import fs from "node:fs";
+
+import BlobStream from "blob-stream";
+import PDFDocument from "pdfkit";
+import Helvetica from "pdfkit/js/data/Helvetica.afm";
+import HelveticaBold from "pdfkit/js/data/Helvetica-Bold.afm";
+import { SwissQRBill } from "swissqrbill/pdf";
+
+
+fs.writeFileSync("data/Helvetica.afm", Helvetica);
+fs.writeFileSync("data/Helvetica-Bold.afm", HelveticaBold);
+
+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 stream = new BlobStream();
+const pdf = new PDFDocument();
+const qrBill = new SwissQRBill(data);
+
+qrBill.attachTo(pdf);
+pdf.pipe(stream);
+
+stream.on("finish", () => {
+  window.location.href = stream.toBlobURL("application/pdf");
+  console.log("PDF has been successfully created.");
+});
+
+pdf.end();
diff --git a/examples/browser-bundling-with-webpack/webpack.config.js b/examples/browser-bundling-with-webpack/webpack.config.js
@@ -0,0 +1,77 @@
+const webpack = require("webpack");
+
+
+module.exports = {
+  devServer: {
+    devMiddleware: {
+      publicPath: "/lib/"
+    },
+    port: 80,
+    static: {
+      directory: "./"
+    }
+  },
+  devtool: "inline-source-map",
+  entry: {
+    pdf: "./src/pdf.js"
+  },
+  module: {
+    rules: [
+      // bundle and load afm files verbatim
+      {
+        test: /\.afm$/,
+        type: "asset/source"
+      },
+      // convert to base64 and include inline file system binary files used by fontkit and linebreak
+      {
+        enforce: "post",
+        loader: "transform-loader",
+        options: {
+          brfs: {}
+        },
+        test: /fontkit[/\\]index.js$/
+      },
+      {
+        enforce: "post",
+        loader: "transform-loader",
+        options: {
+          brfs: {}
+        },
+        test: /linebreak[/\\]src[/\\]linebreaker.js/
+      }
+    ]
+  },
+  output: {
+    filename: "[name].js",
+    library: "SwissQRBill",
+    libraryTarget: "umd",
+    path: `${__dirname}/lib/`
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      Buffer: ["buffer", "Buffer"],
+      process: "process/browser"
+    }),
+    new webpack.NormalModuleReplacementPlugin(new RegExp(/\.js$/), resource => {
+      if(resource.context.includes("node_modules") !== true){
+        resource.request = resource.request.replace(".js", "");
+      }
+    })
+  ],
+  resolve: {
+    alias: {
+      "fs": "pdfkit/js/virtual-fs.js",
+      "iconv-lite": false
+    },
+    extensions: [".tsx", ".ts", ".js"],
+    fallback: {
+      assert: require.resolve("assert/"),
+      buffer: require.resolve("buffer"),
+      crypto: false,
+      stream: require.resolve("readable-stream"),
+      util: require.resolve("util"),
+      zlib: require.resolve("browserify-zlib")
+    }
+  },
+  target: "web"
+};
diff --git a/examples/node-esm-javascript/.vscode/settings.json b/examples/node-esm-javascript/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "prettier": false
+}
diff --git a/examples/node-esm-javascript/package.json b/examples/node-esm-javascript/package.json
@@ -0,0 +1,17 @@
+{
+  "type": "module",
+  "name": "node-esm-javascript",
+  "author": "Roger Schönbächler",
+  "scripts": {
+    "generate": "npm run pdf && npm run svg",
+    "pdf": "node pdf.js",
+    "svg": "node svg.js"
+  },
+  "dependencies": {
+    "pdfkit": "^0.13.0",
+    "swissqrbill": "alpha"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2"
+  }
+}
diff --git a/examples/node-esm-javascript/src/data.js b/examples/node-esm-javascript/src/data.js
@@ -0,0 +1,11 @@
+export 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"
+};
diff --git a/examples/node-esm-javascript/src/pdf.js b/examples/node-esm-javascript/src/pdf.js
@@ -0,0 +1,14 @@
+import { SwissQRBill } from "swissqrbill/pdf"
+import PDFDocument from "pdfkit";
+import { createWriteStream } from "node:fs";
+import { data } from "./data.js";
+
+const stream = createWriteStream('./swissqrbill.pdf');
+const pdf = new PDFDocument({ size: "A4" });
+const qrBill = new SwissQRBill(data);
+
+pdf.pipe(stream);
+
+qrBill.attachTo(pdf);
+pdf.end();
+
diff --git a/examples/node-esm-javascript/src/svg.js b/examples/node-esm-javascript/src/svg.js
@@ -0,0 +1,6 @@
+import { SwissQRBill } from "swissqrbill/svg"
+import { writeFileSync } from "node:fs";
+import { data } from "./data.js";
+
+const qrBill = new SwissQRBill(data);
+writeFileSync('./swissqrbill.svg', qrBill.toString());