Merge pull request #639 from ben/collapse-vue-helpers

Refactor vue render helper into VueApplication base class

CHANGELOG.md

@@ -3,7 +3,7 @@
 ## Next Release
 
 - Assets like **Bonded** with move links in their requirement fields now work properly when you click the links.
-- Under the hood: refactored Vue sheets and dialogs to use the same template
+- Under the hood: refactored the Vue layer to have a more sensible architecture
 
 ## 1.20.20
 

src/module/actor/sheets/charactersheet-v2.ts

@@ -1,6 +1,5 @@
 import { IronswornSettings } from '../../helpers/settings'
 import characterSheetVue from '../../vue/character-sheet.vue'
-import { VueSheetRenderHelperOptions } from '../../vue/vue-render-helper'
 import { VueActorSheet } from '../../vue/vueactorsheet'
 import { SFCharacterMoveSheet } from './sf-charactermovesheet'
 
@@ -10,18 +9,13 @@ export class IronswornCharacterSheetV2 extends VueActorSheet {
       width: 700,
       height: 800,
       left: 50,
-    })
-  }
-
-  get renderHelperOptions(): Partial<VueSheetRenderHelperOptions> {
-    return {
       rootComponent: characterSheetVue,
-    }
+    }) as any
   }
 
-  render(...args) {
+  render(...args: any[]) {
     if (this._state <= Application.RENDER_STATES.NONE) this._openMoveSheet()
-    return super.render(...args)
+    return super.render(...args) as any
   }
 
   _getHeaderButtons() {

src/module/actor/sheets/compactsheet.ts

@@ -16,7 +16,7 @@ export class IronswornCompactCharacterSheet extends ActorSheet {
       height: 210,
       template: 'systems/foundry-ironsworn/templates/actor/compact.hbs',
       resizable: false,
-    })
+    }) as any
   }
 
   activateListeners(html: JQuery) {

src/module/actor/sheets/foesheet.ts

@@ -1,19 +1,13 @@
 import foeSheetVue from '../../vue/components/foe-sheet.vue'
-import { VueSheetRenderHelperOptions } from '../../vue/vue-render-helper'
 import { VueActorSheet } from '../../vue/vueactorsheet'
 
 export class FoeSheet extends VueActorSheet {
   static get defaultOptions() {
     return mergeObject(super.defaultOptions, {
       width: 450,
       height: 500,
-    })
-  }
-
-  get renderHelperOptions(): Partial<VueSheetRenderHelperOptions> {
-    return {
       rootComponent: foeSheetVue,
-    }
+    }) as any
   }
 
   // Override

src/module/actor/sheets/sf-charactermovesheet.ts

@@ -1,6 +1,5 @@
 import CharacterMoveSheet from '../../vue/sf-charactermovesheet.vue'
 import { IronswornActor } from '../actor'
-import { VueSheetRenderHelperOptions } from '../../vue/vue-render-helper'
 import { App } from 'vue'
 import { $ActorKey } from '../../vue/provisions'
 import { VueAppMixin } from '../../vue/vueapp.js'
@@ -14,35 +13,28 @@ export class SFCharacterMoveSheet extends VueAppMixin(Application) {
     super(options)
   }
 
-  get renderHelperOptions(): Partial<VueSheetRenderHelperOptions> {
+  getData(
+    options?: Partial<ApplicationOptions> | undefined
+  ): MaybePromise<object> {
     return {
-      rootComponent: CharacterMoveSheet,
-      vueData: async () => ({
-        actor: this.actor.toObject(),
-        toolset: this.toolset,
-      }),
+      ...super.getData(options),
+      toolset: this.toolset,
+      actor: this.actor.toObject(),
     }
   }
 
   setupVueApp(app: App<any>): void {
     app.provide($ActorKey, this.actor)
   }
 
-  render(
-    force?: boolean | undefined,
-    inputOptions?: Application.RenderOptions<ApplicationOptions> | undefined
-  ): this {
-    super.render(force, inputOptions)
-    return this
-  }
-
   static get defaultOptions() {
     return mergeObject(super.defaultOptions, {
       resizable: true,
       width: 350,
       height: 820,
       left: 685,
-    })
+      rootComponent: CharacterMoveSheet,
+    }) as any
   }
 
   get title() {

src/module/actor/sheets/sf-charactersheet.ts

@@ -1,6 +1,5 @@
 import { IronswornSettings } from '../../helpers/settings'
 import SfCharacterSheet from '../../vue/sf-charactersheet.vue'
-import { VueSheetRenderHelperOptions } from '../../vue/vue-render-helper'
 import { VueActorSheet } from '../../vue/vueactorsheet'
 import { SFCharacterMoveSheet } from './sf-charactermovesheet'
 
@@ -10,19 +9,14 @@ export class StarforgedCharacterSheet extends VueActorSheet {
       width: 630,
       height: 820,
       left: 50,
-    })
-  }
-
-  get renderHelperOptions(): Partial<VueSheetRenderHelperOptions> {
-    return {
       rootComponent: SfCharacterSheet,
-    }
+    }) as any
   }
 
-  render(...args) {
-    super.render(...args)
+  render(...renderArgs: any[]) {
+    super.render(...renderArgs)
     if (this._state <= Application.RENDER_STATES.NONE) this._openMoveSheet()
-    return this
+    return Promise.resolve(this) as any
   }
 
   _getHeaderButtons() {

src/module/actor/sheets/sf-locationsheet.ts

@@ -1,18 +1,12 @@
 import sfLocationsheetVue from '../../vue/sf-locationsheet.vue'
-import { VueSheetRenderHelperOptions } from '../../vue/vue-render-helper'
 import { VueActorSheet } from '../../vue/vueactorsheet'
 
 export class StarforgedLocationSheet extends VueActorSheet {
   static get defaultOptions() {
     return mergeObject(super.defaultOptions, {
       width: 600,
       height: 600,
-    })
-  }
-
-  get renderHelperOptions(): Partial<VueSheetRenderHelperOptions> {
-    return {
       rootComponent: sfLocationsheetVue,
-    }
+    }) as any
   }
 }

src/module/actor/sheets/sharedsheet-v2.ts

@@ -1,18 +1,12 @@
 import sharedSheetVue from '../../vue/shared-sheet.vue'
-import { VueSheetRenderHelperOptions } from '../../vue/vue-render-helper'
 import { VueActorSheet } from '../../vue/vueactorsheet'
 
 export class IronswornSharedSheetV2 extends VueActorSheet {
   static get defaultOptions() {
     return mergeObject(super.defaultOptions, {
       width: 350,
       height: 700,
-    })
-  }
-
-  get renderHelperOptions(): Partial<VueSheetRenderHelperOptions> {
-    return {
       rootComponent: sharedSheetVue,
-    }
+    }) as any
   }
 }

src/module/actor/sheets/sitesheet.ts

@@ -1,20 +1,14 @@
 import { SiteDataSourceData } from '../actortypes'
 import { VueActorSheet } from '../../vue/vueactorsheet'
-import { VueSheetRenderHelperOptions } from '../../vue/vue-render-helper'
 import siteSheetVue from '../../vue/site-sheet.vue'
 
 export class IronswornSiteSheet extends VueActorSheet {
   static get defaultOptions() {
     return mergeObject(super.defaultOptions, {
       width: 750,
       height: 700,
-    })
-  }
-
-  get renderHelperOptions(): Partial<VueSheetRenderHelperOptions> {
-    return {
       rootComponent: siteSheetVue,
-    }
+    }) as any
   }
 
   async _onDropItem(event: DragEvent, data: ActorSheet.DropData.Item) {

src/module/actor/sheets/starshipsheet.ts

@@ -1,18 +1,12 @@
 import starshipSheetVue from '../../vue/starship-sheet.vue'
-import { VueSheetRenderHelperOptions } from '../../vue/vue-render-helper'
 import { VueActorSheet } from '../../vue/vueactorsheet'
 
 export class StarshipSheet extends VueActorSheet {
   static get defaultOptions() {
     return mergeObject(super.defaultOptions, {
       width: 500,
       height: 500,
-    })
-  }
-
-  get renderHelperOptions(): Partial<VueSheetRenderHelperOptions> {
-    return {
       rootComponent: starshipSheetVue,
-    }
+    }) as any
   }
 }

src/module/applications/oracle-window.ts

@@ -1,21 +1,15 @@
-import { VueSheetRenderHelperOptions } from '../vue/vue-render-helper'
 import { VueAppMixin } from '../vue/vueapp'
 import OracleWindowComponent from '../vue/oracle-window.vue'
 
 export class OracleWindow extends VueAppMixin(Application) {
-  static get defaultOptions(): ApplicationOptions {
+  static get defaultOptions() {
     return mergeObject(super.defaultOptions, {
       title: game.i18n.localize('IRONSWORN.ROLLTABLES.TypeOracle'),
       id: 'oracles',
       resizable: true,
       width: 350,
       height: 400,
-    })
-  }
-
-  get renderHelperOptions(): Partial<VueSheetRenderHelperOptions> {
-    return {
       rootComponent: OracleWindowComponent,
-    }
+    }) as any
   }
 }

src/module/applications/sf/editSectorApp.ts

@@ -1,13 +1,12 @@
 import editSectorVue from '../../vue/edit-sector.vue'
-import { VueSheetRenderHelperOptions } from '../../vue/vue-render-helper'
 import { VueAppMixin } from '../../vue/vueapp.js'
 
 export class EditSectorDialog extends VueAppMixin(Application) {
   constructor(protected sceneId: string) {
     super()
   }
 
-  static get defaultOptions(): ApplicationOptions {
+  static get defaultOptions() {
     return mergeObject(super.defaultOptions, {
       title: game.i18n.localize('IRONSWORN.SCENE.TypeSector'),
       id: 'edit-sector-dialog',
@@ -16,13 +15,16 @@ export class EditSectorDialog extends VueAppMixin(Application) {
       top: 60,
       width: 400,
       height: 200,
-    })
+      rootComponent: editSectorVue,
+    }) as any
   }
 
-  get renderHelperOptions(): Partial<VueSheetRenderHelperOptions> {
+  getData(
+    options?: Partial<ApplicationOptions> | undefined
+  ): MaybePromise<object> {
     return {
-      rootComponent: editSectorVue,
-      vueData: async () => ({ sceneId: this.sceneId }),
+      ...super.getData(options),
+      sceneId: this.sceneId,
     }
   }
 }

src/module/applications/vueSfSettingTruthsDialog.ts

@@ -1,21 +1,21 @@
 import { Starforged, starforged } from 'dataforged'
 import sfTruthsVue from '../vue/sf-truths.vue'
-import { VueSheetRenderHelperOptions } from '../vue/vue-render-helper'
 import { VueAppMixin } from '../vue/vueapp.js'
 
 export class SFSettingTruthsDialogVue extends VueAppMixin(FormApplication) {
   constructor() {
     super({})
   }
 
-  static get defaultOptions(): FormApplicationOptions {
+  static get defaultOptions() {
     return mergeObject(super.defaultOptions, {
       title: game.i18n.localize('IRONSWORN.JOURNALENTRYPAGES.TypeTruth'),
       id: 'setting-truths-dialog',
       resizable: true,
       width: 700,
       height: 700,
-    })
+      rootComponent: sfTruthsVue,
+    }) as any
   }
 
   protected async _updateObject(
@@ -25,32 +25,34 @@ export class SFSettingTruthsDialogVue extends VueAppMixin(FormApplication) {
     // Nothing to do
   }
 
-  get renderHelperOptions(): Partial<VueSheetRenderHelperOptions> {
-    return {
-      rootComponent: sfTruthsVue,
-      vueData: async () => {
-        const pack = game.packs.get('foundry-ironsworn.starforgedtruths')
-        const documents = (await pack?.getDocuments()) as JournalEntry[]
-        if (!documents) throw new Error("can't load truth JEs")
+  getData(
+    options?: Partial<ApplicationOptions> | undefined
+  ): MaybePromise<object>
+  getData(
+    options?: Partial<FormApplicationOptions> | undefined
+  ): MaybePromise<object>
+  async getData(options?: unknown) {
+    const pack = game.packs.get('foundry-ironsworn.starforgedtruths')
+    const documents = (await pack?.getDocuments()) as JournalEntry[]
+    if (!documents) throw new Error("can't load truth JEs")
 
-        // Avoid rollupjs's over-aggressive tree shaking
-        const dfTruths = ((starforged as any).default as Starforged)[
-          'Setting Truths'
-        ]
-        const truths = dfTruths.map((df) => ({
-          df,
-          je: documents.find(
-            (x) => x.getFlag('foundry-ironsworn', 'dfid') === df.$id
-          ),
-        }))
+    // Avoid rollupjs's over-aggressive tree shaking
+    const dfTruths = ((starforged as any).default as Starforged)[
+      'Setting Truths'
+    ]
+    const truths = dfTruths.map((df) => ({
+      df,
+      je: documents.find(
+        (x) => x.getFlag('foundry-ironsworn', 'dfid') === df.$id
+      ),
+    }))
 
-        return {
-          truths: truths.map(({ df, je }) => ({
-            df,
-            je: () => je, // Prevent vue from wrapping this in Reactive
-          })),
-        }
-      },
+    return {
+      ...(await super.getData()),
+      truths: truths.map(({ df, je }) => ({
+        df,
+        je: () => je, // Prevent vue from wrapping this in Reactive
+      })),
     }
   }
 }