Make awesome WebComponents with Svelte

🏗 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
• 🕹 Demo
• 👔 Screenshot
• 🚀 How to use
• - 🌎 Web
• - 📦 Webpack/Browserify
• - 📖 Wordpress
• - 🔵 React
• - 🔴 Angular
• - 🟠 Svelte
• - 🟢 Vue
• - 🧰 Options / Attributes
• - 🎨 CSS Customization
• 🔨 Developer Mode
• - ⚡ Run Project
• - 💾 Setup Project

💡 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.

🚀 Installation (Web)

1. Add html code to your page:

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

1. Require javascript in yourpage (before </body>):

<script src="https://cdn.jsdelivr.net/npm/@ptkdev/svelte-webcomponent-boilerplate@latest/dist/webcomponent.js"></script>

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>

1. Require javascript in your app:

require("@ptkdev/svelte-webcomponent-boilerplate");

or

import "@ptkdev/svelte-webcomponent-boilerplate";

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>

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";

1. Add html code to your App.js template:

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

🔴 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";

1. Add html code to your html component:

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

🟠 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";

1. Add html code to your html component:

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

🟢 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"];

1. Add html code to your html component:

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

🧰 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>

🎨 CSS Customization

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

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

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) <[e-mail]>

Comments

[Gage]

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?

[Patryk Rzucidło]

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.