https://github.com/novacbn/svelte-window-component
Simple Svelte v3 Web Component for dynamically loading Svelte Components from a register
https://github.com/novacbn/svelte-window-component
svelte web-components
Last synced: 4 months ago
JSON representation
Simple Svelte v3 Web Component for dynamically loading Svelte Components from a register
- Host: GitHub
- URL: https://github.com/novacbn/svelte-window-component
- Owner: novacbn
- License: mit
- Created: 2019-12-19T07:53:09.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T12:58:31.000Z (over 3 years ago)
- Last Synced: 2025-07-13T12:46:21.608Z (11 months ago)
- Topics: svelte, web-components
- Language: HTML
- Size: 937 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-window-component
## Description
Simple Svelte v3 Web Component for dynamically loading Svelte Components from a register
## Caveats
There's three important caveats you should consider before using this library:
- As the description suggests, this library relies on the [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) spec for functionality.
- Since this is a Web Component, for obvious reasons this will not be SSR'd (server-side rendered).
- The [`WindowComponent`](/src/WindowComponent.svelte) Component is pretty much a hack, both utilizing Web Components and Svelte's internal APIs.
## Developer
### Installation
Open your terminal and install via `npm`:
```sh
npm install git+https://github.com/novacbn/svelte-window-component
```
### Usage
Firstly, you need to load the Browser bundle that's located [`dist/`](/dist):
```html
```
Next, you need to register a Svelte Component, using this Component as an example:
**SampleComponent.svelte**
```html
```
And then registering it, utilizing the `WindowComponent` global namespace:
```js
import SampleComponent from "./SampleComponent.svelte";
const {WindowComponent} = window;
WindowComponent.register_component("my-header", SampleComponent);
```
Once registered, just utilize the `` Web Component like so:
```html
I am a header!
```
Note also, all the attributes of `` are passed into the registered Component as props.
### Recommendations
Given that `WindowComponent` is a globally accessible singleton instance, it is recommended to register Components with it utilizing a namespace to play more nicely with other library consumers.
- Bad: `WindowComponent.register_component("my-cool-component", ...);`
- Good: `WindowComponent.register_component("namespace-my-cool-component", ...);`
## Use Case
I came up with this roundabout solution for dynamic rendering of Svelte Components, for my [`novacbn/svelte-docs`](https://github.com/novacbn/svelte-docs) project. Where the end-developers can utilize custom `svelte-docs` provided Components within their Markdown documentation files without a custom runtime to parse and replace HTML manually.
Which parses something like:
```markdown
# Button
## Button Styles
An interactive button can be created via the [`Button`](/framework/elements/button) Component, and can be customized with different look and feels. Below, you can find all the built-in styles `Luda` supports.
### Solid Buttons
const {Button} = luda;
Primary
Secondary
Dark
Light
Danger
```
Into something like:
```html
Button
Button Styles
...
Solid Buttons
...
```
That way, I don't have to provide a small runtime to find and hook into DOM. But rather, utilize Web Components instead to do the heavy lifting, and support `` based elements without utilizing the non-public facing internals manually.