Hooks in svelte component? (not really a typhon question but nowhere else to ask :)

import { writable } from 'svelte/store';

export const myStore = writable(false);

import { writable } from 'svelte/store';

export const myStore = writable(false);

import { myStore } from './myStore.js';

Hooks.on('renderChatMessage', (message, html) =>
{
   const flagData = message.getFlag('your-package-name', 'data');

   if (typeof flagData === 'object')
   {
      message._svelteComponent = new MyChatMessage({ target: html[0], props: { ...flagData, myStore });
   }
});

import { myStore } from './myStore.js';

Hooks.on('renderChatMessage', (message, html) =>
{
   const flagData = message.getFlag('your-package-name', 'data');

   if (typeof flagData === 'object')
   {
      message._svelteComponent = new MyChatMessage({ target: html[0], props: { ...flagData, myStore });
   }
});

Hooks.on("targetToken", (User, Token, targeted) => {
  const unsubscribe = isContest.subscribe((obj) => {
    Object.entries(obj).forEach(([id, state]) => {
      const cardUsers = findKeysByValue(Token.actor.ownership, 3);
      if (cardUsers.includes(User._id)) {
        if (state === true) {
          targets.add(id, getUserTargets(User).map(t => ({ avatar: t.document.texture.src, actor: t.actor })))
        }
      }
    })
  })
  unsubscribe();
})

Hooks.on("targetToken", (User, Token, targeted) => {
  const unsubscribe = isContest.subscribe((obj) => {
    Object.entries(obj).forEach(([id, state]) => {
      const cardUsers = findKeysByValue(Token.actor.ownership, 3);
      if (cardUsers.includes(User._id)) {
        if (state === true) {
          targets.add(id, getUserTargets(User).map(t => ({ avatar: t.document.texture.src, actor: t.actor })))
        }
      }
    })
  })
  unsubscribe();
})

  $: if ($isContest) {
    console.log('update message');
    message.update({
      "flags.surge.data.targets": $targets[message._id] || [],
    });
  }

  $: if ($isContest) {
    console.log('update message');
    message.update({
      "flags.surge.data.targets": $targets[message._id] || [],
    });
  }

import { get } from 'svelte/store';

const value = get(isContest);

import { get } from 'svelte/store';

const value = get(isContest);

function createTargetStore() {
  return writable(false);
}
export const gameTargets = createTargetStore()

function createTargetStore() {
  return writable(false);
}
export const gameTargets = createTargetStore()

Hooks.on("targetToken", (User, Token, targeted) => {
  gameTargets.set(game.user.targets);
});

Hooks.on("targetToken", (User, Token, targeted) => {
  gameTargets.set(game.user.targets);
});

Hooks.on('renderChatMessage', (message, html) => {
  // Find associated flag data scoped to your module or system ID. This is the easiest way to determine that this message is
  // associated with your module and has a Svelte component attached to the message content.
  const flagData = message.getFlag('surge', 'data');
  if (typeof flagData === 'object') {
    // Add the svelte component to the message instance loaded in client side memory.
    message._svelteComponent = new SurgeRoll({ target: html[0], props: { ...flagData, message: message } });
  }
});

Hooks.on('preDeleteChatMessage', (message) => {
  // Find associated flag data scoped to your module ID. This is the easiest way to determine that this message is
  // associated with your module and has a Svelte component attached to the message content.
  const flagData = message.getFlag('surge', 'data');
  // Also ensure that the Svelte component exists
  if (typeof flagData === 'object' && typeof message?._svelteComponent?.$destroy === 'function') {
    // Manually destroy Svelte component when the chat message document is being deleted.
    message._svelteComponent.$destroy();
  }
});

Hooks.on('renderChatMessage', (message, html) => {
  // Find associated flag data scoped to your module or system ID. This is the easiest way to determine that this message is
  // associated with your module and has a Svelte component attached to the message content.
  const flagData = message.getFlag('surge', 'data');
  if (typeof flagData === 'object') {
    // Add the svelte component to the message instance loaded in client side memory.
    message._svelteComponent = new SurgeRoll({ target: html[0], props: { ...flagData, message: message } });
  }
});

Hooks.on('preDeleteChatMessage', (message) => {
  // Find associated flag data scoped to your module ID. This is the easiest way to determine that this message is
  // associated with your module and has a Svelte component attached to the message content.
  const flagData = message.getFlag('surge', 'data');
  // Also ensure that the Svelte component exists
  if (typeof flagData === 'object' && typeof message?._svelteComponent?.$destroy === 'function') {
    // Manually destroy Svelte component when the chat message document is being deleted.
    message._svelteComponent.$destroy();
  }
});

  import { gameTargets } from "~/stores/contests";
  $: if ($gameTargets) {
    message.update({
      flags: {
        surge: {
          data: {
            targets: Array.from($gameTargets).map((target) => {
              return {
                avatar: target.document.texture.src,
                actor: { name: target.document.name, uuid: target.document.uuid },
              };
            }),
          },
        },
      },
    });
    console.log("message", message.flags.surge.data.targets);
  }

  import { gameTargets } from "~/stores/contests";
  $: if ($gameTargets) {
    message.update({
      flags: {
        surge: {
          data: {
            targets: Array.from($gameTargets).map((target) => {
              return {
                avatar: target.document.texture.src,
                actor: { name: target.document.name, uuid: target.document.uuid },
              };
            }),
          },
        },
      },
    });
    console.log("message", message.flags.surge.data.targets);
  }

message._svelteComponent = new SurgeRoll({ target: html[0], props: { ...flagData, message: message } });

message._svelteComponent = new SurgeRoll({ target: html[0], props: { ...flagData, message: message } });

Hooks.on("targetToken", (User, Token, targeted) => {
   gameTargets.set(Array.from(game.user.targets).map((target) => {
      return {
         avatar: target.document.texture.src,
         actor: { name: target.document.name, uuid: target.document.uuid },
      };
   }));
});

Hooks.on("targetToken", (User, Token, targeted) => {
   gameTargets.set(Array.from(game.user.targets).map((target) => {
      return {
         avatar: target.document.texture.src,
         actor: { name: target.document.name, uuid: target.document.uuid },
      };
   }));
});

Hooks.on("targetToken", async (User, Token, targeted) => {
  const targets = await Promise.all(
    game.user.targets
      .filter((target) => {
        if (Token._id === target._id && target == false) return false;
        return true;
      })
      .map(async (target) => {
        const mapped = {
          avatar: target.document.texture.src,
          actor: target.actor,
          tokenUuid: target.document.uuid,
          actorId: target.actorId,
          items: getContestItems(target.actor.items),
          hitLocation: await getHitLocation(),
          clickedByUserId: User._id,
        };
        return mapped;
      })
  );

  gameTargets.set(targets);
});

Hooks.on("targetToken", async (User, Token, targeted) => {
  const targets = await Promise.all(
    game.user.targets
      .filter((target) => {
        if (Token._id === target._id && target == false) return false;
        return true;
      })
      .map(async (target) => {
        const mapped = {
          avatar: target.document.texture.src,
          actor: target.actor,
          tokenUuid: target.document.uuid,
          actorId: target.actorId,
          items: getContestItems(target.actor.items),
          hitLocation: await getHitLocation(),
          clickedByUserId: User._id,
        };
        return mapped;
      })
  );

  gameTargets.set(targets);
});

function getUserTargets(User, targets) {
  const targetsArray = Array.from(targets);
  if (targetsArray.length == 0) return []

  return targetsArray.filter((target) => {
    return target.clickedByUserId === User._id
  });
}

async function updateTargets(targets) {
    console.log("targets", targets);
    await message.update({
      flags: {
        surge: {
          data: {
            targets: targets,
          },
        },
      },
    });
  }

  $: currentValidCanvasTargets = getUserTargets(message.user, $gameTargets);
  $: updateTargets(currentValidCanvasTargets);

function getUserTargets(User, targets) {
  const targetsArray = Array.from(targets);
  if (targetsArray.length == 0) return []

  return targetsArray.filter((target) => {
    return target.clickedByUserId === User._id
  });
}

async function updateTargets(targets) {
    console.log("targets", targets);
    await message.update({
      flags: {
        surge: {
          data: {
            targets: targets,
          },
        },
      },
    });
  }

  $: currentValidCanvasTargets = getUserTargets(message.user, $gameTargets);
  $: updateTargets(currentValidCanvasTargets);

Hooks.on('renderChatMessage', (message, html) => {
  const flagData = message.getFlag('surge', 'data');
  if (typeof flagData === 'object') {
    message._svelteComponent = new SurgeRoll(
      {
        target: html[0],
        props: {
          ...flagData,
          message          //<-- here maybe?
        }
      }
    )
  }
});

Hooks.on('renderChatMessage', (message, html) => {
  const flagData = message.getFlag('surge', 'data');
  if (typeof flagData === 'object') {
    message._svelteComponent = new SurgeRoll(
      {
        target: html[0],
        props: {
          ...flagData,
          message          //<-- here maybe?
        }
      }
    )
  }
});