make customElement a boolean option (#2025)

src/compile/Component.ts

@@ -119,9 +119,9 @@ export default class Component {
 		this.namespace = namespaces[this.componentOptions.namespace] || this.componentOptions.namespace;
 
 		if (compileOptions.customElement) {
-			this.tag = compileOptions.customElement.tag || this.componentOptions.tag;
+			this.tag = this.componentOptions.tag || compileOptions.tag;
 			if (!this.tag) {
-				throw new Error(`Cannot compile to a custom element without specifying a tag name via options.customElement or <svelte:options>`);
+				throw new Error(`Cannot compile to a custom element without specifying a tag name via options.tag or <svelte:options>`);
 			}
 		} else {
 			this.tag = this.name;

src/compile/index.ts

@@ -42,10 +42,6 @@ function validate_options(options: CompileOptions, warnings: Warning[]) {
 		throw new Error(`options.name must be a valid identifier (got '${name}')`);
 	}
 
-	if ('customElement' in options) {
-		options.customElement = normalize_customElement_option(options.customElement);
-	}
-
 	if (name && /^[a-z]/.test(name)) {
 		const message = `options.name should be capitalised`;
 		warnings.push({
@@ -57,34 +53,6 @@ function validate_options(options: CompileOptions, warnings: Warning[]) {
 	}
 }
 
-const valid_customElement_options = ['tag'];
-
-function normalize_customElement_option(customElement: boolean | string | CustomElementOptions) {
-	if (typeof customElement === 'boolean') {
-		return customElement ? {} : null;
-	} else if (typeof customElement === 'string') {
-		customElement = { tag: customElement };
-	} else if (typeof customElement === 'object') {
-		Object.keys(customElement).forEach(key => {
-			if (valid_customElement_options.indexOf(key) === -1) {
-				const match = fuzzymatch(key, valid_customElement_options);
-				let message = `Unrecognized option 'customElement.${key}'`;
-				if (match) message += ` (did you mean 'customElement.${match}'?)`;
-
-				throw new Error(message);
-			}
-		});
-	} else {
-		throw new Error(`options.customElement must be a boolean, a string or an object`);
-	}
-
-	if ('tag' in customElement && !/^[a-zA-Z][a-zA-Z0-9]*-[a-zA-Z0-9-]+$/.test(customElement.tag)) {
-		throw new Error(`options.customElement tag name must be two or more words joined by the '-' character`);
-	}
-
-	return customElement;
-}
-
 function get_name(filename) {
 	if (!filename) return null;
 	const parts = filename.split(/[\/\\]/);

src/interfaces.ts

@@ -53,7 +53,8 @@ export interface CompileOptions {
 	immutable?: boolean;
 	hydratable?: boolean;
 	legacy?: boolean;
-	customElement?: CustomElementOptions;
+	customElement?: boolean;
+	tag?: string;
 	css?: boolean;
 
 	preserveComments?: boolean | false;
@@ -64,10 +65,6 @@ export interface Visitor {
 	leave?: (node: Node) => void;
 }
 
-export interface CustomElementOptions {
-	tag?: string;
-}
-
 export interface AppendTarget {
 	slots: Record<string, string>;
 	slotStack: string[]

src/parse/index.ts

@@ -3,13 +3,13 @@ import fragment from './state/fragment';
 import { whitespace } from '../utils/patterns';
 import reservedNames from '../utils/reservedNames';
 import fullCharCodeAt from '../utils/fullCharCodeAt';
-import { Node, Ast, CustomElementOptions } from '../interfaces';
+import { Node, Ast } from '../interfaces';
 import error from '../utils/error';
 
 interface ParserOptions {
 	filename?: string;
 	bind?: boolean;
-	customElement?: CustomElementOptions;
+	customElement?: boolean;
 }
 
 type ParserState = (parser: Parser) => (ParserState | void);
@@ -17,7 +17,7 @@ type ParserState = (parser: Parser) => (ParserState | void);
 export class Parser {
 	readonly template: string;
 	readonly filename?: string;
-	readonly customElement: CustomElementOptions;
+	readonly customElement: boolean;
 
 	index = 0;
 	stack: Array<Node> = [];