@prairielearn/browser-utils 1.1.13 → 2.0.0

package/.turbo/turbo-build.log

@@ -1,10 +0,0 @@
-CLI Building entry: src/index.ts
-CLI Using tsconfig: tsconfig.json
-CLI tsup v8.0.2
-CLI Target: es2022
-CJS Build start
-ESM Build start
-CJS dist/index.js 4.22 KB
-CJS ⚡️ Build success in 132ms
-ESM dist/index.mjs 2.95 KB
-ESM ⚡️ Build success in 132ms

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @prairielearn/browser-utils
 
+## 2.0.0
+
+### Major Changes
+
+- 4f30b7e: Publish as native ESM
+
+### Patch Changes
+
+- Updated dependencies [4f30b7e]
+  - @prairielearn/html@4.0.0
+
+## 1.1.14
+
+### Patch Changes
+
+- Updated dependencies [c7e6553]
+  - @prairielearn/html@3.1.7
+
 ## 1.1.13
 
 ### Patch Changes

package/README.md

@@ -90,7 +90,3 @@ document.querySelectorAll('.js-delete-course').forEach((el) => {
   });
 });
 ```
-
-## Development
-
-Unlike most other `@prairielearn` packages, this one is built with [`tsup`](https://tsup.egoist.dev/), which is used to generate both CJS and ESM output. The latter is important for ensuring that tree-shaking works correctly when building client bundles, which is important for minimizing bundle sizes.

package/dist/encode-data.js

@@ -0,0 +1,31 @@
+import { encode, decode } from 'js-base64';
+import { html, unsafeHtml } from '@prairielearn/html';
+/**
+ * Use this function as an HTML component encode data that will be passed to the client.
+ *
+ * @param data The data to encode.
+ * @param elementId The element ID to use for the encoded data.
+ *
+ */
+export function EncodedData(data, elementId) {
+    const encodedData = unsafeHtml(encode(JSON.stringify(data)));
+    return html `<script id="${elementId}" type="application/base64">
+    ${encodedData}
+  </script>`;
+}
+/**
+ * Decode data that was passed to the client from in HTML component using EncodeData().
+ *
+ * @param elementId The element ID that stores the encoded data, from from EncodedData().
+ * @returns The decoded data.
+ */
+export function decodeData(elementId) {
+    const base64Data = document.getElementById(elementId)?.textContent;
+    if (base64Data == null) {
+        throw new Error(`No data found in element with ID "${elementId}"`);
+    }
+    const jsonData = decode(base64Data);
+    const data = JSON.parse(jsonData);
+    return data;
+}
+//# sourceMappingURL=encode-data.js.map

package/dist/encode-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"encode-data.js","sourceRoot":"","sources":["../src/encode-data.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,oBAAoB,CAAC;AAEtE;;;;;;GAMG;AACH,MAAM,UAAU,WAAW,CAAc,IAAO,EAAE,SAAiB;IACjE,MAAM,WAAW,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC7D,OAAO,IAAI,CAAA,eAAe,SAAS;MAC/B,WAAW;YACL,CAAC;AACb,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAU,SAAiB;IACnD,MAAM,UAAU,GAAG,QAAQ,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,WAAW,CAAC;IACnE,IAAI,UAAU,IAAI,IAAI,EAAE,CAAC;QACvB,MAAM,IAAI,KAAK,CAAC,qCAAqC,SAAS,GAAG,CAAC,CAAC;IACrE,CAAC;IACD,MAAM,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IACpC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAClC,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["import { encode, decode } from 'js-base64';\nimport { html, unsafeHtml, HtmlSafeString } from '@prairielearn/html';\n\n/**\n * Use this function as an HTML component encode data that will be passed to the client.\n *\n * @param data The data to encode.\n * @param elementId The element ID to use for the encoded data.\n *\n */\nexport function EncodedData<T = unknown>(data: T, elementId: string): HtmlSafeString {\n  const encodedData = unsafeHtml(encode(JSON.stringify(data)));\n  return html`<script id=\"${elementId}\" type=\"application/base64\">\n    ${encodedData}\n  </script>`;\n}\n\n/**\n * Decode data that was passed to the client from in HTML component using EncodeData().\n *\n * @param elementId The element ID that stores the encoded data, from from EncodedData().\n * @returns The decoded data.\n */\nexport function decodeData<T = any>(elementId: string): T {\n  const base64Data = document.getElementById(elementId)?.textContent;\n  if (base64Data == null) {\n    throw new Error(`No data found in element with ID \"${elementId}\"`);\n  }\n  const jsonData = decode(base64Data);\n  const data = JSON.parse(jsonData);\n  return data;\n}\n"]}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { onDocumentReady } from './on-document-ready';
-export { parseHTML, parseHTMLElement } from './parse-html';
-export { EncodedData, decodeData } from './encode-data';
-export { templateFromAttributes } from './template-from-attributes';
+export { onDocumentReady } from './on-document-ready.js';
+export { parseHTML, parseHTMLElement } from './parse-html.js';
+export { EncodedData, decodeData } from './encode-data.js';
+export { templateFromAttributes } from './template-from-attributes.js';

package/dist/index.js

@@ -1,122 +1,5 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  EncodedData: () => EncodedData,
-  decodeData: () => decodeData,
-  onDocumentReady: () => onDocumentReady,
-  parseHTML: () => parseHTML,
-  parseHTMLElement: () => parseHTMLElement,
-  templateFromAttributes: () => templateFromAttributes
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/on-document-ready.ts
-function onDocumentReady(fn) {
-  if (document.readyState === "interactive" || document.readyState === "complete") {
-    fn();
-  } else {
-    document.addEventListener("DOMContentLoaded", () => {
-      fn();
-    });
-  }
-}
-
-// src/parse-html.ts
-function parseHTML(document2, html2) {
-  if (typeof html2 !== "string")
-    html2 = html2.toString();
-  const template = document2.createElement("template");
-  template.innerHTML = html2;
-  return document2.importNode(template.content, true);
-}
-function parseHTMLElement(document2, html2) {
-  const documentFragment = parseHTML(document2, html2);
-  if (documentFragment.childElementCount !== 1) {
-    throw new Error("Expected HTML to contain exactly one element");
-  }
-  return documentFragment.firstElementChild;
-}
-
-// src/encode-data.ts
-var import_js_base64 = require("js-base64");
-var import_html = require("@prairielearn/html");
-function EncodedData(data, elementId) {
-  const encodedData = (0, import_html.unsafeHtml)((0, import_js_base64.encode)(JSON.stringify(data)));
-  return import_html.html`<script id="${elementId}" type="application/base64">
-    ${encodedData}
-  </script>`;
-}
-function decodeData(elementId) {
-  const base64Data = document.getElementById(elementId)?.textContent;
-  if (base64Data == null) {
-    throw new Error(`No data found in element with ID "${elementId}"`);
-  }
-  const jsonData = (0, import_js_base64.decode)(base64Data);
-  const data = JSON.parse(jsonData);
-  return data;
-}
-
-// src/template-from-attributes.ts
-function templateFromAttributes(source, target, attributes) {
-  Object.entries(attributes).forEach(([sourceAttribute, targetSelector]) => {
-    const attributeValue = source.getAttribute(sourceAttribute);
-    if (attributeValue == null) {
-      console.error(`Attribute "${sourceAttribute}" not found on source element`);
-      return;
-    }
-    const targets = target.querySelectorAll(targetSelector);
-    if (targets.length === 0) {
-      console.error(`No elements found matching selector "${targetSelector}"`);
-      return;
-    }
-    targets.forEach((targetElement) => {
-      if (targetElement instanceof HTMLInputElement) {
-        if (targetElement.type === "checkbox") {
-          const attributeParsed = JSON.parse(attributeValue);
-          targetElement.checked = !!attributeParsed;
-          targetElement.dispatchEvent(new Event("change", { bubbles: true }));
-        } else {
-          targetElement.value = attributeValue;
-        }
-      } else if (targetElement instanceof HTMLSelectElement) {
-        const i = Array.from(targetElement.options).findIndex((o) => o.value === attributeValue);
-        if (i >= 0) {
-          targetElement.selectedIndex = i;
-          targetElement.dispatchEvent(new Event("change", { bubbles: true }));
-        } else {
-          console.error(`Could not find option with value "${attributeValue}"`);
-        }
-      } else {
-        targetElement.textContent = attributeValue;
-      }
-    });
-  });
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  EncodedData,
-  decodeData,
-  onDocumentReady,
-  parseHTML,
-  parseHTMLElement,
-  templateFromAttributes
-});
+export { onDocumentReady } from './on-document-ready.js';
+export { parseHTML, parseHTMLElement } from './parse-html.js';
+export { EncodedData, decodeData } from './encode-data.js';
+export { templateFromAttributes } from './template-from-attributes.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC","sourcesContent":["export { onDocumentReady } from './on-document-ready.js';\nexport { parseHTML, parseHTMLElement } from './parse-html.js';\nexport { EncodedData, decodeData } from './encode-data.js';\nexport { templateFromAttributes } from './template-from-attributes.js';\n"]}

package/dist/on-document-ready.js

@@ -0,0 +1,11 @@
+export function onDocumentReady(fn) {
+    if (document.readyState === 'interactive' || document.readyState === 'complete') {
+        fn();
+    }
+    else {
+        document.addEventListener('DOMContentLoaded', () => {
+            fn();
+        });
+    }
+}
+//# sourceMappingURL=on-document-ready.js.map

package/dist/on-document-ready.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"on-document-ready.js","sourceRoot":"","sources":["../src/on-document-ready.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,eAAe,CAAC,EAAc;IAC5C,IAAI,QAAQ,CAAC,UAAU,KAAK,aAAa,IAAI,QAAQ,CAAC,UAAU,KAAK,UAAU,EAAE,CAAC;QAChF,EAAE,EAAE,CAAC;IACP,CAAC;SAAM,CAAC;QACN,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,EAAE;YACjD,EAAE,EAAE,CAAC;QACP,CAAC,CAAC,CAAC;IACL,CAAC;AACH,CAAC","sourcesContent":["export function onDocumentReady(fn: () => void): void {\n  if (document.readyState === 'interactive' || document.readyState === 'complete') {\n    fn();\n  } else {\n    document.addEventListener('DOMContentLoaded', () => {\n      fn();\n    });\n  }\n}\n"]}

package/dist/parse-html.js

@@ -0,0 +1,20 @@
+export function parseHTML(document, html) {
+    if (typeof html !== 'string')
+        html = html.toString();
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    return document.importNode(template.content, true);
+}
+/**
+ * Like {@link parseHTML}, but returns an {@link Element} instead of a
+ * {@link DocumentFragment}. If the HTML being parsed does not contain
+ * exactly one element, an error is thrown.
+ */
+export function parseHTMLElement(document, html) {
+    const documentFragment = parseHTML(document, html);
+    if (documentFragment.childElementCount !== 1) {
+        throw new Error('Expected HTML to contain exactly one element');
+    }
+    return documentFragment.firstElementChild;
+}
+//# sourceMappingURL=parse-html.js.map

package/dist/parse-html.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-html.js","sourceRoot":"","sources":["../src/parse-html.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,SAAS,CAAC,QAAkB,EAAE,IAA6B;IACzE,IAAI,OAAO,IAAI,KAAK,QAAQ;QAAE,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IACrD,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACpD,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAC;IAC1B,OAAO,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AACrD,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,gBAAgB,CAAC,QAAkB,EAAE,IAA6B;IAChF,MAAM,gBAAgB,GAAG,SAAS,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;IACnD,IAAI,gBAAgB,CAAC,iBAAiB,KAAK,CAAC,EAAE,CAAC;QAC7C,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAC;IAClE,CAAC;IACD,OAAO,gBAAgB,CAAC,iBAA4B,CAAC;AACvD,CAAC","sourcesContent":["import type { HtmlSafeString } from '@prairielearn/html';\n\nexport function parseHTML(document: Document, html: string | HtmlSafeString): DocumentFragment {\n  if (typeof html !== 'string') html = html.toString();\n  const template = document.createElement('template');\n  template.innerHTML = html;\n  return document.importNode(template.content, true);\n}\n\n/**\n * Like {@link parseHTML}, but returns an {@link Element} instead of a\n * {@link DocumentFragment}. If the HTML being parsed does not contain\n * exactly one element, an error is thrown.\n */\nexport function parseHTMLElement(document: Document, html: string | HtmlSafeString): Element {\n  const documentFragment = parseHTML(document, html);\n  if (documentFragment.childElementCount !== 1) {\n    throw new Error('Expected HTML to contain exactly one element');\n  }\n  return documentFragment.firstElementChild as Element;\n}\n"]}

package/dist/template-from-attributes.js

@@ -0,0 +1,59 @@
+/**
+ * For each key in `attributes`, copies that attribute's value from `source`
+ * into all elements within `target` that match the corresponding value in
+ * `attributes`.
+ *
+ * For `<input type="checkbox">` elements it interprets the attribute as JSON
+ * and uses the truthiness of it to set `checked`. For other `<input>` elements,
+ * it sets the `value` attribute. For all others, it sets the `textContent`
+ * attribute.
+ *
+ * @param source The element to copy attributes from
+ * @param target The element to copy attributes into
+ * @param attributes A map of attributes to copy from `source` to `target`
+ * @param param.debug If true, logs debug information to the console
+ */
+export function templateFromAttributes(source, target, attributes) {
+    Object.entries(attributes).forEach(([sourceAttribute, targetSelector]) => {
+        const attributeValue = source.getAttribute(sourceAttribute);
+        if (attributeValue == null) {
+            console.error(`Attribute "${sourceAttribute}" not found on source element`);
+            return;
+        }
+        const targets = target.querySelectorAll(targetSelector);
+        if (targets.length === 0) {
+            console.error(`No elements found matching selector "${targetSelector}"`);
+            return;
+        }
+        targets.forEach((targetElement) => {
+            if (targetElement instanceof HTMLInputElement) {
+                if (targetElement.type === 'checkbox') {
+                    const attributeParsed = JSON.parse(attributeValue);
+                    targetElement.checked = !!attributeParsed;
+                    // Manually trigger a 'change' event. This does not trigger
+                    // automatically when we change properties like 'checked'.
+                    targetElement.dispatchEvent(new Event('change', { bubbles: true }));
+                }
+                else {
+                    targetElement.value = attributeValue;
+                }
+            }
+            else if (targetElement instanceof HTMLSelectElement) {
+                const i = Array.from(targetElement.options).findIndex((o) => o.value === attributeValue);
+                if (i >= 0) {
+                    targetElement.selectedIndex = i;
+                    // Manually trigger a 'change' event. This does not trigger
+                    // automatically when we change properties like 'checked'.
+                    targetElement.dispatchEvent(new Event('change', { bubbles: true }));
+                }
+                else {
+                    console.error(`Could not find option with value "${attributeValue}"`);
+                }
+            }
+            else {
+                targetElement.textContent = attributeValue;
+            }
+        });
+    });
+}
+//# sourceMappingURL=template-from-attributes.js.map

package/dist/template-from-attributes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template-from-attributes.js","sourceRoot":"","sources":["../src/template-from-attributes.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,sBAAsB,CACpC,MAAmB,EACnB,MAAmB,EACnB,UAAwB;IAExB,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,EAAE,cAAc,CAAC,EAAE,EAAE;QACvE,MAAM,cAAc,GAAG,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC;QAC5D,IAAI,cAAc,IAAI,IAAI,EAAE,CAAC;YAC3B,OAAO,CAAC,KAAK,CAAC,cAAc,eAAe,+BAA+B,CAAC,CAAC;YAC5E,OAAO;QACT,CAAC;QAED,MAAM,OAAO,GAAG,MAAM,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;QACxD,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACzB,OAAO,CAAC,KAAK,CAAC,wCAAwC,cAAc,GAAG,CAAC,CAAC;YACzE,OAAO;QACT,CAAC;QAED,OAAO,CAAC,OAAO,CAAC,CAAC,aAAa,EAAE,EAAE;YAChC,IAAI,aAAa,YAAY,gBAAgB,EAAE,CAAC;gBAC9C,IAAI,aAAa,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;oBACtC,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;oBACnD,aAAa,CAAC,OAAO,GAAG,CAAC,CAAC,eAAe,CAAC;oBAC1C,2DAA2D;oBAC3D,0DAA0D;oBAC1D,aAAa,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;gBACtE,CAAC;qBAAM,CAAC;oBACN,aAAa,CAAC,KAAK,GAAG,cAAc,CAAC;gBACvC,CAAC;YACH,CAAC;iBAAM,IAAI,aAAa,YAAY,iBAAiB,EAAE,CAAC;gBACtD,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,cAAc,CAAC,CAAC;gBACzF,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;oBACX,aAAa,CAAC,aAAa,GAAG,CAAC,CAAC;oBAChC,2DAA2D;oBAC3D,0DAA0D;oBAC1D,aAAa,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;gBACtE,CAAC;qBAAM,CAAC;oBACN,OAAO,CAAC,KAAK,CAAC,qCAAqC,cAAc,GAAG,CAAC,CAAC;gBACxE,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,aAAa,CAAC,WAAW,GAAG,cAAc,CAAC;YAC7C,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC","sourcesContent":["type AttributeMap = Record<string, string>;\n\n/**\n * For each key in `attributes`, copies that attribute's value from `source`\n * into all elements within `target` that match the corresponding value in\n * `attributes`.\n *\n * For `<input type=\"checkbox\">` elements it interprets the attribute as JSON\n * and uses the truthiness of it to set `checked`. For other `<input>` elements,\n * it sets the `value` attribute. For all others, it sets the `textContent`\n * attribute.\n *\n * @param source The element to copy attributes from\n * @param target The element to copy attributes into\n * @param attributes A map of attributes to copy from `source` to `target`\n * @param param.debug If true, logs debug information to the console\n */\nexport function templateFromAttributes(\n  source: HTMLElement,\n  target: HTMLElement,\n  attributes: AttributeMap,\n) {\n  Object.entries(attributes).forEach(([sourceAttribute, targetSelector]) => {\n    const attributeValue = source.getAttribute(sourceAttribute);\n    if (attributeValue == null) {\n      console.error(`Attribute \"${sourceAttribute}\" not found on source element`);\n      return;\n    }\n\n    const targets = target.querySelectorAll(targetSelector);\n    if (targets.length === 0) {\n      console.error(`No elements found matching selector \"${targetSelector}\"`);\n      return;\n    }\n\n    targets.forEach((targetElement) => {\n      if (targetElement instanceof HTMLInputElement) {\n        if (targetElement.type === 'checkbox') {\n          const attributeParsed = JSON.parse(attributeValue);\n          targetElement.checked = !!attributeParsed;\n          // Manually trigger a 'change' event. This does not trigger\n          // automatically when we change properties like 'checked'.\n          targetElement.dispatchEvent(new Event('change', { bubbles: true }));\n        } else {\n          targetElement.value = attributeValue;\n        }\n      } else if (targetElement instanceof HTMLSelectElement) {\n        const i = Array.from(targetElement.options).findIndex((o) => o.value === attributeValue);\n        if (i >= 0) {\n          targetElement.selectedIndex = i;\n          // Manually trigger a 'change' event. This does not trigger\n          // automatically when we change properties like 'checked'.\n          targetElement.dispatchEvent(new Event('change', { bubbles: true }));\n        } else {\n          console.error(`Could not find option with value \"${attributeValue}\"`);\n        }\n      } else {\n        targetElement.textContent = attributeValue;\n      }\n    });\n  });\n}\n"]}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@prairielearn/browser-utils",
-  "version": "1.1.13",
+  "version": "2.0.0",
+  "type": "module",
   "main": "dist/index.js",
   "sideEffects": false,
   "repository": {
@@ -8,25 +9,16 @@
     "url": "https://github.com/PrairieLearn/PrairieLearn.git",
     "directory": "packages/browser-utils"
   },
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    }
-  },
   "scripts": {
-    "build": "tsc && tsup --format cjs,esm src/index.ts",
-    "dev": "tsup --watch src/index.ts"
+    "build": "tsc",
+    "dev": "tsc --watch --preserveWatchOutput"
   },
   "dependencies": {
-    "@prairielearn/html": "^3.1.6",
+    "@prairielearn/html": "^4.0.0",
     "js-base64": "^3.7.7"
   },
   "devDependencies": {
     "@prairielearn/tsconfig": "^0.0.0",
-    "tsup": "^8.0.2",
     "typescript": "^5.4.3"
   }
 }

package/src/index.ts

@@ -1,4 +1,4 @@
-export { onDocumentReady } from './on-document-ready';
-export { parseHTML, parseHTMLElement } from './parse-html';
-export { EncodedData, decodeData } from './encode-data';
-export { templateFromAttributes } from './template-from-attributes';
+export { onDocumentReady } from './on-document-ready.js';
+export { parseHTML, parseHTMLElement } from './parse-html.js';
+export { EncodedData, decodeData } from './encode-data.js';
+export { templateFromAttributes } from './template-from-attributes.js';

package/tsconfig.json

@@ -2,9 +2,6 @@
   "extends": "@prairielearn/tsconfig/tsconfig.package.json",
   "compilerOptions": {
     "outDir": "./dist",
-    "rootDir": "./src",
-    // Unlike other PrairieLearn packages, we use another tool to actually
-    // emit transpiled JavaScript. See note in `README.md`.
-    "emitDeclarationOnly": true
+    "rootDir": "./src"
   }
 }

package/dist/index.mjs

@@ -1,90 +0,0 @@
-// src/on-document-ready.ts
-function onDocumentReady(fn) {
-  if (document.readyState === "interactive" || document.readyState === "complete") {
-    fn();
-  } else {
-    document.addEventListener("DOMContentLoaded", () => {
-      fn();
-    });
-  }
-}
-
-// src/parse-html.ts
-function parseHTML(document2, html2) {
-  if (typeof html2 !== "string")
-    html2 = html2.toString();
-  const template = document2.createElement("template");
-  template.innerHTML = html2;
-  return document2.importNode(template.content, true);
-}
-function parseHTMLElement(document2, html2) {
-  const documentFragment = parseHTML(document2, html2);
-  if (documentFragment.childElementCount !== 1) {
-    throw new Error("Expected HTML to contain exactly one element");
-  }
-  return documentFragment.firstElementChild;
-}
-
-// src/encode-data.ts
-import { encode, decode } from "js-base64";
-import { html, unsafeHtml } from "@prairielearn/html";
-function EncodedData(data, elementId) {
-  const encodedData = unsafeHtml(encode(JSON.stringify(data)));
-  return html`<script id="${elementId}" type="application/base64">
-    ${encodedData}
-  </script>`;
-}
-function decodeData(elementId) {
-  const base64Data = document.getElementById(elementId)?.textContent;
-  if (base64Data == null) {
-    throw new Error(`No data found in element with ID "${elementId}"`);
-  }
-  const jsonData = decode(base64Data);
-  const data = JSON.parse(jsonData);
-  return data;
-}
-
-// src/template-from-attributes.ts
-function templateFromAttributes(source, target, attributes) {
-  Object.entries(attributes).forEach(([sourceAttribute, targetSelector]) => {
-    const attributeValue = source.getAttribute(sourceAttribute);
-    if (attributeValue == null) {
-      console.error(`Attribute "${sourceAttribute}" not found on source element`);
-      return;
-    }
-    const targets = target.querySelectorAll(targetSelector);
-    if (targets.length === 0) {
-      console.error(`No elements found matching selector "${targetSelector}"`);
-      return;
-    }
-    targets.forEach((targetElement) => {
-      if (targetElement instanceof HTMLInputElement) {
-        if (targetElement.type === "checkbox") {
-          const attributeParsed = JSON.parse(attributeValue);
-          targetElement.checked = !!attributeParsed;
-          targetElement.dispatchEvent(new Event("change", { bubbles: true }));
-        } else {
-          targetElement.value = attributeValue;
-        }
-      } else if (targetElement instanceof HTMLSelectElement) {
-        const i = Array.from(targetElement.options).findIndex((o) => o.value === attributeValue);
-        if (i >= 0) {
-          targetElement.selectedIndex = i;
-          targetElement.dispatchEvent(new Event("change", { bubbles: true }));
-        } else {
-          console.error(`Could not find option with value "${attributeValue}"`);
-        }
-      } else {
-        targetElement.textContent = attributeValue;
-      }
-    });
-  });
-}
-export {
-  EncodedData,
-  decodeData,
-  onDocumentReady,
-  parseHTML,
-  parseHTMLElement,
-  templateFromAttributes
-};