From ae76649967998f3556c0c95813b9dd4de84f14f3 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Wed, 1 May 2024 23:28:06 +0200
Subject: [PATCH 01/12] :tada: Add TS boilerplate

Added boilerplate to create/bundle an npm package on Github, so that
the build artifact(s) can be included in the static files of the
django app for ease of use, and other projects can separately install
the package for the JS with npm to bundle the JS with their own
solution.
---
 .editorconfig        |  5 ++++-
 .gitignore           |  4 ++++
 js/.nvmrc            |  1 +
 js/package-lock.json | 29 +++++++++++++++++++++++++++++
 js/package.json      | 31 +++++++++++++++++++++++++++++++
 js/src/index.ts      |  1 +
 js/tsconfig.json     | 22 ++++++++++++++++++++++
 7 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 js/.nvmrc
 create mode 100644 js/package-lock.json
 create mode 100644 js/package.json
 create mode 100644 js/src/index.ts
 create mode 100644 js/tsconfig.json

diff --git a/.editorconfig b/.editorconfig
index 39fd6e0..f7cf72f 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -13,7 +13,10 @@ indent_size = 2
 [*.{yml,yaml}]
 indent_size = 2
 
-[*.js]
+[*.{js,ts}]
+indent_size = 2
+
+[*.json]
 indent_size = 2
 
 [Makefile]
diff --git a/.gitignore b/.gitignore
index 9751be2..4456f0c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,7 @@ dist/
 htmlcov/
 reports/
 testapp/*.db
+
+# frontend tooling / builds
+js/lib/
+js/node_modules/
diff --git a/js/.nvmrc b/js/.nvmrc
new file mode 100644
index 0000000..9a2a0e2
--- /dev/null
+++ b/js/.nvmrc
@@ -0,0 +1 @@
+v20
diff --git a/js/package-lock.json b/js/package-lock.json
new file mode 100644
index 0000000..33ba680
--- /dev/null
+++ b/js/package-lock.json
@@ -0,0 +1,29 @@
+{
+  "name": "django-cookie-consent",
+  "version": "0.5.0-beta0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "django-cookie-consent",
+      "version": "0.5.0-beta0",
+      "license": "BSD-2-Clause",
+      "devDependencies": {
+        "typescript": "^5.4.5"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.4.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
+      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    }
+  }
+}
diff --git a/js/package.json b/js/package.json
new file mode 100644
index 0000000..40c6b37
--- /dev/null
+++ b/js/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "django-cookie-consent",
+  "version": "0.5.0-beta0",
+  "description": "Frontend code for django-cookie-consent",
+  "main": "lib/index.js",
+  "type": "module",
+  "files": ["lib/"],
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jazzband/django-cookie-consent.git"
+  },
+  "keywords": [
+    "django",
+    "typescript",
+    "cookie",
+    "consent"
+  ],
+  "author": "Sergei Maertens",
+  "license": "BSD-2-Clause",
+  "bugs": {
+    "url": "https://github.com/jazzband/django-cookie-consent/issues"
+  },
+  "homepage": "https://github.com/jazzband/django-cookie-consent#readme",
+  "devDependencies": {
+    "typescript": "^5.4.5"
+  }
+}
diff --git a/js/src/index.ts b/js/src/index.ts
new file mode 100644
index 0000000..c0f1d43
--- /dev/null
+++ b/js/src/index.ts
@@ -0,0 +1 @@
+console.log('ok')
diff --git a/js/tsconfig.json b/js/tsconfig.json
new file mode 100644
index 0000000..673c580
--- /dev/null
+++ b/js/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "target": "es2017",
+    "module": "esnext",
+    "outDir": "lib",
+    "declaration": true,
+    "noErrorTruncation": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictBindCallApply": true,
+    "strictNullChecks": true,
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "lib"],
+}

From af0d31b216ea804037198c598ccf7483bb499801 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 2 May 2024 10:38:39 +0200
Subject: [PATCH 02/12] :recycle: Refactor cookiebar.module.js into TS module

The added type safety helps catch bugs, and the setup is simple enough
for people not too familiar with TS to be able to contribute.

Small refactors have been done to avoid globals and localize state a
bit more, which shouldn't affect anyone.
---
 js/src/cookiebar.ts | 325 ++++++++++++++++++++++++++++++++++++++++++++
 js/src/index.ts     |   2 +-
 2 files changed, 326 insertions(+), 1 deletion(-)
 create mode 100644 js/src/cookiebar.ts

diff --git a/js/src/cookiebar.ts b/js/src/cookiebar.ts
new file mode 100644
index 0000000..2f99382
--- /dev/null
+++ b/js/src/cookiebar.ts
@@ -0,0 +1,325 @@
+/**
+ * Cookiebar functionality, as a TS/JS module.
+ *
+ * About modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
+ *
+ * The code is organized here in a way to make the templates work with Django's page
+ * cache. This means that anything user-specific (so different django session and even
+ * cookie consent cookies) cannot be baked into the templates, as that breaks caches.
+ *
+ * The cookie bar operates on the following principles:
+ *
+ * - The developer using the library includes the desired template in their django
+ *   templates, using the HTML <template> element. This contains the content for the
+ *   cookie bar.
+ * - The developer is responsible for loading some Javascript that loads this script.
+ * - The main export of this script needs to be called (showCookieBar), with the
+ *   appropriate options.
+ * - The options include the backend URLs where the retrieve data, which selectors/DOM
+ *   nodes to use for various functionality and the hooks to tap into the accept/decline
+ *   life-cycle.
+ * - When a user accepts or declines (all) cookies, the call to the backend is made via
+ *   a fetch request, bypassing any page caches and preventing full-page reloads.
+ */
+
+/**
+ * A serialized cookie group.
+ *
+ * See the backend model method `CookieGroup.as_json()`.
+ */
+export interface CookieGroup {
+  varname: string;
+  name: string;
+  description: string;
+  is_required: boolean;
+}
+
+export interface Options {
+  statusUrl: string;
+  // TODO: also accept element rather than selector?
+  templateSelector: string;
+  /**
+   * DOM selector to the (script) tag holding the JSON-serialized cookie groups.
+   *
+   * This is typically rendered in a template with a template tag, e.g.
+   *
+   * ```django
+   * {% all_cookie_groups 'cookie-consent__cookie-groups' %}
+   * ```
+   *
+   * resulting in the selector: `'#cookie-consent__cookie-groups'`.
+   */
+  cookieGroupsSelector: string;
+  acceptSelector: string;
+  declineSelector: string;
+  /**
+   * Either a string (selector), DOMNode or null.
+   *
+   * If null, the bar is appended to the body. If provided, the node is used or looked
+   * up.
+   */
+  insertBefore: string | HTMLElement | null;
+  /**
+   * Optional callback for when the cookie bar is being shown.
+   *
+   * You can use this to add a CSS class name to the body, for example.
+   */
+  onShow?: () => void;
+  /**
+   * Optional callback called when cookies are accepted.
+   */
+  onAccept?: (acceptedGroups: CookieGroup[], event?: MouseEvent) => void;
+  /**
+   * Optional callback called when cookies are accepted.
+   */
+  onDecline?: (declinedGroups: CookieGroup[], event?: MouseEvent) => void;
+  /**
+   * Name of the header to use for the CSRF token.
+   *
+   * If needed, this can be read/set via `settings.CSRF_HEADER_NAME` in the backend.
+   */
+  csrfHeaderName: string;
+};
+
+export interface CookieStatus {
+  csrftoken: string;
+  /**
+   * Backend endpoint to POST to to accept the cookie groups.
+   */
+  acceptUrl: string;
+  /**
+   * Backend endpoint to POST to to decline the cookie groups.
+   */
+  declineUrl: string;
+  /**
+   * Array of accepted cookie group varnames.
+   */
+  acceptedCookieGroups: string[];
+  /**
+   * Array of declined cookie group varnames.
+   */
+  declinedCookieGroups: string[];
+  /**
+   * Array of undecided cookie group varnames.
+   */
+  notAcceptedOrDeclinedCookieGroups: string[];
+}
+
+const DEFAULT_FETCH_HEADERS: Record<string, string> = {
+  'X-Cookie-Consent-Fetch': '1'
+};
+
+class FetchClient {
+  protected statusUrl: string;
+  protected csrfHeaderName: string;
+  protected cookieStatus: CookieStatus | null;
+
+  constructor(statusUrl: string, csrfHeaderName: string) {
+    this.statusUrl = statusUrl;
+    this.csrfHeaderName = csrfHeaderName;
+    this.cookieStatus = null;
+  }
+
+  async getCookieStatus(): Promise<CookieStatus> {
+    if (this.cookieStatus === null) {
+      const response = await window.fetch(
+        this.statusUrl,
+        {
+          method: 'GET',
+          credentials: 'same-origin',
+          headers: DEFAULT_FETCH_HEADERS,
+        }
+      );
+      this.cookieStatus = await response.json();
+    }
+
+    // type checker sanity check
+    if (this.cookieStatus === null) {
+      throw new Error('Unexpectedly received null cookie status');
+    }
+    return this.cookieStatus;
+  };
+
+  async saveCookiesStatusBackend (urlProperty: 'acceptUrl' | 'declineUrl') {
+    const cookieStatus = await this.getCookieStatus();
+    const url = cookieStatus[urlProperty];
+    if (!url) {
+      throw new Error(`Missing url for ${urlProperty} - was the cookie status not loaded properly?`);
+    }
+
+    await window.fetch(url, {
+      method: 'POST',
+      credentials: 'same-origin',
+      headers: {
+        ...DEFAULT_FETCH_HEADERS,
+        [this.csrfHeaderName]: cookieStatus.csrftoken
+      }
+    });
+  }
+}
+
+/**
+ * Read the JSON script node contents and parse the content as JSON.
+ *
+ * The result is the list of available/configured cookie groups.
+ * Use the status URL to get the accepted/declined status for an individual user.
+ */
+export const loadCookieGroups = (selector: string): CookieGroup[] => {
+  const node = document.querySelector<HTMLScriptElement>(selector);
+  if (!node) {
+    throw new Error(`No cookie groups (script) tag found, using selector: '${selector}'`);
+  }
+  return JSON.parse(node.innerText);
+};
+
+const doInsertBefore = (beforeNode: HTMLElement, newNode: Node): void => {
+  const parent = beforeNode.parentNode;
+  if (parent === null) throw new Error('Reference node doesn\'t have a parent.');
+  parent.insertBefore(newNode, beforeNode);
+}
+
+type RegisterEventsOptions = Pick<
+  Options,
+  'acceptSelector' | 'onAccept' | 'declineSelector' | 'onDecline'
+> & Pick<
+  CookieStatus,
+  'acceptedCookieGroups' | 'declinedCookieGroups' | 'notAcceptedOrDeclinedCookieGroups'
+> & {
+  client: FetchClient,
+  cookieBarNode: Element;
+  cookieGroups: CookieGroup[];
+}
+
+/**
+ * Register the accept/decline event handlers.
+ *
+ * Note that we can't just set the decline or accept cookie purely client-side, as the
+ * cookie possibly has the httpOnly flag set.
+ */
+const registerEvents = ({
+  client,
+  cookieBarNode,
+  cookieGroups,
+  acceptSelector,
+  onAccept,
+  declineSelector,
+  onDecline,
+  acceptedCookieGroups: accepted,
+  declinedCookieGroups: declined,
+  notAcceptedOrDeclinedCookieGroups: undecided,
+}: RegisterEventsOptions): void => {
+
+  const acceptNode = cookieBarNode.querySelector<HTMLElement>(acceptSelector);
+  if (acceptNode) {
+    acceptNode.addEventListener('click', event => {
+      event.preventDefault();
+      const acceptedGroups = filterCookieGroups(cookieGroups, accepted.concat(undecided));
+      onAccept?.(acceptedGroups, event);
+      // trigger async action, but don't wait for completion
+      client.saveCookiesStatusBackend('acceptUrl');
+      cookieBarNode.parentNode!.removeChild(cookieBarNode);
+    });
+  }
+
+  const declineNode = cookieBarNode.querySelector<HTMLElement>(declineSelector);
+  if (declineNode) {
+    declineNode.addEventListener('click', event => {
+      event.preventDefault();
+      const declinedGroups = filterCookieGroups(cookieGroups, declined.concat(undecided));
+      onDecline?.(declinedGroups, event);
+      // trigger async action, but don't wait for completion
+      client.saveCookiesStatusBackend('declineUrl');
+      cookieBarNode.parentNode!.removeChild(cookieBarNode);
+    });
+  }
+};
+
+/**
+ * Filter the cookie groups down to a subset of specified varnames.
+ */
+const filterCookieGroups = (cookieGroups: CookieGroup[], varNames: string[]) => {
+  return cookieGroups.filter(group => varNames.includes(group.varname));
+};
+
+// See https://github.com/microsoft/TypeScript/issues/283
+function cloneNode<T extends Node>(node: T) {
+  return <T>node.cloneNode(true);
+}
+
+export const showCookieBar = async (options: Partial<Options> = {}): Promise<void> => {
+  const {
+    templateSelector = '#cookie-consent__cookie-bar',
+    cookieGroupsSelector = '#cookie-consent__cookie-groups',
+    acceptSelector = '.cookie-consent__accept',
+    declineSelector = '.cookie-consent__decline',
+    insertBefore = null,
+    onShow,
+    onAccept,
+    onDecline,
+    statusUrl = '',
+    csrfHeaderName = 'X-CSRFToken', // Django's default, can be overridden with settings.CSRF_HEADER_NAME
+  } = options;
+
+  const cookieGroups = loadCookieGroups(cookieGroupsSelector);
+
+  // no cookie groups -> abort, nothing to do
+  if (!cookieGroups.length) return;
+
+  const templateNode = document.querySelector<HTMLTemplateElement>(templateSelector);
+  if (!templateNode) {
+    throw new Error(`No (template) element found for selector '${templateSelector}'.`)
+  }
+
+  // insert before a given node, if specified, or append to the body as default behaviour
+  const doInsert = insertBefore === null
+    ? (cookieBarNode: Node) => document.querySelector('body')!.appendChild(cookieBarNode)
+    : typeof insertBefore === 'string'
+      ? (cookieBarNode: Node) => {
+        const referenceNode = document.querySelector<HTMLElement>(insertBefore);
+        if (referenceNode === null) throw new Error(`No element found for selector '${insertBefore}'.`)
+        doInsertBefore(referenceNode, cookieBarNode);
+      }
+      : (cookieBarNode: Node) => doInsertBefore(insertBefore, cookieBarNode)
+  ;
+
+  if (!statusUrl) throw new Error('Missing status URL option, did you forget to pass the `statusUrl` option?');
+
+  const client = new FetchClient(statusUrl, csrfHeaderName);
+  const cookieStatus = await client.getCookieStatus();
+
+  // calculate the cookie groups to invoke the callbacks. We deliberately fire those
+  // without awaiting so that our cookie bar is shown/hidden as soon as possible.
+  const {
+    acceptedCookieGroups,
+    declinedCookieGroups,
+    notAcceptedOrDeclinedCookieGroups
+  } = cookieStatus;
+
+  const acceptedGroups = filterCookieGroups(cookieGroups, acceptedCookieGroups);
+  if (acceptedGroups.length) onAccept?.(acceptedGroups);
+  const declinedGroups = filterCookieGroups(cookieGroups, declinedCookieGroups);
+  if (declinedGroups.length) onDecline?.(declinedGroups);
+
+  // there are no (more) cookie groups to accept, don't show the bar
+  if (!notAcceptedOrDeclinedCookieGroups.length) return;
+
+  // grab the contents from the template node and add them to the DOM, optionally
+  // calling the onShow callback
+  const childToClone = templateNode.content.firstElementChild;
+  if (childToClone === null) throw new Error('The cookie bar template element may not be empty.');
+  const cookieBarNode = cloneNode(childToClone);
+  registerEvents({
+    client,
+    cookieBarNode,
+    cookieGroups,
+    acceptSelector,
+    onAccept,
+    declineSelector,
+    onDecline,
+    acceptedCookieGroups,
+    declinedCookieGroups,
+    notAcceptedOrDeclinedCookieGroups,
+  });
+  onShow?.();
+  doInsert(cookieBarNode);
+};
diff --git a/js/src/index.ts b/js/src/index.ts
index c0f1d43..06263d4 100644
--- a/js/src/index.ts
+++ b/js/src/index.ts
@@ -1 +1 @@
-console.log('ok')
+export {loadCookieGroups, showCookieBar} from './cookiebar';

From 883afe4ade253efc343f7eaeda5a9036238375c1 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 2 May 2024 10:43:02 +0200
Subject: [PATCH 03/12] :construction_worker: Add CI checks for frontend
 building

---
 .github/workflows/ci.yml | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2878be2..0b555d9 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,6 +11,25 @@ on:
   workflow_dispatch:
 
 jobs:
+  build-js:
+    runs-on: ubuntu-latest
+    name: Compile the frontend code
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: 'js/.nvmrc'
+          cache: npm
+          cache-dependency-path: js/package-lock.json
+
+      - name: Build TS
+        run: |
+          npm ci
+          npm run build
+          npm run build:django-static
+        working-directory: js
+
   tests:
     runs-on: ubuntu-latest
     strategy:

From b954dcfd8ba0f4437a51dba2b22bee5fcc830185 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 2 May 2024 10:57:07 +0200
Subject: [PATCH 04/12] :hammer: Use esbuild to bundle for django staticfiles

The cookiebar module TS source is taken as input, and the
resulting bundle written to the cookie consent staticfiles
directory.
---
 .../static/cookie_consent/cookiebar.module.js | 306 ++++++-------
 .../cookie_consent/cookiebar.module.js.map    |   7 +
 js/package-lock.json                          | 407 ++++++++++++++++++
 js/package.json                               |   6 +-
 4 files changed, 552 insertions(+), 174 deletions(-)
 create mode 100644 cookie_consent/static/cookie_consent/cookiebar.module.js.map

diff --git a/cookie_consent/static/cookie_consent/cookiebar.module.js b/cookie_consent/static/cookie_consent/cookiebar.module.js
index af27203..3a7b9b8 100644
--- a/cookie_consent/static/cookie_consent/cookiebar.module.js
+++ b/cookie_consent/static/cookie_consent/cookiebar.module.js
@@ -1,203 +1,163 @@
-/**
- * Cookiebar functionality, as a Javascript module.
- *
- * About modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
- *
- * The code is organized here in a way to make the templates work with Django's page
- * cache. This means that anything user-specific (so different django session and even
- * cookie consent cookies) cannot be baked into the templates, as that breaks caches.
- *
- * The cookie bar operates on the following principles:
- *
- * - The developer using the library includes the desired template in their django
- *   templates, using the HTML <template> element. This contains the content for the
- *   cookie bar.
- * - The developer is responsible for loading some Javascript that loads this script.
- * - The main export of this script needs to be called (showCookieBar), with the
- *   appropriate options.
- * - The options include the backend URLs where the retrieve data, which selectors/DOM
- *   nodes to use for various functionality and the hooks to tap into the accept/decline
- *   life-cycle.
- * - When a user accepts or declines (all) cookies, the call to the backend is made via
- *   a fetch request, bypassing any page caches and preventing full-page reloads.
- */
-const DEFAULTS = {
-  statusUrl: undefined,
-  // TODO: also accept element rather than selector?
-  templateSelector: '#cookie-consent__cookie-bar',
-  cookieGroupsSelector: '#cookie-consent__cookie-groups',
-  acceptSelector: '.cookie-consent__accept',
-  declineSelector: '.cookie-consent__decline',
-  /**
-   * Either a string (selector), DOMNode or null.
-   *
-   * If null, the bar is appended to the body. If provided, the node is used or looked
-   * up.
-   */
-  insertBefore: null,
-  onShow: null, // callback when the cookie bar is being shown -> add class to body...
-  onAccept: null, // callback when cookies are accepted
-  onDecline: null, // callback when cookies are declined
-  csrfHeaderName: 'X-CSRFToken', // Django's default, can be overridden with settings.CSRF_HEADER_NAME
+// src/cookiebar.ts
+var DEFAULT_FETCH_HEADERS = {
+  "X-Cookie-Consent-Fetch": "1"
 };
-
-const DEFAULT_HEADERS = {'X-Cookie-Consent-Fetch': '1'};
-
-let CONFIGURATION = DEFAULTS;
-/**
- * Cookie accept status, including the accept/decline URLs, csrftoken... See
- * backend view CookieStatusView.
- */
-let COOKIE_STATUS = null;
-
-export const loadCookieGroups = (selector) => {
+var FetchClient = class {
+  constructor(statusUrl, csrfHeaderName) {
+    this.statusUrl = statusUrl;
+    this.csrfHeaderName = csrfHeaderName;
+    this.cookieStatus = null;
+  }
+  async getCookieStatus() {
+    if (this.cookieStatus === null) {
+      const response = await window.fetch(
+        this.statusUrl,
+        {
+          method: "GET",
+          credentials: "same-origin",
+          headers: DEFAULT_FETCH_HEADERS
+        }
+      );
+      this.cookieStatus = await response.json();
+    }
+    if (this.cookieStatus === null) {
+      throw new Error("Unexpectedly received null cookie status");
+    }
+    return this.cookieStatus;
+  }
+  async saveCookiesStatusBackend(urlProperty) {
+    const cookieStatus = await this.getCookieStatus();
+    const url = cookieStatus[urlProperty];
+    if (!url) {
+      throw new Error(`Missing url for ${urlProperty} - was the cookie status not loaded properly?`);
+    }
+    await window.fetch(url, {
+      method: "POST",
+      credentials: "same-origin",
+      headers: {
+        ...DEFAULT_FETCH_HEADERS,
+        [this.csrfHeaderName]: cookieStatus.csrftoken
+      }
+    });
+  }
+};
+var loadCookieGroups = (selector) => {
   const node = document.querySelector(selector);
   if (!node) {
     throw new Error(`No cookie groups (script) tag found, using selector: '${selector}'`);
   }
   return JSON.parse(node.innerText);
 };
-
-const doInsertBefore = (beforeNode, newNode) => {
+var doInsertBefore = (beforeNode, newNode) => {
   const parent = beforeNode.parentNode;
+  if (parent === null)
+    throw new Error("Reference node doesn't have a parent.");
   parent.insertBefore(newNode, beforeNode);
-}
-
-/**
- * Register the accept/decline event handlers.
- *
- * Note that we can't just set the decline or accept cookie purely client-side, as the
- * cookie possibly has the httpOnly flag set.
- *
- * @param  {HTMLEelement} cookieBarNode The DOM node containing the cookiebar markup.
- * @param  {Array}        cookieGroups  The array of all configured cookie groups.
- * @return {Void}
- */
-const registerEvents = (cookieBarNode, cookieGroups) => {
-  const {acceptSelector, onAccept, declineSelector, onDecline} = CONFIGURATION;
-  const {
-    acceptedCookieGroups: accepted,
-    declinedCookieGroups: declined,
-    notAcceptedOrDeclinedCookieGroups: undecided,
-} = COOKIE_STATUS;
-
-  cookieBarNode
-    .querySelector(acceptSelector)
-    .addEventListener('click', event => {
+};
+var registerEvents = ({
+  client,
+  cookieBarNode,
+  cookieGroups,
+  acceptSelector,
+  onAccept,
+  declineSelector,
+  onDecline,
+  acceptedCookieGroups: accepted,
+  declinedCookieGroups: declined,
+  notAcceptedOrDeclinedCookieGroups: undecided
+}) => {
+  const acceptNode = cookieBarNode.querySelector(acceptSelector);
+  if (acceptNode) {
+    acceptNode.addEventListener("click", (event) => {
       event.preventDefault();
       const acceptedGroups = filterCookieGroups(cookieGroups, accepted.concat(undecided));
-      onAccept?.(acceptedGroups, event);
-      acceptCookiesBackend();
+      onAccept == null ? void 0 : onAccept(acceptedGroups, event);
+      client.saveCookiesStatusBackend("acceptUrl");
       cookieBarNode.parentNode.removeChild(cookieBarNode);
     });
-
-  cookieBarNode
-    .querySelector(declineSelector)
-    .addEventListener('click', event => {
+  }
+  const declineNode = cookieBarNode.querySelector(declineSelector);
+  if (declineNode) {
+    declineNode.addEventListener("click", (event) => {
       event.preventDefault();
       const declinedGroups = filterCookieGroups(cookieGroups, declined.concat(undecided));
-      onDecline?.(declinedGroups, event);
-      declineCookiesBackend();
+      onDecline == null ? void 0 : onDecline(declinedGroups, event);
+      client.saveCookiesStatusBackend("declineUrl");
       cookieBarNode.parentNode.removeChild(cookieBarNode);
     });
+  }
 };
-
-const loadCookieStatus = async () => {
-  const {statusUrl} = CONFIGURATION;
-  if (!statusUrl) console.error('Missing status URL option, did you forget to pass the statusUrl option?');
-  const response = await window.fetch(
-    CONFIGURATION.statusUrl,
-    {
-      method: 'GET',
-      credentials: 'same-origin',
-      headers: DEFAULT_HEADERS
-    }
-  );
-  // assign to module level variable, once the page is loaded these details should
-  // not change.
-  COOKIE_STATUS = await response.json();
+var filterCookieGroups = (cookieGroups, varNames) => {
+  return cookieGroups.filter((group) => varNames.includes(group.varname));
 };
-
-const saveCookiesStatusBackend = async (urlProperty) => {
-  const status = COOKIE_STATUS || {};
-  const url = status[urlProperty];
-  if (!url) {
-    console.error(`Missing url for ${urlProperty} - was the cookie status not loaded properly?`);
-    return;
-  }
-  await window.fetch(url, {
-    method: 'POST',
-    credentials: 'same-origin',
-    headers: {
-      ...DEFAULT_HEADERS,
-      [CONFIGURATION.csrfHeaderName]: status.csrftoken
-    }
-  });
+function cloneNode(node) {
+  return node.cloneNode(true);
 }
-
-/**
- * Make the call to the backend to accept the cookies.
- */
-const acceptCookiesBackend = async () => await saveCookiesStatusBackend('acceptUrl');
-/**
- * Make the call to the backend to decline the cookies.
- */
-const declineCookiesBackend = async () => await saveCookiesStatusBackend('declineUrl');
-
-/**
- * Filter the cookie groups down to a subset of specified varnames.
- */
-const filterCookieGroups = (cookieGroups, varNames) => {
-  return cookieGroups.filter(group => varNames.includes(group.varname));
-};
-
-export const showCookieBar = async (options={}) => {
-  // merge defaults and provided options
-  CONFIGURATION = {...DEFAULTS, ...options};
+var showCookieBar = async (options = {}) => {
   const {
-    cookieGroupsSelector,
-    templateSelector,
-    insertBefore,
+    templateSelector = "#cookie-consent__cookie-bar",
+    cookieGroupsSelector = "#cookie-consent__cookie-groups",
+    acceptSelector = ".cookie-consent__accept",
+    declineSelector = ".cookie-consent__decline",
+    insertBefore = null,
     onShow,
     onAccept,
     onDecline,
-  } = CONFIGURATION;
+    statusUrl = "",
+    csrfHeaderName = "X-CSRFToken"
+    // Django's default, can be overridden with settings.CSRF_HEADER_NAME
+  } = options;
   const cookieGroups = loadCookieGroups(cookieGroupsSelector);
-
-  // no cookie groups -> abort
-  if (!cookieGroups.length) return;
-
+  if (!cookieGroups.length)
+    return;
   const templateNode = document.querySelector(templateSelector);
-
-  // insert before a given node, if specified, or append to the body as default behaviour
-  const doInsert = insertBefore === null
-    ? (cookieBarNode) => document.querySelector('body').appendChild(cookieBarNode)
-    : typeof insertBefore === 'string'
-      ? (cookieBarNode) => doInsertBefore(document.querySelector(insertBefore), cookieBarNode)
-      : (cookieBarNode) => doInsertBefore(insertBefore, cookieBarNode)
-  ;
-  await loadCookieStatus();
-
-  // calculate the cookie groups to invoke the callbacks. We deliberately fire those
-  // without awaiting so that our cookie bar is shown/hidden as soon as possible.
+  if (!templateNode) {
+    throw new Error(`No (template) element found for selector '${templateSelector}'.`);
+  }
+  const doInsert = insertBefore === null ? (cookieBarNode2) => document.querySelector("body").appendChild(cookieBarNode2) : typeof insertBefore === "string" ? (cookieBarNode2) => {
+    const referenceNode = document.querySelector(insertBefore);
+    if (referenceNode === null)
+      throw new Error(`No element found for selector '${insertBefore}'.`);
+    doInsertBefore(referenceNode, cookieBarNode2);
+  } : (cookieBarNode2) => doInsertBefore(insertBefore, cookieBarNode2);
+  if (!statusUrl)
+    throw new Error("Missing status URL option, did you forget to pass the `statusUrl` option?");
+  const client = new FetchClient(statusUrl, csrfHeaderName);
+  const cookieStatus = await client.getCookieStatus();
   const {
-    acceptedCookieGroups: accepted,
-    declinedCookieGroups: declined,
+    acceptedCookieGroups,
+    declinedCookieGroups,
     notAcceptedOrDeclinedCookieGroups
-  } = COOKIE_STATUS;
-
-  const acceptedGroups = filterCookieGroups(cookieGroups, accepted);
-  if (acceptedGroups.length) onAccept?.(acceptedGroups);
-  const declinedGroups = filterCookieGroups(cookieGroups, declined);
-  if (declinedGroups.length) onDecline?.(declinedGroups);
-
-  // there are no (more) cookie groups to accept, don't show the bar
-  if (!notAcceptedOrDeclinedCookieGroups.length) return;
-
-  // grab the contents from the template node and add them to the DOM, optionally
-  // calling the onShow callback
-  const cookieBarNode = templateNode.content.firstElementChild.cloneNode(true);
-  registerEvents(cookieBarNode, cookieGroups);
-  onShow?.();
+  } = cookieStatus;
+  const acceptedGroups = filterCookieGroups(cookieGroups, acceptedCookieGroups);
+  if (acceptedGroups.length)
+    onAccept == null ? void 0 : onAccept(acceptedGroups);
+  const declinedGroups = filterCookieGroups(cookieGroups, declinedCookieGroups);
+  if (declinedGroups.length)
+    onDecline == null ? void 0 : onDecline(declinedGroups);
+  if (!notAcceptedOrDeclinedCookieGroups.length)
+    return;
+  const childToClone = templateNode.content.firstElementChild;
+  if (childToClone === null)
+    throw new Error("The cookie bar template element may not be empty.");
+  const cookieBarNode = cloneNode(childToClone);
+  registerEvents({
+    client,
+    cookieBarNode,
+    cookieGroups,
+    acceptSelector,
+    onAccept,
+    declineSelector,
+    onDecline,
+    acceptedCookieGroups,
+    declinedCookieGroups,
+    notAcceptedOrDeclinedCookieGroups
+  });
+  onShow == null ? void 0 : onShow();
   doInsert(cookieBarNode);
 };
+export {
+  loadCookieGroups,
+  showCookieBar
+};
+//# sourceMappingURL=cookiebar.module.js.map
diff --git a/cookie_consent/static/cookie_consent/cookiebar.module.js.map b/cookie_consent/static/cookie_consent/cookiebar.module.js.map
new file mode 100644
index 0000000..9b95a88
--- /dev/null
+++ b/cookie_consent/static/cookie_consent/cookiebar.module.js.map
@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../js/src/cookiebar.ts"],
+  "sourcesContent": ["/**\n * Cookiebar functionality, as a TS/JS module.\n *\n * About modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules\n *\n * The code is organized here in a way to make the templates work with Django's page\n * cache. This means that anything user-specific (so different django session and even\n * cookie consent cookies) cannot be baked into the templates, as that breaks caches.\n *\n * The cookie bar operates on the following principles:\n *\n * - The developer using the library includes the desired template in their django\n *   templates, using the HTML <template> element. This contains the content for the\n *   cookie bar.\n * - The developer is responsible for loading some Javascript that loads this script.\n * - The main export of this script needs to be called (showCookieBar), with the\n *   appropriate options.\n * - The options include the backend URLs where the retrieve data, which selectors/DOM\n *   nodes to use for various functionality and the hooks to tap into the accept/decline\n *   life-cycle.\n * - When a user accepts or declines (all) cookies, the call to the backend is made via\n *   a fetch request, bypassing any page caches and preventing full-page reloads.\n */\n\n/**\n * A serialized cookie group.\n *\n * See the backend model method `CookieGroup.as_json()`.\n */\nexport interface CookieGroup {\n  varname: string;\n  name: string;\n  description: string;\n  is_required: boolean;\n}\n\nexport interface Options {\n  statusUrl: string;\n  // TODO: also accept element rather than selector?\n  templateSelector: string;\n  /**\n   * DOM selector to the (script) tag holding the JSON-serialized cookie groups.\n   *\n   * This is typically rendered in a template with a template tag, e.g.\n   *\n   * ```django\n   * {% all_cookie_groups 'cookie-consent__cookie-groups' %}\n   * ```\n   *\n   * resulting in the selector: `'#cookie-consent__cookie-groups'`.\n   */\n  cookieGroupsSelector: string;\n  acceptSelector: string;\n  declineSelector: string;\n  /**\n   * Either a string (selector), DOMNode or null.\n   *\n   * If null, the bar is appended to the body. If provided, the node is used or looked\n   * up.\n   */\n  insertBefore: string | HTMLElement | null;\n  /**\n   * Optional callback for when the cookie bar is being shown.\n   *\n   * You can use this to add a CSS class name to the body, for example.\n   */\n  onShow?: () => void;\n  /**\n   * Optional callback called when cookies are accepted.\n   */\n  onAccept?: (acceptedGroups: CookieGroup[], event?: MouseEvent) => void;\n  /**\n   * Optional callback called when cookies are accepted.\n   */\n  onDecline?: (declinedGroups: CookieGroup[], event?: MouseEvent) => void;\n  /**\n   * Name of the header to use for the CSRF token.\n   *\n   * If needed, this can be read/set via `settings.CSRF_HEADER_NAME` in the backend.\n   */\n  csrfHeaderName: string;\n};\n\nexport interface CookieStatus {\n  csrftoken: string;\n  /**\n   * Backend endpoint to POST to to accept the cookie groups.\n   */\n  acceptUrl: string;\n  /**\n   * Backend endpoint to POST to to decline the cookie groups.\n   */\n  declineUrl: string;\n  /**\n   * Array of accepted cookie group varnames.\n   */\n  acceptedCookieGroups: string[];\n  /**\n   * Array of declined cookie group varnames.\n   */\n  declinedCookieGroups: string[];\n  /**\n   * Array of undecided cookie group varnames.\n   */\n  notAcceptedOrDeclinedCookieGroups: string[];\n}\n\nconst DEFAULT_FETCH_HEADERS: Record<string, string> = {\n  'X-Cookie-Consent-Fetch': '1'\n};\n\nclass FetchClient {\n  protected statusUrl: string;\n  protected csrfHeaderName: string;\n  protected cookieStatus: CookieStatus | null;\n\n  constructor(statusUrl: string, csrfHeaderName: string) {\n    this.statusUrl = statusUrl;\n    this.csrfHeaderName = csrfHeaderName;\n    this.cookieStatus = null;\n  }\n\n  async getCookieStatus(): Promise<CookieStatus> {\n    if (this.cookieStatus === null) {\n      const response = await window.fetch(\n        this.statusUrl,\n        {\n          method: 'GET',\n          credentials: 'same-origin',\n          headers: DEFAULT_FETCH_HEADERS,\n        }\n      );\n      this.cookieStatus = await response.json();\n    }\n\n    // type checker sanity check\n    if (this.cookieStatus === null) {\n      throw new Error('Unexpectedly received null cookie status');\n    }\n    return this.cookieStatus;\n  };\n\n  async saveCookiesStatusBackend (urlProperty: 'acceptUrl' | 'declineUrl') {\n    const cookieStatus = await this.getCookieStatus();\n    const url = cookieStatus[urlProperty];\n    if (!url) {\n      throw new Error(`Missing url for ${urlProperty} - was the cookie status not loaded properly?`);\n    }\n\n    await window.fetch(url, {\n      method: 'POST',\n      credentials: 'same-origin',\n      headers: {\n        ...DEFAULT_FETCH_HEADERS,\n        [this.csrfHeaderName]: cookieStatus.csrftoken\n      }\n    });\n  }\n}\n\n/**\n * Read the JSON script node contents and parse the content as JSON.\n *\n * The result is the list of available/configured cookie groups.\n * Use the status URL to get the accepted/declined status for an individual user.\n */\nexport const loadCookieGroups = (selector: string): CookieGroup[] => {\n  const node = document.querySelector<HTMLScriptElement>(selector);\n  if (!node) {\n    throw new Error(`No cookie groups (script) tag found, using selector: '${selector}'`);\n  }\n  return JSON.parse(node.innerText);\n};\n\nconst doInsertBefore = (beforeNode: HTMLElement, newNode: Node): void => {\n  const parent = beforeNode.parentNode;\n  if (parent === null) throw new Error('Reference node doesn\\'t have a parent.');\n  parent.insertBefore(newNode, beforeNode);\n}\n\ntype RegisterEventsOptions = Pick<\n  Options,\n  'acceptSelector' | 'onAccept' | 'declineSelector' | 'onDecline'\n> & Pick<\n  CookieStatus,\n  'acceptedCookieGroups' | 'declinedCookieGroups' | 'notAcceptedOrDeclinedCookieGroups'\n> & {\n  client: FetchClient,\n  cookieBarNode: Element;\n  cookieGroups: CookieGroup[];\n}\n\n/**\n * Register the accept/decline event handlers.\n *\n * Note that we can't just set the decline or accept cookie purely client-side, as the\n * cookie possibly has the httpOnly flag set.\n */\nconst registerEvents = ({\n  client,\n  cookieBarNode,\n  cookieGroups,\n  acceptSelector,\n  onAccept,\n  declineSelector,\n  onDecline,\n  acceptedCookieGroups: accepted,\n  declinedCookieGroups: declined,\n  notAcceptedOrDeclinedCookieGroups: undecided,\n}: RegisterEventsOptions): void => {\n\n  const acceptNode = cookieBarNode.querySelector<HTMLElement>(acceptSelector);\n  if (acceptNode) {\n    acceptNode.addEventListener('click', event => {\n      event.preventDefault();\n      const acceptedGroups = filterCookieGroups(cookieGroups, accepted.concat(undecided));\n      onAccept?.(acceptedGroups, event);\n      // trigger async action, but don't wait for completion\n      client.saveCookiesStatusBackend('acceptUrl');\n      cookieBarNode.parentNode!.removeChild(cookieBarNode);\n    });\n  }\n\n  const declineNode = cookieBarNode.querySelector<HTMLElement>(declineSelector);\n  if (declineNode) {\n    declineNode.addEventListener('click', event => {\n      event.preventDefault();\n      const declinedGroups = filterCookieGroups(cookieGroups, declined.concat(undecided));\n      onDecline?.(declinedGroups, event);\n      // trigger async action, but don't wait for completion\n      client.saveCookiesStatusBackend('declineUrl');\n      cookieBarNode.parentNode!.removeChild(cookieBarNode);\n    });\n  }\n};\n\n/**\n * Filter the cookie groups down to a subset of specified varnames.\n */\nconst filterCookieGroups = (cookieGroups: CookieGroup[], varNames: string[]) => {\n  return cookieGroups.filter(group => varNames.includes(group.varname));\n};\n\n// See https://github.com/microsoft/TypeScript/issues/283\nfunction cloneNode<T extends Node>(node: T) {\n  return <T>node.cloneNode(true);\n}\n\nexport const showCookieBar = async (options: Partial<Options> = {}): Promise<void> => {\n  const {\n    templateSelector = '#cookie-consent__cookie-bar',\n    cookieGroupsSelector = '#cookie-consent__cookie-groups',\n    acceptSelector = '.cookie-consent__accept',\n    declineSelector = '.cookie-consent__decline',\n    insertBefore = null,\n    onShow,\n    onAccept,\n    onDecline,\n    statusUrl = '',\n    csrfHeaderName = 'X-CSRFToken', // Django's default, can be overridden with settings.CSRF_HEADER_NAME\n  } = options;\n\n  const cookieGroups = loadCookieGroups(cookieGroupsSelector);\n\n  // no cookie groups -> abort, nothing to do\n  if (!cookieGroups.length) return;\n\n  const templateNode = document.querySelector<HTMLTemplateElement>(templateSelector);\n  if (!templateNode) {\n    throw new Error(`No (template) element found for selector '${templateSelector}'.`)\n  }\n\n  // insert before a given node, if specified, or append to the body as default behaviour\n  const doInsert = insertBefore === null\n    ? (cookieBarNode: Node) => document.querySelector('body')!.appendChild(cookieBarNode)\n    : typeof insertBefore === 'string'\n      ? (cookieBarNode: Node) => {\n        const referenceNode = document.querySelector<HTMLElement>(insertBefore);\n        if (referenceNode === null) throw new Error(`No element found for selector '${insertBefore}'.`)\n        doInsertBefore(referenceNode, cookieBarNode);\n      }\n      : (cookieBarNode: Node) => doInsertBefore(insertBefore, cookieBarNode)\n  ;\n\n  if (!statusUrl) throw new Error('Missing status URL option, did you forget to pass the `statusUrl` option?');\n\n  const client = new FetchClient(statusUrl, csrfHeaderName);\n  const cookieStatus = await client.getCookieStatus();\n\n  // calculate the cookie groups to invoke the callbacks. We deliberately fire those\n  // without awaiting so that our cookie bar is shown/hidden as soon as possible.\n  const {\n    acceptedCookieGroups,\n    declinedCookieGroups,\n    notAcceptedOrDeclinedCookieGroups\n  } = cookieStatus;\n\n  const acceptedGroups = filterCookieGroups(cookieGroups, acceptedCookieGroups);\n  if (acceptedGroups.length) onAccept?.(acceptedGroups);\n  const declinedGroups = filterCookieGroups(cookieGroups, declinedCookieGroups);\n  if (declinedGroups.length) onDecline?.(declinedGroups);\n\n  // there are no (more) cookie groups to accept, don't show the bar\n  if (!notAcceptedOrDeclinedCookieGroups.length) return;\n\n  // grab the contents from the template node and add them to the DOM, optionally\n  // calling the onShow callback\n  const childToClone = templateNode.content.firstElementChild;\n  if (childToClone === null) throw new Error('The cookie bar template element may not be empty.');\n  const cookieBarNode = cloneNode(childToClone);\n  registerEvents({\n    client,\n    cookieBarNode,\n    cookieGroups,\n    acceptSelector,\n    onAccept,\n    declineSelector,\n    onDecline,\n    acceptedCookieGroups,\n    declinedCookieGroups,\n    notAcceptedOrDeclinedCookieGroups,\n  });\n  onShow?.();\n  doInsert(cookieBarNode);\n};\n"],
+  "mappings": "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",
+  "names": ["cookieBarNode"]
+}
diff --git a/js/package-lock.json b/js/package-lock.json
index 33ba680..0b7b2fe 100644
--- a/js/package-lock.json
+++ b/js/package-lock.json
@@ -9,9 +9,416 @@
       "version": "0.5.0-beta0",
       "license": "BSD-2-Clause",
       "devDependencies": {
+        "esbuild": "^0.20.2",
         "typescript": "^5.4.5"
       }
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.20.2",
+        "@esbuild/android-arm": "0.20.2",
+        "@esbuild/android-arm64": "0.20.2",
+        "@esbuild/android-x64": "0.20.2",
+        "@esbuild/darwin-arm64": "0.20.2",
+        "@esbuild/darwin-x64": "0.20.2",
+        "@esbuild/freebsd-arm64": "0.20.2",
+        "@esbuild/freebsd-x64": "0.20.2",
+        "@esbuild/linux-arm": "0.20.2",
+        "@esbuild/linux-arm64": "0.20.2",
+        "@esbuild/linux-ia32": "0.20.2",
+        "@esbuild/linux-loong64": "0.20.2",
+        "@esbuild/linux-mips64el": "0.20.2",
+        "@esbuild/linux-ppc64": "0.20.2",
+        "@esbuild/linux-riscv64": "0.20.2",
+        "@esbuild/linux-s390x": "0.20.2",
+        "@esbuild/linux-x64": "0.20.2",
+        "@esbuild/netbsd-x64": "0.20.2",
+        "@esbuild/openbsd-x64": "0.20.2",
+        "@esbuild/sunos-x64": "0.20.2",
+        "@esbuild/win32-arm64": "0.20.2",
+        "@esbuild/win32-ia32": "0.20.2",
+        "@esbuild/win32-x64": "0.20.2"
+      }
+    },
     "node_modules/typescript": {
       "version": "5.4.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
diff --git a/js/package.json b/js/package.json
index 40c6b37..d12f7cd 100644
--- a/js/package.json
+++ b/js/package.json
@@ -4,9 +4,12 @@
   "description": "Frontend code for django-cookie-consent",
   "main": "lib/index.js",
   "type": "module",
-  "files": ["lib/"],
+  "files": [
+    "lib/"
+  ],
   "scripts": {
     "build": "tsc",
+    "build:django-static": "esbuild --bundle src/cookiebar.ts --outfile=../cookie_consent/static/cookie_consent/cookiebar.module.js --target=es2018 --format=esm --sourcemap",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -26,6 +29,7 @@
   },
   "homepage": "https://github.com/jazzband/django-cookie-consent#readme",
   "devDependencies": {
+    "esbuild": "^0.20.2",
     "typescript": "^5.4.5"
   }
 }

From e1498dc83fd1b1d21b00543d9863d6cca397ffe5 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 2 May 2024 11:05:13 +0200
Subject: [PATCH 05/12] :bug: Closes #116 - swap order of onShow and doInsert

The onShow handler should be invoked after the node was inserted.

Thanks to @grrodre for contributing the patch!
---
 cookie_consent/static/cookie_consent/cookiebar.module.js     | 2 +-
 cookie_consent/static/cookie_consent/cookiebar.module.js.map | 4 ++--
 js/src/cookiebar.ts                                          | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/cookie_consent/static/cookie_consent/cookiebar.module.js b/cookie_consent/static/cookie_consent/cookiebar.module.js
index 3a7b9b8..3e81eb2 100644
--- a/cookie_consent/static/cookie_consent/cookiebar.module.js
+++ b/cookie_consent/static/cookie_consent/cookiebar.module.js
@@ -153,8 +153,8 @@ var showCookieBar = async (options = {}) => {
     declinedCookieGroups,
     notAcceptedOrDeclinedCookieGroups
   });
-  onShow == null ? void 0 : onShow();
   doInsert(cookieBarNode);
+  onShow == null ? void 0 : onShow();
 };
 export {
   loadCookieGroups,
diff --git a/cookie_consent/static/cookie_consent/cookiebar.module.js.map b/cookie_consent/static/cookie_consent/cookiebar.module.js.map
index 9b95a88..89c12be 100644
--- a/cookie_consent/static/cookie_consent/cookiebar.module.js.map
+++ b/cookie_consent/static/cookie_consent/cookiebar.module.js.map
@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../js/src/cookiebar.ts"],
-  "sourcesContent": ["/**\n * Cookiebar functionality, as a TS/JS module.\n *\n * About modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules\n *\n * The code is organized here in a way to make the templates work with Django's page\n * cache. This means that anything user-specific (so different django session and even\n * cookie consent cookies) cannot be baked into the templates, as that breaks caches.\n *\n * The cookie bar operates on the following principles:\n *\n * - The developer using the library includes the desired template in their django\n *   templates, using the HTML <template> element. This contains the content for the\n *   cookie bar.\n * - The developer is responsible for loading some Javascript that loads this script.\n * - The main export of this script needs to be called (showCookieBar), with the\n *   appropriate options.\n * - The options include the backend URLs where the retrieve data, which selectors/DOM\n *   nodes to use for various functionality and the hooks to tap into the accept/decline\n *   life-cycle.\n * - When a user accepts or declines (all) cookies, the call to the backend is made via\n *   a fetch request, bypassing any page caches and preventing full-page reloads.\n */\n\n/**\n * A serialized cookie group.\n *\n * See the backend model method `CookieGroup.as_json()`.\n */\nexport interface CookieGroup {\n  varname: string;\n  name: string;\n  description: string;\n  is_required: boolean;\n}\n\nexport interface Options {\n  statusUrl: string;\n  // TODO: also accept element rather than selector?\n  templateSelector: string;\n  /**\n   * DOM selector to the (script) tag holding the JSON-serialized cookie groups.\n   *\n   * This is typically rendered in a template with a template tag, e.g.\n   *\n   * ```django\n   * {% all_cookie_groups 'cookie-consent__cookie-groups' %}\n   * ```\n   *\n   * resulting in the selector: `'#cookie-consent__cookie-groups'`.\n   */\n  cookieGroupsSelector: string;\n  acceptSelector: string;\n  declineSelector: string;\n  /**\n   * Either a string (selector), DOMNode or null.\n   *\n   * If null, the bar is appended to the body. If provided, the node is used or looked\n   * up.\n   */\n  insertBefore: string | HTMLElement | null;\n  /**\n   * Optional callback for when the cookie bar is being shown.\n   *\n   * You can use this to add a CSS class name to the body, for example.\n   */\n  onShow?: () => void;\n  /**\n   * Optional callback called when cookies are accepted.\n   */\n  onAccept?: (acceptedGroups: CookieGroup[], event?: MouseEvent) => void;\n  /**\n   * Optional callback called when cookies are accepted.\n   */\n  onDecline?: (declinedGroups: CookieGroup[], event?: MouseEvent) => void;\n  /**\n   * Name of the header to use for the CSRF token.\n   *\n   * If needed, this can be read/set via `settings.CSRF_HEADER_NAME` in the backend.\n   */\n  csrfHeaderName: string;\n};\n\nexport interface CookieStatus {\n  csrftoken: string;\n  /**\n   * Backend endpoint to POST to to accept the cookie groups.\n   */\n  acceptUrl: string;\n  /**\n   * Backend endpoint to POST to to decline the cookie groups.\n   */\n  declineUrl: string;\n  /**\n   * Array of accepted cookie group varnames.\n   */\n  acceptedCookieGroups: string[];\n  /**\n   * Array of declined cookie group varnames.\n   */\n  declinedCookieGroups: string[];\n  /**\n   * Array of undecided cookie group varnames.\n   */\n  notAcceptedOrDeclinedCookieGroups: string[];\n}\n\nconst DEFAULT_FETCH_HEADERS: Record<string, string> = {\n  'X-Cookie-Consent-Fetch': '1'\n};\n\nclass FetchClient {\n  protected statusUrl: string;\n  protected csrfHeaderName: string;\n  protected cookieStatus: CookieStatus | null;\n\n  constructor(statusUrl: string, csrfHeaderName: string) {\n    this.statusUrl = statusUrl;\n    this.csrfHeaderName = csrfHeaderName;\n    this.cookieStatus = null;\n  }\n\n  async getCookieStatus(): Promise<CookieStatus> {\n    if (this.cookieStatus === null) {\n      const response = await window.fetch(\n        this.statusUrl,\n        {\n          method: 'GET',\n          credentials: 'same-origin',\n          headers: DEFAULT_FETCH_HEADERS,\n        }\n      );\n      this.cookieStatus = await response.json();\n    }\n\n    // type checker sanity check\n    if (this.cookieStatus === null) {\n      throw new Error('Unexpectedly received null cookie status');\n    }\n    return this.cookieStatus;\n  };\n\n  async saveCookiesStatusBackend (urlProperty: 'acceptUrl' | 'declineUrl') {\n    const cookieStatus = await this.getCookieStatus();\n    const url = cookieStatus[urlProperty];\n    if (!url) {\n      throw new Error(`Missing url for ${urlProperty} - was the cookie status not loaded properly?`);\n    }\n\n    await window.fetch(url, {\n      method: 'POST',\n      credentials: 'same-origin',\n      headers: {\n        ...DEFAULT_FETCH_HEADERS,\n        [this.csrfHeaderName]: cookieStatus.csrftoken\n      }\n    });\n  }\n}\n\n/**\n * Read the JSON script node contents and parse the content as JSON.\n *\n * The result is the list of available/configured cookie groups.\n * Use the status URL to get the accepted/declined status for an individual user.\n */\nexport const loadCookieGroups = (selector: string): CookieGroup[] => {\n  const node = document.querySelector<HTMLScriptElement>(selector);\n  if (!node) {\n    throw new Error(`No cookie groups (script) tag found, using selector: '${selector}'`);\n  }\n  return JSON.parse(node.innerText);\n};\n\nconst doInsertBefore = (beforeNode: HTMLElement, newNode: Node): void => {\n  const parent = beforeNode.parentNode;\n  if (parent === null) throw new Error('Reference node doesn\\'t have a parent.');\n  parent.insertBefore(newNode, beforeNode);\n}\n\ntype RegisterEventsOptions = Pick<\n  Options,\n  'acceptSelector' | 'onAccept' | 'declineSelector' | 'onDecline'\n> & Pick<\n  CookieStatus,\n  'acceptedCookieGroups' | 'declinedCookieGroups' | 'notAcceptedOrDeclinedCookieGroups'\n> & {\n  client: FetchClient,\n  cookieBarNode: Element;\n  cookieGroups: CookieGroup[];\n}\n\n/**\n * Register the accept/decline event handlers.\n *\n * Note that we can't just set the decline or accept cookie purely client-side, as the\n * cookie possibly has the httpOnly flag set.\n */\nconst registerEvents = ({\n  client,\n  cookieBarNode,\n  cookieGroups,\n  acceptSelector,\n  onAccept,\n  declineSelector,\n  onDecline,\n  acceptedCookieGroups: accepted,\n  declinedCookieGroups: declined,\n  notAcceptedOrDeclinedCookieGroups: undecided,\n}: RegisterEventsOptions): void => {\n\n  const acceptNode = cookieBarNode.querySelector<HTMLElement>(acceptSelector);\n  if (acceptNode) {\n    acceptNode.addEventListener('click', event => {\n      event.preventDefault();\n      const acceptedGroups = filterCookieGroups(cookieGroups, accepted.concat(undecided));\n      onAccept?.(acceptedGroups, event);\n      // trigger async action, but don't wait for completion\n      client.saveCookiesStatusBackend('acceptUrl');\n      cookieBarNode.parentNode!.removeChild(cookieBarNode);\n    });\n  }\n\n  const declineNode = cookieBarNode.querySelector<HTMLElement>(declineSelector);\n  if (declineNode) {\n    declineNode.addEventListener('click', event => {\n      event.preventDefault();\n      const declinedGroups = filterCookieGroups(cookieGroups, declined.concat(undecided));\n      onDecline?.(declinedGroups, event);\n      // trigger async action, but don't wait for completion\n      client.saveCookiesStatusBackend('declineUrl');\n      cookieBarNode.parentNode!.removeChild(cookieBarNode);\n    });\n  }\n};\n\n/**\n * Filter the cookie groups down to a subset of specified varnames.\n */\nconst filterCookieGroups = (cookieGroups: CookieGroup[], varNames: string[]) => {\n  return cookieGroups.filter(group => varNames.includes(group.varname));\n};\n\n// See https://github.com/microsoft/TypeScript/issues/283\nfunction cloneNode<T extends Node>(node: T) {\n  return <T>node.cloneNode(true);\n}\n\nexport const showCookieBar = async (options: Partial<Options> = {}): Promise<void> => {\n  const {\n    templateSelector = '#cookie-consent__cookie-bar',\n    cookieGroupsSelector = '#cookie-consent__cookie-groups',\n    acceptSelector = '.cookie-consent__accept',\n    declineSelector = '.cookie-consent__decline',\n    insertBefore = null,\n    onShow,\n    onAccept,\n    onDecline,\n    statusUrl = '',\n    csrfHeaderName = 'X-CSRFToken', // Django's default, can be overridden with settings.CSRF_HEADER_NAME\n  } = options;\n\n  const cookieGroups = loadCookieGroups(cookieGroupsSelector);\n\n  // no cookie groups -> abort, nothing to do\n  if (!cookieGroups.length) return;\n\n  const templateNode = document.querySelector<HTMLTemplateElement>(templateSelector);\n  if (!templateNode) {\n    throw new Error(`No (template) element found for selector '${templateSelector}'.`)\n  }\n\n  // insert before a given node, if specified, or append to the body as default behaviour\n  const doInsert = insertBefore === null\n    ? (cookieBarNode: Node) => document.querySelector('body')!.appendChild(cookieBarNode)\n    : typeof insertBefore === 'string'\n      ? (cookieBarNode: Node) => {\n        const referenceNode = document.querySelector<HTMLElement>(insertBefore);\n        if (referenceNode === null) throw new Error(`No element found for selector '${insertBefore}'.`)\n        doInsertBefore(referenceNode, cookieBarNode);\n      }\n      : (cookieBarNode: Node) => doInsertBefore(insertBefore, cookieBarNode)\n  ;\n\n  if (!statusUrl) throw new Error('Missing status URL option, did you forget to pass the `statusUrl` option?');\n\n  const client = new FetchClient(statusUrl, csrfHeaderName);\n  const cookieStatus = await client.getCookieStatus();\n\n  // calculate the cookie groups to invoke the callbacks. We deliberately fire those\n  // without awaiting so that our cookie bar is shown/hidden as soon as possible.\n  const {\n    acceptedCookieGroups,\n    declinedCookieGroups,\n    notAcceptedOrDeclinedCookieGroups\n  } = cookieStatus;\n\n  const acceptedGroups = filterCookieGroups(cookieGroups, acceptedCookieGroups);\n  if (acceptedGroups.length) onAccept?.(acceptedGroups);\n  const declinedGroups = filterCookieGroups(cookieGroups, declinedCookieGroups);\n  if (declinedGroups.length) onDecline?.(declinedGroups);\n\n  // there are no (more) cookie groups to accept, don't show the bar\n  if (!notAcceptedOrDeclinedCookieGroups.length) return;\n\n  // grab the contents from the template node and add them to the DOM, optionally\n  // calling the onShow callback\n  const childToClone = templateNode.content.firstElementChild;\n  if (childToClone === null) throw new Error('The cookie bar template element may not be empty.');\n  const cookieBarNode = cloneNode(childToClone);\n  registerEvents({\n    client,\n    cookieBarNode,\n    cookieGroups,\n    acceptSelector,\n    onAccept,\n    declineSelector,\n    onDecline,\n    acceptedCookieGroups,\n    declinedCookieGroups,\n    notAcceptedOrDeclinedCookieGroups,\n  });\n  onShow?.();\n  doInsert(cookieBarNode);\n};\n"],
-  "mappings": ";AA2GA,IAAM,wBAAgD;AAAA,EACpD,0BAA0B;AAC5B;AAEA,IAAM,cAAN,MAAkB;AAAA,EAKhB,YAAY,WAAmB,gBAAwB;AACrD,SAAK,YAAY;AACjB,SAAK,iBAAiB;AACtB,SAAK,eAAe;AAAA,EACtB;AAAA,EAEA,MAAM,kBAAyC;AAC7C,QAAI,KAAK,iBAAiB,MAAM;AAC9B,YAAM,WAAW,MAAM,OAAO;AAAA,QAC5B,KAAK;AAAA,QACL;AAAA,UACE,QAAQ;AAAA,UACR,aAAa;AAAA,UACb,SAAS;AAAA,QACX;AAAA,MACF;AACA,WAAK,eAAe,MAAM,SAAS,KAAK;AAAA,IAC1C;AAGA,QAAI,KAAK,iBAAiB,MAAM;AAC9B,YAAM,IAAI,MAAM,0CAA0C;AAAA,IAC5D;AACA,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,MAAM,yBAA0B,aAAyC;AACvE,UAAM,eAAe,MAAM,KAAK,gBAAgB;AAChD,UAAM,MAAM,aAAa,WAAW;AACpC,QAAI,CAAC,KAAK;AACR,YAAM,IAAI,MAAM,mBAAmB,WAAW,+CAA+C;AAAA,IAC/F;AAEA,UAAM,OAAO,MAAM,KAAK;AAAA,MACtB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,QACP,GAAG;AAAA,QACH,CAAC,KAAK,cAAc,GAAG,aAAa;AAAA,MACtC;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAQO,IAAM,mBAAmB,CAAC,aAAoC;AACnE,QAAM,OAAO,SAAS,cAAiC,QAAQ;AAC/D,MAAI,CAAC,MAAM;AACT,UAAM,IAAI,MAAM,yDAAyD,QAAQ,GAAG;AAAA,EACtF;AACA,SAAO,KAAK,MAAM,KAAK,SAAS;AAClC;AAEA,IAAM,iBAAiB,CAAC,YAAyB,YAAwB;AACvE,QAAM,SAAS,WAAW;AAC1B,MAAI,WAAW;AAAM,UAAM,IAAI,MAAM,uCAAwC;AAC7E,SAAO,aAAa,SAAS,UAAU;AACzC;AAoBA,IAAM,iBAAiB,CAAC;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB,mCAAmC;AACrC,MAAmC;AAEjC,QAAM,aAAa,cAAc,cAA2B,cAAc;AAC1E,MAAI,YAAY;AACd,eAAW,iBAAiB,SAAS,WAAS;AAC5C,YAAM,eAAe;AACrB,YAAM,iBAAiB,mBAAmB,cAAc,SAAS,OAAO,SAAS,CAAC;AAClF,2CAAW,gBAAgB;AAE3B,aAAO,yBAAyB,WAAW;AAC3C,oBAAc,WAAY,YAAY,aAAa;AAAA,IACrD,CAAC;AAAA,EACH;AAEA,QAAM,cAAc,cAAc,cAA2B,eAAe;AAC5E,MAAI,aAAa;AACf,gBAAY,iBAAiB,SAAS,WAAS;AAC7C,YAAM,eAAe;AACrB,YAAM,iBAAiB,mBAAmB,cAAc,SAAS,OAAO,SAAS,CAAC;AAClF,6CAAY,gBAAgB;AAE5B,aAAO,yBAAyB,YAAY;AAC5C,oBAAc,WAAY,YAAY,aAAa;AAAA,IACrD,CAAC;AAAA,EACH;AACF;AAKA,IAAM,qBAAqB,CAAC,cAA6B,aAAuB;AAC9E,SAAO,aAAa,OAAO,WAAS,SAAS,SAAS,MAAM,OAAO,CAAC;AACtE;AAGA,SAAS,UAA0B,MAAS;AAC1C,SAAU,KAAK,UAAU,IAAI;AAC/B;AAEO,IAAM,gBAAgB,OAAO,UAA4B,CAAC,MAAqB;AACpF,QAAM;AAAA,IACJ,mBAAmB;AAAA,IACnB,uBAAuB;AAAA,IACvB,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,iBAAiB;AAAA;AAAA,EACnB,IAAI;AAEJ,QAAM,eAAe,iBAAiB,oBAAoB;AAG1D,MAAI,CAAC,aAAa;AAAQ;AAE1B,QAAM,eAAe,SAAS,cAAmC,gBAAgB;AACjF,MAAI,CAAC,cAAc;AACjB,UAAM,IAAI,MAAM,6CAA6C,gBAAgB,IAAI;AAAA,EACnF;AAGA,QAAM,WAAW,iBAAiB,OAC9B,CAACA,mBAAwB,SAAS,cAAc,MAAM,EAAG,YAAYA,cAAa,IAClF,OAAO,iBAAiB,WACtB,CAACA,mBAAwB;AACzB,UAAM,gBAAgB,SAAS,cAA2B,YAAY;AACtE,QAAI,kBAAkB;AAAM,YAAM,IAAI,MAAM,kCAAkC,YAAY,IAAI;AAC9F,mBAAe,eAAeA,cAAa;AAAA,EAC7C,IACE,CAACA,mBAAwB,eAAe,cAAcA,cAAa;AAGzE,MAAI,CAAC;AAAW,UAAM,IAAI,MAAM,2EAA2E;AAE3G,QAAM,SAAS,IAAI,YAAY,WAAW,cAAc;AACxD,QAAM,eAAe,MAAM,OAAO,gBAAgB;AAIlD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,iBAAiB,mBAAmB,cAAc,oBAAoB;AAC5E,MAAI,eAAe;AAAQ,yCAAW;AACtC,QAAM,iBAAiB,mBAAmB,cAAc,oBAAoB;AAC5E,MAAI,eAAe;AAAQ,2CAAY;AAGvC,MAAI,CAAC,kCAAkC;AAAQ;AAI/C,QAAM,eAAe,aAAa,QAAQ;AAC1C,MAAI,iBAAiB;AAAM,UAAM,IAAI,MAAM,mDAAmD;AAC9F,QAAM,gBAAgB,UAAU,YAAY;AAC5C,iBAAe;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD;AACA,WAAS,aAAa;AACxB;",
+  "sourcesContent": ["/**\n * Cookiebar functionality, as a TS/JS module.\n *\n * About modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules\n *\n * The code is organized here in a way to make the templates work with Django's page\n * cache. This means that anything user-specific (so different django session and even\n * cookie consent cookies) cannot be baked into the templates, as that breaks caches.\n *\n * The cookie bar operates on the following principles:\n *\n * - The developer using the library includes the desired template in their django\n *   templates, using the HTML <template> element. This contains the content for the\n *   cookie bar.\n * - The developer is responsible for loading some Javascript that loads this script.\n * - The main export of this script needs to be called (showCookieBar), with the\n *   appropriate options.\n * - The options include the backend URLs where the retrieve data, which selectors/DOM\n *   nodes to use for various functionality and the hooks to tap into the accept/decline\n *   life-cycle.\n * - When a user accepts or declines (all) cookies, the call to the backend is made via\n *   a fetch request, bypassing any page caches and preventing full-page reloads.\n */\n\n/**\n * A serialized cookie group.\n *\n * See the backend model method `CookieGroup.as_json()`.\n */\nexport interface CookieGroup {\n  varname: string;\n  name: string;\n  description: string;\n  is_required: boolean;\n}\n\nexport interface Options {\n  statusUrl: string;\n  // TODO: also accept element rather than selector?\n  templateSelector: string;\n  /**\n   * DOM selector to the (script) tag holding the JSON-serialized cookie groups.\n   *\n   * This is typically rendered in a template with a template tag, e.g.\n   *\n   * ```django\n   * {% all_cookie_groups 'cookie-consent__cookie-groups' %}\n   * ```\n   *\n   * resulting in the selector: `'#cookie-consent__cookie-groups'`.\n   */\n  cookieGroupsSelector: string;\n  acceptSelector: string;\n  declineSelector: string;\n  /**\n   * Either a string (selector), DOMNode or null.\n   *\n   * If null, the bar is appended to the body. If provided, the node is used or looked\n   * up.\n   */\n  insertBefore: string | HTMLElement | null;\n  /**\n   * Optional callback for when the cookie bar is being shown.\n   *\n   * You can use this to add a CSS class name to the body, for example.\n   */\n  onShow?: () => void;\n  /**\n   * Optional callback called when cookies are accepted.\n   */\n  onAccept?: (acceptedGroups: CookieGroup[], event?: MouseEvent) => void;\n  /**\n   * Optional callback called when cookies are accepted.\n   */\n  onDecline?: (declinedGroups: CookieGroup[], event?: MouseEvent) => void;\n  /**\n   * Name of the header to use for the CSRF token.\n   *\n   * If needed, this can be read/set via `settings.CSRF_HEADER_NAME` in the backend.\n   */\n  csrfHeaderName: string;\n};\n\nexport interface CookieStatus {\n  csrftoken: string;\n  /**\n   * Backend endpoint to POST to to accept the cookie groups.\n   */\n  acceptUrl: string;\n  /**\n   * Backend endpoint to POST to to decline the cookie groups.\n   */\n  declineUrl: string;\n  /**\n   * Array of accepted cookie group varnames.\n   */\n  acceptedCookieGroups: string[];\n  /**\n   * Array of declined cookie group varnames.\n   */\n  declinedCookieGroups: string[];\n  /**\n   * Array of undecided cookie group varnames.\n   */\n  notAcceptedOrDeclinedCookieGroups: string[];\n}\n\nconst DEFAULT_FETCH_HEADERS: Record<string, string> = {\n  'X-Cookie-Consent-Fetch': '1'\n};\n\nclass FetchClient {\n  protected statusUrl: string;\n  protected csrfHeaderName: string;\n  protected cookieStatus: CookieStatus | null;\n\n  constructor(statusUrl: string, csrfHeaderName: string) {\n    this.statusUrl = statusUrl;\n    this.csrfHeaderName = csrfHeaderName;\n    this.cookieStatus = null;\n  }\n\n  async getCookieStatus(): Promise<CookieStatus> {\n    if (this.cookieStatus === null) {\n      const response = await window.fetch(\n        this.statusUrl,\n        {\n          method: 'GET',\n          credentials: 'same-origin',\n          headers: DEFAULT_FETCH_HEADERS,\n        }\n      );\n      this.cookieStatus = await response.json();\n    }\n\n    // type checker sanity check\n    if (this.cookieStatus === null) {\n      throw new Error('Unexpectedly received null cookie status');\n    }\n    return this.cookieStatus;\n  };\n\n  async saveCookiesStatusBackend (urlProperty: 'acceptUrl' | 'declineUrl') {\n    const cookieStatus = await this.getCookieStatus();\n    const url = cookieStatus[urlProperty];\n    if (!url) {\n      throw new Error(`Missing url for ${urlProperty} - was the cookie status not loaded properly?`);\n    }\n\n    await window.fetch(url, {\n      method: 'POST',\n      credentials: 'same-origin',\n      headers: {\n        ...DEFAULT_FETCH_HEADERS,\n        [this.csrfHeaderName]: cookieStatus.csrftoken\n      }\n    });\n  }\n}\n\n/**\n * Read the JSON script node contents and parse the content as JSON.\n *\n * The result is the list of available/configured cookie groups.\n * Use the status URL to get the accepted/declined status for an individual user.\n */\nexport const loadCookieGroups = (selector: string): CookieGroup[] => {\n  const node = document.querySelector<HTMLScriptElement>(selector);\n  if (!node) {\n    throw new Error(`No cookie groups (script) tag found, using selector: '${selector}'`);\n  }\n  return JSON.parse(node.innerText);\n};\n\nconst doInsertBefore = (beforeNode: HTMLElement, newNode: Node): void => {\n  const parent = beforeNode.parentNode;\n  if (parent === null) throw new Error('Reference node doesn\\'t have a parent.');\n  parent.insertBefore(newNode, beforeNode);\n}\n\ntype RegisterEventsOptions = Pick<\n  Options,\n  'acceptSelector' | 'onAccept' | 'declineSelector' | 'onDecline'\n> & Pick<\n  CookieStatus,\n  'acceptedCookieGroups' | 'declinedCookieGroups' | 'notAcceptedOrDeclinedCookieGroups'\n> & {\n  client: FetchClient,\n  cookieBarNode: Element;\n  cookieGroups: CookieGroup[];\n}\n\n/**\n * Register the accept/decline event handlers.\n *\n * Note that we can't just set the decline or accept cookie purely client-side, as the\n * cookie possibly has the httpOnly flag set.\n */\nconst registerEvents = ({\n  client,\n  cookieBarNode,\n  cookieGroups,\n  acceptSelector,\n  onAccept,\n  declineSelector,\n  onDecline,\n  acceptedCookieGroups: accepted,\n  declinedCookieGroups: declined,\n  notAcceptedOrDeclinedCookieGroups: undecided,\n}: RegisterEventsOptions): void => {\n\n  const acceptNode = cookieBarNode.querySelector<HTMLElement>(acceptSelector);\n  if (acceptNode) {\n    acceptNode.addEventListener('click', event => {\n      event.preventDefault();\n      const acceptedGroups = filterCookieGroups(cookieGroups, accepted.concat(undecided));\n      onAccept?.(acceptedGroups, event);\n      // trigger async action, but don't wait for completion\n      client.saveCookiesStatusBackend('acceptUrl');\n      cookieBarNode.parentNode!.removeChild(cookieBarNode);\n    });\n  }\n\n  const declineNode = cookieBarNode.querySelector<HTMLElement>(declineSelector);\n  if (declineNode) {\n    declineNode.addEventListener('click', event => {\n      event.preventDefault();\n      const declinedGroups = filterCookieGroups(cookieGroups, declined.concat(undecided));\n      onDecline?.(declinedGroups, event);\n      // trigger async action, but don't wait for completion\n      client.saveCookiesStatusBackend('declineUrl');\n      cookieBarNode.parentNode!.removeChild(cookieBarNode);\n    });\n  }\n};\n\n/**\n * Filter the cookie groups down to a subset of specified varnames.\n */\nconst filterCookieGroups = (cookieGroups: CookieGroup[], varNames: string[]) => {\n  return cookieGroups.filter(group => varNames.includes(group.varname));\n};\n\n// See https://github.com/microsoft/TypeScript/issues/283\nfunction cloneNode<T extends Node>(node: T) {\n  return <T>node.cloneNode(true);\n}\n\nexport const showCookieBar = async (options: Partial<Options> = {}): Promise<void> => {\n  const {\n    templateSelector = '#cookie-consent__cookie-bar',\n    cookieGroupsSelector = '#cookie-consent__cookie-groups',\n    acceptSelector = '.cookie-consent__accept',\n    declineSelector = '.cookie-consent__decline',\n    insertBefore = null,\n    onShow,\n    onAccept,\n    onDecline,\n    statusUrl = '',\n    csrfHeaderName = 'X-CSRFToken', // Django's default, can be overridden with settings.CSRF_HEADER_NAME\n  } = options;\n\n  const cookieGroups = loadCookieGroups(cookieGroupsSelector);\n\n  // no cookie groups -> abort, nothing to do\n  if (!cookieGroups.length) return;\n\n  const templateNode = document.querySelector<HTMLTemplateElement>(templateSelector);\n  if (!templateNode) {\n    throw new Error(`No (template) element found for selector '${templateSelector}'.`)\n  }\n\n  // insert before a given node, if specified, or append to the body as default behaviour\n  const doInsert = insertBefore === null\n    ? (cookieBarNode: Node) => document.querySelector('body')!.appendChild(cookieBarNode)\n    : typeof insertBefore === 'string'\n      ? (cookieBarNode: Node) => {\n        const referenceNode = document.querySelector<HTMLElement>(insertBefore);\n        if (referenceNode === null) throw new Error(`No element found for selector '${insertBefore}'.`)\n        doInsertBefore(referenceNode, cookieBarNode);\n      }\n      : (cookieBarNode: Node) => doInsertBefore(insertBefore, cookieBarNode)\n  ;\n\n  if (!statusUrl) throw new Error('Missing status URL option, did you forget to pass the `statusUrl` option?');\n\n  const client = new FetchClient(statusUrl, csrfHeaderName);\n  const cookieStatus = await client.getCookieStatus();\n\n  // calculate the cookie groups to invoke the callbacks. We deliberately fire those\n  // without awaiting so that our cookie bar is shown/hidden as soon as possible.\n  const {\n    acceptedCookieGroups,\n    declinedCookieGroups,\n    notAcceptedOrDeclinedCookieGroups\n  } = cookieStatus;\n\n  const acceptedGroups = filterCookieGroups(cookieGroups, acceptedCookieGroups);\n  if (acceptedGroups.length) onAccept?.(acceptedGroups);\n  const declinedGroups = filterCookieGroups(cookieGroups, declinedCookieGroups);\n  if (declinedGroups.length) onDecline?.(declinedGroups);\n\n  // there are no (more) cookie groups to accept, don't show the bar\n  if (!notAcceptedOrDeclinedCookieGroups.length) return;\n\n  // grab the contents from the template node and add them to the DOM, optionally\n  // calling the onShow callback\n  const childToClone = templateNode.content.firstElementChild;\n  if (childToClone === null) throw new Error('The cookie bar template element may not be empty.');\n  const cookieBarNode = cloneNode(childToClone);\n  registerEvents({\n    client,\n    cookieBarNode,\n    cookieGroups,\n    acceptSelector,\n    onAccept,\n    declineSelector,\n    onDecline,\n    acceptedCookieGroups,\n    declinedCookieGroups,\n    notAcceptedOrDeclinedCookieGroups,\n  });\n  doInsert(cookieBarNode);\n  onShow?.();\n};\n"],
+  "mappings": "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",
   "names": ["cookieBarNode"]
 }
diff --git a/js/src/cookiebar.ts b/js/src/cookiebar.ts
index 2f99382..f61fdb0 100644
--- a/js/src/cookiebar.ts
+++ b/js/src/cookiebar.ts
@@ -320,6 +320,6 @@ export const showCookieBar = async (options: Partial<Options> = {}): Promise<voi
     declinedCookieGroups,
     notAcceptedOrDeclinedCookieGroups,
   });
-  onShow?.();
   doInsert(cookieBarNode);
+  onShow?.();
 };

From 9a3b2a957783beb4d12adbca8ffc6f201d65ce76 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 2 May 2024 22:28:29 +0200
Subject: [PATCH 06/12] :package: Build JS assets in CI and gitignore them

The npm 'package' and the django staticfiles assets are exclusively
to be built in the CI pipeline, and not kept in version control.

This keeps a single source of truth and prevents us from forgetting to
update the artifacts, at the cost of a little extra step for local
development.
---
 .github/actions/build-js/action.yml           |  43 +++++
 .github/workflows/ci.yml                      |  19 +-
 .github/workflows/release.yml                 |   5 +
 .gitignore                                    |   3 +-
 CONTRIBUTING.rst                              |  12 ++
 .../static/cookie_consent/cookiebar.module.js | 163 ------------------
 .../cookie_consent/cookiebar.module.js.map    |   7 -
 7 files changed, 70 insertions(+), 182 deletions(-)
 create mode 100644 .github/actions/build-js/action.yml
 delete mode 100644 cookie_consent/static/cookie_consent/cookiebar.module.js
 delete mode 100644 cookie_consent/static/cookie_consent/cookiebar.module.js.map

diff --git a/.github/actions/build-js/action.yml b/.github/actions/build-js/action.yml
new file mode 100644
index 0000000..ef916d2
--- /dev/null
+++ b/.github/actions/build-js/action.yml
@@ -0,0 +1,43 @@
+---
+
+name: 'Build JS'
+description: 'Compile the TS source code'
+
+inputs:
+  npm-package:
+    description: Build NPM package
+    required: false
+    default: 'false'
+
+  django-staticfiles:
+    description: Bundle Django staticfiles
+    required: false
+    default: 'false'
+
+runs:
+  using: 'composite'
+
+  steps:
+
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: 'js/.nvmrc'
+        cache: npm
+        cache-dependency-path: js/package-lock.json
+
+    - name: Install dependencies
+      run: npm ci
+      shell: bash
+      working-directory: js
+
+    - name: Build NPM package
+      if: ${{ inputs.npm-package == 'true' }}
+      run: npm run build
+      shell: bash
+      working-directory: js
+
+    - name: Build Django assets package
+      if: ${{ inputs.django-staticfiles == 'true' }}
+      run: npm run build:django-static
+      shell: bash
+      working-directory: js
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 0b555d9..7b4ad9f 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -17,18 +17,10 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: ./.github/actions/build-js
         with:
-          node-version-file: 'js/.nvmrc'
-          cache: npm
-          cache-dependency-path: js/package-lock.json
-
-      - name: Build TS
-        run: |
-          npm ci
-          npm run build
-          npm run build:django-static
-        working-directory: js
+          npm-package: 'true'
+          django-staticfiles: 'false'
 
   tests:
     runs-on: ubuntu-latest
@@ -73,6 +65,11 @@ jobs:
         with:
           python-version: '3.10'
 
+      - uses: ./.github/actions/build-js
+        with:
+          npm-package: 'false'
+          django-staticfiles: 'true'
+
       - name: Install dependencies
         run: |
           pip install tox tox-gh-actions pytest-playwright
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index cb25d2c..4c82528 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -26,6 +26,11 @@ jobs:
           python -m pip install -U pip
           python -m pip install -U setuptools twine wheel
 
+      - uses: ./.github/actions/build-js
+        with:
+          npm-package: 'true'
+          django-staticfiles: 'true'
+
       - name: Build package
         run: |
           python setup.py --version
diff --git a/.gitignore b/.gitignore
index 4456f0c..a46d039 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,5 +24,6 @@ reports/
 testapp/*.db
 
 # frontend tooling / builds
-js/lib/
 js/node_modules/
+js/lib/
+cookie_consent/static/cookie_consent/cookiebar.module.*
diff --git a/CONTRIBUTING.rst b/CONTRIBUTING.rst
index 3a63f46..4b9ae16 100644
--- a/CONTRIBUTING.rst
+++ b/CONTRIBUTING.rst
@@ -46,6 +46,18 @@ You can then install the project with all the dev-tools:
 
    pip install -e .[tests,pep8,coverage,docs,release]
 
+Some frontend tooling is needed to:
+
+* NodeJS (for the version, see ``.nvmrc``, you can use ``nvm``)
+
+.. code-block:: bash
+
+    cd js
+    nvm use
+    npm install
+    npm run build:django-static
+    npm run build  # optional, but a nice check
+
 **Running the testapp as dev environment**
 
 In Django project's, you are typically expecting a ``manage.py`` file. This is less
diff --git a/cookie_consent/static/cookie_consent/cookiebar.module.js b/cookie_consent/static/cookie_consent/cookiebar.module.js
deleted file mode 100644
index 3e81eb2..0000000
--- a/cookie_consent/static/cookie_consent/cookiebar.module.js
+++ /dev/null
@@ -1,163 +0,0 @@
-// src/cookiebar.ts
-var DEFAULT_FETCH_HEADERS = {
-  "X-Cookie-Consent-Fetch": "1"
-};
-var FetchClient = class {
-  constructor(statusUrl, csrfHeaderName) {
-    this.statusUrl = statusUrl;
-    this.csrfHeaderName = csrfHeaderName;
-    this.cookieStatus = null;
-  }
-  async getCookieStatus() {
-    if (this.cookieStatus === null) {
-      const response = await window.fetch(
-        this.statusUrl,
-        {
-          method: "GET",
-          credentials: "same-origin",
-          headers: DEFAULT_FETCH_HEADERS
-        }
-      );
-      this.cookieStatus = await response.json();
-    }
-    if (this.cookieStatus === null) {
-      throw new Error("Unexpectedly received null cookie status");
-    }
-    return this.cookieStatus;
-  }
-  async saveCookiesStatusBackend(urlProperty) {
-    const cookieStatus = await this.getCookieStatus();
-    const url = cookieStatus[urlProperty];
-    if (!url) {
-      throw new Error(`Missing url for ${urlProperty} - was the cookie status not loaded properly?`);
-    }
-    await window.fetch(url, {
-      method: "POST",
-      credentials: "same-origin",
-      headers: {
-        ...DEFAULT_FETCH_HEADERS,
-        [this.csrfHeaderName]: cookieStatus.csrftoken
-      }
-    });
-  }
-};
-var loadCookieGroups = (selector) => {
-  const node = document.querySelector(selector);
-  if (!node) {
-    throw new Error(`No cookie groups (script) tag found, using selector: '${selector}'`);
-  }
-  return JSON.parse(node.innerText);
-};
-var doInsertBefore = (beforeNode, newNode) => {
-  const parent = beforeNode.parentNode;
-  if (parent === null)
-    throw new Error("Reference node doesn't have a parent.");
-  parent.insertBefore(newNode, beforeNode);
-};
-var registerEvents = ({
-  client,
-  cookieBarNode,
-  cookieGroups,
-  acceptSelector,
-  onAccept,
-  declineSelector,
-  onDecline,
-  acceptedCookieGroups: accepted,
-  declinedCookieGroups: declined,
-  notAcceptedOrDeclinedCookieGroups: undecided
-}) => {
-  const acceptNode = cookieBarNode.querySelector(acceptSelector);
-  if (acceptNode) {
-    acceptNode.addEventListener("click", (event) => {
-      event.preventDefault();
-      const acceptedGroups = filterCookieGroups(cookieGroups, accepted.concat(undecided));
-      onAccept == null ? void 0 : onAccept(acceptedGroups, event);
-      client.saveCookiesStatusBackend("acceptUrl");
-      cookieBarNode.parentNode.removeChild(cookieBarNode);
-    });
-  }
-  const declineNode = cookieBarNode.querySelector(declineSelector);
-  if (declineNode) {
-    declineNode.addEventListener("click", (event) => {
-      event.preventDefault();
-      const declinedGroups = filterCookieGroups(cookieGroups, declined.concat(undecided));
-      onDecline == null ? void 0 : onDecline(declinedGroups, event);
-      client.saveCookiesStatusBackend("declineUrl");
-      cookieBarNode.parentNode.removeChild(cookieBarNode);
-    });
-  }
-};
-var filterCookieGroups = (cookieGroups, varNames) => {
-  return cookieGroups.filter((group) => varNames.includes(group.varname));
-};
-function cloneNode(node) {
-  return node.cloneNode(true);
-}
-var showCookieBar = async (options = {}) => {
-  const {
-    templateSelector = "#cookie-consent__cookie-bar",
-    cookieGroupsSelector = "#cookie-consent__cookie-groups",
-    acceptSelector = ".cookie-consent__accept",
-    declineSelector = ".cookie-consent__decline",
-    insertBefore = null,
-    onShow,
-    onAccept,
-    onDecline,
-    statusUrl = "",
-    csrfHeaderName = "X-CSRFToken"
-    // Django's default, can be overridden with settings.CSRF_HEADER_NAME
-  } = options;
-  const cookieGroups = loadCookieGroups(cookieGroupsSelector);
-  if (!cookieGroups.length)
-    return;
-  const templateNode = document.querySelector(templateSelector);
-  if (!templateNode) {
-    throw new Error(`No (template) element found for selector '${templateSelector}'.`);
-  }
-  const doInsert = insertBefore === null ? (cookieBarNode2) => document.querySelector("body").appendChild(cookieBarNode2) : typeof insertBefore === "string" ? (cookieBarNode2) => {
-    const referenceNode = document.querySelector(insertBefore);
-    if (referenceNode === null)
-      throw new Error(`No element found for selector '${insertBefore}'.`);
-    doInsertBefore(referenceNode, cookieBarNode2);
-  } : (cookieBarNode2) => doInsertBefore(insertBefore, cookieBarNode2);
-  if (!statusUrl)
-    throw new Error("Missing status URL option, did you forget to pass the `statusUrl` option?");
-  const client = new FetchClient(statusUrl, csrfHeaderName);
-  const cookieStatus = await client.getCookieStatus();
-  const {
-    acceptedCookieGroups,
-    declinedCookieGroups,
-    notAcceptedOrDeclinedCookieGroups
-  } = cookieStatus;
-  const acceptedGroups = filterCookieGroups(cookieGroups, acceptedCookieGroups);
-  if (acceptedGroups.length)
-    onAccept == null ? void 0 : onAccept(acceptedGroups);
-  const declinedGroups = filterCookieGroups(cookieGroups, declinedCookieGroups);
-  if (declinedGroups.length)
-    onDecline == null ? void 0 : onDecline(declinedGroups);
-  if (!notAcceptedOrDeclinedCookieGroups.length)
-    return;
-  const childToClone = templateNode.content.firstElementChild;
-  if (childToClone === null)
-    throw new Error("The cookie bar template element may not be empty.");
-  const cookieBarNode = cloneNode(childToClone);
-  registerEvents({
-    client,
-    cookieBarNode,
-    cookieGroups,
-    acceptSelector,
-    onAccept,
-    declineSelector,
-    onDecline,
-    acceptedCookieGroups,
-    declinedCookieGroups,
-    notAcceptedOrDeclinedCookieGroups
-  });
-  doInsert(cookieBarNode);
-  onShow == null ? void 0 : onShow();
-};
-export {
-  loadCookieGroups,
-  showCookieBar
-};
-//# sourceMappingURL=cookiebar.module.js.map
diff --git a/cookie_consent/static/cookie_consent/cookiebar.module.js.map b/cookie_consent/static/cookie_consent/cookiebar.module.js.map
deleted file mode 100644
index 89c12be..0000000
--- a/cookie_consent/static/cookie_consent/cookiebar.module.js.map
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../js/src/cookiebar.ts"],
-  "sourcesContent": ["/**\n * Cookiebar functionality, as a TS/JS module.\n *\n * About modules: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules\n *\n * The code is organized here in a way to make the templates work with Django's page\n * cache. This means that anything user-specific (so different django session and even\n * cookie consent cookies) cannot be baked into the templates, as that breaks caches.\n *\n * The cookie bar operates on the following principles:\n *\n * - The developer using the library includes the desired template in their django\n *   templates, using the HTML <template> element. This contains the content for the\n *   cookie bar.\n * - The developer is responsible for loading some Javascript that loads this script.\n * - The main export of this script needs to be called (showCookieBar), with the\n *   appropriate options.\n * - The options include the backend URLs where the retrieve data, which selectors/DOM\n *   nodes to use for various functionality and the hooks to tap into the accept/decline\n *   life-cycle.\n * - When a user accepts or declines (all) cookies, the call to the backend is made via\n *   a fetch request, bypassing any page caches and preventing full-page reloads.\n */\n\n/**\n * A serialized cookie group.\n *\n * See the backend model method `CookieGroup.as_json()`.\n */\nexport interface CookieGroup {\n  varname: string;\n  name: string;\n  description: string;\n  is_required: boolean;\n}\n\nexport interface Options {\n  statusUrl: string;\n  // TODO: also accept element rather than selector?\n  templateSelector: string;\n  /**\n   * DOM selector to the (script) tag holding the JSON-serialized cookie groups.\n   *\n   * This is typically rendered in a template with a template tag, e.g.\n   *\n   * ```django\n   * {% all_cookie_groups 'cookie-consent__cookie-groups' %}\n   * ```\n   *\n   * resulting in the selector: `'#cookie-consent__cookie-groups'`.\n   */\n  cookieGroupsSelector: string;\n  acceptSelector: string;\n  declineSelector: string;\n  /**\n   * Either a string (selector), DOMNode or null.\n   *\n   * If null, the bar is appended to the body. If provided, the node is used or looked\n   * up.\n   */\n  insertBefore: string | HTMLElement | null;\n  /**\n   * Optional callback for when the cookie bar is being shown.\n   *\n   * You can use this to add a CSS class name to the body, for example.\n   */\n  onShow?: () => void;\n  /**\n   * Optional callback called when cookies are accepted.\n   */\n  onAccept?: (acceptedGroups: CookieGroup[], event?: MouseEvent) => void;\n  /**\n   * Optional callback called when cookies are accepted.\n   */\n  onDecline?: (declinedGroups: CookieGroup[], event?: MouseEvent) => void;\n  /**\n   * Name of the header to use for the CSRF token.\n   *\n   * If needed, this can be read/set via `settings.CSRF_HEADER_NAME` in the backend.\n   */\n  csrfHeaderName: string;\n};\n\nexport interface CookieStatus {\n  csrftoken: string;\n  /**\n   * Backend endpoint to POST to to accept the cookie groups.\n   */\n  acceptUrl: string;\n  /**\n   * Backend endpoint to POST to to decline the cookie groups.\n   */\n  declineUrl: string;\n  /**\n   * Array of accepted cookie group varnames.\n   */\n  acceptedCookieGroups: string[];\n  /**\n   * Array of declined cookie group varnames.\n   */\n  declinedCookieGroups: string[];\n  /**\n   * Array of undecided cookie group varnames.\n   */\n  notAcceptedOrDeclinedCookieGroups: string[];\n}\n\nconst DEFAULT_FETCH_HEADERS: Record<string, string> = {\n  'X-Cookie-Consent-Fetch': '1'\n};\n\nclass FetchClient {\n  protected statusUrl: string;\n  protected csrfHeaderName: string;\n  protected cookieStatus: CookieStatus | null;\n\n  constructor(statusUrl: string, csrfHeaderName: string) {\n    this.statusUrl = statusUrl;\n    this.csrfHeaderName = csrfHeaderName;\n    this.cookieStatus = null;\n  }\n\n  async getCookieStatus(): Promise<CookieStatus> {\n    if (this.cookieStatus === null) {\n      const response = await window.fetch(\n        this.statusUrl,\n        {\n          method: 'GET',\n          credentials: 'same-origin',\n          headers: DEFAULT_FETCH_HEADERS,\n        }\n      );\n      this.cookieStatus = await response.json();\n    }\n\n    // type checker sanity check\n    if (this.cookieStatus === null) {\n      throw new Error('Unexpectedly received null cookie status');\n    }\n    return this.cookieStatus;\n  };\n\n  async saveCookiesStatusBackend (urlProperty: 'acceptUrl' | 'declineUrl') {\n    const cookieStatus = await this.getCookieStatus();\n    const url = cookieStatus[urlProperty];\n    if (!url) {\n      throw new Error(`Missing url for ${urlProperty} - was the cookie status not loaded properly?`);\n    }\n\n    await window.fetch(url, {\n      method: 'POST',\n      credentials: 'same-origin',\n      headers: {\n        ...DEFAULT_FETCH_HEADERS,\n        [this.csrfHeaderName]: cookieStatus.csrftoken\n      }\n    });\n  }\n}\n\n/**\n * Read the JSON script node contents and parse the content as JSON.\n *\n * The result is the list of available/configured cookie groups.\n * Use the status URL to get the accepted/declined status for an individual user.\n */\nexport const loadCookieGroups = (selector: string): CookieGroup[] => {\n  const node = document.querySelector<HTMLScriptElement>(selector);\n  if (!node) {\n    throw new Error(`No cookie groups (script) tag found, using selector: '${selector}'`);\n  }\n  return JSON.parse(node.innerText);\n};\n\nconst doInsertBefore = (beforeNode: HTMLElement, newNode: Node): void => {\n  const parent = beforeNode.parentNode;\n  if (parent === null) throw new Error('Reference node doesn\\'t have a parent.');\n  parent.insertBefore(newNode, beforeNode);\n}\n\ntype RegisterEventsOptions = Pick<\n  Options,\n  'acceptSelector' | 'onAccept' | 'declineSelector' | 'onDecline'\n> & Pick<\n  CookieStatus,\n  'acceptedCookieGroups' | 'declinedCookieGroups' | 'notAcceptedOrDeclinedCookieGroups'\n> & {\n  client: FetchClient,\n  cookieBarNode: Element;\n  cookieGroups: CookieGroup[];\n}\n\n/**\n * Register the accept/decline event handlers.\n *\n * Note that we can't just set the decline or accept cookie purely client-side, as the\n * cookie possibly has the httpOnly flag set.\n */\nconst registerEvents = ({\n  client,\n  cookieBarNode,\n  cookieGroups,\n  acceptSelector,\n  onAccept,\n  declineSelector,\n  onDecline,\n  acceptedCookieGroups: accepted,\n  declinedCookieGroups: declined,\n  notAcceptedOrDeclinedCookieGroups: undecided,\n}: RegisterEventsOptions): void => {\n\n  const acceptNode = cookieBarNode.querySelector<HTMLElement>(acceptSelector);\n  if (acceptNode) {\n    acceptNode.addEventListener('click', event => {\n      event.preventDefault();\n      const acceptedGroups = filterCookieGroups(cookieGroups, accepted.concat(undecided));\n      onAccept?.(acceptedGroups, event);\n      // trigger async action, but don't wait for completion\n      client.saveCookiesStatusBackend('acceptUrl');\n      cookieBarNode.parentNode!.removeChild(cookieBarNode);\n    });\n  }\n\n  const declineNode = cookieBarNode.querySelector<HTMLElement>(declineSelector);\n  if (declineNode) {\n    declineNode.addEventListener('click', event => {\n      event.preventDefault();\n      const declinedGroups = filterCookieGroups(cookieGroups, declined.concat(undecided));\n      onDecline?.(declinedGroups, event);\n      // trigger async action, but don't wait for completion\n      client.saveCookiesStatusBackend('declineUrl');\n      cookieBarNode.parentNode!.removeChild(cookieBarNode);\n    });\n  }\n};\n\n/**\n * Filter the cookie groups down to a subset of specified varnames.\n */\nconst filterCookieGroups = (cookieGroups: CookieGroup[], varNames: string[]) => {\n  return cookieGroups.filter(group => varNames.includes(group.varname));\n};\n\n// See https://github.com/microsoft/TypeScript/issues/283\nfunction cloneNode<T extends Node>(node: T) {\n  return <T>node.cloneNode(true);\n}\n\nexport const showCookieBar = async (options: Partial<Options> = {}): Promise<void> => {\n  const {\n    templateSelector = '#cookie-consent__cookie-bar',\n    cookieGroupsSelector = '#cookie-consent__cookie-groups',\n    acceptSelector = '.cookie-consent__accept',\n    declineSelector = '.cookie-consent__decline',\n    insertBefore = null,\n    onShow,\n    onAccept,\n    onDecline,\n    statusUrl = '',\n    csrfHeaderName = 'X-CSRFToken', // Django's default, can be overridden with settings.CSRF_HEADER_NAME\n  } = options;\n\n  const cookieGroups = loadCookieGroups(cookieGroupsSelector);\n\n  // no cookie groups -> abort, nothing to do\n  if (!cookieGroups.length) return;\n\n  const templateNode = document.querySelector<HTMLTemplateElement>(templateSelector);\n  if (!templateNode) {\n    throw new Error(`No (template) element found for selector '${templateSelector}'.`)\n  }\n\n  // insert before a given node, if specified, or append to the body as default behaviour\n  const doInsert = insertBefore === null\n    ? (cookieBarNode: Node) => document.querySelector('body')!.appendChild(cookieBarNode)\n    : typeof insertBefore === 'string'\n      ? (cookieBarNode: Node) => {\n        const referenceNode = document.querySelector<HTMLElement>(insertBefore);\n        if (referenceNode === null) throw new Error(`No element found for selector '${insertBefore}'.`)\n        doInsertBefore(referenceNode, cookieBarNode);\n      }\n      : (cookieBarNode: Node) => doInsertBefore(insertBefore, cookieBarNode)\n  ;\n\n  if (!statusUrl) throw new Error('Missing status URL option, did you forget to pass the `statusUrl` option?');\n\n  const client = new FetchClient(statusUrl, csrfHeaderName);\n  const cookieStatus = await client.getCookieStatus();\n\n  // calculate the cookie groups to invoke the callbacks. We deliberately fire those\n  // without awaiting so that our cookie bar is shown/hidden as soon as possible.\n  const {\n    acceptedCookieGroups,\n    declinedCookieGroups,\n    notAcceptedOrDeclinedCookieGroups\n  } = cookieStatus;\n\n  const acceptedGroups = filterCookieGroups(cookieGroups, acceptedCookieGroups);\n  if (acceptedGroups.length) onAccept?.(acceptedGroups);\n  const declinedGroups = filterCookieGroups(cookieGroups, declinedCookieGroups);\n  if (declinedGroups.length) onDecline?.(declinedGroups);\n\n  // there are no (more) cookie groups to accept, don't show the bar\n  if (!notAcceptedOrDeclinedCookieGroups.length) return;\n\n  // grab the contents from the template node and add them to the DOM, optionally\n  // calling the onShow callback\n  const childToClone = templateNode.content.firstElementChild;\n  if (childToClone === null) throw new Error('The cookie bar template element may not be empty.');\n  const cookieBarNode = cloneNode(childToClone);\n  registerEvents({\n    client,\n    cookieBarNode,\n    cookieGroups,\n    acceptSelector,\n    onAccept,\n    declineSelector,\n    onDecline,\n    acceptedCookieGroups,\n    declinedCookieGroups,\n    notAcceptedOrDeclinedCookieGroups,\n  });\n  doInsert(cookieBarNode);\n  onShow?.();\n};\n"],
-  "mappings": "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",
-  "names": ["cookieBarNode"]
-}

From cbcc42229db98645ce9811e4b4a259f42d85fd66 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 2 May 2024 22:46:33 +0200
Subject: [PATCH 07/12] :pencil: Add README for npm package

---
 js/README.md | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 js/README.md

diff --git a/js/README.md b/js/README.md
new file mode 100644
index 0000000..2fcc2f9
--- /dev/null
+++ b/js/README.md
@@ -0,0 +1,47 @@
+# django-cookie-consent
+
+Package containing the JS code for django-cookie-consent.
+
+The cookiebar module is shipped in the Python package itself and available through
+django's staticfiles mechanism. This package is aimed at users wishing to include the
+assets in their own Javascript bundle through webpack/vite/...
+
+## Installation
+
+```bash
+npm install django-cookie-consent
+```
+
+You can now import the public API in your own bundle:
+
+```ts
+import {showCookieBar} from '@jazzband/django-cookie-consent';
+````
+
+## TypeScript and ESM
+
+The source code is written in TypeScript. The type declarations are shipped in the
+published package.
+
+We only publish ES modules and do not offer CommonJS.
+
+## Building
+
+Use ``nvm`` or your tool of choice to select the right NodeJS version:
+
+```bash
+nvm use
+```
+
+Building the NPM package:
+
+```bash
+npm run build
+```
+
+Lastly, the frontend toolchain also builds the cookiebar module bundle that's included
+in the Python package:
+
+```bash
+npm run build:django-static
+```

From 3839ea4ee4017241fcae88cc28b18a692adf243a Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 2 May 2024 22:48:05 +0200
Subject: [PATCH 08/12] :pencil: Update release instructions

Ensure that the frontend package version is also bumped.
---
 CONTRIBUTING.rst | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/CONTRIBUTING.rst b/CONTRIBUTING.rst
index 4b9ae16..63846fb 100644
--- a/CONTRIBUTING.rst
+++ b/CONTRIBUTING.rst
@@ -139,6 +139,11 @@ After updating changelogs etc.
 .. code-block:: bash
 
     tbump {new-version} --only-patch
+    cd js
+    npm version major|minor|patch --no-git-tag-version
+    cd ..
+
     git commit -am ":bookmark: Bump to version <X.Y.Z>"
+
     git tag -s X.Y.Z
     git push origin master --tags

From dc7c71605780c06964615f04ce3de95e7736c4ea Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 2 May 2024 23:01:22 +0200
Subject: [PATCH 09/12] :construction_worker: Publish npm package with github
 actions

---
 .github/actions/build-js/action.yml |  3 +++
 .github/workflows/release.yml       | 16 ++++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/.github/actions/build-js/action.yml b/.github/actions/build-js/action.yml
index ef916d2..9761bb8 100644
--- a/.github/actions/build-js/action.yml
+++ b/.github/actions/build-js/action.yml
@@ -24,6 +24,9 @@ runs:
         node-version-file: 'js/.nvmrc'
         cache: npm
         cache-dependency-path: js/package-lock.json
+        # Blocked by https://github.com/jazzband/django-cookie-consent/issues/120
+        # registry-url: 'https://registry.npmjs.org'
+        # scope: '@jazzband'
 
     - name: Install dependencies
       run: npm ci
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 4c82528..1fa8cfe 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -7,10 +7,14 @@ on:
 
 jobs:
   build:
-    name: Publish package to Jazzband private PyPI
+    name: Publish packages
     runs-on: ubuntu-latest
     if: github.repository == 'jazzband/django-cookie-consent'
 
+    permissions:
+      contents: read
+      packages: write
+
     steps:
       - uses: actions/checkout@v3
         with:
@@ -37,10 +41,18 @@ jobs:
           python setup.py sdist --format=gztar bdist_wheel
           twine check dist/*
 
-      - name: Upload packages to Jazzband
+      - name: Upload packages to Jazzband private PyPI
         if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags')
         uses: pypa/gh-action-pypi-publish@release/v1
         with:
           user: jazzband
           password: ${{ secrets.JAZZBAND_RELEASE_KEY }}
           repository_url: https://jazzband.co/projects/django-cookie-consent/upload
+
+      # Blocked on https://github.com/jazzband/django-cookie-consent/issues/120
+      # - name: Publish NPM package to Github
+      #   if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags')
+      #   run: npm publish
+      #   working-directory: js
+      #   env:
+      #     NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From 5d993d2c18be58cbda8c933c603eb4c744dfbe0b Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 2 May 2024 23:42:46 +0200
Subject: [PATCH 10/12] :bug: Add missing extension to import/export statements

A package with type: module requires extensions in the imports to
fully resolve them (tested with Webpack 5). We can simply use the .js
extension even in .ts files, tsc understands it (even though this looks
really weird).
---
 js/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/src/index.ts b/js/src/index.ts
index 06263d4..0b26cc6 100644
--- a/js/src/index.ts
+++ b/js/src/index.ts
@@ -1 +1 @@
-export {loadCookieGroups, showCookieBar} from './cookiebar';
+export {loadCookieGroups, showCookieBar} from './cookiebar.js';

From d0deb0782285535292c476e6fcb26156646521fe Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 2 May 2024 23:50:01 +0200
Subject: [PATCH 11/12] :pencil: Update Javascript docs to mention NPM package

---
 docs/javascript.rst | 14 ++++++++++++--
 js/README.md        |  5 +++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/docs/javascript.rst b/docs/javascript.rst
index 1f83361..fa24729 100644
--- a/docs/javascript.rst
+++ b/docs/javascript.rst
@@ -105,8 +105,18 @@ The ``status_url`` is special - it points to a backend view which returns the
 user-specific cookie consent status, returning the appropriate accept and decline URLs
 and other details relevant to cookie consent.
 
-You can of course also import this function in your own Javascript entrypoint (if you
-use Babel/Webpack or similar tooling) and initialize the cookie bar that way.
+.. note::
+
+    If you prefer the include the cookiebar module in your own Javascript entrypoint,
+    the easiest way is to install our `published package`_.
+
+    This package should work with TypeScript, Webpack, ESBuild, Vite... and other popular
+    bundlers and toolchains.
+
+    Just be careful to install the same (minor) version as the backend package to avoid
+    weird bugs.
+
+.. _published package: hhttps://www.npmjs.com/package/django-cookie-consent
 
 Options
 =======
diff --git a/js/README.md b/js/README.md
index 2fcc2f9..d2e301d 100644
--- a/js/README.md
+++ b/js/README.md
@@ -2,6 +2,8 @@
 
 Package containing the JS code for django-cookie-consent.
 
+[![Jazzband][badge:jazzband]][jazzband]
+
 The cookiebar module is shipped in the Python package itself and available through
 django's staticfiles mechanism. This package is aimed at users wishing to include the
 assets in their own Javascript bundle through webpack/vite/...
@@ -45,3 +47,6 @@ in the Python package:
 ```bash
 npm run build:django-static
 ```
+
+[jazzband]: https://jazzband.co/
+[badge:jazzband]: https://jazzband.co/static/img/badge.svg

From 0191b88950253d4185e65b44e4ece910a8aac7f4 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 9 May 2024 12:58:06 +0200
Subject: [PATCH 12/12] :bookmark: Bump version to 0.6.0 beta 0

The code is different from 0.5.0 beta 0, and the next release will
be 0.6.0.
---
 js/package-lock.json | 4 ++--
 js/package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/js/package-lock.json b/js/package-lock.json
index 0b7b2fe..58bb39a 100644
--- a/js/package-lock.json
+++ b/js/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "django-cookie-consent",
-  "version": "0.5.0-beta0",
+  "version": "0.6.0-beta0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "django-cookie-consent",
-      "version": "0.5.0-beta0",
+      "version": "0.6.0-beta0",
       "license": "BSD-2-Clause",
       "devDependencies": {
         "esbuild": "^0.20.2",
diff --git a/js/package.json b/js/package.json
index d12f7cd..1db695a 100644
--- a/js/package.json
+++ b/js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "django-cookie-consent",
-  "version": "0.5.0-beta0",
+  "version": "0.6.0-beta0",
   "description": "Frontend code for django-cookie-consent",
   "main": "lib/index.js",
   "type": "module",