SvelteElement internal no longer treeshaken by default in Rollup

[Conduitry]

Describe the bug
As of Rollup 1.21.0, accessing unknown globals is now assumed to have side-effects, and our if (typeof HTMLElement !== 'undefined') { ... } is now getting included in bundles, along with the entire SvelteElement class.

To Reproduce
Bundle any Svelte app with Rollup 1.21+.

Expected behavior
SvelteElement should only be included in the bundle if you are using custom elements, but it is always being included.

Information about your Svelte project:

• Svelte version: any
• Rollup version: 1.21.0 or higher

Severity
Moderate? The code doesn't break anything, but it is bad to be including it.

Additional context
This is the Rollup PR that changed this. There is apparently a list of 'known' globals that won't be assumed to have side-effects, but HTMLElement is apparently not among them. I don't know whether this should be considered something to be improved in Rollup, or whether we could be doing something else on our end to not trip this.

[Conduitry]

I'm actually not positive anymore that that is the change where this happened, but it certainly does seem to have started happening between 1.20.3 and 1.21.0.

[Conduitry]

Opened this Rollup issue. I don't know whether this is going to be a reasonable feature request, or whether we're going to have to figure out something else on our own.

[Conduitry]

This mostly works:

diff --git a/src/runtime/internal/Component.ts b/src/runtime/internal/Component.ts
index ae80ae38..4f27acb2 100644
--- a/src/runtime/internal/Component.ts
+++ b/src/runtime/internal/Component.ts
@@ -3,6 +3,7 @@ import { current_component, set_current_component } from './lifecycle';
 import { blank_object, is_function, run, run_all, noop } from './utils';
 import { children } from './dom';
 import { transition_in } from './transitions';
+import { globals } from './globals';
 
 // eslint-disable-next-line @typescript-eslint/class-name-casing
 interface T$$ {
@@ -132,9 +133,9 @@ export function init(component, options, instance, create_fragment, not_equal, p
 	set_current_component(parent_component);
 }
 
-export let SvelteElement;
-if (typeof HTMLElement !== 'undefined') {
-	SvelteElement = class extends HTMLElement {
+export const SvelteElement =
+	globals.HTMLElement &&
+	class extends globals.HTMLElement {
 		$$: T$$;
 		constructor() {
 			super();
@@ -173,7 +174,6 @@ if (typeof HTMLElement !== 'undefined') {
 			// overridden by instance, if it has props
 		}
 	};
-}
 
 export class SvelteComponent {
 	$$: T$$;

It leaves out this code when it's not being used. But, ironically, agadoo now complains that this file is not treeshakable. Maybe that could be fixed by bringing agadoo up to a more recent version of Rollup? (Right now it's using 0.64.)

Edit: Yeah, it seems like that does it. And upgrading the version of Rollup in agadoo also makes the current treeshaking test fail, which is good. It's probably smart to keep the version of Rollup that agadoo's using up to date, so we can be hopefully more quickly alerted when there's a problem like this. I've opened a PR: Rich-Harris/agadoo#8

[Conduitry]

The above agadoo change has been released as 1.1.0, but now that I have that directly installed locally instead of symlinked in, another wrinkle emerged:

What we have now for SvelteElement is only treeshakable up to 1.20.x (as mentioned).
What I suggested above is only treeshakable in 1.21.x.

It's probably better to make this change than to not make it (because people are going to update the copies of Rollup in their projects eventually), but perhaps there is another change that would be even better. There was a long response on the Rollup issue I opened which I have not read yet, but I might get some ideas there.

[Conduitry]

Probably a better plan: Wait for rollup/rollup#3117 which should fix this issue for everyone once they update to a version of Rollup that includes it. It's still probably a good idea anyway to bump our version of agadoo to 1.1.0 and update Rollup so that we can catch things like this in tests.