Allow to specify custom base class for Svelte Components and Elements

src/compiler/compile/Component.ts

@@ -35,6 +35,7 @@ interface ComponentOptions {
 	immutable?: boolean;
 	accessors?: boolean;
 	preserveWhitespace?: boolean;
+	base?: string;
 }
 
 export default class Component {
@@ -1413,7 +1414,17 @@ function process_component_options(component: Component, nodes) {
 						component_options[name] = value;
 						break;
 					}
+					case 'base': {
+						const code = 'invalid-base-attribute';
+						const message = `The 'base' attribute must be a string literal representing a valid class name`;
+						const value = get_value(attribute, code, message);
+
+						if (typeof value !== 'string')
+							component.error(attribute, { code, message });
 
+							component_options.base = value;
+						break;
+					}
 					default:
 						component.error(attribute, {
 							code: `invalid-options-attribute`,
@@ -1449,4 +1460,4 @@ function get_relative_path(from: string, to: string) {
 	}
 
 	return from_parts.concat(to_parts).join('/');
-}
+}

src/compiler/compile/render_dom/index.ts

@@ -437,8 +437,13 @@ export default function dom(
 	}
 
 	if (options.customElement) {
+		const superclass = {
+			type: 'Identifier',
+			name: component.component_options.base || '@SvelteElement'
+		};
+
 		const declaration = b`
-			class ${name} extends @SvelteElement {
+			class ${name} extends ${superclass} {
 				constructor(options) {
 					super();
 
@@ -488,7 +493,9 @@ export default function dom(
 	} else {
 		const superclass = {
 			type: 'Identifier',
-			name: options.dev ? '@SvelteComponentDev' : '@SvelteComponent'
+			name: component.component_options.base || (
+				options.dev ? '@SvelteComponentDev' : '@SvelteComponent'
+			)
 		};
 
 		const declaration = b`

src/compiler/interfaces.ts

@@ -163,7 +163,7 @@ export interface Var {
 	is_reactive_dependency?: boolean;
 }
 
-export interface CssResult { 
+export interface CssResult {
 	code: string;
 	map: SourceMap;
-}
+}

test/js/samples/component-custom-base-class/base.js

@@ -0,0 +1,4 @@
+import {SvelteComponent} from 'svelte';
+
+export class BaseSvelteComponent extends SvelteComponent {
+}

test/js/samples/component-custom-base-class/expected.js

@@ -0,0 +1,13 @@
+/* generated by Svelte vX.Y.Z */
+import { init, safe_not_equal } from "svelte/internal";
+
+import { BaseSvelteComponent } from "./base";
+
+class Component extends BaseSvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, null, null, safe_not_equal, {});
+	}
+}
+
+export default Component;

test/js/samples/component-custom-base-class/input.svelte

@@ -0,0 +1,5 @@
+<script>
+import {BaseSvelteComponent} from './base';
+</script>
+
+<svelte:options base="BaseSvelteComponent"/>