[Update] Dotfiles and Configs

Author: ptkdev

.eslintrc.cjs

@@ -1,96 +1,93 @@
 module.exports = {
-	"env": {
-		"es6": true,
-		"node": true,
-		"browser": true,
-		"jest/globals": true
+	env: {
+		es6: true,
+		node: true,
+		browser: true,
+		"jest/globals": true,
 	},
-	"parser": "@typescript-eslint/parser",
-	"extends": ["eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended"],
-	"parserOptions": {
-		"sourceType": "module",
-		"ecmaVersion": 2019
+	parser: "@typescript-eslint/parser",
+	extends: [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/eslint-recommended",
+		"plugin:@typescript-eslint/recommended",
+	],
+	parserOptions: {
+		sourceType: "module",
+		ecmaVersion: 2019,
 	},
-	"plugins": ["jsdoc", "jest", "svelte3", "@typescript-eslint"],
-	"globals": {
-		"fetch": false
+	plugins: ["jsdoc", "jest", "svelte3", "@typescript-eslint"],
+	globals: {
+		fetch: false,
 	},
-	"settings": {
-		"jsdoc": {
-			"tagNamePreference": {
-				"returns": "return"
-			}
+	settings: {
+		jsdoc: {
+			tagNamePreference: {
+				returns: "return",
+			},
 		},
 		"svelte3/typescript": require("typescript"),
 		"svelte3/compiler-options": {
 			customElement: true,
 		},
 	},
-	"overrides": [
+	overrides: [
 		{
-			"files": ["**/*.svelte"],
-			"processor": "svelte3/svelte3"
-		}
+			files: ["**/*.svelte"],
+			processor: "svelte3/svelte3",
+		},
 	],
-	"rules": {
+	rules: {
 		"no-multi-spaces": [
 			"error",
 			{
-				"ignoreEOLComments": true,
-				"exceptions": {
-					"VariableDeclarator": true
-				}
-			}
+				ignoreEOLComments: true,
+				exceptions: {
+					VariableDeclarator: true,
+				},
+			},
 		],
 		"block-spacing": ["error", "always"],
 		"array-bracket-spacing": ["error", "never"],
 		"space-in-parens": ["error", "never"],
 		"comma-spacing": [
 			"error",
 			{
-				"before": false,
-				"after": true
-			}
+				before: false,
+				after: true,
+			},
 		],
 		"key-spacing": [
 			"error",
 			{
-				"afterColon": true,
-				"beforeColon": false
-			}
-		],
-		"indent": [
-			"error",
-			"tab",
-			{
-				"SwitchCase": 1
-			}
+				afterColon: true,
+				beforeColon: false,
+			},
 		],
-		"quotes": [
+		quotes: [
 			"error",
 			"double",
 			{
-				"avoidEscape": true,
-				"allowTemplateLiterals": true
-			}
+				avoidEscape: true,
+				allowTemplateLiterals: true,
+			},
 		],
-		"semi": ["error", "always"],
+		semi: ["error", "always"],
 		"no-console": ["warn"],
 		"no-constant-condition": ["warn"],
-		"curly": ["error", "all"],
+		curly: ["error", "all"],
 		"brace-style": [
 			"error",
 			"1tbs",
 			{
-				"allowSingleLine": false
-			}
+				allowSingleLine: false,
+			},
 		],
 		"keyword-spacing": [
 			"error",
 			{
-				"before": true,
-				"after": true
-			}
+				before: true,
+				after: true,
+			},
 		],
 		"object-curly-spacing": ["error", "always"],
 		"no-mixed-spaces-and-tabs": ["error", "smart-tabs"],
@@ -116,6 +113,6 @@ module.exports = {
 		"jsdoc/require-returns-description": 1,
 		"jsdoc/require-returns-type": 1,
 		"jsdoc/require-returns-check": 1,
-		"jsdoc/require-hyphen-before-param-description": 1
-	}
+		"jsdoc/require-hyphen-before-param-description": 1,
+	},
 };

.gitignore

@@ -123,6 +123,7 @@ npm-debug.log
 #######
 /app/configs/config.js
 /app/configs/config.ts
+/app/configs/config.json
 /extra
 /dist
 /build

.prettierignore

@@ -0,0 +1,4 @@
+/dist
+/build
+/node_modules
+package-lock.json

.prettierrc

@@ -1,6 +1,6 @@
 {
 	"bracketSpacing": true,
-	"printWidth": 160,
+	"printWidth": 120,
 	"semi": true,
 	"singleQuote": false,
 	"tabWidth": 4,

.vscode/settings.json

@@ -6,10 +6,10 @@
 	},
 	"eslint.format.enable": true,
 	"[javascript]": {
-		"editor.defaultFormatter": "dbaeumer.vscode-eslint"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[typescript]": {
-		"editor.defaultFormatter": "vscode.typescript-language-features"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 	"[scss]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"

README.md

@@ -78,7 +78,11 @@ See [Demo here](https://codepen.io/ptkdev/pen/jOyNmEQ).
 1. Add html code to your page:
 
 ```html
-<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
+<svelte-webcomponent-boilerplate
+	header="make"
+	flip="svelte,webcomponents,opensource"
+	footer="awesome!"
+></svelte-webcomponent-boilerplate>
 ```
 
 2. Require javascript in yourpage (before `</body>`):
@@ -97,7 +101,11 @@ Below is available a description of `options` values.
 2. Add html code to your page:
 
 ```html
-<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
+<svelte-webcomponent-boilerplate
+	header="make"
+	flip="svelte,webcomponents,opensource"
+	footer="awesome!"
+></svelte-webcomponent-boilerplate>
 ```
 
 3. Require javascript in your app:
@@ -120,7 +128,11 @@ Below is available a description of `options` values.
 1. Add code to your html widget, example: `Appearance` --> `Widget` --> insert `HTML Widget` and paste html code:
 
 ```html
-<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
+<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.
@@ -137,7 +149,11 @@ import "@ptkdev/svelte-webcomponent-boilerplate";
 3. Add html code to your `App.js` template:
 
 ```html
-<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
+<svelte-webcomponent-boilerplate
+	header="make"
+	flip="svelte,webcomponents,opensource"
+	footer="awesome!"
+></svelte-webcomponent-boilerplate>
 ```
 
 ## 🔴 Installation (Angular)
@@ -152,7 +168,11 @@ import "@ptkdev/svelte-webcomponent-boilerplate";
 3. Add html code to your html component:
 
 ```html
-<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
+<svelte-webcomponent-boilerplate
+	header="make"
+	flip="svelte,webcomponents,opensource"
+	footer="awesome!"
+></svelte-webcomponent-boilerplate>
 ```
 
 ## 🟠 Installation (Svelte)
@@ -167,7 +187,11 @@ import "@ptkdev/svelte-webcomponent-boilerplate";
 3. Add html code to your html component:
 
 ```html
-<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
+<svelte-webcomponent-boilerplate
+	header="make"
+	flip="svelte,webcomponents,opensource"
+	footer="awesome!"
+></svelte-webcomponent-boilerplate>
 ```
 
 ## 🟢 Installation (Vue)
@@ -185,7 +209,11 @@ Vue.config.ignoredElements = ["svelte-webcomponent-boilerplate"];
 3. Add html code to your html component:
 
 ```html
-<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
+<svelte-webcomponent-boilerplate
+	header="make"
+	flip="svelte,webcomponents,opensource"
+	footer="awesome!"
+></svelte-webcomponent-boilerplate>
 ```
 
 ## 🧰 Options / Attributes
@@ -199,7 +227,11 @@ Vue.config.ignoredElements = ["svelte-webcomponent-boilerplate"];
 #### HTML Code with attributes:
 
 ```html
-<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>
+<svelte-webcomponent-boilerplate
+	header="make"
+	flip="svelte,webcomponents,opensource"
+	footer="awesome!"
+></svelte-webcomponent-boilerplate>
 ```
 
 ## 🎨 CSS Customization

app/functions/webcomponent.ts

@@ -28,7 +28,7 @@ const webcomponent = async ({ text }: ModuleInterface): Promise<ModuleResponseIn
 	const app = () => text;
 
 	return {
-		app
+		app,
 	};
 };
 

app/types/webcomponent.type.ts

@@ -26,7 +26,7 @@ export interface ModuleInterface {
 	 * @param {string} text - input text
 	 *
 	 */
-	text: string
+	text: string;
 }
 
 /**
@@ -40,10 +40,10 @@ export interface ModuleResponseInterface {
 	 * =====================
 	 * Get text
 	 *
-	  * @interface [ModuleResponseInterface](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/blob/main/app/webcomponent/types/module.type.ts)
+	 * @interface [ModuleResponseInterface](https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/blob/main/app/webcomponent/types/module.type.ts)
 	 *
 	 * @return {fn} string - run app() for output text
 	 *
 	 */
-	app(): string
+	app(): string;
 }