svelte-preprocess VS Svelte

import adapter from '@sveltejs/adapter-auto'; import preprocess from 'svelte-preprocess'; import { mdsvex } from 'mdsvex'; import remarkMath from 'remark-math'; import rehypeKatex from 'rehype-katex-svelte'; /** @type {import('@sveltejs/kit').Config} */ const config = { extensions: ['.svelte', '.svx', '.md'], // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: [ preprocess(), mdsvex({ extensions: ['.svx', '.md'], smartypants: true, layout: { project: "./src/routes/projects/layout.svelte", post: "./src/routes/blog/layout.svelte", }, remarkPlugins: [remarkMath], rehypePlugins: [rehypeKatex], }), ], kit: { adapter: adapter({ edge: false, external: [], split: false }) } }; export default config;

Have you tried https://github.com/sveltejs/svelte-preprocess

// We have changed the adapter line to use [email protected] import adapter from '@sveltejs/[email protected]'; import preprocess from 'svelte-preprocess'; /** @type {import('@sveltejs/kit').Config} */ const config = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: preprocess(), kit: { // We have changed this to point to a build directory adapter: adapter({ out: 'build' }) } }; export default config;

// svelte.config.js import preprocess from 'svelte-preprocess' import adapter from '@sveltejs/adapter-static' /** @type {import('@sveltejs/kit').Config} */ const config = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: [preprocess({ postcss: true })], kit: { // I can even build php file which I can use in current project seamlessly! adapter: adapter({ fallback: 'myapp.php' }), files: { assets: 'src/assets', }, appDir: 'myapp', } } export default config

Do you use and svelte-preprocess?

/** @type {import('@sveltejs/kit').Config} */ const config = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: preprocess(),

// svelte.config.js const sveltePreprocess = require('svelte-preprocess'); module.exports = { // Consult https://github.com/sveltejs/svelte-preprocess // for more information about preprocessors preprocess: sveltePreprocess(), };

We need to configure Jest to transform our files. We must explicitly set our test environment to jsdom, which we are using through Jest. Since v27 Jest's default test environment is node. I will put the configuration in a specific Jest configuration file called jest.config.json in the project root folder. If you create a configuration file called jest.config.js, Vite will complain as it expects only ESM JavaScript by default. Vite will recommend that you rename it to a ".cjs" file if you want to do it that way. You can look at the different ways to configure Jest if you are unsure about the file conventions. If you're using TypeScript, you need to configure svelte-preprocess and ts-jest also, see the svelte-jester docs for how to do that.

If you want to write pug, there are tools that allow you to do that: https://github.com/sveltejs/svelte-preprocess

All this file does is export a configuration object for the build of our Svelte application. By default, it uses the svelte-preprocess package, which is a preprocessor for Svelte providing support for PostCSS, SCSS, TypeScript, and much more.

In regular Svelte you would either set up a custom router, or use a routing library like Routify. If you’ve ever used something like Next.js, SvelteKit is like that but for Svelte. You were looking at the SvelteKit documentation when you should be looking at the Svelte documentation

https://sveltestrap.js.org/ https://svelte.dev/ https://github.com/sveltejs/template https://svelte.dev/repl/7eb8c1dd6cac414792b0edb53521ab49?version=3.20.1 https://svelte.dev/repl/4162507931ea406c9f03be1b3aed9e94?version=3.48.0

Finally, there is the frontend process powering the RoboStreamer website and the control center. The whole frontend is created with Svelte using Elder.js which makes it easy to create fast and SEO friendly web projects.

Then, using the instructions provided above, develop an app of your choice and push the code to the empty GitHub repository. I'm building my website with Vue JS. Vue JS will thus be used in the examples. The difference is simply in the deployment process, and you can use any framework/library to construct your website, such as Angular, React, Svelte, etc. Follow the steps here to get a project started with Vue JS.

Hence, Svelte project bundle size will start off smaller than Vue, but each additional component is bigger than Vue, so as you have more components in a Svelte project, its final bundle size will catch up and may end up being bigger than Vue, depends on how big the project is. Although it is not a big problem given that there is code splitting. https://github.com/sveltejs/svelte/issues/2546

Additionally, thanks to the flexibility of single-spa we've been able to experiment outside of the React ecosystem with frameworks like Svelte and others which has been extremely promising and rewarding for our engineers.

https://svelte.dev/ and svelte kit is for rapid app development. Great for most small to medium stuff, heard it’s not (yet) the best for big scale projects.

I dunno if the svelte core team have done some work to this end since it was posted but there was a conversation around the Svelte-M experiment a while back demonstrating some areas where Svelte is slower than other frameworks and why -> https://github.com/sveltejs/svelte/issues/5103