anki/ts/graphs/GraphsPage.svelte
Damien Elmes e948544b59 use local strategy for Svelte on CI
Allows some type errors to surface that were only being picked up
on Windows.

The root cause seems to be TypeScript picking up other .d.ts/.tsx
files in the same folder, which it can only do on Windows due to the
lack of sandboxing. On other platforms the other files can't be found,
and tsc changes the types into 'any'.

I experimented with modifying rules_svelte to build all .tsx files up
front and convert them to .d.ts in bulk, but ran into further issues
with conflicting types, as the typings in svelte2tsx seem to conflict
with Svelte's built-in types, and passing the dependencies in explicitly
causes them to be checked even though --skipLibCheck is passed in to
TypeScript.

Forcing sandboxing off is an ugly hack, and our best approach moving
forward may be to switch to ts_project for the Svelte generation -
it does appear that rules_nodejs favours it over ts_library anyway.
2020-12-29 14:50:33 +10:00

63 lines
1.6 KiB
Svelte

<script context="module">
</script>
<script lang="typescript">
import type { SvelteComponent } from "svelte/internal";
import type { I18n } from "anki/i18n";
import type pb from "anki/backend_proto";
import { getGraphData, RevlogRange } from "./graph-helpers";
export let i18n: I18n;
export let nightMode: boolean;
export let graphs: SvelteComponent[];
export let search: string;
export let days: number;
export let controller: SvelteComponent;
let active = false;
let sourceData: pb.BackendProto.GraphsOut | null = null;
let revlogRange: RevlogRange;
const refreshWith = async (search: string, days: number) => {
active = true;
try {
sourceData = await getGraphData(search, days);
revlogRange = days > 365 || days === 0 ? RevlogRange.All : RevlogRange.Year;
} catch (e) {
sourceData = null;
alert(i18n.tr(i18n.TR.STATISTICS_ERROR_FETCHING));
}
active = false;
};
const refresh = (event: CustomEvent) => {
refreshWith(event.detail.search, event.detail.days);
};
refreshWith(search, days);
</script>
{#if controller}
<svelte:component
this={controller}
{i18n}
{search}
{days}
{active}
on:update={refresh} />
{/if}
{#if sourceData}
<div tabindex="-1" class="no-focus-outline">
{#each graphs as graph}
<svelte:component
this={graph}
{sourceData}
{revlogRange}
{i18n}
{nightMode} />
{/each}
</div>
{/if}