From 55e344a677c6d8226e6b4ba7a478adc6abc403d7 Mon Sep 17 00:00:00 2001
From: hobbes7878 <Jon.McClure@thomsonreuters.com>
Date: Fri, 18 Apr 2025 16:21:25 +0100
Subject: [PATCH] pym state export

---
 src/components/PymChild/PymChild.mdx    | 9 +++------
 src/components/PymChild/PymChild.svelte | 4 ++--
 src/components/PymChild/state.svelte.ts | 6 +++---
 src/index.js                            | 2 +-
 4 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/components/PymChild/PymChild.mdx b/src/components/PymChild/PymChild.mdx
index 927d6bd3..00d995dd 100644
--- a/src/components/PymChild/PymChild.mdx
+++ b/src/components/PymChild/PymChild.mdx
@@ -16,17 +16,14 @@ The `PymChild` component creates a [Pym.js](https://blog.apps.npr.org/pym.js/) c
 <PymChild polling={500} />
 ```
 
-You can access the Pym.js child via `pymChildState` in other components to send custom height updates to parent frames:
+You can access the Pym.js child via `pym` in other components to send custom height updates to parent frames:
 
 ```svelte
 <script>
-  import {
-    PymChild,
-    pymChildState,
-  } from '@reuters-graphics/graphics-components';
+  import { PymChild, pym } from '@reuters-graphics/graphics-components';
 
   const updateHeight = () => {
-    if (pymChildState.pymChild) pymChildState.pymChild.sendHeight();
+    if (pym.child) pym.child.sendHeight();
   };
 </script>
 
diff --git a/src/components/PymChild/PymChild.svelte b/src/components/PymChild/PymChild.svelte
index f7cb9831..c7c5a552 100644
--- a/src/components/PymChild/PymChild.svelte
+++ b/src/components/PymChild/PymChild.svelte
@@ -1,7 +1,7 @@
 <!-- @component `PymChild` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-utilities-pymchild--docs) -->
 <script lang="ts">
   import pym from 'pym.js';
-  import { pymChildState } from './state.svelte.js';
+  import { pym as pymState } from './state.svelte.js';
   import { onMount } from 'svelte';
 
   interface Props {
@@ -13,6 +13,6 @@
 
   onMount(() => {
     let pymChild = new pym.Child({ polling });
-    pymChildState.pymChild = pymChild;
+    pymState.child = pymChild;
   });
 </script>
diff --git a/src/components/PymChild/state.svelte.ts b/src/components/PymChild/state.svelte.ts
index 3dfee824..71c43a67 100644
--- a/src/components/PymChild/state.svelte.ts
+++ b/src/components/PymChild/state.svelte.ts
@@ -1,5 +1,5 @@
-import pym from 'pym.js';
+import type p from 'pym.js';
 
-type PymChildState = { pymChild: pym.Child | null };
+type PymChild = { child: p.Child | null };
 
-export const pymChildState: PymChildState = $state({ pymChild: null });
+export const pym = $state<PymChild>({ child: null });
diff --git a/src/index.js b/src/index.js
index f758e29c..6f4ee47b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -30,7 +30,7 @@ export { default as PaddingReset } from './components/PaddingReset/PaddingReset.
 export { default as PhotoCarousel } from './components/PhotoCarousel/PhotoCarousel.svelte';
 export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';
-export { pymChildStore } from './components/PymChild/stores.js';
+export { pym } from './components/PymChild/state.svelte.js';
 export { staticMarkdown } from './components/Markdown/state.svelte.js';
 export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlock.svelte';
 export { default as ReutersGraphicsLogo } from './components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';