use add_var mechanism to create implicit $$props var

src/compile/Component.ts

@@ -69,7 +69,6 @@ export default class Component {
 	has_reactive_assignments = false;
 	injected_reactive_declaration_vars: Set<string> = new Set();
 	helpers: Set<string> = new Set();
-	uses_props = false;
 
 	indirectDependencies: Map<string, Set<string>> = new Map();
 
@@ -151,7 +150,11 @@ export default class Component {
 		if (variable) {
 			variable.referenced = true;
 		} else if (name === '$$props') {
-			this.uses_props = true;
+			this.add_var({
+				name,
+				implicit: true,
+				referenced: true
+			});
 		} else if (name[0] === '$') {
 			this.add_var({
 				name,
@@ -599,7 +602,10 @@ export default class Component {
 					initialised: true
 				});
 			} else if (name === '$$props') {
-				this.uses_props = true;
+				this.add_var({
+					name,
+					implicit: true
+				});
 			} else if (name[0] === '$') {
 				this.add_var({
 					name,

src/compile/render-dom/index.ts

@@ -70,14 +70,15 @@ export default function dom(
 		options.css !== false
 	);
 
-	const $$props = component.uses_props ? `$$new_props` : `$$props`;
+	const uses_props = component.var_lookup.has('$$props');
+	const $$props = uses_props ? `$$new_props` : `$$props`;
 	const props = component.vars.filter(variable => !variable.module && variable.export_name);
 	const writable_props = props.filter(variable => variable.writable);
 
-	const set = (component.uses_props || writable_props.length > 0 || renderer.slots.size > 0)
+	const set = (uses_props || writable_props.length > 0 || renderer.slots.size > 0)
 		? deindent`
 			${$$props} => {
-				${component.uses_props && component.invalidate('$$props', `$$props = @assign(@assign({}, $$props), $$new_props)`)}
+				${uses_props && component.invalidate('$$props', `$$props = @assign(@assign({}, $$props), $$new_props)`)}
 				${writable_props.map(prop =>
 				`if ('${prop.export_name}' in $$props) ${component.invalidate(prop.name, `${prop.name} = $$props.${prop.export_name}`)};`
 				)}
@@ -278,7 +279,7 @@ export default function dom(
 		.filter(v => ((v.referenced || v.export_name) && !v.hoistable))
 		.map(v => v.name);
 
-	if (component.uses_props) filtered_declarations.push(`$$props: $$props = ${component.helper('exclude_internal_props')}($$props)`);
+	if (uses_props) filtered_declarations.push(`$$props: $$props = ${component.helper('exclude_internal_props')}($$props)`);
 
 	const filtered_props = props.filter(prop => {
 		const variable = component.var_lookup.get(prop.name);
@@ -288,7 +289,7 @@ export default function dom(
 		return true;
 	});
 
-	const reactive_stores = component.vars.filter(variable => variable.name[0] === '$');
+	const reactive_stores = component.vars.filter(variable => variable.name[0] === '$' && variable.name !== '$$props');
 
 	if (renderer.slots.size > 0) {
 		const arr = Array.from(renderer.slots);
@@ -302,7 +303,7 @@ export default function dom(
 	const has_definition = (
 		component.javascript ||
 		filtered_props.length > 0 ||
-		component.uses_props ||
+		uses_props ||
 		component.partly_hoisted.length > 0 ||
 		filtered_declarations.length > 0 ||
 		component.reactive_declarations.length > 0
@@ -322,7 +323,7 @@ export default function dom(
 	if (component.javascript) {
 		user_code = component.javascript;
 	} else {
-		if (!component.ast.instance && !component.ast.module && (filtered_props.length > 0 || component.uses_props)) {
+		if (!component.ast.instance && !component.ast.module && (filtered_props.length > 0 || uses_props)) {
 			const statements = [];
 
 			if (filtered_props.length > 0) statements.push(`let { ${filtered_props.map(x => x.name).join(', ')} } = $$props;`);
@@ -440,7 +441,7 @@ export default function dom(
 							@insert(options.target, this, options.anchor);
 						}
 
-						${(props.length > 0 || component.uses_props) && deindent`
+						${(props.length > 0 || uses_props) && deindent`
 						if (options.props) {
 							this.$set(options.props);
 							@flush();

src/compile/render-ssr/index.ts

@@ -24,7 +24,7 @@ export default function ssr(
 		{ code: null, map: null } :
 		component.stylesheet.render(options.filename, true);
 
-	const reactive_stores = component.vars.filter(variable => variable.name[0] === '$');
+	const reactive_stores = component.vars.filter(variable => variable.name[0] === '$' && variable.name !== '$$props');
 	const reactive_store_values = reactive_stores
 		.map(({ name }) => {
 			const store = component.var_lookup.get(name.slice(1));
@@ -58,7 +58,7 @@ export default function ssr(
 		});
 
 		user_code = component.javascript;
-	} else if (!component.ast.instance && !component.ast.module && (props.length > 0 || component.uses_props)) {
+	} else if (!component.ast.instance && !component.ast.module && (props.length > 0 || component.var_lookup.has('$$props'))) {
 		const statements = [];
 
 		if (props.length > 0) statements.push(`let { ${props.map(x => x.name).join(', ')} } = $$props;`);