svelte2tsx 0.4.12 → 0.4.13

package/index.js

@@ -4151,6 +4151,12 @@ class SlotHandler {
         }
         return resolved;
     }
+    /**
+     * Returns a string which expresses the given identifier unpacked to
+     * the top level in order to express the slot types correctly later on.
+     *
+     * Example: {#each items as item} ---> __sveltets_1_unwrapArr(items)
+     */
     getResolveExpressionStr(identifierDef, scope, initExpression) {
         const { name } = identifierDef;
         const owner = scope.getOwner(name);
@@ -4219,6 +4225,10 @@ class SlotHandler {
             slotName
         }));
     }
+    /**
+     * Resolves the slot expression to a string that can be used
+     * in the props-object in the return type of the render function
+     */
     resolveExpression(expression, scope) {
         let resolved = this.resolvedExpression.get(expression);
         if (resolved) {
@@ -4279,6 +4289,12 @@ class SlotHandler {
             if (attr.name == 'name') {
                 continue;
             }
+            if (attr.type === 'Spread') {
+                const rawName = attr.expression.name;
+                const init = scope.getInit(rawName);
+                const name = init ? this.resolved.get(init) : rawName;
+                attributes.set(`__spread__${name}`, name);
+            }
             if (!((_a = attr.value) === null || _a === void 0 ? void 0 : _a.length)) {
                 continue;
             }
@@ -4714,6 +4730,25 @@ class Generics {
     }
 }
 
+/**
+ * move imports to top of script so they appear outside our render function
+ */
+function handleImportDeclaration(node, str, astOffset, scriptStart) {
+    var _a;
+    const comments = (_a = ts__default['default'].getLeadingCommentRanges(node.getFullText(), 0)) !== null && _a !== void 0 ? _a : [];
+    for (const comment of comments) {
+        const commentEnd = node.pos + comment.end + astOffset;
+        str.move(node.pos + comment.pos + astOffset, commentEnd, scriptStart + 1);
+        if (comment.hasTrailingNewLine) {
+            str.overwrite(commentEnd - 1, commentEnd, str.original[commentEnd - 1] + '\n');
+        }
+    }
+    str.move(node.getStart() + astOffset, node.end + astOffset, scriptStart + 1);
+    //add in a \n
+    const originalEndChar = str.original[node.end + astOffset - 1];
+    str.overwrite(node.end + astOffset - 1, node.end + astOffset, originalEndChar + '\n');
+}
+
 function processInstanceScriptContent(str, script, events, implicitStoreValues, mode) {
     const htmlx = str.original;
     const scriptContent = htmlx.substring(script.content.start, script.content.end);
@@ -4813,7 +4848,12 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
         // - in order to get ts errors if store is not assignable to SvelteStore
         // - use $store variable defined above to get ts flow control
         const dollar = str.original.indexOf('$', ident.getStart() + astOffset);
-        const getPrefix = isSafeToPrefixWithSemicolon(ident) ? ';' : '';
+        const getPrefix = isSafeToPrefixWithSemicolon(ident)
+            ? ';'
+            : ts__namespace.isShorthandPropertyAssignment(parent)
+                ? // { $store } --> { $store: __sveltets_1_store_get(..)}
+                    ident.text + ': '
+                : '';
         str.overwrite(dollar, dollar + 1, getPrefix + '(__sveltets_1_store_get(');
         str.prependLeft(ident.end + astOffset, `), $${storename})`);
     };
@@ -4909,11 +4949,7 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
             exportedNames.handleExportDeclaration(node);
         }
         if (ts__namespace.isImportDeclaration(node)) {
-            //move imports to top of script so they appear outside our render function
-            str.move(node.getStart() + astOffset, node.end + astOffset, script.start + 1);
-            //add in a \n
-            const originalEndChar = str.original[node.end + astOffset - 1];
-            str.overwrite(node.end + astOffset - 1, node.end + astOffset, originalEndChar + '\n');
+            handleImportDeclaration(node, str, astOffset, script.start);
             // Check if import is the event dispatcher
             events.checkIfImportIsEventDispatcher(node);
         }
@@ -5261,7 +5297,9 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
             Array.from(slots.entries())
                 .map(([name, attrs]) => {
                 const attrsAsString = Array.from(attrs.entries())
-                    .map(([exportName, expr]) => `${exportName}:${expr}`)
+                    .map(([exportName, expr]) => exportName.startsWith('__spread__')
+                    ? `...${expr}`
+                    : `${exportName}:${expr}`)
                     .join(', ');
                 return `'${name}': {${attrsAsString}}`;
             })

package/index.mjs

@@ -4121,6 +4121,12 @@ class SlotHandler {
         }
         return resolved;
     }
+    /**
+     * Returns a string which expresses the given identifier unpacked to
+     * the top level in order to express the slot types correctly later on.
+     *
+     * Example: {#each items as item} ---> __sveltets_1_unwrapArr(items)
+     */
     getResolveExpressionStr(identifierDef, scope, initExpression) {
         const { name } = identifierDef;
         const owner = scope.getOwner(name);
@@ -4189,6 +4195,10 @@ class SlotHandler {
             slotName
         }));
     }
+    /**
+     * Resolves the slot expression to a string that can be used
+     * in the props-object in the return type of the render function
+     */
     resolveExpression(expression, scope) {
         let resolved = this.resolvedExpression.get(expression);
         if (resolved) {
@@ -4249,6 +4259,12 @@ class SlotHandler {
             if (attr.name == 'name') {
                 continue;
             }
+            if (attr.type === 'Spread') {
+                const rawName = attr.expression.name;
+                const init = scope.getInit(rawName);
+                const name = init ? this.resolved.get(init) : rawName;
+                attributes.set(`__spread__${name}`, name);
+            }
             if (!((_a = attr.value) === null || _a === void 0 ? void 0 : _a.length)) {
                 continue;
             }
@@ -4684,6 +4700,25 @@ class Generics {
     }
 }
 
+/**
+ * move imports to top of script so they appear outside our render function
+ */
+function handleImportDeclaration(node, str, astOffset, scriptStart) {
+    var _a;
+    const comments = (_a = ts__default.getLeadingCommentRanges(node.getFullText(), 0)) !== null && _a !== void 0 ? _a : [];
+    for (const comment of comments) {
+        const commentEnd = node.pos + comment.end + astOffset;
+        str.move(node.pos + comment.pos + astOffset, commentEnd, scriptStart + 1);
+        if (comment.hasTrailingNewLine) {
+            str.overwrite(commentEnd - 1, commentEnd, str.original[commentEnd - 1] + '\n');
+        }
+    }
+    str.move(node.getStart() + astOffset, node.end + astOffset, scriptStart + 1);
+    //add in a \n
+    const originalEndChar = str.original[node.end + astOffset - 1];
+    str.overwrite(node.end + astOffset - 1, node.end + astOffset, originalEndChar + '\n');
+}
+
 function processInstanceScriptContent(str, script, events, implicitStoreValues, mode) {
     const htmlx = str.original;
     const scriptContent = htmlx.substring(script.content.start, script.content.end);
@@ -4783,7 +4818,12 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
         // - in order to get ts errors if store is not assignable to SvelteStore
         // - use $store variable defined above to get ts flow control
         const dollar = str.original.indexOf('$', ident.getStart() + astOffset);
-        const getPrefix = isSafeToPrefixWithSemicolon(ident) ? ';' : '';
+        const getPrefix = isSafeToPrefixWithSemicolon(ident)
+            ? ';'
+            : ts.isShorthandPropertyAssignment(parent)
+                ? // { $store } --> { $store: __sveltets_1_store_get(..)}
+                    ident.text + ': '
+                : '';
         str.overwrite(dollar, dollar + 1, getPrefix + '(__sveltets_1_store_get(');
         str.prependLeft(ident.end + astOffset, `), $${storename})`);
     };
@@ -4879,11 +4919,7 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
             exportedNames.handleExportDeclaration(node);
         }
         if (ts.isImportDeclaration(node)) {
-            //move imports to top of script so they appear outside our render function
-            str.move(node.getStart() + astOffset, node.end + astOffset, script.start + 1);
-            //add in a \n
-            const originalEndChar = str.original[node.end + astOffset - 1];
-            str.overwrite(node.end + astOffset - 1, node.end + astOffset, originalEndChar + '\n');
+            handleImportDeclaration(node, str, astOffset, script.start);
             // Check if import is the event dispatcher
             events.checkIfImportIsEventDispatcher(node);
         }
@@ -5231,7 +5267,9 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
             Array.from(slots.entries())
                 .map(([name, attrs]) => {
                 const attrsAsString = Array.from(attrs.entries())
-                    .map(([exportName, expr]) => `${exportName}:${expr}`)
+                    .map(([exportName, expr]) => exportName.startsWith('__spread__')
+                    ? `...${expr}`
+                    : `${exportName}:${expr}`)
                     .join(', ');
                 return `'${name}': {${attrsAsString}}`;
             })

package/package.json

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

package/svelte-jsx.d.ts

@@ -100,7 +100,7 @@ declare namespace svelte.JSX {
       onchange?: FormEventHandler<T> | undefined | null;
       oninput?: FormEventHandler<T> | undefined | null;
       onreset?: FormEventHandler<T> | undefined | null;
-      onsubmit?: FormEventHandler<T> | undefined | null;
+      onsubmit?: EventHandler<SubmitEvent, T> | undefined | null;
       oninvalid?: EventHandler<Event, T> | undefined | null;
       onbeforeinput?: EventHandler<InputEvent, T> | undefined | null;
 
@@ -557,7 +557,7 @@ declare namespace svelte.JSX {
       title?: string | undefined | null;
       type?: string | undefined | null;
       usemap?: string | undefined | null;
-      value?: string | string[] | number | undefined | null;
+      value?: any | undefined | null;
       /**
        * a value between 0 and 1
       */
@@ -581,6 +581,7 @@ declare namespace svelte.JSX {
       autocorrect?: string | undefined | null;
       autosave?: string | undefined | null;
       color?: string | undefined | null;
+      controlslist?: 'nodownload' | 'nofullscreen' | 'noplaybackrate' | 'noremoteplayback';
       itemprop?: string | undefined | null;
       itemscope?: boolean | undefined | null;
       itemtype?: string | undefined | null;
@@ -873,14 +874,6 @@ declare namespace svelte.JSX {
     // eslint-disable-next-line @typescript-eslint/no-empty-interface
     interface SVGProps<T extends EventTarget> extends SVGAttributes<T> {}
 
-    interface SvelteOptionProps extends HTMLProps<HTMLOptionElement> {
-        value?: any | undefined | null;
-    }
-
-    interface SvelteSelectProps extends HTMLProps<HTMLSelectElement> {
-      value?: any | undefined | null;
-    }
-
     interface SvelteInputProps extends HTMLProps<HTMLInputElement> {
       group?: any | undefined | null;
       files?: FileList | undefined | null;
@@ -1052,7 +1045,7 @@ declare namespace svelte.JSX {
       object: HTMLProps<HTMLObjectElement>;
       ol: HTMLProps<HTMLOListElement>;
       optgroup: HTMLProps<HTMLOptGroupElement>;
-      option: SvelteOptionProps;
+      option: HTMLProps<HTMLOptionElement>;
       output: HTMLProps<HTMLElement>;
       p: HTMLProps<HTMLParagraphElement>;
       param: HTMLProps<HTMLParamElement>;
@@ -1067,7 +1060,7 @@ declare namespace svelte.JSX {
       samp: HTMLProps<HTMLElement>;
       script: HTMLProps<HTMLElement>;
       section: HTMLProps<HTMLElement>;
-      select: SvelteSelectProps;
+      select: HTMLProps<HTMLSelectElement>;
       small: HTMLProps<HTMLElement>;
       source: HTMLProps<HTMLSourceElement>;
       span: HTMLProps<HTMLSpanElement>;