wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pym state export

Browse source
This commit is contained in:
hobbes7878 2025-04-18 16:21:25 +01:00
parent 912e2897ed
commit 55e344a677
Failed to extract signature
4 changed files with 9 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/PymChild/PymChild.mdx
View file

@ -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>

4
src/components/PymChild/PymChild.svelte
View file

@ -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>

6
src/components/PymChild/state.svelte.ts
View file

@ -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 });

2
src/index.js
View file

@ -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';