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

passes svelte-check

Browse source
This commit is contained in:
hobbes7878 2025-04-18 21:22:38 +01:00
parent 6c38ba29e8
commit fd585030a0
Failed to extract signature
29 changed files with 129 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/actions/cssVariables/index.js → src/actions/cssVariables/index.ts
View file

@ -1,11 +1,11 @@
// Shamelessly stolen from: https://github.com/kaisermann/svelte-css-vars
export default (node, props) => {
export default (node: HTMLElement, props: Record<string, string>) => {
Object.entries(props).forEach(([key, value]) => {
node.style.setProperty(`--${key}`, value);
});
return {
update(newProps) {
update(newProps: Record<string, string>) {
Object.entries(newProps).forEach(([key, value]) => {
node.style.setProperty(`--${key}`, value);
delete props[key];

6
src/actions/resizeObserver/index.js → src/actions/resizeObserver/index.ts
View file

@ -1,8 +1,8 @@
// Shamelessly stolen from https://github.com/sveltejs/svelte/issues/7583#issue-1260717165
let observer;
let callbacks;
let observer: ResizeObserver;
let callbacks: WeakMap<Element, (el: Element) => unknown>;
export default (element, onResize) => {
export default (element: HTMLElement, onResize: (el: Element) => unknown) => {
if (!observer) {
callbacks = new WeakMap();
observer = new ResizeObserver((entries) => {

2
src/components/Analytics/providers/chartbeat.ts
View file

@ -12,7 +12,7 @@ const attachScript = () => {
e.type = 'text/javascript';
e.async = true;
e.src = URL;
n.parentNode.insertBefore(e, n);
n.parentNode!.insertBefore(e, n);
};
export default (authors: { name: string }[]) => {

2
src/components/Analytics/providers/ga.ts
View file

@ -12,7 +12,7 @@ const attachScript = () => {
e.type = 'text/javascript';
e.async = true;
e.src = URL;
n.parentNode.insertBefore(e, n);
n.parentNode!.insertBefore(e, n);
};
export default () => {

2
src/components/Article/Article.svelte
View file

@ -13,7 +13,7 @@
wider: number;
}
import cssVariables from '../../actions/cssVariables/index.js';
import cssVariables from '../../actions/cssVariables/index';
interface Props {
/** Set to true for embeddables. */
embedded?: boolean;

13
src/components/Byline/Byline.svelte
View file

@ -1,4 +1,3 @@
<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
<!-- @component `Byline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-text-elements-byline--docs) -->
<script lang="ts">
import { getAuthorPageUrl } from '../../utils';
@ -145,14 +144,16 @@
{@render updated()}
</time>
</div>
{:else if isValidDate(publishTime) && isValidDate(updateTime)}
{:else if isValidDate(publishTime) && isValidDate(updateTime || '')}
<div class="whitespace-nowrap inline-block">
Last updated
<time datetime={updateTime}>
{#if areSameDay(new Date(publishTime), new Date(updateTime))}
{formatTime(updateTime)}
{#if areSameDay(new Date(publishTime), new Date(updateTime || new Date()))}
{formatTime(updateTime || '')}
{:else}
{apdate(new Date(updateTime))}&nbsp;&nbsp;{formatTime(updateTime)}
{apdate(
new Date(updateTime || new Date())
)}&nbsp;&nbsp;{formatTime(updateTime || '')}
{/if}
</time>
</div>
@ -164,7 +165,7 @@
<style lang="scss">
@use '../../scss/mixins' as *;
.byline-container {
.byline {
a {
&:hover {
text-decoration-line: underline;

15
src/components/DatawrapperChart/DatawrapperChart.svelte
View file

@ -1,4 +1,3 @@
<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
<!-- @component `DatawrapperChart` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-datawrapperchart--docs) -->
<script lang="ts">
import { onMount, onDestroy, type Snippet } from 'svelte';
@ -9,9 +8,9 @@
interface Props {
/** Title of the graphic */
title: string | null;
title?: string;
/** Description of the graphic, passed in as a markdown string. */
description: string | null;
description?: string;
/**
* iframe title
*/
@ -19,7 +18,7 @@
/**
* Notes to the graphic, passed in as a markdown string.
*/
notes: string | null;
notes?: string;
/**
* iframe aria label
*/
@ -49,10 +48,10 @@
}
let {
title = null,
description = null,
title,
description,
frameTitle = '',
notes = null,
notes,
ariaLabel = '',
id = '',
src,
@ -65,11 +64,13 @@
let frameElement: HTMLElement;
// eslint-disable-next-line
const frameFiller = (e: any) => {
if (void 0 !== e.data['datawrapper-height']) {
const t = [frameElement];
for (const a in e.data['datawrapper-height']) {
for (let r = 0; r < t.length; r++) {
// @ts-ignore OK here
if (t[r].contentWindow === e.source) {
t[r].style.height = e.data['datawrapper-height'][a] + 'px';
}

10
src/components/GraphicBlock/demo/ai2svelte/ai-chart.svelte
View file

@ -6,13 +6,8 @@
import chartSm from '../imgs/ai-chart-sm.png';
// @ts-ignore img
import chartMd from '../imgs/ai-chart-md.png';
interface Props {
// svelte-ignore unused-export-let
basePath?: string;
}
let { basePath = './' }: Props = $props();
let width = $state(null);
let width = $state<number>();
</script>
<!-- Generated by ai2html v0.100.0 - 2021-09-29 12:37 -->
@ -25,7 +20,6 @@
<div
id="g-_ai-chart-xs-img"
class="g-aiImg"
alt=""
style={`background-image: url(${chartXs});`}
></div>
<div
@ -158,7 +152,6 @@
<div
id="g-_ai-chart-sm-img"
class="g-aiImg"
alt=""
style={`background-image: url(${chartSm});`}
></div>
<div
@ -291,7 +284,6 @@
<div
id="g-_ai-chart-md-img"
class="g-aiImg"
alt=""
style={`background-image: url(${chartMd});`}
></div>
<div

2
src/components/Headline/demo/graphic.svelte
View file

@ -11,7 +11,7 @@
import chartXl from './graphic-xl.png';
// export let assetsPath = './';
let width = $state(null);
let width = $state();
</script>
<div id="g-graphic-box" bind:clientWidth={width}>

8
src/components/HeroHeadline/demo/graphics/crash.svelte
View file

@ -1,6 +1,6 @@
<script>
// export let assetsPath = './';
let width = $state(null);
let width = $state();
// @ts-ignore img
import chartXs from './CRASH_1-xs.jpeg';
@ -26,7 +26,6 @@
<div
id="g-CRASH_1-xs-img"
class="g-aiImg"
alt=""
style={`background-image: url(${chartXs});`}
></div>
<div
@ -79,7 +78,6 @@
<div
id="g-CRASH_1-sm-img"
class="g-aiImg"
alt=""
style={`background-image: url(${chartSm});`}
></div>
<div
@ -132,7 +130,6 @@
<div
id="g-CRASH_1-md-img"
class="g-aiImg"
alt=""
style={`background-image: url(${chartMd});`}
></div>
<div
@ -193,7 +190,6 @@
<div
id="g-CRASH_1-lg-img"
class="g-aiImg"
alt=""
style={`background-image: url(${chartLg});`}
></div>
<div
@ -254,7 +250,6 @@
<div
id="g-CRASH_1-xl-img"
class="g-aiImg"
alt=""
style={`background-image: url(${chartXl});`}
></div>
<div
@ -315,7 +310,6 @@
<div
id="g-CRASH_1-xl_copy-img"
class="g-aiImg"
alt=""
style={`background-image: url(${chartXxl});`}
></div>
<div

2
src/components/HeroHeadline/demo/graphics/quakemap.svelte
View file

@ -1,5 +1,5 @@
<script>
let width = $state(null);
let width = $state();
// @ts-ignore raw
import chartXs from './quake-map-top-xs.jpeg';

6
src/components/PhotoPack/PhotoPack.stories.svelte
View file

@ -18,7 +18,7 @@
});
</script>
<script>
<script lang="ts">
const defaultImages = [
{
src: 'https://graphics.thomsonreuters.com/cdn/django-tools/media/graphics-gallery/galleries/world-cup-2022/spain-germany-11-27/2022-11-27T194630Z_544493697_UP1E.jpeg',
@ -85,8 +85,8 @@
const archieMLBlock = {
id: 'my-photo-pack',
class: 'mb-2',
width: 'wide',
textWidth: 'normal',
width: 'wide' as const,
textWidth: 'normal' as const,
gap: Number('15'),
images: archieMLImages,
layouts: [

15
src/components/Scroller/ScrollerBase/index.svelte
View file

@ -128,15 +128,16 @@
let background: HTMLElement;
let left;
// Target compiler option to es6 or higher for NodeListOf<T> to be iterable.
let sections: NodeListOf<HTMLElement>;
let sections: ReturnType<typeof document.querySelectorAll> | undefined =
$state();
let wh = $state(0);
let fixed = $state(false);
let offset_top = 0;
let width = 1;
let top_px = Math.round(top * wh);
let bottom_px = Math.round(bottom * wh);
let threshold_px = Math.round(threshold * wh);
let top_px = $derived(Math.round(top * wh));
let bottom_px = $derived(Math.round(bottom * wh));
let threshold_px = $derived(Math.round(threshold * wh));
let style = $derived(`
position: ${fixed ? 'fixed' : 'absolute'};
@ -194,11 +195,11 @@
fixed = true;
}
for (let i = 0; i < sections.length; i++) {
const section = sections[i];
for (let i = 0; i < sections!.length; i++) {
const section = sections![i];
const { top } = section.getBoundingClientRect();
const next = sections[i + 1];
const next = sections![i + 1];
const bottom = next ? next.getBoundingClientRect().top : fg.bottom;
offset = (threshold_px - top) / (bottom - top);

5
src/components/Scroller/demo/components/ai2svelte/ai-foreground.svelte
View file

@ -12,7 +12,6 @@
<div
id="g-Body-issues-key-xs-img"
class="g-aiImg"
alt=""
style="background-image: url({stepXs});"
></div>
<div
@ -110,8 +109,4 @@
font-weight: 400;
height: 19px;
}
/* Custom CSS */
.text {
}
</style>

9
src/components/Scroller/demo/components/ai2svelte/ai-scroller-1.svelte
View file

@ -1,11 +1,11 @@
<script>
<script lang="ts">
// Hard-coding for demo purposes only...
import stepXl from './images/step-1-xl.png';
import stepLg from './images/step-1-lg.png';
import stepMd from './images/step-1-md.png';
import stepSm from './images/step-1-sm.png';
import stepXs from './images/step-1-xs.png';
let width = $state();
let width = $state<number>();
</script>
<!-- Generated by ai2html v0.100.0 - 2021-09-30 14:21 -->
@ -18,7 +18,6 @@
<div
id="g-step-1-xl-img"
class="g-aiImg"
alt=""
style="background-image: url({stepXl});"
></div>
</div>
@ -30,7 +29,6 @@
<div
id="g-step-1-lg-img"
class="g-aiImg"
alt=""
style="background-image: url({stepLg});"
></div>
</div>
@ -42,7 +40,6 @@
<div
id="g-step-1-md-img"
class="g-aiImg"
alt=""
style="background-image: url({stepMd});"
></div>
</div>
@ -54,7 +51,6 @@
<div
id="g-step-1-sm-img"
class="g-aiImg"
alt=""
style="background-image: url({stepSm});"
></div>
</div>
@ -66,7 +62,6 @@
<div
id="g-step-1-xs-img"
class="g-aiImg"
alt=""
style="background-image: url({stepXs});"
></div>
</div>

4
src/components/Scroller/demo/components/ai2svelte/ai-scroller-2.svelte
View file

@ -1,4 +1,4 @@
<script>
<script lang="ts">
// Hard-coding for demo purposes only...
// @ts-ignore img
import stepXl from './images/step-2-xl.png';
@ -10,7 +10,7 @@
import stepSm from './images/step-2-sm.png';
// @ts-ignore img
import stepXs from './images/step-2-xs.png';
let width = $state(null);
let width = $state<null | number>(null);
</script>
<!-- Generated by ai2html v0.100.0 - 2021-09-30 14:20 -->

4
src/components/Scroller/demo/components/ai2svelte/ai-scroller-3.svelte
View file

@ -1,4 +1,4 @@
<script>
<script lang="ts">
// Hard-coding for demo purposes only...
// @ts-ignore img
import stepXl from './images/step-3-xl.png';
@ -10,7 +10,7 @@
import stepSm from './images/step-3-sm.png';
// @ts-ignore img
import stepXs from './images/step-3-xs.png';
let width = $state(null);
let width = $state<null | number>(null);
</script>
<!-- Generated by ai2html v0.100.0 - 2021-09-30 14:28 -->

2
src/components/SiteFooter/LegalLinks.svelte
View file

@ -37,7 +37,7 @@
</section>
<p class="disclaimer">
All quotes delayed a minimum of 15 minutes. <a
href={normalizeUrl(links.disclaimer_link)}
href={normalizeUrl(links.disclaimer_link || '')}
>See here for a complete list of exchanges and delays</a
>.
</p>

10
src/components/Theme/@types/component.ts
View file

@ -1,4 +1,4 @@
interface Colour {
export interface Colour {
background: string;
'text-primary': string;
'text-secondary': string;
@ -8,7 +8,7 @@ interface Colour {
'brand-shadow': string;
}
interface FontFamily {
export interface FontFamily {
serif: string;
'sans-serif': string;
monospace: string;
@ -18,7 +18,7 @@ interface FontFamily {
note: string;
}
interface FontSize {
export interface FontSize {
xxs: string;
xs: string;
sm: string;
@ -32,12 +32,12 @@ interface FontSize {
'6xl': string;
}
interface Font {
export interface Font {
family: FontFamily;
size: FontSize;
}
interface CustomFont {
export interface CustomFont {
family?: Partial<FontFamily>;
size?: Partial<FontSize>;
}

5
src/components/Theme/Theme.svelte
View file

@ -4,15 +4,14 @@
import dark from './themes/dark.js';
/**
* Pre-made themes you can import.
* @type {{ light, dark }}
*/
export const themes = { light, dark };
</script>
<script lang="ts">
// Utils
import flatten from './utils/flatten';
import mergeThemes from './utils/merge';
import flatten from './utils/flatten.js';
import mergeThemes from './utils/merge.js';
// Types
import type { CustomTheme } from './@types/component';

18
src/components/Theme/utils/flatten.js → src/components/Theme/utils/flatten.ts
View file

@ -1,4 +1,5 @@
function isBuffer(obj) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function isBuffer(obj: any): boolean {
return (
obj &&
obj.constructor &&
@ -7,13 +8,20 @@ function isBuffer(obj) {
);
}
const transformKey = (key) => key.replace(/[^a-z0-9-]/gi, '');
const transformKey = (key: string): string => key.replace(/[^a-z0-9-]/gi, '');
export default function flatten(target) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export default function flatten<T extends Record<string, any>>(target: T) {
const delimiter = '-';
const output = {};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const output: Record<string, any> = {};
function step(object, prev, currentDepth = 1) {
function step(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
object: Record<string, any>,
prev?: string,
currentDepth = 1
): void {
Object.keys(object).forEach(function (key) {
const value = object[key];
const isArray = Array.isArray(value);

23
src/components/Theme/utils/merge.js
View file

@ -1,23 +0,0 @@
function isObject(item) {
return item && typeof item === 'object' && !Array.isArray(item);
}
/**
* Deep merges theme objects.
*/
export default function merge(target, ...sources) {
if (!sources.length) return target;
const source = sources.shift();
if (isObject(target) && isObject(source)) {
for (const key in source) {
if (isObject(source[key])) {
if (!target[key]) Object.assign(target, { [key]: {} });
merge(target[key], source[key]);
} else {
Object.assign(target, { [key]: source[key] });
}
}
}
return merge(target, ...sources);
}

31
src/components/Theme/utils/merge.ts Normal file
View file

@ -0,0 +1,31 @@
import type { Theme, CustomTheme } from '../@types/component';
function isObject(item: unknown): item is Record<string, unknown> {
return item !== null && typeof item === 'object' && !Array.isArray(item);
}
/**
* Deep merges theme objects.
*/
export default function merge<T extends Record<string, unknown>>(
target: T,
...sources: (Theme | CustomTheme)[]
): T {
if (!sources.length) return target;
const source = sources.shift();
if (isObject(target) && isObject(source)) {
for (const key in source) {
if (isObject(source[key])) {
if (!target[key]) Object.assign(target, { [key]: {} });
merge(
target[key] as Record<string, unknown>,
source[key] as Record<string, unknown>
);
} else {
Object.assign(target, { [key]: source[key] });
}
}
}
return merge(target, ...sources);
}

14
src/components/Visible/Visible.mdx
View file

@ -19,12 +19,14 @@ By default, `visible` will switch between `false` and `true` whenever the elemen
import { Visible } from '@reuters-graphics/graphics-components';
</script>
<Visible let:visible>
{#if visible}
<p>Visible!</p>
{:else}
<p>Not yet visible.</p>
{/if}
<Visible>
{#snippet children(visible)}
{#if visible}
<p>Visible!</p>
{:else}
<p>Not yet visible.</p>
{/if}
{/snippet}
</Visible>
```

13
src/components/Visible/stories/snippets/default.svelte
View file

@ -1,13 +0,0 @@
<script>
import { Visible } from '@reuters-graphics/graphics-components';
</script>
<Visible>
{#snippet children({ visible })}
{#if visible}
<p>Visible!</p>
{:else}
<p>Not yet visible.</p>
{/if}
{/snippet}
</Visible>

2
src/globals.d.ts vendored
View file

@ -32,4 +32,4 @@ declare global {
}
}
export {};
export { };

6
src/index.js
View file

@ -1,6 +1,6 @@
// Actions
export { default as cssVariables } from './actions/cssVariables/index.js';
export { default as resizeObserver } from './actions/resizeObserver/index.js';
export { default as cssVariables } from './actions/cssVariables/index';
export { default as resizeObserver } from './actions/resizeObserver/index';
// Components
export {
@ -28,7 +28,7 @@ export { default as LeaderboardAd } from './components/AdSlot/LeaderboardAd.svel
export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
export { default as PymChild } from './components/PymChild/PymChild.svelte';
export { pym } from './components/PymChild/state.svelte.js';
export { pym } from './components/PymChild/state.svelte';
export { default as ReferralBlock } from './components/ReferralBlock/ReferralBlock.svelte';
export { default as ReutersGraphicsLogo } from './components/ReutersGraphicsLogo/ReutersGraphicsLogo.svelte';
export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';

19
src/journalize.d.ts vendored Normal file
View file

@ -0,0 +1,19 @@
declare module 'journalize' {
/**
* Returns an AP-formatted date string that corresponds with the supplied
* Date. If an `input` is not passed, it will use the result of `new Date();`.
*
* @param date - The supplied Date
* @returns The converted date as a string
*/
export function apdate(date?: Date): string;
/**
* Alters a string or number to include commas. If `val` is undefined or null,
* an empty string is returned.
*
* @param val The supplied value
* @returns The converted value
*/
export function intcomma(val: number | string): string;
}

2
tsconfig.json
View file

@ -1,6 +1,7 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"lib": ["DOM", "ESNext"],
"module": "ESNext",
"target": "ESNext",
"declaration": true,
@ -30,6 +31,7 @@
"*.ts",
"*.js",
"*.cjs",
"src/journalize.d.ts",
"src/docs/**/*.css"
],
"exclude": ["dist", "eslint.config.js", "bin/newComponent/template/**/*"]