(svelte2tsx) wrap template with callback

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_ {

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

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

packages/svelte2tsx/test/svelte2tsx/samples/export-class/expected.tsx

@@ -2,7 +2,7 @@
 
      class Foo {};
 ;
-<></>
+() => (<></>);
 return { props: {}, slots: {}, getters: {Foo: Foo}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/export-js-strictMode/expected.tsx

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

packages/svelte2tsx/test/svelte2tsx/samples/export-list/expected.tsx

@@ -4,7 +4,7 @@
     let name2 = "world"
 
 ;
-<></>
+() => (<></>);
 return { props: {name: name , name2: name2}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/export-references-local/expected.tsx

@@ -3,7 +3,7 @@
     let world = "world";
      let name = world;
 ;
-<></>
+() => (<></>);
 return { props: {name: name}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/export-with-default-multi/expected.tsx

@@ -4,7 +4,7 @@
      let name = "world";name = __sveltets_any(name);;let 
         world = '';
 ;
-<></>
+() => (<></>);
 return { props: {name: name , world: world}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/import-single-quote/expected.tsx

@@ -4,8 +4,8 @@ function render() {
 
 
 ;
-<><Test b="6" ></Test> 
-</>
+() => (<><Test b="6" ></Test> 
+</>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/imports/expected.tsx

@@ -8,8 +8,8 @@ function render() {
 
      let world = "name"
 ;
-<><h1>hello {world}</h1>
-</>
+() => (<><h1>hello {world}</h1>
+</>);
 return { props: {world: world}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/module-script-and-script-in-line/expected.tsx

@@ -1,6 +1,6 @@
 <></>;let b = 5;;<></>;function render() {
  let world = "name";
-<><h1>hello {world}</h1></>
+() => (<><h1>hello {world}</h1></>);
 return { props: {world: world}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/module-script-and-script-in-line2/expected.tsx

@@ -1,6 +1,6 @@
 <></>;let b = 5;;<></>;function render() {
  let world = "name";
-<><h1>hello {world}</h1></>
+() => (<><h1>hello {world}</h1></>);
 return { props: {world: world}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/module-script-and-script/expected.tsx

@@ -5,9 +5,9 @@
 
      let world = "name"
 ;
-<>
+() => (<>
 
-<h1>hello {world}</h1></>
+<h1>hello {world}</h1></>);
 return { props: {world: world}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/module-script-and-script2/expected.tsx

@@ -5,9 +5,9 @@
 
      let world = "name"
 ;
-<><h1>hello {world}</h1>
+() => (<><h1>hello {world}</h1>
 
-</>
+</>);
 return { props: {world: world}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/nested-$-variables-script/expected.tsx

@@ -21,7 +21,7 @@ function test3() {
 const test4 = ({a,  b: { $top1: $top2 }}) => $top2 && __sveltets_store_get(top1)
 
 ;
-<></>
+() => (<></>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

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

@@ -2,7 +2,7 @@
 
      let { name: rename } = { name: "world" };
 ;
-<></>
+() => (<></>);
 return { props: {rename: rename}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/reactive-block/expected.tsx

@@ -5,7 +5,7 @@ let a: 1 | 2 = 1;
     console.log(a + 1);
 }}
 ;
-<></>
+() => (<></>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare-object/expected.tsx

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

packages/svelte2tsx/test/svelte2tsx/samples/reactive-declare/expected.tsx

@@ -6,7 +6,7 @@ let  b = __sveltets_invalidate(() => 7);
 let a;
 $: a = __sveltets_invalidate(() => 5);
 ;
-<></>
+() => (<></>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/renamed-exports/expected.tsx

@@ -4,7 +4,7 @@
     let name2 = "world"
 
 ;
-<></>
+() => (<></>);
 return { props: {name3: name , name4: name2}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/script-and-module-script/expected.tsx

@@ -5,9 +5,9 @@
 
      let world = "name"
 ;
-<>
+() => (<>
 <h1>hello {world}</h1>
-</>
+</>);
 return { props: {world: world}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/script-inside-head-after-toplevel-script/expected.tsx

@@ -2,7 +2,7 @@
 
   let b = 'top level';
 ;
-<><div>
+() => (<><div>
 
 </div>
 
@@ -11,7 +11,7 @@
 <sveltehead>
   <link rel="stylesheet" href="/lib/jodit.es2018.min.css" />
 
-</sveltehead></>
+</sveltehead></>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/script-on-bottom/expected.tsx

@@ -2,8 +2,8 @@
 
      let world = "name"
 ;
-<><h1>hello {world}</h1>
-</>
+() => (<><h1>hello {world}</h1>
+</>);
 return { props: {world: world}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/script-style-like-component/expected.tsx

@@ -2,12 +2,12 @@
 
     let Script, Style;
 ;
-<>
+() => (<>
 
 <Script>
     <p></p>
 </Script>
-<Style /></>
+<Style /></>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/self-closing-component/expected.tsx

@@ -5,8 +5,8 @@ function render() {
 
 let a = 'b';
 ;
-<><Test b="6" />
-</>
+() => (<><Test b="6" />
+</>);
 return { props: {}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/single-export/expected.tsx

@@ -2,7 +2,7 @@
 
      let name = "world"
 ;
-<></>
+() => (<></>);
 return { props: {name: name}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {

packages/svelte2tsx/test/svelte2tsx/samples/ts-export-arrow-function/expected.tsx

@@ -5,7 +5,7 @@
       return c;
     }
 ;
-<></>
+() => (<></>);
 return { props: {f: f} as {f?: typeof f}, slots: {}, getters: {}, events: {} }}
 
 export default class Input__SvelteComponent_ {