Advanced Templates Module (PF1)

const _show = (parent, sibling, app, action = {}) => {
    return new TemplateSettings({
        target: parent,
        anchor: sibling,
        props: { TemplateApplication: app },
        context: new Map([['action', action], ['updates', writable({})]])
    });
}

const _show = (parent, sibling, app, action = {}) => {
    return new TemplateSettings({
        target: parent,
        anchor: sibling,
        props: { TemplateApplication: app },
        context: new Map([['action', action], ['updates', writable({})]])
    });
}

    $: {
        updateAction(action, updates);
        console.log("applying updates", updates);
    }

    $: {
        updateAction(action, updates);
        console.log("applying updates", updates);
    }

<script>
   function saveData(event) {
      // Note: FormDataExtended is from Foundry and might be useful vs `FormData` as it coerces types based on input type.
      const fd = new FormDataExtended(event.target);

      // `fd.object` is the processed / coerced data.
      const data = fd.object;

      // You can further sanitize / process it here.

      foundryDoc.update(data, { render: false });
   }
</script>

<form on:submit|preventDefault={saveData} autocomplete=off>
  <svelte:component this={TemplateApplication} />
  <SharedSettings />
</form>

<script>
   function saveData(event) {
      // Note: FormDataExtended is from Foundry and might be useful vs `FormData` as it coerces types based on input type.
      const fd = new FormDataExtended(event.target);

      // `fd.object` is the processed / coerced data.
      const data = fd.object;

      // You can further sanitize / process it here.

      foundryDoc.update(data, { render: false });
   }
</script>

<form on:submit|preventDefault={saveData} autocomplete=off>
  <svelte:component this={TemplateApplication} />
  <SharedSettings />
</form>

<script>
   import { CONSTS, MODULE_NAME } from "../consts";
</script>

<input type=text name={`flags.${MODULE_NAME}.${CONSTS.flags.circle.areaType}`} />

<script>
   import { CONSTS, MODULE_NAME } from "../consts";
</script>

<input type=text name={`flags.${MODULE_NAME}.${CONSTS.flags.circle.areaType}`} />

  async _updateObject(event, formData) {
    if ( !this.object.id ) return;
    return this.object.update(formData);
  }

  async _updateObject(event, formData) {
    if ( !this.object.id ) return;
    return this.object.update(formData);
  }

const injectTemplateSelector = async (sheet, jq, _options) => {
    //** is there any reason to not add this? if an existing sheet is re-rendered, its render hook is called with the existing sheet so the injected svelte component is still alive */
    if (typeof sheet?._templateSettings?.$destroy === 'function') {
        sheet._templateSettings.$destroy();
    }
    //** end */

    // snipped, figure out which sheet to inject
    sheet._templateSettings = injected(templateGroupOptions, sibling, action);
}

const destroyTemplateSelector = (sheet, ...args) => {
    if (typeof sheet?._templateSettings?.$destroy === 'function') {
        sheet._templateSettings.$destroy();
    }
}

const injectTemplateSelector = async (sheet, jq, _options) => {
    //** is there any reason to not add this? if an existing sheet is re-rendered, its render hook is called with the existing sheet so the injected svelte component is still alive */
    if (typeof sheet?._templateSettings?.$destroy === 'function') {
        sheet._templateSettings.$destroy();
    }
    //** end */

    // snipped, figure out which sheet to inject
    sheet._templateSettings = injected(templateGroupOptions, sibling, action);
}

const destroyTemplateSelector = (sheet, ...args) => {
    if (typeof sheet?._templateSettings?.$destroy === 'function') {
        sheet._templateSettings.$destroy();
    }
}

<script>
   import { onDestroy } from 'svelte';

   onDestroy(() => console.log('!! TemplateSettings component destroyed'));
</script>

<script>
   import { onDestroy } from 'svelte';

   onDestroy(() => console.log('!! TemplateSettings component destroyed'));
</script>

import { writable }       from 'svelte/store';
import { propertyStore }  from '#runtime/svelte/store/writable-derived';

import { prepareData }    from './prepare-template-data.js';

// `action` is the Foundry doc.
export function createUpdatesStore(action) {
  const updatesStore = writable(prepareData(action));
  
  // Creates a custom readable object store, with properties that are writable stores.
  const updates = {
     subscribe: updatesStore .subscribe,
     
     data: {
        measureTemplate: {
           customColor: propertyStore(updatesStore, ['data', 'measureTemplate', 'customColor']),
           customTexture: propertyStore(updatesStore, ['data', 'measureTemplate', 'customTexture']),
           overrideColor: propertyStore(updatesStore, ['data', 'measureTemplate', 'overrideColor']),
           overrideTexture: propertyStore(updatesStore, ['data', 'measureTemplate', 'overrideTexture'])
        }
     },
     // Do the same for flags...
  };
  
  return updates;
}

import { writable }       from 'svelte/store';
import { propertyStore }  from '#runtime/svelte/store/writable-derived';

import { prepareData }    from './prepare-template-data.js';

// `action` is the Foundry doc.
export function createUpdatesStore(action) {
  const updatesStore = writable(prepareData(action));
  
  // Creates a custom readable object store, with properties that are writable stores.
  const updates = {
     subscribe: updatesStore .subscribe,
     
     data: {
        measureTemplate: {
           customColor: propertyStore(updatesStore, ['data', 'measureTemplate', 'customColor']),
           customTexture: propertyStore(updatesStore, ['data', 'measureTemplate', 'customTexture']),
           overrideColor: propertyStore(updatesStore, ['data', 'measureTemplate', 'overrideColor']),
           overrideTexture: propertyStore(updatesStore, ['data', 'measureTemplate', 'overrideTexture'])
        }
     },
     // Do the same for flags...
  };
  
  return updates;
}

import { 
   onDestroy,
   setContext }                  from 'svelte';
import { subscribeIgnoreFirst }  from '#runtime/util/store';
import { createUpdatesStore }    from './createUpdatesStore.js';

// This is the backing Foundry document.
export let action;

const updates = createUpdatesStore(action);

// This sets a context for the `updates` store that is retrieved by `getContext('updates')` in child components.
setContext('updates', updates);

// In your unsubscribe / destroy handler you need to keep track of unsubscribe.
const unsubscribe = subscribeIgnoreFirst(updates, (updateData) => action.update(updateData.data, { render: false }));

onDestroy(() => unsubscribe());

import { 
   onDestroy,
   setContext }                  from 'svelte';
import { subscribeIgnoreFirst }  from '#runtime/util/store';
import { createUpdatesStore }    from './createUpdatesStore.js';

// This is the backing Foundry document.
export let action;

const updates = createUpdatesStore(action);

// This sets a context for the `updates` store that is retrieved by `getContext('updates')` in child components.
setContext('updates', updates);

// In your unsubscribe / destroy handler you need to keep track of unsubscribe.
const unsubscribe = subscribeIgnoreFirst(updates, (updateData) => action.update(updateData.data, { render: false }));

onDestroy(() => unsubscribe());

<script>
  import { getContext } from 'svelte`;

  const updates = getContext('updates');

  // To bind stores you must create a top level variable to use `$` in the binding.
  const customColor = updates.data.measureTemplate.customColor;
</script>

<input type=text bind:value={$customColor} />

<script>
  import { getContext } from 'svelte`;

  const updates = getContext('updates');

  // To bind stores you must create a top level variable to use `$` in the binding.
  const customColor = updates.data.measureTemplate.customColor;
</script>

<input type=text bind:value={$customColor} />