45f5709214
* Fix .no-reduce-motion missing from graphs spinner, and not being honored
* Begin migration from protobuf.js -> protobuf-es
Motivation:
- Protobuf-es has a nicer API: messages are represented as classes, and
fields which should exist are not marked as nullable.
- As it uses modules, only the proto messages we actually use get included
in our bundle output. Protobuf.js put everything in a namespace, which
prevented tree-shaking, and made it awkward to access inner messages.
- ./run after touching a proto file drops from about 8s to 6s on my machine. The tradeoff
is slower decoding/encoding (#2043), but that was mainly a concern for the
graphs page, and was unblocked by
37151213cd
Approach/notes:
- We generate the new protobuf-es interface in addition to existing
protobuf.js interface, so we can migrate a module at a time, starting
with the graphs module.
- rslib:proto now generates RPC methods for TS in addition to the Python
interface. The input-arg-unrolling behaviour of the Python generation is
not required here, as we declare the input arg as a PlainMessage<T>, which
marks it as requiring all fields to be provided.
- i64 is represented as bigint in protobuf-es. We were using a patch to
protobuf.js to get it to output Javascript numbers instead of long.js
types, but now that our supported browser versions support bigint, it's
probably worth biting the bullet and migrating to bigint use. Our IDs
fit comfortably within MAX_SAFE_INTEGER, but that may not hold for future
fields we add.
- Oneofs are handled differently in protobuf-es, and are going to need
some refactoring.
Other notable changes:
- Added a --mkdir arg to our build runner, so we can create a dir easily
during the build on Windows.
- Simplified the preference handling code, by wrapping the preferences
in an outer store, instead of a separate store for each individual
preference. This means a change to one preference will trigger a redraw
of all components that depend on the preference store, but the redrawing
is cheap after moving the data processing to Rust, and it makes the code
easier to follow.
- Drop async(Reactive).ts in favour of more explicit handling with await
blocks/updating.
- Renamed add_inputs_to_group() -> add_dependency(), and fixed it not adding
dependencies to parent groups. Renamed add() -> add_action() for clarity.
* Remove a couple of unused proto imports
* Migrate card info
* Migrate congrats, image occlusion, and tag editor
+ Fix imports for multi-word proto files.
* Migrate change-notetype
* Migrate deck options
* Bump target to es2020; simplify ts lib list
Have used caniuse.com to confirm Chromium 77, iOS 14.5 and the Chrome
on Android support the full es2017-es2020 features.
* Migrate import-csv
* Migrate i18n and fix missing output types in .js
* Migrate custom scheduling, and remove protobuf.js
To mostly maintain our old API contract, we make use of protobuf-es's
ability to convert to JSON, which follows the same format as protobuf.js
did. It doesn't cover all case: users who were previously changing the
variant of a type will need to update their code, as assigning to a new
variant no longer automatically removes the old one, which will cause an
error when we try to convert back from JSON. But I suspect the large majority
of users are adjusting the current variant rather than creating a new one,
and this saves us having to write proxy wrappers, so it seems like a
reasonable compromise.
One other change I made at the same time was to rename value->kind for
the oneofs in our custom study protos, as 'value' was easily confused
with the 'case/value' output that protobuf-es has.
With protobuf.js codegen removed, touching a proto file and invoking
./run drops from about 8s to 6s.
This closes #2043.
* Allow tree-shaking on protobuf types
* Display backend error messages in our ts alert()
* Make sourcemap generation opt-in for ts-run
Considerably slows down build, and not used most of the time.
373 lines
12 KiB
TypeScript
373 lines
12 KiB
TypeScript
// Copyright: Ankitects Pty Ltd and contributors
|
|
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
|
|
import type { PlainMessage } from "@bufbuild/protobuf";
|
|
import { updateDeckConfigs } from "@tslib/anki/deck_config_service";
|
|
import type {
|
|
DeckConfigsForUpdate,
|
|
DeckConfigsForUpdate_CurrentDeck,
|
|
UpdateDeckConfigsRequest,
|
|
} from "@tslib/anki/deckconfig_pb";
|
|
import { DeckConfig, DeckConfig_Config, DeckConfigsForUpdate_CurrentDeck_Limits } from "@tslib/anki/deckconfig_pb";
|
|
import { localeCompare } from "@tslib/i18n";
|
|
import { cloneDeep, isEqual } from "lodash-es";
|
|
import type { Readable, Writable } from "svelte/store";
|
|
import { get, readable, writable } from "svelte/store";
|
|
|
|
import type { DynamicSvelteComponent } from "../sveltelib/dynamicComponent";
|
|
|
|
export type DeckOptionsId = bigint;
|
|
|
|
export interface ConfigWithCount {
|
|
config: DeckConfig;
|
|
useCount: number;
|
|
}
|
|
|
|
export interface ParentLimits {
|
|
newCards: number;
|
|
reviews: number;
|
|
}
|
|
|
|
/** Info for showing the top selector */
|
|
export interface ConfigListEntry {
|
|
idx: number;
|
|
name: string;
|
|
useCount: number;
|
|
current: boolean;
|
|
}
|
|
|
|
export class DeckOptionsState {
|
|
readonly currentConfig: Writable<DeckConfig_Config>;
|
|
readonly currentAuxData: Writable<Record<string, unknown>>;
|
|
readonly configList: Readable<ConfigListEntry[]>;
|
|
readonly parentLimits: Readable<ParentLimits>;
|
|
readonly cardStateCustomizer: Writable<string>;
|
|
readonly currentDeck: DeckConfigsForUpdate_CurrentDeck;
|
|
readonly deckLimits: Writable<DeckConfigsForUpdate_CurrentDeck_Limits>;
|
|
readonly defaults: DeckConfig_Config;
|
|
readonly addonComponents: Writable<DynamicSvelteComponent[]>;
|
|
readonly v3Scheduler: boolean;
|
|
readonly newCardsIgnoreReviewLimit: Writable<boolean>;
|
|
|
|
private targetDeckId: DeckOptionsId;
|
|
private configs: ConfigWithCount[];
|
|
private selectedIdx: number;
|
|
private configListSetter!: (val: ConfigListEntry[]) => void;
|
|
private parentLimitsSetter!: (val: ParentLimits) => void;
|
|
private modifiedConfigs: Set<DeckOptionsId> = new Set();
|
|
private removedConfigs: DeckOptionsId[] = [];
|
|
private schemaModified: boolean;
|
|
|
|
constructor(targetDeckId: DeckOptionsId, data: DeckConfigsForUpdate) {
|
|
this.targetDeckId = targetDeckId;
|
|
this.currentDeck = data.currentDeck!;
|
|
this.defaults = data.defaults!.config!;
|
|
this.configs = data.allConfig.map((config) => {
|
|
const configInner = config.config!;
|
|
|
|
return {
|
|
config: configInner,
|
|
useCount: config.useCount!,
|
|
};
|
|
});
|
|
this.selectedIdx = Math.max(
|
|
0,
|
|
this.configs.findIndex((c) => c.config.id === this.currentDeck.configId),
|
|
);
|
|
this.sortConfigs();
|
|
this.v3Scheduler = data.v3Scheduler;
|
|
this.cardStateCustomizer = writable(data.cardStateCustomizer);
|
|
this.deckLimits = writable(data.currentDeck?.limits ?? createLimits());
|
|
this.newCardsIgnoreReviewLimit = writable(data.newCardsIgnoreReviewLimit);
|
|
|
|
// decrement the use count of the starting item, as we'll apply +1 to currently
|
|
// selected one at display time
|
|
this.configs[this.selectedIdx].useCount -= 1;
|
|
this.currentConfig = writable(this.getCurrentConfig());
|
|
this.currentAuxData = writable(this.getCurrentAuxData());
|
|
this.configList = readable(this.getConfigList(), (set) => {
|
|
this.configListSetter = set;
|
|
return;
|
|
});
|
|
this.parentLimits = readable(this.getParentLimits(), (set) => {
|
|
this.parentLimitsSetter = set;
|
|
return;
|
|
});
|
|
this.schemaModified = data.schemaModified;
|
|
this.addonComponents = writable([]);
|
|
|
|
// create a temporary subscription to force our setters to be set immediately,
|
|
// so unit tests don't get stale results
|
|
get(this.configList);
|
|
get(this.parentLimits);
|
|
|
|
// update our state when the current config is changed
|
|
this.currentConfig.subscribe((val) => this.onCurrentConfigChanged(val));
|
|
this.currentAuxData.subscribe((val) => this.onCurrentAuxDataChanged(val));
|
|
}
|
|
|
|
setCurrentIndex(index: number): void {
|
|
this.selectedIdx = index;
|
|
this.updateCurrentConfig();
|
|
// use counts have changed
|
|
this.updateConfigList();
|
|
}
|
|
|
|
getCurrentName(): string {
|
|
return this.configs[this.selectedIdx].config.name;
|
|
}
|
|
|
|
setCurrentName(name: string): void {
|
|
if (this.configs[this.selectedIdx].config.name === name) {
|
|
return;
|
|
}
|
|
const uniqueName = this.ensureNewNameUnique(name);
|
|
const config = this.configs[this.selectedIdx].config;
|
|
config.name = uniqueName;
|
|
if (config.id) {
|
|
this.modifiedConfigs.add(config.id);
|
|
}
|
|
this.sortConfigs();
|
|
this.updateConfigList();
|
|
}
|
|
|
|
/** Adds a new config, making it current. */
|
|
addConfig(name: string): void {
|
|
this.addConfigFrom(name, this.defaults);
|
|
}
|
|
|
|
/** Clone the current config, making it current. */
|
|
cloneConfig(name: string): void {
|
|
this.addConfigFrom(name, this.configs[this.selectedIdx].config.config!);
|
|
}
|
|
|
|
/** Clone the current config, making it current. */
|
|
private addConfigFrom(name: string, source: DeckConfig_Config): void {
|
|
const uniqueName = this.ensureNewNameUnique(name);
|
|
const config = new DeckConfig({
|
|
id: 0n,
|
|
name: uniqueName,
|
|
config: new DeckConfig_Config(cloneDeep(source)),
|
|
});
|
|
const configWithCount = { config, useCount: 0 };
|
|
this.configs.push(configWithCount);
|
|
this.selectedIdx = this.configs.length - 1;
|
|
this.sortConfigs();
|
|
this.updateCurrentConfig();
|
|
this.updateConfigList();
|
|
}
|
|
|
|
removalWilLForceFullSync(): boolean {
|
|
return !this.schemaModified && this.configs[this.selectedIdx].config.id !== 0n;
|
|
}
|
|
|
|
defaultConfigSelected(): boolean {
|
|
return this.configs[this.selectedIdx].config.id === 1n;
|
|
}
|
|
|
|
/** Will throw if the default deck is selected. */
|
|
removeCurrentConfig(): void {
|
|
const currentId = this.configs[this.selectedIdx].config.id;
|
|
if (currentId === 1n) {
|
|
throw Error("can't remove default config");
|
|
}
|
|
if (currentId !== 0n) {
|
|
this.removedConfigs.push(currentId);
|
|
this.schemaModified = true;
|
|
}
|
|
this.configs.splice(this.selectedIdx, 1);
|
|
this.selectedIdx = Math.max(0, this.selectedIdx - 1);
|
|
this.updateCurrentConfig();
|
|
this.updateConfigList();
|
|
}
|
|
|
|
dataForSaving(
|
|
applyToChildren: boolean,
|
|
): PlainMessage<UpdateDeckConfigsRequest> {
|
|
const modifiedConfigsExcludingCurrent = this.configs
|
|
.map((c) => c.config)
|
|
.filter((c, idx) => {
|
|
return (
|
|
idx !== this.selectedIdx
|
|
&& (c.id === 0n || this.modifiedConfigs.has(c.id))
|
|
);
|
|
});
|
|
const configs = [
|
|
...modifiedConfigsExcludingCurrent,
|
|
// current must come last, even if unmodified
|
|
this.configs[this.selectedIdx].config,
|
|
];
|
|
return {
|
|
targetDeckId: this.targetDeckId,
|
|
removedConfigIds: this.removedConfigs,
|
|
configs,
|
|
applyToChildren,
|
|
cardStateCustomizer: get(this.cardStateCustomizer),
|
|
limits: get(this.deckLimits),
|
|
newCardsIgnoreReviewLimit: get(this.newCardsIgnoreReviewLimit),
|
|
};
|
|
}
|
|
|
|
async save(applyToChildren: boolean): Promise<void> {
|
|
await updateDeckConfigs(
|
|
this.dataForSaving(applyToChildren),
|
|
);
|
|
}
|
|
|
|
private onCurrentConfigChanged(config: DeckConfig_Config): void {
|
|
const configOuter = this.configs[this.selectedIdx].config;
|
|
if (!isEqual(config, configOuter.config)) {
|
|
configOuter.config = config;
|
|
if (configOuter.id) {
|
|
this.modifiedConfigs.add(configOuter.id);
|
|
}
|
|
}
|
|
this.parentLimitsSetter?.(this.getParentLimits());
|
|
}
|
|
|
|
private onCurrentAuxDataChanged(data: Record<string, unknown>): void {
|
|
const current = this.getCurrentAuxData();
|
|
if (!isEqual(current, data)) {
|
|
this.currentConfig.update((config) => {
|
|
const asBytes = new TextEncoder().encode(JSON.stringify(data));
|
|
config.other = asBytes;
|
|
return config;
|
|
});
|
|
}
|
|
}
|
|
|
|
private ensureNewNameUnique(name: string): string {
|
|
const idx = this.configs.findIndex((e) => e.config.name === name);
|
|
if (idx !== -1) {
|
|
return name + (new Date().getTime() / 1000).toFixed(0);
|
|
} else {
|
|
return name;
|
|
}
|
|
}
|
|
|
|
private updateCurrentConfig(): void {
|
|
this.currentConfig.set(this.getCurrentConfig());
|
|
this.currentAuxData.set(this.getCurrentAuxData());
|
|
this.parentLimitsSetter?.(this.getParentLimits());
|
|
}
|
|
|
|
private updateConfigList(): void {
|
|
this.configListSetter?.(this.getConfigList());
|
|
}
|
|
|
|
/** Returns a copy of the currently selected config. */
|
|
private getCurrentConfig(): DeckConfig_Config {
|
|
return cloneDeep(this.configs[this.selectedIdx].config.config!);
|
|
}
|
|
|
|
/** Extra data associated with current config (for add-ons) */
|
|
private getCurrentAuxData(): Record<string, unknown> {
|
|
const conf = this.configs[this.selectedIdx].config.config!;
|
|
return bytesToObject(conf.other);
|
|
}
|
|
|
|
private sortConfigs() {
|
|
const currentConfigName = this.configs[this.selectedIdx].config.name;
|
|
this.configs.sort((a, b) => localeCompare(a.config.name, b.config.name, { sensitivity: "base" }));
|
|
this.selectedIdx = this.configs.findIndex(
|
|
(c) => c.config.name == currentConfigName,
|
|
);
|
|
}
|
|
|
|
private getConfigList(): ConfigListEntry[] {
|
|
const list: ConfigListEntry[] = this.configs.map((c, idx) => {
|
|
const useCount = c.useCount + (idx === this.selectedIdx ? 1 : 0);
|
|
return {
|
|
name: c.config.name,
|
|
current: idx === this.selectedIdx,
|
|
idx,
|
|
useCount,
|
|
};
|
|
});
|
|
return list;
|
|
}
|
|
|
|
private getParentLimits(): ParentLimits {
|
|
const parentConfigs = this.configs.filter((c) => this.currentDeck.parentConfigIds.includes(c.config.id));
|
|
const newCards = parentConfigs.reduce(
|
|
(previous, current) => Math.min(previous, current.config.config?.newPerDay ?? 0),
|
|
2 ** 31,
|
|
);
|
|
const reviews = parentConfigs.reduce(
|
|
(previous, current) => Math.min(previous, current.config.config?.reviewsPerDay ?? 0),
|
|
2 ** 31,
|
|
);
|
|
return {
|
|
newCards,
|
|
reviews,
|
|
};
|
|
}
|
|
}
|
|
|
|
function bytesToObject(bytes: Uint8Array): Record<string, unknown> {
|
|
if (!bytes.length) {
|
|
return {};
|
|
}
|
|
|
|
let obj: Record<string, unknown>;
|
|
|
|
try {
|
|
obj = JSON.parse(new TextDecoder().decode(bytes));
|
|
} catch (err) {
|
|
console.log(`invalid json in deck config`);
|
|
return {};
|
|
}
|
|
|
|
if (obj.constructor !== Object) {
|
|
console.log(`invalid object in deck config`);
|
|
return {};
|
|
}
|
|
|
|
return obj;
|
|
}
|
|
|
|
export function createLimits(): DeckConfigsForUpdate_CurrentDeck_Limits {
|
|
return new DeckConfigsForUpdate_CurrentDeck_Limits({});
|
|
}
|
|
|
|
export class ValueTab {
|
|
readonly title: string;
|
|
value: number | null;
|
|
private setter: (value: number | null) => void;
|
|
private disabledValue: number | null;
|
|
private startValue: number | null;
|
|
private initialValue: number | null;
|
|
|
|
constructor(
|
|
title: string,
|
|
value: number | null,
|
|
setter: (value: number | null) => void,
|
|
disabledValue: number | null,
|
|
startValue: number | null,
|
|
) {
|
|
this.title = title;
|
|
this.value = this.initialValue = value;
|
|
this.setter = setter;
|
|
this.disabledValue = disabledValue;
|
|
this.startValue = startValue;
|
|
}
|
|
|
|
reset(): void {
|
|
this.setter(this.initialValue);
|
|
}
|
|
|
|
disable(): void {
|
|
this.setter(this.disabledValue);
|
|
}
|
|
|
|
enable(fallbackValue: number): void {
|
|
this.value = this.value ?? this.startValue ?? fallbackValue;
|
|
this.setter(this.value);
|
|
}
|
|
|
|
setValue(value: number): void {
|
|
this.value = value;
|
|
this.setter(value);
|
|
}
|
|
}
|