https://github.com/jawish/svelte-customelement-rollup

https://github.com/jawish/svelte-customelement-rollup

svelte svelte-components svelte-example

Last synced: 21 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/jawish/svelte-customelement-rollup
• Owner: jawish
• Created: 2020-05-10T11:11:23.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-07-15T16:45:28.000Z (over 2 years ago)
• Last Synced: 2024-10-05T11:18:20.500Z (about 1 month ago)
• Topics: svelte, svelte-components, svelte-example
• Language: JavaScript
• Size: 27.3 KB
• Stars: 28
• Watchers: 4
• Forks: 3
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Svelte Custom Element vs Svelte Component

This demo demostrates how to use Rollup's config to allow building and exposing some Svelte components with svelte-options tag set and customElements=true while allowing other components to be built and used as Svelte components.

This is achieved by using the special file extension '.wc.svelte' for components to be built as Custom Elements and the usual '.svelte' extension for Svelte components. Then have two plugin blocks in the Rollup config to build the two types separately.

```

svelte({ customElement: true, include: /\.wc\.svelte$/ }),

svelte({ customElement: false, exclude: /\.wc\.svelte$/ }),

```

In the custom element below, only the my-component is exposed as the web component in the build while OtherComponent and NestedComponent as built as normal Javascript Svelte components.

See the built demo: [https://jawish.github.io/svelte-customelement-rollup](https://jawish.github.io/svelte-customelement-rollup).