🏗 svelte-webcomponent-boilerplate
Create your HTML5 Web Component with Svelte. Made your web components with this friendly boilerplate.
This is a github template, you can fork it or use as template for start new project with this repository as hello-world. I hate start new project with empty template, often i missing correct configuration, readme instruction or i need of samples of code. Use this repository as template solve this problem.
🎁 Support: Donate
This project is free, open source and I try to provide excellent free support. Why donate? I work on this project several hours in my spare time and try to keep it up to date and working. THANK YOU!
📎 Menu
-
💡 Features -
🕹 Demo -
👔 Screenshot -
🚀 How to use -
-
🌎 Web
-
-
-
🔵 React
-
-
-
🔴 Angular
-
-
-
🟠 Svelte
-
-
-
🟢 Vue
-
-
📚 Documentation -
🔨 Developer Mode -
👨💻 Contributing -
🐛 Known Bugs -
🍻 Community:-
Telegram (
🇬🇧 English |🇮🇹 Italian) -
Discord (
🇬🇧 English |🇮🇹 Italian |🇵🇱 Polish)
-
Telegram (
💡 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)
- Add html code to your page:
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
- 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)
- Install npm module:
npm install @ptkdev/svelte-webcomponent-boilerplate --save
- Add html code to your page:
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
- 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)
- Download wordpress plugin from mirror and install it.
- Add code to your html widget, example:
Appearance
-->Widget
--> insertHTML 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)
- Install npm module with
npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save
: - Import module in your
src/App.js
on header:
import "@ptkdev/svelte-webcomponent-boilerplate";
- Add html code to your
App.js
template:
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
🔴 Installation (Angular)
- Install npm module with
npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save
: - Import module in your
app/app.modules.ts
on header:
import "@ptkdev/svelte-webcomponent-boilerplate";
- Add html code to your html component:
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
🟠 Installation (Svelte)
- Install npm module with
npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save
: - Import module in your
src/App.svelte
on header:
import "@ptkdev/svelte-webcomponent-boilerplate";
- Add html code to your html component:
<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
🟢 Installation (Vue)
- Install npm module with
npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save
: - 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"];
- 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
- Clone this repository or download nightly, beta or stable.
- Run
npm run init
- Run
npm run dev
- 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
.
📚 Documentation
Run npm run docs
👑 Backers and Sponsors
Thanks to all our backers!
👨💻 Contributing
I .all-contributorsrc
and package.json
file.
Thanks goes to these wonderful people (emoji key):
Patryk Rzucidło |
💰 In the future, if the donations allow it, I would like to share some of the success with those who helped me the most. For me open source is share of code, share development knowledges and share donations!
🦄 Other Projects
💫 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