Svelte Webcomponent Boilerplate

Overview

The svelte-webcomponent-boilerplatev2.0.1 is a user-friendly boilerplate that allows users to create HTML5 web components with the Svelte framework. It is a free, open-source project that offers excellent support and is licensed under the MIT license. The boilerplate provides easy-to-use features, customization options, and compatibility with various frameworks and tools like Browserify, Webpack, ReactJS, Svelte, Angular, Vue, and Wordpress.

Features

• Easy to use: The boilerplate provides a user-friendly environment for creating HTML5 web components.
• MIT License: The project is licensed under the MIT license, allowing users to freely use and modify it.
• Text animation: Includes pre-configured text animation by Nooray Yemon on Codepen.
• Friendly boilerplate + Github templates: Use this repository as a template to start a new project without missing correct configuration or readme instructions.
• Powered by Svelte framework: Utilizes the Svelte framework for building efficient web components.
• Without jQuery dependence: The project does not rely on jQuery.
• Configurable with attributes: Customize your web components by configuring various attributes.
• Customization with CSS Style: Apply CSS styles to customize the look of your web components.
• HTML5 Custom Elements - Native webcomponents: Create native HTML5 custom elements for your web components.
• Work with various frameworks and tools: Compatible with Browserify, Webpack, ReactJS, Svelte, Angular, Vue, and Wordpress.
• Typescript + TSPaths preconfigured: Supports TypeScript with preconfigured TSPaths.
• Userfriendly folders tree: Provides a user-friendly folder structure for organizing your project.
• Prettiers and ESLint preconfigured: Includes preconfigured Prettiers and ESLint for consistent and clean code.
• all-contributors-cli and all-shields-cli preconfigured: Preconfigured tools for managing contributors and generating badges.
• JEST Test preconfigured: Preconfigured JEST for easy unit testing.
• Full async code: Supports full asynchronous code for better performance.
• Github and Vscode dotfiles preconfigured: Comes with preconfigured dotfiles for Github and Vscode integration.
• Translations i18n: Supports translations using i18n.

Installation

Web

• Add the HTML code to your page.
• Require the JavaScript in your page (before </body>).

Installation (NPM Module - Browserify/Webpack)

• Install the npm module: npm install @ptkdev/svelte-webcomponent-boilerplate --save.
• Add the HTML code to your page.
• Require the JavaScript in your app.

Installation (Wordpress)

• Download the Wordpress plugin from the mirror and install it.
• Add the code to your HTML widget, for example, Appearance –> Widget –> insert HTML Widget and paste HTML code.
• You can also insert this HTML code in posts, widgets, HTML boxes, or the theme.

Installation (React)

• Install the npm module with npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save.
• Import the module in your src/App.js on the header.
• Add the HTML code to your App.js template.

Installation (Angular)

• Install the npm module with npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save.
• Import the module in your app.

Summary

The svelte-webcomponent-boilerplatev2.0.1 is a user-friendly boilerplate for creating HTML5 web components with the Svelte framework. It offers a range of features, including easy-to-use functionalities, compatibility with various frameworks and tools, customization options, and support for TypeScript. The boilerplate can be installed in different ways, depending on the desired environment, such as web, NPM module, Wordpress, React, or Angular. With its comprehensive features and flexibility, the boilerplate provides an efficient starting point for developing web components.