@logto/vue 1.1.2 → 2.0.0

package/lib/consts.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+const logtoInjectionKey = '@logto/vue';
+const contextInjectionKey = '@logto/vue:context';
+
+exports.contextInjectionKey = contextInjectionKey;
+exports.logtoInjectionKey = logtoInjectionKey;

package/lib/consts.js

@@ -1,7 +1,4 @@
-'use strict';
-
 const logtoInjectionKey = '@logto/vue';
 const contextInjectionKey = '@logto/vue:context';
 
-exports.contextInjectionKey = contextInjectionKey;
-exports.logtoInjectionKey = logtoInjectionKey;
+export { contextInjectionKey, logtoInjectionKey };

package/lib/{context.mjs → context.cjs}

@@ -1,14 +1,16 @@
-import { toRefs, reactive, computed } from 'vue';
+'use strict';
+
+var vue = require('vue');
 
 const createContext = (client) => {
-    const context = toRefs(reactive({
+    const context = vue.toRefs(vue.reactive({
         logtoClient: client,
         isAuthenticated: false,
         loadingCount: 1,
         error: undefined,
     }));
     const { isAuthenticated, loadingCount, error } = context;
-    const isLoading = computed(() => loadingCount.value > 0);
+    const isLoading = vue.computed(() => loadingCount.value > 0);
     /* eslint-disable @silverhand/fp/no-mutation */
     const setError = (_error, fallbackErrorMessage) => {
         if (_error instanceof Error) {
@@ -42,4 +44,5 @@ const throwContextError = () => {
     throw new Error('Must install Logto plugin first.');
 };
 
-export { createContext, throwContextError };
+exports.createContext = createContext;
+exports.throwContextError = throwContextError;

package/lib/context.js

@@ -1,16 +1,14 @@
-'use strict';
-
-var vue = require('vue');
+import { toRefs, reactive, computed } from 'vue';
 
 const createContext = (client) => {
-    const context = vue.toRefs(vue.reactive({
+    const context = toRefs(reactive({
         logtoClient: client,
         isAuthenticated: false,
         loadingCount: 1,
         error: undefined,
     }));
     const { isAuthenticated, loadingCount, error } = context;
-    const isLoading = vue.computed(() => loadingCount.value > 0);
+    const isLoading = computed(() => loadingCount.value > 0);
     /* eslint-disable @silverhand/fp/no-mutation */
     const setError = (_error, fallbackErrorMessage) => {
         if (_error instanceof Error) {
@@ -44,5 +42,4 @@ const throwContextError = () => {
     throw new Error('Must install Logto plugin first.');
 };
 
-exports.createContext = createContext;
-exports.throwContextError = throwContextError;
+export { createContext, throwContextError };

package/lib/index.cjs

@@ -0,0 +1,139 @@
+'use strict';
+
+var LogtoClient = require('@logto/browser');
+var vue = require('vue');
+var consts = require('./consts.cjs');
+var context = require('./context.cjs');
+var plugin = require('./plugin.cjs');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var LogtoClient__default = /*#__PURE__*/_interopDefault(LogtoClient);
+
+/**
+ * Creates the Logto Vue plugin
+ *
+ * ```ts
+ * import { createApp } from 'vue';
+ * import { createLogto } from '@logto/vue';
+ *
+ * const app = createApp(App);
+ * const app.use(createLogto, {
+ *   appId: '<your-app-id>',
+ *   endpoint: '<your-oidc-endpoint-domain>',
+ * });
+ *
+ * app.mount('#app');
+ * ```
+ *
+ * Use this in your Vue root component to register the plugin
+ */
+const createLogto = {
+    install(app, config) {
+        const client = new LogtoClient__default.default(config);
+        const context$1 = context.createContext(client);
+        const pluginMethods = plugin.createPluginMethods(context$1);
+        const { isAuthenticated, isLoading, error } = context$1;
+        app.provide(consts.contextInjectionKey, context$1);
+        app.provide(consts.logtoInjectionKey, {
+            isAuthenticated: vue.readonly(isAuthenticated),
+            isLoading: vue.readonly(isLoading),
+            error: vue.readonly(error),
+            ...pluginMethods,
+        });
+    },
+};
+/**
+ * A Vue composable method that provides the Logto reactive refs and auth methods.
+ *
+ * ```ts
+ * import { useLogto } from '@logto/vue';
+ *
+ * export default {
+ *  setup() {
+ *    const { isAuthenticated, signIn } = useLogto();
+ *
+ *    return {
+ *      isAuthenticated,
+ *      onClickSignIn: () => {
+ *        signIn('<your-redirect-uri>');
+ *      },
+ *    }
+ *  }
+ * }
+ * ```
+ *
+ * Use this composable in the setup script of your Vue component to make sure the injection works
+ */
+const useLogto = () => {
+    const logto = vue.inject(consts.logtoInjectionKey);
+    if (!logto) {
+        return context.throwContextError();
+    }
+    return logto;
+};
+/**
+ * A Vue composable method that watches browser navigation and automatically handles the sign-in callback
+ *
+ * ```ts
+ * import { useLogto } from '@logto/vue';
+ * import { useHandleSignInCallback } from '@logto/vue';
+ *
+ * export default {
+ *   setup() {
+ *     useHandleSignInCallback();
+ *   }
+ * }
+ * ```
+ *
+ * Use this in the setup script of your Callback page to make sure the injection works
+ */
+const useHandleSignInCallback = (callback) => {
+    const context$1 = vue.inject(consts.contextInjectionKey);
+    if (!context$1) {
+        return context.throwContextError();
+    }
+    const { isAuthenticated, isLoading, logtoClient, error } = context$1;
+    const { handleSignInCallback } = plugin.createPluginMethods(context$1);
+    vue.watchEffect(() => {
+        const currentPageUrl = window.location.href;
+        if (!isAuthenticated.value &&
+            logtoClient.value?.isSignInRedirected(currentPageUrl) &&
+            !isLoading.value) {
+            void handleSignInCallback(currentPageUrl, callback);
+        }
+    });
+    return {
+        isLoading: vue.readonly(isLoading),
+        isAuthenticated: vue.readonly(isAuthenticated),
+        error: vue.readonly(error),
+    };
+};
+
+Object.defineProperty(exports, 'LogtoClientError', {
+    enumerable: true,
+    get: function () { return LogtoClient.LogtoClientError; }
+});
+Object.defineProperty(exports, 'LogtoError', {
+    enumerable: true,
+    get: function () { return LogtoClient.LogtoError; }
+});
+Object.defineProperty(exports, 'OidcError', {
+    enumerable: true,
+    get: function () { return LogtoClient.OidcError; }
+});
+Object.defineProperty(exports, 'Prompt', {
+    enumerable: true,
+    get: function () { return LogtoClient.Prompt; }
+});
+Object.defineProperty(exports, 'ReservedScope', {
+    enumerable: true,
+    get: function () { return LogtoClient.ReservedScope; }
+});
+Object.defineProperty(exports, 'UserScope', {
+    enumerable: true,
+    get: function () { return LogtoClient.UserScope; }
+});
+exports.createLogto = createLogto;
+exports.useHandleSignInCallback = useHandleSignInCallback;
+exports.useLogto = useLogto;

package/lib/index.js

@@ -1,14 +1,9 @@
-'use strict';
-
-var LogtoClient = require('@logto/browser');
-var vue = require('vue');
-var consts = require('./consts.js');
-var context = require('./context.js');
-var plugin = require('./plugin.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var LogtoClient__default = /*#__PURE__*/_interopDefault(LogtoClient);
+import LogtoClient from '@logto/browser';
+export { LogtoClientError, LogtoError, OidcError, Prompt, ReservedScope, UserScope } from '@logto/browser';
+import { readonly, inject, watchEffect } from 'vue';
+import { contextInjectionKey, logtoInjectionKey } from './consts.js';
+import { createContext, throwContextError } from './context.js';
+import { createPluginMethods } from './plugin.js';
 
 /**
  * Creates the Logto Vue plugin
@@ -30,15 +25,15 @@ var LogtoClient__default = /*#__PURE__*/_interopDefault(LogtoClient);
  */
 const createLogto = {
     install(app, config) {
-        const client = new LogtoClient__default.default(config);
-        const context$1 = context.createContext(client);
-        const pluginMethods = plugin.createPluginMethods(context$1);
-        const { isAuthenticated, isLoading, error } = context$1;
-        app.provide(consts.contextInjectionKey, context$1);
-        app.provide(consts.logtoInjectionKey, {
-            isAuthenticated: vue.readonly(isAuthenticated),
-            isLoading: vue.readonly(isLoading),
-            error: vue.readonly(error),
+        const client = new LogtoClient(config);
+        const context = createContext(client);
+        const pluginMethods = createPluginMethods(context);
+        const { isAuthenticated, isLoading, error } = context;
+        app.provide(contextInjectionKey, context);
+        app.provide(logtoInjectionKey, {
+            isAuthenticated: readonly(isAuthenticated),
+            isLoading: readonly(isLoading),
+            error: readonly(error),
             ...pluginMethods,
         });
     },
@@ -66,9 +61,9 @@ const createLogto = {
  * Use this composable in the setup script of your Vue component to make sure the injection works
  */
 const useLogto = () => {
-    const logto = vue.inject(consts.logtoInjectionKey);
+    const logto = inject(logtoInjectionKey);
     if (!logto) {
-        return context.throwContextError();
+        return throwContextError();
     }
     return logto;
 };
@@ -89,49 +84,25 @@ const useLogto = () => {
  * Use this in the setup script of your Callback page to make sure the injection works
  */
 const useHandleSignInCallback = (callback) => {
-    const context$1 = vue.inject(consts.contextInjectionKey);
-    if (!context$1) {
-        return context.throwContextError();
+    const context = inject(contextInjectionKey);
+    if (!context) {
+        return throwContextError();
     }
-    const { isAuthenticated, isLoading, logtoClient, error } = context$1;
-    const { handleSignInCallback } = plugin.createPluginMethods(context$1);
-    vue.watchEffect(() => {
+    const { isAuthenticated, isLoading, logtoClient, error } = context;
+    const { handleSignInCallback } = createPluginMethods(context);
+    watchEffect(() => {
         const currentPageUrl = window.location.href;
-        if (!isAuthenticated.value && logtoClient.value?.isSignInRedirected(currentPageUrl)) {
+        if (!isAuthenticated.value &&
+            logtoClient.value?.isSignInRedirected(currentPageUrl) &&
+            !isLoading.value) {
             void handleSignInCallback(currentPageUrl, callback);
         }
     });
     return {
-        isLoading: vue.readonly(isLoading),
-        isAuthenticated: vue.readonly(isAuthenticated),
-        error: vue.readonly(error),
+        isLoading: readonly(isLoading),
+        isAuthenticated: readonly(isAuthenticated),
+        error: readonly(error),
     };
 };
 
-Object.defineProperty(exports, 'LogtoClientError', {
-    enumerable: true,
-    get: function () { return LogtoClient.LogtoClientError; }
-});
-Object.defineProperty(exports, 'LogtoError', {
-    enumerable: true,
-    get: function () { return LogtoClient.LogtoError; }
-});
-Object.defineProperty(exports, 'OidcError', {
-    enumerable: true,
-    get: function () { return LogtoClient.OidcError; }
-});
-Object.defineProperty(exports, 'Prompt', {
-    enumerable: true,
-    get: function () { return LogtoClient.Prompt; }
-});
-Object.defineProperty(exports, 'ReservedScope', {
-    enumerable: true,
-    get: function () { return LogtoClient.ReservedScope; }
-});
-Object.defineProperty(exports, 'UserScope', {
-    enumerable: true,
-    get: function () { return LogtoClient.UserScope; }
-});
-exports.createLogto = createLogto;
-exports.useHandleSignInCallback = useHandleSignInCallback;
-exports.useLogto = useLogto;
+export { createLogto, useHandleSignInCallback, useLogto };

package/lib/{plugin.mjs → plugin.cjs}

@@ -1,10 +1,12 @@
-import { throwContextError } from './context.mjs';
+'use strict';
 
-const createPluginMethods = (context) => {
-    const { logtoClient, setLoading, setError, setIsAuthenticated } = context;
+var context = require('./context.cjs');
+
+const createPluginMethods = (context$1) => {
+    const { logtoClient, setLoading, setError, setIsAuthenticated } = context$1;
     const signIn = async (redirectUri, interactionMode) => {
         if (!logtoClient.value) {
-            return throwContextError();
+            return context.throwContextError();
         }
         try {
             setLoading(true);
@@ -16,7 +18,7 @@ const createPluginMethods = (context) => {
     };
     const signOut = async (postLogoutRedirectUri) => {
         if (!logtoClient.value) {
-            return throwContextError();
+            return context.throwContextError();
         }
         try {
             setLoading(true);
@@ -34,7 +36,7 @@ const createPluginMethods = (context) => {
     };
     const fetchUserInfo = async () => {
         if (!logtoClient.value) {
-            return throwContextError();
+            return context.throwContextError();
         }
         try {
             setLoading(true);
@@ -49,7 +51,7 @@ const createPluginMethods = (context) => {
     };
     const getAccessToken = async (resource) => {
         if (!logtoClient.value) {
-            return throwContextError();
+            return context.throwContextError();
         }
         try {
             setLoading(true);
@@ -64,7 +66,7 @@ const createPluginMethods = (context) => {
     };
     const getIdTokenClaims = async () => {
         if (!logtoClient.value) {
-            return throwContextError();
+            return context.throwContextError();
         }
         try {
             return await logtoClient.value.getIdTokenClaims();
@@ -75,7 +77,7 @@ const createPluginMethods = (context) => {
     };
     const handleSignInCallback = async (callbackUri, callbackFunction) => {
         if (!logtoClient.value) {
-            return throwContextError();
+            return context.throwContextError();
         }
         try {
             setLoading(true);
@@ -100,4 +102,4 @@ const createPluginMethods = (context) => {
     };
 };
 
-export { createPluginMethods };
+exports.createPluginMethods = createPluginMethods;

package/lib/plugin.d.ts

@@ -1,5 +1,5 @@
 import type { InteractionMode } from '@logto/browser';
-import type { Context } from './context';
+import type { Context } from './context.js';
 export declare const createPluginMethods: (context: Context) => {
     signIn: (redirectUri: string, interactionMode?: InteractionMode) => Promise<undefined>;
     signOut: (postLogoutRedirectUri?: string) => Promise<undefined>;

package/lib/plugin.js

@@ -1,12 +1,10 @@
-'use strict';
+import { throwContextError } from './context.js';
 
-var context = require('./context.js');
-
-const createPluginMethods = (context$1) => {
-    const { logtoClient, setLoading, setError, setIsAuthenticated } = context$1;
+const createPluginMethods = (context) => {
+    const { logtoClient, setLoading, setError, setIsAuthenticated } = context;
     const signIn = async (redirectUri, interactionMode) => {
         if (!logtoClient.value) {
-            return context.throwContextError();
+            return throwContextError();
         }
         try {
             setLoading(true);
@@ -18,7 +16,7 @@ const createPluginMethods = (context$1) => {
     };
     const signOut = async (postLogoutRedirectUri) => {
         if (!logtoClient.value) {
-            return context.throwContextError();
+            return throwContextError();
         }
         try {
             setLoading(true);
@@ -36,7 +34,7 @@ const createPluginMethods = (context$1) => {
     };
     const fetchUserInfo = async () => {
         if (!logtoClient.value) {
-            return context.throwContextError();
+            return throwContextError();
         }
         try {
             setLoading(true);
@@ -51,7 +49,7 @@ const createPluginMethods = (context$1) => {
     };
     const getAccessToken = async (resource) => {
         if (!logtoClient.value) {
-            return context.throwContextError();
+            return throwContextError();
         }
         try {
             setLoading(true);
@@ -66,7 +64,7 @@ const createPluginMethods = (context$1) => {
     };
     const getIdTokenClaims = async () => {
         if (!logtoClient.value) {
-            return context.throwContextError();
+            return throwContextError();
         }
         try {
             return await logtoClient.value.getIdTokenClaims();
@@ -77,7 +75,7 @@ const createPluginMethods = (context$1) => {
     };
     const handleSignInCallback = async (callbackUri, callbackFunction) => {
         if (!logtoClient.value) {
-            return context.throwContextError();
+            return throwContextError();
         }
         try {
             setLoading(true);
@@ -102,4 +100,4 @@ const createPluginMethods = (context$1) => {
     };
 };
 
-exports.createPluginMethods = createPluginMethods;
+export { createPluginMethods };

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "@logto/vue",
-  "version": "1.1.2",
-  "source": "./src/index.ts",
-  "main": "./lib/index.js",
+  "version": "2.0.0",
+  "type": "module",
+  "main": "./lib/index.cjs",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
   "exports": {
-    "require": "./lib/index.js",
-    "import": "./lib/index.mjs"
+    "types": "./lib/index.d.ts",
+    "require": "./lib/index.cjs",
+    "import": "./lib/index.js",
+    "default": "./lib/index.js"
   },
-  "module": "./lib/index.mjs",
-  "types": "./lib/index.d.ts",
   "files": [
     "lib"
   ],
@@ -18,23 +20,12 @@
     "url": "https://github.com/logto-io/js.git",
     "directory": "packages/vue"
   },
-  "scripts": {
-    "dev:tsc": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
-    "precommit": "lint-staged",
-    "check": "tsc --noEmit",
-    "build": "rm -rf lib/ && tsc -p tsconfig.build.json --noEmit && rollup -c",
-    "lint": "eslint --ext .ts src",
-    "test": "jest",
-    "test:coverage": "jest --silent --coverage",
-    "prepack": "pnpm test"
-  },
   "dependencies": {
-    "@logto/browser": "^1.1.2"
+    "@logto/browser": "^2.0.0"
   },
   "devDependencies": {
-    "@jest/types": "^29.5.0",
-    "@silverhand/eslint-config": "^2.0.0",
-    "@silverhand/ts-config": "^1.0.0",
+    "@silverhand/eslint-config": "^3.0.1",
+    "@silverhand/ts-config": "^3.0.0",
     "@swc/core": "^1.3.50",
     "@swc/jest": "^0.2.24",
     "@types/jest": "^29.5.0",
@@ -67,5 +58,13 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9e9a8b0887ef67baa7c3c564590bb06e7801d03e"
-}
+  "scripts": {
+    "dev:tsc": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
+    "precommit": "lint-staged",
+    "check": "tsc --noEmit",
+    "build": "rm -rf lib/ && tsc -p tsconfig.build.json --noEmit && rollup -c",
+    "lint": "eslint --ext .ts src",
+    "test": "jest",
+    "test:coverage": "jest --silent --coverage"
+  }
+}

package/lib/consts.mjs

@@ -1,4 +0,0 @@
-const logtoInjectionKey = '@logto/vue';
-const contextInjectionKey = '@logto/vue:context';
-
-export { contextInjectionKey, logtoInjectionKey };

package/lib/index.mjs

@@ -1,106 +0,0 @@
-import LogtoClient from '@logto/browser';
-export { LogtoClientError, LogtoError, OidcError, Prompt, ReservedScope, UserScope } from '@logto/browser';
-import { readonly, inject, watchEffect } from 'vue';
-import { contextInjectionKey, logtoInjectionKey } from './consts.mjs';
-import { createContext, throwContextError } from './context.mjs';
-import { createPluginMethods } from './plugin.mjs';
-
-/**
- * Creates the Logto Vue plugin
- *
- * ```ts
- * import { createApp } from 'vue';
- * import { createLogto } from '@logto/vue';
- *
- * const app = createApp(App);
- * const app.use(createLogto, {
- *   appId: '<your-app-id>',
- *   endpoint: '<your-oidc-endpoint-domain>',
- * });
- *
- * app.mount('#app');
- * ```
- *
- * Use this in your Vue root component to register the plugin
- */
-const createLogto = {
-    install(app, config) {
-        const client = new LogtoClient(config);
-        const context = createContext(client);
-        const pluginMethods = createPluginMethods(context);
-        const { isAuthenticated, isLoading, error } = context;
-        app.provide(contextInjectionKey, context);
-        app.provide(logtoInjectionKey, {
-            isAuthenticated: readonly(isAuthenticated),
-            isLoading: readonly(isLoading),
-            error: readonly(error),
-            ...pluginMethods,
-        });
-    },
-};
-/**
- * A Vue composable method that provides the Logto reactive refs and auth methods.
- *
- * ```ts
- * import { useLogto } from '@logto/vue';
- *
- * export default {
- *  setup() {
- *    const { isAuthenticated, signIn } = useLogto();
- *
- *    return {
- *      isAuthenticated,
- *      onClickSignIn: () => {
- *        signIn('<your-redirect-uri>');
- *      },
- *    }
- *  }
- * }
- * ```
- *
- * Use this composable in the setup script of your Vue component to make sure the injection works
- */
-const useLogto = () => {
-    const logto = inject(logtoInjectionKey);
-    if (!logto) {
-        return throwContextError();
-    }
-    return logto;
-};
-/**
- * A Vue composable method that watches browser navigation and automatically handles the sign-in callback
- *
- * ```ts
- * import { useLogto } from '@logto/vue';
- * import { useHandleSignInCallback } from '@logto/vue';
- *
- * export default {
- *   setup() {
- *     useHandleSignInCallback();
- *   }
- * }
- * ```
- *
- * Use this in the setup script of your Callback page to make sure the injection works
- */
-const useHandleSignInCallback = (callback) => {
-    const context = inject(contextInjectionKey);
-    if (!context) {
-        return throwContextError();
-    }
-    const { isAuthenticated, isLoading, logtoClient, error } = context;
-    const { handleSignInCallback } = createPluginMethods(context);
-    watchEffect(() => {
-        const currentPageUrl = window.location.href;
-        if (!isAuthenticated.value && logtoClient.value?.isSignInRedirected(currentPageUrl)) {
-            void handleSignInCallback(currentPageUrl, callback);
-        }
-    });
-    return {
-        isLoading: readonly(isLoading),
-        isAuthenticated: readonly(isAuthenticated),
-        error: readonly(error),
-    };
-};
-
-export { createLogto, useHandleSignInCallback, useLogto };