hyperapp-is 0.1.36 → 0.1.38

package/dist/hyperapp-is/index.d.ts

@@ -13,4 +13,4 @@ export { Carousel, effect_InitCarousel } from "./animationView/carousel";
 export type { ScrollMargin, MatrixState } from "./dom/utils";
 export { getScrollMargin, getMatrixState } from "./dom/utils";
 export type { GoogleAccountsId, GoogleTokenClient, GoogleAccountsOAuth2, GoogleAccounts, Google, GoogleAuthConfig, GoogleUser, GoogleAuthResult, GoogleScope, GetAccessTokenConfig } from "./services/google";
-export { getGoogle, googleAuth, getAccessToken } from "./services/google";
+export { getGoogle, getGoogleAuthResult, getAccessToken, effect_googleAuth, googleLogout } from "./services/google";

package/dist/hyperapp-is/index.js

@@ -7,4 +7,4 @@ export { progress_easing } from "./animation/easing";
 export { createUnits, createRAFProperties, effect_RAFProperties } from "./animation/properties";
 export { Carousel, effect_InitCarousel } from "./animationView/carousel";
 export { getScrollMargin, getMatrixState } from "./dom/utils";
-export { getGoogle, googleAuth, getAccessToken } from "./services/google";
+export { getGoogle, getGoogleAuthResult, getAccessToken, effect_googleAuth, googleLogout } from "./services/google";

package/dist/hyperapp-is/services/google.d.ts

@@ -1,3 +1,5 @@
+import type { Dispatch, Effect } from "hyperapp";
+export type GoogleScope = "openid" | "email" | "profile" | "https://www.googleapis.com/auth/drive" | "https://www.googleapis.com/auth/drive.readonly" | "https://www.googleapis.com/auth/drive.file" | "https://www.googleapis.com/auth/drive.metadata.readonly" | "https://www.googleapis.com/auth/drive.appdata" | "https://www.googleapis.com/auth/calendar" | "https://www.googleapis.com/auth/calendar.readonly" | "https://www.googleapis.com/auth/calendar.events" | "https://www.googleapis.com/auth/calendar.events.readonly" | "https://www.googleapis.com/auth/gmail.readonly" | "https://www.googleapis.com/auth/gmail.modify" | "https://www.googleapis.com/auth/gmail.send" | "https://www.googleapis.com/auth/gmail.compose" | "https://www.googleapis.com/auth/gmail.labels" | "https://www.googleapis.com/auth/spreadsheets" | "https://www.googleapis.com/auth/spreadsheets.readonly" | "https://www.googleapis.com/auth/documents" | "https://www.googleapis.com/auth/documents.readonly" | "https://www.googleapis.com/auth/presentations" | "https://www.googleapis.com/auth/presentations.readonly" | "https://www.googleapis.com/auth/forms" | "https://www.googleapis.com/auth/forms.responses.readonly" | "https://www.googleapis.com/auth/youtube.readonly" | "https://www.googleapis.com/auth/youtube" | "https://www.googleapis.com/auth/youtube.upload" | "https://www.googleapis.com/auth/youtube.force-ssl" | "https://www.googleapis.com/auth/userinfo.email" | "https://www.googleapis.com/auth/userinfo.profile" | (string & {});
 export interface GoogleAccountsId {
     initialize(config: {
         client_id: string;
@@ -16,6 +18,8 @@ export interface GoogleAccountsId {
         text?: "signin_with" | "signup_with" | "continue_with";
         shape?: "rectangular" | "pill" | "circle" | "square";
     }): void;
+    revoke(hint: string, // email or sub
+    callback: () => void): void;
 }
 export interface GoogleTokenClient {
     requestAccessToken(options?: {
@@ -39,7 +43,6 @@ export interface GoogleAccounts {
 export interface Google {
     accounts: GoogleAccounts;
 }
-export declare const getGoogle: () => Promise<Google>;
 export interface GoogleAuthConfig {
     clientId: string;
     autoSelect?: boolean;
@@ -55,11 +58,33 @@ export interface GoogleAuthResult {
     idToken: string;
     user: GoogleUser;
 }
-export declare const googleAuth: (config: GoogleAuthConfig) => Promise<GoogleAuthResult | null>;
-export type GoogleScope = "openid" | "email" | "profile" | "https://www.googleapis.com/auth/drive" | "https://www.googleapis.com/auth/drive.readonly" | "https://www.googleapis.com/auth/drive.file" | "https://www.googleapis.com/auth/drive.metadata.readonly" | "https://www.googleapis.com/auth/drive.appdata" | "https://www.googleapis.com/auth/calendar" | "https://www.googleapis.com/auth/calendar.readonly" | "https://www.googleapis.com/auth/calendar.events" | "https://www.googleapis.com/auth/calendar.events.readonly" | "https://www.googleapis.com/auth/gmail.readonly" | "https://www.googleapis.com/auth/gmail.modify" | "https://www.googleapis.com/auth/gmail.send" | "https://www.googleapis.com/auth/gmail.compose" | "https://www.googleapis.com/auth/gmail.labels" | "https://www.googleapis.com/auth/spreadsheets" | "https://www.googleapis.com/auth/spreadsheets.readonly" | "https://www.googleapis.com/auth/documents" | "https://www.googleapis.com/auth/documents.readonly" | "https://www.googleapis.com/auth/presentations" | "https://www.googleapis.com/auth/presentations.readonly" | "https://www.googleapis.com/auth/forms" | "https://www.googleapis.com/auth/forms.responses.readonly" | "https://www.googleapis.com/auth/youtube.readonly" | "https://www.googleapis.com/auth/youtube" | "https://www.googleapis.com/auth/youtube.upload" | "https://www.googleapis.com/auth/youtube.force-ssl" | "https://www.googleapis.com/auth/userinfo.email" | "https://www.googleapis.com/auth/userinfo.profile" | (string & {});
 export interface GetAccessTokenConfig {
     clientId: string;
     scope: GoogleScope[];
     prompt?: "none" | "select_account" | "consent";
 }
+/**
+ * Google 変数を取得する
+ */
+export declare const getGoogle: () => Promise<Google>;
+/**
+ * idToken から ユーザー情報を取得
+ *
+ * @param {string} idToken - ユーザートークン
+ * @returns {GoogleAuthResult}
+ */
+export declare const getGoogleAuthResult: (idToken: string) => GoogleAuthResult;
 export declare const getAccessToken: (config: GetAccessTokenConfig) => Promise<string>;
+export declare const effect_googleAuth: <S>(props: {
+    state: S;
+    config: GoogleAuthConfig;
+    renderButton?: HTMLElement;
+    renderOptions?: {
+        theme?: "outline" | "filled_blue" | "filled_black";
+        size?: "large" | "medium" | "small";
+        text?: "signin_with" | "signup_with" | "continue_with";
+        shape?: "rectangular" | "pill" | "circle" | "square";
+    };
+    onLoad: (state: S, res: GoogleAuthResult) => S | [S, Effect<S>];
+}) => (dispatch: Dispatch<S>) => Promise<void>;
+export declare const googleLogout: (hint: string) => void;

package/dist/hyperapp-is/services/google.js

@@ -1,12 +1,17 @@
-// ---------- ---------- ----------
-// interface GoogleAccountsId
-// ---------- ---------- ----------
-// ---------- ---------- ----------
+// ========== ========== ========== ========== ==========
+// import
+// ========== ========== ========== ========== ==========
+// ========== ========== ========== ========== ==========
+// procedure
+// ========== ========== ========== ========== ==========
+// ---------- ---------- ---------- ---------- ----------
 // getGoogle
-// ---------- ---------- ----------
+// ---------- ---------- ---------- ---------- ----------
 // 2重読み込み防止用の変数
 let googlePromise = null;
-// google 変数を取得する
+/**
+ * Google 変数を取得する
+ */
 export const getGoogle = async () => {
     if (window.google)
         return window.google;
@@ -35,55 +40,33 @@ export const getGoogle = async () => {
     return googlePromise;
 };
 // ---------- ---------- ---------- ---------- ----------
-// googleAuth
+// getGoogleAuthResult
 // ---------- ---------- ---------- ---------- ----------
-export const googleAuth = async (config) => {
-    var _a, _b;
-    // get google
-    const google = await getGoogle();
-    // variable
-    const autoSelect = (_a = config.autoSelect) !== null && _a !== void 0 ? _a : true;
-    const uxMode = (_b = config.uxMode) !== null && _b !== void 0 ? _b : "popup";
-    // result
-    return new Promise((resolve, reject) => {
-        // get client
-        const client = google.accounts.id;
-        // initialize
-        client.initialize({
-            client_id: config.clientId,
-            auto_select: autoSelect,
-            ux_mode: uxMode,
-            callback: (response) => {
-                try {
-                    const idToken = response.credential;
-                    const base64 = idToken.split(".")[1]
-                        .replace(/-/g, "+")
-                        .replace(/_/g, "/");
-                    const decode = (str) => decodeURIComponent(atob(str)
-                        .split("")
-                        .map(c => "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2))
-                        .join(""));
-                    const payload = JSON.parse(decode(base64));
-                    const user = {
-                        name: payload.name,
-                        email: payload.email,
-                        picture: payload.picture,
-                        sub: payload.sub
-                    };
-                    resolve({ idToken, user });
-                }
-                catch (error) {
-                    reject(error);
-                }
-            }
-        }); // end initialize
-        // show prompt
-        client.prompt((notification) => {
-            if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
-                resolve(null);
-            }
-        });
-    }); // end result
+/**
+ * idToken から ユーザー情報を取得
+ *
+ * @param {string} idToken - ユーザートークン
+ * @returns {GoogleAuthResult}
+ */
+export const getGoogleAuthResult = (idToken) => {
+    const base64 = idToken.split(".")[1]
+        .replace(/-/g, "+")
+        .replace(/_/g, "/");
+    const decode = (str) => decodeURIComponent(atob(str)
+        .split("")
+        .map(c => "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2))
+        .join(""));
+    const payload = JSON.parse(decode(base64));
+    const user = {
+        name: payload.name,
+        email: payload.email,
+        picture: payload.picture,
+        sub: payload.sub
+    };
+    return {
+        idToken,
+        user
+    };
 };
 // ---------- ---------- ---------- ---------- ----------
 // getAccessToken
@@ -116,3 +99,53 @@ export const getAccessToken = async (config) => {
         tokenClient.requestAccessToken({ prompt }); // prompt == "none" のときには、事前にログインが必要
     });
 };
+// ========== ========== ========== ========== ==========
+// effect
+// ========== ========== ========== ========== ==========
+// ---------- ---------- ---------- ---------- ----------
+// effect_googleAuth
+// ---------- ---------- ---------- ---------- ----------
+export const effect_googleAuth = function (props) {
+    // variable
+    const { state, config, renderButton, renderOptions, onLoad } = props;
+    // result
+    return async (dispatch) => {
+        // get google api
+        const google = await getGoogle();
+        // set renderButton
+        if (renderButton) {
+            google.accounts.id.renderButton(renderButton, renderOptions);
+        }
+        // get client
+        const client = google.accounts.id;
+        // initialize
+        client.initialize({
+            client_id: config.clientId,
+            auto_select: config.autoSelect,
+            ux_mode: config.uxMode,
+            callback: (response) => {
+                dispatch((state) => onLoad(state, getGoogleAuthResult(response.credential)));
+            }
+        });
+        // show prompt
+        client.prompt((notification) => {
+            if (notification.isNotDisplayed()) {
+                console.log("Google prompt not displayed");
+            }
+            if (notification.isSkippedMoment()) {
+                console.log("Google prompt skipped");
+            }
+        });
+    }; // end result
+};
+// ---------- ---------- ---------- ---------- ----------
+// googleLogout
+// ---------- ---------- ---------- ---------- ----------
+export const googleLogout = (hint) => {
+    getGoogle().then(google => {
+        const client = google.accounts.id;
+        client.disableAutoSelect();
+        client.cancel();
+        client.revoke(hint, () => { });
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperapp-is",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "description": "UI foundation library for Hyperapp by is4416",
   "license": "MIT",
   "type": "module",