<script context="module" lang="ts">
  import type { Load } from '@sveltejs/kit';
  import { allSettled, fork, serialize, root } from 'effector-root';
  import { order, orderSet } from '../features/order';

  export const load: Load = async () => {
    const scope = fork(root);
    await allSettled(orderSet, { scope, params: 'order from ssr' });
    return {
      props: {
        pageProps: serialize(scope, { onlyChanges: true }),
      },
    };
  };
</script>

<script lang="ts">
  import { getScope, bindStore } from '../scope';
  import { hydrate } from 'effector-root';
  export let pageProps = {};

  hydrate(getScope(), { values: pageProps });

  const ord = bindStore(order);
</script>

<span>{$ord}</span>

// model.ts
export const orderSet = createEvent<string>();

export const order = restore(orderSet, '');

sample({
  source: orderSet,
  target: analyticsFx,
  greedy: true,
});

const displayNameAtom = declareAtom($ =>
    $(isFirstNameShortAtom) ? $(fullNameAtom) : $(firstNameAtom),
  )