wrap template with callback (#314)

Author: jasonlyu123

packages/svelte2tsx/src/svelte2tsx.ts

@@ -923,7 +923,8 @@ function createRenderFunction({
         str.overwrite(scriptTag.start + 1, scriptTagEnd, `function render() {${propsDecl}\n`);
 
         const scriptEndTagStart = htmlx.lastIndexOf('<', scriptTag.end - 1);
-        str.overwrite(scriptEndTagStart, scriptTag.end, ';\n<>', {
+        // wrap template with callback
+        str.overwrite(scriptEndTagStart, scriptTag.end, ';\n() => (<>', {
             contentOnly: true,
         });
     } else {
@@ -947,6 +948,12 @@ function createRenderFunction({
             isTsFile
         )}, slots: ${slotsAsDef}, getters: ${createRenderFunctionGetterStr(getters)}` +
         `, events: ${eventMapToString(events)} }}`;
+
+    // wrap template with callback
+    if (scriptTag) {
+        str.append(');');
+    }
+
     str.append(returnString);
 }
 

packages/svelte2tsx/test/sourcemaps/let.html

@@ -2,8 +2,8 @@
 
     let  selected = __sveltets_invalidate(() => lookup.get(slug));
 ;
-<>
-</>
+() => (<>
+</>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class {

packages/svelte2tsx/test/sourcemaps/repl.html

@@ -112,7 +112,7 @@
 		});
 	}
 ;
-<>
+() => (<>
 
 
 
@@ -176,7 +176,7 @@
 		<ScreenToggle offset={offset} labels={['tutorial', 'input', 'output']}/>
 	</>}}}
 </div>
-</>
+</>);
 return { props: {slug: slug , chapter: chapter}, slots: {}, getters: {}, events: {} }}
 
 export default class {

packages/svelte2tsx/test/svelte2tsx/samples/array-binding-export/expected.tsx

@@ -2,7 +2,7 @@
 
      let [a,b,c] = [1,2,3];
 ;
-<></>
+() => (<></>);
 return { props: {a: a , b: b , c: c}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/ast-offset-none/expected.tsx

@@ -1,6 +1,6 @@
 <></>;function render() {
 __sveltets_store_get(var);
-<></>
+() => (<></>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/ast-offset-some/expected.tsx

@@ -1,6 +1,6 @@
 <></>;function render() {
    __sveltets_store_get(var);
-<></>
+() => (<></>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/await-with-$store/expected.tsx

@@ -5,13 +5,13 @@ function render() {
 
 	const store = readable(Promise.resolve('test'), () => {});
 ;
-<>
+() => (<>
 
 {() => {let _$$p = (__sveltets_store_get(store)); <>
 	<p>loading</p>
 </>; _$$p.then((data) => {<>
 	{data}
-</>})}}</>
+</>})}}</>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/circle-drawer-example/expected.tsx

@@ -57,7 +57,7 @@
 		return circles.map(({ cx, cy, r }) => ({ cx, cy, r }));
 	}
 ;
-<>
+() => (<>
 
 
 
@@ -86,7 +86,7 @@
 		<p>adjust diameter of circle at {selected.cx}, {selected.cy}</p>
 		<input type="range" value={selected.r} oninput={adjust}/>
 	</div>
-</>}}}</>
+</>}}}</>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

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

@@ -2,10 +2,10 @@
 
     let b = 7;
 ;
-<>
+() => (<>
 <div>
     <slot a={b}>Hello</slot>
-</div></>
+</div></>);
 return { props: {}, slots: {default: {a:b}}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

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

@@ -4,11 +4,11 @@
     let d = 5;
     let e = 5;
 ;
-<>
+() => (<>
 <div>
     <slot a={b}>Hello</slot>
     <slot name="test" c={d} e={e}></slot>
-</div></>
+</div></>);
 return { props: {}, slots: {default: {a:b}, test: {c:d, e:e}}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {