From 3a307fae22b720863174d01ebbf566ba6d361284 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 2 May 2024 10:57:07 +0200
Subject: [PATCH] :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 faef969..5ff9ee8 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 bfd059a..04eed80 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"
   }
 }