queria 0.0.0 → 0.1.0

package/dist/elements/index.js

@@ -0,0 +1,144 @@
+import { connect, parseDatasets } from "../client.js";
+import { attributionHtml } from "../render/attribution.js";
+import { renderChart } from "../render/chart.js";
+import { renderMap } from "../render/data-map.js";
+import { esc } from "../render/escape.js";
+import { poweredByHtml } from "../render/poweredBy.js";
+/**
+ * <queria-chart datasets="queria/e_stat" sql="..." spec='{"mark": "line", ...}'>
+ * Runs the SQL and draws the rows with the Vega-Lite spec, followed by the sources of the datasets.
+ * Instead of sql, `rows` takes the rows as JSON, for pages that run the SQL at build time. Declare the datasets the
+ * rows came from in `datasets` so their sources are shown.
+ * `api-url` replaces the Queria API, for example with a staging host.
+ */
+export class QueriaChart extends HTMLElement {
+    static observedAttributes = ["datasets", "sql", "spec", "rows", "api-url"];
+    #run = 0;
+    #pending = false;
+    #finalize = null;
+    connectedCallback() {
+        this.#schedule();
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.#schedule();
+    }
+    disconnectedCallback() {
+        this.#run++;
+        this.#clear();
+    }
+    /** Draw once per task: an upgrade calls attributeChangedCallback for every attribute, then connectedCallback. */
+    #schedule() {
+        if (this.#pending)
+            return;
+        this.#pending = true;
+        queueMicrotask(() => {
+            this.#pending = false;
+            if (this.isConnected)
+                this.#draw();
+        });
+    }
+    #clear() {
+        this.#finalize?.();
+        this.#finalize = null;
+    }
+    async #draw() {
+        const [datasets, sql, spec, rows] = ["datasets", "sql", "spec", "rows"].map((a) => this.getAttribute(a));
+        if (!spec || (!rows && !sql))
+            return;
+        const run = ++this.#run;
+        this.#clear();
+        this.innerHTML = '<p class="queria-note">Loading…</p>';
+        try {
+            const conn = connect({ datasets: parseDatasets(datasets ?? ""), apiUrl: this.getAttribute("api-url") ?? undefined });
+            // With rows, the page ran the SQL itself; show every declared dataset as a source.
+            const [data, sources] = await Promise.all([sql ? conn.sql(sql) : JSON.parse(rows ?? "[]"), conn.sources(sql ?? undefined)]);
+            if (run !== this.#run)
+                return;
+            this.innerHTML = `<div></div>${attributionHtml(sources)}`;
+            const { finalize } = await renderChart(this.firstElementChild, JSON.parse(spec), data);
+            if (run === this.#run)
+                this.#finalize = finalize;
+            else
+                finalize();
+        }
+        catch (e) {
+            if (run === this.#run)
+                this.innerHTML = `<p class="queria-note">${esc(String(e))}</p>`;
+        }
+    }
+}
+/**
+ * <queria-map datasets="queria/e_stat" sql="..." layer='{"area": "city", "code": "lg_code", "color": "population"}'>
+ * Runs the SQL and puts the rows on a map by area code or by lng/lat, followed by the sources of the datasets.
+ * `rows`, `api-url` work as on <queria-chart>. `theme` is light or dark; `map-style` takes another MapLibre style URL.
+ * Include maplibre-gl's CSS in the page. The map height is the CSS variable --queria-map-height (400px by default).
+ */
+export class QueriaMap extends HTMLElement {
+    static observedAttributes = ["datasets", "sql", "layer", "rows", "api-url", "theme", "map-style"];
+    #run = 0;
+    #pending = false;
+    #finalize = null;
+    connectedCallback() {
+        this.#schedule();
+    }
+    attributeChangedCallback() {
+        if (this.isConnected)
+            this.#schedule();
+    }
+    disconnectedCallback() {
+        this.#run++;
+        this.#clear();
+    }
+    #schedule() {
+        if (this.#pending)
+            return;
+        this.#pending = true;
+        queueMicrotask(() => {
+            this.#pending = false;
+            if (this.isConnected)
+                this.#draw();
+        });
+    }
+    #clear() {
+        this.#finalize?.();
+        this.#finalize = null;
+    }
+    async #draw() {
+        const [datasets, sql, layer, rows, theme, style] = ["datasets", "sql", "layer", "rows", "theme", "map-style"].map((a) => this.getAttribute(a));
+        if (!layer || (!rows && !sql))
+            return;
+        const run = ++this.#run;
+        this.#clear();
+        this.innerHTML = '<p class="queria-note">Loading…</p>';
+        try {
+            const conn = connect({ datasets: parseDatasets(datasets ?? ""), apiUrl: this.getAttribute("api-url") ?? undefined });
+            const [data, sources] = await Promise.all([sql ? conn.sql(sql) : JSON.parse(rows ?? "[]"), conn.sources(sql ?? undefined)]);
+            if (run !== this.#run)
+                return;
+            this.innerHTML = `<div style="height:var(--queria-map-height,400px)"></div>${attributionHtml(sources)}`;
+            const { finalize } = await renderMap(this.firstElementChild, JSON.parse(layer), data, {
+                theme: theme === "dark" ? "dark" : "light",
+                ...(style ? { style } : {}),
+            });
+            if (run === this.#run)
+                this.#finalize = finalize;
+            else
+                finalize();
+        }
+        catch (e) {
+            if (run === this.#run)
+                this.innerHTML = `<p class="queria-note">${esc(String(e))}</p>`;
+        }
+    }
+}
+/** <queria-powered-by> */
+export class QueriaPoweredBy extends HTMLElement {
+    connectedCallback() {
+        this.innerHTML = poweredByHtml();
+    }
+}
+const elements = { "queria-chart": QueriaChart, "queria-map": QueriaMap, "queria-powered-by": QueriaPoweredBy };
+/** Register the custom elements. Safe to call more than once. */
+export const defineElements = () => Object.entries(elements).forEach(([name, cls]) => customElements.get(name) ?? customElements.define(name, cls));
+//# sourceMappingURL=index.js.map

package/dist/elements/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/elements/index.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { closeAll, connect, plain, type Connection, type ConnectOptions, type Dataset, type Declared, type License, } from "./client.js";
+export { lit } from "./sql.js";
+export * from "./render/index.js";

package/dist/index.js

@@ -0,0 +1,4 @@
+export { closeAll, connect, plain, } from "./client.js";
+export { lit } from "./sql.js";
+export * from "./render/index.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,EACL,QAAQ,EACR,OAAO,EACP,KAAK,GAMN,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,cAAc,mBAAmB,CAAC"}

package/dist/react/Chart.d.ts

@@ -0,0 +1,12 @@
+import { type ChartSpec } from "../render/chart.js";
+type Props = {
+    spec: ChartSpec;
+    className?: string;
+} & ({
+    sql: string;
+} | {
+    rows: readonly Record<string, unknown>[];
+});
+/** A Vega-Lite chart of the SQL result (or of `rows`), followed by the sources of the datasets. */
+export declare const Chart: ({ spec, className, ...data }: Props) => import("react").JSX.Element;
+export {};

package/dist/react/Chart.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { attributionHtml } from "../render/attribution.js";
+import { renderChart } from "../render/chart.js";
+import { useQueria } from "./query.js";
+/** A Vega-Lite chart of the SQL result (or of `rows`), followed by the sources of the datasets. */
+export const Chart = ({ spec, className = "queria-chart", ...data }) => {
+    const conn = useQueria();
+    const el = useRef(null);
+    const [state, setState] = useState({ sources: [] });
+    const sql = "sql" in data ? data.sql : null;
+    const rows = "rows" in data ? data.rows : null;
+    // Compare the spec by content: a spec written inline is a new object on every render of the parent.
+    const specKey = JSON.stringify(spec);
+    useEffect(() => {
+        let alive = true;
+        let finalize;
+        const load = sql === null ? Promise.all([rows ?? [], conn.sources()]) : Promise.all([conn.sql(sql), conn.sources(sql)]);
+        load
+            .then(async ([values, sources]) => {
+            if (!alive || !el.current)
+                return;
+            setState({ sources });
+            ({ finalize } = await renderChart(el.current, spec, values));
+            if (!alive)
+                finalize();
+        })
+            .catch((error) => {
+            if (!alive)
+                return;
+            // finalize stops the previous chart but leaves its drawing in the element.
+            el.current?.replaceChildren();
+            setState({ sources: [], error });
+        });
+        return () => {
+            alive = false;
+            finalize?.();
+        };
+    }, [conn, sql, rows, specKey]);
+    return (_jsxs("div", { className: className, children: [state.error ? _jsx("p", { className: "queria-note", children: String(state.error) }) : null, _jsx("div", { ref: el }), _jsx("div", { dangerouslySetInnerHTML: { __html: attributionHtml(state.sources) } })] }));
+};
+//# sourceMappingURL=Chart.js.map

package/dist/react/Chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.js","sourceRoot":"","sources":["../../src/react/Chart.tsx"],"names":[],"mappings":"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"}

package/dist/react/DataMap.d.ts

@@ -0,0 +1,12 @@
+import { type MapLayer, type MapRenderOptions } from "../render/data-map.js";
+type Props = {
+    layer: MapLayer;
+    className?: string;
+} & MapRenderOptions & ({
+    sql: string;
+} | {
+    rows: readonly Record<string, unknown>[];
+});
+/** The SQL result (or `rows`) on a map by area code or by lng/lat, followed by the sources. Its height is the CSS variable --queria-map-height (400px by default). */
+export declare const DataMap: ({ layer, className, style, theme, ...data }: Props) => import("react").JSX.Element;
+export {};

package/dist/react/DataMap.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { attributionHtml } from "../render/attribution.js";
+import { renderMap } from "../render/data-map.js";
+import { useQueria } from "./query.js";
+/** The SQL result (or `rows`) on a map by area code or by lng/lat, followed by the sources. Its height is the CSS variable --queria-map-height (400px by default). */
+export const DataMap = ({ layer, className = "queria-map", style, theme, ...data }) => {
+    const conn = useQueria();
+    const el = useRef(null);
+    const [state, setState] = useState({ sources: [] });
+    const sql = "sql" in data ? data.sql : null;
+    const rows = "rows" in data ? data.rows : null;
+    // Inline objects are new on every render of the parent, so compare them by content.
+    const key = JSON.stringify([layer, style, theme]);
+    useEffect(() => {
+        let alive = true;
+        let finalize;
+        // Each map gets its own element: a map removed after the next one started takes its class off its element.
+        const box = document.createElement("div");
+        box.style.height = "100%";
+        el.current?.append(box);
+        const load = sql === null ? Promise.all([rows ?? [], conn.sources()]) : Promise.all([conn.sql(sql), conn.sources(sql)]);
+        load
+            .then(async ([values, sources]) => {
+            if (!alive)
+                return;
+            setState({ sources });
+            ({ finalize } = await renderMap(box, layer, values, { style, theme }));
+            if (!alive)
+                finalize();
+        })
+            .catch((error) => {
+            if (alive)
+                setState({ sources: [], error });
+        });
+        return () => {
+            alive = false;
+            finalize?.();
+            box.remove();
+        };
+    }, [conn, sql, rows, key]);
+    return (_jsxs("div", { className: className, children: [state.error ? _jsx("p", { className: "queria-note", children: String(state.error) }) : null, _jsx("div", { ref: el, style: { height: "var(--queria-map-height, 400px)" } }), _jsx("div", { dangerouslySetInnerHTML: { __html: attributionHtml(state.sources) } })] }));
+};
+//# sourceMappingURL=DataMap.js.map

package/dist/react/DataMap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataMap.js","sourceRoot":"","sources":["../../src/react/DataMap.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAwC,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACxF,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAKvC,sKAAsK;AACtK,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,GAAG,YAAY,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,IAAI,EAAS,EAAE,EAAE;IAC3F,MAAM,IAAI,GAAG,SAAS,EAAE,CAAC;IACzB,MAAM,EAAE,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAA0C,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7F,MAAM,GAAG,GAAG,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC;IAC5C,MAAM,IAAI,GAAG,MAAM,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAC/C,oFAAoF;IACpF,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,GAAG,IAAI,CAAC;QACjB,IAAI,QAAkC,CAAC;QACvC,2GAA2G;QAC3G,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1C,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QAC1B,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC;QACxB,MAAM,IAAI,GAAG,GAAG,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACxH,IAAI;aACD,IAAI,CAAC,KAAK,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,EAAE;YAChC,IAAI,CAAC,KAAK;gBAAE,OAAO;YACnB,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;YACtB,CAAC,EAAE,QAAQ,EAAE,GAAG,MAAM,SAAS,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;YACvE,IAAI,CAAC,KAAK;gBAAE,QAAQ,EAAE,CAAC;QACzB,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,KAAc,EAAE,EAAE;YACxB,IAAI,KAAK;gBAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;QAC9C,CAAC,CAAC,CAAC;QACL,OAAO,GAAG,EAAE;YACV,KAAK,GAAG,KAAK,CAAC;YACd,QAAQ,EAAE,EAAE,CAAC;YACb,GAAG,CAAC,MAAM,EAAE,CAAC;QACf,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;IAE3B,OAAO,CACL,eAAK,SAAS,EAAE,SAAS,aACtB,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,YAAG,SAAS,EAAC,aAAa,YAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAK,CAAC,CAAC,CAAC,IAAI,EAC1E,cAAK,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,iCAAiC,EAAE,GAAI,EACtE,cAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,eAAe,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,GAAI,IACxE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/react/MapView.d.ts

@@ -0,0 +1,13 @@
+import type { Map, MapOptions, StyleSpecification } from "maplibre-gl";
+import { type ReactNode } from "react";
+type Props = {
+    style: StyleSpecification | string;
+    /** Called once when the map is created. Attach handlers here and return a cleanup. */
+    onReady?: (map: Map) => void | (() => void);
+    options?: Omit<MapOptions, "container" | "style">;
+    className?: string;
+    children?: ReactNode;
+};
+/** A MapLibre map. Passing a new style applies only the diff. */
+export declare const MapView: ({ style, onReady, options, className, children }: Props) => import("react").JSX.Element;
+export {};

package/dist/react/MapView.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { mountMap } from "../render/map.js";
+/** A MapLibre map. Passing a new style applies only the diff. */
+export const MapView = ({ style, onReady, options, className = "queria-map", children }) => {
+    const container = useRef(null);
+    const handle = useRef(null);
+    useEffect(() => {
+        if (!container.current)
+            return;
+        const h = mountMap(container.current, style, options);
+        handle.current = h;
+        const cleanup = h.map.then((m) => onReady?.(m));
+        return () => {
+            cleanup.then((f) => f?.(), console.error);
+            h.destroy();
+            handle.current = null;
+        };
+        // Create the map once; style changes are applied below.
+    }, []);
+    // The map is created with the first style; apply only later changes.
+    const applied = useRef(style);
+    useEffect(() => {
+        if (applied.current === style)
+            return;
+        applied.current = style;
+        handle.current?.map.then((m) => m.setStyle(style), console.error);
+    }, [style]);
+    return (_jsx("div", { className: className, ref: container, children: children }));
+};
+//# sourceMappingURL=MapView.js.map

package/dist/react/MapView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapView.js","sourceRoot":"","sources":["../../src/react/MapView.tsx"],"names":[],"mappings":";AACA,OAAO,EAAkB,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAkB,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAW5D,iEAAiE;AACjE,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,GAAG,YAAY,EAAE,QAAQ,EAAS,EAAE,EAAE;IAChG,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,MAAM,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,CAAC,OAAO;YAAE,OAAO;QAC/B,MAAM,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;QACtD,MAAM,CAAC,OAAO,GAAG,CAAC,CAAC;QACnB,MAAM,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAChD,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;YAC1C,CAAC,CAAC,OAAO,EAAE,CAAC;YACZ,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC;QACF,wDAAwD;IAC1D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,qEAAqE;IACrE,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC9B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,OAAO,KAAK,KAAK;YAAE,OAAO;QACtC,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;QACxB,MAAM,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,YACtC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/react/PoweredBy.d.ts

@@ -0,0 +1,2 @@
+/** A link that shows the app is built on Queria. */
+export declare const PoweredBy: () => import("react").JSX.Element;

package/dist/react/PoweredBy.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { poweredByHtml } from "../render/poweredBy.js";
+/** A link that shows the app is built on Queria. */
+export const PoweredBy = () => _jsx("span", { dangerouslySetInnerHTML: { __html: poweredByHtml() } });
+//# sourceMappingURL=PoweredBy.js.map

package/dist/react/PoweredBy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PoweredBy.js","sourceRoot":"","sources":["../../src/react/PoweredBy.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvD,oDAAoD;AACpD,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,eAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,GAAI,CAAC"}

package/dist/react/index.d.ts

@@ -0,0 +1,5 @@
+export { QueriaProvider, useQueria, useQuery, type QueryState } from "./query.js";
+export { Chart } from "./Chart.js";
+export { DataMap } from "./DataMap.js";
+export { MapView } from "./MapView.js";
+export { PoweredBy } from "./PoweredBy.js";

package/dist/react/index.js

@@ -0,0 +1,6 @@
+export { QueriaProvider, useQueria, useQuery } from "./query.js";
+export { Chart } from "./Chart.js";
+export { DataMap } from "./DataMap.js";
+export { MapView } from "./MapView.js";
+export { PoweredBy } from "./PoweredBy.js";
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,QAAQ,EAAmB,MAAM,YAAY,CAAC;AAClF,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/react/query.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode } from "react";
+import { type Connection, type ConnectOptions } from "../client.js";
+/** Declare the datasets for the components below: <QueriaProvider datasets={["queria/e_stat"]}>. */
+export declare const QueriaProvider: ({ children, ...options }: ConnectOptions & {
+    children: ReactNode;
+}) => import("react").JSX.Element;
+export declare const useQueria: () => Connection;
+export type QueryState<T> = {
+    status: "idle";
+} | {
+    status: "loading";
+} | {
+    status: "done";
+    rows: T[];
+} | {
+    status: "error";
+    error: unknown;
+};
+/** Run SQL and re-run it when the SQL changes. Pass null to skip; the state is then idle. */
+export declare const useQuery: <T = Record<string, unknown>>(sql: string | null) => QueryState<T>;

package/dist/react/query.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { connect } from "../client.js";
+const Context = createContext(null);
+/** Declare the datasets for the components below: <QueriaProvider datasets={["queria/e_stat"]}>. */
+export const QueriaProvider = ({ children, ...options }) => {
+    // JSON drops functions, so a token function is keyed by its presence and called through a ref:
+    // a new function on each render keeps the connection, and the latest one is called.
+    const { token } = options;
+    const latest = useRef(token);
+    latest.current = token;
+    const key = JSON.stringify({ ...options, token: typeof token === "function" ? "function" : token });
+    const conn = useMemo(() => connect({
+        ...options,
+        token: typeof token === "function"
+            ? async () => {
+                const t = latest.current;
+                if (t === undefined)
+                    throw new Error("The token was removed");
+                return typeof t === "function" ? t() : t;
+            }
+            : token,
+    }), [key]);
+    return _jsx(Context.Provider, { value: conn, children: children });
+};
+export const useQueria = () => {
+    const conn = useContext(Context);
+    if (!conn)
+        throw new Error("Wrap the component in <QueriaProvider datasets={[...]}>");
+    return conn;
+};
+/** Run SQL and re-run it when the SQL changes. Pass null to skip; the state is then idle. */
+export const useQuery = (sql) => {
+    const conn = useQueria();
+    const [state, setState] = useState(sql === null ? { status: "idle" } : { status: "loading" });
+    useEffect(() => {
+        if (sql === null) {
+            setState({ status: "idle" });
+            return;
+        }
+        let alive = true;
+        setState({ status: "loading" });
+        conn.sql(sql).then((rows) => alive && setState({ status: "done", rows }), (error) => alive && setState({ status: "error", error }));
+        return () => {
+            alive = false;
+        };
+    }, [conn, sql]);
+    return state;
+};
+//# sourceMappingURL=query.js.map

package/dist/react/query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"query.js","sourceRoot":"","sources":["../../src/react/query.tsx"],"names":[],"mappings":"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"}

package/dist/render/attribution.d.ts

@@ -0,0 +1,6 @@
+import type { Dataset } from "../client.js";
+/**
+ * Markup of the sources and licenses of the datasets, for display under a chart or map.
+ * Licenses such as CC BY require it wherever the data is shown.
+ */
+export declare const attributionHtml: (datasets: readonly Dataset[]) => string;

package/dist/render/attribution.js

@@ -0,0 +1,17 @@
+import { esc } from "./escape.js";
+const link = (url, text) => url && /^https?:\/\//.test(url) ? `<a href="${esc(url)}" target="_blank" rel="noopener">${esc(text)}</a>` : esc(text);
+/**
+ * Markup of the sources and licenses of the datasets, for display under a chart or map.
+ * Licenses such as CC BY require it wherever the data is shown.
+ */
+export const attributionHtml = (datasets) => datasets.length === 0
+    ? ""
+    : '<p class="queria-attribution">Source: ' +
+        datasets
+            .map((d) => {
+            const licenses = (d.licenses ?? []).map((l) => link(l.url, l.title ?? l.id ?? "")).filter(Boolean);
+            return link(d.page_url, d.title ?? d.qualified_name) + (licenses.length ? ` (${licenses.join(", ")})` : "");
+        })
+            .join("; ") +
+        "</p>";
+//# sourceMappingURL=attribution.js.map

package/dist/render/attribution.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribution.js","sourceRoot":"","sources":["../../src/render/attribution.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,MAAM,IAAI,GAAG,CAAC,GAAuB,EAAE,IAAY,EAAU,EAAE,CAC7D,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,CAAC,GAAG,CAAC,oCAAoC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAExH;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAA4B,EAAU,EAAE,CACtE,QAAQ,CAAC,MAAM,KAAK,CAAC;IACnB,CAAC,CAAC,EAAE;IACJ,CAAC,CAAC,wCAAwC;QACxC,QAAQ;aACL,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YACT,MAAM,QAAQ,GAAG,CAAC,CAAC,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACnG,OAAO,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAC9G,CAAC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC;QACb,MAAM,CAAC"}

package/dist/render/chart.d.ts

@@ -0,0 +1,27 @@
+import type { EmbedOptions, Result, VisualizationSpec } from "vega-embed";
+/** A Vega-Lite spec. Its data is put in by the package. */
+export type ChartSpec = VisualizationSpec | Record<string, unknown>;
+export type Rows = readonly Record<string, unknown>[];
+/**
+ * Put the data into the spec. With rows, they become the data of a spec that has none.
+ * With named rows, the spec (or its layers) picks them with data: { name }; rows named "" are the default data.
+ */
+export declare const withData: (spec: ChartSpec, data: Rows | Readonly<Record<string, Rows>>) => Record<string, unknown>;
+export type ChartOptions = {
+    /** Vega-Lite config, such as a theme. The spec's own config is merged over it. */
+    config?: Record<string, unknown>;
+    /** Export and source menu. Hidden by default. */
+    actions?: EmbedOptions["actions"];
+    /** Labels of the menu. */
+    i18n?: EmbedOptions["i18n"];
+    tooltipTheme?: "light" | "dark";
+    /** By default svg, and canvas when there are more than 5,000 rows in all. */
+    renderer?: "svg" | "canvas";
+};
+/**
+ * Draw a Vega-Lite chart. vega-embed and vega-interpreter are loaded on first use. Expressions are run by the
+ * interpreter, so charts draw on pages whose Content Security Policy has no unsafe-eval.
+ * Returns the Vega view and a function that removes the chart.
+ * Sources and licenses are not drawn here; the elements and React components add them under the chart.
+ */
+export declare const renderChart: (el: HTMLElement, spec: ChartSpec, data: Rows | Readonly<Record<string, Rows>>, { config, actions, i18n, tooltipTheme, renderer }?: ChartOptions) => Promise<Pick<Result, "view" | "finalize">>;

package/dist/render/chart.js

@@ -0,0 +1,50 @@
+// Vega writes an id into every row it reads, so hand it copies: the caller's rows may be frozen or shared.
+const copy = (rows) => rows.map((r) => ({ ...r }));
+const isRows = (d) => Array.isArray(d);
+const ownDatasets = (spec) => {
+    const d = "datasets" in spec ? spec.datasets : undefined;
+    return typeof d === "object" && d !== null ? d : {};
+};
+/**
+ * Put the data into the spec. With rows, they become the data of a spec that has none.
+ * With named rows, the spec (or its layers) picks them with data: { name }; rows named "" are the default data.
+ */
+export const withData = (spec, data) => {
+    const named = isRows(data) ? { "": data } : data;
+    const { "": main, ...rest } = named;
+    // Vega-Lite takes width "container" only for single and layered views, and warns on the others.
+    const composite = ["facet", "repeat", "concat", "hconcat", "vconcat"].some((k) => k in spec);
+    return {
+        ...(composite ? {} : { width: "container" }),
+        ...spec,
+        ...(main && !("data" in spec) ? { data: { values: copy(main) } } : {}),
+        // The spec's own datasets stay; named rows are laid over them.
+        ...(Object.keys(rest).length
+            ? { datasets: { ...ownDatasets(spec), ...Object.fromEntries(Object.entries(rest).map(([k, v]) => [k, copy(v)])) } }
+            : {}),
+    };
+};
+const CANVAS_ABOVE = 5000;
+const rowCount = (data) => isRows(data) ? data.length : Object.values(data).reduce((n, rows) => n + rows.length, 0);
+/**
+ * Draw a Vega-Lite chart. vega-embed and vega-interpreter are loaded on first use. Expressions are run by the
+ * interpreter, so charts draw on pages whose Content Security Policy has no unsafe-eval.
+ * Returns the Vega view and a function that removes the chart.
+ * Sources and licenses are not drawn here; the elements and React components add them under the chart.
+ */
+export const renderChart = async (el, spec, data, { config, actions = false, i18n, tooltipTheme, renderer } = {}) => {
+    const [{ default: embed }, { expressionInterpreter }] = await Promise.all([import("vega-embed"), import("vega-interpreter")]);
+    const { view, finalize } = await embed(el, withData(spec, data), {
+        // Read the spec as Vega-Lite even when its $schema says Vega
+        mode: "vega-lite",
+        ast: true,
+        expr: expressionInterpreter,
+        renderer: renderer ?? (rowCount(data) > CANVAS_ABOVE ? "canvas" : "svg"),
+        actions,
+        ...(i18n ? { i18n } : {}),
+        ...(config ? { config } : {}),
+        ...(tooltipTheme ? { tooltip: { theme: tooltipTheme } } : {}),
+    });
+    return { view, finalize };
+};
+//# sourceMappingURL=chart.js.map

package/dist/render/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","sourceRoot":"","sources":["../../src/render/chart.ts"],"names":[],"mappings":"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"}