DEV Community

loading...
Cover image for Make awesome WebComponents with Svelte

Make awesome WebComponents with Svelte

Patryk Rzucidło
🐞 Javascript Developer - I make awesome Open Source software, bot, app and tools.
・4 min read

🏗 svelte-webcomponent-boilerplate

Create your HTML5 Web Component with Svelte. Made your web components with this friendly boilerplate.

https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/

📎 Menu

💡 Features

  • [✔️] Easy to use
  • [✔️] MIT License
  • [✔️] Text animation by Nooray Yemon on Codepen
  • [✔️] Friendly boilerplate + Github templates
  • [✔️] Powered by svelte framework
  • [✔️] Without jQuery depencence
  • [✔️] Configurable with attributes
  • [✔️] Customization with CSS Style
  • [✔️] HTML5 Custom Elements - Native webcomponents
  • [✔️] Work with: Browserify / Webpack / ReactJS / Svelte / Angular / Vue / Wordpress
  • [✔️] Typescript + TSPaths preconfigured
  • [✔️] Userfriendly folders tree
  • [✔️] Prettiers and ESLint preconfigured
  • [✔️] all-contributors-cli and all-shields-cli preconfigured
  • [✔️] JEST Test preconfigured
  • [✔️] Full async code
  • [✔️] Github and Vscode dotfiles preconfigured
  • [✔️] Translations i18n: 🇬🇧 🇮🇹 🇵🇱 (Help me ❤️)

👔 Screenshot

See Demo here.

WebComponent: Svelte WebComponent Boilerplate

🚀 Installation (Web)

  1. Add html code to your page:
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
Enter fullscreen mode Exit fullscreen mode
  1. Require javascript in yourpage (before </body>):
<script src="https://cdn.jsdelivr.net/npm/@ptkdev/svelte-webcomponent-boilerplate@latest/dist/webcomponent.js"></script>
Enter fullscreen mode Exit fullscreen mode

You can replace @latest with specific version, example @2.0.1.

Below is available a description of options values.

📦 Installation (NPM Module - Browserify/Webpack)

  1. Install npm module: npm install @ptkdev/svelte-webcomponent-boilerplate --save
  2. Add html code to your page:
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
Enter fullscreen mode Exit fullscreen mode
  1. Require javascript in your app:
require("@ptkdev/svelte-webcomponent-boilerplate");
Enter fullscreen mode Exit fullscreen mode

or

import "@ptkdev/svelte-webcomponent-boilerplate";
Enter fullscreen mode Exit fullscreen mode

Below is available a description of options values.

📖 Installation (Wordpress)

  1. Download wordpress plugin from mirror and install it.
  2. Add code to your html widget, example: Appearance --> Widget --> insert HTML Widget and paste html code:
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
Enter fullscreen mode Exit fullscreen mode

You can insert this html code in posts, widget, html box or theme.

🔵 Installation (React)

  1. Install npm module with npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save:
  2. Import module in your src/App.js on header:
import "@ptkdev/svelte-webcomponent-boilerplate";
Enter fullscreen mode Exit fullscreen mode
  1. Add html code to your App.js template:
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
Enter fullscreen mode Exit fullscreen mode

🔴 Installation (Angular)

  1. Install npm module with npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save:
  2. Import module in your app/app.modules.ts on header:
import "@ptkdev/svelte-webcomponent-boilerplate";
Enter fullscreen mode Exit fullscreen mode
  1. Add html code to your html component:
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
Enter fullscreen mode Exit fullscreen mode

🟠 Installation (Svelte)

  1. Install npm module with npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save:
  2. Import module in your src/App.svelte on header:
import "@ptkdev/svelte-webcomponent-boilerplate";
Enter fullscreen mode Exit fullscreen mode
  1. Add html code to your html component:
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
Enter fullscreen mode Exit fullscreen mode

🟢 Installation (Vue)

  1. Install npm module with npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save:
  2. Import module in your src/App.vue and add webcomponent to ignoreElements of vue config:
import Vue from "vue";
import "@ptkdev/svelte-webcomponent-boilerplate";

Vue.config.ignoredElements = ["svelte-webcomponent-boilerplate"];
Enter fullscreen mode Exit fullscreen mode
  1. Add html code to your html component:
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
Enter fullscreen mode Exit fullscreen mode

🧰 Options / Attributes

Parameter Description Values Default value Available since
header Setup top text String make v1.0.20210319
flip Setup middle flip text (separte with commas) String with commas svelte,webcomponents,opensource v1.0.20210319
footer Setup bottom text String awesome! v1.0.20210319

HTML Code with attributes:

<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
Enter fullscreen mode Exit fullscreen mode

🎨 CSS Customization

You can overwrite default css with selector ::part, example:

<style>
    svelte-webcomponent-boilerplate::part(flip) {
        border: 2px solid red;
    }
</style>
Enter fullscreen mode Exit fullscreen mode

Part attribute is, generally, suffix of a class. Use chrome inspector for get the correct value of part="" attributes. See MDN selector ::part docs.

🔨 Developer Mode

🏁 Run Project

  1. Clone this repository or download nightly, beta or stable.
  2. Run npm run init
  3. Run npm run dev
  4. Run http://localhost:5000

💾 Setup Project

If you want replace all strings (example: package name, author, urls, etc...) in markdown file, source files and others files of this project you need edit setup.json with correct values and run npm run setup.

💫 License

  • Code and Contributions have MIT License
  • Images and logos have CC BY-NC 4.0 License
  • Documentations and Translations have CC BY 4.0 License
Copyleft (c) 2021 Patryk Rzucidło (@PTKDev) <support@ptkdev.io>

Discussion (2)

Collapse
justgage profile image
Gage • Edited

Sorry, but I think I'm still struggling with what exactly this is for, what problem does this solve?

Edit: so wait, I think I get it now. You build the component in Svelte and then you can _publish_it to all the other JS frameworks, is that right?

Collapse
ptkdev profile image
Patryk Rzucidło Author • Edited

Is a boilerplate = pre configured project if you don't want start from empty repository. Is a awesome templates for start project. See Github template

  • Awesome readme design with emoji and all instruction
  • Best pratices for create webcomponents with svelte
  • Typescript ans tspath configured in rollup
  • Scss configured
  • Prettier and eslint work correctly with svelte and typescript
  • generator for badges and contributors of markdown
  • test and types configured
  • web component work with all the other JS frameworks out of the box

Svelte don't provide this configuratiom as default (out of the box). You need spend weeks for get this configuration. Is a Github templates, you can use it for your new project for create new web component provide all Best pratices and fix all bug of svelte+typescript and similar.

Forem Open with the Forem app