Svelte Preprocessors are awesome & more people should learn about them! Thanks for making this video. We used one for auto-localising links in the Paraglide SvelteKit Adapter. Incredible how well that just works. A few things I learned while building it: - If you're publishing a preprocessor make sure to make svelte a peerDependency so you're using the same version as the app you're processing - There are some unexpected differences in the Svelte 4 and 5 ASTs. Make sure to test in both versions - Use a package like `magic-string` for string-manipulation & return a source-map alongside the preprocessed code. - Parsing the code into an AST is expensive, especially if you start stacking preprocessors. Do some quick & dirty checks to see if you really need to. (string.includes etc.) - You can register a preprocessor from a vite-plugin by setting it on the `api.sveltePreprocess` property of the vite-plugin. The only other framework that comes close to the level of flexibility preprocessors offer is Astro with it's integrations API.
I love how this could extend svelte to use with things like different JS and CSS supersets, but I have a bad feeling how this could possibly make some parts of development a pain, just like macros in C++ make your life a living hell.
They are used to process files in the routes directory. The video linked in my comment here shows another way to process AsciiDoc source files as routes in addition to using a pre-processor.
Astro has something similar out of the box if you're really into static site generation or using different frameworks together on one page, but this is hella awesome
@JoyofCodeDev, great idea would be to make a preprocessor that can take dataloading/ functions and hoist them to server call and inline data into html template...
It's a pity, but it seems there will be glitches due to emoji, the first thing I noticed is that vscode does not show props from the imported component. Looks like need some fixes for svelte extension, emoji in code it's fun, but errors in vscode :(
While this is super cool, it requires a lot of manual configuration. The alternative is mdsvex or markdoc which, again, requires a lot of fine tuning to make work properly. One of SvelteKit's pain point is that there is no officially supported method to easily build a blog based on markdown/markdown extended files. On the other hand, Astro has official support for both Svelte and MDX with two commands. Much more convenient than setting up preprocessors to get this behaviour. For a blog, Astro is the way to go.
Thank you for this. I didn't know about this feature. The only thing I found a little weird was that you now have a .svelte file called .md. which will probably mess up how the editor reads the file, no?
Not if you write Markdown but you can also associate random file types with anything for example `.svx` could be treated as either a Markdown or Svelte file.
A preprocessor is useful because it can transform your code to reduce boilerplate, or transform one thing to another before Svelte compiles it. You could make a slides preprocessor to turn Markdown sections into slides, or a Markdoc preprocessor to take care of any setup and transform `.markdoc` files into regular HTML. They are for more advanced use cases and most people aren't going to have a need for writing a preprocessor.
You could use your own custom markdown system in a website builder to spread data among the component tree in a very useful and efficient way. Let's say is a way to use variables wherever you are ( like root in css ). This video is gold.
Svelte Preprocessors are awesome & more people should learn about them! Thanks for making this video.
We used one for auto-localising links in the Paraglide SvelteKit Adapter. Incredible how well that just works.
A few things I learned while building it:
- If you're publishing a preprocessor make sure to make svelte a peerDependency so you're using the same version as the app you're processing
- There are some unexpected differences in the Svelte 4 and 5 ASTs. Make sure to test in both versions
- Use a package like `magic-string` for string-manipulation & return a source-map alongside the preprocessed code.
- Parsing the code into an AST is expensive, especially if you start stacking preprocessors. Do some quick & dirty checks to see if you really need to. (string.includes etc.)
- You can register a preprocessor from a vite-plugin by setting it on the `api.sveltePreprocess` property of the vite-plugin.
The only other framework that comes close to the level of flexibility preprocessors offer is Astro with it's integrations API.
This is a solid gold video! You just answered about 25 questions I've had for a very long time. Thank you!
I love how this could extend svelte to use with things like different JS and CSS supersets, but I have a bad feeling how this could possibly make some parts of development a pain, just like macros in C++ make your life a living hell.
With great power comes great responsibility.
@@JoyofCodeDev I would rather have a little less power but know what to expect.
Just a random thing: preprocessors only work during the build-time step; they are not available during runtime!
They are used to process files in the routes directory. The video linked in my comment here shows another way to process AsciiDoc source files as routes in addition to using a pre-processor.
I just wrote one today to import html as demos. Def underrated.
Very kind!!! Thank you so much, dear friend. Why hasn't Svelte included this by default?
Astro has something similar out of the box if you're really into static site generation or using different frameworks together on one page, but this is hella awesome
This just took rapid webapp testing to the next level! Thank you so much
Can you please do a video about using Svelte Flow (The Node-Based UI for Svelte), it looks amazing and creating custom nodes with it etc... 🙏👍
Looks interesting! 😄
Grid snapping would be interesting there too, which is what is keeping me from using it
@@Wombosvideo Helper Lines is available in the React Flow Pro version which is sort of like what you want 😃
@JoyofCodeDev, great idea would be to make a preprocessor that can take dataloading/ functions and hoist them to server call and inline data into html template...
It's a pity, but it seems there will be glitches due to emoji, the first thing I noticed is that vscode does not show props from the imported component. Looks like need some fixes for svelte extension, emoji in code it's fun, but errors in vscode :(
While this is super cool, it requires a lot of manual configuration. The alternative is mdsvex or markdoc which, again, requires a lot of fine tuning to make work properly.
One of SvelteKit's pain point is that there is no officially supported method to easily build a blog based on markdown/markdown extended files.
On the other hand, Astro has official support for both Svelte and MDX with two commands.
Much more convenient than setting up preprocessors to get this behaviour.
For a blog, Astro is the way to go.
There's a Markdoc preprocessor.
Thank you for this. I didn't know about this feature. The only thing I found a little weird was that you now have a .svelte file called .md. which will probably mess up how the editor reads the file, no?
Not if you write Markdown but you can also associate random file types with anything for example `.svx` could be treated as either a Markdown or Svelte file.
Nice, I'm going to try to make one for imba css.
Awesome as always!
what is that web browser you're using? seems clean
he just mentioned people would probably ask so he explained where he got it, try watching again
@@daleryanaldover6545 i meant the one with the documentation opened, not the one from vscode!
I use Brave 🦁
yooo, thats awesome 🔥
Wow! Thats great 👍
Like Gulp with plugins or pipes, like Webpack with modules, like Vite with plugins?
That's a name I haven't heard in years.
@@JoyofCodeDev Yes, I'm old
“Programming is just concatenating strings together” 🤯
Hey i really like your channel can you keep it up?
greetings from syria
Awesome!
fantastic tuts
Good shit 👍
Someone can explain me why it's useful? I don't get it on what I can do with it =/
A preprocessor is useful because it can transform your code to reduce boilerplate, or transform one thing to another before Svelte compiles it.
You could make a slides preprocessor to turn Markdown sections into slides, or a Markdoc preprocessor to take care of any setup and transform `.markdoc` files into regular HTML.
They are for more advanced use cases and most people aren't going to have a need for writing a preprocessor.
You could use your own custom markdown system in a website builder to spread data among the component tree in a very useful and efficient way. Let's say is a way to use variables wherever you are ( like root in css ). This video is gold.
what vscode theme is this?
truly amazing theme and icon pack, I started using after watching his videos.
I forgot the names but they are on his site in description
You can find the link in the description.
@@JoyofCodeDev Thanks mate! I've gone ahead and installed it. What a beautiful theme!
I can hear the coffee speaking
0:47 daily dose
haha yea
Lol love that line
0:25 you are welcome
I HATE how markdown handles images and links
write a preprocessor
pretty cool, but absolutely horrendous for production code in business settings, so no thanks
okay
@@JoyofCodeDev you know what, fair point
hi friends!!!
🔥🔥❤🔥❤🔥🔥🔥❤🔥❤🔥🔥🔥❤🔥❤🔥
Muy falopa
First