Plugin Translation

package.json

@@ -29,6 +29,7 @@
         "obsidian-utilities": "^1.1.3",
         "svelte": "^4.2.12",
         "svelte-dnd-action": "^0.9.29",
+        "svelte-i18n": "^4.0.1",
         "svelte-loading-spinners": "^0.3.4",
         "svelte-multiselect": "^10.3.0",
         "svelte-preprocess": "^5.0.4",

src/api/api.ts

@@ -3,6 +3,7 @@ import type InitiativeTracker from "../main";
 import { tracker } from "../tracker/stores/tracker";
 import { type HomebrewCreature } from "src/types/creatures";
 import { Creature } from "src/utils/creature";
+import { t } from "src/utils/i18n";
 
 declare module "obsidian" {
     interface Workspace {
@@ -56,7 +57,7 @@ export class API {
         rollHP: boolean = this.plugin.data.rollHP
     ) {
         if (!creatures || !Array.isArray(creatures) || !creatures.length) {
-            throw new Error("Creatures must be an array.");
+            throw new Error(t("Creatures must be an array."));
         }
         this.#tracker.add(
             this.plugin,

src/builder/stores/filter/Container.svelte

@@ -10,6 +10,7 @@
     import { ButtonComponent, Setting } from "obsidian";
     import copy from "fast-copy";
     import { getId } from "src/utils/creature";
+    import { t } from "src/utils/i18n";
 
     export let filterStore: BuiltFilterStore;
     const { layout, filters } = filterStore;
@@ -29,21 +30,22 @@
 
     const reset = (node: HTMLElement) => {
         new Setting(node)
-            .setName("Restore Default Layout")
+            .setName(t("Restore Default Layout"))
             .addExtraButton((b) => {
                 b.setIcon("reset").onClick(() => {
                     filterStore.resetLayout(true);
                 });
             });
     };
     const add = (node: HTMLElement) => {
-        new Setting(node).setName("Add New Filter").addExtraButton((b) => {
+        new Setting(node).setName(t("Add New Filter")).addExtraButton((b) => {
             b.setIcon("plus-circle").onClick(() => {
                 const id = getId();
                 const filter = {
                     ...DEFAULT_NEW_FILTER,
                     id
                 };
+                t(filter.text)
                 copied.push({
                     type: "nested",
                     id: getId(),
@@ -59,7 +61,7 @@
         });
     };
     const cancel = (node: HTMLElement) => {
-        new ButtonComponent(node).setButtonText("Cancel").setCta();
+        new ButtonComponent(node).setButtonText(t("Cancel")).setCta();
     };
 </script>
 

src/builder/stores/filter/EditFilter.svelte

@@ -11,25 +11,26 @@
     import { createEventDispatcher } from "svelte";
     import DraggableField from "./DraggableField.svelte";
     import { writable } from "svelte/store";
+    import { t } from "src/utils/i18n";
 
     export let filter: Filter;
     export let original: Filter;
 
     const dispatch = createEventDispatcher<{ cancel: null; update: Filter }>();
 
     const reset = (node: HTMLElement) => {
-        new Setting(node).setName("Reset").addExtraButton((b) => {
+        new Setting(node).setName(t("Reset")).addExtraButton((b) => {
             b.setIcon("reset").onClick(() => {
                 filter = copy(original);
             });
         });
     };
 
     const type = (node: HTMLElement) => {
-        new Setting(node).setName("Filter Type").addDropdown((d) => {
-            d.addOption(`${FilterType.Range}`, "Range");
-            d.addOption(`${FilterType.Options}`, "Options");
-            d.addOption(`${FilterType.Search}`, "Search");
+        new Setting(node).setName(t("Filter Type")).addDropdown((d) => {
+            d.addOption(`${FilterType.Range}`, t("Range"));
+            d.addOption(`${FilterType.Options}`, t("Options"));
+            d.addOption(`${FilterType.Search}`, t("Search"));
             d.setValue(`${filter.type}`).onChange((v) => {
                 filter.type = Number(v);
                 switch (filter.type) {
@@ -47,8 +48,8 @@
         });
     };
     const text = (node: HTMLElement) => {
-        new Setting(node).setName("Display Text").addText((t) => {
-            t.setValue(filter.text).onChange((v) => (filter.text = v));
+        new Setting(node).setName(t("Display Text")).addText((s) => {
+            s.setValue(t(filter.text)).onChange((v) => (filter.text = v));
         });
     };
     let field = writable(""),
@@ -59,7 +60,7 @@
         const opts = filter;
         let input: TextComponent;
         new Setting(node)
-            .setName("Fields")
+            .setName(t("Fields"))
             .addText((t) => {
                 input = t.onChange((v) => ($field = v));
             })
@@ -69,10 +70,10 @@
                         if (opts.fields.includes($field)) {
                             new Notice(
                                 createFragment((e) => {
-                                    e.createSpan({ text: "The field " });
+                                    e.createSpan({ text: t("The field ") });
                                     e.createEl("code", { text: $field });
                                     e.createSpan(
-                                        " has already been added to the options for this filter."
+                                        t(" has already been added to the options for this filter.")
                                     );
                                 })
                             );
@@ -90,13 +91,13 @@
     };
     const derive = (node: HTMLElement) => {
         if (filter.type == FilterType.Search) return;
-        new Setting(node).setName("Derive Options").addToggle((t) => {
+        new Setting(node).setName(t("Derive Options")).addToggle((t) => {
             t.setValue(filter.derive).onChange((v) => (filter.derive = v));
         });
     };
     const options = (node: HTMLElement) => {
         new Setting(node)
-            .setName("Options")
+            .setName(t("Options"))
             .addText((t) => t)
             .addExtraButton((b) => b.setIcon("plus-circle"));
     };
@@ -107,7 +108,7 @@
         if (filter.type != FilterType.Range) return;
         const range = filter;
         new Setting(node)
-            .setName("Options")
+            .setName(t("Options"))
             .addText(
                 (t) =>
                     (t
@@ -126,7 +127,7 @@
             );
     };
     const cancel = (node: HTMLElement) => {
-        new ButtonComponent(node).setButtonText("Cancel").setCta();
+        new ButtonComponent(node).setButtonText(t("Cancel")).setCta();
     };
     $: dispatch("update", filter);
 </script>

src/builder/stores/filter/LayoutItemContainer.svelte

@@ -7,6 +7,7 @@
     } from "src/builder/stores/filter/filter";
     import { createEventDispatcher, getContext } from "svelte";
     import { EditFilterModal } from "./filters-modal";
+    import { t } from "src/utils/i18n";
 
     const dispatch = createEventDispatcher<{
         edit: null;
@@ -57,7 +58,7 @@
     <div class="filter">
         <div class="name-container">
             <div class="icon" use:getIcon />
-            <div class="text"><span>{filter.text}</span></div>
+            <div class="text"><span>{t(filter.text)}</span></div>
         </div>
         <div>
             <small
@@ -69,7 +70,7 @@
                         {filter.fields.join(", ")}
                     {:else}
                         <div use:warn class="warning-icon icon" />
-                        <span class="warning-icon">No fields</span>
+                        <span class="warning-icon">{t("No fields")}</span>
                     {/if}
                 </em>
             </small>

src/builder/stores/filter/filters-modal.ts

@@ -4,6 +4,7 @@ import copy from "fast-copy";
 import Filters from "./Container.svelte";
 import EditFilter from "./EditFilter.svelte";
 import type { BuiltFilterStore, Filter, FilterLayout } from "./filter";
+import { t } from "src/utils/i18n";
 
 export class FiltersModal extends Modal {
     canceled: boolean = false;
@@ -14,7 +15,7 @@ export class FiltersModal extends Modal {
         this.layout = copy(layout);
     }
     onOpen() {
-        this.titleEl.setText("Edit Filters");
+        this.titleEl.setText(t("Edit Filters"));
         const app = new Filters({
             target: this.contentEl,
             props: {
@@ -39,7 +40,7 @@ export class EditFilterModal extends Modal {
         this.filter = copy(original);
     }
     onOpen(): void {
-        this.titleEl.setText("Edit Filter");
+        this.titleEl.setText(t("Edit Filter"));
         const app = new EditFilter({
             target: this.contentEl,
             props: {

src/builder/stores/table/Headers.svelte

@@ -5,6 +5,7 @@
     import { ButtonComponent, Setting, setIcon } from "obsidian";
     import { createEventDispatcher } from "svelte";
     import { SORT_NUMBER, SORT_STRING } from "src/utils";
+    import { t } from "src/utils/i18n";
     import { EditModal } from "./edit-modal";
     import { getId } from "src/utils/creature";
     import {
@@ -73,7 +74,7 @@
                 createFragment((e) => {
                     const desc = e.createDiv("header-desc");
                     setIcon(desc.createDiv(), icon(NAME_HEADER.type));
-                    desc.createSpan({ text: NAME_HEADER.text });
+                    desc.createSpan({ text: t(NAME_HEADER.text) });
                 })
             )
             .setDesc(
@@ -89,7 +90,7 @@
                 createFragment((e) => {
                     const desc = e.createDiv("header-desc");
                     setIcon(desc.createDiv(), icon(header.type));
-                    desc.createSpan({ text: header.text });
+                    desc.createSpan({ text: t(header.text) });
                 })
             )
             .setDesc(
@@ -123,7 +124,7 @@
             );
     };
     const add = (node: HTMLElement) => {
-        new Setting(node).setName("Add Header").addExtraButton((b) =>
+        new Setting(node).setName(t("Add Header")).addExtraButton((b) =>
             b.setIcon("plus-circle").onClick(async () => {
                 const state = await openModal();
                 if (
@@ -143,16 +144,16 @@
     };
     const reset = (node: HTMLElement) => {
         new Setting(node)
-            .setName("Reset Headers")
-            .setDesc("Reset table headers to defaults.")
+            .setName(t("Reset Headers"))
+            .setDesc(t("Reset table headers to defaults."))
             .addExtraButton((b) =>
                 b.setIcon("reset").onClick(() => {
                     dispatch("reset");
                 })
             );
     };
     const cancel = (node: HTMLElement) => {
-        new ButtonComponent(node).setButtonText("Cancel").setCta();
+        new ButtonComponent(node).setButtonText(t("Cancel")).setCta();
     };
 </script>
 
@@ -162,7 +163,7 @@
 
 <p>
     <small>
-        Organize your headers here. Headers can be drag-and-dropped!
+        {t("Organize your headers here. Headers can be drag-and-dropped!")}
     </small>
 </p>
 <div class="header-container">

src/builder/stores/table/edit-modal.ts

@@ -2,40 +2,41 @@ import { type TableHeaderState, SortFunctions } from "src/builder/builder.types"
 import { Modal, Setting, TextAreaComponent } from "obsidian";
 import { EditorView } from "@codemirror/view";
 import { editorFromTextArea } from "../../../utils/editor/index";
+import { t } from "src/utils/i18n";
 
 export class EditModal extends Modal {
     public header: TableHeaderState;
     public editing: boolean;
     editor: EditorView;
     public canceled = false;
     onOpen() {
-        this.titleEl.setText(this.editing ? "Edit Header" : "Create Header");
+        this.titleEl.setText(this.editing ? t("Edit Header") : t("Create Header"));
         this.display();
     }
     display() {
         this.contentEl.empty();
-        new Setting(this.contentEl).setName("Display Text").addText((t) =>
+        new Setting(this.contentEl).setName(t("Display Text")).addText((t) =>
             t.setValue(this.header.text).onChange((v) => {
                 this.header.text = v;
             })
         );
         new Setting(this.contentEl)
-            .setName("Linked Property")
+            .setName(t("Linked Property"))
             .addText((t) =>
                 t
                     .setValue(this.header.field)
                     .onChange((v) => (this.header.field = v))
             );
         new Setting(this.contentEl)
-            .setName("Sort Type")
+            .setName(t("Sort Type"))
             .setDesc(
-                "This determines how the field is sorted. Use the appropriate type for the data type of the field."
+                t("This determines how the field is sorted. Use the appropriate type for the data type of the field.")
             )
-            .addDropdown((t) => {
-                t.addOption(`${SortFunctions.LOCAL_COMPARE}`, "String");
-                t.addOption(`${SortFunctions.CONVERT_FRACTION}`, "Number");
-                t.addOption(`${SortFunctions.CUSTOM}`, "Custom");
-                t.setValue(`${this.header.type}`).onChange((v) => {
+            .addDropdown((s) => {
+                s.addOption(`${SortFunctions.LOCAL_COMPARE}`, t("String"));
+                s.addOption(`${SortFunctions.CONVERT_FRACTION}`, t("Number"));
+                s.addOption(`${SortFunctions.CUSTOM}`, t("Custom"));
+                s.setValue(`${this.header.type}`).onChange((v) => {
                     this.header.type = Number(v);
                     if (this.header.type == SortFunctions.CUSTOM) {
                         this.header.func = ``;
@@ -47,23 +48,23 @@ export class EditModal extends Modal {
             });
         if ("func" in this.header) {
             new Setting(this.contentEl)
-                .setName("Custom Sorting Function")
+                .setName(t("Custom Sorting Function"))
                 .setDesc(
                     createFragment((e) => {
                         e.createSpan({
-                            text: "Specify a custom sorting JavaScript function."
+                            text: t("Specify a custom sorting JavaScript function.")
                         });
                         e.createEl("br");
                         e.createEl("br");
 
                         e.createSpan({
-                            text: "This function receives two monster objects, "
+                            text: t("This function receives two monster objects, ")
                         });
                         e.createEl("code", { text: "a" });
-                        e.createSpan({ text: " and " });
+                        e.createSpan({ text: t(" and ") });
                         e.createEl("code", { text: "b" });
                         e.createSpan({
-                            text: ", and must return a number. The number determines sort order."
+                            text: t(", and must return a number. The number determines sort order.")
                         });
                     })
                 );
@@ -81,7 +82,7 @@ export class EditModal extends Modal {
             );
         }
         new Setting(this.contentEl).addButton((b) => {
-            b.setButtonText("Cancel")
+            b.setButtonText(t("Cancel"))
                 .setCta()
                 .onClick(() => {
                     this.canceled = true;

src/builder/stores/table/headers-modal.ts

@@ -1,4 +1,5 @@
 import { Modal } from "obsidian";
+import { t } from "src/utils/i18n";
 
 import Headers from "./Headers.svelte";
 import type { TableHeaderState } from "src/builder/builder.types";
@@ -11,7 +12,7 @@ export class HeadersModal extends Modal {
         super(app);
     }
     onOpen() {
-        this.titleEl.setText("Edit Headers");
+        this.titleEl.setText(t("Edit Headers"));
         const app = new Headers({
             target: this.contentEl,
             props: {