Getting Started

Svelte Eagle Eye is an independent state manager, which once created, can be deployed at any location in all parts of the application without further ado.

npm install --save @webkrafters/svelte-eagleeye

Creating the Svelte Eagle Eye store

To obtain a fresh context store, just call the createEagleEye(...) function.

context.svelte.ts

import { createEagleEye } from '@webkrafters/svelte-eagleeye';
const MyContext = createEagleEye({
    a: { b: { c: null, x: { y: { z: [ 2022 ] } } } }
});
export const useMyStream = MyContext.stream;
export default MyContext;

container.svelte

<script lang="ts">
    import MyContext from './context';
    import Ui from './ui';
                            
    const { ageInMinutes = 0 } = $props();

    $effect(() => MyContext.store.setState({ c: ageInMinutes }));

</script>

<Ui />

Joining the Svelte Eagle Eye change stream

Svelte Eagle Eye change stream is a reactive store whose data are automatically changing to reflect most recent changes affecting them.

It embodies the "set-it-and-forget-it" paradigm. Just set up a list of property paths to state slices to observe (see Selector Map). The context takes care of the rest.

The following shows how to join the Svelte Eagle Eye stream.

We use the context's stream(...) property to obtain an active store exposing the context change stream to our consumer component.

constants.svelte.ts

export const selectorMap = { year: 'a.b.x.y.z[0]' };

Client1.svelte

<script lang="ts">
    import { useMyStream } from './context';
    import { SelectorMap } from './constants';

    const { data } = useMyStream( SelectorMap );

</script>
<div>Year: { data.year }</div>;

Client2.svelte

<script lang="ts">
    import { useMyStream } from './context';
    import { SelectorMap } from './constants';

    const { data, setState, resetState } = useMyStream( SelectorMap );

    const onChange = e => setState({
        a: { b: { x: { y: { z: { 0: e.target.value } } } } }
    });

    $effect(() => data.year > 2049 && resetState([ 'a.b.c' ]);
</script>
<div>Year: <input type="number" on:change="onChange" /></div>

Ui.svelte

<script lang="ts">
    import Client1 from './Client1';
    import Client2 from './Client2';
</script>
<div>
    <Client1 />
    <Client2 />
</div>

The Svelte Eagle Eye runs decoupled from its embodying application, simply providing an active place for the application to accumulate, access, update and delete its various states as needed in ways that maintains immutability and integrity of state data. The following is a contrived snippet to demonstrate.

app.svelte

<script module>
    let numCreated = 0;
</script>
<script lang="ts">
    import { onMount } from 'svelte';
    import Container from './container';

    const age = $state( 0 );
    const testNumber = $state( 0 );

    onMount(() => { testNumber = ++numCreated });

    $effect(() => {
        const t = setTimeout(() => { age++ }, 6e4 );
        return () => clearTimeout( t );
    });
</script>
<div>
    <h2>App instance #: { testNumber }</H2>
    <Container ageInMinutes={ age } />
</div>