https://github.com/posetmage/wc
svelte 5 web-components template that compile with vite 6
https://github.com/posetmage/wc
svelte vite web-components
Last synced: 12 months ago
JSON representation
svelte 5 web-components template that compile with vite 6
- Host: GitHub
- URL: https://github.com/posetmage/wc
- Owner: PosetMage
- License: mit
- Created: 2025-06-19T11:50:15.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-29T07:43:41.000Z (12 months ago)
- Last Synced: 2025-06-29T08:30:55.450Z (12 months ago)
- Topics: svelte, vite, web-components
- Language: Svelte
- Homepage:
- Size: 97.7 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Svetle 5 Web Component Template
A starter repository for building Sevlte 5 as web components with Vite 6 and deploying. This template supports multiple modules via configurable in `vite.config.ts`, and is automatically built and deployed via GitHub Actions.
## Getting Started
### Configuration
Open `vite.config.ts` and locate the `build.rollupOptions.input` section. Add, remove, or rename modules as needed:
```ts
export default defineConfig({
build: {
rollupOptions: {
input: {
slides: resolve(__dirname, 'src/slides/main.ts'),
doc_ui: resolve(__dirname, 'src/doc_ui/main.ts'),
wc: resolve(__dirname, 'src/wc/main.ts')
// Add your own modules here
}
}
}
});
```
After running `npm run build`, each module will be output as an ES module. ex:
- `dist/slides.es.js`
- `dist/doc_ui.es.js`
- `dist/wc.es.js`
These are served from your deployment domain (e.g., `https://posetmage.com/wc/.es.js`).
---
### Usage Examples
#### 1. Document UI (Auto TOC Sidebar)
Embed the documentation UI component to automatically generate a table of contents sidebar:
```html
{{ content }}
```
see `demo/1/index.html`
#### 2. Slides Mode
Transform your Markdown content into a slide deck, with sidebar navigation:
but this need slide syntax, please see **[Example Slides Content](https://raw.githubusercontent.com/HomunMage/Content/main/Slides/2025/JSDC/index.md)** or **[Example Slides Page](https://homun.posetmage.com/Content/Slides/2025/JSDC/)**
```html
{{ content }}
```
see `demo/2/index.html`
---
## Deployment and Development
This repo auto trigger GitHub Actions workflow (`.github/workflows/deploy.yml`) to build and deploy with github-page.
### Self-Hosting Deployment (Kubernetes)
This template includes a `k8s/` directory with sample manifests for running your web components by a Kubernetes.
(need modify `wc-deployment.yaml`)
## Dev with Docker Compose
If you dont want to dev with node env, I'll recommand you docker,
1. Start the dev container, Enter the container shell
From the project root:
```bash
docker-compose up dev -d
docker-compose exec dev bash
```
2. Build your modules
in the termianl
```bash
npm run build
```
This outputs your ES modules into `dist/` folder
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.