(fix) Optional props (#284)

* Determinate if prop is optional based on whether the variable has an initializer.

Author: PatrickG

packages/svelte2tsx/src/svelte2tsx.ts

@@ -334,6 +334,7 @@ type ExportedNames = Map<
     {
         type?: string;
         identifierText?: string;
+        required?: boolean;
     }
 >;
 
@@ -354,7 +355,7 @@ function processInstanceScriptContent(str: MagicString, script: Node): InstanceS
         ts.ScriptKind.TS,
     );
     const astOffset = script.content.start;
-    const exportedNames = new Map<string, { type?: string; identifierText?: string }>();
+    const exportedNames: ExportedNames = new Map();
 
     const implicitTopLevelNames: Map<string, number> = new Map();
     let uses$$props = false;
@@ -377,6 +378,7 @@ function processInstanceScriptContent(str: MagicString, script: Node): InstanceS
         name: ts.BindingName,
         target: ts.BindingName = null,
         type: ts.TypeNode = null,
+        required = false,
     ) => {
         if (name.kind != ts.SyntaxKind.Identifier) {
             throw Error('export source kind not supported ' + name);
@@ -388,6 +390,7 @@ function processInstanceScriptContent(str: MagicString, script: Node): InstanceS
             exportedNames.set(name.text, {
                 type: type?.getText(),
                 identifierText: (target as ts.Identifier).text,
+                required,
             });
         } else {
             exportedNames.set(name.text, {});
@@ -586,9 +589,9 @@ function processInstanceScriptContent(str: MagicString, script: Node): InstanceS
             if (ts.isVariableDeclaration(node)) {
                 if (ts.isIdentifier(node.name)) {
                     if (node.type) {
-                        addExport(node.name, node.name, node.type);
+                        addExport(node.name, node.name, node.type, !node.initializer);
                     } else {
-                        addExport(node.name);
+                        addExport(node.name, null, null, !node.initializer);
                     }
                 } else if (
                     ts.isObjectBindingPattern(node.name) ||
@@ -888,8 +891,7 @@ function createPropsStr(exportedNames: ExportedNames) {
             return `${identifier}: typeof ${key}`;
         }
 
-        const containsUndefined = /(^|\s+)undefined(\s+|$)/.test(value.type);
-        return `${identifier}${containsUndefined ? '?' : ''}: ${value.type}`;
+        return `${identifier}${value.required ? '' : '?'}: ${value.type}`;
     });
 
     return `{${returnElements.join(' , ')}} as {${returnElementsType.join(', ')}}`;
@@ -920,7 +922,7 @@ export function svelte2tsx(svelte: string, options?: { filename?: string; strict
     }
 
     //move the instance script and process the content
-    let exportedNames = new Map<string, { type?: string; identifierText?: string }>();
+    let exportedNames: ExportedNames = new Map();
     if (scriptTag) {
         //ensure it is between the module script and the rest of the template (the variables need to be declared before the jsx template)
         if (scriptTag.start != instanceScriptTarget) {

packages/svelte2tsx/test/svelte2tsx/samples/export-const/expected.tsx

@@ -3,7 +3,7 @@
      const name: string = "world";
 ;
 <></>
-return { props: {name: name} as {name: string}, slots: {} }}
+return { props: {name: name} as {name?: string}, slots: {} }}
 
 export default class {
     $$prop_def = __sveltets_partial(render().props)

packages/svelte2tsx/test/svelte2tsx/samples/export-has-type/expected.tsx

@@ -2,9 +2,10 @@
 
     interface A {}
      let a: A;
+     let b: A = {};b = __sveltets_any(b);;
 ;
 <></>
-return { props: {a: a} as {a: A}, slots: {} }}
+return { props: {a: a , b: b} as {a: A, b?: A}, slots: {} }}
 
 export default class {
     $$prop_def = __sveltets_partial(render().props)

packages/svelte2tsx/test/svelte2tsx/samples/export-has-type/input.svelte

@@ -1,4 +1,5 @@
 <script>
     interface A {}
     export let a: A;
+    export let b: A = {};
 </script>

packages/svelte2tsx/test/svelte2tsx/samples/export-js-strictMode/expected.tsx

@@ -2,9 +2,10 @@
 
      let a: number;
      let b: number | undefined;
+     let c: number = 123;c = __sveltets_any(c);;
 ;
 <></>
-return { props: {a: a , b: b} as {a: number, b?: number | undefined}, slots: {} }}
+return { props: {a: a , b: b , c: c} as {a: number, b: number | undefined, c?: number}, slots: {} }}
 
 export default class {
     $$prop_def = __sveltets_partial(render().props)

packages/svelte2tsx/test/svelte2tsx/samples/export-js-strictMode/input.svelte

@@ -1,4 +1,5 @@
 <script>
     export let a: number;
     export let b: number | undefined;
+    export let c: number = 123;
 </script>

packages/svelte2tsx/test/svelte2tsx/samples/export-ts-strictMode/expected.tsx

@@ -2,9 +2,10 @@
 
      let a: number;
      let b: number | undefined;
+     let c: number = 123;c = __sveltets_any(c);;
 ;
 <></>
-return { props: {a: a , b: b} as {a: number, b?: number | undefined}, slots: {} }}
+return { props: {a: a , b: b , c: c} as {a: number, b: number | undefined, c?: number}, slots: {} }}
 
 export default class {
     $$prop_def = render().props

packages/svelte2tsx/test/svelte2tsx/samples/export-ts-strictMode/input.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
     export let a: number;
     export let b: number | undefined;
+    export let c: number = 123;
 </script>

packages/svelte2tsx/test/svelte2tsx/samples/typed-export-with-default/expected.tsx

@@ -3,7 +3,7 @@
      let name: string | number = "world";name = __sveltets_any(name);
 ;
 <></>
-return { props: {name: name} as {name: string | number}, slots: {} }}
+return { props: {name: name} as {name?: string | number}, slots: {} }}
 
 export default class {
     $$prop_def = __sveltets_partial(render().props)