update: reuse function from component.

src/lib/components/id.svelte

@@ -1,11 +1,5 @@
-<script lang="ts">
-    import { Copy } from '.';
-
-    export let value: string;
-    export let event: string = null;
-    export let centered = true;
-
-    function truncateText(node: HTMLElement) {
+<script context="module" lang="ts">
+    export function truncateText(node: HTMLElement) {
         const MAX_TRIES = 100;
         let originalText = node.textContent;
         function checkOverflow() {
@@ -47,6 +41,14 @@
     }
 </script>
 
+<script lang="ts">
+    import { Copy } from '.';
+
+    export let value: string;
+    export let event: string = null;
+    export let centered = true;
+</script>
+
 <Copy {value} {event} appendTo="parent">
     <div
         class="interactive-text-output is-buttons-on-top"

src/lib/components/index.ts

@@ -56,7 +56,7 @@ export { default as Limit } from './limit.svelte';
 export { default as PaginationWithLimit } from './paginationWithLimit.svelte';
 export { default as ClickableList } from './clickableList.svelte';
 export { default as ClickableListItem } from './clickableListItem.svelte';
-export { default as Id } from './id.svelte';
+export { default as Id, truncateText } from './id.svelte';
 export * from './progressbar';
 export { default as ProgressBarBig } from './progressBarBig.svelte';
 export { default as CreditCardInfo } from './creditCardInfo.svelte';

src/lib/components/regionEndpoint.svelte

@@ -1,53 +1,11 @@
 <script lang="ts">
     import { Copy } from '.';
-    import { isValueOfStringEnum } from '$lib/helpers/types';
-    import { Flag } from '@appwrite.io/console';
     import { sdk } from '$lib/stores/sdk';
-    import { projectRegion } from '$routes/(console)/project-[region]-[project]/store';
+    import { Flag } from '@appwrite.io/console';
+    import { truncateText } from '$lib/components';
+    import { isValueOfStringEnum } from '$lib/helpers/types';
     import { getProjectEndpoint } from '$lib/helpers/project';
-
-    function truncateText(node: HTMLElement) {
-        const MAX_TRIES = 100;
-        let originalText = node.textContent;
-
-        function checkOverflow() {
-            node.textContent = originalText;
-
-            if (node.scrollWidth > node.clientWidth) {
-                let truncatedText = originalText;
-                let tries = 0;
-                while (
-                    node.scrollWidth > node.clientWidth &&
-                    truncatedText.length > 0 &&
-                    tries < MAX_TRIES
-                ) {
-                    tries++;
-                    if (truncatedText.includes('…')) {
-                        const [left, right] = truncatedText.split('…');
-                        truncatedText = `${left.slice(0, -1)}…${right.slice(1)}`;
-                    } else {
-                        const left = truncatedText.slice(0, truncatedText.length / 2);
-                        const right = truncatedText.slice(truncatedText.length / 2);
-                        truncatedText = `${left.slice(0, -1)}…${right.slice(1)}`;
-                    }
-                    node.textContent = truncatedText;
-                }
-            }
-        }
-
-        requestAnimationFrame(checkOverflow);
-        window.addEventListener('resize', checkOverflow);
-
-        return {
-            update() {
-                originalText = node.textContent;
-                checkOverflow();
-            },
-            destroy() {
-                window.removeEventListener('resize', checkOverflow);
-            }
-        };
-    }
+    import { projectRegion } from '$routes/(console)/project-[region]-[project]/store';
 
     $: flagSrc =
         $projectRegion && isValueOfStringEnum(Flag, $projectRegion.flag)