Svelte behaviour with PReact (or other frameworks)

Svelte is a compiler in the sense that it takes .svelte files and turn them into .js (conceptually at least). After you’ve run the compiler, via bundler plugin or otherwise (e.g. directly through the compiler API), you end up with JS code that doesn’t rely on a full-fledged runtime to be executed (we could call that “low level” JS from a framework perspective).

Said otherwise: Svelte’s compilation is focused solely on transforming Svelte syntax (as found in .svelte files) into “raw” Javascript.

Svelte compiler has no notion of the rest of your code, outside of .svelte files — for example, what comes from .js files in your codebase or, pertaining to your question, what comes from other libs like Preact. From the point of view of the compiler, they are just imports from the outside and, in the end, they are just variables in the Svelte code.

So the answer to your question is: no, Svelte won’t compile Preact or anything that is not Svelte syntax.

Resolving external imports would be a problematic of your browser (if using raw ES imports) or, more typically, of your bundler (e.g. Rollup, Webpack…). It is the bundler that will read your import statements, try to resolve them in your node_modules, rewrite everything to play together, optionally apply some code transformations (like transforming TS, SCSS or Svelte to raw JS), optimize them, pack them together for optimal performance, etc. Svelte changes nothing in this regard.

As a more personal opinion, it doesn’t seem to make a lot of sense to use Preact in Svelte. You essentially have everything you’d have in Preact already in Svelte. The reverse would seem more logical to me — using some “framework agnostic” (once compiled) Svelte components in an existing app using another technology.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top