Skip to content

How to add nested components to an instance in run-time #926

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
paulocoghi opened this issue Nov 14, 2017 · 3 comments
Closed

How to add nested components to an instance in run-time #926

paulocoghi opened this issue Nov 14, 2017 · 3 comments

Comments

@paulocoghi
Copy link
Contributor

paulocoghi commented Nov 14, 2017 •
edited
Loading

Instead of defining nested components in conding-time:

	import Test from './Test.html';

	export default {
		
		components: {
			Test
		}
		
	}

Is it possible to add a new component to the components object in run-time? I'm getting the code of the new component via ajax, and this component was already compiled by Svelte with 'eval' format.

The problem is visibility

I'm am unable to access the components object using the variable of my main app, to add new components loaded in run-time.

For example, a console.log( app.components ) from a compiled and running app returns undefined:

<!DOCTYPE html>
<html>
<head>
	<title>My App</title>
</head>
<body>
	<script src='app.js'></script>
	<script>
		
		var app = new App({
			
			target: document.body
		});

		console.log( app.components ) // undefined
		
	</script>
</body>
</html>
@Conduitry
Copy link
Member

This is not currently directly supported - There is an issue for it, #640

One workaround would be to manually instantiate the new child component, with a target: of some ref in the parent component. You would then need to make sure you manually destroyed the child component when the parent component is destroyed.

@paulocoghi
Copy link
Contributor Author

paulocoghi commented Nov 14, 2017 •
edited
Loading

Interesting workaround! The only downside is to find a way to link the parent data with the new child component.

@paulocoghi
Copy link
Contributor Author

I will close it in favor of #640

sacrosanctic pushed a commit to sacrosanctic/svelte that referenced this issue Dec 24, 2024
@github-actions @Rich-Harris
Sync svelte docs (sveltejs#926)
42bd7b8 
sync svelte docs

Co-authored-by: Rich-Harris <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@paulocoghi @Conduitry