A reusable Svelte component library that compiles components on-demand and serves them as ES modules.

This library serves compiled Svelte components via an HTTP endpoint. Components are:

• Stored as .svelte files in the components/ directory
• Compiled on-demand using the Svelte compiler
• Imports rewritten to use CDN URLs (esm.sh) for Svelte runtime
• Cached for performance
• Served as ES modules that can be imported anywhere

├── backend/
│   └── index.ts           # HTTP endpoint (Hono app)
├── components/
│   └── button/
│       └── Button.svelte  # Example component
└── README.md

1. Create a new HTTP val in Val Town
2. Copy the contents of backend/index.ts to your val
3. Create the component files in the Val Town file system using the file editor

Once deployed, you can import components in your pala blocks or other projects:

// Import the compiled component
import Button from 'https://your-username-componentlib.web.val.run/button'

// Use it in your Svelte app
<Button variant="primary" size="medium">Click me</Button>

1. Create a new folder in components/ with your component name (lowercase)
2. Create a .svelte file with the capitalized component name

Example for a Card component:

components/
└── card/
    └── Card.svelte

3. The component will automatically be available at /card

<script>
	export let variant = 'primary'
	export let disabled = false
</script>

<button class="{variant}" {disabled}>
	<slot>Default text</slot>
</button>

<style>
	button {
		padding: 10px 20px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}

	.primary {
		background: #0066ff;
		color: white;
	}
</style>

1. Install Deno
2. Run the server:

   deno run --allow-net --allow-read backend/index.ts

These endpoints are available for development purposes:

• POST /cache/clear - Clear all cached components
• POST /cache/clear/:component - Clear cache for specific component

Example:

curl -X POST https://your-val.web.val.run/cache/clear/button

The Svelte compiler is configured with:

• format: 'esm' - ES module output
• generate: 'dom' - Client-side rendering
• css: 'injected' - CSS is injected into the component (no separate stylesheet needed)

After compilation, imports like import { ... } from 'svelte/internal' are rewritten to import { ... } from 'https://esm.sh/svelte@4.2.8/internal' so they can be resolved by the browser or other environments.

You can modify these options in backend/index.ts in the compile_component function.

Compiled components are cached in memory to improve performance. The cache persists for the lifetime of the val instance.

• Components are compiled at runtime on first request
• Svelte runtime dependencies are imported from esm.sh CDN
• Subsequent requests are served from cache
• Val Town's serverless environment may clear the cache between cold starts
• For production use, consider pre-compiling components or implementing persistent caching