feat(templater): customize result name in template builder

src/views/components/Label.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    export let label: string;
+    export let inline = false;
+</script>
+
+<label class="field-group" class:inline>
+    <span>{label}</span>
+    <slot />
+</label>
+
+<style>
+    .field-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+    .inline {
+        flex-direction: row;
+        align-items: center;
+        gap: 1rem;
+    }
+</style>

src/views/components/TemplateBuilder.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
     import Code from "./Code.svelte";
+    import FormRow from "./FormRow.svelte";
+    import Label from "./Label.svelte";
     import { type TemplateBuilderModel } from "./TemplateBuilder";
 
     export let model: TemplateBuilderModel;
@@ -59,16 +61,39 @@
         </div>
     </div>
 
-    <div class="flex flex-col flex-1">
+    <div class="flex flex-col">
+        <h3>Fields to include in body</h3>
+        {#each $fields as field (field.name)}
+            {#if field.omit === false}
+                <label>
+                    <input
+                        type="checkbox"
+                        checked={field.onBody}
+                        on:input={(v) =>
+                            model.setField(field.name, { onBody: v.currentTarget.checked })}
+                    />
+                    <span>{field.name}</span>
+                </label>
+            {/if}
+        {/each}
+    </div>
+
+    <div class="flex flex-col flex-1 gap-1">
         <h3>Options</h3>
-        <label>
+        <Label label="Include frontmatter fences" inline>
             <input
                 type="checkbox"
                 checked={$options.includeFences}
                 on:change={(e) => ($options.includeFences = e.currentTarget.checked)}
             />
-            <span>Include frontmatter fences</span>
-        </label>
+        </Label>
+        <FormRow label="Result variable name" id={`result_variable_name`} inline>
+            <input
+                type="text"
+                value={$options.resultName}
+                on:input={(e) => ($options.resultName = e.currentTarget.value)}
+            />
+        </FormRow>
     </div>
     <div class="flex flex-col flex-1">
         <h3>Template</h3>

src/views/components/TemplateBuilder.ts

@@ -11,13 +11,13 @@ interface FieldOption {
     omit: false;
 }
 
-interface OmitedFieldOption {
+interface OmittedFieldOption {
     name: string;
     omit: true;
     // field: FieldDefinition;
 }
 
-type Field = FieldOption | OmitedFieldOption;
+type Field = FieldOption | OmittedFieldOption;
 
 const Field = (name: string): FieldOption => ({
     name,
@@ -26,45 +26,53 @@ const Field = (name: string): FieldOption => ({
     omit: false,
 });
 
-function compileFrontmatter(fields: FieldOption[]) {
+function compileFrontmatter(fields: FieldOption[], resultName: string) {
     const frontmatterFields = fields
         .filter((field) => field.onFrontmatter)
         .map((field) => field.name);
     if (frontmatterFields.length === 0) {
         return "";
     }
     if (frontmatterFields.length === fields.length) {
-        return `tR += result.asFrontmatterString();`;
+        return `tR += ${resultName}.asFrontmatterString();`;
     }
-    return `tR += result.asFrontmatterString({ pick: ${JSON.stringify(
+    return `tR += ${resultName}.asFrontmatterString({ pick: ${JSON.stringify(
         frontmatterFields,
         null,
         16,
     )} \t});`;
 }
 
-function compileOpenForm(formName: string, fieldsToOmit: string[], usesGlobal: boolean = false) {
+function compileOpenForm(
+    formName: string,
+    resultName: string,
+    fieldsToOmit: string[],
+    usesGlobal: boolean = false,
+) {
     const omitOptions =
         fieldsToOmit.length > 0 ? `, ${JSON.stringify({ omit: fieldsToOmit }, null, 8)}` : "";
     const args = `"${formName}"${omitOptions}`;
     console.log({ args });
     if (usesGlobal) {
-        return [`const result = await MF.openForm(${args});`];
+        return [`const ${resultName} = await MF.openForm(${args});`];
     }
     return `
     const modalForm = app.plugins.plugins.modalforms.api;
-    const result = await modalForm.openForm(${args});`
+    const ${resultName} = await modalForm.openForm(${args});`
         .trim()
         .split("\n")
         .map((x) => x.trim());
 }
 
+type Options = { includeFences: boolean; resultName: string };
+
 function compileTemplaterTemplate(formName: string) {
-    return ([fields, options]: [Field[], { includeFences: boolean }]) => {
+    return ([fields, options]: [Field[], Options]) => {
         const fieldsToInclude = fields.filter((field): field is FieldOption => !field.omit);
-        const fieldsToOmit = fields.filter((field): field is OmitedFieldOption => field.omit);
+        const fieldsToOmit = fields.filter((field): field is OmittedFieldOption => field.omit);
         const openTheform = compileOpenForm(
             formName,
+            options.resultName,
             fieldsToOmit.map((x) => x.name),
         ).join("\n  ");
         console.log(openTheform);
@@ -73,7 +81,7 @@ function compileTemplaterTemplate(formName: string) {
             options.includeFences ? `<% "---" %>` : "",
             `<%*`,
             `  ${openTheform}`,
-            `  ${compileFrontmatter(fieldsToInclude)}`,
+            `  ${compileFrontmatter(fieldsToInclude, options.resultName)}`,
             `-%>`,
             options.includeFences ? `<% "---" -%>` : "",
         ].join("\n");
@@ -84,7 +92,7 @@ export const makeModel = (formDefinition: FormDefinition) => {
     const fields = writable(
         formDefinition.fields.reduce((acc, { name }) => [...acc, Field(name)], [] as Field[]),
     );
-    const options = writable({ includeFences: true });
+    const options = writable<Options>({ includeFences: true, resultName: "result" });
 
     const code = derived([fields, options], compileTemplaterTemplate(formDefinition.name));