feat: add pre-built bundle

schoero · Oct 1, 2023 · e2ea591 · e2ea591
1 parent 2114a55
commit e2ea591
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 6 deletions.
diff --git 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
@@ -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
+
+[![Open in StackBlitz](https://img.shields.io/badge/%E2%9A%A1%EF%B8%8E_Open_in_StackBlitz-1374ef?style=flat-square)
+][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
+
+[![Open in StackBlitz](https://img.shields.io/badge/%E2%9A%A1%EF%B8%8E_Open_in_StackBlitz-1374ef?style=flat-square)
+][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
@@ -0,0 +1,3 @@
+{
+  "prettier": false
+}
diff --git a/examples/browser-prebuilt-bundle/index.html b/examples/browser-prebuilt-bundle/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/pdfkit@0/js/pdfkit.standalone.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/[email protected]/+esm"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/[email protected]/lib/pdf/swissqrbill.js"
+    ></script>
+    <script type="module" src="./src/script.js"></script>
+  </head>
+  <body>
+    <iframe id="iframe"></iframe>
+  </body>
+</html>
diff --git a/examples/browser-prebuilt-bundle/src/pdf.js 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
@@ -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
@@ -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
@@ -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
@@ -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,