fix: eslint-deps leading to prop type warnings in console

Author: mohdashraf010897

packages/vue/.eslintrc

@@ -5,7 +5,7 @@
 		"es6": true,
 		"node": true
 	},
-	"extends": ["airbnb-base", "plugin:vue/recommended", "prettier"],
+	"extends": ["airbnb-base", "plugin:vue/recommended", "plugin:vue-types/recommended", "prettier"],
 	"parserOptions": {
 		"parser": "babel-eslint",
 		"ecmaVersion": 2017,

packages/vue/package.json

@@ -54,7 +54,7 @@
 		"vue-highlight-words": "^1.2.0",
 		"vue-no-ssr": "^1.1.0",
 		"vue-slider-component": "next",
-		"vue-types": "^5.0.2"
+		"vue-types": "^5.1.1"
 	},
 	"peerDependencies": {
 		"vue": "^3.1.0"
@@ -73,7 +73,8 @@
 		"eslint": "^4.12.0",
 		"eslint-config-airbnb-base": "^13.1.0",
 		"eslint-config-prettier": "^3.1.0",
-		"eslint-plugin-vue": "^4.7.1",
+		"eslint-plugin-vue": "^9.19.2",
+		"eslint-plugin-vue-types": "^2.1.0",
 		"nps": "^5.9.3",
 		"nps-utils": "^1.7.0",
 		"postcss": "^8.4.31",
@@ -89,6 +90,6 @@
 		"rollup-plugin-terser": "^5.1.1",
 		"rollup-plugin-vue": "^6.0.0",
 		"typescript": "^5.0.0",
-		"vue-eslint-parser": "^3.2.2"
+		"vue-eslint-parser": "^9.3.2"
 	}
 }

packages/vue/src/components/ReactiveBase/index.jsx

@@ -6,14 +6,15 @@ import Appbase from 'appbase-js';
 import AppbaseAnalytics from '@appbaseio/analytics';
 import 'url-search-params-polyfill';
 import { createCache } from '@appbaseio/vue-emotion';
+import { defineComponent } from 'vue';
 import Provider from '../Provider';
 import { composeThemeObject, X_SEARCH_CLIENT } from '../../utils/index';
 import types from '../../utils/vueTypes';
 import URLParamsProvider from '../URLParamsProvider.jsx';
 import getTheme from '../../styles/theme';
 
 const { setValues } = Actions;
-const ReactiveBase = {
+const ReactiveBase =defineComponent( {
 	name: 'ReactiveBase',
 	data() {
 		this.state = {
@@ -109,10 +110,10 @@ const ReactiveBase = {
 					...(enableTelemetry === false && { 'X-Enable-Telemetry': false }),
 				}),
 				...headers,
-				...(endpoint &&
-					endpoint.headers && {
-						...endpoint.headers,
-					}),
+				...(endpoint
+					&& endpoint.headers && {
+					...endpoint.headers,
+				}),
 			};
 		},
 	},
@@ -122,8 +123,8 @@ const ReactiveBase = {
 			this.key = `${this.state.key}-0`;
 		},
 		setStore(props) {
-			const credentials =
-				props.url && props.url.trim() !== '' && !props.credentials
+			const credentials
+				= props.url && props.url.trim() !== '' && !props.credentials
 					? null
 					: props.credentials;
 			let url = props.url && props.url.trim() !== '' ? props.url : '';
@@ -208,8 +209,8 @@ const ReactiveBase = {
 				// When endpoint prop is used index is not defined, so we use _default
 				index: appbaseRef.app || '_default',
 				globalCustomEvents:
-					this.$props.reactivesearchAPIConfig &&
-					this.$props.reactivesearchAPIConfig.customEvents,
+					this.$props.reactivesearchAPIConfig
+					&& this.$props.reactivesearchAPIConfig.customEvents,
 			};
 
 			try {
@@ -219,13 +220,13 @@ const ReactiveBase = {
 						/\/\/(.*?)\/.*/,
 						'//$1',
 					);
-					const headerCredentials =
-						this.$props.endpoint.headers && this.$props.endpoint.headers.Authorization;
-					analyticsInitConfig.credentials =
-						headerCredentials && headerCredentials.replace('Basic ', '');
+					const headerCredentials
+						= this.$props.endpoint.headers && this.$props.endpoint.headers.Authorization;
+					analyticsInitConfig.credentials
+						= headerCredentials && headerCredentials.replace('Basic ', '');
 					// Decode the credentials
-					analyticsInitConfig.credentials =
-						analyticsInitConfig.credentials && atob(analyticsInitConfig.credentials);
+					analyticsInitConfig.credentials
+						= analyticsInitConfig.credentials && atob(analyticsInitConfig.credentials);
 				}
 			} catch (e) {
 				console.error('Endpoint not set correctly for analytics');
@@ -271,6 +272,7 @@ const ReactiveBase = {
 	render() {
 		const children = this.$slots.default;
 		const { style, className } = this.$props;
+		window.console.log('🚀 ~ file: pppppppp');
 		return (
 			<Provider store={this.store} analyticsRef={this.analyticsRef}>
 				<URLParamsProvider
@@ -287,7 +289,7 @@ const ReactiveBase = {
 			</Provider>
 		);
 	},
-};
+});
 ReactiveBase.install = function (Vue) {
 	Vue.component(ReactiveBase.name, ReactiveBase);
 };

packages/vue/src/utils/vueTypes.js

@@ -56,7 +56,10 @@ const types = {
 	excludeFields: VueTypes.arrayOf(VueTypes.string),
 	fieldWeights: VueTypes.arrayOf(VueTypes.number),
 	filterLabel: VueTypes.string,
-	func: VueTypes.func,
+	func: {
+		type: Function,
+		required: false
+	},
 	funcRequired: VueTypes.func.isRequired,
 	fuzziness: VueTypes.oneOf([0, 1, 2, 'AUTO']),
 	headers: VueTypes.object,
@@ -107,7 +110,10 @@ const types = {
 	),
 	sortByWithCount: VueTypes.oneOf(['asc', 'desc', 'count']),
 	stats: VueTypes.arrayOf(VueTypes.object),
-	string: VueTypes.string,
+	string: {
+		type: String,
+		required: false
+	},
 	stringArray: VueTypes.arrayOf(VueTypes.string),
 	stringOrArray: VueTypes.oneOfType([VueTypes.string, VueTypes.arrayOf(VueTypes.string)]),
 	stringRequired: VueTypes.string.isRequired,