Skip to content

ptkdev-boilerplate/svelte-webcomponent-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

98 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿ— svelte-webcomponent-boilerplate

v2.0.1 License: MIT Powered By Svelte Language: TypeScript ECMAScript: 2019 Discord Server

Create your HTML5 Web Component with Svelte. Made your web components with this user 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!

Donate Paypal Donate Ko-Fi Donate Github Sponsors Donate Patreon Donate Bitcoin Donate Ethereum

๐Ÿ“Ž 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.

๐Ÿš€ 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 install
  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.

๐Ÿ“š Documentation

Run npm run docs

๐Ÿ‘‘ Backers and Sponsors

Thanks to all our backers! ๐Ÿ™ Donate 3$ or more on paypal, ko-fi, github or patreon and send me email with your avatar and url.

๐Ÿ‘จโ€๐Ÿ’ป Contributing

I โค๏ธ contributions! I will happily accept your pull request! (IMPORTANT: Only to nightly branch!) Translations, grammatical corrections (GrammarNazi you are welcome! Yes my English is bad, sorry), etc... Do not be afraid, if the code is not perfect we will work together ๐Ÿ‘ฏ and remember to insert your name in .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