add $$host

Author: tanhauhau

src/compiler/compile/Component.ts

@@ -187,6 +187,9 @@ export default class Component {
 		if (variable) {
 			variable.referenced = true;
 		} else if (is_reserved_keyword(name)) {
+			if (name === '$$host' && !this.compile_options.customElement) {
+				throw new Error(`$$host is for custom element. Did you forget the 'customElement: true' compile option?`);
+			}
 			this.add_var({
 				name,
 				injected: true,
@@ -655,6 +658,12 @@ export default class Component {
 					name,
 					injected: true,
 				});
+				if (name === '$$host' && !this.compile_options.customElement) {
+					this.error(node as any, {
+						code: 'illegal-host',
+						message: `$$host is for custom element. Did you forget the 'customElement: true' compile option?`
+					});
+				}
 			} else if (name[0] === '$') {
 				if (name === '$' || name[1] === '$') {
 					this.error(node as any, {

src/compiler/compile/render_dom/index.ts

@@ -412,6 +412,7 @@ export default function dom(
 
 		body.push(b`
 			function ${definition}(${args}) {
+				${component.var_lookup.has('$$host') ? 'const $$host = $$self' : null}
 				${rest}
 
 				${reactive_store_declarations}

src/compiler/compile/utils/reserved_keywords.ts

@@ -1,4 +1,4 @@
-export const reserved_keywords = new Set(["$$props", "$$restProps"]);
+export const reserved_keywords = new Set(["$$props", "$$restProps", "$$host"]);
 
 export function is_reserved_keyword(name) {
 	return reserved_keywords.has(name);

test/custom-elements/index.js

@@ -105,7 +105,11 @@ describe('custom-elements', function() {
 
 			const page = await browser.newPage();
 
-			page.on('console', (type, ...args) => {
+			page.on('console', async (consoleMessage) => {
+				const type = consoleMessage.type();
+				const args = await Promise.all(
+					consoleMessage.args().map(arg => arg.jsonValue())
+				)
 				console[type](...args);
 			});
 

test/custom-elements/samples/$$host/main.svelte

@@ -0,0 +1,11 @@
+<svelte:options tag="custom-element"/>
+
+<script>
+	export function getHost() {
+		return $$host;
+	}
+
+	export const host = $$host;
+</script>
+
+{typeof $$host}

test/custom-elements/samples/$$host/test.js

@@ -0,0 +1,12 @@
+import * as assert from 'assert';
+import './main.svelte';
+
+export default async function (target) {
+	target.innerHTML = '<custom-element></custom-element>';
+	const el = target.querySelector('custom-element');
+
+	assert.equal(el.getHost(), el);
+	assert.equal(el.host, el);
+
+	assert.equal(el.shadowRoot.textContent, 'object');
+}

test/runtime/samples/$$host-2/_config.js

@@ -0,0 +1,4 @@
+export default {
+	compileOptions: {},
+	error: "$$host is for custom element. Did you forget the 'customElement: true' compile option?"
+};

test/runtime/samples/$$host-2/main.svelte

@@ -0,0 +1 @@
+{$$host}

test/runtime/samples/$$host/_config.js

@@ -0,0 +1,4 @@
+export default {
+	compileOptions: {},
+	error: "$$host is for custom element. Did you forget the 'customElement: true' compile option?"
+};

test/runtime/samples/$$host/main.svelte

@@ -0,0 +1,3 @@
+<script>
+	export const host = $$host;
+</script>