Fully or Partially (with external data and/or data which can change non deterministicly) Compile Time Evaluated Components and Code

[sirinath]

The "Hello World" app

<h1>Hello world!</h1>

generates quite a bit of boilerplate JS:

/* App.svelte generated by Svelte v3.20.1 */
import {
	SvelteComponent,
	detach,
	element,
	init,
	insert,
	noop,
	safe_not_equal
} from "svelte/internal";

function create_fragment(ctx) {
	let h1;

	return {
		c() {
			h1 = element("h1");
			h1.textContent = "Hello world!";
		},
		m(target, anchor) {
			insert(target, h1, anchor);
		},
		p: noop,
		i: noop,
		o: noop,
		d(detaching) {
			if (detaching) detach(h1);
		}
	};
}

class App extends SvelteComponent {
	constructor(options) {
		super();
		init(this, options, null, create_fragment, safe_not_equal, {});
	}
}

export default App;

For something this simple I believe much of this can be eliminated. Ideally, there should be no JS in this case or whenever the component does not use any external data or bound to components which the data can change.

The rendered or partially rendered components can be stored in another file type and weaved together at compile time. Also, partial evaluation, tree shaking and other optimisations of the Svelte code can be done so the Svelte code used is also minimal perhaps like in Prepack and Closure Compiler restricted to the language used in Svelte. A similar further phase of optimisation can be done in the resulting JS code along with any linked JS libraries to eliminate and optimise the final projects JS code.

This will further optimise the framework.

When it is external data or bound to fields which data can change then the minimal plumbing to accommodate this should be generated.

[benmccann]

Here's an article about the impact of applying the Closure Compiler: https://www.syntaxsuccess.com/viewarticle/the-closure-compiler-and-svelte

I'm not sure there's much to do in Svelte here. This seems more like something the end user would configure on their project

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Rich-Harris]

The equivalent Svelte 5 output is this:

import * as $ from "svelte/internal/client";

var root = $.template(`<h1>Hello world!</h1>`);

export default function App($$anchor, $$props) {
	$.push($$props, false);
	$.init();

	var h1 = root();

	$.append($$anchor, h1);
	$.pop();
}

It's not perfect — ideally, we'd detect that we don't need to push a component object onto the stack or initialize lifecycle functions, so it would be more like this...

import * as $ from "svelte/internal/client";

var root = $.template(`<h1>Hello world!</h1>`);

export default function App($$anchor) {
	$.append($$anchor, root());
}

...but we'll get there eventually. Closing as this is a constant process of refinement rather than a single issue that can be marked 'done'