Discussion: TRL 0.2.0-next.1 Pre-release
Greets @FVTT ▹ Developer,
I'd like to open a discussion prior to the initial
0.2.0-next.1
release to set expectations and address concerns. When released I recommend as many folks to upgrade as soon as possible to get a better testing pool. Like all of the TRL releases even the first "beta" release will be rock solid and production ready. The further next.X
series of releases will mostly be refining types particularly new Foundry core types and other odds and ends. All of the major refactoring of sub-path exports will be present from the initial release as well as various fixes reported since v12
dropped and many other useful enhancements to TRL.
The discussion below relates to 0.2.0
update concerns and not TRL 0.1.x
.
---
Repo and NPM package name changes.
The main repo in typhonjs-fvtt-lib is now runtime
instead of typhonjs
. Likewise svelte-standard
is now standard
.
I will be making a new NPM package release for the standard library: @typhonjs-fvtt/standard
instead of svelte-standard
and marking the older package as deprecated.
---
This release is large and will require some package import refactoring depending on what parts of TRL you utilize in your projects. Please see the pre-release 0.2.0 API docs which have now been updated reflecting all of the sub-path changes.
More or less a lot of these changes affect the standard component library as now instead of #standard/component
the components are logically separated into associated groupings. like #standard/component/button
for buttons, etc.
The following changes will be the most likely:
- All application shell components
#runtime/svelte/component/core
-> #runtime/svelte/component/application
.
- localize
(helper function for i18n support):
#runtime/svelte/helper
-> #runtime/util/i18n
.
- Components from the standard library will now have more explicit groups / sub-paths. Expand the tree for #standard/components
in the updated API docs.
I was able to make tremendous progress in the last week cleanly separating all non-Foundry specific components from the FVTT standard library into a base standard component library that can be used anywhere. This significantly increases the timeline of the Svelte 5 transition because I can now iterate on the Svelte 5 conversion without involving Foundry itself.
To facilitate this separation though the Vite config will need a small mod:
Adding the alias
directive allows the generic components to compile against the FVTT runtime and not the "base runtime".
---
There is only one code / breaking change. In the past various callbacks whether for app header buttons, TJSDialog callbacks, or various components from the standard library that provide data defined callbacks took argument lists. Instead of a variable number of arguments a single object
will be passed now. This allows flexibility in typing and further extension in the future without disruptive refactoring if those arguments would have changed.
If you have a dialog callback for instance that previously was:
all you have to do is add {}
to destructure:
That's the breaking change for 0.2.0
. This does require naming the destructured properties correctly and being mindful that you need to find / replace all callbacks appropriately across your codebase. For most folks that might be TJSDialog usage and app header buttons. It's less likely folks are using the data defined callbacks from the components in the standard library.51 Replies
Timing wise I'm still one solid ~4-5 day coding push out. I didn't know / think the generic standard library could be easily separated, so that took up the last week. Hopefully by the end of the next week
0.2.0-next.1
is out.
The remaining work should go smoothly and I'm addressing almost all concerns raised over the last year. For instance refactoring TJSGameSettings
so that it can be used independently without pulling in the UI / components; IE reduce the dependency tree that snuck into a previous TRL release.
About the only concern I won't get to is modal app window / dialog closing support for game controllers which is an edge case reported by one developer over the summer, but I'll look at it soonish.
Ooo... I should mention too a major feature of TRL 0.2.0
is that it works out of the box on mobile / tablets if you are using the standard library of components.
There are also some spicy new Foundry integration components in the standard library. Very easy core file browser integration including a modal file picker!
---
Ahh... Yes...Three more important refactoring concerns that I'd like to discuss. If anyone has concerns please respond soon. I don't think any of this should affect those with greenfield Svelte projects using TRL.
1. I am removing #runtime/svelte/application/legacy. This sub-path export has long had backward compatibility / helper functionality for folks converting a core Handlebars project to Svelte incrementally. I don't think anyone is using it nor should they with a Svelte native project. I think most folks that started using TRL did so with greenfield efforts using SvelteApplication
.
2. I am removing #runtime/svelte/helper. localize
has already moved to #runtime/util/i18n
. The remaining legacy helpers just duplicate core Handlebars helpers and can be removed. Again just there to help folks transition away from Handlebars.
3. I am removing #runtime/tinymce. This loaded a custom oEmbed plugin I made for TinyMCE to be able to embed videos from YouTube / Vimeo in editor content. This was mainly used in FQL and it requires storing data in document flags, so has limited use cases because of the Foundry server side scrubbing of editor content. If by chance you were using this which I gather probably no one is then it is still available, but you just have to load it manually instead of using #runtime/tinymce
.Gonna be updating the moment its up!
Also you might want to add the "small nod to Vite" text to the readme
I'm assuming 0.2.0 is specific to v12? PF1 (the only system I write my mods for) is still finalizing the last v11 before updating for v12 so I'll probably be out of this for a bit
Vauxs:
Also you might want to add the "small nod to Vite" text to the readmeYep, I'll add a wiki entry and link it to the README. david:
I'm assuming 0.2.0 is specific to v12?Nope v11 still works fine. The two areas where
v12
changed (again!) underlying API is the ClientDocumentMixin properties for app / document registration. This got handled in the 0.1.3
hot patch.
The initially uncaught v12
change in the core function fromUuidSync
is that it now throws an exception instead of returning a falsy value for malformed data. It turns out in ProseMirror when you drag and drop a document this triggers the paste callback chain in PM and with the new exception behavior a TRL PM plugin just needed to add a try / catch instead of just a conditional check on the returned result.
---
That being said I very much think the forthcoming v13
release will be significantly more disruptive to folks dealing with core UI aspects like the sidebar and other Foundry aspects like possibly the file picker and such.
If I can I'll try and time things as best as possible with the Svelte 5 / 0.3.x
release series to coincide with v13
and handle any core platform changes there. SO 0.3.x
/ future Svelte 5 version of TRL might be locked to a newer version of Foundry.
OK... I should be done with all of the API / sub-path changes. The temporarily hosted 0.2.0-next.1 API docs have been updated.
I'm now down to just a few changes / additions in the standard library of components and making the menu for essential-svelte-esm
just a bit nicer.
Looks like 0.2.0-next.1
will be released this week!
Alright... Just a few more sub-path changes for tidiness. An example is #runtime/svelte/gsap
moving to #runtime/svelte/animate/gsap
. The temporarily hosted 0.2.0-next.1 API docs have been updated.
Some good news is that I worked out the build step for the generic standard library to be included in the FVTT standard library without requiring a modification to the Vite config / no need to add the alias
mentioned above in the first post.
I'm now really just down to some final cleanup in the generic standard library and demo app. I'm going to push hard through the weekend and if all goes well the initial 0.2.0-next.1
release will be minted.
I hope you folks don't mind the updates. Another removal was #runtime/security/client/dompurify
which was just loosely referenced in the FVTT editor components. This one again was a holdover from FQL and storing editor contents in flags where it isn't sanitized by the server. With the removal of the oEmbed TinyMCE plugin it only makes sense to remove dompurify
as well as it likely wasn't used by anyone.
I'm pretty confident that the 0.2.0-next.1 API docs in regard to sub-path exports is refined at this point. I don't expect much to change before initial 0.2.0
release. Feels quite a bit cleaner and will make perusing the docs clearer.
After the initial release I'll likely spend 3-5 days adding lots of descriptions and details to the API docs, quick start guide, and such.
Just a note for those still targetting v11
in regard to the ProseMirror editor component in TRL / Foundry. Previously there were various bugs on v11 in the core PM implementation which caused issues / errors thrown and hang ups when multiple editors were open. To get around / take a preventative approach the TRL PM editor component automatically closed any open editor when an additional editor was opened.
In my current testing the latest v11
doesn't throw errors with multiple editors open like it used to, but still the target for key commands is the last opened editor component regardless if focus returns to a different one. The same problem will happen with any core editors. Since errors are no longer caused on v11 I've taken out my "preventative" workaround, but just keep in mind that it's just a bit wonky when key commands may not target the focused editor. This affects v11
only.
I'm removing the workaround so that v12
onward when working with the PM editor component you can have multiple open at the same time as key commands will target the focused editor correctly.
Heya @Faey. I think I saw a comment from you on the mothership. If this is referring to TJSGameSettings
pulling in the UI code that is fixed in the imminent 0.2.0
release. It was one area where things got a little out of hand if all you wanted to use was game setting capabilities.
One of the challenges with TRL is that presently the easiest way to distribute it is to bundle in what is used from the library to each package. I have experimented with delivering TRL as a Foundry library package where for a large part of it you can link against the Foundry library package which is not included in your package. This significantly reduces 3rd party package sizes to the 20-100kb size.
The problem with that approach is the lack of reasonable versioning in the Foundry package manager.
An alternate approach that I think is a very good fit is using an importmap script. This is tricky in a shared platform like Foundry though because there can be only one importmap script on a page, so this is something that would need to be added to Foundry to manage like additional details in package manifests for import map linking to a CDN and a possible fallback to a local package when there is no external internet connection.
If you think about it Foundry ships all the resources and more for the core libs for folks to build their packages. If you had to link in all of AppV1 or AppV2 + handlebars to each package instead of using the global / pre-loaded options by the core platform package sizes would increase for the default tech.Hi there, while that is an issue for sure, TJSGameSettings pulling in the UI code only really matters because the UI code is quite big (although I think lazy-loading code is a good practice that more module developers should employ, no need to force the full multi-hundred kb bundle down to the players for modules where half of the code is GM only)
The real issues for bundle size are
gl-matrix
and especially svelte/store/position
position is a whopping 200kb after transformations and treeshake (but before minify) in a project that barely uses any of TJS
After minify it is 55kb
together, gl-matrix and position are responsible for about 2/3 of the total size of TJS
That said, would you think it might be reasonable to try and ship a TJS Mixin for AppV2? Svelte version management would for sure be a bit complicated, but as it stands we'd have to ship svelte twice anyway, as there is no way I could find to render a svelte component with another module's svelte runtime. The "required" section of the module manifest should be more than enough to do dependency resolution for TJS versionsAlright... So here is the deal. I haven't done the best job communicating the goals of TRL and the larger scope of work that has been completed since the get go.
From the first year of TRL / Svelte 3 I have had an experimental build that offloads TRL & Svelte in a way that you can link against a hosted version of both across independent package deployments. This works for Svelte 3 & 4. I have in-depth knowledge of how Svelte works and create a version where a single runtime version of Svelte can be linked to multiple independently compiled packages. Likewise TRL /
#runtime
part of the library is also experimentally available. In the build process there is a non-described publicly additional Rollup plugin you can add to the build process to link against a served version of TRL & Svelte.
The reason this is not available is because of the weakness / very basic functionality of the Foundry package manager. This build just needs to be served and nothing is loaded (well some CSS), but no JS in the main Foundry loading process.
So yes... If you know what you are doing it is possible to build Svelte in a way that it can be shared across independent packages. Likewise TRL can be too.
The biggest example is that the basic template-svelte-esm
goes from ~522kB to ~4kB. This is a massive reduction.
The work is done and proven for Svelte 3 & 4; unsure about 5 as internals probably drastically changed. Even if Svelte 5 can't be offloaded the runtime is reportedly much smaller; the bulk is in not being able to provide TRL as a shared library.
Once TRL stabilizes after the Svelte 5 transition I will consider releasing a shared package, however it is problematic to do so at this time because this TRL shared library needs to duplicate every version released because the Foundry package manager is deficient when it comes to library packages that just need to serve code versus be loaded like a normal module / system, etc. You can't have multiple versions of the same package installed. This means I have to keep adding new TRL releases manually versioning them by path. This is not sustainable as the TRL package would keep growing larger each release.
Check out the video... The space saving is dramatic.
https://www.youtube.com/watch?v=EQ9X8GpajeETyphonJS
YouTube
TRL Experimental Package Linking
This video is a demo of the non-released experimental package linking of a 100% served version of the
#runtime
package of TRL including a shared modified version of Svelte 4 that can be linked across packages.
This reduces your package size to just what you include as your content components and any other custom JS in your package.
Three di...TJSGameSettings pulling in the UI code only really matters because the UI code is quite bigFixed in
0.2.0
(although I think lazy-loading code is a good practice that more module developers should employ, no need to force the full multi-hundred kb bundle down to the players for modules where half of the code is GM onlyDevelopers responsibility and not TRL.. You can have a conditional and use import dynamic if
game.user.isGM
is detected to load a GM only bundle / your package.
That said, would you think it might be reasonable to try and ship a TJS Mixin for AppV2?Yes for those that don't care about full application dev experience reactivity this is possible. The mixin will just load your Svelte component into an AppV2 shell. Have patience. AppV2 is still very beta... The premise of TRL which 100% is possible with AppV1 is what if everything about application development could be made reactive and improved. This is and has been the entire time a successful effort. AppV2 prevents this capability by closing off extension mechanisms in the base class through private variables / functions. So a mixin will be available soon for those that want a minimal dev experience. IE you get what Foundry provides in AppV2 for the app frame / lose all app reactivity. This may be fine for a lot of you. I have yet to decide the larger course of action to take regarding the future of a fully reactive app dev experience beyond AppV1. The transition to Svelte 5 is more important. There are many things in play here, so please be patient. --- Part of the communication gap too in regard to the "heavyweight" features of TRL like
TJSPosition
is a lack of understanding the full power granted. Not only in app positioning, but positioning any element with a super efficient render / layout pipeline that can't be beat for performance. Besides the reactivity available there is an essential positional tweening system and full 3D validation system that can be extended. That is an awful lot of power in 55kB minified / gzipped, etc. The built-in tweening / animation capability is ~33% faster than GSAP. However if you need advanced features like timeline / animating non-position properties then GSAP is the way to go. There is a bridge and easy data defined vs functional capability to link TJSPosition to GSAP. Also easy loading / access to GSAP through TRL.
Offloaded in a shared TRL library direction this costs nothing, but for now compiling these resources directly into your package is a limitation of Foundry and not TRL.while I do understand the concerns with foundry's package manager I do not think that having the ability to install multiple different versions of the same code base is at all desirable, foundry does provide a mechanism to define compatibility to a given library module in the same "minmum", "verified", "maximum" format that you can use to define foundry version compatibility.
Personally, I think this consensus algorithm should be enough for module development. If the library module properly utilizes semver, there should be no issues here that you wouldn't also face in environments like NPM
and while this is very impressive, I do have to admit that I don't know what I would use this capability for presently, is there a demo of this functionality?
I'm not sure if foundry actually looks at the version requirements when installing a dependency. And even if it did, it doesn't solve the issue. You can't have multiple versions of the same module
It does (albeit, sometimes poorly)
Historically it did not but now I think it has support for all inter-dependencies (system, world, module)
If the library module properly utilizes semver, there should be no issues here that you wouldn't also face in environments like NPMAlas, as mentioned by others the Foundry package manager is nowhere near the robustness of a real package manager like NPM. Delivering TRL as a library module is not as feasible without significant technical debt and a massive time sink depending on strategies taken. The only "easy" way to serve TRL is a manual versioning process where the module library adds a new path for every TRL release: /modules/typhonjs/remote/0.1.3/<ALL OF TRL> /modules/typhonjs/remote/0.2.0/<ALL OF TRL> Otherwise, if you just made a running release of the latest TRL any packages that potentially are not updated and rereleased will break. TRL is more akin to what is distributed as the core tech / platform libraries. There will come a time though when TRL reaches maturity and is significantly more stable. This won't occur for another year though given the Svelte 5 transition. When this occurs the "easy" strategy above can be considered when long term stability is more likely. The experimental work that I have done proves that Svelte 3 & 4 / TRL can be served as a platform library. Albiet this is great news for my plans beyond Foundry, but there is still some hope for a future offloading of TRL as a shared library on Foundry; just not right now. ---- The idea of Foundry adding the capability to support a managed
importmap
script alleviates versioning as the import map can be point to TRL versioned through CDNs. All of NPM is mirrored by several CDNs these days. This does not solve the problem when there is no outbound internet connection and someone is running Foundry on a LAN as one needs to fallback to a locally served version.
That would just be a nice to have. You could have the Rollup plugin directly replace the #runtime
imports with direct CDN links. This however doesn't solve the LAN only scenario which remains and couldn't be addressed in this case.
----
Basically this is a 3rd party problem. Don't own platform... You can't control the default libraries served. TRL doesn't need to be treated much differently than how GSAP is served automatically, but requires manual loading if used.
----
I should say at the end of the day that this is not as big of an issue because Foundry itself and all the content served is not a thin client by any means. The Foundry core tech / libraries is ~3-5MB. Then add Pixi, add X, Y, Z... Then all the media content... It's alot!
I just want to clear the air that the downside of bundling in TRL to each package released with it isn't the end of the world and the path of least resistance given the circumstances / platform issues involved.
Treeshaking absolutely works and only what you use from TRL is bundled into your package. Granted aside from that one temporary overreach in TJSGameSettings (fixed in 0.2.0
) that pulled in the UI code things are working as expected.
It can be frustrating when there is no good or positive discussion about my work on the main Foundry servers. If you named TRL in your posts there I would have had to respond on the main servers albiet in a more brief overview of the scenario.I should say, that my frustration is not with TRL itself, it's a very handy module that dramatically reduces my boilerplate. My frustration is with the fact that despite all the bundling related issues, there is no better option to get svelte working in Foundry
Svelte development is just unsatisfying as a foundry developer.
What I would want for the foundry module DX, is the option go pick and choose easily how my application frames are rendered, and to have minimal boilerplate outside of my solution of choice
That is why I didn't name TRL, because TRL isn't the issue
The foundry DX is
alas, Foundry isn't really going to change in that regard
unless there comes some high roller
For simple UI, ApplicationV2 is already leagues better than we had before
If all you care about is writing your UI in something that isn't handlebars, AppV2 does that for you
Does it though? Sure looks cleaner but AppV2 restricts many of the things down. Hooking your component to an empty window has never been an issue.
I am inclined to believe that, but I have not yet actually made an application where AppV2 would not have been sufficient, most of my applications are just fancy settings UI
AppV2 and all of the related V2 document / actor / item sheets do nothing for Svelte, React, Vue, any other framework simply due to that data required for reactivity in each of these respective frameworks is not addressed.
You can't just add a Svelte mixin and things magically become reactive. Data preparation is key.
For TRL and Svelte 5 and new reactive document property access will change everything.
Right now in TRL only the editor components are hard coded to accept a document w/ property path. Once there is a generic way to connect various components with reactive document properties this drastically opens up the possibilities w/ TRL. I can't hard code Foundry / document links into every component I release.
fwiw I mainly take Michael's word for it, but also my own experience trying to make anything custom in V2 made me very quickly reconsider 🥴
My uses are very much more advanced
I do have to catch up and take a very good look at the very latest AppV2 version as presumably it has received updates over the v12 versions released.
The simple fact is that Atro and co designed something in the blind and attempted to make things generic. Not understanding how reactive frameworks work (there is a quote somewhere on the Foundry server where I think Atro dropped something like: "I don't know how React works") though are handcuffs and there is no possible way AppV2 will be robust in the way required to adequately make working with various additional reactive frameworks nice.
That being said as I've mentioned before AppV2 may make Handlebars more flexible, but that's it.
There are some really quirky things about AppV2 I see folks talking about. Most recently was having to specifify which pointer event number triggers an action. I think this was for the header menu bar. I have to track that down. Haven't looked at the API.
I might me using TRL wrong here, but most of my reactivity comes from hooks, which is miles easier in a svelte component than hacking something together with Handlebars
I mean handlebars is nothing but a template
Reactivity with handlebars is just copy pasting
$(div).append(templateString)
Yes, exactly
Which is why Foundry Apps are not really reactive and hooks are just prompts for re-rendering
Not sure how you are using TRL in this case
What I am a bit lost on is "Data preparation is key."
I do understand that the way foundry applications do it, any kind of reactivity is just shortcutting having the user close and open the app window again.
What I don't understand is how AppV2 is less flexible, as in both cases you have to manually hand your properties to your svelte component for things to work
What I am a bit lost on is "Data preparation is key."Document model reactivity.
There's two things at hand here
1. AppV2 specifically has locked off many of its functions that made the modification of the window possible. Thus making it less extensible and reactive, say, changing the header bar at the top, or how it moves around the screen.
2. The Data preparation is a problem for both, but which AppV2 exacerbates through point 1. Svelte has reactive stores, allowing the components to update only the specific parts of the HTML instead of the entire page. TRL has plenty of wrappers around these methods, allowing for such fine-grained reactivity.
So when AppV2 finally has the ability to update only specific tabs of an entire page, Svelte can modify just the styling of a single text input because you typed into it because it reacts to only that one value being modified.
To
#2
that is where Svelte 5 will unlock document property reactivity. Right now TJSDocument
is more of a sledge hammer. You can get reactive updates when a document changes. Soon via Svelte 5 there is a very good chance to be able to create reactive state for specific document properties. This can then be hooked up to generic components that work with reactive state, but have no idea about the Foundry document model.
Currently a lot of the generic TRL components in the standard library accept a store.
I have prototyped a Svelte 4 approach to making property stores for the Foundry document model. However, Svelte 5 adds significantly better capabilities to make this possible.
I'm back to being very bullish on aggressively moving to Svelte 5 after the 0.2.0
release. A lot of the unknowns in previous statements on when a Svelte 5 version were predicated on some of the architectural shuffling required to separate the generic components from the Foundry specific standard library. I actually got that all solved w/ 0.2.0
.Currently making a website in Svelte 5 to get myself prepped for it lol
I am still rather confused when it comes to passing
$props
down to children()
but I guess I will figure it out when the actual tutorial comes outYeah.. It's mature enough... Saw 3
breaking changes
in the last several pre-releases.
I'm definitely a bit concerned about the type generation process with Svelte 5. I got things working well even for ESM / JSDoc with Svelte 4. Granted I am not going to spend much time fully flushing out the Svelte 4 / TRL components for accurate types since things are changing quite a bit for Svelte 5.Yeah I dislike having to type props by myself
The ESM / JSDoc typing for Svelte 4 is specifically enhanced by my declaration tooling
esm-d-ts
and Svelte 4 plugin I've made for it. I do quite a bit of additional TS declaration modification to make the generated types more effective.
The type declaration aspect of Svelte / what is provided out of the box is just for functional types and not very good / lots of duct tape. If you generate API docs from the types SvelteKit produces it just sucks / is very bad.
In the TRL docs where you see class / namespace for each component. Default Svelte generates class / generic type aliases Events / Props / Slots completely separated making it practically impossible to generate API docs from types. The descriptions and many other compoenent comments in the TRL types are added through declaration modification and not supported by default Svelte type generation.
Basically, what I'm getting at is that I can't wait to figure out the type declaration solution for Svelte 5.. 😮 That is going to be a ~2 week dive into the depths.Ah speaking of type declarations, I do have some weird behaviour in the current ones
the props object passed to svelte application options for some reason can't be a flat object literal
it gets interpreted incorrectly as trying to assign
() = Record<string, any>
So I end up having to write a method returning the literal instead, weird type resolution bug as a standalone Record is definitely typed in there
Another is that the type attached to the class property in the same subobject does not actually accept svelte classes
it's the same reason again as well
Under TS, the Svelte Component becomes
and the object literal can not be mapped onto RecordThe
0.1.3
types for svelte
in options is not as precise.
For TJSSvelteConfig
:
- 0.1.2
- 0.2.0
It's correct in the 0.2.0
docs for class
.
That being said I'm planning on spending 3-5 days after 0.2.0-next.1
drops to add lots of general API docs in addition to making things more accurate in the TRL part of types.A sidenote here, Record<key,value> is not the preferred typing for a generic key value object
it would be
{ [key: string]: any }
Yep.. That is an alternate way of doing it (newerish in terms for folks working with JSDoc / new recommended approach) and you'll see that more in other areas of the TRL types. It's a process.
Typescript is quite flexible, but it's predefined utility types are very opinionated
Record will not accept any keys that aren't in it at the time the object is created
Which is why the class type assignment fails if the constructor options are a record
Well all of that is slated for the 2nd
beta
release 0.2.0-next.2
, so good to get input from folks.I am happy to just report any typing issues I see in 0.2.0
Yeah, I'm well aware that JSDoc types sometimes resolve differently from how tsc would resolve them
Ah I do have a question about Position, as it came up in the size discussion. I assume it is used internally for the SvelteApplication stuff, which is why it auto-imports?
The initial
0.2.0-next.1
release handles all of the big stuff / sub-path changes / fixes to TRL like TJSGameSettings
, etc. Types for TRL parts have improved of course over the year. Record
was just the old recommended way via JSDoc though the { [key: string]: any }
way is now recommended. Glad to learn it makes a difference.
Ah I do have a question about Position, as it came up in the size discussion. I assume it is used internally for the SvelteApplication stuff, which is why it auto-imports?Yes..
app.position
is a TJSPosition instance.If its a full position tweening system, is it limited to be used only on DOM or Svelte, or could I use Position to tween pixi.js objects as well?
I am using TJS in a new project of mine so I can cleanily instantiate a second canvas for some overlay effects and destroy it wholesale with the svelte component it lives in, and I'd definitely not mind if anything TJS has on board would save me the time of having to write a tweening/animation system myself, or import another one into my growing bundle
Just DOM / Svelte. I'm sure Pixi or a plugin addon that can handle animation / tweening if not built into Pixi.
The nice thing about
TJSPosition
is that it is not something hard coded into just SvelteApplication
. You can broadly use it for any DOM element positional use case including tweening and easy hookup to GSAP when extra firepower is needed.That's still handy
Rendering a second canvas does not work well on lower-power computers, so I need to provide an alternative, non-pixi renderer for the module as well, so position would come in handy for tweening in that usecase
As my module is intended to provide a "Splash Scene" kind of experience, I can't just not render anything for weak machines, so an HTML-only renderer for the overlay I am developing is a must
Do you have example code somewhere for how to integrate TJSPosition into a custom component?
Nice... Re: "Splash Scene" approach. You'll definitely like the
TJSPosition
to GSAP bridge. It really makes it easy to work with GSAP in a data oriented way vs the functional API.
The box demo in essential-svelte-esm
is a great example. BUT just wait for 0.2.0
to take a look. I also cleaned up the box demo code to make it a bit nicer. It really should be out tomorrow. Just doing some final testing / adding last new demo, etc. today.I am thrilled to finally have a module usecase where those 75kb of position code do more than put the window somewhere ;D
I'm actually really hoping someone takes on making a killer cards implementation w/ TRL / TJSPosition / GSAP. That will make the implementation so much easier and effective especially since you can have it over the other UI.
I think I should also give some context why I am so concerned about bundle size and lazy loading. One of my modules, obs-utils, is intended for use in a "GM Client" + "OBS Spectator Client" setup, so I'd rather avoid loading any code that the user does not absolutely need in that OBS Browsersource
My other large module, ethereal-plane, has Foundry-to-(Twitch/Youtube) bridging, which is only really interesting on the GM client, so there again, I am only loading the UI components on the GM client, to make the module less impactful on player clients that can't utilize its functionality anyway
I think it's good that you are thinking about dynamic loading. Now just convince the rest of the Foundry 3rd party developer community.. ;P
I should actually look into TJSDocument for obs-utils
one functionality is having a reactive overlay to display actor values on stream
it uses the (barely supported) /stream page
I am currently doing actor reactivity by listening to the updateActor hook, which thankfully fires on /stream
but since I only care about a predefined list of actor documents, if I could wrap them in TJSDocument, that would save me a lot of headache
In any case, I am very grateful for all the information and context you and vauxs have provided, I'm sorry to have basically turned this 0.2.0-next thread into a library Q/A haha
No worries.. Indeed a bit less focused on the pre-release angle, but larger conversations that are useful.
0.2.0
is a thorough pass through everything / streamlining the API. Definitely a focus on hardening the API too making things less error prone. An example there is that TJSDocument
is significantly more resilent to how and when it attaches to the backing Foundry document. It is now "fire and forget" / use in Svelte like normal. The 1st gen implementation had some manual management aspects required which weren't thoroughly communicated.I see! I can't wait for it
So, @typhonjs-fvtt/runtime
0.2.0-next.1
is out. For now do refer to the message in the dev-lounge for initial comments.
Take note that @typhonjs-fvtt/standard replaces @typhonjs-fvtt/svelte-standard
which is now deprecated.
Installing essential-svelte-esm
from the source repo and checking things out is recommended.
Updating depending on what your package uses / does w/ TRL can be relatively quick. Only took ~5 minutes per package... for me but that is an unfair shake because I know TRL in and out.
Please post any comments or concerns in this forum post. Hopefully some folks can attempt the upgrade this weekend.
I'd like to release the final 0.2.0
next Wednesday / Oct. 30th. If there are any changes / fixes you need let's suss them out ASAP. Things should be rock solid though.
Do remember that due to widespread / large shift in styles / CSS for Foundry v13
that impact TRL that 0.3.0
is coming out ASAP such that you'll have plenty of time to test your packages in the v13
dev / test / release cycle. 0.3.0
will have no API changes and just fix the platform style changes. Updating to 0.2.0
is the first step on this path.