silence some incorrect unsafe-member-access errors (#88)

README.md

@@ -102,6 +102,24 @@ module.exports = {
 };
 ```
 
+There are some limitations to these type-aware rules currently. Specifically, checks in the context of reactive assignments and store subscriptions will report false positives or false negatives, depending on the rule. In the case of reactive assignments, you can work around this by explicitly typing the reactive variable. An example with the `no-unsafe-member-access` rule:
+
+```svelte
+<script lang="ts">
+  import { writable } from 'svelte/store';
+
+  const store = writable([]);
+  $store.length; // incorrect no-unsafe-member-access error
+
+  $: assignment = [];
+  assignment.length; // incorrect no-unsafe-member-access error
+  // You can work around this by doing
+  let another_assignment: string[];
+  $: another_assignment = [];
+  another_assignment.length; // OK
+</script>
+```
+
 ## Interactions with other plugins
 
 Care needs to be taken when using this plugin alongside others. Take a look at [this list of things you need to watch out for](OTHER_PLUGINS.md).

src/preprocess.js

@@ -111,7 +111,12 @@ export const preprocess = text => {
 		const block = new_block();
 		state.blocks.set(with_file_ending('instance'), block);
 
-		block.transformed_code = vars.filter(v => v.injected || v.module).map(v => `let ${v.name};`).join('');
+		if (ast.module && processor_options.typescript) {
+			block.transformed_code = vars.filter(v => v.injected).map(v => `let ${v.name};`).join('');
+			block.transformed_code += text.slice(ast.module.content.start, ast.module.content.end);
+		} else {
+			block.transformed_code = vars.filter(v => v.injected || v.module).map(v => `let ${v.name};`).join('');
+		}
 
 		get_translation(text, block, ast.instance.content);
 
@@ -123,7 +128,19 @@ export const preprocess = text => {
 		const block = new_block();
 		state.blocks.set(with_file_ending('template'), block);
 
-		block.transformed_code = vars.map(v => `let ${v.name};`).join('');
+		if (processor_options.typescript) {
+			block.transformed_code = '';
+			if (ast.module) {
+				block.transformed_code += text.slice(ast.module.content.start, ast.module.content.end);
+			}
+			if (ast.instance) {
+				block.transformed_code += '\n';
+				block.transformed_code += vars.filter(v => v.injected).map(v => `let ${v.name};`).join('');
+				block.transformed_code += text.slice(ast.instance.content.start, ast.instance.content.end);
+			}
+		} else {
+			block.transformed_code = vars.map(v => `let ${v.name};`).join('');
+		}
 
 		const nodes_with_contextual_scope = new WeakSet();
 		let in_quoted_attribute = false;
@@ -209,14 +226,10 @@ const ts_import_transformer = (context) => {
 // 5. parse the source to get the AST
 // 6. return AST of step 5, warnings and vars of step 2
 function compile_code(text, compiler, processor_options) {
-	let ast;
-	let warnings;
-	let vars;
-
 	const ts = processor_options.typescript;
-	let mapper;
-	let ts_result;
-	if (ts) {
+	if (!ts) {
+		return compiler.compile(text, { generate: false, ...processor_options.compiler_options });
+	} else {
 		const diffs = [];
 		let accumulated_diff = 0;
 		const transpiled = text.replace(/<script(\s[^]*?)?>([^]*?)<\/script>/gi, (match, attributes = '', content) => {
@@ -245,7 +258,9 @@ function compile_code(text, compiler, processor_options) {
 			});
 			return `<script${attributes}>${output.outputText}</script>`;
 		});
-		mapper = new DocumentMapper(text, transpiled, diffs);
+		const mapper = new DocumentMapper(text, transpiled, diffs);
+
+		let ts_result;
 		try {
 			ts_result = compiler.compile(transpiled, { generate: false, ...processor_options.compiler_options });
 		} catch (err) {
@@ -263,16 +278,10 @@ function compile_code(text, compiler, processor_options) {
 				.replace(/[^\n][^\n][^\n][^\n]\n/g, '/**/\n')
 			}</script>`;
 		});
-	}
-
-	if (!ts) {
-		({ ast, warnings, vars } = compiler.compile(text, { generate: false, ...processor_options.compiler_options }));
-	} else {
 		// if we do a full recompile Svelte can fail due to the blank script tag not declaring anything
 		// so instead we just parse for the AST (which is likely faster, anyways)
-		ast = compiler.parse(text, { ...processor_options.compiler_options });
-		({ warnings, vars } = ts_result);
+		const ast = compiler.parse(text, { ...processor_options.compiler_options });
+		const{ warnings, vars } = ts_result;
+		return { ast, warnings, vars, mapper };
 	}
-
-	return { ast, warnings, vars, mapper };
 }

test/samples/typescript-unsafe-member-access/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+	parser: "@typescript-eslint/parser",
+	plugins: [
+	  "@typescript-eslint",
+	],
+	parserOptions: {
+	  project: ["./tsconfig.json"],
+	  tsconfigRootDir: __dirname,
+	  extraFileExtensions: [".svelte"],
+	},
+	settings: {
+	  "svelte3/typescript": require("typescript"),
+	},
+	rules: {
+	  "@typescript-eslint/no-unsafe-member-access": "error",
+	},
+};

test/samples/typescript-unsafe-member-access/Input.svelte

@@ -0,0 +1,40 @@
+<script lang="ts" context="module">
+	const context_safe = [];
+	const context_unsafe: any = null;
+
+	console.log(context_safe.length);
+	console.log(context_unsafe.length);
+</script>
+
+<script lang="ts">
+	import { writable } from 'svelte/store';
+	import { external_safe, external_unsafe } from './external-file';
+	const instance_safe = [];
+	const instance_unsafe: any = null;
+	$: reactive_safe = instance_safe;
+	$: reactive_unsafe = instance_unsafe;
+	const writable_safe = writable([]);
+	const writable_unsafe = writable(null as any);
+
+	console.log(context_safe.length);
+	console.log(context_unsafe.length);
+	console.log(external_safe.length);
+	console.log(external_unsafe.length);
+	console.log(instance_safe.length);
+	console.log(instance_unsafe.length);
+	// console.log(reactive_safe.length);  TODO, current limitation
+	console.log(reactive_unsafe.length);
+	// console.log($writable_safe.length);  TODO, current limitation
+	console.log($writable_unsafe.length);
+</script>
+
+{context_safe.length}
+{context_unsafe.length}
+{external_safe.length}
+{external_unsafe.length}
+{instance_safe.length}
+{instance_unsafe.length}
+<!-- {reactive_safe.length} TODO, current limitation -->
+{reactive_unsafe.length}
+<!-- {$writable_safe.length} TODO, current limitation -->
+{$writable_unsafe.length}

test/samples/typescript-unsafe-member-access/expected.json

@@ -0,0 +1,90 @@
+[
+	{
+		"ruleId": "@typescript-eslint/no-unsafe-member-access",
+		"severity": 2,
+		"line": 6,
+		"column": 14,
+		"endLine": 6,
+		"endColumn": 35
+	},
+	{
+		"ruleId": "@typescript-eslint/no-unsafe-member-access",
+		"severity": 2,
+		"line": 20,
+		"column": 14,
+		"endLine": 20,
+		"endColumn": 35
+	},
+	{
+		"ruleId": "@typescript-eslint/no-unsafe-member-access",
+		"severity": 2,
+		"line": 22,
+		"column": 14,
+		"endLine": 22,
+		"endColumn": 36
+	},
+	{
+		"ruleId": "@typescript-eslint/no-unsafe-member-access",
+		"severity": 2,
+		"line": 24,
+		"column": 14,
+		"endLine": 24,
+		"endColumn": 36
+	},
+	{
+		"ruleId": "@typescript-eslint/no-unsafe-member-access",
+		"severity": 2,
+		"line": 26,
+		"column": 14,
+		"endLine": 26,
+		"endColumn": 36
+	},
+	{
+		"ruleId": "@typescript-eslint/no-unsafe-member-access",
+		"severity": 2,
+		"line": 28,
+		"column": 14,
+		"endLine": 28,
+		"endColumn": 37
+	},
+	{
+		"ruleId": "@typescript-eslint/no-unsafe-member-access",
+		"severity": 2,
+		"line": 32,
+		"column": 2,
+		"endLine": 32,
+		"endColumn": 23
+	},
+	{
+		"ruleId": "@typescript-eslint/no-unsafe-member-access",
+		"severity": 2,
+		"line": 34,
+		"column": 2,
+		"endLine": 34,
+		"endColumn": 24
+	},
+	{
+		"ruleId": "@typescript-eslint/no-unsafe-member-access",
+		"severity": 2,
+		"line": 36,
+		"column": 2,
+		"endLine": 36,
+		"endColumn": 24
+	},
+	{
+		"ruleId": "@typescript-eslint/no-unsafe-member-access",
+		"severity": 2,
+		"line": 38,
+		"column": 2,
+		"endLine": 38,
+		"endColumn": 24
+	},
+	{
+		"ruleId": "@typescript-eslint/no-unsafe-member-access",
+		"severity": 2,
+		"line": 40,
+		"column": 2,
+		"endLine": 40,
+		"endColumn": 25
+	}
+]

test/samples/typescript-unsafe-member-access/external-file.ts

@@ -0,0 +1,2 @@
+export const external_safe = ['hi'];
+export const external_unsafe: any = null;

test/samples/typescript-unsafe-member-access/tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "include": ["**/*"]
+}

test/samples/typescript/expected.json

@@ -35,8 +35,8 @@
 				"messageId": "suggestUnknown",
 				"fix": {
 					"range": [
-						29,
-						32
+						58,
+						61
 					],
 					"text": "unknown"
 				},
@@ -46,8 +46,8 @@
 				"messageId": "suggestNever",
 				"fix": {
 					"range": [
-						29,
-						32
+						58,
+						61
 					],
 					"text": "never"
 				},
@@ -82,8 +82,8 @@
 				"messageId": "suggestUnknown",
 				"fix": {
 					"range": [
-						50,
-						53
+						79,
+						82
 					],
 					"text": "unknown"
 				},
@@ -93,8 +93,8 @@
 				"messageId": "suggestNever",
 				"fix": {
 					"range": [
-						50,
-						53
+						79,
+						82
 					],
 					"text": "never"
 				},