Skip to content

Commit 0e4b7b8

Browse files
Sync svelte docs (#1146)
sync svelte docs Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
1 parent 0de9b62 commit 0e4b7b8

File tree

1 file changed

+33
-1
lines changed

1 file changed

+33
-1
lines changed

apps/svelte.dev/content/docs/svelte/07-misc/07-v5-migration-guide.md

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -723,7 +723,39 @@ If a bindable property has a default value (e.g. `let { foo = $bindable('bar') }
723723
724724
### `accessors` option is ignored
725725
726-
Setting the `accessors` option to `true` makes properties of a component directly accessible on the component instance. In runes mode, properties are never accessible on the component instance. You can use component exports instead if you need to expose them.
726+
Setting the `accessors` option to `true` makes properties of a component directly accessible on the component instance.
727+
728+
```svelte
729+
<svelte:options accessors={true} />
730+
731+
<script>
732+
// available via componentInstance.name
733+
export let name;
734+
</script>
735+
```
736+
737+
In runes mode, properties are never accessible on the component instance. You can use component exports instead if you need to expose them.
738+
739+
```svelte
740+
<script>
741+
let { name } = $props();
742+
// available via componentInstance.getName()
743+
export const getName = () => name;
744+
</script>
745+
```
746+
747+
Alternatively, if the place where they are instantiated is under your control, you can also make use of runes inside `.js/.ts` files by adjusting their ending to include `.svelte`, i.e. `.svelte.js` or `.svelte.ts`, and then use `$state`:
748+
749+
```js
750+
+++import { mount } from 'svelte';+++
751+
import App from './App.svelte'
752+
753+
---const app = new App({ target: document.getElementById("app"), props: { foo: 'bar' } });
754+
app.foo = 'baz'---
755+
+++const props = $state({ foo: 'bar' });
756+
const app = mount(App, { target: document.getElementById("app"), props });
757+
props.foo = 'baz';+++
758+
```
727759
728760
### `immutable` option is ignored
729761

0 commit comments

Comments
 (0)