Svelte Component Library for Val Town

A reusable Svelte component library that serves raw .svelte files for use in pala blocks and other build tools.

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

• Stored as .svelte files in the components/ directory
• Served as raw text for consumption by build tools (like pala)
• Cached for performance
• Can be imported and compiled by the consuming application's build process

├── 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 component (use .svelte extension for better build tool recognition)
import Button from 'https://your-username-componentlib.web.val.run/button.svelte'

// 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 library simply serves the raw .svelte files from the components/ directory. When you import a component:

1. Your build tool (like pala) fetches the raw .svelte file
2. Your build tool compiles it with its own Svelte compiler
3. The component gets bundled into your application

This approach ensures compatibility with any Svelte build setup since you're using your own compiler and configuration.

Raw component files are cached in memory to improve performance. The cache persists for the lifetime of the val instance.

• Components are served as raw .svelte files
• Your build tool handles compilation with its own Svelte version
• Subsequent requests are served from cache
• Val Town's serverless environment may clear the cache between cold starts
• This approach ensures maximum compatibility with different Svelte versions and build setups