Yooooo

[98mux]

Yoooo I just wanted to say hi! Great work on the preprocessor! Awesome job!

I love the ideas you have in v2, can't wait to try them out. I tried to set it up for myself but ended up with getting this error in svelte kit for whatever reason, not sure why

9:23:24 PM [vite] Pre-transform error: /home/project/.svelte-kit/generated/root.svelte:8:113 $props() can only be used at the top level of components as a variable declaration initializer
9:23:24 PM [vite] Error when evaluating SSR module /.svelte-kit/generated/root.js: failed to import "/.svelte-kit/generated/root.svelte"

I want to create something simular as yours with my own preferences (if i ever get around to do it)

Some stuff i have on my wishlist are:

1. props, the same 'export let' syntax from svelte 4, in union with svelte 5

let {a,b,c, ...restProps} = $props();
export let d = "nice";

compiles to

let {a,b,c,d:"nice", ...restProps} = $props();

Which allows you to use the ...restProps if it is needed

2. optional dependency array in $effect

   $effect(() => {
   a = b + c;
   }, [a,b]);

   compiles to

   $effect(() => {
   try{
   JSON.stringify(a);
   JSON.stringify(b);
   }
   catch(){}
   untrack(() => {
   a = b + c;
   });
   });

   From my limited knowledge, the stringify function will deeply track any changes (so if a.a changes the effect runs)

Would love to chat

[KilDesu]

Hello ! Thank you ! :)

props, the same 'export let' syntax from svelte 4, in union with svelte 5

I personally don't think I'll implement another syntax for props as the Svelte 5 syntax is less verbose for both Typescript and vanilla Javascript. Also, I couldn't really add support for both syntaxes at the same time as Svelte's eslint plugin would probably cry about it. Just for your information, you can just write this for default values:

let { a, b, c, d = "nice", ...props } = $props();

It's just better than further adding export let.

optional dependency array in $effect

Yes, I could add an optional dependency array, but it is less powerful than using the $untrack rune. For example, with $untrack, you could do

$$(() => {
  console.log(count, $untrack(name));
  if(count > 10) {
    name; // name is now also tracked
  }
})

With the dependency array, all the instances would be untracked. Also, you don't need the JSON.stringify part as Svelte 5 uses proxies to deeply track objects, if I'm not mistaken.

If you want to chat, I'm kildesu on Discord :)

[KilDesu]

I tried to set it up for myself but ended up with getting this error in svelte kit for whatever reason, not sure why

9:23:24 PM [vite] Pre-transform error: /home/project/.svelte-kit/generated/root.svelte:8:113 $props() can only be used at the top level of components as a variable declaration initializer
9:23:24 PM [vite] Error when evaluating SSR module /.svelte-kit/generated/root.js: failed to import "/.svelte-kit/generated/root.svelte"

Here we go, the problem with $props was fixed in 2d675cd687c478effb708493dc511e3d0f628f22