🏗 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

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) <support@ptkdev.io>