quote slot name to avoid invalid syntax and number slot name (#491)

for example:
<slot name="1" />
<slot name="ddd-d" />
#490

Author: jasonlyu123

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))) {
 }