feat: custom elements rework

.eslintrc.js

@@ -10,5 +10,8 @@ module.exports = {
 			'estree'
 		],
 		'svelte3/compiler': require('./compiler')
+	},
+	rules: {
+		'@typescript-eslint/no-non-null-assertion': 'off'
 	}
 };

elements/index.d.ts

@@ -1589,7 +1589,11 @@ export interface SvelteHTMLElements {
 	'svelte:document': HTMLAttributes<Document>;
 	'svelte:body': HTMLAttributes<HTMLElement>;
 	'svelte:fragment': { slot?: string };
-	'svelte:options': { [name: string]: any };
+	'svelte:options': {
+		tag?: string | null | undefined;
+		cePropsDefinition?: Record<string, { attribute?: string; reflect?: boolean; type?: 'String' | 'Boolean' | 'Number' | 'Array' | 'Object' }> | undefined,
+		[name: string]: any
+	};
 	'svelte:head': { [name: string]: any };
 
 	[name: string]: { [name: string]: any };

src/compiler/compile/Component.ts

@@ -25,7 +25,7 @@ import TemplateScope from './nodes/shared/TemplateScope';
 import fuzzymatch from '../utils/fuzzymatch';
 import get_object from './utils/get_object';
 import Slot from './nodes/Slot';
-import { Node, ImportDeclaration, ExportNamedDeclaration, Identifier, ExpressionStatement, AssignmentExpression, Literal, Property, RestElement, ExportDefaultDeclaration, ExportAllDeclaration, FunctionDeclaration, FunctionExpression } from 'estree';
+import { Node, ImportDeclaration, ExportNamedDeclaration, Identifier, ExpressionStatement, AssignmentExpression, Literal, Property, RestElement, ExportDefaultDeclaration, ExportAllDeclaration, FunctionDeclaration, FunctionExpression, ObjectExpression } from 'estree';
 import add_to_set from './utils/add_to_set';
 import check_graph_for_cycles from './utils/check_graph_for_cycles';
 import { print, b } from 'code-red';
@@ -45,6 +45,7 @@ interface ComponentOptions {
 	immutable?: boolean;
 	accessors?: boolean;
 	preserveWhitespace?: boolean;
+	cePropsDefinition?: Record<string, { reflect?: boolean; type?: 'String' | 'Boolean' | 'Number' | 'Array' | 'Object', attribute?: string }>;
 }
 
 const regex_leading_directory_separator = /^[/\\]/;
@@ -192,7 +193,7 @@ export default class Component {
 		this.pop_ignores();
 
 		this.elements.forEach(element => this.stylesheet.apply(element));
-		if (!compile_options.customElement) this.stylesheet.reify();
+		this.stylesheet.reify();
 		this.stylesheet.warn_on_unused_selectors(this);
 	}
 
@@ -544,6 +545,9 @@ export default class Component {
 						extract_names(declarator.id).forEach(name => {
 							const variable = this.var_lookup.get(name);
 							variable.export_name = name;
+							if (declarator.init?.type === 'Literal' && typeof declarator.init.value === 'boolean') {
+								variable.is_boolean = true;
+							}
 							if (!module_script && variable.writable && !(variable.referenced || variable.referenced_from_script || variable.subscribable)) {
 								this.warn(declarator as any, compiler_warnings.unused_export_let(this.name.name, name));
 							}
@@ -1570,6 +1574,44 @@ function process_component_options(component: Component, nodes) {
 						break;
 					}
 
+					case 'cePropsDefinition': {
+						const error = () => component.error(attribute, compiler_errors.invalid_cePropsDefinition_attribute);
+						const { value } = attribute;
+						const chunk = value[0];
+						component_options.cePropsDefinition = {};
+
+						if (!chunk) {
+							break;
+						}
+
+						if (value.length > 1 || chunk.expression?.type !== 'ObjectExpression') {
+							return error();
+						}
+
+						const object = chunk.expression as ObjectExpression;
+						for (const property of object.properties) {
+							if (property.type !== 'Property' || property.computed || property.key.type !== 'Identifier' || property.value.type !== 'ObjectExpression') {
+								return error();
+							}
+							component_options.cePropsDefinition[property.key.name] = {};
+							for (const prop of property.value.properties) {
+								if (prop.type !== 'Property' || prop.computed || prop.key.type !== 'Identifier' || prop.value.type !== 'Literal') {
+									return error();
+								}
+								if (['reflect', 'attribute', 'type'].indexOf(prop.key.name) === -1 ||
+									prop.key.name === 'type' && ['String', 'Number', 'Boolean', 'Array', 'Object'].indexOf(prop.value.value as string) === -1 ||
+									prop.key.name === 'reflect' && typeof prop.value.value !== 'boolean' ||
+									prop.key.name === 'attribute' && typeof prop.value.value !== 'string'
+								) {
+									return error();
+								}
+								component_options.cePropsDefinition[property.key.name][prop.key.name] = prop.value.value;
+							}
+						}
+
+						break;
+					}
+
 					case 'namespace': {
 						const ns = get_value(attribute, compiler_errors.invalid_namespace_attribute);
 

src/compiler/compile/compiler_errors.ts

@@ -206,6 +206,11 @@ export default {
 		code: 'invalid-tag-attribute',
 		message: "'tag' must be a string literal"
 	},
+	invalid_cePropsDefinition_attribute: {
+		code: 'invalid-cePropsDefinition-attribute',
+		message: "'cePropsDefinition' must be a statically analyzable object literal of the form " +
+			"'{ prop: { attribute?: string; type?: 'String' | 'Boolean' | 'Number' | 'Array' | 'Object', reflect?: boolean; } }'"
+	},
 	invalid_namespace_property: (namespace: string, suggestion?: string) => ({
 		code: 'invalid-namespace-property',
 		message: `Invalid namespace '${namespace}'` + (suggestion ? ` (did you mean '${suggestion}'?)` : '')

src/compiler/compile/css/Stylesheet.ts

@@ -407,7 +407,7 @@ export default class Stylesheet {
 		});
 	}
 
-	render(file: string, should_transform_selectors: boolean) {
+	render(file: string) {
 		if (!this.has_styles) {
 			return { code: null, map: null };
 		}
@@ -421,12 +421,10 @@ export default class Stylesheet {
 			}
 		});
 
-		if (should_transform_selectors) {
-			const max = Math.max(...this.children.map(rule => rule.get_max_amount_class_specificity_increased()));
-			this.children.forEach((child: (Atrule | Rule)) => {
-				child.transform(code, this.id, this.keyframes, max);
-			});
-		}
+		const max = Math.max(...this.children.map(rule => rule.get_max_amount_class_specificity_increased()));
+		this.children.forEach((child: (Atrule | Rule)) => {
+			child.transform(code, this.id, this.keyframes, max);
+		});
 
 		let c = 0;
 		this.children.forEach(child => {

src/compiler/compile/render_dom/index.ts

@@ -6,13 +6,12 @@ import { walk } from 'estree-walker';
 import { extract_names, Scope } from 'periscopic';
 import { invalidate } from './invalidate';
 import Block from './Block';
-import { ImportDeclaration, ClassDeclaration, FunctionExpression, Node, Statement, ObjectExpression, Expression } from 'estree';
+import { ImportDeclaration, ClassDeclaration, Node, Statement, ObjectExpression, Expression } from 'estree';
 import { apply_preprocessor_sourcemap } from '../../utils/mapped_code';
 import { RawSourceMap, DecodedSourceMap } from '@ampproject/remapping/dist/types/types';
 import { flatten } from '../../utils/flatten';
 import check_enable_sourcemap from '../utils/check_enable_sourcemap';
 import { push_array } from '../../utils/push_array';
-import { regex_backslashes } from '../../utils/patterns';
 
 export default function dom(
 	component: Component,
@@ -25,17 +24,14 @@ export default function dom(
 
 	block.has_outro_method = true;
 
-	// prevent fragment being created twice (#1063)
-	if (options.customElement) block.chunks.create.push(b`this.c = @noop;`);
-
 	const body = [];
 
 	if (renderer.file_var) {
 		const file = component.file ? x`"${component.file}"` : x`undefined`;
 		body.push(b`const ${renderer.file_var} = ${file};`);
 	}
 
-	const css = component.stylesheet.render(options.filename, !options.customElement);
+	const css = component.stylesheet.render(options.filename);
 
 	const css_sourcemap_enabled = check_enable_sourcemap(options.enableSourcemap, 'css');
 
@@ -52,9 +48,8 @@ export default function dom(
 	const add_css = component.get_unique_name('add_css');
 
 	const should_add_css = (
-		!options.customElement &&
 		!!styles &&
-		options.css === 'injected'
+		(options.customElement || options.css === 'injected')
 	);
 
 	if (should_add_css) {
@@ -519,91 +514,51 @@ export default function dom(
 		}
 	}
 
-	if (options.customElement) {
-
-		let init_props = x`@attribute_to_object(this.attributes)`;
-		if (uses_slots) {
-			init_props = x`{ ...${init_props}, $$slots: @get_custom_elements_slots(this) }`;
-		}
-
-		const declaration = b`
-			class ${name} extends @SvelteElement {
-				constructor(options) {
-					super();
+	const superclass = {
+		type: 'Identifier',
+		name: options.dev ? '@SvelteComponentDev' : '@SvelteComponent'
+	};
 
-					${css.code && b`
-						const style = document.createElement('style');
-						style.textContent = \`${css.code.replace(regex_backslashes, '\\\\')}${css_sourcemap_enabled && options.dev ? `\n/*# sourceMappingURL=${css.map.toUrl()} */` : ''}\`
-						this.shadowRoot.appendChild(style)`}
-
-					@init(this, { target: this.shadowRoot, props: ${init_props}, customElement: true }, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, null, ${dirty});
-
-					if (options) {
-						if (options.target) {
-							@insert(options.target, this, options.anchor);
-						}
+	const optional_parameters = [];
+	if (should_add_css) {
+		optional_parameters.push(add_css);
+	} else if (dirty) {
+		optional_parameters.push(x`null`);
+	}
+	if (dirty) {
+		optional_parameters.push(dirty);
+	}
 
-						${(props.length > 0 || uses_props || uses_rest) && b`
-						if (options.props) {
-							this.$set(options.props);
-							@flush();
-						}`}
-					}
-				}
+	const declaration = b`
+		class ${name} extends ${superclass} {
+			constructor(options) {
+				super(${options.dev && 'options'});
+				@init(this, options, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, ${optional_parameters});
+				${options.dev && b`@dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "${name.name}", options, id: create_fragment.name });`}
 			}
-		`[0] as ClassDeclaration;
-
-		if (props.length > 0) {
-			declaration.body.body.push({
-				type: 'MethodDefinition',
-				kind: 'get',
-				static: true,
-				computed: false,
-				key: { type: 'Identifier', name: 'observedAttributes' },
-				value: x`function() {
-					return [${props.map(prop => x`"${prop.export_name}"`)}];
-				}` as FunctionExpression
-			});
 		}
+	`[0] as ClassDeclaration;
 
-		push_array(declaration.body.body, accessors);
-
-		body.push(declaration);
-
-		if (component.tag != null) {
-			body.push(b`
-				@_customElements.define("${component.tag}", ${name});
-			`);
-		}
-	} else {
-		const superclass = {
-			type: 'Identifier',
-			name: options.dev ? '@SvelteComponentDev' : '@SvelteComponent'
-		};
-
-		const optional_parameters = [];
-		if (should_add_css) {
-			optional_parameters.push(add_css);
-		} else if (dirty) {
-			optional_parameters.push(x`null`);
-		}
-		if (dirty) {
-			optional_parameters.push(dirty);
-		}
+	push_array(declaration.body.body, accessors);
+	body.push(declaration);
 
-		const declaration = b`
-			class ${name} extends ${superclass} {
-				constructor(options) {
-					super(${options.dev && 'options'});
-					@init(this, options, ${definition}, ${has_create_fragment ? 'create_fragment' : 'null'}, ${not_equal}, ${prop_indexes}, ${optional_parameters});
-					${options.dev && b`@dispatch_dev("SvelteRegisterComponent", { component: this, tagName: "${name.name}", options, id: create_fragment.name });`}
-				}
+	if (options.customElement && component.tag != null) {
+		const props_str = writable_props.reduce((def, prop) => {
+			def[prop.export_name] = component.component_options.cePropsDefinition?.[prop.export_name] || {};
+			if (prop.is_boolean && !def[prop.export_name].type) {
+				def[prop.export_name].type = 'Boolean';
 			}
-		`[0] as ClassDeclaration;
-
-		push_array(declaration.body.body, accessors);
-
-		body.push(declaration);
+			return def;
+		}, {});
+		const slots_str = [...component.slots.keys()].map(key => `"${key}"`).join(',');
+		const accessors_str = accessors
+			.filter(accessor => !writable_props.some(prop => prop.export_name === accessor.key.name))
+			.map(accessor => `"${accessor.key.name}"`)
+			.join(',');
+
+		body.push(
+			b`@_customElements.define("${component.tag}", @create_custom_element(${name}, ${JSON.stringify(props_str)}, [${slots_str}], [${accessors_str}]));`
+		);
 	}
 
 	return { js: flatten(body), css };

src/compiler/compile/render_dom/wrappers/Slot.ts

@@ -132,6 +132,10 @@ export default class SlotWrapper extends Wrapper {
 			const ${slot_definition} = ${renderer.reference('#slots')}.${slot_name};
 			const ${slot} = @create_slot(${slot_definition}, #ctx, ${renderer.reference('$$scope')}, ${get_slot_context_fn});
 			${has_fallback ? b`const ${slot_or_fallback} = ${slot} || ${this.fallback.name}(#ctx);` : null}
+			${has_fallback && this.renderer.options.customElement && this.renderer.component.component_options.tag
+				// This ensures that fallback content is rendered into the <slot> element given by the custom element wrapper
+				? b`if (${slot_or_fallback}.$$c_e) { ${slot_or_fallback}.$$c_e = ${this.fallback.name}(#ctx); }`
+				: null}
 		`);
 
 		block.chunks.create.push(

src/compiler/compile/render_ssr/index.ts

@@ -33,7 +33,7 @@ export default function ssr(
 	// TODO concatenate CSS maps
 	const css = options.customElement ?
 		{ code: null, map: null } :
-		component.stylesheet.render(options.filename, true);
+		component.stylesheet.render(options.filename);
 
 	const uses_rest = component.var_lookup.has('$$restProps');
 	const props = component.vars.filter(variable => !variable.module && variable.export_name);

src/compiler/interfaces.ts

@@ -206,7 +206,10 @@ export interface AppendTarget {
 
 export interface Var {
 	name: string;
-	export_name?: string; // the `bar` in `export { foo as bar }`
+	/** the `bar` in `export { foo as bar }` or `export let bar` */
+	export_name?: string;
+	/** true if assigned a boolean default value (`export let foo = true`) */
+	is_boolean?: boolean;
 	injected?: boolean;
 	module?: boolean;
 	mutated?: boolean;

src/compiler/parse/state/tag.ts

@@ -115,7 +115,7 @@ export default function tag(parser: Parser) {
 		: (regex_capital_letter.test(name[0]) || name === 'svelte:self' || name === 'svelte:component') ? 'InlineComponent'
 			: name === 'svelte:fragment' ? 'SlotTemplate'
 				: name === 'title' && parent_is_head(parser.stack) ? 'Title'
-					: name === 'slot' && !parser.customElement ? 'Slot' : 'Element';
+					: name === 'slot' ? 'Slot' : 'Element';
 
 	const element: TemplateNode = {
 		start,