You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I would say that, undoubtedly, the biggest (and only?) advantage React has over Svelte, is jsx. Just open any js/ts file and write:
constmyFunc=(arg)=>(<p>{arg}</p>)
No need to create a component. This is incredibly helpful, for example, when using libraries like Storybook, with decorator functions. A decorator function in Storybook in React might look like this:
To implement this feature in Svelte, decorator functions return a component in Svelte Storybook. To do the same, one would have to write this as the decorator:
Generally, to bridge the gap between Svelte and regular JS/TS, one has to write a Svelte component file for everything. This is one of the less fun parts of Svelte - sometimes, you need to be able to write some Svelte code, and writing a new component file, giving it a name, figuring out where to place it just sucks. This is also a lot of work for library authors - for example, to this day, Storybook still doesn't support creating stories of components with slots. Additionally, just to make the feature above work, they inject the decorator code into an actual Svelte component, which allowed calling setContext from withing the decorator function.
Describe the proposed solution
Since snippets, under the hood, are just plain JS values/functions, it would be awesome to be able to write snippets directly in .svelte.ts / .svelte.js files. Then, one could write a decorator like this:
consts=$snippet.args((a,b)=>$snippet` <div>${a}</div>`)// even like this:$snippet((a,b)=>` <div>${a}</div>`)// if tag function is not needed for implementation
The possibilities would be endless!
Alternative syntax
constdecorator=$snippet`// Maybe skip name - {#snippet()}{#snippet s()}...{/snippet} `
Regardless, I think the requirements for any syntax are:
must be regular JS syntax since the file extension still is .js/.ts
able to include arguments - a/b above
able to use local variables - ctx.globals.marginSize above
Questions
How should ${...} be treated/used? There are a couple of possibilities here:
For the first syntax - treat ${} the same as {} is normally treated in .svelte files
For the alternative syntax:
consta=1$snippet`{#snippet s(b = 2)}// requires compiler magic<Component prop={a + b} />// or<Component prop={${a} + b} />// ${a+b} would error statically because b is not defined{/snippet}`
Importance
would make my life easier
The text was updated successfully, but these errors were encountered:
rChaoz
changed the title
Creating snippets in .svelte.js / .svelte.ts files
Svelte 5: Creating snippets in .svelte.js / .svelte.ts files
Apr 20, 2024
This will mean that neither JS/TS parsers nor JSX parsers will be able to understand .svelte.js/ts files, which is not acceptable. In addition, in VSCode, you cannot preprocess .js/ts files, which will break even more things.
Plus, you cannot @render a component and mount() a snippet.
Describe the problem
I would say that, undoubtedly, the biggest (and only?) advantage React has over Svelte, is jsx. Just open any js/ts file and write:
No need to create a component. This is incredibly helpful, for example, when using libraries like Storybook, with decorator functions. A decorator function in Storybook in React might look like this:
To implement this feature in Svelte, decorator functions return a component in Svelte Storybook. To do the same, one would have to write this as the decorator:
and
Generally, to bridge the gap between Svelte and regular JS/TS, one has to write a Svelte component file for everything. This is one of the less fun parts of Svelte - sometimes, you need to be able to write some Svelte code, and writing a new component file, giving it a name, figuring out where to place it just sucks. This is also a lot of work for library authors - for example, to this day, Storybook still doesn't support creating stories of components with slots. Additionally, just to make the feature above work, they inject the decorator code into an actual Svelte component, which allowed calling
setContext
from withing the decorator function.Describe the proposed solution
Since snippets, under the hood, are just plain JS values/functions, it would be awesome to be able to write snippets directly in
.svelte.ts
/.svelte.js
files. Then, one could write a decorator like this:Snippets with arguments could look like so:
The possibilities would be endless!
Alternative syntax
Regardless, I think the requirements for any syntax are:
.js
/.ts
a
/b
abovectx.globals.marginSize
aboveQuestions
How should
${...}
be treated/used? There are a couple of possibilities here:${}
the same as{}
is normally treated in.svelte
filesImportance
would make my life easier
The text was updated successfully, but these errors were encountered: