svelte2tsx 0.7.8 → 0.7.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/index.js +177 -97
  2. package/index.mjs +177 -97
  3. package/package.json +1 -1
  4. package/svelte-shims-v4.d.ts +37 -20
package/index.js CHANGED
@@ -3125,10 +3125,13 @@ function handleSnippet(str, snippetBlock, component) {
3125
3125
  let generic = '';
3126
3126
  if ((_e = snippetBlock.parameters) === null || _e === void 0 ? void 0 : _e.length) {
3127
3127
  generic = `<[${snippetBlock.parameters
3128
- .map((p) => p.typeAnnotation
3129
- ? str.original.slice(p.typeAnnotation.start + 1, p.typeAnnotation.end)
3130
- : // slap any on to it to silence "implicit any" errors; JSDoc people can't add types to snippets
3131
- 'any')
3128
+ .map((p) => {
3129
+ var _a;
3130
+ return ((_a = p.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation)
3131
+ ? str.original.slice(p.typeAnnotation.typeAnnotation.start, p.typeAnnotation.typeAnnotation.end)
3132
+ : // slap any on to it to silence "implicit any" errors; JSDoc people can't add types to snippets
3133
+ 'any';
3134
+ })
3132
3135
  .join(', ')}]>`;
3133
3136
  }
3134
3137
  const typeAnnotation = surroundWithIgnoreComments(`: import('svelte').Snippet${generic}`);
@@ -4378,11 +4381,13 @@ function is$$PropsDeclaration(node) {
4378
4381
  return isInterfaceOrTypeDeclaration(node) && node.name.text === '$$Props';
4379
4382
  }
4380
4383
  class ExportedNames {
4381
- constructor(str, astOffset, basename, isTsFile) {
4384
+ constructor(str, astOffset, basename, isTsFile, isSvelte5Plus) {
4382
4385
  this.str = str;
4383
4386
  this.astOffset = astOffset;
4384
4387
  this.basename = basename;
4385
4388
  this.isTsFile = isTsFile;
4389
+ this.isSvelte5Plus = isSvelte5Plus;
4390
+ this.usesAccessors = false;
4386
4391
  /**
4387
4392
  * Uses the `$$Props` type
4388
4393
  */
@@ -4485,7 +4490,12 @@ class ExportedNames {
4485
4490
  ? element.propertyName.text
4486
4491
  : element.name.text;
4487
4492
  if (element.initializer) {
4488
- const call = element.initializer;
4493
+ let call = element.initializer;
4494
+ // if it's an as expression we need to check wether the as
4495
+ // expression expression is a call
4496
+ if (ts.isAsExpression(call)) {
4497
+ call = call.expression;
4498
+ }
4489
4499
  if (ts.isCallExpression(call) && ts.isIdentifier(call.expression)) {
4490
4500
  if (call.expression.text === '$bindable') {
4491
4501
  this.$props.bindings.push(name);
@@ -4508,7 +4518,9 @@ class ExportedNames {
4508
4518
  preprendStr(this.str, generic_arg.pos + this.astOffset, `;type ${this.$props.type} = `);
4509
4519
  this.str.appendLeft(generic_arg.end + this.astOffset, ';');
4510
4520
  this.str.move(generic_arg.pos + this.astOffset, generic_arg.end + this.astOffset, node.parent.pos + this.astOffset);
4511
- this.str.appendRight(generic_arg.end + this.astOffset, this.$props.type);
4521
+ this.str.appendRight(generic_arg.end + this.astOffset,
4522
+ // so that semantic tokens ignore it, preventing an overlap of tokens
4523
+ surroundWithIgnoreComments(this.$props.type));
4512
4524
  }
4513
4525
  }
4514
4526
  else {
@@ -4853,13 +4865,13 @@ class ExportedNames {
4853
4865
  */
4854
4866
  createPropsStr(uses$$propsOr$$restProps) {
4855
4867
  const names = Array.from(this.exports.entries());
4856
- if (this.$props.type) {
4857
- return '{} as any as ' + this.$props.type;
4858
- }
4859
- if (this.$props.comment) {
4860
- return this.$props.comment + '({})';
4861
- }
4862
4868
  if (this.usesRunes()) {
4869
+ if (this.$props.type) {
4870
+ return '{} as any as ' + this.$props.type;
4871
+ }
4872
+ if (this.$props.comment) {
4873
+ return this.$props.comment + '({})';
4874
+ }
4863
4875
  // Necessary, because {} roughly equals to any
4864
4876
  return this.isTsFile
4865
4877
  ? '{} as Record<string, never>'
@@ -4900,26 +4912,48 @@ class ExportedNames {
4900
4912
  const returnElementsType = this.createReturnElementsType(names);
4901
4913
  return `{${returnElements.join(' , ')}} as {${returnElementsType.join(', ')}}`;
4902
4914
  }
4915
+ hasNoProps() {
4916
+ if (this.usesRunes()) {
4917
+ return !this.$props.type && !this.$props.comment;
4918
+ }
4919
+ const names = Array.from(this.exports.entries());
4920
+ return names.length === 0;
4921
+ }
4903
4922
  createBindingsStr() {
4904
- // will be just the empty strings for zero bindings, which is impossible to create a binding for, so it works out fine
4905
- return `\n $$bindings = __sveltets_$$bindings('${this.$props.bindings.join("', '")}');`;
4923
+ if (this.usesRunes()) {
4924
+ // will be just the empty strings for zero bindings, which is impossible to create a binding for, so it works out fine
4925
+ return `__sveltets_$$bindings('${this.$props.bindings.join("', '")}')`;
4926
+ }
4927
+ else {
4928
+ return '""';
4929
+ }
4906
4930
  }
4907
4931
  /**
4908
4932
  * In runes mode, exports are no longer part of props because you cannot `bind:` to them,
4909
- * which is why we need a separate return type for them.
4933
+ * which is why we need a separate return type for them. In Svelte 5, the isomorphic component
4934
+ * needs them separate, too.
4910
4935
  */
4911
4936
  createExportsStr() {
4912
4937
  const names = Array.from(this.exports.entries());
4913
4938
  const others = names.filter(([, { isLet }]) => !isLet);
4914
- if (this.usesRunes() && others.length > 0) {
4915
- if (this.isTsFile) {
4916
- return (', exports: {} as any as { ' +
4917
- this.createReturnElementsType(others, undefined, true).join(',') +
4918
- ' }');
4939
+ const needsAccessors = this.usesAccessors && names.length > 0 && !this.usesRunes(); // runes mode doesn't support accessors
4940
+ if (this.isSvelte5Plus && (others.length > 0 || this.usesRunes() || needsAccessors)) {
4941
+ let str = '';
4942
+ if (others.length > 0 || needsAccessors) {
4943
+ if (this.isTsFile) {
4944
+ str +=
4945
+ ', exports: {} as any as { ' +
4946
+ this.createReturnElementsType(needsAccessors ? names : others, undefined, true).join(',') +
4947
+ ' }';
4948
+ }
4949
+ else {
4950
+ str += `, exports: /** @type {{${this.createReturnElementsType(needsAccessors ? names : others, false, true)}}} */ ({})`;
4951
+ }
4919
4952
  }
4920
- else {
4921
- return `, exports: /** @type {${this.createReturnElementsType(others, false, true)}} */ ({})`;
4953
+ if (this.usesRunes()) {
4954
+ str += `, bindings: ${this.createBindingsStr()}`;
4922
4955
  }
4956
+ return str;
4923
4957
  }
4924
4958
  return '';
4925
4959
  }
@@ -4951,12 +4985,17 @@ class ExportedNames {
4951
4985
  getExportsMap() {
4952
4986
  return this.exports;
4953
4987
  }
4988
+ hasExports() {
4989
+ const names = Array.from(this.exports.entries());
4990
+ return this.usesAccessors ? names.length > 0 : names.some(([, { isLet }]) => !isLet);
4991
+ }
4954
4992
  hasPropsRune() {
4955
- return this.$props.type || this.$props.comment;
4993
+ return this.isSvelte5Plus && (this.$props.type || this.$props.comment);
4956
4994
  }
4957
4995
  checkGlobalsForRunes(globals) {
4958
4996
  const runes = ['$state', '$derived', '$effect']; // no need to check for props, already handled through other means in here
4959
- this.hasRunesGlobals = globals.some((global) => runes.includes(global));
4997
+ this.hasRunesGlobals =
4998
+ this.isSvelte5Plus && globals.some((global) => runes.includes(global));
4960
4999
  }
4961
5000
  usesRunes() {
4962
5001
  return this.hasRunesGlobals || this.hasPropsRune();
@@ -5833,6 +5872,9 @@ class Generics {
5833
5872
  toReferencesString() {
5834
5873
  return this.references.length ? `<${this.references.join(',')}>` : '';
5835
5874
  }
5875
+ toReferencesAnyString() {
5876
+ return this.references.length ? `<${this.references.map(() => 'any').join(',')}>` : '';
5877
+ }
5836
5878
  has() {
5837
5879
  return this.definitions.length > 0;
5838
5880
  }
@@ -5913,12 +5955,12 @@ class InterfacesAndTypes {
5913
5955
  }
5914
5956
  }
5915
5957
 
5916
- function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, isTSFile, basename) {
5958
+ function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, isTSFile, basename, isSvelte5Plus) {
5917
5959
  const htmlx = str.original;
5918
5960
  const scriptContent = htmlx.substring(script.content.start, script.content.end);
5919
5961
  const tsAst = ts.createSourceFile('component.ts.svelte', scriptContent, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
5920
5962
  const astOffset = script.content.start;
5921
- const exportedNames = new ExportedNames(str, astOffset, basename, isTSFile);
5963
+ const exportedNames = new ExportedNames(str, astOffset, basename, isTSFile, isSvelte5Plus);
5922
5964
  const generics = new Generics(str, astOffset, script);
5923
5965
  const interfacesAndTypes = new InterfacesAndTypes();
5924
5966
  const implicitTopLevelNames = new ImplicitTopLevelNames(str, astOffset);
@@ -6227,7 +6269,7 @@ function addComponentExport(params) {
6227
6269
  addSimpleComponentExport(params);
6228
6270
  }
6229
6271
  }
6230
- function addGenericsComponentExport({ strictEvents, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics, usesSlots, noSvelteComponentTyped }) {
6272
+ function addGenericsComponentExport({ strictEvents, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics, usesSlots, isSvelte5, noSvelteComponentTyped }) {
6231
6273
  const genericsDef = generics.toDefinitionString();
6232
6274
  const genericsRef = generics.toReferencesString();
6233
6275
  const doc = componentDocumentation.getFormatted();
@@ -6246,7 +6288,11 @@ class __sveltets_Render${genericsDef} {
6246
6288
  slots() {
6247
6289
  return render${genericsRef}().slots;
6248
6290
  }
6249
- }
6291
+ ${isSvelte5
6292
+ ? ` bindings() { return ${exportedNames.createBindingsStr()}; }
6293
+ exports() { return ${exportedNames.hasExports() ? `render${genericsRef}().exports` : '{}'}; }
6294
+ }`
6295
+ : '}'}
6250
6296
  `;
6251
6297
  const svelteComponentClass = noSvelteComponentTyped
6252
6298
  ? 'SvelteComponent'
@@ -6254,24 +6300,28 @@ class __sveltets_Render${genericsDef} {
6254
6300
  const [PropsName] = addTypeExport(str, className, 'Props');
6255
6301
  const [EventsName] = addTypeExport(str, className, 'Events');
6256
6302
  const [SlotsName] = addTypeExport(str, className, 'Slots');
6257
- /**
6258
- * In Svelte 5 runes mode we add a custom constructor to override the default one which implicitly makes all properties bindable.
6259
- * Remove this once Svelte typings no longer do that (Svelte 6 or 7)
6260
- */
6261
- let customConstructor = '';
6262
- if (exportedNames.hasPropsRune()) {
6263
- if (!usesSlots) {
6264
- customConstructor = `\n constructor(options: import('svelte').ComponentConstructorOptions<${returnType('props')}>) { super(options); }`;
6265
- }
6266
- customConstructor += exportedNames.createBindingsStr();
6267
- }
6268
- if (mode === 'dts') {
6303
+ if (isSvelte5) {
6304
+ // Don't add props/events/slots type exports in dts mode for now, maybe someone asks for it to be back,
6305
+ // but it's safer to not do it for now to have more flexibility in the future.
6306
+ const propsType = !canHaveAnyProp && exportedNames.hasNoProps()
6307
+ ? `{$$events?: ${returnType('events')}${usesSlots ? `, $$slots?: ${returnType('slots')}, children?: any` : ''}}`
6308
+ : `${returnType('props')} & {$$events?: ${returnType('events')}${usesSlots ? `, $$slots?: ${returnType('slots')}, children?: any` : ''}}`;
6309
+ statement +=
6310
+ `\ninterface $$IsomorphicComponent {\n` +
6311
+ ` new ${genericsDef}(options: import('svelte').ComponentConstructorOptions<${returnType('props') + (usesSlots ? '& {children?: any}' : '')}>): import('svelte').SvelteComponent<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> & { $$bindings?: ${returnType('bindings')} } & ${returnType('exports')};\n` +
6312
+ ` ${genericsDef}(internal: unknown, props: ${propsType}): ${returnType('exports')};\n` +
6313
+ ` z_$$bindings?: ReturnType<__sveltets_Render${generics.toReferencesAnyString()}['bindings']>;\n` +
6314
+ `}\n` +
6315
+ `${doc}const ${className || '$$Component'}: $$IsomorphicComponent = null as any;\n` +
6316
+ surroundWithIgnoreComments(`type ${className || '$$Component'}${genericsDef} = InstanceType<typeof ${className || '$$Component'}${genericsRef}>;\n`) +
6317
+ `export default ${className || '$$Component'};`;
6318
+ }
6319
+ else if (mode === 'dts') {
6269
6320
  statement +=
6270
6321
  `export type ${PropsName}${genericsDef} = ${returnType('props')};\n` +
6271
6322
  `export type ${EventsName}${genericsDef} = ${returnType('events')};\n` +
6272
6323
  `export type ${SlotsName}${genericsDef} = ${returnType('slots')};\n` +
6273
6324
  `\n${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends ${svelteComponentClass}<${PropsName}${genericsRef}, ${EventsName}${genericsRef}, ${SlotsName}${genericsRef}> {` +
6274
- customConstructor +
6275
6325
  exportedNames.createClassGetters(genericsRef) +
6276
6326
  (usesAccessors ? exportedNames.createClassAccessors() : '') +
6277
6327
  '\n}';
@@ -6280,66 +6330,87 @@ class __sveltets_Render${genericsDef} {
6280
6330
  statement +=
6281
6331
  `\n\nimport { ${svelteComponentClass} as __SvelteComponentTyped__ } from "svelte" \n` +
6282
6332
  `${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends __SvelteComponentTyped__<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> {` +
6283
- customConstructor +
6284
6333
  exportedNames.createClassGetters(genericsRef) +
6285
6334
  (usesAccessors ? exportedNames.createClassAccessors() : '') +
6286
6335
  '\n}';
6287
6336
  }
6288
6337
  str.append(statement);
6289
6338
  }
6290
- function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, usesSlots, noSvelteComponentTyped }) {
6339
+ function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, usesSlots, noSvelteComponentTyped, isSvelte5 }) {
6291
6340
  const propDef = props(isTsFile, canHaveAnyProp, exportedNames, events(strictEvents, 'render()'));
6292
6341
  const doc = componentDocumentation.getFormatted();
6293
6342
  const className = fileName && classNameFromFilename(fileName, mode !== 'dts');
6294
- /**
6295
- * In Svelte 5 runes mode we add a custom constructor to override the default one which implicitly makes all properties bindable.
6296
- * Remove this once Svelte typings no longer do that (Svelte 6 or 7)
6297
- */
6298
- let customConstructor = '';
6299
- if (exportedNames.hasPropsRune()) {
6300
- if (!usesSlots) {
6301
- customConstructor = `\n constructor(options = __sveltets_2_runes_constructor(${propDef})) { super(options); }`;
6302
- }
6303
- customConstructor += exportedNames.createBindingsStr();
6304
- }
6305
6343
  let statement;
6306
- if (mode === 'dts' && isTsFile) {
6307
- const svelteComponentClass = noSvelteComponentTyped
6308
- ? 'SvelteComponent'
6309
- : 'SvelteComponentTyped';
6310
- const [PropsName, PropsExport] = addTypeExport(str, className, 'Props');
6311
- const [EventsName, EventsExport] = addTypeExport(str, className, 'Events');
6312
- const [SlotsName, SlotsExport] = addTypeExport(str, className, 'Slots');
6313
- statement =
6314
- `\nconst __propDef = ${propDef};\n` +
6315
- PropsExport +
6316
- EventsExport +
6317
- SlotsExport +
6318
- `\n${doc}export default class${className ? ` ${className}` : ''} extends ${svelteComponentClass}<${PropsName}, ${EventsName}, ${SlotsName}> {` +
6319
- customConstructor +
6320
- exportedNames.createClassGetters() +
6321
- (usesAccessors ? exportedNames.createClassAccessors() : '') +
6322
- '\n}';
6323
- }
6324
- else if (mode === 'dts' && !isTsFile) {
6325
- statement =
6326
- `\nconst __propDef = ${propDef};\n` +
6327
- `/** @typedef {typeof __propDef.props} ${className}Props */\n` +
6328
- `/** @typedef {typeof __propDef.events} ${className}Events */\n` +
6329
- `/** @typedef {typeof __propDef.slots} ${className}Slots */\n` +
6330
- `\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
6331
- customConstructor +
6332
- exportedNames.createClassGetters() +
6333
- (usesAccessors ? exportedNames.createClassAccessors() : '') +
6334
- '\n}';
6344
+ if (mode === 'dts') {
6345
+ if (isSvelte5) {
6346
+ // Inline definitions from Svelte shims; else dts files will reference the globals which will be unresolved
6347
+ statement =
6348
+ `\ninterface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
6349
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & { $$bindings?: Bindings } & Exports;
6350
+ (internal: unknown, props: ${!canHaveAnyProp && exportedNames.hasNoProps() ? '{$$events?: Events, $$slots?: Slots}' : 'Props & {$$events?: Events, $$slots?: Slots}'}): Exports;
6351
+ z_$$bindings?: Bindings;
6352
+ }\n` +
6353
+ (usesSlots
6354
+ ? `type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props &
6355
+ (Slots extends { default: any }
6356
+ ? Props extends Record<string, never>
6357
+ ? any
6358
+ : { children?: any }
6359
+ : {});
6360
+ declare function $$__sveltets_2_isomorphic_component_slots<
6361
+ Props extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>, Exports extends Record<string, any>, Bindings extends string
6362
+ >(klass: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }): $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, Slots>, Events, Slots, Exports, Bindings>;\n`
6363
+ : `
6364
+ declare function $$__sveltets_2_isomorphic_component<
6365
+ Props extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>, Exports extends Record<string, any>, Bindings extends string
6366
+ >(klass: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }): $$__sveltets_2_IsomorphicComponent<Props, Events, Slots, Exports, Bindings>;\n`) +
6367
+ `${doc}const ${className || '$$Component'} = $$__sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
6368
+ surroundWithIgnoreComments(`type ${className || '$$Component'} = InstanceType<typeof ${className || '$$Component'}>;\n`) +
6369
+ `export default ${className || '$$Component'};`;
6370
+ }
6371
+ else if (isTsFile) {
6372
+ const svelteComponentClass = noSvelteComponentTyped
6373
+ ? 'SvelteComponent'
6374
+ : 'SvelteComponentTyped';
6375
+ const [PropsName, PropsExport] = addTypeExport(str, className, 'Props');
6376
+ const [EventsName, EventsExport] = addTypeExport(str, className, 'Events');
6377
+ const [SlotsName, SlotsExport] = addTypeExport(str, className, 'Slots');
6378
+ statement =
6379
+ `\nconst __propDef = ${propDef};\n` +
6380
+ PropsExport +
6381
+ EventsExport +
6382
+ SlotsExport +
6383
+ `\n${doc}export default class${className ? ` ${className}` : ''} extends ${svelteComponentClass}<${PropsName}, ${EventsName}, ${SlotsName}> {` +
6384
+ exportedNames.createClassGetters() +
6385
+ (usesAccessors ? exportedNames.createClassAccessors() : '') +
6386
+ '\n}';
6387
+ }
6388
+ else {
6389
+ statement =
6390
+ `\nconst __propDef = ${propDef};\n` +
6391
+ `/** @typedef {typeof __propDef.props} ${className}Props */\n` +
6392
+ `/** @typedef {typeof __propDef.events} ${className}Events */\n` +
6393
+ `/** @typedef {typeof __propDef.slots} ${className}Slots */\n` +
6394
+ `\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
6395
+ exportedNames.createClassGetters() +
6396
+ (usesAccessors ? exportedNames.createClassAccessors() : '') +
6397
+ '\n}';
6398
+ }
6335
6399
  }
6336
6400
  else {
6337
- statement =
6338
- `\n\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
6339
- customConstructor +
6340
- exportedNames.createClassGetters() +
6341
- (usesAccessors ? exportedNames.createClassAccessors() : '') +
6342
- '\n}';
6401
+ if (isSvelte5) {
6402
+ statement =
6403
+ `\n${doc}const ${className || '$$Component'} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
6404
+ surroundWithIgnoreComments(`type ${className || '$$Component'} = InstanceType<typeof ${className || '$$Component'}>;\n`) +
6405
+ `export default ${className || '$$Component'};`;
6406
+ }
6407
+ else {
6408
+ statement =
6409
+ `\n\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
6410
+ exportedNames.createClassGetters() +
6411
+ (usesAccessors ? exportedNames.createClassAccessors() : '') +
6412
+ '\n}';
6413
+ }
6343
6414
  }
6344
6415
  str.append(statement);
6345
6416
  }
@@ -6375,7 +6446,10 @@ function events(strictEvents, renderStr) {
6375
6446
  return strictEvents ? renderStr : `__sveltets_2_with_any_event(${renderStr})`;
6376
6447
  }
6377
6448
  function props(isTsFile, canHaveAnyProp, exportedNames, renderStr) {
6378
- if (isTsFile) {
6449
+ if (exportedNames.usesRunes()) {
6450
+ return renderStr;
6451
+ }
6452
+ else if (isTsFile) {
6379
6453
  return canHaveAnyProp ? `__sveltets_2_with_any(${renderStr})` : renderStr;
6380
6454
  }
6381
6455
  else {
@@ -6736,7 +6810,7 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
6736
6810
  : instanceScriptTarget;
6737
6811
  const implicitStoreValues = new ImplicitStoreValues(resolvedStores, renderFunctionStart);
6738
6812
  //move the instance script and process the content
6739
- let exportedNames = new ExportedNames(str, 0, basename, options === null || options === void 0 ? void 0 : options.isTsFile);
6813
+ let exportedNames = new ExportedNames(str, 0, basename, options === null || options === void 0 ? void 0 : options.isTsFile, svelte5Plus);
6740
6814
  let generics = new Generics(str, 0, { attributes: [] });
6741
6815
  let uses$$SlotsInterface = false;
6742
6816
  if (scriptTag) {
@@ -6745,12 +6819,13 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
6745
6819
  str.move(scriptTag.start, scriptTag.end, instanceScriptTarget);
6746
6820
  }
6747
6821
  const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues, options.mode,
6748
- /**hasModuleScripts */ !!moduleScriptTag, options === null || options === void 0 ? void 0 : options.isTsFile, basename);
6822
+ /**hasModuleScripts */ !!moduleScriptTag, options === null || options === void 0 ? void 0 : options.isTsFile, basename, svelte5Plus);
6749
6823
  uses$$props = uses$$props || res.uses$$props;
6750
6824
  uses$$restProps = uses$$restProps || res.uses$$restProps;
6751
6825
  uses$$slots = uses$$slots || res.uses$$slots;
6752
6826
  ({ exportedNames, events, generics, uses$$SlotsInterface } = res);
6753
6827
  }
6828
+ exportedNames.usesAccessors = usesAccessors;
6754
6829
  if (svelte5Plus) {
6755
6830
  exportedNames.checkGlobalsForRunes(implicitStoreValues.getGlobals());
6756
6831
  }
@@ -6778,7 +6853,7 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
6778
6853
  addComponentExport({
6779
6854
  str,
6780
6855
  canHaveAnyProp: !exportedNames.uses$$Props && (uses$$props || uses$$restProps),
6781
- strictEvents: events.hasStrictEvents(),
6856
+ strictEvents: events.hasStrictEvents(), // TODO in Svelte 6 we should also apply strictEvents in runes mode
6782
6857
  isTsFile: options === null || options === void 0 ? void 0 : options.isTsFile,
6783
6858
  exportedNames,
6784
6859
  usesAccessors,
@@ -6787,6 +6862,7 @@ function svelte2tsx(svelte, options = { parse: compiler.parse }) {
6787
6862
  componentDocumentation,
6788
6863
  mode: options.mode,
6789
6864
  generics,
6865
+ isSvelte5: svelte5Plus,
6790
6866
  noSvelteComponentTyped: options.noSvelteComponentTyped
6791
6867
  });
6792
6868
  if (options.mode === 'dts') {
@@ -7004,6 +7080,11 @@ async function createTsCompilerHost(options, svelteMap) {
7004
7080
  */
7005
7081
  async function createSvelteMap(config) {
7006
7082
  const svelteFiles = new Map();
7083
+ // TODO detect Svelte version in here and set shimsPath accordingly if not given from above
7084
+ const noSvelteComponentTyped = config.svelteShimsPath
7085
+ .replace(/\\/g, '/')
7086
+ .endsWith('svelte2tsx/svelte-shims-v4.d.ts');
7087
+ const version = noSvelteComponentTyped ? undefined : '3.42.0';
7007
7088
  function add(path) {
7008
7089
  const code = ts.sys.readFile(path, 'utf-8');
7009
7090
  const isTsFile = /<script\s+[^>]*?lang=('|")(ts|typescript)('|")/.test(code);
@@ -7011,9 +7092,8 @@ async function createSvelteMap(config) {
7011
7092
  filename: path,
7012
7093
  isTsFile,
7013
7094
  mode: 'dts',
7014
- noSvelteComponentTyped: config.svelteShimsPath
7015
- .replace(/\\/g, '/')
7016
- .endsWith('svelte2tsx/svelte-shims-v4.d.ts')
7095
+ version,
7096
+ noSvelteComponentTyped: noSvelteComponentTyped
7017
7097
  }).code;
7018
7098
  svelteFiles.set(path, transformed);
7019
7099
  return isTsFile;
package/index.mjs CHANGED
@@ -3105,10 +3105,13 @@ function handleSnippet(str, snippetBlock, component) {
3105
3105
  let generic = '';
3106
3106
  if ((_e = snippetBlock.parameters) === null || _e === void 0 ? void 0 : _e.length) {
3107
3107
  generic = `<[${snippetBlock.parameters
3108
- .map((p) => p.typeAnnotation
3109
- ? str.original.slice(p.typeAnnotation.start + 1, p.typeAnnotation.end)
3110
- : // slap any on to it to silence "implicit any" errors; JSDoc people can't add types to snippets
3111
- 'any')
3108
+ .map((p) => {
3109
+ var _a;
3110
+ return ((_a = p.typeAnnotation) === null || _a === void 0 ? void 0 : _a.typeAnnotation)
3111
+ ? str.original.slice(p.typeAnnotation.typeAnnotation.start, p.typeAnnotation.typeAnnotation.end)
3112
+ : // slap any on to it to silence "implicit any" errors; JSDoc people can't add types to snippets
3113
+ 'any';
3114
+ })
3112
3115
  .join(', ')}]>`;
3113
3116
  }
3114
3117
  const typeAnnotation = surroundWithIgnoreComments(`: import('svelte').Snippet${generic}`);
@@ -4358,11 +4361,13 @@ function is$$PropsDeclaration(node) {
4358
4361
  return isInterfaceOrTypeDeclaration(node) && node.name.text === '$$Props';
4359
4362
  }
4360
4363
  class ExportedNames {
4361
- constructor(str, astOffset, basename, isTsFile) {
4364
+ constructor(str, astOffset, basename, isTsFile, isSvelte5Plus) {
4362
4365
  this.str = str;
4363
4366
  this.astOffset = astOffset;
4364
4367
  this.basename = basename;
4365
4368
  this.isTsFile = isTsFile;
4369
+ this.isSvelte5Plus = isSvelte5Plus;
4370
+ this.usesAccessors = false;
4366
4371
  /**
4367
4372
  * Uses the `$$Props` type
4368
4373
  */
@@ -4465,7 +4470,12 @@ class ExportedNames {
4465
4470
  ? element.propertyName.text
4466
4471
  : element.name.text;
4467
4472
  if (element.initializer) {
4468
- const call = element.initializer;
4473
+ let call = element.initializer;
4474
+ // if it's an as expression we need to check wether the as
4475
+ // expression expression is a call
4476
+ if (ts.isAsExpression(call)) {
4477
+ call = call.expression;
4478
+ }
4469
4479
  if (ts.isCallExpression(call) && ts.isIdentifier(call.expression)) {
4470
4480
  if (call.expression.text === '$bindable') {
4471
4481
  this.$props.bindings.push(name);
@@ -4488,7 +4498,9 @@ class ExportedNames {
4488
4498
  preprendStr(this.str, generic_arg.pos + this.astOffset, `;type ${this.$props.type} = `);
4489
4499
  this.str.appendLeft(generic_arg.end + this.astOffset, ';');
4490
4500
  this.str.move(generic_arg.pos + this.astOffset, generic_arg.end + this.astOffset, node.parent.pos + this.astOffset);
4491
- this.str.appendRight(generic_arg.end + this.astOffset, this.$props.type);
4501
+ this.str.appendRight(generic_arg.end + this.astOffset,
4502
+ // so that semantic tokens ignore it, preventing an overlap of tokens
4503
+ surroundWithIgnoreComments(this.$props.type));
4492
4504
  }
4493
4505
  }
4494
4506
  else {
@@ -4833,13 +4845,13 @@ class ExportedNames {
4833
4845
  */
4834
4846
  createPropsStr(uses$$propsOr$$restProps) {
4835
4847
  const names = Array.from(this.exports.entries());
4836
- if (this.$props.type) {
4837
- return '{} as any as ' + this.$props.type;
4838
- }
4839
- if (this.$props.comment) {
4840
- return this.$props.comment + '({})';
4841
- }
4842
4848
  if (this.usesRunes()) {
4849
+ if (this.$props.type) {
4850
+ return '{} as any as ' + this.$props.type;
4851
+ }
4852
+ if (this.$props.comment) {
4853
+ return this.$props.comment + '({})';
4854
+ }
4843
4855
  // Necessary, because {} roughly equals to any
4844
4856
  return this.isTsFile
4845
4857
  ? '{} as Record<string, never>'
@@ -4880,26 +4892,48 @@ class ExportedNames {
4880
4892
  const returnElementsType = this.createReturnElementsType(names);
4881
4893
  return `{${returnElements.join(' , ')}} as {${returnElementsType.join(', ')}}`;
4882
4894
  }
4895
+ hasNoProps() {
4896
+ if (this.usesRunes()) {
4897
+ return !this.$props.type && !this.$props.comment;
4898
+ }
4899
+ const names = Array.from(this.exports.entries());
4900
+ return names.length === 0;
4901
+ }
4883
4902
  createBindingsStr() {
4884
- // will be just the empty strings for zero bindings, which is impossible to create a binding for, so it works out fine
4885
- return `\n $$bindings = __sveltets_$$bindings('${this.$props.bindings.join("', '")}');`;
4903
+ if (this.usesRunes()) {
4904
+ // will be just the empty strings for zero bindings, which is impossible to create a binding for, so it works out fine
4905
+ return `__sveltets_$$bindings('${this.$props.bindings.join("', '")}')`;
4906
+ }
4907
+ else {
4908
+ return '""';
4909
+ }
4886
4910
  }
4887
4911
  /**
4888
4912
  * In runes mode, exports are no longer part of props because you cannot `bind:` to them,
4889
- * which is why we need a separate return type for them.
4913
+ * which is why we need a separate return type for them. In Svelte 5, the isomorphic component
4914
+ * needs them separate, too.
4890
4915
  */
4891
4916
  createExportsStr() {
4892
4917
  const names = Array.from(this.exports.entries());
4893
4918
  const others = names.filter(([, { isLet }]) => !isLet);
4894
- if (this.usesRunes() && others.length > 0) {
4895
- if (this.isTsFile) {
4896
- return (', exports: {} as any as { ' +
4897
- this.createReturnElementsType(others, undefined, true).join(',') +
4898
- ' }');
4919
+ const needsAccessors = this.usesAccessors && names.length > 0 && !this.usesRunes(); // runes mode doesn't support accessors
4920
+ if (this.isSvelte5Plus && (others.length > 0 || this.usesRunes() || needsAccessors)) {
4921
+ let str = '';
4922
+ if (others.length > 0 || needsAccessors) {
4923
+ if (this.isTsFile) {
4924
+ str +=
4925
+ ', exports: {} as any as { ' +
4926
+ this.createReturnElementsType(needsAccessors ? names : others, undefined, true).join(',') +
4927
+ ' }';
4928
+ }
4929
+ else {
4930
+ str += `, exports: /** @type {{${this.createReturnElementsType(needsAccessors ? names : others, false, true)}}} */ ({})`;
4931
+ }
4899
4932
  }
4900
- else {
4901
- return `, exports: /** @type {${this.createReturnElementsType(others, false, true)}} */ ({})`;
4933
+ if (this.usesRunes()) {
4934
+ str += `, bindings: ${this.createBindingsStr()}`;
4902
4935
  }
4936
+ return str;
4903
4937
  }
4904
4938
  return '';
4905
4939
  }
@@ -4931,12 +4965,17 @@ class ExportedNames {
4931
4965
  getExportsMap() {
4932
4966
  return this.exports;
4933
4967
  }
4968
+ hasExports() {
4969
+ const names = Array.from(this.exports.entries());
4970
+ return this.usesAccessors ? names.length > 0 : names.some(([, { isLet }]) => !isLet);
4971
+ }
4934
4972
  hasPropsRune() {
4935
- return this.$props.type || this.$props.comment;
4973
+ return this.isSvelte5Plus && (this.$props.type || this.$props.comment);
4936
4974
  }
4937
4975
  checkGlobalsForRunes(globals) {
4938
4976
  const runes = ['$state', '$derived', '$effect']; // no need to check for props, already handled through other means in here
4939
- this.hasRunesGlobals = globals.some((global) => runes.includes(global));
4977
+ this.hasRunesGlobals =
4978
+ this.isSvelte5Plus && globals.some((global) => runes.includes(global));
4940
4979
  }
4941
4980
  usesRunes() {
4942
4981
  return this.hasRunesGlobals || this.hasPropsRune();
@@ -5813,6 +5852,9 @@ class Generics {
5813
5852
  toReferencesString() {
5814
5853
  return this.references.length ? `<${this.references.join(',')}>` : '';
5815
5854
  }
5855
+ toReferencesAnyString() {
5856
+ return this.references.length ? `<${this.references.map(() => 'any').join(',')}>` : '';
5857
+ }
5816
5858
  has() {
5817
5859
  return this.definitions.length > 0;
5818
5860
  }
@@ -5893,12 +5935,12 @@ class InterfacesAndTypes {
5893
5935
  }
5894
5936
  }
5895
5937
 
5896
- function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, isTSFile, basename) {
5938
+ function processInstanceScriptContent(str, script, events, implicitStoreValues, mode, hasModuleScript, isTSFile, basename, isSvelte5Plus) {
5897
5939
  const htmlx = str.original;
5898
5940
  const scriptContent = htmlx.substring(script.content.start, script.content.end);
5899
5941
  const tsAst = ts.createSourceFile('component.ts.svelte', scriptContent, ts.ScriptTarget.Latest, true, ts.ScriptKind.TS);
5900
5942
  const astOffset = script.content.start;
5901
- const exportedNames = new ExportedNames(str, astOffset, basename, isTSFile);
5943
+ const exportedNames = new ExportedNames(str, astOffset, basename, isTSFile, isSvelte5Plus);
5902
5944
  const generics = new Generics(str, astOffset, script);
5903
5945
  const interfacesAndTypes = new InterfacesAndTypes();
5904
5946
  const implicitTopLevelNames = new ImplicitTopLevelNames(str, astOffset);
@@ -6207,7 +6249,7 @@ function addComponentExport(params) {
6207
6249
  addSimpleComponentExport(params);
6208
6250
  }
6209
6251
  }
6210
- function addGenericsComponentExport({ strictEvents, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics, usesSlots, noSvelteComponentTyped }) {
6252
+ function addGenericsComponentExport({ strictEvents, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, generics, usesSlots, isSvelte5, noSvelteComponentTyped }) {
6211
6253
  const genericsDef = generics.toDefinitionString();
6212
6254
  const genericsRef = generics.toReferencesString();
6213
6255
  const doc = componentDocumentation.getFormatted();
@@ -6226,7 +6268,11 @@ class __sveltets_Render${genericsDef} {
6226
6268
  slots() {
6227
6269
  return render${genericsRef}().slots;
6228
6270
  }
6229
- }
6271
+ ${isSvelte5
6272
+ ? ` bindings() { return ${exportedNames.createBindingsStr()}; }
6273
+ exports() { return ${exportedNames.hasExports() ? `render${genericsRef}().exports` : '{}'}; }
6274
+ }`
6275
+ : '}'}
6230
6276
  `;
6231
6277
  const svelteComponentClass = noSvelteComponentTyped
6232
6278
  ? 'SvelteComponent'
@@ -6234,24 +6280,28 @@ class __sveltets_Render${genericsDef} {
6234
6280
  const [PropsName] = addTypeExport(str, className, 'Props');
6235
6281
  const [EventsName] = addTypeExport(str, className, 'Events');
6236
6282
  const [SlotsName] = addTypeExport(str, className, 'Slots');
6237
- /**
6238
- * In Svelte 5 runes mode we add a custom constructor to override the default one which implicitly makes all properties bindable.
6239
- * Remove this once Svelte typings no longer do that (Svelte 6 or 7)
6240
- */
6241
- let customConstructor = '';
6242
- if (exportedNames.hasPropsRune()) {
6243
- if (!usesSlots) {
6244
- customConstructor = `\n constructor(options: import('svelte').ComponentConstructorOptions<${returnType('props')}>) { super(options); }`;
6245
- }
6246
- customConstructor += exportedNames.createBindingsStr();
6247
- }
6248
- if (mode === 'dts') {
6283
+ if (isSvelte5) {
6284
+ // Don't add props/events/slots type exports in dts mode for now, maybe someone asks for it to be back,
6285
+ // but it's safer to not do it for now to have more flexibility in the future.
6286
+ const propsType = !canHaveAnyProp && exportedNames.hasNoProps()
6287
+ ? `{$$events?: ${returnType('events')}${usesSlots ? `, $$slots?: ${returnType('slots')}, children?: any` : ''}}`
6288
+ : `${returnType('props')} & {$$events?: ${returnType('events')}${usesSlots ? `, $$slots?: ${returnType('slots')}, children?: any` : ''}}`;
6289
+ statement +=
6290
+ `\ninterface $$IsomorphicComponent {\n` +
6291
+ ` new ${genericsDef}(options: import('svelte').ComponentConstructorOptions<${returnType('props') + (usesSlots ? '& {children?: any}' : '')}>): import('svelte').SvelteComponent<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> & { $$bindings?: ${returnType('bindings')} } & ${returnType('exports')};\n` +
6292
+ ` ${genericsDef}(internal: unknown, props: ${propsType}): ${returnType('exports')};\n` +
6293
+ ` z_$$bindings?: ReturnType<__sveltets_Render${generics.toReferencesAnyString()}['bindings']>;\n` +
6294
+ `}\n` +
6295
+ `${doc}const ${className || '$$Component'}: $$IsomorphicComponent = null as any;\n` +
6296
+ surroundWithIgnoreComments(`type ${className || '$$Component'}${genericsDef} = InstanceType<typeof ${className || '$$Component'}${genericsRef}>;\n`) +
6297
+ `export default ${className || '$$Component'};`;
6298
+ }
6299
+ else if (mode === 'dts') {
6249
6300
  statement +=
6250
6301
  `export type ${PropsName}${genericsDef} = ${returnType('props')};\n` +
6251
6302
  `export type ${EventsName}${genericsDef} = ${returnType('events')};\n` +
6252
6303
  `export type ${SlotsName}${genericsDef} = ${returnType('slots')};\n` +
6253
6304
  `\n${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends ${svelteComponentClass}<${PropsName}${genericsRef}, ${EventsName}${genericsRef}, ${SlotsName}${genericsRef}> {` +
6254
- customConstructor +
6255
6305
  exportedNames.createClassGetters(genericsRef) +
6256
6306
  (usesAccessors ? exportedNames.createClassAccessors() : '') +
6257
6307
  '\n}';
@@ -6260,66 +6310,87 @@ class __sveltets_Render${genericsDef} {
6260
6310
  statement +=
6261
6311
  `\n\nimport { ${svelteComponentClass} as __SvelteComponentTyped__ } from "svelte" \n` +
6262
6312
  `${doc}export default class${className ? ` ${className}` : ''}${genericsDef} extends __SvelteComponentTyped__<${returnType('props')}, ${returnType('events')}, ${returnType('slots')}> {` +
6263
- customConstructor +
6264
6313
  exportedNames.createClassGetters(genericsRef) +
6265
6314
  (usesAccessors ? exportedNames.createClassAccessors() : '') +
6266
6315
  '\n}';
6267
6316
  }
6268
6317
  str.append(statement);
6269
6318
  }
6270
- function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, usesSlots, noSvelteComponentTyped }) {
6319
+ function addSimpleComponentExport({ strictEvents, isTsFile, canHaveAnyProp, exportedNames, componentDocumentation, fileName, mode, usesAccessors, str, usesSlots, noSvelteComponentTyped, isSvelte5 }) {
6271
6320
  const propDef = props(isTsFile, canHaveAnyProp, exportedNames, events(strictEvents, 'render()'));
6272
6321
  const doc = componentDocumentation.getFormatted();
6273
6322
  const className = fileName && classNameFromFilename(fileName, mode !== 'dts');
6274
- /**
6275
- * In Svelte 5 runes mode we add a custom constructor to override the default one which implicitly makes all properties bindable.
6276
- * Remove this once Svelte typings no longer do that (Svelte 6 or 7)
6277
- */
6278
- let customConstructor = '';
6279
- if (exportedNames.hasPropsRune()) {
6280
- if (!usesSlots) {
6281
- customConstructor = `\n constructor(options = __sveltets_2_runes_constructor(${propDef})) { super(options); }`;
6282
- }
6283
- customConstructor += exportedNames.createBindingsStr();
6284
- }
6285
6323
  let statement;
6286
- if (mode === 'dts' && isTsFile) {
6287
- const svelteComponentClass = noSvelteComponentTyped
6288
- ? 'SvelteComponent'
6289
- : 'SvelteComponentTyped';
6290
- const [PropsName, PropsExport] = addTypeExport(str, className, 'Props');
6291
- const [EventsName, EventsExport] = addTypeExport(str, className, 'Events');
6292
- const [SlotsName, SlotsExport] = addTypeExport(str, className, 'Slots');
6293
- statement =
6294
- `\nconst __propDef = ${propDef};\n` +
6295
- PropsExport +
6296
- EventsExport +
6297
- SlotsExport +
6298
- `\n${doc}export default class${className ? ` ${className}` : ''} extends ${svelteComponentClass}<${PropsName}, ${EventsName}, ${SlotsName}> {` +
6299
- customConstructor +
6300
- exportedNames.createClassGetters() +
6301
- (usesAccessors ? exportedNames.createClassAccessors() : '') +
6302
- '\n}';
6303
- }
6304
- else if (mode === 'dts' && !isTsFile) {
6305
- statement =
6306
- `\nconst __propDef = ${propDef};\n` +
6307
- `/** @typedef {typeof __propDef.props} ${className}Props */\n` +
6308
- `/** @typedef {typeof __propDef.events} ${className}Events */\n` +
6309
- `/** @typedef {typeof __propDef.slots} ${className}Slots */\n` +
6310
- `\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
6311
- customConstructor +
6312
- exportedNames.createClassGetters() +
6313
- (usesAccessors ? exportedNames.createClassAccessors() : '') +
6314
- '\n}';
6324
+ if (mode === 'dts') {
6325
+ if (isSvelte5) {
6326
+ // Inline definitions from Svelte shims; else dts files will reference the globals which will be unresolved
6327
+ statement =
6328
+ `\ninterface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
6329
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & { $$bindings?: Bindings } & Exports;
6330
+ (internal: unknown, props: ${!canHaveAnyProp && exportedNames.hasNoProps() ? '{$$events?: Events, $$slots?: Slots}' : 'Props & {$$events?: Events, $$slots?: Slots}'}): Exports;
6331
+ z_$$bindings?: Bindings;
6332
+ }\n` +
6333
+ (usesSlots
6334
+ ? `type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props &
6335
+ (Slots extends { default: any }
6336
+ ? Props extends Record<string, never>
6337
+ ? any
6338
+ : { children?: any }
6339
+ : {});
6340
+ declare function $$__sveltets_2_isomorphic_component_slots<
6341
+ Props extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>, Exports extends Record<string, any>, Bindings extends string
6342
+ >(klass: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }): $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, Slots>, Events, Slots, Exports, Bindings>;\n`
6343
+ : `
6344
+ declare function $$__sveltets_2_isomorphic_component<
6345
+ Props extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>, Exports extends Record<string, any>, Bindings extends string
6346
+ >(klass: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }): $$__sveltets_2_IsomorphicComponent<Props, Events, Slots, Exports, Bindings>;\n`) +
6347
+ `${doc}const ${className || '$$Component'} = $$__sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
6348
+ surroundWithIgnoreComments(`type ${className || '$$Component'} = InstanceType<typeof ${className || '$$Component'}>;\n`) +
6349
+ `export default ${className || '$$Component'};`;
6350
+ }
6351
+ else if (isTsFile) {
6352
+ const svelteComponentClass = noSvelteComponentTyped
6353
+ ? 'SvelteComponent'
6354
+ : 'SvelteComponentTyped';
6355
+ const [PropsName, PropsExport] = addTypeExport(str, className, 'Props');
6356
+ const [EventsName, EventsExport] = addTypeExport(str, className, 'Events');
6357
+ const [SlotsName, SlotsExport] = addTypeExport(str, className, 'Slots');
6358
+ statement =
6359
+ `\nconst __propDef = ${propDef};\n` +
6360
+ PropsExport +
6361
+ EventsExport +
6362
+ SlotsExport +
6363
+ `\n${doc}export default class${className ? ` ${className}` : ''} extends ${svelteComponentClass}<${PropsName}, ${EventsName}, ${SlotsName}> {` +
6364
+ exportedNames.createClassGetters() +
6365
+ (usesAccessors ? exportedNames.createClassAccessors() : '') +
6366
+ '\n}';
6367
+ }
6368
+ else {
6369
+ statement =
6370
+ `\nconst __propDef = ${propDef};\n` +
6371
+ `/** @typedef {typeof __propDef.props} ${className}Props */\n` +
6372
+ `/** @typedef {typeof __propDef.events} ${className}Events */\n` +
6373
+ `/** @typedef {typeof __propDef.slots} ${className}Slots */\n` +
6374
+ `\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
6375
+ exportedNames.createClassGetters() +
6376
+ (usesAccessors ? exportedNames.createClassAccessors() : '') +
6377
+ '\n}';
6378
+ }
6315
6379
  }
6316
6380
  else {
6317
- statement =
6318
- `\n\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
6319
- customConstructor +
6320
- exportedNames.createClassGetters() +
6321
- (usesAccessors ? exportedNames.createClassAccessors() : '') +
6322
- '\n}';
6381
+ if (isSvelte5) {
6382
+ statement =
6383
+ `\n${doc}const ${className || '$$Component'} = __sveltets_2_isomorphic_component${usesSlots ? '_slots' : ''}(${propDef});\n` +
6384
+ surroundWithIgnoreComments(`type ${className || '$$Component'} = InstanceType<typeof ${className || '$$Component'}>;\n`) +
6385
+ `export default ${className || '$$Component'};`;
6386
+ }
6387
+ else {
6388
+ statement =
6389
+ `\n\n${doc}export default class${className ? ` ${className}` : ''} extends __sveltets_2_createSvelte2TsxComponent(${propDef}) {` +
6390
+ exportedNames.createClassGetters() +
6391
+ (usesAccessors ? exportedNames.createClassAccessors() : '') +
6392
+ '\n}';
6393
+ }
6323
6394
  }
6324
6395
  str.append(statement);
6325
6396
  }
@@ -6355,7 +6426,10 @@ function events(strictEvents, renderStr) {
6355
6426
  return strictEvents ? renderStr : `__sveltets_2_with_any_event(${renderStr})`;
6356
6427
  }
6357
6428
  function props(isTsFile, canHaveAnyProp, exportedNames, renderStr) {
6358
- if (isTsFile) {
6429
+ if (exportedNames.usesRunes()) {
6430
+ return renderStr;
6431
+ }
6432
+ else if (isTsFile) {
6359
6433
  return canHaveAnyProp ? `__sveltets_2_with_any(${renderStr})` : renderStr;
6360
6434
  }
6361
6435
  else {
@@ -6716,7 +6790,7 @@ function svelte2tsx(svelte, options = { parse }) {
6716
6790
  : instanceScriptTarget;
6717
6791
  const implicitStoreValues = new ImplicitStoreValues(resolvedStores, renderFunctionStart);
6718
6792
  //move the instance script and process the content
6719
- let exportedNames = new ExportedNames(str, 0, basename, options === null || options === void 0 ? void 0 : options.isTsFile);
6793
+ let exportedNames = new ExportedNames(str, 0, basename, options === null || options === void 0 ? void 0 : options.isTsFile, svelte5Plus);
6720
6794
  let generics = new Generics(str, 0, { attributes: [] });
6721
6795
  let uses$$SlotsInterface = false;
6722
6796
  if (scriptTag) {
@@ -6725,12 +6799,13 @@ function svelte2tsx(svelte, options = { parse }) {
6725
6799
  str.move(scriptTag.start, scriptTag.end, instanceScriptTarget);
6726
6800
  }
6727
6801
  const res = processInstanceScriptContent(str, scriptTag, events, implicitStoreValues, options.mode,
6728
- /**hasModuleScripts */ !!moduleScriptTag, options === null || options === void 0 ? void 0 : options.isTsFile, basename);
6802
+ /**hasModuleScripts */ !!moduleScriptTag, options === null || options === void 0 ? void 0 : options.isTsFile, basename, svelte5Plus);
6729
6803
  uses$$props = uses$$props || res.uses$$props;
6730
6804
  uses$$restProps = uses$$restProps || res.uses$$restProps;
6731
6805
  uses$$slots = uses$$slots || res.uses$$slots;
6732
6806
  ({ exportedNames, events, generics, uses$$SlotsInterface } = res);
6733
6807
  }
6808
+ exportedNames.usesAccessors = usesAccessors;
6734
6809
  if (svelte5Plus) {
6735
6810
  exportedNames.checkGlobalsForRunes(implicitStoreValues.getGlobals());
6736
6811
  }
@@ -6758,7 +6833,7 @@ function svelte2tsx(svelte, options = { parse }) {
6758
6833
  addComponentExport({
6759
6834
  str,
6760
6835
  canHaveAnyProp: !exportedNames.uses$$Props && (uses$$props || uses$$restProps),
6761
- strictEvents: events.hasStrictEvents(),
6836
+ strictEvents: events.hasStrictEvents(), // TODO in Svelte 6 we should also apply strictEvents in runes mode
6762
6837
  isTsFile: options === null || options === void 0 ? void 0 : options.isTsFile,
6763
6838
  exportedNames,
6764
6839
  usesAccessors,
@@ -6767,6 +6842,7 @@ function svelte2tsx(svelte, options = { parse }) {
6767
6842
  componentDocumentation,
6768
6843
  mode: options.mode,
6769
6844
  generics,
6845
+ isSvelte5: svelte5Plus,
6770
6846
  noSvelteComponentTyped: options.noSvelteComponentTyped
6771
6847
  });
6772
6848
  if (options.mode === 'dts') {
@@ -6984,6 +7060,11 @@ async function createTsCompilerHost(options, svelteMap) {
6984
7060
  */
6985
7061
  async function createSvelteMap(config) {
6986
7062
  const svelteFiles = new Map();
7063
+ // TODO detect Svelte version in here and set shimsPath accordingly if not given from above
7064
+ const noSvelteComponentTyped = config.svelteShimsPath
7065
+ .replace(/\\/g, '/')
7066
+ .endsWith('svelte2tsx/svelte-shims-v4.d.ts');
7067
+ const version = noSvelteComponentTyped ? undefined : '3.42.0';
6987
7068
  function add(path) {
6988
7069
  const code = ts.sys.readFile(path, 'utf-8');
6989
7070
  const isTsFile = /<script\s+[^>]*?lang=('|")(ts|typescript)('|")/.test(code);
@@ -6991,9 +7072,8 @@ async function createSvelteMap(config) {
6991
7072
  filename: path,
6992
7073
  isTsFile,
6993
7074
  mode: 'dts',
6994
- noSvelteComponentTyped: config.svelteShimsPath
6995
- .replace(/\\/g, '/')
6996
- .endsWith('svelte2tsx/svelte-shims-v4.d.ts')
7075
+ version,
7076
+ noSvelteComponentTyped: noSvelteComponentTyped
6997
7077
  }).code;
6998
7078
  svelteFiles.set(path, transformed);
6999
7079
  return isTsFile;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svelte2tsx",
3
- "version": "0.7.8",
3
+ "version": "0.7.9",
4
4
  "description": "Convert Svelte components to TSX for type checking",
5
5
  "author": "David Pershouse",
6
6
  "license": "MIT",
package/svelte-shims-v4.d.ts CHANGED
@@ -70,30 +70,30 @@ declare function __sveltets_2_slotsType<Slots, Key extends keyof Slots>(slots: S
70
70
  // An empty array of optionalProps makes OptionalProps type any, which means we lose the prop typing.
71
71
  // optionalProps need to be first or its type cannot be infered correctly.
72
72
 
73
- declare function __sveltets_2_partial<Props = {}, Events = {}, Slots = {}>(
74
- render: {props: Props, events: Events, slots: Slots }
75
- ): {props: Expand<SveltePropsAnyFallback<Props>>, events: Events, slots: Expand<SvelteSlotsAnyFallback<Slots>> }
76
- declare function __sveltets_2_partial<Props = {}, Events = {}, Slots = {}, OptionalProps extends keyof Props = any>(
73
+ declare function __sveltets_2_partial<Props = {}, Events = {}, Slots = {}, Exports = {}, Bindings = string>(
74
+ render: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }
75
+ ): {props: Expand<SveltePropsAnyFallback<Props>>, events: Events, slots: Expand<SvelteSlotsAnyFallback<Slots>>, exports?: Exports, bindings?: Bindings }
76
+ declare function __sveltets_2_partial<Props = {}, Events = {}, Slots = {}, Exports = {}, Bindings = string, OptionalProps extends keyof Props = any>(
77
77
  optionalProps: OptionalProps[],
78
- render: {props: Props, events: Events, slots: Slots }
79
- ): {props: Expand<SvelteWithOptionalProps<SveltePropsAnyFallback<Props>, OptionalProps>>, events: Events, slots: Expand<SvelteSlotsAnyFallback<Slots>> }
78
+ render: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }
79
+ ): {props: Expand<SvelteWithOptionalProps<SveltePropsAnyFallback<Props>, OptionalProps>>, events: Events, slots: Expand<SvelteSlotsAnyFallback<Slots>>, exports?: Exports, bindings?: Bindings }
80
80
 
81
- declare function __sveltets_2_partial_with_any<Props = {}, Events = {}, Slots = {}>(
82
- render: {props: Props, events: Events, slots: Slots }
83
- ): {props: Expand<SveltePropsAnyFallback<Props> & SvelteAllProps>, events: Events, slots: Expand<SvelteSlotsAnyFallback<Slots>> }
84
- declare function __sveltets_2_partial_with_any<Props = {}, Events = {}, Slots = {}, OptionalProps extends keyof Props = any>(
81
+ declare function __sveltets_2_partial_with_any<Props = {}, Events = {}, Slots = {}, Exports = {}, Bindings = string>(
82
+ render: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }
83
+ ): {props: Expand<SveltePropsAnyFallback<Props> & SvelteAllProps>, events: Events, slots: Expand<SvelteSlotsAnyFallback<Slots>>, exports?: Exports, bindings?: Bindings }
84
+ declare function __sveltets_2_partial_with_any<Props = {}, Events = {}, Slots = {}, Exports = {}, Bindings = string, OptionalProps extends keyof Props = any>(
85
85
  optionalProps: OptionalProps[],
86
- render: {props: Props, events: Events, slots: Slots }
87
- ): {props: Expand<SvelteWithOptionalProps<SveltePropsAnyFallback<Props>, OptionalProps> & SvelteAllProps>, events: Events, slots: Expand<SvelteSlotsAnyFallback<Slots>> }
86
+ render: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }
87
+ ): {props: Expand<SvelteWithOptionalProps<SveltePropsAnyFallback<Props>, OptionalProps> & SvelteAllProps>, events: Events, slots: Expand<SvelteSlotsAnyFallback<Slots>>, exports?: Exports, bindings?: Bindings }
88
88
 
89
89
 
90
- declare function __sveltets_2_with_any<Props = {}, Events = {}, Slots = {}>(
91
- render: {props: Props, events: Events, slots: Slots }
92
- ): {props: Expand<Props & SvelteAllProps>, events: Events, slots: Slots }
90
+ declare function __sveltets_2_with_any<Props = {}, Events = {}, Slots = {}, Exports = {}, Bindings = string>(
91
+ render: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }
92
+ ): {props: Expand<Props & SvelteAllProps>, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }
93
93
 
94
- declare function __sveltets_2_with_any_event<Props = {}, Events = {}, Slots = {}>(
95
- render: {props: Props, events: Events, slots: Slots }
96
- ): {props: Props, events: Events & {[evt: string]: CustomEvent<any>;}, slots: Slots }
94
+ declare function __sveltets_2_with_any_event<Props = {}, Events = {}, Slots = {}, Exports = {}, Bindings = string>(
95
+ render: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }
96
+ ): {props: Props, events: Events & {[evt: string]: CustomEvent<any>;}, slots: Slots, exports?: Exports, bindings?: Bindings }
97
97
 
98
98
  declare function __sveltets_2_store_get<T = any>(store: SvelteStore<T>): T
99
99
  declare function __sveltets_2_store_get<Store extends SvelteStore<any> | undefined | null>(store: Store): Store extends SvelteStore<infer T> ? T : Store;
@@ -225,8 +225,11 @@ declare type ATypedSvelteComponent = {
225
225
  * ```
226
226
  */
227
227
  declare type ConstructorOfATypedSvelteComponent = new (args: {target: any, props?: any}) => ATypedSvelteComponent
228
- declare function __sveltets_2_ensureComponent<T extends ConstructorOfATypedSvelteComponent | null | undefined>(type: T): NonNullable<T>;
229
-
228
+ declare function __sveltets_2_ensureComponent<
229
+ // @ts-ignore svelte.Component doesn't exist in Svelte 4
230
+ T extends ConstructorOfATypedSvelteComponent | (0 extends (1 & import('svelte').Component) ? never : import('svelte').Component<any, any, any>) | null | undefined
231
+ // @ts-ignore svelte.Component doesn't exist in Svelte 4
232
+ >(type: T): NonNullable<T extends ConstructorOfATypedSvelteComponent ? T : 0 extends (1 & import('svelte').Component) ? T : T extends import('svelte').Component<infer Props> ? typeof import('svelte').SvelteComponent<Props, Props['$$events'], Props['$$slots']> : T>;
230
233
  declare function __sveltets_2_ensureArray<T extends ArrayLike<unknown> | Iterable<unknown>>(array: T): T extends ArrayLike<infer U> ? U[] : T extends Iterable<infer U> ? Iterable<U> : any[];
231
234
 
232
235
  type __sveltets_2_PropsWithChildren<Props, Slots> = Props &
@@ -241,3 +244,17 @@ type __sveltets_2_PropsWithChildren<Props, Slots> = Props &
241
244
  declare function __sveltets_2_runes_constructor<Props extends {}>(render: {props: Props }): import("svelte").ComponentConstructorOptions<Props>;
242
245
 
243
246
  declare function __sveltets_$$bindings<Bindings extends string[]>(...bindings: Bindings): Bindings[number];
247
+
248
+ interface __sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
249
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & { $$bindings?: Bindings } & Exports;
250
+ (internal: unknown, props: Props extends Record<string, never> ? {$$events?: Events, $$slots?: Slots} : Props & {$$events?: Events, $$slots?: Slots}): Exports;
251
+ z_$$bindings?: Bindings;
252
+ }
253
+
254
+ declare function __sveltets_2_isomorphic_component<
255
+ Props extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>, Exports extends Record<string, any>, Bindings extends string
256
+ >(klass: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }): __sveltets_2_IsomorphicComponent<Props, Events, Slots, Exports, Bindings>;
257
+
258
+ declare function __sveltets_2_isomorphic_component_slots<
259
+ Props extends Record<string, any>, Events extends Record<string, any>, Slots extends Record<string, any>, Exports extends Record<string, any>, Bindings extends string
260
+ >(klass: {props: Props, events: Events, slots: Slots, exports?: Exports, bindings?: Bindings }): __sveltets_2_IsomorphicComponent<__sveltets_2_PropsWithChildren<Props, Slots>, Events, Slots, Exports, Bindings>;