Import svelte html file into js file using rollup

Question

Js file:

import template from './Template.html';

class VacationListForCompany extends HTMLElement {

constructor() {
    super();
    const root = this.attachShadow({mode:'open'});

    const t = new template({ target: root });

  }
}

window.customElements.define("vacation-list-for-company", 
VacationListForCompany);

Svelte/HTML file

<h1> This is from SVELTE </h1>
<script>
    export default {
    };
</script>

And in my Rollupfile import svelte from 'rollup-plugin-svelte';

export default {
   input: 'Widgets/VacationListForCompany/widget.js',
   output: {
      format: 'iife',
      file: 'dist/vacationlistforcompany.js',
  },
  plugins: [
    svelte({ include:'*.html'})
  ],
};

Seems like rollup is not able to generate svelte component on import.. Am I missunderstanding something here?

Answer 1

By default, Svelte compiles the HTML file into a Svelte component. See the docs for the Svelte component API .

To generate a custom element instead, you need to pass customelement: true to the compiler (in your case, by setting it in the options passed to rollup-plugin-svelte ). See PR 797

Answer 2

It was of cource an error from my side... the

svelte({ include:'*.html'}) 

for some reason is misspelled, removing this made it work..