From 1455c554ff874fe7faee844caa1f6c66302573a6 Mon Sep 17 00:00:00 2001 From: Richard Harris Date: Sat, 9 Mar 2019 21:40:21 -0500 Subject: [PATCH] use add_var mechanism to create implicit $$props var --- src/compile/Component.ts | 12 +++++++++--- src/compile/render-dom/index.ts | 17 +++++++++-------- src/compile/render-ssr/index.ts | 4 ++-- 3 files changed, 20 insertions(+), 13 deletions(-) diff --git a/src/compile/Component.ts b/src/compile/Component.ts index 882444dba7..37584dcfad 100644 --- a/src/compile/Component.ts +++ b/src/compile/Component.ts @@ -69,7 +69,6 @@ export default class Component { has_reactive_assignments = false; injected_reactive_declaration_vars: Set = new Set(); helpers: Set = new Set(); - uses_props = false; indirectDependencies: Map> = 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, diff --git a/src/compile/render-dom/index.ts b/src/compile/render-dom/index.ts index d6a6d1f767..faac157d4b 100644 --- a/src/compile/render-dom/index.ts +++ b/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(); diff --git a/src/compile/render-ssr/index.ts b/src/compile/render-ssr/index.ts index 5a73e46358..bb77b56bf3 100644 --- a/src/compile/render-ssr/index.ts +++ b/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;`);