I’ve tried adding this to Svelte like so:
import { svelte, vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import { exec } from "node:child_process";
import { readFileSync } from "node:fs";
import { promisify } from "node:util";
import { defineConfig } from "vite";
const rescriptPreprocess = () => {
return {
name: 'svelte-rescript',
/**
* @param {object} options
* @param {string} options.content
* @param {string} options.filename
* @param {object} options.attributes
* @param {'res'} options.attributes.lang
*/
script: async ({ content, attributes }) => {
if (attributes.lang == 'res') {
console.info('content', content)
const cmd = `./node_modules/.bin/bsc -bs-package-name svelte-rescript -bs-package-output esmodule:.:esmodule -o tmp -e "${content}"`;
await promisify(exec)(cmd);
const jsContent = readFileSync('tmpesmodule').toString();
return {
code: jsContent
};
}
}
};
};
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
svelte({
preprocess: [
vitePreprocess(),
rescriptPreprocess(),
]
})
],
});
I have a module like this:
let a = 19
module Testing = {
let b = a + 10
}
And then a svelte component like this
<script lang="res">
let a = 44;
let b = Test.Testing.b;
</script>
<h1>{a + b}</h1>
Then it fails, because it can’t see that module, so this might be one limitation of this method, or maybe I missed something.
9:16:31 AM [vite] Pre-transform error: Error while preprocessing /home/kamov/Desktop/svelte-test/src/App.svelte - Command failed: ./node_modules/.bin/bsc -bs-package-name svelte-rescript -bs-package-output esmodule:.:esmodule -o tmp -e "
let a = 44;
let b = Test.Testing.b;
"
We've found a bug for you!
/tmp/evalba84ce.res:3:13-26
1 ┆
2 ┆ let a = 44;
3 ┆ let b = Test.Testing.b;
4 ┆
The module or file Test can't be found.
- If it's a third-party dependency:
- Did you add it to the "bs-dependencies" or "bs-dev-dependencies" in bsconfig.json?
- Did you include the file's directory to the "sources" in bsconfig.json?