We Keep Coding

use prop in another prop from same svelte component

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.
**** Edit *****
Based on Thomas Hennes answer I realized I had the foundation of the question wrong. What I needed to understand was the control flow structure of Svelte, which rendered this formulation redundant. I had a flawed model of a component as some sort of function that took inputs and could also return outputs that could be used in other components. But I'm starting to understand (I think) that it's more just a top-down inheritance model maybe.
TL:DR, Konrads answer was technically correct based on my actual question, but Thomas Hennes answer helped me the most.

Jumping in a little late, but here is my take on your problem and what I feel is a more Svelte-like solution.
npm here is really nothing more than a value statically and systematically derived from name, and as such I feel it is redundant data, meaning that it is not essential that this value should be passed as a prop to child components as those child components could just as easily derive that information from the value of name (which is essential data).
On top of that, Svelte's reactive notation is ideally suited to address such needs.
Here is how I would piece it together:
<script>
import Info from './Info.svelte';
const pkg = {
name: 'svelte',
version: 3,
speed: 'blazing',
website: 'https://svelte.dev',
// none of this is needed, redundant info
// npm: 'https://www.npmjs.com/package/' + {name},
// npm: 'https://www.npmjs.com/package/{name}',
};
</script>
<Info {...pkg}/>
And in Info.svelte:
<script>
export let name;
export let version;
export let speed;
export let website;
// Reactive code, npm will update whenever name changes
$: npm = `https://www.npmjs.com/package/${name}`
</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>
In general, if you find one prop can/should be derived from another existing prop, then that derived prop is redundant and should not be passed as a prop but instead derived as needed in the component(s) that consume the prop.

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}/>

After A lot of head scratching🤔.... I finally understand what you want to do.
name is a property of the object pkg, just writing name means you're calling an undeclared variable called name.
However, calling the name property inside the pkg object will also not work, you'll get an call before initialization error.
Instead you can turn the npm property into a function that can access the pkg object properties and return them. Remember you'll call npm as npm() in Info.svelte now because its a function. Please see my example here. Also, do consider learning more about data types in JavaScript...
Happy coding 😃

Is this a good practice? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last year.
Improve this question
I`m doing a project with react and I decided to make routes functionality a little different, I put the routes details to an separated file as an array: , and on the routes component I iterate through the array using the map function:
. But I don't know if what I did is something recommended, do you think it's better to put the routes in a static way directly in the component or is there a better solution?

It is better to use the useRoutes function provided by the react-router-dom package.
This makes your code shorter and authentication can be added easily using this procedure.
This way, you can define the main routes as an object like:
routes = (loggedIn) => [
{
path: '/',
children: [
// unprotected routes here
]
},
{
path: '/main',
element: loggedIn ? <Layout /> : <Navigate to='/login' />
children: [
// protected routes here
]
}
]
Then return useRoutes in the route component like:
const { loggedIn } = useSelector((state) => state.auth);
return useRoutes(routes(loggedIn), '');
useRoutes API: https://reactrouter.com/docs/en/v6/api#useroutes

How to load modules on a route in Angular 8? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I want to import a module I've created in the app to be loaded on a certain route which has it's own routing within

You need to have Routes.forChild(routes) in your custom modules' .module.ts file
then in your main routing load your module lazily
import { CustomModule } from 'your-path'
const routes: Routes = [
{
path: 'your-path', loadChildren: () => CustomModule
}
];

As of Angular 8 the new way to import child routes is this:
{path: "user", loadChildren: () => import("./users/user.module").then(m => m.UserModule)};
Angular team did this to be more consistent with next ES and also this will be understood by the IDEs, webpack, etc.

What Omair said is correct, however I'm answering as well for the sake of having options.
You can also do this, if you prefer:
import { CustomModule } from 'your-path'
const routes: Routes = [
{
path: 'your-path', loadChildren: 'src/app/path/to/your/module/custom.module#CustomModule'
}
];

Can't get ref from componentDidMount [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I have a class component
export default class ActivityPage extends React.Component {
constructor(props) {
super(props);
this.textarea = React.createRef();
}
componentDidMount() {
this.textarea.current.select();
}
render() {
return (
<div>
<textarea defaultValue="the quick brown fox." ref={this.textarea} />
</div>
);
}
}
When I go to a route with this component, I get the following error
I installed 16.3.2 React version.

I've fixed this issue. It was completely my fault. I didn't update the react-dom package to 16.3.2 version.

Why is this React component separated into two? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I get the difference between connected and unconnected components, but what is the utility in separating ALL components in this manner? All connected components rely on unconnected and vice-versa, so I'm not seeing why this pattern exists.
Connected component
import { connect } from 'react-redux';
import PrivacyPolicyUI from './PrivacyPolicyUI';
const mapStateToProps = (state) => {
return { };
};
const mapDispatchToProps = (dispatch) => {
return { };
};
const PrivacyPolicy = connect(
mapStateToProps,
mapDispatchToProps
)(PrivacyPolicyUI);
export default PrivacyPolicy;
Unconnected component
import React from 'react';
const PrivacyPolicyUI = () => (
<div> ** some content ** </div>
);
export default PrivacyPolicyUI;

I generally disagree with putting "plain" components and their connections in separate files. Most of the time there's a 1:1 correspondence between a component and its connection (ie, the mapState and call to connect are only used with one component, and that component is only used with that call to connect).
I have a saved chat log where I describe why I think separate "containers" / "components" folders are not a good idea. I also just wrote some additional comments on Reddit about structuring component connections.