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 just wrote one today to import html as demos. Def underrated.

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.

@JoyofCodeDev

2 ай бұрын

With great power comes great responsibility.

@shapelessed

2 ай бұрын

​@@JoyofCodeDev I would rather have a little less power but know what to expect.

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

yooo, thats awesome 🔥

Awesome as always!

This just took rapid webapp testing to the next level! Thank you so much

Just a random thing: preprocessors only work during the build-time step; they are not available during runtime!

@BryanKlein

2 ай бұрын

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.

Wow! Thats great 👍

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...

fantastic tuts

Nice, I'm going to try to make one for imba css.

Good shit 👍

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... 🙏👍

@JoyofCodeDev

2 ай бұрын

Looks interesting! 😄

@Wombosvideo

2 ай бұрын

Grid snapping would be interesting there too, which is what is keeping me from using it

@paulclarke4099

2 ай бұрын

@@Wombosvideo Helper Lines is available in the React Flow Pro version which is sort of like what you want 😃

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.

@JoyofCodeDev

2 ай бұрын

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?

@JoyofCodeDev

2 ай бұрын

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.

Hey i really like your channel can you keep it up? greetings from syria

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 :(

“Programming is just concatenating strings together” 🤯

what is that web browser you're using? seems clean

@daleryanaldover6545

2 ай бұрын

he just mentioned people would probably ask so he explained where he got it, try watching again

@sep1ol

2 ай бұрын

@@daleryanaldover6545 i meant the one with the documentation opened, not the one from vscode!

@JoyofCodeDev

2 ай бұрын

I use Brave 🦁

I can hear the coffee speaking

Like Gulp with plugins or pipes, like Webpack with modules, like Vite with plugins?

@JoyofCodeDev

2 ай бұрын

That's a name I haven't heard in years.

@jjdevcode9635

2 ай бұрын

@@JoyofCodeDev Yes, I'm old

🔥🔥❤‍🔥❤‍🔥🔥🔥❤‍🔥❤‍🔥🔥🔥❤‍🔥❤‍🔥

what vscode theme is this?

@Mahfoudh94

2 ай бұрын

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

@JoyofCodeDev

2 ай бұрын

You can find the link in the description.

@dirtycrew666

2 ай бұрын

@@JoyofCodeDev Thanks mate! I've gone ahead and installed it. What a beautiful theme!

0:47 daily dose

@user-lq7xz1th4x

2 ай бұрын

haha yea

@shalunu

2 ай бұрын

Lol love that line

0:25 you are welcome

hi friends!!!

Someone can explain me why it's useful? I don't get it on what I can do with it =/

@JoyofCodeDev

2 ай бұрын

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.

@SilvestreVivo

2 ай бұрын

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.

Muy falopa

I HATE how markdown handles images and links

@JoyofCodeDev

28 күн бұрын

write a preprocessor

First

pretty cool, but absolutely horrendous for production code in business settings, so no thanks

@JoyofCodeDev

Ай бұрын

okay

@Jonas-Seiler

Ай бұрын

@@JoyofCodeDev you know what, fair point