WebComponent template

svelte component

This is a component template for Svelte. It lives at https://github.com/Axelen123/svelte-component-template.

To create a new project based on this template using degit:

npx degit Axelen123/svelte-component-template svelte-component
cd svelte-component

Note that you will need to have Node.js installed.

Get started

Install the dependencies...

cd svelte-component
npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see a preview of your component running. Edit a component file in src, save it, and reload the page to see your changes.

Usage

When you want to use the component you need too first build your app:

npm run build

Svelte or with regular html

Copy public/bundle.js and public/bundle.js.map to your server's asset folder:

cp public/bundle.js* YOUR_ASSETS_FOLDER

Include the script and component in your html file:

<script src="bundle.js"></script>
<svelte-component name="WebComponents"></svelte-component>
<!--
You can change the name of the tag by editing rollup.config.js and index.html.
-->

Angular

Make a directory in src called web-components

Edit your module file:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
import '../web-components/YOUR_COMPONENT_JS';
 
@NgModule({
  declarations: [
    // Your Angular components
  ],
  imports: [
    // Your imports
  ],
  providers: [
      // Your providers
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class YourModule { }

Edit your tsconfig.json:

{
    "compilerOptions": {
        "allowJs": true
    }
}