Svelte 5 TJSDocument Prototype

Greets @FVTT ▹ Developer.

As some of you might have seen there is a bit of paradigm shift that is going to occur when Svelte 5 drops with a new way of defining reactive state. Please check some of the recent discussion in the #dev-lounge for links to the Svelte 5 blog post and a few other things.
https://svelte.dev/blog/runes
https://svelte-5-preview.vercel.app/docs/introduction

I just worked up a potential prototype in the Svelte 5 REPL for what this could bring to TJSDocument for direct property access and reactive manipulation. The prototype simulates the Foundry document model update cycle. This demo is naive in many ways, so is bare bones code.

What I'm curious about is how folks feel / think about how the new dynamic reactive properties should be exposed in the TJSDocument API. The demo adds a new behind the scene property state management that dynamically creates Svelte 5

$state

$state

instances for properties defined in a documents schema. I made this accessible from a new getter on the TJSDocument instance itself;

. In the demo the naive document has a name and count properties. You can reactively access them via

doc.$.count

doc.$.count

doc.$.name

doc.$.name

. You can drop those into wherever things can be bound and setting the values automatically will invoke

update

update

via the Foundry document model (this is simulated).

This potentially addresses a way to dynamically access document properties in a fully reactive way that automatically updates the underlying document data transparently. This needs to be vetted in real world conditions once Svelte 5 drops! I have yet to think about how document flag access could be dynamically created.

You can check out the demo on the Svelte 5 REPL here:
https://tinyurl.com/tjsdocument-svelte5-2

Svelte 5 TJSDocument Prototype

$state

$state

instances for properties defined in a documents schema. I made this accessible from a new getter on the TJSDocument instance itself;

. In the demo the naive document has a name and count properties. You can reactively access them via

doc.$.count

doc.$.count

doc.$.name

doc.$.name

. You can drop those into wherever things can be bound and setting the values automatically will invoke

update

update

Svelte 5 TJSDocument Prototype

Svelte 5 TJSDocument Prototype

Continue the conversation

TyphonJS

Continue the conversation

TyphonJS

Similar Threads