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

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

• Stored as .svelte files in the components/ directory
• Compiled on-demand using the Svelte compiler
• Bundled with Rollup to include all dependencies (no external imports needed)
• Cached for performance
• Served as standalone 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)

Components are then bundled with Rollup to create standalone modules that include all Svelte runtime dependencies.

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

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

• Components are compiled and bundled at runtime on first request
• Bundling includes all Svelte runtime dependencies, so no external imports are needed
• Subsequent requests are served from cache
• Val Town's serverless environment may clear the cache between cold starts
• For production use, consider pre-bundling components or implementing persistent caching