fix: logger typing improvements (#813) RELEASE

## Related Issues
related to descope/etc#7827
fixes #811
fixes #810
fixes #812

## Description
- change logger interface to be more loose ➰ 
- fix vue sdk readme based on a feedback 👍 
 - add style id to vue sdk
 

![image](https://github.com/user-attachments/assets/78165245-8be4-4117-8a07-b4b3ce7f1220)

![image](https://github.com/user-attachments/assets/58ab1026-6795-4e80-8682-ae3e59348832)

.gitignore

@@ -45,6 +45,7 @@ Thumbs.db
 *.pem
 
 .env
+.env.local
 .nx/*
 .next
 

packages/sdks/vue-sdk/README.md

@@ -53,6 +53,7 @@ app.mount('#app');
   <!-- errorTransformer="errorTransformer" errorTransformer is a function that receives an error object and returns a string. The returned string will be displayed to the user. NOTE: errorTransformer is not required. If not provided, the error object will be displayed as is. -->
   <!-- form="{ email: 'test@domain.com' }" form is an object the initial form context that is used in screens inputs in the flow execution. Used to inject predifined input values on flow start such as custom inputs, custom attrbiutes and other inputs. Keys passed can be accessed in flows actions, conditions and screens prefixed with "form.". NOTE: form is not required. If not provided, 'form' context key will be empty before user input. -->
   <!-- client="{ version: '1.2.3' }" client is an object the initial client context in the flow execution. Keys passed can be accessed in flows actions and conditions prefixed with "client.". NOTE: client is not required. If not provided, context key will be empty. -->
+  <!-- styleId="my-awesome-style" Use a custom style name or keep empty to use the default style. -->
 </template>
 
 <script setup>
@@ -99,7 +100,7 @@ This can be helpful to implement application-specific logic. Examples:
 		<div v-if="isSessionLoading || isUserLoading">Loading ...</div>
 		<div v-else-if="isAuthenticated">
 			<div>Hello {{ user?.name }}</div>
-			<button @click="logout">Logout</button>
+			<button @click="logout()">Logout</button>
 		</div>
 		<div v-else>You are not logged in</div>
 	</div>
@@ -108,8 +109,8 @@ This can be helpful to implement application-specific logic. Examples:
 <script setup>
 import { useDescope, useSession, useUser } from '@descope/vue-sdk';
 
-const { isAuthenticated, isSessionLoading } = useSession();
-const { user, isUserLoading } = useUser();
+const { isAuthenticated, isLoading: isSessionLoading } = useSession();
+const { user, isLoading: isUserLoading } = useUser();
 const { logout } = useDescope();
 </script>
 ```

packages/sdks/vue-sdk/src/Descope.vue

@@ -13,6 +13,7 @@
       :telemetryKey.attr="telemetryKey"
       :redirect-url="redirectUrl"
       :auto-focus="autoFocus"
+      :style-id="styleId"
       :validate-on-blur="validateOnBlur"
       :store-last-authenticated-user="storeLastAuthenticatedUser"
       :errorTransformer.prop="errorTransformer"
@@ -93,6 +94,9 @@ const props = defineProps({
   client: {
     type: Object,
   },
+  styleId: {
+    type: String,
+  },
 });
 // const emit = defineEmits(['success', 'error', 'ready']);
 const emit = defineEmits<{

packages/sdks/vue-sdk/tests/Descope.test.ts

@@ -36,6 +36,7 @@ describe('Descope.vue', () => {
         errorTransformer,
         form: { test: 'a' },
         client: { test: 'b' },
+        styleId: 'test-style-id',
       },
     });
 
@@ -54,6 +55,7 @@ describe('Descope.vue', () => {
     expect(wrapper.vm.errorTransformer).toBe(errorTransformer);
     expect(descopeWc.attributes('form')).toBe('{"test":"a"}');
     expect(wrapper.vm.client).toStrictEqual({ test: 'b' });
+    expect(descopeWc.attributes('style-id')).toBe('test-style-id');
   });
 
   it('renders a DescopeWc component with empty props', () => {

packages/sdks/web-component/src/lib/descope-wc/index.ts

@@ -8,4 +8,5 @@ if (!customElements.get('descope-wc')) {
 }
 export default DescopeWc;
 
-export type { AutoFocusOptions, ThemeOptions, ILogger } from '../types';
+export type ILogger = Partial<DescopeWc['logger']>;
+export type { AutoFocusOptions, ThemeOptions } from '../types';

packages/sdks/web-component/src/lib/types.ts

@@ -157,13 +157,6 @@ export interface Context {
   abTestingKey?: number;
 }
 
-export interface ILogger {
-  info(title: string, description: string, state: any): void;
-  warn(title: string, description?: string): void;
-  debug(title: string, description?: string): void;
-  error(title: string, description?: string, ...optionalParams: any[]): void;
-}
-
 export type DescopeUI = Record<string, () => Promise<void>> & {
   componentsThemeManager: Record<string, any>;
 };