Added Cloudflare Worker example running on Webpack 5

examples/cloudflare-worker/webpack5.x/.gitignore

@@ -0,0 +1,10 @@
+/target
+/dist
+**/*.rs.bk
+Cargo.lock
+bin/
+pkg/
+wasm-pack.log
+worker/
+node_modules/
+.cargo-ok

examples/cloudflare-worker/webpack5.x/README.md

@@ -0,0 +1,62 @@
+# Cloudflare Workers example (wrangler + Webpack 5)
+
+This is a sample project for showing passkit-generator working on a Cloudflare Worker.
+
+Cloudflare Workers are serverless function based on Browser's V8 (instead of Node). For this reason several APIs require to be polyfilled.
+
+Cloudflare Workers have a tool, wrangler, which comes out with Webpack 4 to bundle things and polyfill those missing Node.JS APIs (e.g. Buffer).
+
+**In this example aims, instead, to show how to build with Webpack 5 instead of Webpack 4.**
+
+This example offers just the generation of a single static `boardingPass`.
+
+> Please note that creating and publishing a Cloudflare Workers with passkit-generator, might require you to buy a plan.
+> Cloudflare limits are pretty low.
+
+## Setting up
+
+Install all the dependencies through `npm install`.
+Configure wrangler and your account [according to the guide](https://developers.cloudflare.com/workers/get-started/guide).
+
+### Secrets and certificates
+
+This example uses some environmental variables (secrets), which can be set through Wrangler CLI or through Dashboard, as per [this official guide](https://developers.cloudflare.com/workers/platform/environment-variables#adding-secrets-via-wrangler):
+
+-   `SIGNER_CERT`
+-   `SIGNER_KEY`
+-   `SIGNER_PASSPHRASE`
+-   `WWDR`
+
+So, assuming you have `certificates` folder in the root of passkit-generator, you'll be able to do such:
+
+```sh
+$ cat ../../../certificates/signerKey.pem | npx wrangler secret put SIGNER_KEY
+```
+
+These variables are exposed on `globalThis`.
+
+### Running locally
+
+To run the worker locally, run `npm run example`. This command will run the webserver on `0.0.0.0`, so it can also be accessed from other devices on the network.
+
+### Publishing
+
+To publish the worker, you'll need to run `npx wrangler whoami` to get the Account ID. Set it to `account_id` in `wrangler.toml`.
+
+## Example details
+
+Since our project is made in Typescript, we needed a way to compile it. The way shown, uses `ts-loader`.
+
+As per `ts-loader` dependencies, it required webpack to be `*`, so v5 would automatically get download. We added webpack explicitly, so we don't leave anything undetailed.
+
+Along with this, we needed to setup a different `webpack.config.js` and tell wrangler where to find it, through `wrangler.toml`.
+
+`webpack.config.js` will detail several things for us:
+
+-   how to handle module assets, through [Asset Modules](https://webpack.js.org/guides/asset-modules/), in a way we can still import them with ES Modules syntax;
+-   Node.JS modules that will get polyfilled;
+-   Modules that [will be provided everywhere without the need to import them explicitly](https://webpack.js.org/plugins/provide-plugin/). This is the case of Node.js APIs and modules, like Buffer, which is available on both `global` and through `Buffer` module. Since Buffer must be polyfilled "manually", this allows us to tell modules Buffer should be imported in for compatibility (e.g. do-not-zip);
+
+Another detail you should pay attention to, is that `package.json`'s `main` field **should be your worker entry-point**, as per [cloudflare documentation (paragraph)](https://developers.cloudflare.com/workers/cli-wrangler/configuration#:~:text=ensure%20the%20main%20field%20in%20your%20package.json%20references%20the%20worker%20script%20you%20want%20to%20publish)
+
+Lastly, we needed to set `type = "javascript"` on the top of `wrangler.toml`, as per [the documentation](https://developers.cloudflare.com/workers/cli-wrangler/webpack) and set a custom build command as per the documentation as well (same link as above).

examples/cloudflare-worker/webpack5.x/package.json

@@ -0,0 +1,32 @@
+{
+	"name": "cloudflare-worker",
+	"version": "0.0.0",
+	"private": true,
+	"description": "",
+	"main": "dist/worker.js",
+	"type": "module",
+	"scripts": {
+		"service:link-pg": "cd ../../.. && npm run build && npm link",
+		"preinstall": "npm run clear:deps",
+		"postinstall": "npm run service:link-pg && npm link passkit-generator",
+		"clear:deps": "rm -rf node_modules",
+		"example": "npx wrangler dev --ip 0.0.0.0",
+		"build": "npx webpack --config webpack.config.mjs"
+	},
+	"keywords": [],
+	"peerDependencies": {
+		"passkit-generator": "*"
+	},
+	"devDependencies": {
+		"@cloudflare/workers-types": "^3.3.1",
+		"@cloudflare/wrangler": "^1.19.7",
+		"stream-browserify": "^3.0.0",
+		"ts-loader": "^9.2.6",
+		"typescript": "^4.5.5",
+		"webpack": "^5.68.0",
+		"webpack-cli": "^4.9.2",
+		"buffer": "^6.0.3",
+		"os-browserify": "^0.3.0",
+		"path-browserify": "^1.0.1"
+	}
+}

examples/cloudflare-worker/webpack5.x/src/files.d.ts

@@ -0,0 +1,4 @@
+declare module "*.png" {
+	const content: string;
+	export default content;
+}

examples/cloudflare-worker/webpack5.x/src/index.ts

@@ -0,0 +1,220 @@
+import { Buffer } from "buffer";
+import { PKPass } from "passkit-generator";
+
+/** Assets are handled by Webpack */
+import icon from "../../../models/exampleBooking.pass/icon.png";
+import icon2x from "../../../models/exampleBooking.pass/icon@2x.png";
+import footer from "../../../models/exampleBooking.pass/footer.png";
+import footer2x from "../../../models/exampleBooking.pass/footer@2x.png";
+import background2x from "../../../models/examplePass.pass/background@2x.png";
+
+declare global {
+	/**
+	 * "var" (instead of let and cost) is required here
+	 * to make typescript mark that these global variables
+	 * are available also in globalThis.
+	 *
+	 * These are secrets we have defined through `wrangler secret put <var name>`.
+	 * @see https://developers.cloudflare.com/workers/platform/environment-variables
+	 */
+
+	/** Pass signerCert */
+	var SIGNER_CERT: string;
+	/** Pass signerKey */
+	var SIGNER_KEY: string;
+	var SIGNER_PASSPHRASE: string;
+	var WWDR: string;
+}
+
+/**
+ * Request entry point
+ */
+
+globalThis.addEventListener("fetch", (event: FetchEvent) => {
+	event.respondWith(generatePass(event.request));
+});
+
+/**
+ * Respond with hello worker text
+ * @param {Request} request
+ */
+
+async function generatePass(request: Request) {
+	const pass = new PKPass(
+		/**
+		 * Buffer is polyfilled by Webpack. Files must be
+		 * imported raw by webpack. See webpack.config.js
+		 */
+		{
+			"icon.png": Buffer.from(icon),
+			"icon@2x.png": Buffer.from(icon2x),
+			"footer.png": Buffer.from(footer),
+			"footer@2x.png": Buffer.from(footer2x),
+			"background@2x.png": Buffer.from(background2x),
+		},
+		{
+			signerCert: SIGNER_CERT,
+			signerKey: SIGNER_KEY,
+			signerKeyPassphrase: SIGNER_PASSPHRASE,
+			wwdr: WWDR,
+		},
+		{
+			description: "Example Pass generated through a cloudflare worker",
+			serialNumber: "81592CQ7838",
+			passTypeIdentifier: "pass.com.passkitgenerator",
+			teamIdentifier: "F53WB8AE67",
+			organizationName: "Apple Inc.",
+			foregroundColor: "rgb(255, 255, 255)",
+			backgroundColor: "rgb(60, 65, 76)",
+		},
+	);
+
+	pass.setBarcodes("1276451828321");
+	pass.type = "boardingPass";
+	pass.transitType = "PKTransitTypeAir";
+
+	pass.headerFields.push(
+		{
+			key: "header1",
+			label: "Data",
+			value: "25 mag",
+			textAlignment: "PKTextAlignmentCenter",
+		},
+		{
+			key: "header2",
+			label: "Volo",
+			value: "EZY997",
+			textAlignment: "PKTextAlignmentCenter",
+		},
+	);
+
+	pass.primaryFields.push(
+		{
+			key: "IATA-source",
+			value: "NAP",
+			label: "Napoli",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "IATA-destination",
+			value: "VCE",
+			label: "Venezia Marco Polo",
+			textAlignment: "PKTextAlignmentRight",
+		},
+	);
+
+	pass.secondaryFields.push(
+		{
+			key: "secondary1",
+			label: "Imbarco chiuso",
+			value: "18:40",
+			textAlignment: "PKTextAlignmentCenter",
+		},
+		{
+			key: "sec2",
+			label: "Partenze",
+			value: "19:10",
+			textAlignment: "PKTextAlignmentCenter",
+		},
+		{
+			key: "sec3",
+			label: "SB",
+			value: "Sì",
+			textAlignment: "PKTextAlignmentCenter",
+		},
+		{
+			key: "sec4",
+			label: "Imbarco",
+			value: "Anteriore",
+			textAlignment: "PKTextAlignmentCenter",
+		},
+	);
+
+	pass.auxiliaryFields.push(
+		{
+			key: "aux1",
+			label: "Passeggero",
+			value: "MR. WHO KNOWS",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "aux2",
+			label: "Posto",
+			value: "1A*",
+			textAlignment: "PKTextAlignmentCenter",
+		},
+	);
+
+	pass.backFields.push(
+		{
+			key: "document number",
+			label: "Numero documento:",
+			value: "- -",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "You're checked in, what next",
+			label: "Hai effettuato il check-in, Quali sono le prospettive",
+			value: "",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "Check In",
+			label: "1. check-in✓",
+			value: "",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "checkIn",
+			label: "",
+			value: "Le uscite d'imbarco chiudono 30 minuti prima della partenza, quindi sii puntuale. In questo aeroporto puoi utilizzare la corsia Fast Track ai varchi di sicurezza.",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "2. Bags",
+			label: "2. Bagaglio",
+			value: "",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "Require special assistance",
+			label: "Assistenza speciale",
+			value: "Se hai richiesto assistenza speciale, presentati a un membro del personale nell'area di Consegna bagagli almeno 90 minuti prima del volo.",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "3. Departures",
+			label: "3. Partenze",
+			value: "",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "photoId",
+			label: "Un documento d’identità corredato di fotografia",
+			value: "è obbligatorio su TUTTI i voli. Per un viaggio internazionale è necessario un passaporto valido o, dove consentita, una carta d’identità.",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "yourSeat",
+			label: "Il tuo posto:",
+			value: "verifica il tuo numero di posto nella parte superiore. Durante l’imbarco utilizza le scale anteriori e posteriori: per le file 1-10 imbarcati dalla parte anteriore; per le file 11-31 imbarcati dalla parte posteriore. Colloca le borse di dimensioni ridotte sotto il sedile davanti a te.",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "Pack safely",
+			label: "Bagaglio sicuro",
+			value: "Fai clic http://easyjet.com/it/articoli-pericolosi per maggiori informazioni sulle merci pericolose oppure visita il sito CAA http://www.caa.co.uk/default.aspx?catid=2200",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+		{
+			key: "Thank you for travelling easyJet",
+			label: "Grazie per aver viaggiato con easyJet",
+			value: "",
+			textAlignment: "PKTextAlignmentLeft",
+		},
+	);
+
+	return new Response(pass.getAsBuffer(), {
+		headers: { "content-type": pass.mimeType },
+	});
+}

examples/cloudflare-worker/webpack5.x/tsconfig.json

@@ -0,0 +1,21 @@
+{
+	"compilerOptions": {
+		"target": "es2016",
+		"module": "commonjs",
+		"types": ["@cloudflare/workers-types"],
+		"outDir": "lib",
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"noImplicitAny": true,
+		"strictNullChecks": true,
+		"strictFunctionTypes": true,
+		"noImplicitThis": true,
+		"exactOptionalPropertyTypes": true,
+		"noImplicitReturns": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedIndexedAccess": true,
+		"noImplicitOverride": true,
+		"noPropertyAccessFromIndexSignature": true,
+		"skipLibCheck": true
+	}
+}

examples/cloudflare-worker/webpack5.x/webpack.config.mjs

@@ -0,0 +1,69 @@
+import path from "path";
+import { fileURLToPath } from "url";
+import { createRequire } from "module";
+import webpack from "webpack";
+
+const require = createRequire(import.meta.url);
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/**
+ * @see https://developers.cloudflare.com/workers/cli-wrangler/webpack
+ */
+
+export default {
+	context: __dirname,
+	entry: "./src/index.ts",
+	target: "webworker",
+
+	/**
+	 * "development" mode does not support the usage of eval
+	 * If you want to run in dev mode and not use eval, add
+	 * to the configuration:
+	 *
+	 * ```
+	 * devtool: "inline-source-map",
+	 * ```
+	 *
+	 * @see https://github.com/cloudflare/wrangler/issues/1268
+	 */
+
+	mode: "production",
+	module: {
+		rules: [
+			{
+				test: /\.tsx?$/,
+				use: "ts-loader",
+				exclude: /node_modules/,
+			},
+			{
+				test: /\.png/,
+				type: "asset/inline",
+			},
+		],
+	},
+	resolve: {
+		extensions: [".ts", ".js", ".png"],
+		fallback: {
+			fs: false /* Do not include a polyfill for fs */,
+			stream: require.resolve("stream-browserify"),
+			buffer: require.resolve("buffer/"),
+			os: require.resolve("os-browserify/browser"),
+			path: require.resolve("path-browserify"),
+		},
+	},
+	output: {
+		filename: "worker.js" /** This name is required */,
+		path: path.resolve(__dirname, "dist"),
+	},
+
+	/**
+	 * This is required because some passkit-generator dependencies
+	 * use Buffer on global instead of importing it explictly
+	 */
+
+	plugins: [
+		new webpack.ProvidePlugin({
+			Buffer: ["buffer", "Buffer"],
+		}),
+	],
+};

examples/cloudflare-worker/webpack5.x/wrangler.toml

@@ -0,0 +1,14 @@
+name = "pg-cw-example-webpack5"
+type = "javascript"
+
+account_id = ""
+workers_dev = true
+route = ""
+zone_id = ""
+compatibility_date = "2022-01-31"
+
+[build]
+command = "npm run build"
+
+[build.upload]
+format = "service-worker"