# Issues 


## Lazy Loading

`WsUtils` is now a thin compatibility re-export (`EventBus` + `WsProtocol`) and is **lazy** in the SFC `moduleCache`
(see `lazyModules` in `VueUtils.mjs`). The core never imports it, so static sites do not download msgpack.
Node applications can keep importing `{fromBinary, fromByteArray, eventBus}` from `'WsUtils'`.

A backend or island (HTTP or WebSocket) still downloads rxjs (HttpBackend imports it for `exec2`).
Possible improvement: load rxjs only when `exec2` is first called.

## Plan: Lazy-load vue3-sfc-loader

Plan: Lazy-load vue3-sfc-loader

Problem
vue3-sfc-loader is imported statically at the top of VueUtils.mjs (line 19), meaning the entire heavy library is parsed and executed on every page load — even when SFC compilation is never needed.
Solution

Replace the static import with a lazy import() that only triggers when loadModule is first called.

Changes needed (all in VueUtils.mjs):

1. Remove the static import on line 19:
   import {loadModule, vueVersion} from 'vue3-sfc-loader'

2. Add a lazy-loading helper (singleton pattern):
   let _sfcLoader = null
   async function getSfcLoader() {
   if (!_sfcLoader) {
   _sfcLoader = import('vue3-sfc-loader')
   _sfcLoader = await _sfcLoader
   logger.info(`vue3-sfc-loader vue version ${_sfcLoader.vueVersion}`)
   }
   return _sfcLoader
   }

3. Update loadModuleFromText() (line 206) — await the loader before calling it:
   const { loadModule } = await getSfcLoader()
   return await loadModule(virtualPath, textOptions)

4. Replace the re-exported loadModule (line 293) with a wrapper function:
   export async function sfcLoadModule(path, opts) {
   const { loadModule } = await getSfcLoader()
   return loadModule(path, opts)
   }

5. Update GlobalStore.mjs line 10 and line 193 — change the import from loadModule to sfcLoadModule and update the call. Since GlobalStore.mjs already wraps it in an async function (api.loadModule at line 190), this is a trivial change.
6. Remove the eager vueVersion log on line 39 — it moves into getSfcLoader() so it fires on first use instead.



## Theming 

I created the `Theme.vue` and `Theme.mjs` with Opus 4.6. It is pretty much AI slop (but it works).
It needs to be cleaned up. 


## Loading SVG issues 

(or likely same issue with any image)

In a SFC

:src="../assets/loading.svg"
does not work

but
src="../assets/loading.svg"
does work.

This means
when it is a variable it doesn't go through VueUtils for some reason


# Improvements

## Switching islands

When switching islands it would be great to call a function in the island to perform actions against the global store. This includes changing the nav bar and the footer and the title. perhaps even the theme.


## Support Pre-Comiled SFCs

Compiled PageMain.vue -> PageMain.compiled.mjs

A compiled SFC is just a regular JS module that exports a Vue component object with a render function.

The browser can load it with a native import() — no vue3-sfc-loader needed.

Before starting the app, run a script that reads .vue files and outputs compiled .mjs files


For components/ — all 35 .vue files get compiled and concatenated into a single bundle file like dist/components.mjs that exports every component:

```js
// dist/components.mjs (auto-generated)
import { ref, computed, ... } from 'vue'
// --- xcard.vue ---
const _xcard_render = (_ctx, _cache) => { /* compiled template */ }
const xcard = { setup() { /* ... */ }, render: _xcard_render }
// --- xinput.vue ---
const _xinput_render = (_ctx, _cache) => { /* compiled template */ }
const xinput = { setup() { /* ... */ }, render: _xinput_render }

// ... all other components ...
export { xcard, xinput, xtabs, /* ... */ }
 ```


The options.moduleCache already supports pre-populated entries. You could inject pre-compiled components directly into it before the app starts, and vue3-sfc-loader would skip fetching/compiling them entirely (it checks the cache first)


leaf components are ideal candidates for a single-file bundle



# Supporting Absolut LInks in nav router

Turn it into a beforeEnter guard 
```js
if (route.redirect && /^https?:\/\//.test(route.redirect)) {
const externalUrl = route.redirect;
transformedRoute.beforeEnter = () => {
window.location.href = externalUrl;
};
} else if (route.redirect !== undefined) {
transformedRoute.redirect = route.redirect;
}

 ```











[root] [connect] - start ... loglevel-plugin-prefix.min.js:1:1183
XHRPOST
http://sorsha.com:443/cookie?connectionId=root

XHROPTIONS
http://sorsha.com:443/cookie?connectionId=root
CORS Missing Allow Origin

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://sorsha.com:443/cookie?connectionId=root. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 400.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://sorsha.com:443/cookie?connectionId=root. (Reason: CORS request did not succeed). Status code: (null).
authenticationFailed - fetchCookie
TypeError: NetworkError when attempting to fetch resource. vue3-sfc-loader.esm.js line 113 > Function:3:1397
Scroll anchoring was disabled in a scroll container because of too many consecutive adjustments (10) with too little total distance (-0.156666672229767 px average, -1.56667 px total). reflow.js:199:27