(breaking) be more strict with required props

packages/language-server/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelte-language-server",
-    "version": "0.13.0",
+    "version": "0.14.0",
     "description": "A language server for Svelte",
     "main": "dist/src/index.js",
     "typings": "dist/src/index",
@@ -58,7 +58,7 @@
         "source-map": "^0.7.3",
         "svelte": "~3.38.2",
         "svelte-preprocess": "~4.7.3",
-        "svelte2tsx": "~0.1.0",
+        "svelte2tsx": "~0.2.0",
         "typescript": "*",
         "vscode-css-languageservice": "5.0.0",
         "vscode-emmet-helper": "2.1.2",

packages/language-server/src/plugins/typescript/DocumentSnapshot.ts

@@ -76,7 +76,6 @@ export interface SnapshotFragment extends DocumentMapper {
  * Options that apply to svelte files.
  */
 export interface SvelteSnapshotOptions {
-    strictMode: boolean;
     transformOnTemplateError: boolean;
 }
 
@@ -173,7 +172,6 @@ function preprocessSvelteFile(document: Document, options: SvelteSnapshotOptions
 
     try {
         const tsx = svelte2tsx(text, {
-            strictMode: options.strictMode,
             filename: document.getFilePath() ?? undefined,
             isTsFile: scriptKind === ts.ScriptKind.TSX,
             emitOnTemplateError: options.transformOnTemplateError,

packages/language-server/src/plugins/typescript/service.ts

@@ -132,7 +132,6 @@ async function createLanguageService(
     };
     let languageService = ts.createLanguageService(host);
     const transformationConfig = {
-        strictMode: !!compilerOptions.strict,
         transformOnTemplateError: docContext.transformOnTemplateError
     };
 

packages/language-server/test/plugins/typescript/features/DiagnosticsProvider.test.ts

@@ -961,4 +961,208 @@ describe('DiagnosticsProvider', () => {
         const diagnostics3 = await plugin.getDiagnostics(document);
         assert.deepStrictEqual(diagnostics3.length, 1);
     }).timeout(5000);
+
+    function assertPropsDiagnosticsStrict(diagnostics: any[], source: 'ts' | 'js') {
+        assert.deepStrictEqual(
+            diagnostics.map((d: any) => {
+                // irrelevant for this test, save some lines
+                delete d.range;
+                return d;
+            }),
+            [
+                {
+                    code: 2322,
+                    message:
+                        // eslint-disable-next-line max-len
+                        "Type '{}' is not assignable to type 'IntrinsicAttributes & { required: string; optional1?: string | undefined; optional2?: string | undefined; }'.\n  Property 'required' is missing in type '{}' but required in type '{ required: string; optional1?: string | undefined; optional2?: string | undefined; }'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message: "Type 'undefined' is not assignable to type 'string'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message:
+                        // eslint-disable-next-line max-len
+                        "Type '{ required: string; optional1: string; optional2: string; doesntExist: boolean; }' is not assignable to type 'IntrinsicAttributes & { required: string; optional1?: string | undefined; optional2?: string | undefined; }'.\n  Property 'doesntExist' does not exist on type 'IntrinsicAttributes & { required: string; optional1?: string | undefined; optional2?: string | undefined; }'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message: "Type 'boolean' is not assignable to type 'string'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message: "Type 'true' is not assignable to type 'string | undefined'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message: "Type 'true' is not assignable to type 'string | undefined'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message:
+                        // eslint-disable-next-line max-len
+                        "Type '{}' is not assignable to type 'IntrinsicAttributes & { required: string; optional1?: string | undefined; optional2?: string | undefined; }'.\n  Property 'required' is missing in type '{}' but required in type '{ required: string; optional1?: string | undefined; optional2?: string | undefined; }'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message: "Type 'undefined' is not assignable to type 'string'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message: "Type 'boolean' is not assignable to type 'string'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message: "Type 'true' is not assignable to type 'string | undefined'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message: "Type 'true' is not assignable to type 'string | undefined'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                }
+            ]
+        );
+    }
+
+    it('checks prop types correctly (ts file, strict mode)', async () => {
+        const { plugin, document } = setup(path.join('checkJs', 'props_importer-ts.svelte'));
+        const diagnostics = await plugin.getDiagnostics(document);
+        assertPropsDiagnosticsStrict(diagnostics, 'ts');
+    });
+
+    it('checks prop types correctly (js file, strict mode)', async () => {
+        const { plugin, document } = setup(path.join('checkJs', 'props_importer-js.svelte'));
+        const diagnostics = await plugin.getDiagnostics(document);
+        assertPropsDiagnosticsStrict(diagnostics, 'js');
+    });
+
+    function assertPropsDiagnostics(diagnostics: any[], source: 'ts' | 'js') {
+        assert.deepStrictEqual(
+            diagnostics.map((d: any) => {
+                // irrelevant for this test, save some lines
+                delete d.range;
+                return d;
+            }),
+            [
+                {
+                    code: 2322,
+                    message:
+                        // eslint-disable-next-line max-len
+                        "Type '{}' is not assignable to type 'IntrinsicAttributes & { required: string; optional1?: string; optional2?: string; }'.\n  Property 'required' is missing in type '{}' but required in type '{ required: string; optional1?: string; optional2?: string; }'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message:
+                        // eslint-disable-next-line max-len
+                        "Type '{ required: string; optional1: string; optional2: string; doesntExist: boolean; }' is not assignable to type 'IntrinsicAttributes & { required: string; optional1?: string; optional2?: string; }'.\n  Property 'doesntExist' does not exist on type 'IntrinsicAttributes & { required: string; optional1?: string; optional2?: string; }'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message: "Type 'boolean' is not assignable to type 'string'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message: "Type 'boolean' is not assignable to type 'string'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message: "Type 'boolean' is not assignable to type 'string'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message:
+                        // eslint-disable-next-line max-len
+                        "Type '{}' is not assignable to type 'IntrinsicAttributes & { required: string; optional1?: string; optional2?: string; }'.\n  Property 'required' is missing in type '{}' but required in type '{ required: string; optional1?: string; optional2?: string; }'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message: "Type 'boolean' is not assignable to type 'string'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message: "Type 'boolean' is not assignable to type 'string'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                },
+                {
+                    code: 2322,
+                    message: "Type 'boolean' is not assignable to type 'string'.",
+                    severity: 1,
+                    source,
+                    tags: []
+                }
+            ]
+        );
+    }
+
+    it('checks prop types correctly (ts file, no strict mode)', async () => {
+        const { plugin, document } = setup(
+            path.join('checkJs-no-strict', 'props_importer-ts.svelte')
+        );
+        const diagnostics = await plugin.getDiagnostics(document);
+        assertPropsDiagnostics(diagnostics, 'ts');
+    });
+
+    it('checks prop types correctly (js file, no strict mode)', async () => {
+        const { plugin, document } = setup(
+            path.join('checkJs-no-strict', 'props_importer-js.svelte')
+        );
+        const diagnostics = await plugin.getDiagnostics(document);
+        assertPropsDiagnostics(diagnostics, 'js');
+    });
 });

packages/language-server/test/plugins/typescript/testfiles/diagnostics/checkJs-no-strict/props_importer-js.svelte

@@ -0,0 +1,21 @@
+<script>
+    import ImportTs from '../props_to-import-ts.svelte';
+    import ImportJs from '../props_to-import-js.svelte';
+</script>
+
+<!-- errors: -->
+<ImportTs />
+<ImportTs required={'a'} optional1={'b'} optional2={'c'} doesntExist={true} />
+<ImportTs required={true} optional1={true} optional2={true} />
+<ImportJs />
+<ImportJs required={true} optional1={true} optional2={true} />
+
+<!-- valid: -->
+<ImportTs required={'a'} />
+<ImportTs required={undefined} />
+<ImportTs required={'a'} optional1={'b'} optional2={'c'} />
+<ImportTs required={'a'} optional1={'b'} optional2={undefined} />
+<ImportJs required={'a'} />
+<ImportJs required={undefined} />
+<ImportJs required={'a'} optional1={'b'} optional2={'c'} />
+<ImportJs required={'a'} optional1={'b'} optional2={undefined} />

packages/language-server/test/plugins/typescript/testfiles/diagnostics/checkJs-no-strict/props_importer-ts.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import ImportTs from '../props_to-import-ts.svelte';
+    import ImportJs from '../props_to-import-js.svelte';
+</script>
+
+<!-- errors: -->
+<ImportTs />
+<ImportTs required={'a'} optional1={'b'} optional2={'c'} doesntExist={true} />
+<ImportTs required={true} optional1={true} optional2={true} />
+<ImportJs />
+<ImportJs required={true} optional1={true} optional2={true} />
+
+<!-- valid: -->
+<ImportTs required={'a'} />
+<ImportTs required={undefined} />
+<ImportTs required={'a'} optional1={'b'} optional2={'c'} />
+<ImportTs required={'a'} optional1={'b'} optional2={undefined} />
+<ImportJs required={'a'} />
+<ImportJs required={undefined} />
+<ImportJs required={'a'} optional1={'b'} optional2={'c'} />
+<ImportJs required={'a'} optional1={'b'} optional2={undefined} />

packages/language-server/test/plugins/typescript/testfiles/diagnostics/checkJs-no-strict/tsconfig.json

@@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "checkJs": true,
+        /**
+          This is actually not needed, but makes the tests faster
+          because TS does not look up other types.
+        */
+        "types": ["svelte"]
+    }
+}

packages/language-server/test/plugins/typescript/testfiles/diagnostics/checkJs/props_importer-js.svelte

@@ -0,0 +1,21 @@
+<script>
+    import ImportTs from '../props_to-import-ts.svelte';
+    import ImportJs from '../props_to-import-js.svelte';
+</script>
+
+<!-- errors: -->
+<ImportTs />
+<ImportTs required={undefined} />
+<ImportTs required={'a'} optional1={'b'} optional2={'c'} doesntExist={true} />
+<ImportTs required={true} optional1={true} optional2={true} />
+<ImportJs />
+<ImportJs required={undefined} />
+<ImportJs required={true} optional1={true} optional2={true} />
+
+<!-- valid: -->
+<ImportTs required={'a'} />
+<ImportTs required={'a'} optional1={'b'} optional2={'c'} />
+<ImportTs required={'a'} optional1={'b'} optional2={undefined} />
+<ImportJs required={'a'} />
+<ImportJs required={'a'} optional1={'b'} optional2={'c'} />
+<ImportJs required={'a'} optional1={'b'} optional2={undefined} />

packages/language-server/test/plugins/typescript/testfiles/diagnostics/checkJs/props_importer-ts.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import ImportTs from '../props_to-import-ts.svelte';
+    import ImportJs from '../props_to-import-js.svelte';
+</script>
+
+<!-- errors: -->
+<ImportTs />
+<ImportTs required={undefined} />
+<ImportTs required={'a'} optional1={'b'} optional2={'c'} doesntExist={true} />
+<ImportTs required={true} optional1={true} optional2={true} />
+<ImportJs />
+<ImportJs required={undefined} />
+<ImportJs required={true} optional1={true} optional2={true} />
+
+<!-- valid: -->
+<ImportTs required={'a'} />
+<ImportTs required={'a'} optional1={'b'} optional2={'c'} />
+<ImportTs required={'a'} optional1={'b'} optional2={undefined} />
+<ImportJs required={'a'} />
+<ImportJs required={'a'} optional1={'b'} optional2={'c'} />
+<ImportJs required={'a'} optional1={'b'} optional2={undefined} />

packages/language-server/test/plugins/typescript/testfiles/diagnostics/checkJs/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "strict": true,
+        "checkJs": true,
+        /**
+          This is actually not needed, but makes the tests faster
+          because TS does not look up other types.
+        */
+        "types": ["svelte"]
+    }
+}

packages/language-server/test/plugins/typescript/testfiles/diagnostics/props_to-import-js.svelte

@@ -0,0 +1,11 @@
+<script>
+  /**
+   * @type {string}
+   */
+  export let required;
+  export let optional1 = '';
+  /**
+   * @type {string | undefined}
+   */
+  export let optional2 = undefined;
+</script>

packages/language-server/test/plugins/typescript/testfiles/diagnostics/props_to-import-ts.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    export let required: string;
+    export let optional1 = '';
+    export let optional2: string | undefined = undefined;
+</script>

packages/svelte2tsx/index.d.ts

@@ -20,10 +20,6 @@ export default function svelte2tsx(
          * Path of the file
          */
         filename?: string;
-        /**
-         * Whether or not TS strictMode is enabled
-         */
-        strictMode?: boolean;
         /**
          * If the given file uses TypeScript inside script.
          * This cannot be inferred from `svelte2tsx` by looking

packages/svelte2tsx/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelte2tsx",
-    "version": "0.1.4",
+    "version": "0.2.0",
     "description": "Convert Svelte components to TSX for type checking",
     "author": "David Pershouse",
     "license": "MIT",