svelte2tsx 0.4.7 → 0.4.8

package/index.js

@@ -1494,6 +1494,12 @@ function surroundWithIgnoreComments(str) {
     return IGNORE_START_COMMENT + str + IGNORE_END_COMMENT;
 }
 
+/**
+ * Get the constructor type of a component node
+ * @param node The component node to infer the this type from
+ * @param thisValue If node is svelte:component, you may pass the value
+ *                  of this={..} to use that instead of the more general componentType
+ */
 function getTypeForComponent(node) {
     if (node.name === 'svelte:component' || node.name === 'svelte:self') {
         return '__sveltets_1_componentType()';
@@ -1502,6 +1508,36 @@ function getTypeForComponent(node) {
         return node.name;
     }
 }
+/**
+ * Get the instance type of a node from its constructor.
+ */
+function getInstanceTypeSimple(node, str) {
+    const instanceOf = (str) => `__sveltets_1_instanceOf(${str})`;
+    switch (node.type) {
+        case 'InlineComponent':
+            if (node.name === 'svelte:component' && node.expression) {
+                const thisVal = str.original.substring(node.expression.start, node.expression.end);
+                return `new (${thisVal})({target: __sveltets_1_any(''), props: __sveltets_1_any('')})`;
+            }
+            else if (node.name === 'svelte:component' || node.name === 'svelte:self') {
+                return instanceOf('__sveltets_1_componentType()');
+            }
+            else {
+                return `new ${node.name}({target: __sveltets_1_any(''), props: __sveltets_1_any('')})`;
+            }
+        case 'Element':
+            return instanceOf(`__sveltets_1_ctorOf(__sveltets_1_mapElementTag('${node.name}'))`);
+        case 'Body':
+            return instanceOf('HTMLBodyElement');
+        case 'Slot': // Web Components only
+            return instanceOf('HTMLSlotElement');
+    }
+}
+/**
+ * Get the instance type of a node from its constructor.
+ * If it's a component, pass in the exact props. This ensures that
+ * the component instance has the right type in case of generic prop types.
+ */
 function getInstanceType(node, originalStr, replacedPropValues = []) {
     if (node.name === 'svelte:component' || node.name === 'svelte:self') {
         return '__sveltets_1_instanceOf(__sveltets_1_componentType())';
@@ -1602,18 +1638,6 @@ function sanitizePropName(name) {
         .map((char) => (/[0-9A-Za-z$_]/.test(char) ? char : '_'))
         .join('');
 }
-function getThisType(node) {
-    switch (node.type) {
-        case 'InlineComponent':
-            return getTypeForComponent(node);
-        case 'Element':
-            return `__sveltets_1_ctorOf(__sveltets_1_mapElementTag('${node.name}'))`;
-        case 'Body':
-            return 'HTMLBodyElement';
-        case 'Slot': // Web Components only
-            return 'HTMLSlotElement';
-    }
-}
 function beforeStart(start) {
     return start - 1;
 }
@@ -1981,6 +2005,11 @@ const oneWayBindingAttributes = new Map(['clientWidth', 'clientHeight', 'offsetW
     e,
     'HTMLMediaElement'
 ])));
+/**
+ * List of all binding names that are transformed to sth like `binding = variable`.
+ * This applies to readonly bindings and the this binding.
+ */
+const assignmentBindings = new Set([...oneWayBindingAttributes.keys(), 'this']);
 /**
  * Transform bind:xxx into something that conforms to JSX
  */
@@ -2006,11 +2035,19 @@ function handleBinding(htmlx, str, attr, el) {
     ];
     //bind this
     if (attr.name === 'this' && supportsBindThis.includes(el.type)) {
-        const thisType = getThisType(el);
+        // bind:this is effectively only works bottom up - the variable is updated by the element, not
+        // the other way round. So we check if the instance is assignable to the variable.
+        // Some notes:
+        // - If the component unmounts (it's inside an if block, or svelte:component this={null},
+        //   the value becomes null, but we don't add it to the clause because it would introduce
+        //   worse DX for the 99% use case, and because null !== undefined which others might use to type the declaration.
+        // - This doesn't do a 100% correct job of infering the instance type in case someone used generics for input props.
+        //   For now it errs on the side of "no false positives" at the cost of maybe some missed type bugs
+        const thisType = getInstanceTypeSimple(el, str);
         if (thisType) {
-            str.remove(attr.start, attr.expression.start);
-            str.appendLeft(attr.expression.start, `{...__sveltets_1_ensureType(${thisType}, `);
-            str.overwrite(attr.expression.end, attr.end, ')}');
+            str.overwrite(attr.start, attr.expression.start, '{...__sveltets_1_empty(');
+            const instanceOfThisAssignment = ' = ' + surroundWithIgnoreComments(thisType) + ')}';
+            str.overwrite(attr.expression.end, attr.end, instanceOfThisAssignment);
             return;
         }
     }
@@ -4306,10 +4343,19 @@ function handleStore(node, parent, str) {
         }
         return;
     }
+    const dollar = str.original.indexOf('$', node.start);
+    // handle bindings which are transformed to assignments. These need special treatment because
+    // `(__sveltets_1_store_get(foo), foo$) = something` is syntactically invalid
+    // Therefore remove the outer commas. Note: This relies on the binding expression wrapping
+    // this statement with __sveltets_1_empty
+    if (parent.type === 'Binding' && assignmentBindings.has(parent.name)) {
+        str.overwrite(dollar, dollar + 1, '__sveltets_1_store_get(', { contentOnly: true });
+        str.prependLeft(node.end, `), $${storename}`);
+        return;
+    }
     // we change "$store" references into "(__sveltets_1_store_get(store), $store)"
     // - 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('$', node.start);
     str.overwrite(dollar, dollar + 1, '(__sveltets_1_store_get(', { contentOnly: true });
     str.prependLeft(node.end, `), $${storename})`);
 }
@@ -4718,8 +4764,12 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
         }
         // handle $store++, $store--, ++$store, --$store
         if ((ts__namespace.isPrefixUnaryExpression(parent) || ts__namespace.isPostfixUnaryExpression(parent)) &&
-            parent.operator !==
-                ts__namespace.SyntaxKind.ExclamationToken /* `!$store` does not need processing */) {
+            ![
+                ts__namespace.SyntaxKind.ExclamationToken,
+                ts__namespace.SyntaxKind.PlusToken,
+                ts__namespace.SyntaxKind.MinusToken,
+                ts__namespace.SyntaxKind.TildeToken // ~$store
+            ].includes(parent.operator) /* `!$store` etc does not need processing */) {
             let simpleOperator;
             if (parent.operator === ts__namespace.SyntaxKind.PlusPlusToken) {
                 simpleOperator = '+';

package/index.mjs

@@ -1464,6 +1464,12 @@ function surroundWithIgnoreComments(str) {
     return IGNORE_START_COMMENT + str + IGNORE_END_COMMENT;
 }
 
+/**
+ * Get the constructor type of a component node
+ * @param node The component node to infer the this type from
+ * @param thisValue If node is svelte:component, you may pass the value
+ *                  of this={..} to use that instead of the more general componentType
+ */
 function getTypeForComponent(node) {
     if (node.name === 'svelte:component' || node.name === 'svelte:self') {
         return '__sveltets_1_componentType()';
@@ -1472,6 +1478,36 @@ function getTypeForComponent(node) {
         return node.name;
     }
 }
+/**
+ * Get the instance type of a node from its constructor.
+ */
+function getInstanceTypeSimple(node, str) {
+    const instanceOf = (str) => `__sveltets_1_instanceOf(${str})`;
+    switch (node.type) {
+        case 'InlineComponent':
+            if (node.name === 'svelte:component' && node.expression) {
+                const thisVal = str.original.substring(node.expression.start, node.expression.end);
+                return `new (${thisVal})({target: __sveltets_1_any(''), props: __sveltets_1_any('')})`;
+            }
+            else if (node.name === 'svelte:component' || node.name === 'svelte:self') {
+                return instanceOf('__sveltets_1_componentType()');
+            }
+            else {
+                return `new ${node.name}({target: __sveltets_1_any(''), props: __sveltets_1_any('')})`;
+            }
+        case 'Element':
+            return instanceOf(`__sveltets_1_ctorOf(__sveltets_1_mapElementTag('${node.name}'))`);
+        case 'Body':
+            return instanceOf('HTMLBodyElement');
+        case 'Slot': // Web Components only
+            return instanceOf('HTMLSlotElement');
+    }
+}
+/**
+ * Get the instance type of a node from its constructor.
+ * If it's a component, pass in the exact props. This ensures that
+ * the component instance has the right type in case of generic prop types.
+ */
 function getInstanceType(node, originalStr, replacedPropValues = []) {
     if (node.name === 'svelte:component' || node.name === 'svelte:self') {
         return '__sveltets_1_instanceOf(__sveltets_1_componentType())';
@@ -1572,18 +1608,6 @@ function sanitizePropName(name) {
         .map((char) => (/[0-9A-Za-z$_]/.test(char) ? char : '_'))
         .join('');
 }
-function getThisType(node) {
-    switch (node.type) {
-        case 'InlineComponent':
-            return getTypeForComponent(node);
-        case 'Element':
-            return `__sveltets_1_ctorOf(__sveltets_1_mapElementTag('${node.name}'))`;
-        case 'Body':
-            return 'HTMLBodyElement';
-        case 'Slot': // Web Components only
-            return 'HTMLSlotElement';
-    }
-}
 function beforeStart(start) {
     return start - 1;
 }
@@ -1951,6 +1975,11 @@ const oneWayBindingAttributes = new Map(['clientWidth', 'clientHeight', 'offsetW
     e,
     'HTMLMediaElement'
 ])));
+/**
+ * List of all binding names that are transformed to sth like `binding = variable`.
+ * This applies to readonly bindings and the this binding.
+ */
+const assignmentBindings = new Set([...oneWayBindingAttributes.keys(), 'this']);
 /**
  * Transform bind:xxx into something that conforms to JSX
  */
@@ -1976,11 +2005,19 @@ function handleBinding(htmlx, str, attr, el) {
     ];
     //bind this
     if (attr.name === 'this' && supportsBindThis.includes(el.type)) {
-        const thisType = getThisType(el);
+        // bind:this is effectively only works bottom up - the variable is updated by the element, not
+        // the other way round. So we check if the instance is assignable to the variable.
+        // Some notes:
+        // - If the component unmounts (it's inside an if block, or svelte:component this={null},
+        //   the value becomes null, but we don't add it to the clause because it would introduce
+        //   worse DX for the 99% use case, and because null !== undefined which others might use to type the declaration.
+        // - This doesn't do a 100% correct job of infering the instance type in case someone used generics for input props.
+        //   For now it errs on the side of "no false positives" at the cost of maybe some missed type bugs
+        const thisType = getInstanceTypeSimple(el, str);
         if (thisType) {
-            str.remove(attr.start, attr.expression.start);
-            str.appendLeft(attr.expression.start, `{...__sveltets_1_ensureType(${thisType}, `);
-            str.overwrite(attr.expression.end, attr.end, ')}');
+            str.overwrite(attr.start, attr.expression.start, '{...__sveltets_1_empty(');
+            const instanceOfThisAssignment = ' = ' + surroundWithIgnoreComments(thisType) + ')}';
+            str.overwrite(attr.expression.end, attr.end, instanceOfThisAssignment);
             return;
         }
     }
@@ -4276,10 +4313,19 @@ function handleStore(node, parent, str) {
         }
         return;
     }
+    const dollar = str.original.indexOf('$', node.start);
+    // handle bindings which are transformed to assignments. These need special treatment because
+    // `(__sveltets_1_store_get(foo), foo$) = something` is syntactically invalid
+    // Therefore remove the outer commas. Note: This relies on the binding expression wrapping
+    // this statement with __sveltets_1_empty
+    if (parent.type === 'Binding' && assignmentBindings.has(parent.name)) {
+        str.overwrite(dollar, dollar + 1, '__sveltets_1_store_get(', { contentOnly: true });
+        str.prependLeft(node.end, `), $${storename}`);
+        return;
+    }
     // we change "$store" references into "(__sveltets_1_store_get(store), $store)"
     // - 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('$', node.start);
     str.overwrite(dollar, dollar + 1, '(__sveltets_1_store_get(', { contentOnly: true });
     str.prependLeft(node.end, `), $${storename})`);
 }
@@ -4688,8 +4734,12 @@ function processInstanceScriptContent(str, script, events, implicitStoreValues,
         }
         // handle $store++, $store--, ++$store, --$store
         if ((ts.isPrefixUnaryExpression(parent) || ts.isPostfixUnaryExpression(parent)) &&
-            parent.operator !==
-                ts.SyntaxKind.ExclamationToken /* `!$store` does not need processing */) {
+            ![
+                ts.SyntaxKind.ExclamationToken,
+                ts.SyntaxKind.PlusToken,
+                ts.SyntaxKind.MinusToken,
+                ts.SyntaxKind.TildeToken // ~$store
+            ].includes(parent.operator) /* `!$store` etc does not need processing */) {
             let simpleOperator;
             if (parent.operator === ts.SyntaxKind.PlusPlusToken) {
                 simpleOperator = '+';

package/package.json

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

package/svelte-jsx.d.ts

@@ -59,11 +59,6 @@ declare namespace svelte.JSX {
     type TransitionEventHandler<T extends EventTarget> = EventHandler<TransitionEvent, T>;
     type MessageEventHandler<T extends EventTarget> = EventHandler<MessageEvent, T>;
 
-    type ClassNameBase = boolean | string | number | void | null;
-    type ClassName = string | Array<ClassNameBase | ClassNameBase[]> | {
-      [key: string]: boolean;
-    }
-
     // See CSS 3 CSS-wide keywords https://www.w3.org/TR/css3-values/#common-keywords
     // See CSS 3 Explicit Defaulting https://www.w3.org/TR/css-cascade-3/#defaulting-keywords
     // "all CSS properties can accept these values"
@@ -414,11 +409,9 @@ declare namespace svelte.JSX {
     }
 
     interface HTMLAttributes<T extends EventTarget> extends AriaAttributes, DOMAttributes<T> {
-      // jsx-dom-specific Attributes
-      class?: ClassName | undefined;
-      dataset?: object | undefined; // eslint-disable-line
-
       // Standard HTML Attributes
+      class?: string | undefined;
+      dataset?: object | undefined; // eslint-disable-line
       accept?: string | undefined;
       acceptcharset?: string | undefined;
       accesskey?: string | undefined;
@@ -441,7 +434,6 @@ declare namespace svelte.JSX {
       checked?: boolean | undefined;
       cite?: string | undefined;
       classid?: string | undefined;
-      classname?: ClassName | undefined;
       cols?: number | undefined;
       colspan?: number | undefined;
       content?: string | undefined;

package/svelte-shims.d.ts

@@ -55,7 +55,7 @@ interface Svelte2TsxComponentConstructorParameters<Props extends {}> {
     /**
      * An HTMLElement to render to. This option is required.
      */
-    target: Element;
+    target: Element | ShadowRoot;
     /**
      * A child of `target` to render the component immediately before.
      */
@@ -160,7 +160,7 @@ declare function __sveltets_1_with_any_event<Props = {}, Events = {}, Slots = {}
 
 declare function __sveltets_1_store_get<T = any>(store: SvelteStore<T>): T
 declare function __sveltets_1_any(dummy: any): any;
-declare function __sveltets_1_empty(dummy: any): {};
+declare function __sveltets_1_empty(...dummy: any[]): {};
 declare function __sveltets_1_componentType(): AConstructorTypeOf<Svelte2TsxComponent<any, any, any>>
 declare function __sveltets_1_invalidate<T>(getValue: () => T): T
 
@@ -204,9 +204,9 @@ declare function __sveltets_1_awaitThen<T>(
     onrejected?: (value: T extends PromiseLike<any> ? any : never) => any
 ): any;
 
-declare function __sveltets_1_each<T>(
-    array: ArrayLike<T>,
-    callbackfn: (value: T, index: number) => any
+declare function __sveltets_1_each<T extends ArrayLike<unknown>>(
+    array: T,
+    callbackfn: (value: T extends ArrayLike<infer U> ? U : never, index: number) => any
 ): any;
 
 declare function __sveltets_1_createSvelte2TsxComponent<Props, Events, Slots>(