svelte2tsx 0.5.20 → 0.5.22

package/index.js

@@ -1808,9 +1808,10 @@ function handleAttribute$1(htmlx, str, attr, parent, preserveCase) {
     if (parent.type == 'Element') {
         const sapperLinkActions = ['sapper:prefetch', 'sapper:noscroll'];
         const sveltekitLinkActions = [
-            'sveltekit:prefetch',
-            'sveltekit:noscroll',
-            'sveltekit:reload'
+            'data-sveltekit-preload-code',
+            'data-sveltekit-preload-data',
+            'data-sveltekit-noscroll',
+            'data-sveltekit-reload'
         ];
         // skip Attribute shorthand, that is handled below
         if ((attr.value !== true &&
@@ -3440,6 +3441,10 @@ const voidTags = 'area,base,br,col,embed,hr,img,input,link,meta,param,source,tra
  * ```
  */
 class Element {
+    get name() {
+        this.referencedName = true;
+        return this._name;
+    }
     /**
      * @param str The MagicString instance used to manipulate the text
      * @param node The Svelte AST node that represents this element
@@ -3504,10 +3509,6 @@ class Element {
             }
         }
     }
-    get name() {
-        this.referencedName = true;
-        return this._name;
-    }
     /**
      * attribute={foo}  -->  "attribute": foo,
      * @param name Attribute name
@@ -3721,6 +3722,13 @@ class Element {
  * ```
  */
 class InlineComponent {
+    get name() {
+        if (this.addNameConstDeclaration) {
+            this.addNameConstDeclaration();
+            this.addNameConstDeclaration = undefined;
+        }
+        return this._name;
+    }
     constructor(str, node, parent) {
         this.str = str;
         this.node = node;
@@ -3759,9 +3767,14 @@ class InlineComponent {
             // 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
+            // get weird followup-errors all over the place. The diagnostic error
             // will be on the __sveltets_2_ensureComponent part, giving a more helpful message
-            this._name = '$$_' + sanitizePropName(this.node.name) + this.computeDepth();
+            // The name is reversed here so that when the component is undeclared,
+            // TypeScript won't suggest the undeclared variable to be a misspelling of the generated variable
+            this._name =
+                '$$_' +
+                    Array.from(sanitizePropName(this.node.name)).reverse().join('') +
+                    this.computeDepth();
             const constructorName = this._name + 'C';
             const nodeNameStart = isSvelteComponentTag
                 ? this.node.expression.start
@@ -3774,13 +3787,6 @@ class InlineComponent {
             this.startEndTransformation.push('}});');
         }
     }
-    get name() {
-        if (this.addNameConstDeclaration) {
-            this.addNameConstDeclaration();
-            this.addNameConstDeclaration = undefined;
-        }
-        return this._name;
-    }
     /**
      * prop={foo}  -->  "prop": foo,
      * @param name Property name
@@ -3949,7 +3955,7 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
     }
     const addAttribute = element instanceof Element
         ? (name, value) => {
-            if (attr.name.startsWith('data-')) {
+            if (attr.name.startsWith('data-') && !attr.name.startsWith('data-sveltekit-')) {
                 // any attribute prefixed with data- is valid, but we can't
                 // type that statically, so we need this workaround
                 name.unshift('...__sveltets_2_empty({');
@@ -4947,17 +4953,17 @@ function is$$EventsDeclaration(node) {
  *   - If no, track all invocations of it to get the event names
  */
 class ComponentEvents {
+    get eventsClass() {
+        return this.componentEventsInterface.isPresent()
+            ? this.componentEventsInterface
+            : this.componentEventsFromEventsMap;
+    }
     constructor(eventHandler, strictEvents, str) {
         this.strictEvents = strictEvents;
         this.str = str;
         this.componentEventsInterface = new ComponentEventsFromInterface();
         this.componentEventsFromEventsMap = new ComponentEventsFromEventsMap(eventHandler);
     }
-    get eventsClass() {
-        return this.componentEventsInterface.isPresent()
-            ? this.componentEventsInterface
-            : this.componentEventsFromEventsMap;
-    }
     /**
      * Collect state and create the API which will be part
      * of the return object of the `svelte2tsx` function.
@@ -5260,11 +5266,12 @@ class EventHandler {
         // pass-through/ bubble
         if (!node.expression) {
             if (parent.type === 'InlineComponent') {
-                this.handleEventHandlerBubble(parent, eventName);
-            }
-            else {
-                this.bubbledEvents.set(eventName, getEventDefExpressionForNonCompoent(eventName, parent));
+                if (parent.name !== 'svelte:self') {
+                    this.handleEventHandlerBubble(parent, eventName);
+                }
+                return;
             }
+            this.bubbledEvents.set(eventName, getEventDefExpressionForNonComponent(eventName, parent));
         }
     }
     handleIdentifier(node, parent, prop) {
@@ -5297,7 +5304,7 @@ class EventHandler {
         this.bubbledEvents.set(eventName, exist ? [].concat(exist, exp) : exp);
     }
 }
-function getEventDefExpressionForNonCompoent(eventName, ele) {
+function getEventDefExpressionForNonComponent(eventName, ele) {
     switch (ele.type) {
         case 'Element':
             return `__sveltets_1_mapElementEvent('${eventName}')`;
@@ -5481,13 +5488,13 @@ class ExportedNames {
     }
     createClassGetters() {
         return Array.from(this.getters)
-            .map((name) => `\n    get ${name}() { return render().getters.${name} }`)
+            .map((name) => 
+        // getters are const/classes/functions, which are always defined.
+        // We have to remove the `| undefined` from the type here because it was necessary to
+        // be added in a previous step so people are not expected to provide these as props.
+        `\n    get ${name}() { return __sveltets_2_nonNullable(this.$$prop_def.${name}) }`)
             .join('');
     }
-    createRenderFunctionGetterStr() {
-        const properties = Array.from(this.getters).map((name) => `${name}: ${name}`);
-        return `{${properties.join(', ')}}`;
-    }
     createClassAccessors() {
         const accessors = [];
         for (const value of this.exports.values()) {
@@ -5497,7 +5504,7 @@ class ExportedNames {
             accessors.push(value.identifierText);
         }
         return accessors
-            .map((name) => `\n    get ${name}() { return render().props.${name} }` +
+            .map((name) => `\n    get ${name}() { return this.$$prop_def.${name} }` +
             `\n    /**accessor*/\n    set ${name}(_) {}`)
             .join('');
     }
@@ -5605,12 +5612,16 @@ class ExportedNames {
                 this.createReturnElementsType(others).join(',') +
                 '}}');
         }
-        const dontAddTypeDef = !isTsFile ||
-            names.length === 0 ||
-            names.every(([_, value]) => !value.type && value.required);
+        if (names.length === 0) {
+            // Necessary, because {} roughly equals to any
+            return isTsFile
+                ? '{} as Record<string, never>'
+                : '/** @type {Record<string, never>} */ ({})';
+        }
+        const dontAddTypeDef = !isTsFile || names.every(([_, value]) => !value.type && value.required);
         const returnElements = this.createReturnElements(names, dontAddTypeDef);
         if (dontAddTypeDef) {
-            // No exports or only `typeof` exports -> omit the `as {...}` completely.
+            // Only `typeof` exports -> omit the `as {...}` completely.
             // If not TS, omit the types to not have a "cannot use types in jsx" error.
             return `{${returnElements.join(' , ')}}`;
         }
@@ -6899,7 +6910,6 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
             '}';
     const returnString = `\nreturn { props: ${exportedNames.createPropsStr(isTsFile)}` +
         `, slots: ${slotsAsDef}` +
-        `, getters: ${exportedNames.createRenderFunctionGetterStr()}` +
         `, events: ${events.toDefString()} }}`;
     // wrap template with callback
     if (useNewTransformation) {

package/index.mjs

@@ -1778,9 +1778,10 @@ function handleAttribute$1(htmlx, str, attr, parent, preserveCase) {
     if (parent.type == 'Element') {
         const sapperLinkActions = ['sapper:prefetch', 'sapper:noscroll'];
         const sveltekitLinkActions = [
-            'sveltekit:prefetch',
-            'sveltekit:noscroll',
-            'sveltekit:reload'
+            'data-sveltekit-preload-code',
+            'data-sveltekit-preload-data',
+            'data-sveltekit-noscroll',
+            'data-sveltekit-reload'
         ];
         // skip Attribute shorthand, that is handled below
         if ((attr.value !== true &&
@@ -3410,6 +3411,10 @@ const voidTags = 'area,base,br,col,embed,hr,img,input,link,meta,param,source,tra
  * ```
  */
 class Element {
+    get name() {
+        this.referencedName = true;
+        return this._name;
+    }
     /**
      * @param str The MagicString instance used to manipulate the text
      * @param node The Svelte AST node that represents this element
@@ -3474,10 +3479,6 @@ class Element {
             }
         }
     }
-    get name() {
-        this.referencedName = true;
-        return this._name;
-    }
     /**
      * attribute={foo}  -->  "attribute": foo,
      * @param name Attribute name
@@ -3691,6 +3692,13 @@ class Element {
  * ```
  */
 class InlineComponent {
+    get name() {
+        if (this.addNameConstDeclaration) {
+            this.addNameConstDeclaration();
+            this.addNameConstDeclaration = undefined;
+        }
+        return this._name;
+    }
     constructor(str, node, parent) {
         this.str = str;
         this.node = node;
@@ -3729,9 +3737,14 @@ class InlineComponent {
             // 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
+            // get weird followup-errors all over the place. The diagnostic error
             // will be on the __sveltets_2_ensureComponent part, giving a more helpful message
-            this._name = '$$_' + sanitizePropName(this.node.name) + this.computeDepth();
+            // The name is reversed here so that when the component is undeclared,
+            // TypeScript won't suggest the undeclared variable to be a misspelling of the generated variable
+            this._name =
+                '$$_' +
+                    Array.from(sanitizePropName(this.node.name)).reverse().join('') +
+                    this.computeDepth();
             const constructorName = this._name + 'C';
             const nodeNameStart = isSvelteComponentTag
                 ? this.node.expression.start
@@ -3744,13 +3757,6 @@ class InlineComponent {
             this.startEndTransformation.push('}});');
         }
     }
-    get name() {
-        if (this.addNameConstDeclaration) {
-            this.addNameConstDeclaration();
-            this.addNameConstDeclaration = undefined;
-        }
-        return this._name;
-    }
     /**
      * prop={foo}  -->  "prop": foo,
      * @param name Property name
@@ -3919,7 +3925,7 @@ function handleAttribute(str, attr, parent, preserveCase, element) {
     }
     const addAttribute = element instanceof Element
         ? (name, value) => {
-            if (attr.name.startsWith('data-')) {
+            if (attr.name.startsWith('data-') && !attr.name.startsWith('data-sveltekit-')) {
                 // any attribute prefixed with data- is valid, but we can't
                 // type that statically, so we need this workaround
                 name.unshift('...__sveltets_2_empty({');
@@ -4917,17 +4923,17 @@ function is$$EventsDeclaration(node) {
  *   - If no, track all invocations of it to get the event names
  */
 class ComponentEvents {
+    get eventsClass() {
+        return this.componentEventsInterface.isPresent()
+            ? this.componentEventsInterface
+            : this.componentEventsFromEventsMap;
+    }
     constructor(eventHandler, strictEvents, str) {
         this.strictEvents = strictEvents;
         this.str = str;
         this.componentEventsInterface = new ComponentEventsFromInterface();
         this.componentEventsFromEventsMap = new ComponentEventsFromEventsMap(eventHandler);
     }
-    get eventsClass() {
-        return this.componentEventsInterface.isPresent()
-            ? this.componentEventsInterface
-            : this.componentEventsFromEventsMap;
-    }
     /**
      * Collect state and create the API which will be part
      * of the return object of the `svelte2tsx` function.
@@ -5230,11 +5236,12 @@ class EventHandler {
         // pass-through/ bubble
         if (!node.expression) {
             if (parent.type === 'InlineComponent') {
-                this.handleEventHandlerBubble(parent, eventName);
-            }
-            else {
-                this.bubbledEvents.set(eventName, getEventDefExpressionForNonCompoent(eventName, parent));
+                if (parent.name !== 'svelte:self') {
+                    this.handleEventHandlerBubble(parent, eventName);
+                }
+                return;
             }
+            this.bubbledEvents.set(eventName, getEventDefExpressionForNonComponent(eventName, parent));
         }
     }
     handleIdentifier(node, parent, prop) {
@@ -5267,7 +5274,7 @@ class EventHandler {
         this.bubbledEvents.set(eventName, exist ? [].concat(exist, exp) : exp);
     }
 }
-function getEventDefExpressionForNonCompoent(eventName, ele) {
+function getEventDefExpressionForNonComponent(eventName, ele) {
     switch (ele.type) {
         case 'Element':
             return `__sveltets_1_mapElementEvent('${eventName}')`;
@@ -5451,13 +5458,13 @@ class ExportedNames {
     }
     createClassGetters() {
         return Array.from(this.getters)
-            .map((name) => `\n    get ${name}() { return render().getters.${name} }`)
+            .map((name) => 
+        // getters are const/classes/functions, which are always defined.
+        // We have to remove the `| undefined` from the type here because it was necessary to
+        // be added in a previous step so people are not expected to provide these as props.
+        `\n    get ${name}() { return __sveltets_2_nonNullable(this.$$prop_def.${name}) }`)
             .join('');
     }
-    createRenderFunctionGetterStr() {
-        const properties = Array.from(this.getters).map((name) => `${name}: ${name}`);
-        return `{${properties.join(', ')}}`;
-    }
     createClassAccessors() {
         const accessors = [];
         for (const value of this.exports.values()) {
@@ -5467,7 +5474,7 @@ class ExportedNames {
             accessors.push(value.identifierText);
         }
         return accessors
-            .map((name) => `\n    get ${name}() { return render().props.${name} }` +
+            .map((name) => `\n    get ${name}() { return this.$$prop_def.${name} }` +
             `\n    /**accessor*/\n    set ${name}(_) {}`)
             .join('');
     }
@@ -5575,12 +5582,16 @@ class ExportedNames {
                 this.createReturnElementsType(others).join(',') +
                 '}}');
         }
-        const dontAddTypeDef = !isTsFile ||
-            names.length === 0 ||
-            names.every(([_, value]) => !value.type && value.required);
+        if (names.length === 0) {
+            // Necessary, because {} roughly equals to any
+            return isTsFile
+                ? '{} as Record<string, never>'
+                : '/** @type {Record<string, never>} */ ({})';
+        }
+        const dontAddTypeDef = !isTsFile || names.every(([_, value]) => !value.type && value.required);
         const returnElements = this.createReturnElements(names, dontAddTypeDef);
         if (dontAddTypeDef) {
-            // No exports or only `typeof` exports -> omit the `as {...}` completely.
+            // Only `typeof` exports -> omit the `as {...}` completely.
             // If not TS, omit the types to not have a "cannot use types in jsx" error.
             return `{${returnElements.join(' , ')}}`;
         }
@@ -6869,7 +6880,6 @@ function createRenderFunction({ str, scriptTag, scriptDestination, slots, events
             '}';
     const returnString = `\nreturn { props: ${exportedNames.createPropsStr(isTsFile)}` +
         `, slots: ${slotsAsDef}` +
-        `, getters: ${exportedNames.createRenderFunctionGetterStr()}` +
         `, events: ${events.toDefString()} }}`;
     // wrap template with callback
     if (useNewTransformation) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte2tsx",
-  "version": "0.5.20",
+  "version": "0.5.22",
   "description": "Convert Svelte components to TSX for type checking",
   "author": "David Pershouse",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "svelte": "~3.49.0",
     "tiny-glob": "^0.2.6",
     "tslib": "^1.10.0",
-    "typescript": "^4.8.2"
+    "typescript": "^4.9.3"
   },
   "peerDependencies": {
     "svelte": "^3.24",

package/svelte-html-do-not-use.d.ts

@@ -87,7 +87,7 @@ export interface DOMAttributes<T extends EventTarget> {
 	'on:reset'?: FormEventHandler<T> | undefined | null;
 	'on:submit'?: EventHandler<Event, T> | undefined | null; // TODO make this SubmitEvent once we require TS>=4.4
 	'on:invalid'?: EventHandler<Event, T> | undefined | null;
-
+	'on:formdata'?: EventHandler<Event & { readonly formData: FormData; }, T> | undefined | null; // TODO make this FormDataEvent once we require TS>=4.4
 
 	// Image Events
 	'on:load'?: EventHandler | undefined | null;
@@ -559,9 +559,10 @@ export interface HTMLAnchorAttributes extends HTMLAttributes<HTMLAnchorElement>
 	referrerpolicy?: ReferrerPolicy | undefined | null;
 
 	// SvelteKit
-	'sveltekit:noscroll'?: true | undefined | null;
-	'sveltekit:prefetch'?: true | undefined | null;
-	'sveltekit:reload'?: true | undefined | null;
+	'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;
+	'data-sveltekit-preload-code'?: true | '' | 'eager' | 'viewport' | 'hover' | 'tap' | 'off' | undefined | null;
+	'data-sveltekit-preload-data'?: true | '' | 'hover' | 'tap' | 'off' | undefined | null;
+	'data-sveltekit-reload'?: true | '' | 'off' | undefined | null;
 
 	// Sapper
 	'sapper:noscroll'?: true | undefined | null;

package/svelte-jsx.d.ts

@@ -348,6 +348,7 @@ declare namespace svelte.JSX {
       onsubmit?: EventHandler<SubmitEvent, T> | undefined | null;
       oninvalid?: EventHandler<Event, T> | undefined | null;
       onbeforeinput?: EventHandler<InputEvent, T> | undefined | null;
+      'on:formdata'?: EventHandler<FormDataEvent, T> | undefined | null;
 
       // Image Events
       onload?: EventHandler | undefined | null;
@@ -1176,10 +1177,10 @@ declare namespace svelte.JSX {
     }
 
     interface SvelteKitAnchorProps {
-        // transformed from sveltekit:noscroll so it should be camel case
-        sveltekitNoscroll?: true | undefined | null;
-        sveltekitPrefetch?: true | undefined | null;
-        sveltekitReload?: true | undefined | null;
+        'data-sveltekit-noscroll'?: true | '' | 'off' | undefined | null;
+        'data-sveltekit-preload-code'?: true | '' | 'eager' | 'viewport' | 'hover' | 'tap' | 'off' | undefined | null;
+        'data-sveltekit-preload-data'?: true | '' | 'hover' | 'tap' | 'off' | undefined | null;
+        'data-sveltekit-reload'?: true | '' | 'off' | undefined | null;
     }
 
     interface SvelteMediaTimeRange {

package/svelte-shims.d.ts

@@ -102,7 +102,7 @@ type SvelteAnimationReturnType = {
 
 type SvelteWithOptionalProps<Props, Keys extends keyof Props> = Omit<Props, Keys> & Partial<Pick<Props, Keys>>;
 type SvelteAllProps = { [index: string]: any }
-type SveltePropsAnyFallback<Props> = {[K in keyof Props]: Props[K] extends undefined ? any : Props[K]}
+type SveltePropsAnyFallback<Props> = {[K in keyof Props]: Props[K] extends never ? never : Props[K] extends undefined ? any : Props[K]}
 type SvelteSlotsAnyFallback<Slots> = {[K in keyof Slots]: {[S in keyof Slots[K]]: Slots[K][S] extends undefined ? any : Slots[K][S]}}
 type SvelteRestProps = { [index: string]: any }
 type SvelteSlots = { [index: string]: any }
@@ -231,6 +231,7 @@ declare function __sveltets_2_createComponentAny(props: Record<string, any>): _S
 declare function __sveltets_2_any(...dummy: any[]): any;
 declare function __sveltets_2_empty(...dummy: any[]): {};
 declare function __sveltets_2_union<T1,T2,T3,T4,T5>(t1:T1,t2?:T2,t3?:T3,t4?:T4,t5?:T5): T1 & T2 & T3 & T4 & T5;
+declare function __sveltets_2_nonNullable<T>(type: T): NonNullable<T>;
 
 declare function __sveltets_2_cssProp(prop: Record<string, any>): {};
 
@@ -295,9 +296,16 @@ declare type ATypedSvelteComponent = {
     $on(event: string, handler: ((e: any) => any) | null | undefined): () => void;
 }
 /**
- * Ambient type only used for intellisense, DO NOT USE IN YOUR PROJECT
+ * Ambient type only used for intellisense, DO NOT USE IN YOUR PROJECT.
+ * 
+ * If you're looking for the type of a Svelte Component, use `SvelteComponentTyped` and `ComponentType` instead:
+ *
+ * ```ts
+ * import type { ComponentType, SvelteComponentTyped } from "svelte";
+ * let myComponentConstructor: ComponentType<SvelteComponentTyped> = ..;
+ * ```
  */
 declare type ConstructorOfATypedSvelteComponent = new (args: {target: any, props?: any}) => ATypedSvelteComponent
-declare function __sveltets_2_ensureComponent<T extends ConstructorOfATypedSvelteComponent>(type: T): T;
+declare function __sveltets_2_ensureComponent<T extends ConstructorOfATypedSvelteComponent | null | undefined>(type: T): NonNullable<T>;
 
 declare function __sveltets_2_ensureArray<T extends ArrayLike<unknown>>(array: T): T extends ArrayLike<infer U> ? U[] : any[];