Load the Castle browser SDK as a UMD from npm

.github/workflows/ci.yml

@@ -14,6 +14,12 @@ jobs:
         python-version: ['3.10', '3.11', '3.12', '3.13']
     steps:
       - uses: actions/checkout@v5
+      - name: Set up Node
+        uses: actions/setup-node@v5
+        with:
+          node-version: 20
+          cache: npm
+      - run: npm ci
       - name: Set up Python
         uses: actions/setup-python@v6
         with:

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "build:css": "tailwindcss -i ./src/tailwind.css -o ./static/styles.css --minify",
     "watch:css": "tailwindcss -i ./src/tailwind.css -o ./static/styles.css --watch",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "postinstall": "node scripts/ensure-castle-umd.js"
   },
   "repository": {
     "type": "git",
@@ -19,7 +20,7 @@
   },
   "homepage": "https://github.com/castle/castle-python-example#readme",
   "dependencies": {
-    "@castleio/castle-js": "^2.8.4"
+    "@castleio/castle-js": "^2.8.5"
   },
   "devDependencies": {
     "tailwindcss": "^3.4.19"

scripts/ensure-castle-umd.js

@@ -0,0 +1,15 @@
+const fs = require('fs');
+const path = require('path');
+
+const dist = path.join(__dirname, '..', 'node_modules', '@castleio', 'castle-js', 'dist');
+const dest = path.join(dist, 'castle.umd.js');
+if (!fs.existsSync(dist) || fs.existsSync(dest)) {
+  process.exit(0);
+}
+
+const source = fs.readdirSync(dist).find((name) => (
+  name.startsWith('castle.') && name.endsWith('.js') && name !== 'castle.js'
+));
+if (source) {
+  fs.copyFileSync(path.join(dist, source), dest);
+}

static/app.js

@@ -17,9 +17,14 @@ async function postJSON(url, data) {
 
 // Resolve a Castle request token, falling back gracefully if the browser SDK
 // is unavailable (e.g. no publishable key configured).
+function castleClient() {
+  return window.__castle || window.Castle;
+}
+
 function withRequestToken(callback) {
-  if (window.Castle && typeof Castle.createRequestToken === "function") {
-    Castle.createRequestToken()
+  var sdk = castleClient();
+  if (sdk && typeof sdk.createRequestToken === "function") {
+    sdk.createRequestToken()
       .then(callback)
       .catch(function (err) {
         console.error("Castle.createRequestToken failed", err);

templates/base.html

@@ -12,10 +12,18 @@
 	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 	<link href="/static/styles.css" rel="stylesheet">
 
-	<script src="/vendor/castle-js/castle.browser.js"></script>
 	<script>
+		if (!window.Castle) {
+			window.exports = window.exports || {};
+			window.module = window.module || { exports: window.exports };
+			window.Castle = window.module.exports;
+		}
+	</script>
+	<script src="/vendor/castle-js/castle.umd.js"></script>
+	<script>
+		window.Castle = window.Castle || (window.module && window.module.exports) || window["@castleio/castle-js"];
 		if (window.Castle && "{{ castle_pk or '' }}") {
-			Castle.configure({ pk: "{{ castle_pk or '' }}" });
+			window.__castle = Castle.configure({ pk: "{{ castle_pk or '' }}" }) || window.Castle;
 		}
 	</script>
 	<script src="/static/app.js" defer></script>

tests/test_pages.py

@@ -35,3 +35,15 @@ def test_unknown_demo_renders_error_page(client):
 def test_unknown_vendor_asset_returns_404(client):
     resp = client.get("/vendor/castle-js/nope.js")
     assert resp.status_code == 404
+
+
+def test_home_loads_castle_umd(client):
+    resp = client.get("/")
+    assert resp.status_code == 200
+    assert b"/vendor/castle-js/castle.umd.js" in resp.data
+
+
+def test_castle_umd_is_served_from_npm(client):
+    resp = client.get("/vendor/castle-js/castle.umd.js")
+    assert resp.status_code == 200
+    assert "javascript" in resp.mimetype