To load it client-side:

<script src="npm:prql-js/dist/web/prql_js.js"></script>
<script>self.wasm_bindgen = wasm_bindgen;</script>

```js
const {compile} = wasm_bindgen;
await wasm_bindgen(import.meta.resolve("npm:prql-js/dist/web/prql_js_bg.wasm"));
const sql = compile("from employees | select first_name");
display(sql);
```

Hi from the PRQL team — let us know if we can be helpful here! I saw on a linked issue that a release would be helpful, so we can do one of those shortly...

Thanks @max-sixty! An ESM release is very welcome. As far as the integration we’re prototyping in #1078, the main outstanding task for us is transpiling PRQL to SQL while preserving placeholders. We have as input PRQL with interpolated expressions such as this:

from gaia
filter phot_g_mean_mag < ${mag}
sort {phot_g_mean_mag}
take 10

Our goal is to rewrite this as SQL with interpolated expressions in the correct place, like this:

SELECT *
FROM gaia
WHERE phot_g_mean_mag < ${mag}
ORDER BY phot_g_mean_mag
LIMIT 10

My current plan is to pass the following to compile:

from gaia
filter phot_g_mean_mag < $1
sort {phot_g_mean_mag}
take 10

Then take the output SQL:

SELECT *
FROM gaia
WHERE phot_g_mean_mag < $1
ORDER BY phot_g_mean_mag
LIMIT 10

And re-insert the original placeholders (${mag}) in the appropriate places ($1), producing the desired templated SQL:

SELECT *
FROM gaia
WHERE phot_g_mean_mag < ${mag}
ORDER BY phot_g_mean_mag
LIMIT 10

The approach assumes that PRQL’s compile maintains the cardinality of each placeholder, so that if the input PRQL references $1 once, it output SQL references $1 exactly once too (though I don’t assume that $1, $2, etc. are necessarily in the same order in the output SQL)… but I can workaround that if this assumption is false. If you have any thoughts on this approach, advice is welcome. 🙏

Great @mbostock !

While PRQL doesn't support ${mag}, it does support $mag, so that might be a bit easier than translating to $1 and then back again. Let us know if you hit any issues with that!

Nice to know, @max-sixty. I was just using mag as a placeholder for an expression. It can be an arbitrary JavaScript expression such as ${await fetch("https://example.com").then((response) => response.json())} so using the numeric placeholders is perfect for tracking the identity of placeholders through transpilation.

Ah great @mbostock , thanks for explaining. That works well!