[fix] do not warn if module variables are not the only dependencies in reactive statements (#6510)

The warning was too strict, since there are valid use cases for having non-reactive variables inside reactive statements
Fixes #5954
pull/6549/head
Tan Li Hau 3 years ago committed by GitHub
parent a8c35daa9a
commit fd031105aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1192,6 +1192,7 @@ export default class Component {
const assignees = new Set<string>(); const assignees = new Set<string>();
const assignee_nodes = new Set(); const assignee_nodes = new Set();
const dependencies = new Set<string>(); const dependencies = new Set<string>();
const module_dependencies = new Set<string>();
let scope = this.instance_scope; let scope = this.instance_scope;
const map = this.instance_scope_map; const map = this.instance_scope_map;
@ -1228,7 +1229,7 @@ export default class Component {
variable.is_reactive_dependency = true; variable.is_reactive_dependency = true;
if (variable.module) { if (variable.module) {
should_add_as_dependency = false; should_add_as_dependency = false;
component.warn(node as any, compiler_warnings.module_script_variable_reactive_declaration(name)); module_dependencies.add(name);
} }
} }
const is_writable_or_mutated = const is_writable_or_mutated =
@ -1253,6 +1254,10 @@ export default class Component {
} }
}); });
if (module_dependencies.size > 0 && dependencies.size === 0) {
component.warn(node.body as any, compiler_warnings.module_script_variable_reactive_declaration(Array.from(module_dependencies)));
}
const { expression } = node.body as ExpressionStatement; const { expression } = node.body as ExpressionStatement;
const declaration = expression && (expression as AssignmentExpression).left; const declaration = expression && (expression as AssignmentExpression).left;

@ -20,9 +20,9 @@ export default {
code: 'non-top-level-reactive-declaration', code: 'non-top-level-reactive-declaration',
message: '$: has no effect outside of the top-level' message: '$: has no effect outside of the top-level'
}, },
module_script_variable_reactive_declaration: (name: string) => ({ module_script_variable_reactive_declaration: (names: string[]) => ({
code: 'module-script-reactive-declaration', code: 'module-script-reactive-declaration',
message: `"${name}" is declared in a module script and will not be reactive` message: `${names.map(name => `"${name}"`).join(', ')} ${names.length > 1 ? 'are' : 'is'} declared in a module script and will not be reactive`
}), }),
missing_declaration: (name: string, has_script: boolean) => ({ missing_declaration: (name: string, has_script: boolean) => ({
code: 'missing-declaration', code: 'missing-declaration',

@ -0,0 +1,7 @@
<script context="module">
let PI = 3.14;
</script>
<script>
let r;
$: area = PI * r * r;
</script>

@ -2,15 +2,15 @@
{ {
"code": "module-script-reactive-declaration", "code": "module-script-reactive-declaration",
"message": "\"foo\" is declared in a module script and will not be reactive", "message": "\"foo\" is declared in a module script and will not be reactive",
"pos": 65, "pos": 59,
"start": { "start": {
"character": 65, "character": 59,
"column": 10, "column": 4,
"line": 5 "line": 5
}, },
"end": { "end": {
"character": 68, "character": 69,
"column": 13, "column": 14,
"line": 5 "line": 5
} }
} }

Loading…
Cancel
Save