TyphonJSMagus

Issues Configuring TyphonJS in TS

I'm receiving this message in my TS Files: Cannot find module '#runtime/svelte/application' or its corresponding type declarations. I thought including a paths property in tsconfig.json would fix it, but no:

        "paths": {
            "@/*": ["src/*"],
            "#runtime/*": ["node_modules/@typhonjs-fvtt/runtime/*"],
            "#standard/*": ["node_modules/@typhonjs-fvtt/svelte-standard/*"]
        },

        "paths": {
            "@/*": ["src/*"],
            "#runtime/*": ["node_modules/@typhonjs-fvtt/runtime/*"],
            "#standard/*": ["node_modules/@typhonjs-fvtt/svelte-standard/*"]
        },

What am I doing wrong?

Magus•195d ago

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ES2022",
        "moduleResolution": "Node",

        "baseUrl": "./",
        "declaration": true,
        "declarationDir": "lib",

        "strict": true,

        "skipLibCheck": true,
        "isolatedModules": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "jsx": "preserve",

        "allowJs": true,
        "checkJs": true,

        "noImplicitOverride": true,

        "paths": {
            "@/*": ["src/*"],
            "#runtime/*": ["node_modules/@typhonjs-fvtt/runtime/*"],
            "#standard/*": ["node_modules/@typhonjs-fvtt/svelte-standard/*"]
        },
        "lib": ["ES2022", "DOM"],
        "typeRoots": ["node_modules", "types"],
        "types": ["dice-so-nice", "foundry", "handlebars", "@types/jquery", "socket.io", "svelte"]
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte"],
    "exclude": ["node_modules"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ES2022",
        "moduleResolution": "Node",

        "baseUrl": "./",
        "declaration": true,
        "declarationDir": "lib",

        "strict": true,

        "skipLibCheck": true,
        "isolatedModules": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "jsx": "preserve",

        "allowJs": true,
        "checkJs": true,

        "noImplicitOverride": true,

        "paths": {
            "@/*": ["src/*"],
            "#runtime/*": ["node_modules/@typhonjs-fvtt/runtime/*"],
            "#standard/*": ["node_modules/@typhonjs-fvtt/svelte-standard/*"]
        },
        "lib": ["ES2022", "DOM"],
        "typeRoots": ["node_modules", "types"],
        "types": ["dice-so-nice", "foundry", "handlebars", "@types/jquery", "socket.io", "svelte"]
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.svelte"],
    "exclude": ["node_modules"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

TyphonJS (Michael)•195d ago

Foundry in general is not TS friendly at this point especially with no well functioning community types. There are types shipped w/ TRL for the library code, but not the Svelte components currently. The types shipped with TRL only know about the TRL code and not any underlying extensions into Foundry. IE SvelteApplication has types, but it extends the Foundry Application that doesn't have types. For TS though you need to set module and moduleResolution to "node16" or "nodenext" and include the imports field in your package.json. It should look like this:

{
  "imports": {
    "#runtime/*": "@typhonjs-fvtt/runtime/*",
    "#standard/*": "@typhonjs-fvtt/svelte-standard/*"
  }
}

{
  "imports": {
    "#runtime/*": "@typhonjs-fvtt/runtime/*",
    "#standard/*": "@typhonjs-fvtt/svelte-standard/*"
  }
}

Typescript when configured for modern Node should be able to then find the types without explicit entries in tsconfig.json. So do take a look at various updated info on configuring TS. Also probably use the latest TS. There is also a new moduleResolution "bundler" to evaluate if that helps. An article that kind of goes over the new options without a whole bunch of detail: https://www.totaltypescript.com/concepts/option-module-must-be-set-to-nodenext-when-option-moduleresolution-is-set-to-nodenext

Magus•194d ago

For TS though you need to set module and moduleResolution to "node16" or "nodenext" and include the imports field in your package.json. It should look like this:

Yes this solved most of my issues, ty

TyphonJS (Michael)•194d ago

Best of luck with everything. It's going to be a mixed bag as far as the Foundry core types go, so mileage may vary.

Magus•188d ago

It broke my Foundry Global Types, but im looking for the solution Im going to post if I find it, just in case someone else might have the problem

Broken global.d.ts when "module" is set to node16 and moduleResolution is set to nodenext

Solution: "typeRoots" and "types" are not enough, need to include the global.d.ts in "include" as well Just in case someone's happens to read this: for typescript to properly function in svelte you need a svelte.config.js with a preprocessor, otherwise svelte thinks its commonjs and weird bugs happen if you set moduleResolution to NodeNext

kgar•149d ago

Hello from one month later. Thanks for the tip! 🏄‍♂️

TyphonJS Join

293Members

View on Discord

Want results from more Discord servers?

Add your server

TRL / Svelte based game systemsThis post is a list of repos for game systems built with TRL / Svelte for Foundry. Please DM me if y List of TjsdocumentsLink to original response: https://discord.com/channels/737953117999726592/1067337319041998869/11562 Is there a way to export the quest log?I'm trying to setup a world for the PF2E Beginner Box but right now I working in a beta testing wor Fabricate@MisterPotts. Just starting a forum post to keep track of the conversation. > Fabricate doesn't ma Svelte 5 TJSDocument PrototypeGreets @FVTT ▹ Developer. As some of you might have seen there is a bit of paradigm shift that is Funky interaction with fokus managementTJS's Focus Management is creating fun issues for me again. focusKeep = true causes my drag and drop How to get rid of funky Prosemirror overlapHi. I'm getting some overlap with Prosemirror (see image) any ideas how to avoid that? ``` "@ty FQL / TextEditor enrichment issueFrom @ooblekie: > can anyone give me a hand as to why the text keeps coming up as object promise in TJSDocument not working properly with Module Sub-Types (Data Models)In Foundry, modules can define a [Sub-Types](<https://foundryvtt.com/article/module-sub-types/>) usi TRL `0.1.2` - Fine Tuning releaseGreets @FVTT ▹ Developer! I have just released a fine tuning release that brings a few more feature Embed a DropDown/MenuList made with SvelteHello again! 😄 I've been pondering creating a second module for Foundry and a few questions popped Slide Animations for SvelteApplicationI'd like my window ( which is an EmptyApplicationShell ) to play a slide-in animation when open and Bug: Multiple ProseMirror editors on same svelte component do not save properlySimple reproduction in a foundry world with at least one actor defined: ``` <svelte:options accessor System Works in Dev Mode but not after buildAfter updating to 0.1.1, I noticed something odd happening. The TITAN system now seems to work when Error building after updating to TRL 0.1.1Recently updated the TITAN system to TRL 0.1.1, but when I `npm run build` it errors out. Not sure w TJSApplication Character Sheet odd behavior with unlinked tokensHas anyone else experienced weird when using a TJSApplication as a character sheet with unlinked tok TJSDocumentCollection best practices?Hi! I've got a little component I'm using whose purpose is basically to just show a tiny preview of Release `TRL 0.1.1` - Patch releaseGreets @FVTT ▹ Developer! I have just released a patch / fix release that fixes a small oversight i Uncaught TypeError: $storeElementRoot is undefinedHi! Encountering the following error when trying to resize an application based on a TJSApplicationS Popcorn InitiativeJust opening a forum post to track @gerark progress w/ TRL & Svelte + an initial idea of implementin

Gaming

Programming

Issues Configuring TyphonJS in TS