[Templates]: Add QR Code Generator to Examples

[lauragift21]

Fixes # [insert GH or internal issue number(s)].

What this PR solves / how to test:
Add a QR Code Source code to examples directory

Associated docs issue(s)/PR(s):

• [Workers]: Update QR Code Generator Tutorial cloudflare-docs#9414

Author has included the following, where applicable:

• Tests
• Changeset (Changeset guidelines)

Reviewer is to perform the following, as applicable:

• Checked for inclusion of relevant tests
• Checked for inclusion of a relevant changeset
• Checked for creation of associated docs updates
• Manually pulled down the changes and spot-tested

[changeset-bot]

⚠️ No Changeset found

Latest commit: 842cae5

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codecov]

Codecov Report

Merging #3490 (c69072c) into main (ca4d27b) will decrease coverage by 0.06%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##             main    #3490      +/-   ##
==========================================
- Coverage   75.18%   75.12%   -0.06%     
==========================================
  Files         183      190       +7     
  Lines       11055    11109      +54     
  Branches     2904     2919      +15     
==========================================
+ Hits         8312     8346      +34     
- Misses       2743     2763      +20     

see 33 files with indirect coverage changes

[github-actions]

A wrangler prerelease is available for testing. You can install this latest build in your project with:

npm install --save-dev https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/9869932731/npm-package-wrangler-3490

You can reference the automatically updated head of this PR with:

npm install --save-dev https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/prs/3490/npm-package-wrangler-3490

Or you can use npx with this latest build directly:

npx https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/9869932731/npm-package-wrangler-3490 dev path/to/script.js

Additional artifacts:

npx https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/9869932731/npm-package-create-cloudflare-3490 --no-auto-update

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/9869932731/npm-package-cloudflare-kv-asset-handler-3490

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/9869932731/npm-package-miniflare-3490

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/9869932731/npm-package-cloudflare-pages-shared-3490

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/9869932731/npm-package-cloudflare-vitest-pool-workers-3490

Note that these links will no longer work once the GitHub Actions artifact expires.

---

wrangler@3.63.2 includes the following runtime dependencies:

Package	Constraint	Resolved
miniflare	workspace:*	3.20240701.0
workerd	1.20240701.0	1.20240701.0
workerd --version	1.20240701.0	2024-07-01

Please ensure constraints are pinned, and miniflare/workerd minor versions match.

[JacobMGEvans]

I would prefer if the newer templates were in TypeScript. It is easier to downgrade to JS then it is to setup a TS environment from scratch.

[lauragift21]

I would prefer if the newer templates were in TypeScript. It is easier to downgrade to JS then it is to setup a TS environment from scratch.

Thanks, @JacobMGEvans! This is an example from one of the tutorials, rather than a template. but I've gone ahead to update it to a TS version.

[JacobMGEvans]

can you add a tsconfig.json

{
	"compilerOptions": {
		"noEmit": true,
		"module": "esnext",
		"target": "esnext",
		"lib": ["esnext"],
		"strict": true,
		"moduleResolution": "node",
		"types": ["@cloudflare/workers-types"]
	},
	"exclude": ["node_modules"]
}

[petebacondarwin]

Out of interest I tried this out with (rather than node_compat) the nodejs_compat and experimental:nodejs_compat_v2 flags.

It totally failed to build with nodejs_compat:

✘ [ERROR] Could not resolve "zlib"

    node_modules/qr-image/lib/png.js:3:19:
      3 │ var zlib = require('zlib');
        ╵                    ~~~~~~

  The package "zlib" wasn't found on the file system but is built into node.
  Add "node_compat = true" to your wrangler.toml file and make sure to prefix the module name with "node:" to enable Node.js compatibility.


✘ [ERROR] Could not resolve "stream"

    node_modules/qr-image/lib/qr.js:3:23:
      3 │ var Readable = require('stream').Readable;
        ╵                        ~~~~~~~~

With experimental:nodejs_compat_v2 it built but then failed at runtime:

[wrangler:err] Error: [unenv] zlib.deflateSync is not implemented yet!
    at createNotImplementedError (node_modules/.pnpm/unenv-nightly@1.10.0-1717606461.a117952/node_modules/unenv-nightly/runtime/_internal/utils.mjs:22:9)
    at Object.fn2 [as deflateSync] (node_modules/.pnpm/unenv-nightly@1.10.0-1717606461.a117952/node_modules/unenv-nightly/runtime/_internal/utils.mjs:26:11)
    at Object.png (templates/examples/qr-code-generator/node_modules/qr-image/lib/png.js:23:14)
    at Object.qr_image_sync [as imageSync] (templates/examples/qr-code-generator/node_modules/qr-image/lib/qr.js:102:13)
    at generateQRCode (templates/examples/qr-code-generator/src/worker.ts:20:20)

Something to fix before we go GA with nodejs_v2 @IgorMinar, @jculvey and @jasnell ?