Skip to main content

If you have an object of properties, you can 'spread' them onto a component instead of specifying each one:

<Info {...pkg} />

Conversely, if you need to reference all the props that were passed into a component, including ones that weren't declared with export, you can do so by accessing $$props directly. It's not generally recommended, as it's difficult for Svelte to optimise, but it's useful in rare cases.

App.svelte
Info.svelte
<script>
import Info from './Info.svelte';

const pkg = {
name: 'svelte',
version: 3,
speed: 'blazing',
website: 'https://svelte.dev'
};
</script>

<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website} />

/* App.svelte generated by Svelte v4.2.19 */
import {
SvelteComponent,
create_component,
destroy_component,
init,
mount_component,
noop,
safe_not_equal,
transition_in,
transition_out
} from "svelte/internal";

import "svelte/internal/disclose-version";
import Info from './Info.svelte';

function create_fragment(ctx) {
let info;
let current;

info = new Info({
props: {
name: /*pkg*/ ctx[0].name,
version: /*pkg*/ ctx[0].version,
speed: /*pkg*/ ctx[0].speed,
website: /*pkg*/ ctx[0].website
}
});

return {
c() {
create_component(info.$$.fragment);
},
m(target, anchor) {
mount_component(info, target, anchor);
current = true;
},
p: noop,
i(local) {
if (current) return;
transition_in(info.$$.fragment, local);
current = true;
},
o(local) {
transition_out(info.$$.fragment, local);
current = false;
},
d(detaching) {
destroy_component(info, detaching);
}
};
}

function instance($$self) {
const pkg = {
name: 'svelte',
version: 3,
speed: 'blazing',
website: 'https://svelte.dev'
};

return [pkg];
}

class App extends SvelteComponent {
constructor(options) {
super();
init(this, options, instance, create_fragment, safe_not_equal, {});
}
}

export default App;
result = svelte.compile(source, {
generate:
css:
});
/* Add a <style> tag to see compiled CSS */