[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 assignee_nodes = new Set();
const dependencies = new Set<string>();
const module_dependencies = new Set<string>();
let scope = this.instance_scope;
const map = this.instance_scope_map;
@ -1228,7 +1229,7 @@ export default class Component {
variable.is_reactive_dependency = true;
if (variable.module) {
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 =
@ -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 declaration = expression && (expression as AssignmentExpression).left;

@ -20,9 +20,9 @@ export default {
code: 'non-top-level-reactive-declaration',
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',
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) => ({
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",
"message": "\"foo\" is declared in a module script and will not be reactive",
"pos": 65,
"pos": 59,
"start": {
"character": 65,
"column": 10,
"character": 59,
"column": 4,
"line": 5
},
"end": {
"character": 68,
"column": 13,
"character": 69,
"column": 14,
"line": 5
}
}

Loading…
Cancel
Save