How can I programmatically set a parameterless Svelte component as the default value of the default slot in Svelte 5?

[i18nsite]

I have a virtual scrollbar, In svelte4 I can programmatically set a svelte component to the default value of the slot.

How can I achieve the same effect in Svelte 5?

@2-/svelte_slot/index.js

  import { detach, mount_component, noop } from "svelte/internal"

  // https://github.com/sveltejs/svelte/issues/2588#issuecomment-1134612872
  export default (svelte_component) => () => {
    let c
    return {
      c: noop,
      // mount
      m: (target, anchor) => {
        mount_component(
         (c = new svelte_component({
            target,
          })),
          target,
          anchor,
          null,
        )
      },
      // destroy
      d: (detaching) => {
        if (detaching) {
          detach(c)
        }
      },
      l: noop,
    }
  }

scrollbar.js

  import slot from "@2-/svelte_slot"
  import Mfs from "@8p/topbar/Mfs.svelte"

  export default (svelte) => {
    return class extends Mfs {
      constructor(opts) {
        let { props } = opts
        if (!props) {
          opts.props = props = {}
        }
        props.$$scope = {}
        props.$$slots = { default: [slot(svelte)] }
        super(opts)
      }
    }
  }

[dummdidumm]

Use createRawSnippet for that: https://svelte-5-preview.vercel.app/docs/imports#svelte-createrawsnippet

Let me know if anything's unclear about the documentation in case we need to tweak it.

[i18nsite]

@dummdidumm

My question is, the parameter I passed in is not a snippet,
but a svelte function,
such as import xxx from 'Xxx.svelte',
this is a function (anchor, props) {

how to turn this svelte function into a snippet?

and then how to assgin this to the default slot ?

[brunnerh]

Example

<script>
	import Content from './Content.svelte';
	import Component from './Component.svelte';
	import { createRawSnippet, mount, unmount } from 'svelte';

	const WithDefault = (internals, props) => {
		const children = createRawSnippet((name) => {
			return {
				render: () =>
					`<snippet-wrapper style="display: contents"></snippet-wrapper>`,
				setup: node => {
					$effect(() => {
						const c = mount(Content, { target: node });
						return () => unmount(c);
					});
				}
			};
		});

		return Component(internals, { children, ...props });
	}
</script>

<WithDefault title="This should have default children" />
<WithDefault title="This has user defined children">
	Manual content
</WithDefault>

This is not set up for SSR, the component function signature would also be slightly different in SSR.