How to send Component.svelte over HTTP?

[LazerJesus]

Hi,
I have some components on a server (independent and external from sveltekit) and want to serve them over http.

I imagine the process to go something like this:
1: read .svelte as string
2: pass to svelte/compiler/parser to get ast (recursively for dependencies)
3: send json over http
4: compile the ast into svelte components and mount to dom.

In the end I dont really care about the intermediate representations OR the process, as long as i can send components over http and render them.

there are two components (the details dont matter):
Game.svelte

<script>
    import Button from './Button.svelte';
    let score = 0;
    setInterval(() => {
    score = Math.random() * 100;
    }, 5000);
</script>

<div>
    <h1>Game</h1>
    Score: {score.toFixed(2)}
    <Button {score} />
</div>

Button.svelte

<script>
    export let score;
</script>

{#if score > 50}
<button>Click me</button>{:else}
<button disabled>Get more score</button>{/if} 

server.js

   route("/game/test", async (body, ctx) => {
    const entryFilePath = resolve(root, 'Game.svelte');
    const ast = parseSvelteFileRecursive(entryFilePath);
    // ast <{
    //   "ast": {
    //     "html": { },
    //     "instance": { }
    //   },
    //   "dependencies": [
    //     {
    //       "ast": {
    //         "html": { },
    //         "instance": { }
    //       },
    //       "dependencies": []
    //     }
    //   ]
    // }>
    return { ast };
  });

+page.svelte

<script>
  let ast = $state(null);
  let Component = $state(null);

  async function fetchAndCompileAST() {
      const response = await fetch('http://localhost:5175/game/test');
      ast = await response.json();
      // MAGIC 
      // MAGIC 
      Component = compileWithDependencies(ast) 
      // MAGIC 
      // MAGIC 

  }

  $effect(() => {
    fetchAndCompileAST();
  });
</script>

{#if Component}
  <svelte:component this={Component} />
{:else}
  <p>Loading component...</p>
{/if}

[brunnerh]

1. Why?
2. I see no reason to only parse/tokenize, just fully compile the component and send the JS/CSS, if anything.

[Prinzhorn]

Extending on this answer (point 2): I think all you need/want is const Component = await import('http://localhost:5175/game/test') and return the compiled component (with css: 'injected'). There is no actual magic required. But you might need to manually mount it and not use <svelte:component>, not sure how that interacts.

[brunnerh]

For a dynamic import you need to get the default from the module.

const Component = await import('...').then(m => m.default);

Though you maybe also could just use a regular import instead of a dynamic one.

[LazerJesus]

just fully compile the component and send the JS/CSS, if anything.

how? @Prinzhorn

Why

each component is a user generated widget. makes no sense to re-build the entire client on every database push.

[Prinzhorn]

how? @Prinzhorn

Pseudo code:

import { compile } from 'svelte/compiler'

const result = compile(your_component_code_eg_fs_readfile, {
    css: 'inject',
    // ... other options
});

send_to_client_with_correct_content_type(result.js.code);

But you're right, this is probably more involved and the SO post you've linked is likely what you want. I did something similar in the past but with esbuild-svelte and compiling to a string.

[LazerJesus]

Found the answer in this incredible writeup: https://stackoverflow.com/a/65522522

If anyone has an improvement on hat @rixo has done here, i am all ears and it would be highly appreciated, but thats what i am going with for now.