quote slot name to avoid invalid syntax and number slot name

packages/svelte2tsx/src/htmlxtojsx/index.ts

@@ -6,6 +6,7 @@ import svgAttributes from './svgattributes';
 import { getTypeForComponent } from './nodes/component-type';
 import { handleAwait } from './nodes/await-block';
 import { getSlotName } from '../utils/svelteAst';
+import { getSingleSlotDef } from '../nodes/slot';
 
 type ElementType = string;
 const oneWayBindingAttributes: Map<string, ElementType> = new Map(
@@ -318,7 +319,7 @@ export function convertHtmlxToJsx(
         str.appendLeft(afterTag, '{() => { let {');
         str.appendRight(
             afterTag,
-            '} = __sveltets_instanceOf(' + componentName + ').$$slot_def.' + slotName + ';<>',
+            `} = ${getSingleSlotDef(componentName, slotName)}`+ ';<>',
         );
 
         const closeTagStart = htmlx.lastIndexOf('<', slotEl.end);

packages/svelte2tsx/src/nodes/slot.ts

@@ -116,9 +116,7 @@ export class SlotHandler {
         component: Node,
         slotName: string,
     ) {
-        const componentTypeStr = `__sveltets_instanceOf(${component.name})`;
-
-        return `${componentTypeStr}.$$slot_def.${slotName}.${letNode.name}`;
+        return `${getSingleSlotDef(component.name, slotName)}.${letNode.name}`;
     }
 
     resolveLet(letNode: BaseDirective, identifierDef: WithName, component: Node, slotName: string) {
@@ -259,3 +257,7 @@ export class SlotHandler {
         throw Error('Unknown attribute value type:' + attrVal.type);
     }
 }
+
+export function getSingleSlotDef(componentName: string, slotName: string) {
+    return `__sveltets_instanceOf(${componentName}).$$slot_def['${slotName}']`;
+}

packages/svelte2tsx/src/svelte2tsx.ts

@@ -1006,7 +1006,7 @@ function createRenderFunction({
                 const attrsAsString = Array.from(attrs.entries())
                     .map(([exportName, expr]) => `${exportName}:${expr}`)
                     .join(', ');
-                return `${name}: {${attrsAsString}}`;
+                return `'${name}': {${attrsAsString}}`;
             })
             .join(', ') +
         '}';

packages/svelte2tsx/test/htmlx2jsx/samples/component-default-slot-let-destructure/expected.jsx

@@ -1,3 +1,3 @@
-<><Component >{() => { let {thing:{ a }} = __sveltets_instanceOf(Component).$$slot_def.default;<>
+<><Component >{() => { let {thing:{ a }} = __sveltets_instanceOf(Component).$$slot_def['default'];<>
     <h1>Hello { a }</h1>
 </>}}</Component></>

packages/svelte2tsx/test/htmlx2jsx/samples/component-default-slot-let/expected.jsx

@@ -1,3 +1,3 @@
-<><Component  >{() => { let {name:n, thing} = __sveltets_instanceOf(Component).$$slot_def.default;<>
+<><Component  >{() => { let {name:n, thing} = __sveltets_instanceOf(Component).$$slot_def['default'];<>
     <h1>Hello {thing} {n}</h1>
-</>}}</Component></>
+</>}}</Component></>

packages/svelte2tsx/test/htmlx2jsx/samples/component-multi-slot/expected.jsx

@@ -1,9 +1,9 @@
-<><Component >{() => { let {var:new_var} = __sveltets_instanceOf(Component).$$slot_def.default;<>
+<><Component >{() => { let {var:new_var} = __sveltets_instanceOf(Component).$$slot_def['default'];<>
     <h1>Hello</h1>
-    <div  >{() => { let {slotvar:newvar} = __sveltets_instanceOf(Component).$$slot_def.someslot;<>
+    <div  >{() => { let {slotvar:newvar} = __sveltets_instanceOf(Component).$$slot_def['someslot'];<>
         <h2>Hi Slot</h2>
     </>}}</div>
     <p >
         Test
     </p>
-</>}}</Component></>
+</>}}</Component></>

packages/svelte2tsx/test/svelte2tsx/samples/component-default-slot/expected.tsx

@@ -7,7 +7,7 @@
 <div>
     <slot a={b}>Hello</slot>
 </div></>);
-return { props: {}, slots: {default: {a:b}}, getters: {}, events: {} }}
+return { props: {}, slots: {'default': {a:b}}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/component-multiple-slots/expected.tsx

@@ -9,8 +9,9 @@
 <div>
     <slot a={b}>Hello</slot>
     <slot name="test" c={d} e={e}></slot>
+    <slot name="abc-cde.113"></slot>
 </div></>);
-return { props: {}, slots: {default: {a:b}, test: {c:d, e:e}}, getters: {}, events: {} }}
+return { props: {}, slots: {'default': {a:b}, 'test': {c:d, e:e}, 'abc-cde.113': {}}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/component-multiple-slots/input.svelte

@@ -6,4 +6,5 @@
 <div>
     <slot a={b}>Hello</slot>
     <slot name="test" c={d} {e}></slot>
+    <slot name="abc-cde.113"></slot>
 </div>

packages/svelte2tsx/test/svelte2tsx/samples/component-slot-crazy-attributes/expected.tsx

@@ -7,7 +7,7 @@
 <div>
     <slot a={b} b={b} c="b" d={`a${b}`} e={b} >Hello</slot>
 </div></>);
-return { props: {}, slots: {default: {a:b, b:b, c:"b", d:"__svelte_ts_string", e:b}}, getters: {}, events: {} }}
+return { props: {}, slots: {'default': {a:b, b:b, c:"b", d:"__svelte_ts_string", e:b}}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/component-slot-inside-await/expected.tsx

@@ -8,7 +8,7 @@
 {() => {let _$$p = (promise2); __sveltets_awaitThen(_$$p, ({ b }) => {<>
     <slot name="second" a={b}>Hello</slot>
 </>})}}</>
-return { props: {}, slots: {default: {a:__sveltets_unwrapPromiseLike(promise)}, err: {err:__sveltets_any({})}, second: {a:(({ b }) => b)(__sveltets_unwrapPromiseLike(promise2))}}, getters: {}, events: {} }}
+return { props: {}, slots: {'default': {a:__sveltets_unwrapPromiseLike(promise)}, 'err': {err:__sveltets_any({})}, 'second': {a:(({ b }) => b)(__sveltets_unwrapPromiseLike(promise2))}}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/component-slot-inside-each/expected.tsx

@@ -6,7 +6,7 @@
 {__sveltets_each(items2, ({ a }) => <>
     <slot name="second" a={a}>Hello</slot>
 </>)}</>
-return { props: {}, slots: {default: {a:__sveltets_unwrapArr(items)}, second: {a:(({ a }) => a)(__sveltets_unwrapArr(items2))}}, getters: {}, events: {} }}
+return { props: {}, slots: {'default': {a:__sveltets_unwrapArr(items)}, 'second': {a:(({ a }) => a)(__sveltets_unwrapArr(items2))}}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/component-slot-let-forward-named-slot/expected.tsx

@@ -1,11 +1,11 @@
 ///<reference types="svelte" />
 <></>;function render() {
 <><Component>
-    <div  >{() => { let {a} = __sveltets_instanceOf(Component).$$slot_def.b;<>
+    <div  >{() => { let {a} = __sveltets_instanceOf(Component).$$slot_def['b'];<>
         <slot a={a}></slot>
     </>}}</div>
 </Component></>
-return { props: {}, slots: {default: {a:__sveltets_instanceOf(Component).$$slot_def.b.a}}, getters: {}, events: {} }}
+return { props: {}, slots: {'default': {a:__sveltets_instanceOf(Component).$$slot_def['b'].a}}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/component-slot-let-forward/expected.tsx

@@ -1,9 +1,9 @@
 ///<reference types="svelte" />
 <></>;function render() {
-<><Component   >{() => { let {name:n, thing, whatever:{ bla }} = __sveltets_instanceOf(Component).$$slot_def.default;<>
+<><Component   >{() => { let {name:n, thing, whatever:{ bla }} = __sveltets_instanceOf(Component).$$slot_def['default'];<>
     <slot n={n} thing={thing} bla={bla} />
 </>}}</Component></>
-return { props: {}, slots: {default: {n:__sveltets_instanceOf(Component).$$slot_def.default.name, thing:__sveltets_instanceOf(Component).$$slot_def.default.thing, bla:(({ bla }) => bla)(__sveltets_instanceOf(Component).$$slot_def.default.whatever)}}, getters: {}, events: {} }}
+return { props: {}, slots: {'default': {n:__sveltets_instanceOf(Component).$$slot_def['default'].name, thing:__sveltets_instanceOf(Component).$$slot_def['default'].thing, bla:(({ bla }) => bla)(__sveltets_instanceOf(Component).$$slot_def['default'].whatever)}}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/component-slot-nest-scope/expected.tsx

@@ -6,12 +6,12 @@
     </>)}
     <slot name="second" a={ a }></slot>
 </>)}
-<Component >{() => { let {c} = __sveltets_instanceOf(Component).$$slot_def.default;<>{ c }</>}}</Component>
+<Component >{() => { let {c} = __sveltets_instanceOf(Component).$$slot_def['default'];<>{ c }</>}}</Component>
 {() => {let _$$p = (promise); __sveltets_awaitThen(_$$p, (d) => {<>
     {d}
 </>})}}
 <slot name="third" d={d} c={c}></slot></>
-return { props: {}, slots: {default: {a:(({ a }) => a)(__sveltets_unwrapArr(__sveltets_unwrapArr(items)))}, second: {a:a}, third: {d:d, c:c}}, getters: {}, events: {} }}
+return { props: {}, slots: {'default': {a:(({ a }) => a)(__sveltets_unwrapArr(__sveltets_unwrapArr(items)))}, 'second': {a:a}, 'third': {d:d, c:c}}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/component-slot-object-key/expected.tsx

@@ -3,7 +3,7 @@
 <>{__sveltets_each(items, (item) => <>
     <slot a={item} b={{ item }} c={{ item: 'abc' }.item} d={{ item: item }}>Hello</slot>
 </>)}</>
-return { props: {}, slots: {default: {a:__sveltets_unwrapArr(items), b:{ item:__sveltets_unwrapArr(items) }, c:{ item: 'abc' }.item, d:{ item: __sveltets_unwrapArr(items) }}}, getters: {}, events: {} }}
+return { props: {}, slots: {'default': {a:__sveltets_unwrapArr(items), b:{ item:__sveltets_unwrapArr(items) }, c:{ item: 'abc' }.item, d:{ item: __sveltets_unwrapArr(items) }}}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/component-slot-var-shadowing/expected.tsx

@@ -3,7 +3,7 @@
 <>{__sveltets_each(items, (items) => <>
     <slot a={items}>Hello</slot>
 </>)}</>
-return { props: {}, slots: {default: {a:__sveltets_unwrapArr(items)}}, getters: {}, events: {} }}
+return { props: {}, slots: {'default': {a:__sveltets_unwrapArr(items)}}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/uses-$$slots-script/expected.tsx

@@ -8,7 +8,7 @@
 <h1>{name}</h1>
 <slot name="foo" />
 <slot /></>);
-return { props: {}, slots: {foo: {}, default: {}}, getters: {}, events: {} }}
+return { props: {}, slots: {'foo': {}, 'default': {}}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
 }

packages/svelte2tsx/test/svelte2tsx/samples/uses-$$slots/expected.tsx

@@ -4,7 +4,7 @@
 
 <slot name="foo" />
 <slot /></>
-return { props: {}, slots: {foo: {}, default: {}}, getters: {}, events: {} }}
+return { props: {}, slots: {'foo': {}, 'default': {}}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ extends createSvelte2TsxComponent(__sveltets_partial(__sveltets_with_any_event(render))) {
-}
+}