TyphonJS

T

TyphonJS

Join the community to ask questions about TyphonJS and get answers from other members.

Join

typhonjs-runtime

packages

Sidebar Tab Application

I have, after diving deep into the Foundry Code, figured out how to actually add new Sidebar tabs. it's a two step process of sorts. You need to add the actual button to reveal the Sidebar Tab, as well as actually provide the SidebarTab Application. ...

Svelte error when instantiating a component that wasn't bundled in the same module

as discussed in the lounge, you can find the load point here: https://github.com/FaeyUmbrea/obs-utils/blob/main/src/svelte/OverlayRenderer.svelte Ignore the fact that window.obsutils.singleInstanceOverlays is a Set and doesn't work with #each, that is fixed in my local copy of the file. The issue is that what ever Classes are in the singleInstanceOverlays Set implode in the init() function call....

Backspace doesn't work on TJSProseMirror components if content is blank when edit button is clicked

Think I found a bug with TJSProseMirror. When I click the edit button on an editor component with no text in it, the backspace key is non-functional. Then, if I save it with text and click to edit it again, I can backspace. ...
No description

Why is this update causing a duplicate Actor sheet to be opened?

On my ActorSheetShell.svelte I have a button:
<i class="fas fa-lock" on:click="{toggleLock}" />
<i class="fas fa-lock" on:click="{toggleLock}" />
Which updates a boolean on the Actor sheet system:...

TJSProseMirror for arrays?

Question about the TJSProseMirror component. I am trying to pass a fieldname belonging to an object in an array like so: fieldName={system.rulesElement[${idx}].message}...

Lancer system & TRL

Let's move the conversation over to a forum post as I have a feeling there could be a few messages. When I'm done w/ lunch I'll finish this initial post. 😄

Why is this element not reactive?

I'm using this element in two partials within the same component:
<TJSSelect options="{manaTypes}" bind:value='{$doc.system.manaType}' />
<TJSSelect options="{manaTypes}" bind:value='{$doc.system.manaType}' />
In both partials, $doc comes from context:...

How does essential-esm-svelte App Position work?

I've had a look at the code but I can't for the life of me figure out how the height of the application is being adjusted. I can see how the height value is being generated and stored, but I don't see how that transform gets applied to change the height of the app?

Can I mix and match standard foundry views with Svelte components?

And if so, how so? E.g. on my items sheet I want to render the default ActiveEffects view on one of the tabs. No point recreating the wheel there methinks. I tried this as the code for the tab: ```...

Is there a multi-select component?

My system may require the assignment of one or more options, rather than just a single option for some items. I had a look at the TJSSelect component but I don't think it supports multiple select? Wondering if there are any suggestions or whether it's a case of roll-your-own.

How to reset filter for Embedded collection?

I'm trying to allow the items list to be filtered by tabs / buttons for the type of item, rather than via a text field. My tabs are two separate components. So I have registered the typeFilter in both Comp1 (shows all items)...

Can't seem to write item values to the item database?

I have this: ``` import ItemInput from "~/components/item/ItemInput.svelte"; <script>...

For my next trick, I would like to create an inventory list of items from the character

I have access to the Actor documentStore but I'm really not too sure what to do with it to make a list.

Release: TRL 0.0.22 / `svelte-standard` 0.0.18 (codename: Echo)

Greets @FVTT â–¹ Developer. I'm very happy to announce the availability of the latest TRL release. This is a big one as I revisited everything and made comprehensive improvements everywhere that could use a little tune up. There is now sophisticated focus management baked into all application shells and all relevant components have keyboard support as well. I haven't made a comprehensive overview video yet, but will hopefully get that complete in the next couple of days. All dependencies are updated including Vite 4 support. Overall this is the most rock solid release to date and I really refined everything along with thorough testing. Looks like things are fine on Foundry v11 as well! This dev cycle started with the goal of finishing off the editor components, but I got pulled into building an advanced color picker component using a new browser feature called container queries. While this component TJSColordPicker is in svelte-standard the main export is currently commented out. I am submitting a PR tomorrow to add container query support to Svelte that I have been refining since December. It hopefully will make it through the review process and I'll post an update to TRL / svelte-standard w/ the mainline Svelte release supporting it. The color picker component made it clear that proper keyboard navigation was lacking in TRL. It's completely lacking in core Foundry; in fact you need to redefine the core key binding for the tab key from Cycle Canvas View to be able to navigate by keyboard. A comprehensive system for advanced focus management and focus trapping in applications and TJSContextMenu / TJSMenu are now enabled by default; several new options in SvelteApplication to control focus management: focusAuto, focusKeep, focusTrap with auto & trap set to true. All relevant components from svelte-standard have key activation baked into the components. Any components that needed to be brought up to solid release parity like TJSContextMenu are now complete. CSS variables were overhauled and there is now increased cohesion between all components for focus-visible / keyboard navigation with default variables that can broadly control the look and feel across your entire package. Major refactoring to TJSDialog now makes it super flexible and powerful and I'll certainly expand on the options available now. Relevant Code Changes (these are required):...
No description

How to integrate TyphonJS Actor sheet with 3rd party modules?

E.g. Tokenizer https://github.com/MrPrimate/tokenizer. I'm not sure if this is a TyphonJS / Svelte question or a more basic Foundry system dev question. What I'm trying to do is to get an Actor profile image similar to the default one in D&D 5e system, which can then support 3rd party modules that allow customisation of the profile. I'm not sure what approach to take for this, so some guidance would be much appreciated!...

How to include static assets?

I tried adding an /assets folder to the project root, and referring to it like this:
<img src="/assets/logo.webp" />
<img src="/assets/logo.webp" />
But that yields a 404...
No description

How to get dev env Hot Module Reload working?

What's the normal process for HMR? I tried yarn dev but it opens in a browser window and I therefor can't login as gamemaster because I'm already logged in to the main app on that account. I created a second user also with gamemaster privs and that then seems to enable HMR in the browser, but not in the Desktop App....

Is there a way to get Pug templates working?

According to the Vite github issues, it should just require pug to be installed. I've done that but VsCode seems to be formatting pug markup incorrectly. Pug is an indent-senstive format but it's taking this: ``` <ApplicationShell bind:elementRoot> .flexcol...

SCSS build problem with demin075.png

I scavenged this from Titan's vite.config.mjs: ``` server: proxy: "^(/systems/surge/style.css)": "http://localhost:30000",...

Welcome to the TRL Forum channel.

Hello @FVTT â–¹ Developer! For a bit of better searchability and cohesion I have started the #typhonjs-runtime forum channel as this will be a better way to keep discussion about particular topics organized. For those just getting started w/ the TyphonJS Runtime Library / Svelte and Foundry 3rd party development please check out the following demo repositories. Installation instructions in the repo READMEs. ES Module starter repos:...