svelte2tsx 0.6.16 → 0.6.18

package/index.d.ts

@@ -86,6 +86,10 @@ export interface EmitDtsConfig {
     /**
      * Path to `svelte-shims.d.ts` of `svelte2tsx`.
      * Example: `require.resolve('svelte2tsx/svelte-shims.d.ts')`
+     * 
+     * If a path is given that points to `svelte-shims-v4.d.ts`,
+     * the `SvelteComponent` import is used instead of
+     * `SvelteComponentTyped` which is deprecated in Svelte v4.
      */
     svelteShimsPath: string;
     /**

package/index.js

@@ -2342,11 +2342,13 @@ const oneWayBindingAttributes = new Set([
     'ended',
     'readyState',
     'naturalWidth',
-    'naturalHeight',
-    'contentRect',
-    'contentBoxSize',
-    'borderBoxSize',
-    'devicePixelContentBoxSize'
+    'naturalHeight'
+]);
+const oneWayBindingAttributesNotOnElement = new Map([
+    ['contentRect', 'DOMRectReadOnly'],
+    ['contentBoxSize', 'ResizeObserverSize[]'],
+    ['borderBoxSize', 'ResizeObserverSize[]'],
+    ['devicePixelContentBoxSize', 'ResizeObserverSize[]']
 ]);
 /**
  * List of all binding names that are transformed to sth like `binding = variable`.
@@ -2392,6 +2394,14 @@ function handleBinding(str, attr, parent, element, preserveBind) {
         ]);
         return;
     }
+    // one way binding whose property is not on the element
+    if (oneWayBindingAttributesNotOnElement.has(attr.name) && element instanceof Element) {
+        element.appendToStartEnd([
+            [attr.expression.start, attr.expression.end],
+            `= ${surroundWithIgnoreComments(`null as ${oneWayBindingAttributesNotOnElement.get(attr.name)}`)};`
+        ]);
+        return;
+    }
     // other bindings which are transformed to normal attributes/props
     const isShorthand = attr.expression.start === attr.start + 'bind:'.length;
     const name = preserveBind && element instanceof Element
@@ -3731,7 +3741,7 @@ function upserKitRouteFile(ts, basename, getSource, surround) {
     addTypeToVariable(exports, surround, insert, 'trailingSlash', `'never' | 'always' | 'ignore'`);
     addTypeToVariable(exports, surround, insert, 'ssr', `boolean`);
     addTypeToVariable(exports, surround, insert, 'csr', `boolean`);
-    // add types to GET/PUT/POST/PATCH/DELETE/OPTIONS if not explicitly typed
+    // add types to GET/PUT/POST/PATCH/DELETE/OPTIONS/HEAD if not explicitly typed
     const insertApiMethod = (name) => {
         addTypeToFunction(ts, exports, surround, insert, name, `import('./$types.js').RequestEvent`, `Response | Promise<Response>`);
     };
@@ -3741,6 +3751,7 @@ function upserKitRouteFile(ts, basename, getSource, surround) {
     insertApiMethod('PATCH');
     insertApiMethod('DELETE');
     insertApiMethod('OPTIONS');
+    insertApiMethod('HEAD');
     return { addedCode, originalText: source.getFullText() };
 }
 function upserKitParamsFile(ts, fileName, basename, paramsPath, getSource, surround) {
@@ -5711,7 +5722,7 @@ function addComponentExport(params) {
         addSimpleComponentExport(params);
     }
 }
-function addGenericsComponentExport({ strictEvents, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics }) {
+function addGenericsComponentExport({ strictEvents, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics, noSvelteComponentTyped }) {
     const genericsDef = generics.toDefinitionString();
     const genericsRef = generics.toReferencesString();
     const doc = componentDocumentation.getFormatted();
@@ -5732,19 +5743,22 @@ class __sveltets_Render${genericsDef} {
     }
 }
 `;
+    const svelteComponentClass = noSvelteComponentTyped
+        ? 'SvelteComponent'
+        : 'SvelteComponentTyped';
     if (mode === 'dts') {
         statement +=
             `export type ${className}Props${genericsDef} = ${returnType('props')};\n` +
                 `export type ${className}Events${genericsDef} = ${returnType('events')};\n` +
                 `export type ${className}Slots${genericsDef} = ${returnType('slots')};\n` +
-                `\n${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends SvelteComponentTyped<${className}Props${genericsRef}, ${className}Events${genericsRef}, ${className}Slots${genericsRef}> {` +
+                `\n${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends ${svelteComponentClass}<${className}Props${genericsRef}, ${className}Events${genericsRef}, ${className}Slots${genericsRef}> {` +
                 exportedNames.createClassGetters() +
                 (usesAccessors ? exportedNames.createClassAccessors() : '') +
                 '\n}';
     }
     else {
         statement +=
-            '\n\nimport { SvelteComponentTyped as __SvelteComponentTyped__ } from "svelte" \n' +
+            `\n\nimport { ${svelteComponentClass} as __SvelteComponentTyped__ } from "svelte" \n` +
                 `${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends __SvelteComponentTyped__<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> {` +
                 exportedNames.createClassGetters() +
                 (usesAccessors ? exportedNames.createClassAccessors() : '') +
@@ -5752,18 +5766,32 @@ class __sveltets_Render${genericsDef} {
     }
     str.append(statement);
 }
-function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str }) {
+function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, noSvelteComponentTyped }) {
     const propDef = props(isTsFile, canHaveAnyProp, exportedNames, events(strictEvents, 'render()'));
     const doc = componentDocumentation.getFormatted();
     const className = fileName && classNameFromFilename(fileName, mode !== 'dts');
     let statement;
     if (mode === 'dts' && isTsFile) {
+        const addTypeExport = (type) => {
+            const exportName = className + type;
+            if (!str.original.includes(exportName)) {
+                return `export type ${exportName} = typeof __propDef.${type.toLowerCase()};\n`;
+            }
+            let replacement = exportName + '_';
+            while (str.original.includes(replacement)) {
+                replacement += '_';
+            }
+            return `type ${replacement} = typeof __propDef.${type.toLowerCase()};\nexport { ${replacement} as ${exportName} };\n`;
+        };
+        const svelteComponentClass = noSvelteComponentTyped
+            ? 'SvelteComponent'
+            : 'SvelteComponentTyped';
         statement =
             `\nconst __propDef = ${propDef};\n` +
-                `export type ${className}Props = typeof __propDef.props;\n` +
-                `export type ${className}Events = typeof __propDef.events;\n` +
-                `export type ${className}Slots = typeof __propDef.slots;\n` +
-                `\n${doc}export default class${className ? ` ${className}` : ''} extends SvelteComponentTyped<${className}Props, ${className}Events, ${className}Slots> {` +
+                addTypeExport('Props') +
+                addTypeExport('Events') +
+                addTypeExport('Slots') +
+                `\n${doc}export default class${className ? ` ${className}` : ''} extends ${svelteComponentClass}<${className}Props, ${className}Events, ${className}Slots> {` +
                 exportedNames.createClassGetters() +
                 (usesAccessors ? exportedNames.createClassAccessors() : '') +
                 '\n}';
@@ -6194,14 +6222,20 @@ function svelte2tsx(svelte, options = {}) {
         fileName: options === null || options === void 0 ? void 0 : options.filename,
         componentDocumentation,
         mode: options.mode,
-        generics
+        generics,
+        noSvelteComponentTyped: options.noSvelteComponentTyped
     });
     if (options.mode === 'dts') {
         // Prepend the import which is used for TS files
         // The other shims need to be provided by the user ambient-style,
         // for example through filenames.push(require.resolve('svelte2tsx/svelte-shims.d.ts'))
         // TODO replace with SvelteComponent for Svelte 5, keep old for backwards compatibility with Svelte 3
-        str.prepend('import { SvelteComponentTyped } from "svelte"\n' + '\n');
+        if (options.noSvelteComponentTyped) {
+            str.prepend('import { SvelteComponent } from "svelte"\n' + '\n');
+        }
+        else {
+            str.prepend('import { SvelteComponentTyped } from "svelte"\n' + '\n');
+        }
         let code = str.toString();
         // Remove all tsx occurences and the template part from the output
         code = code
@@ -6394,15 +6428,15 @@ async function createTsCompilerHost(options, svelteMap) {
 async function createSvelteMap(config) {
     const svelteFiles = new Map();
     function add(path) {
-        var _a, _b;
         const code = ts.sys.readFile(path, 'utf-8');
-        const isTsFile = // svelte-preprocess allows default languages
-         ['ts', 'typescript'].includes((_b = (_a = config.preprocess) === null || _a === void 0 ? void 0 : _a.defaultLanguages) === null || _b === void 0 ? void 0 : _b.script) ||
-            /<script\s+[^>]*?lang=('|")(ts|typescript)('|")/.test(code);
+        const isTsFile = /<script\s+[^>]*?lang=('|")(ts|typescript)('|")/.test(code);
         const transformed = svelte2tsx(code, {
             filename: path,
             isTsFile,
-            mode: 'dts'
+            mode: 'dts',
+            noSvelteComponentTyped: config.svelteShimsPath
+                .replace(/\\/g, '/')
+                .endsWith('svelte2tsx/svelte-shims-v4.d.ts')
         }).code;
         svelteFiles.set(path, transformed);
         return isTsFile;

package/index.mjs

@@ -2322,11 +2322,13 @@ const oneWayBindingAttributes = new Set([
     'ended',
     'readyState',
     'naturalWidth',
-    'naturalHeight',
-    'contentRect',
-    'contentBoxSize',
-    'borderBoxSize',
-    'devicePixelContentBoxSize'
+    'naturalHeight'
+]);
+const oneWayBindingAttributesNotOnElement = new Map([
+    ['contentRect', 'DOMRectReadOnly'],
+    ['contentBoxSize', 'ResizeObserverSize[]'],
+    ['borderBoxSize', 'ResizeObserverSize[]'],
+    ['devicePixelContentBoxSize', 'ResizeObserverSize[]']
 ]);
 /**
  * List of all binding names that are transformed to sth like `binding = variable`.
@@ -2372,6 +2374,14 @@ function handleBinding(str, attr, parent, element, preserveBind) {
         ]);
         return;
     }
+    // one way binding whose property is not on the element
+    if (oneWayBindingAttributesNotOnElement.has(attr.name) && element instanceof Element) {
+        element.appendToStartEnd([
+            [attr.expression.start, attr.expression.end],
+            `= ${surroundWithIgnoreComments(`null as ${oneWayBindingAttributesNotOnElement.get(attr.name)}`)};`
+        ]);
+        return;
+    }
     // other bindings which are transformed to normal attributes/props
     const isShorthand = attr.expression.start === attr.start + 'bind:'.length;
     const name = preserveBind && element instanceof Element
@@ -3711,7 +3721,7 @@ function upserKitRouteFile(ts, basename, getSource, surround) {
     addTypeToVariable(exports, surround, insert, 'trailingSlash', `'never' | 'always' | 'ignore'`);
     addTypeToVariable(exports, surround, insert, 'ssr', `boolean`);
     addTypeToVariable(exports, surround, insert, 'csr', `boolean`);
-    // add types to GET/PUT/POST/PATCH/DELETE/OPTIONS if not explicitly typed
+    // add types to GET/PUT/POST/PATCH/DELETE/OPTIONS/HEAD if not explicitly typed
     const insertApiMethod = (name) => {
         addTypeToFunction(ts, exports, surround, insert, name, `import('./$types.js').RequestEvent`, `Response | Promise<Response>`);
     };
@@ -3721,6 +3731,7 @@ function upserKitRouteFile(ts, basename, getSource, surround) {
     insertApiMethod('PATCH');
     insertApiMethod('DELETE');
     insertApiMethod('OPTIONS');
+    insertApiMethod('HEAD');
     return { addedCode, originalText: source.getFullText() };
 }
 function upserKitParamsFile(ts, fileName, basename, paramsPath, getSource, surround) {
@@ -5691,7 +5702,7 @@ function addComponentExport(params) {
         addSimpleComponentExport(params);
     }
 }
-function addGenericsComponentExport({ strictEvents, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics }) {
+function addGenericsComponentExport({ strictEvents, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics, noSvelteComponentTyped }) {
     const genericsDef = generics.toDefinitionString();
     const genericsRef = generics.toReferencesString();
     const doc = componentDocumentation.getFormatted();
@@ -5712,19 +5723,22 @@ class __sveltets_Render${genericsDef} {
     }
 }
 `;
+    const svelteComponentClass = noSvelteComponentTyped
+        ? 'SvelteComponent'
+        : 'SvelteComponentTyped';
     if (mode === 'dts') {
         statement +=
             `export type ${className}Props${genericsDef} = ${returnType('props')};\n` +
                 `export type ${className}Events${genericsDef} = ${returnType('events')};\n` +
                 `export type ${className}Slots${genericsDef} = ${returnType('slots')};\n` +
-                `\n${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends SvelteComponentTyped<${className}Props${genericsRef}, ${className}Events${genericsRef}, ${className}Slots${genericsRef}> {` +
+                `\n${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends ${svelteComponentClass}<${className}Props${genericsRef}, ${className}Events${genericsRef}, ${className}Slots${genericsRef}> {` +
                 exportedNames.createClassGetters() +
                 (usesAccessors ? exportedNames.createClassAccessors() : '') +
                 '\n}';
     }
     else {
         statement +=
-            '\n\nimport { SvelteComponentTyped as __SvelteComponentTyped__ } from "svelte" \n' +
+            `\n\nimport { ${svelteComponentClass} as __SvelteComponentTyped__ } from "svelte" \n` +
                 `${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends __SvelteComponentTyped__<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> {` +
                 exportedNames.createClassGetters() +
                 (usesAccessors ? exportedNames.createClassAccessors() : '') +
@@ -5732,18 +5746,32 @@ class __sveltets_Render${genericsDef} {
     }
     str.append(statement);
 }
-function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str }) {
+function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, noSvelteComponentTyped }) {
     const propDef = props(isTsFile, canHaveAnyProp, exportedNames, events(strictEvents, 'render()'));
     const doc = componentDocumentation.getFormatted();
     const className = fileName && classNameFromFilename(fileName, mode !== 'dts');
     let statement;
     if (mode === 'dts' && isTsFile) {
+        const addTypeExport = (type) => {
+            const exportName = className + type;
+            if (!str.original.includes(exportName)) {
+                return `export type ${exportName} = typeof __propDef.${type.toLowerCase()};\n`;
+            }
+            let replacement = exportName + '_';
+            while (str.original.includes(replacement)) {
+                replacement += '_';
+            }
+            return `type ${replacement} = typeof __propDef.${type.toLowerCase()};\nexport { ${replacement} as ${exportName} };\n`;
+        };
+        const svelteComponentClass = noSvelteComponentTyped
+            ? 'SvelteComponent'
+            : 'SvelteComponentTyped';
         statement =
             `\nconst __propDef = ${propDef};\n` +
-                `export type ${className}Props = typeof __propDef.props;\n` +
-                `export type ${className}Events = typeof __propDef.events;\n` +
-                `export type ${className}Slots = typeof __propDef.slots;\n` +
-                `\n${doc}export default class${className ? ` ${className}` : ''} extends SvelteComponentTyped<${className}Props, ${className}Events, ${className}Slots> {` +
+                addTypeExport('Props') +
+                addTypeExport('Events') +
+                addTypeExport('Slots') +
+                `\n${doc}export default class${className ? ` ${className}` : ''} extends ${svelteComponentClass}<${className}Props, ${className}Events, ${className}Slots> {` +
                 exportedNames.createClassGetters() +
                 (usesAccessors ? exportedNames.createClassAccessors() : '') +
                 '\n}';
@@ -6174,14 +6202,20 @@ function svelte2tsx(svelte, options = {}) {
         fileName: options === null || options === void 0 ? void 0 : options.filename,
         componentDocumentation,
         mode: options.mode,
-        generics
+        generics,
+        noSvelteComponentTyped: options.noSvelteComponentTyped
     });
     if (options.mode === 'dts') {
         // Prepend the import which is used for TS files
         // The other shims need to be provided by the user ambient-style,
         // for example through filenames.push(require.resolve('svelte2tsx/svelte-shims.d.ts'))
         // TODO replace with SvelteComponent for Svelte 5, keep old for backwards compatibility with Svelte 3
-        str.prepend('import { SvelteComponentTyped } from "svelte"\n' + '\n');
+        if (options.noSvelteComponentTyped) {
+            str.prepend('import { SvelteComponent } from "svelte"\n' + '\n');
+        }
+        else {
+            str.prepend('import { SvelteComponentTyped } from "svelte"\n' + '\n');
+        }
         let code = str.toString();
         // Remove all tsx occurences and the template part from the output
         code = code
@@ -6374,15 +6408,15 @@ async function createTsCompilerHost(options, svelteMap) {
 async function createSvelteMap(config) {
     const svelteFiles = new Map();
     function add(path) {
-        var _a, _b;
         const code = ts.sys.readFile(path, 'utf-8');
-        const isTsFile = // svelte-preprocess allows default languages
-         ['ts', 'typescript'].includes((_b = (_a = config.preprocess) === null || _a === void 0 ? void 0 : _a.defaultLanguages) === null || _b === void 0 ? void 0 : _b.script) ||
-            /<script\s+[^>]*?lang=('|")(ts|typescript)('|")/.test(code);
+        const isTsFile = /<script\s+[^>]*?lang=('|")(ts|typescript)('|")/.test(code);
         const transformed = svelte2tsx(code, {
             filename: path,
             isTsFile,
-            mode: 'dts'
+            mode: 'dts',
+            noSvelteComponentTyped: config.svelteShimsPath
+                .replace(/\\/g, '/')
+                .endsWith('svelte2tsx/svelte-shims-v4.d.ts')
         }).code;
         svelteFiles.set(path, transformed);
         return isTsFile;

package/package.json

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