getAllContexts()

Retrieve the whole context map that belongs to the closest parent component.

Retrieves the whole context map that belongs to the closest parent component. Must be called during component initialisation.

Useful, for example, if you programmatically create a component and want to pass the existing context to it.

Signature

function getAllContexts<T extends Map<any, any> = Map<any, any>>(): T

Returns

contextMap · Map<any, any>

Returns a Map containing all context key-value pairs from the parent component.

Example

Programmatic Component Creation

<!-- ComponentWrapper.svelte -->
<script>
  import { getAllContexts, mount } from 'svelte';
  import DynamicComponent from './DynamicComponent.svelte';

  let container = $state();

  // Get all contexts from current component tree
  const contexts = getAllContexts();

  $effect(() => {
    if (container) {
      // Mount component programmatically with inherited contexts
      const instance = mount(DynamicComponent, {
        target: container,
        context: contexts,
        props: { message: 'Hello' }
      });

      return () => {
        instance.unmount();
      };
    }
  });
</script>

<div bind:this={container}></div>

Parent Component Setting Multiple Contexts

<!-- Parent.svelte -->
<script>
  import { setContext } from 'svelte';
  import ComponentWrapper from './ComponentWrapper.svelte';

  setContext('theme', { color: 'blue', mode: 'dark' });
  setContext('user', { name: 'Alice', id: 123 });
  setContext('api', { baseUrl: 'https://api.example.com' });
</script>

<ComponentWrapper />

Dynamic Component Using Contexts

<!-- DynamicComponent.svelte -->
<script>
  import { getContext } from 'svelte';

  let { message } = $props();

  // Can access all contexts that were passed through getAllContexts
  const theme = getContext('theme');
  const user = getContext('user');
  const api = getContext('api');
</script>

<div style="color: {theme.color}">
  <p>{message}</p>
  <p>User: {user.name}</p>
  <p>API: {api.baseUrl}</p>
</div>

Portal/Teleport Pattern

<script>
  import { getAllContexts, mount } from 'svelte';
  import ModalContent from './ModalContent.svelte';

  let { isOpen, children } = $props();
  
  const contexts = getAllContexts();

  $effect(() => {
    if (isOpen) {
      const portal = document.getElementById('modal-root');
      
      const instance = mount(ModalContent, {
        target: portal,
        context: contexts,
        props: { children }
      });

      return () => instance.unmount();
    }
  });
</script>

Context Cloning Pattern

<script>
  import { getAllContexts, setContext } from 'svelte';

  // Get all parent contexts
  const parentContexts = getAllContexts();

  // Clone and extend contexts
  for (const [key, value] of parentContexts) {
    setContext(key, value);
  }

  // Add additional context
  setContext('local', { data: 'specific to this component' });
</script>

Notes

• Must be called during component initialisation (not in callbacks or effects)
• Returns a Map object containing all context entries from parent components
• Primarily useful for programmatic component creation with mount()
• The returned map includes all contexts from the component tree above the current component
• Modifying the returned map does not affect the parent’s context