-
-
\ No newline at end of file
diff --git a/src/gui/MacroGUIs/Components/UserScriptCommand.svelte b/src/gui/MacroGUIs/Components/UserScriptCommand.svelte
index b9382d6d..0b11da01 100644
--- a/src/gui/MacroGUIs/Components/UserScriptCommand.svelte
+++ b/src/gui/MacroGUIs/Components/UserScriptCommand.svelte
@@ -1,20 +1,20 @@
@@ -22,28 +22,28 @@
{command.name}
- configureChoice()}
- on:keypress={(e) => (e.key === 'Enter' || e.key === ' ') && configureChoice()}
+ onclick={() => onConfigureScript(command)}
+ onkeypress={(e) => (e.key === 'Enter' || e.key === ' ') && onConfigureScript(command)}
class="clickable"
>
- deleteCommand()}
- on:keypress={(e) => (e.key === 'Enter' || e.key === ' ') && deleteCommand()}
+ onclick={() => onDeleteCommand(command.id)}
+ onkeypress={(e) => (e.key === 'Enter' || e.key === ' ') && onDeleteCommand(command.id)}
class="clickable"
>
-
import ObsidianIcon from "../../components/ObsidianIcon.svelte";
- import {createEventDispatcher, onMount} from "svelte";
+ import { onMount, untrack } from "svelte";
import type {IWaitCommand} from "../../../types/macros/QuickCommands/IWaitCommand";
- export let command: IWaitCommand;
- export let startDrag: (e: MouseEvent | TouchEvent) => void;
- export let dragDisabled: boolean;
- const dispatch = createEventDispatcher();
+ let {
+ command,
+ startDrag,
+ dragDisabled,
+ onDeleteCommand,
+ onUpdateCommand,
+ }: {
+ command: IWaitCommand;
+ startDrag: (e: MouseEvent | TouchEvent) => void;
+ dragDisabled: boolean;
+ onDeleteCommand: (commandId: string) => void;
+ onUpdateCommand: (command: IWaitCommand) => void;
+ } = $props();
- let inputEl: HTMLInputElement;
-
- function deleteCommand(commandId: string) {
- dispatch('deleteCommand', commandId);
- }
+ // Local mirror of command.time so the input is component-owned. We can't mutate
+ // the host-owned command object through the props bag, so persistence is explicit
+ // via onUpdateCommand (mirrors the old bind:value={command.time} on every change).
+ let inputEl = $state();
+ // Intentionally seed once from the prop; the input is component-owned thereafter.
+ let time = $state(untrack(() => command.time));
function resizeInput() {
- const length: number = inputEl.value.length;
+ if (!inputEl) return;
+ const length: number = String(inputEl.value).length;
inputEl.style.setProperty("--qa-wait-input-width", `${length === 0 ? 2 : length}ch`);
}
+ function onTimeInput(e: Event & { currentTarget: HTMLInputElement }) {
+ const next = e.currentTarget.valueAsNumber;
+ time = Number.isNaN(next) ? 0 : next;
+ resizeInput();
+ onUpdateCommand({ ...command, time });
+ }
+
onMount(resizeInput);
-
{command.name} for ms
+
{command.name} for ms
- deleteCommand(command.id)}
- on:keypress={(e) => (e.key === 'Enter' || e.key === ' ') && deleteCommand(command.id)}
+ onclick={() => onDeleteCommand(command.id)}
+ onkeypress={(e) => (e.key === 'Enter' || e.key === ' ') && onDeleteCommand(command.id)}
class="clickable"
>
- getCommandDisplayName -> src/main pulls obsidian-dataview's
+// CJS require('obsidian'); mock it as the rest of the suite does.
+vi.mock("obsidian-dataview", () => ({ getAPI: vi.fn() }));
+
+import StandardCommand from "./StandardCommand.svelte";
+import WaitCommand from "./WaitCommand.svelte";
+import ConditionalCommand from "./ConditionalCommand.svelte";
+import { WaitCommand as WaitCommandModel } from "../../../types/macros/QuickCommands/WaitCommand";
+import { ObsidianCommand } from "../../../types/macros/ObsidianCommand";
+import { ConditionalCommand as ConditionalCommandModel } from "../../../types/macros/Conditional/ConditionalCommand";
+
+const noop = () => {};
+
+describe("StandardCommand", () => {
+ it("fires onDeleteCommand with the command id when delete is clicked", async () => {
+ const command = new ObsidianCommand("My Command", "obsidian-cmd");
+ const onDeleteCommand = vi.fn();
+ const { container } = render(StandardCommand, {
+ props: { command, startDrag: noop, dragDisabled: true, onDeleteCommand },
+ });
+ const deleteBtn = container.querySelector(".clickable") as HTMLElement;
+ await fireEvent.click(deleteBtn);
+ expect(onDeleteCommand).toHaveBeenCalledWith(command.id);
+ });
+});
+
+describe("WaitCommand", () => {
+ it("fires onUpdateCommand with the edited time (persistence path)", async () => {
+ const command = new WaitCommandModel(100);
+ const onUpdateCommand = vi.fn();
+ const { container } = render(WaitCommand, {
+ props: {
+ command,
+ startDrag: noop,
+ dragDisabled: true,
+ onDeleteCommand: noop,
+ onUpdateCommand,
+ },
+ });
+ const input = container.querySelector("input") as HTMLInputElement;
+ await fireEvent.input(input, { target: { value: "250" } });
+ expect(onUpdateCommand).toHaveBeenCalledWith(
+ expect.objectContaining({ id: command.id, time: 250 }),
+ );
+ });
+});
+
+describe("ConditionalCommand", () => {
+ it("routes each action button to the matching callback", async () => {
+ const command = new ConditionalCommandModel();
+ const onConfigureCondition = vi.fn();
+ const onEditThenBranch = vi.fn();
+ const onEditElseBranch = vi.fn();
+ const onDeleteCommand = vi.fn();
+ const { getByLabelText } = render(ConditionalCommand, {
+ props: {
+ command,
+ startDrag: noop,
+ dragDisabled: true,
+ onConfigureCondition,
+ onEditThenBranch,
+ onEditElseBranch,
+ onDeleteCommand,
+ },
+ });
+
+ await fireEvent.click(getByLabelText("Edit condition"));
+ expect(onConfigureCondition).toHaveBeenCalledWith(command);
+
+ await fireEvent.click(getByLabelText("Edit then branch"));
+ expect(onEditThenBranch).toHaveBeenCalledWith(command);
+
+ await fireEvent.click(getByLabelText("Edit else branch"));
+ expect(onEditElseBranch).toHaveBeenCalledWith(command);
+
+ await fireEvent.click(getByLabelText("Delete command"));
+ expect(onDeleteCommand).toHaveBeenCalledWith(command.id);
+ });
+});
diff --git a/src/gui/MacroGUIs/commandListProps.svelte.ts b/src/gui/MacroGUIs/commandListProps.svelte.ts
new file mode 100644
index 00000000..c3e1d37a
--- /dev/null
+++ b/src/gui/MacroGUIs/commandListProps.svelte.ts
@@ -0,0 +1,41 @@
+import type { App } from "obsidian";
+import type QuickAdd from "../../main";
+import type { ICommand } from "../../types/macros/ICommand";
+import type { IConditionalCommand } from "../../types/macros/Conditional/IConditionalCommand";
+import type { Plain } from "../svelte/persist.svelte";
+
+/**
+ * Props for CommandList, shared between the component and its imperative host.
+ *
+ * `commands` is the host->child channel: the host (CommandSequenceEditor) owns a
+ * $state-backed instance of this object (see createCommandListProps) and mutates
+ * `commands` to push add/delete/configure results into the mounted component —
+ * replacing the old exported `updateCommandList()` bridge. The child reports its
+ * own edits (reorder, per-command update) back up via the `saveCommands` callback.
+ */
+export interface CommandListProps {
+ commands: ICommand[];
+ app: App;
+ plugin: QuickAdd;
+ deleteCommand: (commandId: string) => void | Promise;
+ // Accepts only Plain (from snapshot()) so a live $state proxy can't
+ // be persisted without snapshotting — see persist.svelte.ts.
+ saveCommands: (commands: Plain) => void;
+ // Return true when the command was changed so CommandList persists it (the
+ // handler mutates the command; CommandList snapshots+saves — see CommandList.svelte).
+ onConfigureCondition?: (command: IConditionalCommand) => boolean | Promise;
+ onEditThenBranch?: (command: IConditionalCommand) => boolean | Promise;
+ onEditElseBranch?: (command: IConditionalCommand) => boolean | Promise;
+}
+
+/**
+ * Create a $state-backed props object to pass to `mount(CommandList, ...)`.
+ * Mutating `.commands` on the returned object re-renders the mounted component
+ * (the documented way to feed reactive props to an imperatively-mounted Svelte 5
+ * component). Lives in a `.svelte.ts` file so `$state` is available.
+ */
+export function createCommandListProps(initial: CommandListProps): CommandListProps {
+ // $state must initialize a variable declaration (not be returned directly).
+ const props = $state(initial);
+ return props;
+}
diff --git a/src/gui/PackageManager/ExportPackageModal.svelte b/src/gui/PackageManager/ExportPackageModal.svelte
index d173d890..8ad9e672 100644
--- a/src/gui/PackageManager/ExportPackageModal.svelte
+++ b/src/gui/PackageManager/ExportPackageModal.svelte
@@ -17,10 +17,17 @@
} from "../../services/packageExportService";
import type { QuickAddPackageAssetKind } from "../../types/packages/QuickAddPackage";
- export let app: App;
- export let plugin: QuickAdd;
- export let allChoices: IChoice[];
- export let close: () => void;
+ let {
+ app,
+ plugin,
+ allChoices,
+ close,
+ }: {
+ app: App;
+ plugin: QuickAdd;
+ allChoices: IChoice[];
+ close: () => void;
+ } = $props();
interface FlatChoice {
choice: IChoice;
@@ -53,20 +60,21 @@
"capture-template": "Capture template",
};
- let searchQuery = "";
- let selectedChoiceIds = new Set();
- let excludedChoiceIds = new Set();
- let rootChoiceIds: string[] = [];
- let outputPath = generateDefaultPackagePath();
- let exportWarnings: ExportWarnings | null = null;
- let actionInProgress: "copy" | "save" | null = null;
-
- $: flatChoices = flattenChoicesWithPath(allChoices);
- $: filteredChoices = filterFlatChoices(flatChoices, searchQuery);
- $: rootChoiceIds = computeRootSelections(flatChoices, selectedChoiceIds);
- $: summary = computeSummary(allChoices, rootChoiceIds, excludedChoiceIds);
- $: choiceNameById = new Map(
- flatChoices.map((entry) => [entry.id, entry.path.join(" / ")]),
+ let searchQuery = $state("");
+ let selectedChoiceIds = $state(new Set());
+ let excludedChoiceIds = $state(new Set());
+ let outputPath = $state(generateDefaultPackagePath());
+ let exportWarnings = $state(null);
+ let actionInProgress = $state<"copy" | "save" | null>(null);
+
+ const flatChoices = $derived(flattenChoicesWithPath(allChoices));
+ const filteredChoices = $derived(filterFlatChoices(flatChoices, searchQuery));
+ const rootChoiceIds = $derived(computeRootSelections(flatChoices, selectedChoiceIds));
+ const summary = $derived(computeSummary(allChoices, rootChoiceIds, excludedChoiceIds));
+ const choiceNameById = $derived(
+ new Map(
+ flatChoices.map((entry) => [entry.id, entry.path.join(" / ")]),
+ ),
);
function flattenChoicesWithPath(
@@ -360,8 +368,8 @@
spellcheck={false}
/>