#Bun.build compiling *.svelte.ts

1 messages · Page 1 of 1 (latest)

uneven grove
#

I'm wondering how I can get bun to compile the *.svelte.ts files that would include runes, as with a basic and minimal setup this would be my files, but when the html file with the dist js, it'll ofc say $state is undefined since I'm missing something in the bundle for Bun.build

App.svelte

<script>
    import { createCounter } from './counter.svelte.js'
    
    const counter = createCounter();
</script>
<button onclick={counter.inc}>increase</button>
<span>{counter.value}</span>

counter.svelte.js

export function createCounter() {
    let value = $state(0);
    return {
      get value() {
          return value;
      },
      inc() {
          value++;
      }
    }
}

app.ts

import { mount } from 'svelte';

import App from './App.svelte';

const app = mount(App, {
    target: document.body
});

build.ts

import { compile } from 'svelte/compiler';

const output = await Bun.build({
    entrypoints: [ './app.ts' ],
    outdir: './dist',
    plugins: [{
        name: 'svelte',
        target: 'bun',
        setup(build) {
            build.onLoad({ filter: /\.svelte$/ }, async ({ path }) => {
                const result = compile(await Bun.file(path).text(), {
                    filename: path,
                    generate: 'client',
                    css: 'external',
                    runes: true
                });
                return {
                    contents: result.js.code,
                    loader: 'js'
                }
            })
        }
    }]
});
console.log('output', output);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./dist/app.js"></script>
</body>
</html>
#

pls ping

junior kestrel
# uneven grove pls ping

What you are doing is compiling only .svelte files, which means the bundler won't try to process your .svelte.js file and $state will not exist

#

But why don't u use $state directly in .svelte files

uneven grove
#

bruh

#

there's another compile (compileModule) function for specifically only script files xD