# Reload SPA in card templates

**URL:** <https://forums.ankiweb.net/t/reload-spa-in-card-templates/48415>\
**Category:** Development\
**Created:** [August 20, 2024, 5:57am UTC](https://forums.ankiweb.net/t/reload-spa-in-card-templates/48415 "2024-08-20T05:57:47Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![guido.flohr](https://avatars.discourse-cdn.com/v4/letter/g/7bcc69/32.png) [@guido.flohr](https://forums.ankiweb.net/u/guido.flohr)\
**Post date:** [August 20, 2024, 5:57am UTC](https://forums.ankiweb.net/t/reload-spa-in-card-templates/48415/1 "2024-08-20T05:57:47Z")

</div>

I am creating a card template that runs a single-page application, more precisely a Svelte app. The HTML of the front template roughly looks like this:

```html
<div id="app"></div>
<script>let side = 'question'</script>
<script type="module" crossorigin src="/_addons/705507113/assets/index-BZJA7hBY.js"></script>

```

The back template looks the same, only that the variable `side` is set to “answer”.

When the app is first displayed, everything is fine. But on all subsequent occasions, the app is not rendered. When I add a cache-busting query parameter to the script URL, things work again, but - of course - just once:

```html
<script type="module" crossorigin src="/_addons/705507113/assets/index-BZJA7hBY.js?123xyz"></script>

```

I am pretty sure that I can remedy this by dynamically inserting the script tag with a timestamp as a script parameter. But that seems to be a little bit awkward because it will reload and parse the exact same JavaScript code every time the app is displayed.

Is there a smarter way to fix this?

---

<div class="post-metadata">

**Author:** ![dae](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/dae/32/65_2.png) [@dae](https://forums.ankiweb.net/u/dae)\
**Post date:** [August 21, 2024, 6:52am UTC](https://forums.ankiweb.net/t/reload-spa-in-card-templates/48415/2 "2024-08-21T06:52:44Z")

</div>

Perhaps changing let to var will help.

---

<div class="post-metadata">

**Author:** ![guido.flohr](https://avatars.discourse-cdn.com/v4/letter/g/7bcc69/32.png) [@guido.flohr](https://forums.ankiweb.net/u/guido.flohr)\
**Post date:** [August 21, 2024, 9:46am UTC](https://forums.ankiweb.net/t/reload-spa-in-card-templates/48415/3 "2024-08-21T09:46:18Z")

</div>

No, it doesn’t. In fact, it is actually a `const` scoped to an IIFE:

```html
		<script>
		(() => {
                        // ...
			const side = 'question';
			console.log(side);
                        // ...
		})();
		</script>

<script type="module" crossorigin src="/_addons/705507113/assets/index-BZJA7hBY.js"></script>

```

That works, because I see the value of `side` inside the console, whenever the view changes.

The “problem” is the attribute `type="module"` of the script tag. The JavaScript file (the Svelte app) ends with this piece of code:

```javascript
console.log('creating app');
new App({
  target: document.getElementById("app")
});
console.log('creating app done');

```

The `console.log` statements are from me and they are executed only once. In study mode that is, when the question is displayed. When I click “view answer” and for subsequent cards, they are not executed.

The solution would therefore be to omit the `type="module"` but that leads to tons of errors like `const xy already defined`. These errors would most probably go away if I changed the target from ES6 to ES3 so that no `const` is used. But I think that I will rather go with dynamically inserting the script with a timestamp URL parameter and force a re-load of the JavaScript.

The takeaway from my point of view is: Anki does not do a full page reload like a browser does, when the view changes. Scripts loaded statically with `type="module"` are executed only once. I have to verify that but I’m pretty sure that this is the case.

---

<div class="post-metadata">

**Author:** ![dae](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/dae/32/65_2.png) [@dae](https://forums.ankiweb.net/u/dae)\
**Post date:** [August 21, 2024, 9:52am UTC](https://forums.ankiweb.net/t/reload-spa-in-card-templates/48415/4 "2024-08-21T09:52:50Z")

</div>

Yes, that is correct. A simple solution would be to put the bulk of the code in a module, and do the actual initialisation/creation of the app in an inline script tag.

---

<div class="post-metadata">

**Author:** ![guido.flohr](https://avatars.discourse-cdn.com/v4/letter/g/7bcc69/32.png) [@guido.flohr](https://forums.ankiweb.net/u/guido.flohr)\
**Post date:** [August 21, 2024, 10:12am UTC](https://forums.ankiweb.net/t/reload-spa-in-card-templates/48415/5 "2024-08-21T10:12:16Z")

</div>

Sure, but this is a Svelte app and Svelte, resp. [`vite-plugin-svelte`](https://github.com/sveltejs/vite-plugin-svelte) does not seem to support that flexibility.

Any chance to get this somewhat surprising behaviour documented? I think it would be very helpful to have a description of the context in which JavaScript code inside card templates gets executed, and how that context differs from a “normal” browser context. For example, if you want to use `const` variable declarations in inline script tags or scripts not included with `type="module"`, you have to scope them, for example with IIFEs.

---

<div class="post-metadata">

**Author:** ![dae](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/dae/32/65_2.png) [@dae](https://forums.ankiweb.net/u/dae)\
**Post date:** [August 21, 2024, 12:04pm UTC](https://forums.ankiweb.net/t/reload-spa-in-card-templates/48415/6 "2024-08-21T12:04:49Z")

</div>

It is covered briefly in the [Javascript section](https://docs.ankiweb.net/templates/styling.html#javascript). If you feel more should be said, a PR would be welcome.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [September 20, 2024, 12:05pm UTC](https://forums.ankiweb.net/t/reload-spa-in-card-templates/48415/7 "2024-09-20T12:05:22Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.