fix(frontend) :: import the browser libraries and types

Before Tabler, ApexCharts and Tom Select were pulled from CDN so their code nor their types could be imported into our frontend code. This is no longer a blocker as the frontend is bundled with npm.

Now 3rd party code and types are imported directly in SQLPage's frontend.

Author: 81reap

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Frontend asset urls are now idempotent between builds if nothing changed in the frontend. Now browsers will only re-download frontend assets when there has been a code change in them.
 - `cargo install sqlpage` or any build from the crates.io tarball only needs Rust and no longer needs internet access. Pre-built binaries and the Docker image are unaffected.
 - The browser assets are now bundled as a whole, so SQLPage's own scripts are minified along with their dependencies and are no longer readable in browser devtools.
+- SQLPage no longer exposes `window.ApexCharts`, `window.TomSelect` and `window.tabler` as globals. ApexCharts still reads its `window.Apex` global configuration, and a page that loads its own Bootstrap into `window.bootstrap` still overrides the bundled one.
 
 ## v0.46.2
 

frontend/src/apexcharts.js

@@ -1,3 +1,4 @@
+import ApexCharts from "apexcharts";
 import { align_series_for, xaxis_type_for } from "./chart_series.js";
 import { add_init_fn } from "./init.js";
 
@@ -295,7 +296,10 @@ function build_sqlpage_chart(c) {
   // Numeric axes count intervals; category and time axes use tickAmount as a
   // target for label density.
   if (data.xticks) options.xaxis.tickAmount = data.xticks;
-  const chart = new ApexCharts(chartContainer, options);
+  const chart = new ApexCharts(
+    chartContainer,
+    /** @type {import("apexcharts").ApexOptions} */ (options),
+  );
   chart.render();
   if (window.charts) window.charts.push(chart);
   else window.charts = [chart];

frontend/src/globals.d.ts

@@ -1,6 +1,6 @@
 // Names the browser bundle relies on at runtime rather than through an import:
-// libraries build.rs inlines ahead of our own code, libraries loaded on demand,
-// and the objects SQLPage's scripts hang off the window for each other.
+// libraries loaded on demand, and the objects SQLPage's scripts hang off the
+// window for each other.
 
 /**
  * A library this project ships no type definitions for. Saying `unknown`
@@ -12,24 +12,9 @@ type Untyped = any;
 /** Leaflet, loaded from a CDN by sqlpage_map when a page holds a map. */
 declare const L: Untyped;
 
-/** ApexCharts, inlined ahead of apexcharts.js by build.rs. */
-declare const ApexCharts: Untyped;
-
-/** Tom Select, inlined ahead of tomselect.js by build.rs. */
-declare const TomSelect: Untyped;
-
-/**
- * Tabler's bundled Bootstrap, inlined ahead of sqlpage.js by build.rs. Its
- * widgets are untyped: naming a few of them here would only claim more than
- * this file knows.
- */
-interface TablerBootstrap {
-  [widget: string]: Untyped;
-}
-
 interface Window {
   /** Every chart rendered on the page, in the order they were built. */
   charts?: unknown[];
-  tabler: { bootstrap: TablerBootstrap };
-  bootstrap?: TablerBootstrap;
+  /** A Bootstrap the page loaded itself, used in place of the bundled one. */
+  bootstrap?: typeof import("@tabler/core").bootstrap;
 }

frontend/src/sqlpage.js

@@ -1,5 +1,14 @@
+import { bootstrap as bundled_bootstrap } from "@tabler/core";
 import { add_init_fn } from "./init.js";
 
+const page_bootstrap = () => window.bootstrap ?? bundled_bootstrap;
+
+/**
+ * Tabler declares getOrCreateInstance on the base class, which drops show().
+ * @typedef {InstanceType<typeof bundled_bootstrap.Toast>} ToastWidget
+ * @typedef {InstanceType<typeof bundled_bootstrap.Modal>} ModalWidget
+ */
+
 const nonce = /** @type {HTMLScriptElement} */ (document.currentScript).nonce;
 
 function sqlpage_card() {
@@ -359,13 +368,12 @@ function normalize_hash(hash) {
 }
 
 function open_toasts_for_hash(toasts) {
-  const Toast = (window.bootstrap || window.tabler?.bootstrap)?.Toast;
-  if (!Toast) return;
+  const Toast = page_bootstrap().Toast;
   const hash = normalize_hash(window.location.hash);
   if (!hash) return;
   for (const toast of toasts) {
     if (normalize_hash(toast.dataset.toastTrigger) === hash) {
-      Toast.getOrCreateInstance(toast).show();
+      /** @type {ToastWidget} */ (Toast.getOrCreateInstance(toast)).show();
     }
   }
 }
@@ -386,8 +394,7 @@ function restore_focus_after_toast(toast, container) {
 }
 
 function sqlpage_toast() {
-  const Toast = (window.bootstrap || window.tabler?.bootstrap)?.Toast;
-  if (!Toast) return;
+  const Toast = page_bootstrap().Toast;
 
   const initialized_toasts = [];
   /** @type {NodeListOf<HTMLElement>} */
@@ -411,7 +418,9 @@ function sqlpage_toast() {
     }
 
     toast.removeAttribute("data-pre-init");
-    const instance = Toast.getOrCreateInstance(toast);
+    const instance = /** @type {ToastWidget} */ (
+      Toast.getOrCreateInstance(toast)
+    );
     initialized_toasts.push(toast);
     toast.addEventListener("hidden.bs.toast", () => {
       restore_focus_after_toast(toast, container);
@@ -463,7 +472,7 @@ window.addEventListener("hashchange", () =>
 );
 
 function init_bootstrap_components(event) {
-  const bootstrap = window.bootstrap || window.tabler.bootstrap;
+  const bootstrap = page_bootstrap();
   const fragment = event.target;
   for (const el of fragment.querySelectorAll('[data-bs-toggle="tooltip"]')) {
     new bootstrap.Tooltip(el);
@@ -486,8 +495,9 @@ function open_modal_for_hash() {
   if (!hash) return;
   const modal = document.getElementById(hash);
   if (!modal?.classList.contains("modal")) return;
-  const bootstrap_modal =
-    window.tabler.bootstrap.Modal.getOrCreateInstance(modal);
+  const bootstrap_modal = /** @type {ModalWidget} */ (
+    page_bootstrap().Modal.getOrCreateInstance(modal)
+  );
   bootstrap_modal.show();
   modal.addEventListener(
     "hidden.bs.modal",

frontend/src/tomselect.js

@@ -1,3 +1,4 @@
+import TomSelect from "tom-select/popular";
 import { add_init_fn } from "./init.js";
 
 function sqlpage_select_dropdown() {
@@ -27,8 +28,8 @@ function sqlpage_select_dropdown_individual(s) {
     load: sqlpage_load_options_source(s.dataset.options_source),
     valueField: "value",
     labelField: "label",
-    searchField: "label",
-    create: s.dataset.create_new,
+    searchField: ["label"],
+    create: !!s.dataset.create_new,
     maxOptions: null,
     closeAfterSelect: !s.multiple,
     clearAfterSelect: true,

tests/end-to-end/globals.d.ts

@@ -1,5 +1,5 @@
 // What the browser tests reach for on the page: widgets that the scripts under
-// test attach to elements at runtime, and libraries the page loads itself.
+// test attach to elements at runtime.
 
 interface TomSelectInstance {
   getValue(): string | string[];
@@ -13,10 +13,3 @@ interface HTMLElement {
   /** Attached by sqlpage_select_dropdown to every select it takes over. */
   tomselect?: TomSelectInstance;
 }
-
-interface Window {
-  /** Tabler's bundled Bootstrap, inlined ahead of sqlpage.js by build.rs. */
-  tabler?: {
-    bootstrap: { Toast: { getInstance(element: Element): unknown } };
-  };
-}

tests/end-to-end/official-site.spec.ts

@@ -220,17 +220,8 @@ test("toast notifications initialize, stack, dismiss, and render safely", async
   await expect(stackOne).toBeVisible();
   await expect(automatic).toBeHidden({ timeout: 7000 });
   expect(
-    await automaticHandle?.evaluate((element) => {
-      const testWindow = window as Window & {
-        tabler: {
-          bootstrap: {
-            Toast: { getInstance(element: Element): unknown };
-          };
-        };
-      };
-      return testWindow.tabler.bootstrap.Toast.getInstance(element) === null;
-    }),
-  ).toBe(true);
+    await automaticHandle?.evaluate((element) => element.isConnected),
+  ).toBe(false);
 
   const dismissible = page.locator("#toast-dismissible");
   await expect(dismissible).toHaveAttribute("data-bs-delay", "0");