Comments (4)
We'll want a solution that allows the reactive code to re-run, for example if the Todos query needs to change depending on another variable.
I was considering adding a $tracker
method, and having the compiler rewrite it into svelte 5 code like we currently do for $m:
statements. One challenge is svelte 5 has 3 different api's for reactive code that run code at different times ($derived, $effect, $effect.pre), and I currently am not sure which ones we need a tracker equivalent for.
from melte.
@zodern I think something like this might work. What do you think?
// tracker.svelte.js inside zodern:melte
import { Tracker } from 'meteor/tracker';
import { onDestroy } from 'svelte';
export const track = (reactive) => { // reactive is a reactive data source, e.g. a cursor or a value like Meteor.user()
const isCursor = reactive instanceof Meteor.Collection.Cursor;
let data = isCursor ? $state([]) : $state(undefined);
let handle;
if (isCursor) { // allows for fine-grained updates
handle = reactive.observe({
added: (document) => data.push(document),
changed: (newDocument, oldDocument) => data[data.findIndex((item) => item._id === oldDocument._id)] = newDocument,
removed: (oldDocument) => data.splice(data.findIndex((item) => item._id === oldDocument._id), 1)
});
} else {
handle = Tracker.autorun(() => {
data = reactive
})
}
onDestroy(() => handle.stop());
return data;
};
export const subscribe = (subscriptionName, ...args) => {
let sub = $state({ ready: false })
const handle = Meteor.subscribe(subscriptionName, …args, onReady(() => {
sub.ready = true
});
onDestroy(() => handle.stop());
return sub;
};
// store.js
import { track } from 'meteor/zodern:melte'
export const currentUser = track(Meteor.user())
// App.svelte
<script>
import { track, subscribe } from 'meteor/zodern:melte'
const sub = subscribe('todos');
const todos = track(Todos.find());
async function createTodo(event) {
event.preventDefault();
// call your Meteor method
}
</script>
{#if !sub.ready}
<p>loading…</p>
{/if}
{#if currentUser}
<form onsubmit={createTodo}>
<input type=‘text’ placeholder=‘Type to add new todos’ />
</form>
{/if}
{#each todos as todo (todo._id)}
<p>{todo.text}</p>
{/each}
I haven’t tried it yet so there might be issues with the above. When I attempted previously, I wasn’t able to get Svelte and Meteor 3 to play nicely together.
Maybe there’s an even better way to do it but this feels pretty nice given the direction Svelte 5 is taking.
from melte.
We’ll want a solution that allows the reactive code to re-run
Ah yes, good point. Will do some more thinking here.
I was considering adding a $tracker method
Nice! That could be really nice if it was treated like the other runes in that it wouldn’t need to be imported.
One challenge is svelte 5 has 3 different api's for reactive code that run code at different times ($derived, $effect, $effect.pre), and I currently am not sure which ones we need a tracker equivalent for.
Yeah my understanding is that $:
got split into $derived
and $effect
. $effect.pre
is akin to beforeUpdate
.
from melte.
Related Issues (20)
- Request for pushing latest changes to source control HOT 1
- Static CSS not included in build HOT 4
- ESLint configuration to ignore `$m:` label HOT 2
- How are subscriptions stopped? HOT 2
- Svelte + TypeScript: this.getTs( ... ) is not a function HOT 1
- Svelte not picked up by cordova apps HOT 1
- Add support for svelte.config.js HOT 1
- lang="ts" seems to confuse VS code HOT 1
- Migrating from rdb:svelte-meteor-data HOT 1
- server side rendering is not working. HOT 1
- PostCSS plugins using the latest API won't load HOT 1
- Enable tsconfig preserveValueImports HOT 2
- Subscriptions inside tracker statements get duplicated HOT 3
- Trackers not working as intended HOT 4
- package.json svelte field HOT 1
- nested $m does not unsubscribe HOT 3
- Sourcemaps are missing the full path for files in packages
- Svelte 4? HOT 6
- Meteor 3.0 HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from melte.