use prop in another prop from same svelte component-CodePudding

I've just started learning svelte in the last hour so forgive me if this question is stupid or already answered. I tried searching but I don't even know the parlance to ask the question well.

Based on this svelte.dev tutorial link on spread props, my question is as follows.

How do I modify this to be something like this code.

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

    const pkg = {
                name: 'svelte',
                version: 3,
                speed: 'blazing',
                website: 'https://svelte.dev',

                // this is the modification
                npm: 'https://www.npmjs.com/package/'   {name},

                // I've also tried:
                npm: 'https://www.npmjs.com/package/{name}',
    };
</script>

<Info {...pkg}/>

This is the other modified file.

<script>
    export let name;
    export let version;
    export let speed;
    export let website;
    export let npm;
</script>

<p>
    The <code>{name}</code> package is {speed} fast.
    Download version {version} from <a href={npm}>npm</a>
    and <a href={website}>learn more here</a>
</p>

I'm trying to use a prop in the declaration of another prop exported from the same component.

Seems like it's easy but I'm missing something.

CodePudding user response：

Once again, it's explained here Self-references in object literals / initializers

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

    const pkg = {
                name: 'svelte',
                version: 3,
                speed: 'blazing',
                website: 'https://svelte.dev',
                get npm() { return 'https://www.npmjs.com/package/'   this.name },
                // or
                get npm() { return `https://www.npmjs.com/package/${this.name}` },
    };
</script>

<Info {...pkg}/>

Another solution:

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

    const name = 'svelte'
    const pkg = {
                name,
                version: 3,
                speed: 'blazing',
                website: 'https://svelte.dev',

                npm: 'https://www.npmjs.com/package/'   name,
                // or
                npm: `https://www.npmjs.com/package/${name}`,
    };
</script>

<Info {...pkg}/>

CodePudding user response：

After A lot of head scratching