This project defines a Svelte backend for .lcod
folders containing a server.mjs
file.
flowchart LR
A(Imported\nHelloWorld.lcod) -->|lcod-backend\nif exists server.mjs| B(Register)
B -->|handle\nwith server.mjs|C(Backend API\n/lcod/HelloWorld)
A -->|import lcod-backend/client| D(Client\ncode)
D -->|call|C
C -->|response|D
A server.mjs
file can be defined in a .lcod
component and it's used to define the backend code of the component, simply invoked by the call
function.
In your svelte project, edit the vite.config.js
to declare the lcod-backend
.
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';
import { lcodBackendConfig } from 'lcod-backend/config';
export default defineConfig({
plugins: [sveltekit(), lcodBackendConfig()],
test: {
include: ['src/**/*.{test,spec}.{js,ts}']
}
});
You have to export default
a function
that take one data
object in argument and return a value. This function can be async
and use await
.
import { error } from '@sveltejs/kit';
/**
* @param {{ min: any; max: any; }} data
*/
export default function handle(data) {
const min = Number(data.min ?? '0');
const max = Number(data.max ?? '1');
const d = max - min;
if (isNaN(d) || d < 0) {
throw error(400, 'min and max must be numbers, and min must be less than max');
}
const rnd = '' + Math.round(min + Math.random() * d);
return { rnd };
}
<script>
import { onMount } from 'svelte';
import { lcodName, call } from 'lcod-backend/client';
let rnd = 'loading...';
onMount(async () => {
rnd = (await call({ min: 100, max: 200 })).rnd;
});
</script>
<h1>{lcodName} here {rnd}</h1>
Have KISS piece of code to simplify the sharing of front + back
in a .lcod
component.
Generating Svelte code allows to have benefits of all its avantages: fast and light compilation, HMR
development and allows many CSR
/SSR
configurations.