This content originally appeared on DEV Community and was authored by Patryk Rzucidło

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

This content originally appeared on DEV Community and was authored by Patryk Rzucidło

Print Share Comment Cite Upload Translate Updates

APA

Patryk Rzucidło | Sciencx (2021-04-07T17:25:35+00:00) Make awesome WebComponents with Svelte. Retrieved from https://www.scien.cx/2021/04/07/make-awesome-webcomponents-with-svelte/

MLA

" » Make awesome WebComponents with Svelte." Patryk Rzucidło | Sciencx - Wednesday April 7, 2021, https://www.scien.cx/2021/04/07/make-awesome-webcomponents-with-svelte/

HARVARD

Patryk Rzucidło | Sciencx Wednesday April 7, 2021 » Make awesome WebComponents with Svelte., viewed ,<https://www.scien.cx/2021/04/07/make-awesome-webcomponents-with-svelte/>

VANCOUVER

Patryk Rzucidło | Sciencx - » Make awesome WebComponents with Svelte. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/07/make-awesome-webcomponents-with-svelte/

CHICAGO

" » Make awesome WebComponents with Svelte." Patryk Rzucidło | Sciencx - Accessed . https://www.scien.cx/2021/04/07/make-awesome-webcomponents-with-svelte/

IEEE

" » Make awesome WebComponents with Svelte." Patryk Rzucidło | Sciencx [Online]. Available: https://www.scien.cx/2021/04/07/make-awesome-webcomponents-with-svelte/. [Accessed: ]

rf:citation

» Make awesome WebComponents with Svelte | Patryk Rzucidło | Sciencx | https://www.scien.cx/2021/04/07/make-awesome-webcomponents-with-svelte/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.