box-rune

Usage

Add the preprocessor to your svelte config:

// svelte.config.js
import { preprocessBox } from 'box-rune';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [
		// ...other preprocessors
		preprocessBox(),
	],

	// ...rest of config options
};

export default config;

Import the polyfill at your main entry point (usually the root +layout.svelte):

import 'box-rune/polyfill';

Using it:

<script>
    import { doSomethingWithBoxed } from "./state.js";

    let { open = bindable() } = $props();

    let boxed = $box(open);
    //   ^? { value: boolean }

    // if `open` is mutated, `boxed` will always stay in sync (and vice versa)
    doSomethingWithBoxed(boxed);
</script>