feat: PoC of component level tree-shaking

.eslintrc.cjs

@@ -201,6 +201,7 @@ module.exports = {
 	ignorePatterns: [
 		'packages/*/types/index.d.ts',
 		'packages/*/types/index.d.ts.map',
-		'packages/*/CHANGELOG.md'
+		'packages/*/CHANGELOG.md',
+		'packages/playground/treeshaking/compare/*'
 	]
 };

packages/playground/treeshaking/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/playground/treeshaking/README.md

@@ -0,0 +1,3 @@
+# Svelte + Vite
+
+and a little something 5

packages/playground/treeshaking/compare/diff.md

@@ -0,0 +1,126 @@
+```diff
+diff --git a/packages/playground/treeshaking/compare/index_without_tree_shaking.js b/packages/playground/treeshaking/compare/index_with_tree_shaking.js
+index d873257d..a0bc9c7c 100644
+--- a/packages/playground/treeshaking/compare/index_without_tree_shaking.js
++++ b/packages/playground/treeshaking/compare/index_with_tree_shaking.js
+@@ -1,11 +1,10 @@
+ import {
+-	c as comment,
+-	i as if_block,
+ 	a as append,
+ 	t as template,
++	c as comment,
+ 	f as first_child,
+ 	m as mount
+-} from './vendor-CjCr5kEU.js';
++} from './vendor-CWxgFfOZ.js';
+ (function polyfill() {
+ 	const relList = document.createElement('link').relList;
+ 	if (relList && relList.supports && relList.supports('modulepreload')) {
+@@ -40,102 +39,15 @@ import {
+ 		fetch(link.href, fetchOpts);
+ 	}
+ })();
+-var root_2 = template(`Inner1-1`, 1);
+-var root_4 = template(`Inner1-2`, 1);
+-var root_5 = template(`Inner1-3`, 1);
+-var root_8 = template(`Inner2-1`, 1);
+-var root_10 = template(`Inner2-2`, 1);
+-var root_11 = template(`Inner2-3`, 1);
+-var root_12 = template(`<p>Hello!</p>`);
++var root = template(`Inner2-2`, 1);
+ function Counter($$anchor, $$props) {
+-	var fragment = comment();
+-	var node = first_child(fragment);
+-	if_block(
+-		node,
+-		() => $$props.initialCount < 0,
+-		($$anchor2) => {
+-			var fragment_1 = comment();
+-			var node_1 = first_child(fragment_1);
+-			if_block(
+-				node_1,
+-				() => $$props.initialCount < 0,
+-				($$anchor3) => {
+-					var fragment_2 = root_2();
+-					append($$anchor3, fragment_2);
+-				},
+-				($$anchor3) => {
+-					var fragment_3 = comment();
+-					var node_2 = first_child(fragment_3);
+-					if_block(
+-						node_2,
+-						() => $$props.initialCount > 0,
+-						($$anchor4) => {
+-							var fragment_4 = root_4();
+-							append($$anchor4, fragment_4);
+-						},
+-						($$anchor4) => {
+-							var fragment_5 = root_5();
+-							append($$anchor4, fragment_5);
+-						},
+-						true
+-					);
+-					append($$anchor3, fragment_3);
+-				}
+-			);
+-			append($$anchor2, fragment_1);
+-		},
+-		($$anchor2) => {
+-			var fragment_6 = comment();
+-			var node_3 = first_child(fragment_6);
+-			if_block(
+-				node_3,
+-				() => $$props.initialCount > 0,
+-				($$anchor3) => {
+-					var fragment_7 = comment();
+-					var node_4 = first_child(fragment_7);
+-					if_block(
+-						node_4,
+-						() => $$props.initialCount < 0,
+-						($$anchor4) => {
+-							var fragment_8 = root_8();
+-							append($$anchor4, fragment_8);
+-						},
+-						($$anchor4) => {
+-							var fragment_9 = comment();
+-							var node_5 = first_child(fragment_9);
+-							if_block(
+-								node_5,
+-								() => $$props.initialCount > 0,
+-								($$anchor5) => {
+-									var fragment_10 = root_10();
+-									append($$anchor5, fragment_10);
+-								},
+-								($$anchor5) => {
+-									var fragment_11 = root_11();
+-									append($$anchor5, fragment_11);
+-								},
+-								true
+-							);
+-							append($$anchor4, fragment_9);
+-						}
+-					);
+-					append($$anchor3, fragment_7);
+-				},
+-				($$anchor3) => {
+-					var p = root_12();
+-					append($$anchor3, p);
+-				},
+-				true
+-			);
+-			append($$anchor2, fragment_6);
+-		}
+-	);
++	var fragment = root();
+ 	append($$anchor, fragment);
+ }
+ function App($$anchor) {
+ 	var fragment = comment();
+ 	var node = first_child(fragment);
+-	Counter(node, { initialCount: 1 });
++	Counter(node);
+ 	append($$anchor, fragment);
+ }
+ mount(App, {
+```

packages/playground/treeshaking/compare/index_with_tree_shaking.js

@@ -0,0 +1,56 @@
+import {
+	a as append,
+	t as template,
+	c as comment,
+	f as first_child,
+	m as mount
+} from './vendor-CWxgFfOZ.js';
+(function polyfill() {
+	const relList = document.createElement('link').relList;
+	if (relList && relList.supports && relList.supports('modulepreload')) {
+		return;
+	}
+	for (const link of document.querySelectorAll('link[rel="modulepreload"]')) {
+		processPreload(link);
+	}
+	new MutationObserver((mutations) => {
+		for (const mutation of mutations) {
+			if (mutation.type !== 'childList') {
+				continue;
+			}
+			for (const node of mutation.addedNodes) {
+				if (node.tagName === 'LINK' && node.rel === 'modulepreload') processPreload(node);
+			}
+		}
+	}).observe(document, { childList: true, subtree: true });
+	function getFetchOpts(link) {
+		const fetchOpts = {};
+		if (link.integrity) fetchOpts.integrity = link.integrity;
+		if (link.referrerPolicy) fetchOpts.referrerPolicy = link.referrerPolicy;
+		if (link.crossOrigin === 'use-credentials') fetchOpts.credentials = 'include';
+		else if (link.crossOrigin === 'anonymous') fetchOpts.credentials = 'omit';
+		else fetchOpts.credentials = 'same-origin';
+		return fetchOpts;
+	}
+	function processPreload(link) {
+		if (link.ep) return;
+		link.ep = true;
+		const fetchOpts = getFetchOpts(link);
+		fetch(link.href, fetchOpts);
+	}
+})();
+var root = template(`Inner2-2`, 1);
+function Counter($$anchor, $$props) {
+	var fragment = root();
+	append($$anchor, fragment);
+}
+function App($$anchor) {
+	var fragment = comment();
+	var node = first_child(fragment);
+	Counter(node);
+	append($$anchor, fragment);
+}
+mount(App, {
+	props: {},
+	target: document.getElementById('app')
+});

packages/playground/treeshaking/compare/index_without_tree_shaking.js

@@ -0,0 +1,144 @@
+import {
+	c as comment,
+	i as if_block,
+	a as append,
+	t as template,
+	f as first_child,
+	m as mount
+} from './vendor-CjCr5kEU.js';
+(function polyfill() {
+	const relList = document.createElement('link').relList;
+	if (relList && relList.supports && relList.supports('modulepreload')) {
+		return;
+	}
+	for (const link of document.querySelectorAll('link[rel="modulepreload"]')) {
+		processPreload(link);
+	}
+	new MutationObserver((mutations) => {
+		for (const mutation of mutations) {
+			if (mutation.type !== 'childList') {
+				continue;
+			}
+			for (const node of mutation.addedNodes) {
+				if (node.tagName === 'LINK' && node.rel === 'modulepreload') processPreload(node);
+			}
+		}
+	}).observe(document, { childList: true, subtree: true });
+	function getFetchOpts(link) {
+		const fetchOpts = {};
+		if (link.integrity) fetchOpts.integrity = link.integrity;
+		if (link.referrerPolicy) fetchOpts.referrerPolicy = link.referrerPolicy;
+		if (link.crossOrigin === 'use-credentials') fetchOpts.credentials = 'include';
+		else if (link.crossOrigin === 'anonymous') fetchOpts.credentials = 'omit';
+		else fetchOpts.credentials = 'same-origin';
+		return fetchOpts;
+	}
+	function processPreload(link) {
+		if (link.ep) return;
+		link.ep = true;
+		const fetchOpts = getFetchOpts(link);
+		fetch(link.href, fetchOpts);
+	}
+})();
+var root_2 = template(`Inner1-1`, 1);
+var root_4 = template(`Inner1-2`, 1);
+var root_5 = template(`Inner1-3`, 1);
+var root_8 = template(`Inner2-1`, 1);
+var root_10 = template(`Inner2-2`, 1);
+var root_11 = template(`Inner2-3`, 1);
+var root_12 = template(`<p>Hello!</p>`);
+function Counter($$anchor, $$props) {
+	var fragment = comment();
+	var node = first_child(fragment);
+	if_block(
+		node,
+		() => $$props.initialCount < 0,
+		($$anchor2) => {
+			var fragment_1 = comment();
+			var node_1 = first_child(fragment_1);
+			if_block(
+				node_1,
+				() => $$props.initialCount < 0,
+				($$anchor3) => {
+					var fragment_2 = root_2();
+					append($$anchor3, fragment_2);
+				},
+				($$anchor3) => {
+					var fragment_3 = comment();
+					var node_2 = first_child(fragment_3);
+					if_block(
+						node_2,
+						() => $$props.initialCount > 0,
+						($$anchor4) => {
+							var fragment_4 = root_4();
+							append($$anchor4, fragment_4);
+						},
+						($$anchor4) => {
+							var fragment_5 = root_5();
+							append($$anchor4, fragment_5);
+						},
+						true
+					);
+					append($$anchor3, fragment_3);
+				}
+			);
+			append($$anchor2, fragment_1);
+		},
+		($$anchor2) => {
+			var fragment_6 = comment();
+			var node_3 = first_child(fragment_6);
+			if_block(
+				node_3,
+				() => $$props.initialCount > 0,
+				($$anchor3) => {
+					var fragment_7 = comment();
+					var node_4 = first_child(fragment_7);
+					if_block(
+						node_4,
+						() => $$props.initialCount < 0,
+						($$anchor4) => {
+							var fragment_8 = root_8();
+							append($$anchor4, fragment_8);
+						},
+						($$anchor4) => {
+							var fragment_9 = comment();
+							var node_5 = first_child(fragment_9);
+							if_block(
+								node_5,
+								() => $$props.initialCount > 0,
+								($$anchor5) => {
+									var fragment_10 = root_10();
+									append($$anchor5, fragment_10);
+								},
+								($$anchor5) => {
+									var fragment_11 = root_11();
+									append($$anchor5, fragment_11);
+								},
+								true
+							);
+							append($$anchor4, fragment_9);
+						}
+					);
+					append($$anchor3, fragment_7);
+				},
+				($$anchor3) => {
+					var p = root_12();
+					append($$anchor3, p);
+				},
+				true
+			);
+			append($$anchor2, fragment_6);
+		}
+	);
+	append($$anchor, fragment);
+}
+function App($$anchor) {
+	var fragment = comment();
+	var node = first_child(fragment);
+	Counter(node, { initialCount: 1 });
+	append($$anchor, fragment);
+}
+mount(App, {
+	props: {},
+	target: document.getElementById('app')
+});

packages/playground/treeshaking/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vite + Svelte</title>
+	</head>
+	<body>
+		<div id="app"></div>
+		<script type="module" src="/src/main.js"></script>
+	</body>
+</html>