template-svelte-ts-league

Provides a barebones Foundry VTT module template repo to get set up with using the TyphonJS Runtime Library, Svelte, and Typescript.

The Foundry types being used is foundry-vtt-types. The League's community types have been a long running work in progress. If you are developing for the PF2E game system and / or would like to try out different types granted w/ some PF2E specifics please see template-svelte-ts-pf2e.

TRL API docs

Triple licensed under the CC0, MIT, or Unlicense. This repo is intended as public domain / freely available starter code that you can use for any project you choose and licensed however you see fit with no restrictions.

About:

Getting started with a new library or development methodology can be difficult. This template repo contains a barebones setup suitable to start working on your own module. Certainly do check out Essential Svelte (ESM) for more involved demos that show specific concepts available with Svelte and TRL. Please stop by the Discord server to ask any questions or receive support on all things TRL / Svelte / Foundry.

Installation (Requires Foundry VTT version 12):

Don't skip step 9.... You have read this list right?

1. Create your version of the template in a new repo by clicking on the "Use this template" button above. In this process rename the repo to your new module name.
2. Install NodeJS if you haven't done this already.
3. Use WebStorm, VSCode, IDE of choice or command line to clone your repo into the Foundry VTT Data/modules directory (make sure to keep the name of your repo as the folder installed in the modules directory).
4. Modify the module id in module.json to match your new Foundry package ID.
5. You may of course also change the title & description of the module in module.json.
6. Rename template-svelte-ts-league.lock to the new ID of your module. This prevents Foundry from overwriting your development repo if you have also released your Foundry package.
7. In ./vite.config.ts update s_SVELTE_HASH_ID to provide a short unique hash ID; suggestion: base it off your package ID.
8. Open in your IDE or via command line and proceed to run npm install
9. Run the NPM script build to create the production bundle. This is required to initially build assets into dist/.
10. Optionally run the NPM script dev to start the Vite dev server which uses esbuild & HMR (hot module replacement) to dynamically update your running module in real time for all Svelte related components. Don't forget to enable language hot reload in the Foundry server admin for hot reloads for language translation files.
11. Restart Foundry VTT. This is necessary for Foundry to load the new module.
12. You should now have a new module installed Template Svelte (TS) or whatever title you set in step #4 visible in your modules list.
13. Launch a game / world of your choice.
14. Enable your new module under Manage Modules.
15. On reload the basic application will appear instantly as it is rendered in the ready Foundry hook from the entry.

Production / release build:

• Increment the version of your module in module.json using SemVer.
• Commit to GitHub
• Create a release / GH action will build the package and bundle assets.
  • The following files and folders are included: module.json assets/ dist/ lang/ packs/ LICENSE
  • If necessary modify .github/workflows/main.yml to change the bundling process.
• The built package is now available to directly install from your GitHub account by pasting the following link into manifest URL field in the add-on modules / install module screen: https://github.com/<YOUR GITHUB USER NAME>/<YOUR REPO>/releases/latest/download/module.json.

Updating types:

• foundry-vtt-types does have releases on NPM. Depending on the state of the types you may wish to directly install from the repo.