svelte2tsx 0.5.0 → 0.5.1

package/index.js

@@ -2757,25 +2757,25 @@ function handleRawHtml$1(htmlx, str, rawBlock) {
 }
 
 /**
- * style:xx         --->  __sveltets_1_ensureType(String, xx);
- * style:xx={yy}    --->  __sveltets_1_ensureType(String, yy);
- * style:xx="yy"    --->  __sveltets_1_ensureType(String, "yy");
- * style:xx="a{b}"  --->  __sveltets_1_ensureType(String, `a${b}`);
+ * style:xx         --->  __sveltets_1_ensureType(String, Number, xx);
+ * style:xx={yy}    --->  __sveltets_1_ensureType(String, Number, yy);
+ * style:xx="yy"    --->  __sveltets_1_ensureType(String, Number, "yy");
+ * style:xx="a{b}"  --->  __sveltets_1_ensureType(String, Number, `a${b}`);
  */
 function handleStyleDirective$1(str, style) {
     const htmlx = str.original;
     if (style.value === true || style.value.length === 0) {
-        str.overwrite(style.start, htmlx.indexOf(':', style.start) + 1, '{...__sveltets_1_ensureType(String, ');
+        str.overwrite(style.start, htmlx.indexOf(':', style.start) + 1, '{...__sveltets_1_ensureType(String, Number, ');
         str.appendLeft(style.end, ')}');
         return;
     }
     if (style.value.length > 1) {
-        buildTemplateString(style, str, htmlx, '{...__sveltets_1_ensureType(String, `', '`)}', style.start);
+        buildTemplateString(style, str, htmlx, '{...__sveltets_1_ensureType(String, Number, `', '`)}', style.start);
         return;
     }
     const styleVal = style.value[0];
     if (styleVal.type === 'Text') {
-        str.overwrite(style.start, styleVal.start, '{...__sveltets_1_ensureType(String, "');
+        str.overwrite(style.start, styleVal.start, '{...__sveltets_1_ensureType(String, Number, "');
         if (styleVal.end === style.end) {
             str.appendLeft(style.end, '")}');
         }
@@ -2785,7 +2785,7 @@ function handleStyleDirective$1(str, style) {
     }
     else {
         // MustacheTag
-        str.overwrite(style.start, styleVal.start + 1, '{...__sveltets_1_ensureType(String, ');
+        str.overwrite(style.start, styleVal.start + 1, '{...__sveltets_1_ensureType(String, Number, ');
         str.overwrite(styleVal.end - 1, style.end, ')}');
     }
 }
@@ -3596,23 +3596,27 @@ class InlineComponent {
             this.addNameConstDeclaration = () => (this.startTransformation[0] = `{ const ${this._name} = __sveltets_2_createComponentAny({`);
             this.startEndTransformation.push('});');
         }
-        else if (this.node.name === 'svelte:component') {
-            this._name = '$$_sveltecomponent' + this.computeDepth();
-            this.startTransformation.push(`{ const ${this._name}_ = new `, [this.node.expression.start, this.node.expression.end], '({ target: __sveltets_2_any(), props: {');
+        else {
+            const isSvelteComponentTag = this.node.name === 'svelte:component';
             // We don't know if the thing we use to create the Svelte component with
             // is actually a proper Svelte component, which would lead to errors
             // when accessing things like $$prop_def. Therefore widen the type
             // here, falling back to a any-typed component to ensure the user doesn't
             // get weird follup-errors all over the place. The diagnostic error
-            // should still error on the new X() part.
-            this.startEndTransformation.push(`}});${this._name}_;`);
-            this.addNameConstDeclaration = () => (this.startEndTransformation[0] = `}});const ${this._name} = __sveltets_2_typeAsComponent(${this._name}_);`);
-        }
-        else {
-            this._name = '$$_' + this.node.name + this.computeDepth();
-            const nodeNameStart = this.str.original.indexOf(this.node.name, this.node.start);
-            this.startTransformation.push('{ new ', [nodeNameStart, nodeNameStart + this.node.name.length], '({ target: __sveltets_2_any(), props: {');
-            this.addNameConstDeclaration = () => (this.startTransformation[0] = `{ const ${this._name} = new `);
+            // will be on the __sveltets_2_ensureComponent part, giving a more helpful message
+            this._name =
+                '$$_' +
+                    (isSvelteComponentTag ? 'sveltecomponent' : this.node.name) +
+                    this.computeDepth();
+            const constructorName = this._name + 'C';
+            const nodeNameStart = isSvelteComponentTag
+                ? this.node.expression.start
+                : this.str.original.indexOf(this.node.name, this.node.start);
+            const nodeNameEnd = isSvelteComponentTag
+                ? this.node.expression.end
+                : nodeNameStart + this.node.name.length;
+            this.startTransformation.push(`{ const ${constructorName} = __sveltets_2_ensureComponent(`, [nodeNameStart, nodeNameEnd], `); new ${constructorName}({ target: __sveltets_2_any(), props: {`);
+            this.addNameConstDeclaration = () => (this.startTransformation[2] = `); const ${this._name} = new ${constructorName}({ target: __sveltets_2_any(), props: {`);
             this.startEndTransformation.push('}});');
         }
     }
@@ -3792,7 +3796,18 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
         return;
     }
     const addAttribute = element instanceof Element
-        ? (name, value) => element.addAttribute(name, value)
+        ? (name, value) => {
+            if (attr.name.startsWith('data-')) {
+                // any attribute prefixed with data- is valid, but we can't
+                // type that statically, so we need this workaround
+                name.unshift('...__sveltets_2_empty({');
+                if (!value) {
+                    value = ['__sveltets_2_any()'];
+                }
+                value.push('})');
+            }
+            element.addAttribute(name, value);
+        }
         : (name, value) => {
             if (attr.name.startsWith('--') && attr.value !== true) {
                 // CSS custom properties are not part of the props
@@ -3831,7 +3846,7 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
         return;
     }
     else {
-        let name = element instanceof Element && attr.value === true
+        let name = element instanceof Element && parent.type === 'Element'
             ? transformAttributeCase(attr.name)
             : attr.name;
         // surround with quotes because dashes or other invalid property characters could be part of the name
@@ -4160,10 +4175,9 @@ function handleEventHandler(str, attr, element) {
     // If there's no expression, it's event bubbling (on:click)
     const nameEnd = nameStart + attr.name.length;
     if (element instanceof Element) {
-        // For better mapping
-        str.overwrite(nameStart, nameStart + 1, 'on' + str.original.charAt(nameStart), {
-            contentOnly: true
-        });
+        // Prefix with "on" for better mapping.
+        // Surround with quotes because event name could contain invalid prop chars.
+        surroundWith(str, [nameStart, nameEnd], '"on', '"');
         element.addAttribute([[nameStart, nameEnd]], attr.expression ? [[attr.expression.start, attr.expression.end]] : ['undefined']);
     }
     else {
@@ -4306,16 +4320,16 @@ function handleSpread(node, element) {
 }
 
 /**
- * style:xx         --->  __sveltets_2_ensureType(String, xx);
- * style:xx={yy}    --->  __sveltets_2_ensureType(String, yy);
- * style:xx="yy"    --->  __sveltets_2_ensureType(String, "yy");
- * style:xx="a{b}"  --->  __sveltets_2_ensureType(String, `a${b}`);
+ * style:xx         --->  __sveltets_2_ensureType(String, Number, xx);
+ * style:xx={yy}    --->  __sveltets_2_ensureType(String, Number, yy);
+ * style:xx="yy"    --->  __sveltets_2_ensureType(String, Number, "yy");
+ * style:xx="a{b}"  --->  __sveltets_2_ensureType(String, Number, `a${b}`);
  */
 function handleStyleDirective(str, style, element) {
     const htmlx = str.original;
     if (style.value === true || style.value.length === 0) {
         element.appendToStartEnd([
-            '__sveltets_2_ensureType(String, ',
+            '__sveltets_2_ensureType(String, Number, ',
             [htmlx.indexOf(':', style.start) + 1, style.end],
             ');'
         ]);
@@ -4337,7 +4351,11 @@ function handleStyleDirective(str, style, element) {
                 str.appendRight(n.start, '$');
             }
         }
-        element.appendToStartEnd(['__sveltets_2_ensureType(String, `', [start, end], '`);']);
+        element.appendToStartEnd([
+            '__sveltets_2_ensureType(String, Number, `',
+            [start, end],
+            '`);'
+        ]);
         return;
     }
     const styleVal = style.value[0];
@@ -4346,14 +4364,14 @@ function handleStyleDirective(str, style, element) {
             ? str.original[styleVal.start - 1]
             : '"';
         element.appendToStartEnd([
-            `__sveltets_2_ensureType(String, ${quote}`,
+            `__sveltets_2_ensureType(String, Number, ${quote}`,
             [start, end],
             `${quote});`
         ]);
     }
     else {
         // MustacheTag
-        element.appendToStartEnd(['__sveltets_2_ensureType(String, ', [start, end], ');']);
+        element.appendToStartEnd(['__sveltets_2_ensureType(String, Number, ', [start, end], ');']);
     }
 }
 

package/index.mjs

@@ -2727,25 +2727,25 @@ function handleRawHtml$1(htmlx, str, rawBlock) {
 }
 
 /**
- * style:xx         --->  __sveltets_1_ensureType(String, xx);
- * style:xx={yy}    --->  __sveltets_1_ensureType(String, yy);
- * style:xx="yy"    --->  __sveltets_1_ensureType(String, "yy");
- * style:xx="a{b}"  --->  __sveltets_1_ensureType(String, `a${b}`);
+ * style:xx         --->  __sveltets_1_ensureType(String, Number, xx);
+ * style:xx={yy}    --->  __sveltets_1_ensureType(String, Number, yy);
+ * style:xx="yy"    --->  __sveltets_1_ensureType(String, Number, "yy");
+ * style:xx="a{b}"  --->  __sveltets_1_ensureType(String, Number, `a${b}`);
  */
 function handleStyleDirective$1(str, style) {
     const htmlx = str.original;
     if (style.value === true || style.value.length === 0) {
-        str.overwrite(style.start, htmlx.indexOf(':', style.start) + 1, '{...__sveltets_1_ensureType(String, ');
+        str.overwrite(style.start, htmlx.indexOf(':', style.start) + 1, '{...__sveltets_1_ensureType(String, Number, ');
         str.appendLeft(style.end, ')}');
         return;
     }
     if (style.value.length > 1) {
-        buildTemplateString(style, str, htmlx, '{...__sveltets_1_ensureType(String, `', '`)}', style.start);
+        buildTemplateString(style, str, htmlx, '{...__sveltets_1_ensureType(String, Number, `', '`)}', style.start);
         return;
     }
     const styleVal = style.value[0];
     if (styleVal.type === 'Text') {
-        str.overwrite(style.start, styleVal.start, '{...__sveltets_1_ensureType(String, "');
+        str.overwrite(style.start, styleVal.start, '{...__sveltets_1_ensureType(String, Number, "');
         if (styleVal.end === style.end) {
             str.appendLeft(style.end, '")}');
         }
@@ -2755,7 +2755,7 @@ function handleStyleDirective$1(str, style) {
     }
     else {
         // MustacheTag
-        str.overwrite(style.start, styleVal.start + 1, '{...__sveltets_1_ensureType(String, ');
+        str.overwrite(style.start, styleVal.start + 1, '{...__sveltets_1_ensureType(String, Number, ');
         str.overwrite(styleVal.end - 1, style.end, ')}');
     }
 }
@@ -3566,23 +3566,27 @@ class InlineComponent {
             this.addNameConstDeclaration = () => (this.startTransformation[0] = `{ const ${this._name} = __sveltets_2_createComponentAny({`);
             this.startEndTransformation.push('});');
         }
-        else if (this.node.name === 'svelte:component') {
-            this._name = '$$_sveltecomponent' + this.computeDepth();
-            this.startTransformation.push(`{ const ${this._name}_ = new `, [this.node.expression.start, this.node.expression.end], '({ target: __sveltets_2_any(), props: {');
+        else {
+            const isSvelteComponentTag = this.node.name === 'svelte:component';
             // We don't know if the thing we use to create the Svelte component with
             // is actually a proper Svelte component, which would lead to errors
             // when accessing things like $$prop_def. Therefore widen the type
             // here, falling back to a any-typed component to ensure the user doesn't
             // get weird follup-errors all over the place. The diagnostic error
-            // should still error on the new X() part.
-            this.startEndTransformation.push(`}});${this._name}_;`);
-            this.addNameConstDeclaration = () => (this.startEndTransformation[0] = `}});const ${this._name} = __sveltets_2_typeAsComponent(${this._name}_);`);
-        }
-        else {
-            this._name = '$$_' + this.node.name + this.computeDepth();
-            const nodeNameStart = this.str.original.indexOf(this.node.name, this.node.start);
-            this.startTransformation.push('{ new ', [nodeNameStart, nodeNameStart + this.node.name.length], '({ target: __sveltets_2_any(), props: {');
-            this.addNameConstDeclaration = () => (this.startTransformation[0] = `{ const ${this._name} = new `);
+            // will be on the __sveltets_2_ensureComponent part, giving a more helpful message
+            this._name =
+                '$$_' +
+                    (isSvelteComponentTag ? 'sveltecomponent' : this.node.name) +
+                    this.computeDepth();
+            const constructorName = this._name + 'C';
+            const nodeNameStart = isSvelteComponentTag
+                ? this.node.expression.start
+                : this.str.original.indexOf(this.node.name, this.node.start);
+            const nodeNameEnd = isSvelteComponentTag
+                ? this.node.expression.end
+                : nodeNameStart + this.node.name.length;
+            this.startTransformation.push(`{ const ${constructorName} = __sveltets_2_ensureComponent(`, [nodeNameStart, nodeNameEnd], `); new ${constructorName}({ target: __sveltets_2_any(), props: {`);
+            this.addNameConstDeclaration = () => (this.startTransformation[2] = `); const ${this._name} = new ${constructorName}({ target: __sveltets_2_any(), props: {`);
             this.startEndTransformation.push('}});');
         }
     }
@@ -3762,7 +3766,18 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
         return;
     }
     const addAttribute = element instanceof Element
-        ? (name, value) => element.addAttribute(name, value)
+        ? (name, value) => {
+            if (attr.name.startsWith('data-')) {
+                // any attribute prefixed with data- is valid, but we can't
+                // type that statically, so we need this workaround
+                name.unshift('...__sveltets_2_empty({');
+                if (!value) {
+                    value = ['__sveltets_2_any()'];
+                }
+                value.push('})');
+            }
+            element.addAttribute(name, value);
+        }
         : (name, value) => {
             if (attr.name.startsWith('--') && attr.value !== true) {
                 // CSS custom properties are not part of the props
@@ -3801,7 +3816,7 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
         return;
     }
     else {
-        let name = element instanceof Element && attr.value === true
+        let name = element instanceof Element && parent.type === 'Element'
             ? transformAttributeCase(attr.name)
             : attr.name;
         // surround with quotes because dashes or other invalid property characters could be part of the name
@@ -4130,10 +4145,9 @@ function handleEventHandler(str, attr, element) {
     // If there's no expression, it's event bubbling (on:click)
     const nameEnd = nameStart + attr.name.length;
     if (element instanceof Element) {
-        // For better mapping
-        str.overwrite(nameStart, nameStart + 1, 'on' + str.original.charAt(nameStart), {
-            contentOnly: true
-        });
+        // Prefix with "on" for better mapping.
+        // Surround with quotes because event name could contain invalid prop chars.
+        surroundWith(str, [nameStart, nameEnd], '"on', '"');
         element.addAttribute([[nameStart, nameEnd]], attr.expression ? [[attr.expression.start, attr.expression.end]] : ['undefined']);
     }
     else {
@@ -4276,16 +4290,16 @@ function handleSpread(node, element) {
 }
 
 /**
- * style:xx         --->  __sveltets_2_ensureType(String, xx);
- * style:xx={yy}    --->  __sveltets_2_ensureType(String, yy);
- * style:xx="yy"    --->  __sveltets_2_ensureType(String, "yy");
- * style:xx="a{b}"  --->  __sveltets_2_ensureType(String, `a${b}`);
+ * style:xx         --->  __sveltets_2_ensureType(String, Number, xx);
+ * style:xx={yy}    --->  __sveltets_2_ensureType(String, Number, yy);
+ * style:xx="yy"    --->  __sveltets_2_ensureType(String, Number, "yy");
+ * style:xx="a{b}"  --->  __sveltets_2_ensureType(String, Number, `a${b}`);
  */
 function handleStyleDirective(str, style, element) {
     const htmlx = str.original;
     if (style.value === true || style.value.length === 0) {
         element.appendToStartEnd([
-            '__sveltets_2_ensureType(String, ',
+            '__sveltets_2_ensureType(String, Number, ',
             [htmlx.indexOf(':', style.start) + 1, style.end],
             ');'
         ]);
@@ -4307,7 +4321,11 @@ function handleStyleDirective(str, style, element) {
                 str.appendRight(n.start, '$');
             }
         }
-        element.appendToStartEnd(['__sveltets_2_ensureType(String, `', [start, end], '`);']);
+        element.appendToStartEnd([
+            '__sveltets_2_ensureType(String, Number, `',
+            [start, end],
+            '`);'
+        ]);
         return;
     }
     const styleVal = style.value[0];
@@ -4316,14 +4334,14 @@ function handleStyleDirective(str, style, element) {
             ? str.original[styleVal.start - 1]
             : '"';
         element.appendToStartEnd([
-            `__sveltets_2_ensureType(String, ${quote}`,
+            `__sveltets_2_ensureType(String, Number, ${quote}`,
             [start, end],
             `${quote});`
         ]);
     }
     else {
         // MustacheTag
-        element.appendToStartEnd(['__sveltets_2_ensureType(String, ', [start, end], ');']);
+        element.appendToStartEnd(['__sveltets_2_ensureType(String, Number, ', [start, end], ');']);
     }
 }
 

package/package.json

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

package/svelte-jsx.d.ts

@@ -68,7 +68,10 @@ declare namespace svelteHTML {
   interface AriaAttributes extends svelte.JSX.AriaAttributes {}
 
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface HTMLAttributes<T extends EventTarget> extends svelte.JSX.HTMLAttributes<T> {
+  interface HTMLAttributes<T extends EventTarget> extends svelte.JSX.HTMLAttributes<T> {}
+
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface SVGAttributes<T extends EventTarget> extends svelte.JSX.SVGAttributes<T> {
     'xlink:actuate'?: string | undefined;
     'xlink:arcrole'?: string | undefined;
     'xlink:href'?: string | undefined;
@@ -83,9 +86,6 @@ declare namespace svelteHTML {
     'xmlns:xlink'?: string | undefined;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface
-  interface SVGAttributes<T extends EventTarget> extends svelte.JSX.SVGAttributes<T> {}
-
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
   interface HTMLProps<T extends EventTarget> extends HTMLAttributes<T> {}
 

package/svelte-shims.d.ts

@@ -120,6 +120,7 @@ declare function __sveltets_1_ensureAction(actionCall: SvelteActionReturnType):
 declare function __sveltets_1_ensureTransition(transitionCall: SvelteTransitionReturnType): {};
 declare function __sveltets_1_ensureFunction(expression: (e: Event & { detail?: any }) => unknown ): {};
 declare function __sveltets_1_ensureType<T>(type: AConstructorTypeOf<T>, el: T): {};
+declare function __sveltets_1_ensureType<T1, T2>(type1: AConstructorTypeOf<T1>, type2: AConstructorTypeOf<T2>, el: T1 | T2): {};
 declare function __sveltets_1_createEnsureSlot<Slots = Record<string, Record<string, any>>>(): <K1 extends keyof Slots, K2 extends keyof Slots[K1]>(k1: K1, k2: K2, val: Slots[K1][K2]) => Slots[K1][K2];
 declare function __sveltets_1_ensureRightProps<Props>(props: Props): {};
 declare function __sveltets_1_cssProp(prop: Record<string, any>): {};
@@ -222,6 +223,7 @@ declare function __sveltets_2_createCreateSlot<Slots = Record<string, Record<str
 declare function __sveltets_2_createComponentAny(props: Record<string, any>): Svelte2TsxComponent<any, any, any>;
 
 declare function __sveltets_2_any(...dummy: any[]): any;
+declare function __sveltets_2_empty(...dummy: any[]): {};
 
 declare function __sveltets_2_cssProp(prop: Record<string, any>): {};
 
@@ -252,7 +254,8 @@ type __sveltets_2_SvelteTransitionReturnType = __sveltets_2_SvelteTransitionConf
 declare function __sveltets_2_ensureTransition(transitionCall: __sveltets_2_SvelteTransitionReturnType): {};
 
 declare function __sveltets_2_ensureType<T>(type: AConstructorTypeOf<T>, el: T): {};
+declare function __sveltets_2_ensureType<T1, T2>(type1: AConstructorTypeOf<T1>, type2: AConstructorTypeOf<T2>, el: T1 | T2): {};
 
-declare function __sveltets_2_typeAsComponent<Component>(c: Component): Component extends Svelte2TsxComponent ? Component : Svelte2TsxComponent;
+declare function __sveltets_2_ensureComponent<T extends new (args: {target: any, props?: any}) => Svelte2TsxComponent<any, any, any>>(type: T): T extends never ? Svelte2TsxComponent<any, any, any> : T;
 
 declare function __sveltets_2_ensureArray<T extends ArrayLike<unknown>>(array: T): T extends ArrayLike<infer U> ? U[] : any[];