hyperapp-is 0.1.39 → 0.1.41

package/README.md

@@ -206,8 +206,9 @@ npm で非公開の関数 (実験用)は、解説に記載します
 
 **services / google**
 - [getGoogle](#getgoogle)
-- [googleAuth](#googleauth)
+- [getGoogleAuthResult](#getgoogleauthresult)
 - [getAccessToken](#getaccesstoken)
+- [GoogleAuth](#googleauth)
 
 ## source file / ソースファイル
 
@@ -1601,29 +1602,15 @@ export const getGoogle = async (): Promise<Google>
 
 ---
 
-### googleAuth
-グーグル認証を行い `{ idToken: string, user: GoogleUser }` を取得します
+### getGoogleAuthResult
+ユーザートークンから、ユーザー情報を取得する
 
 ```ts
-export const googleAuth = async (config: GoogleAuthConfig): Promise<GoogleAuthResult> =>
-```
-
-```ts
-export interface GoogleAuthConfig {
-	clientId   : string
-	autoSelect?: boolean              // default: true
-	uxMode    ?: "popup" | "redirect" // default: "popup"
-}
-```
-
-- clientId   : アプリケーションのID (https://console.cloud.google.com で作成)
-- autoSelect?: ユーザーが選択されていた場合、自動でログイン
-- uxMode    ?: ポップアップ、もしくはリダイレクトでログインします
-
+export const getGoogleAuthResult = (idToken: string): GoogleAuthResult
 ---
 
 ### getAccessToken
-Googleのaccess token を取得  
+Googleのaccess token を取得
 
 ```ts
 export const getAccessToken = (config: GetAccessTokenConfig): Promise<string>
@@ -1640,3 +1627,52 @@ export interface GetAccessTokenConfig {
 - clientId: アプリケーションのID
 - scope   : スコープの配列
 - prompt ?: ログイン制御 `none` の場合、先にログインしていなければエラーとなります
+
+---
+
+### GoogleAuth
+Google 認証をラップしたクラス
+
+```ts
+interface GoogleAuthConfig {
+	clientId   : string
+	autoSelect?: boolean              // default: true
+	uxMode    ?: "popup" | "redirect" // default: "popup"
+}
+
+interface GoogleButtonOptions {
+	renderButton?: HTMLElement
+	theme       ?: "outline" | "filled_blue" | "filled_black"      // default: outline
+	size        ?: "large" | "medium" | "small"                    // default: medium
+	text        ?: "signin_with" | "signup_with" | "continue_with" // default: signin_with
+	shape       ?: "rectangular" | "pill" | "circle" | "square"    // default: rectangular
+}
+
+interface GoogleAuthResult {
+	idToken: string
+	user   : GoogleUser
+}
+
+interface GoogleUser {
+	name   : string
+	email  : string
+	picture: string
+	sub    : string
+}
+```
+
+```ts
+class GoogleAuth {
+	constructor (config: GoogleAuthConfig, option?: GoogleButtonOptions)
+	async initialize(): Promise<GoogleAuthResult | null>
+	logout (hit: string): void
+}
+```
+
+*MEMO*
+必ず一度だけ `initialize` を実行します  
+プロンプトがスキップされた場合 `null` が返ります  
+`logout` を実行したあとであれば `initialize` を再実行することが可能です  
+`logout` 前に 2度 `initialize` を実行した場合は、エラーが発生します  
+`logout` の `hit` は `email' か 'sub` を指定する必要があります
+

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, getGoogleAuthResult, getAccessToken, effect_googleAuth, googleLogout } from "./services/google";
+export { getGoogle, getGoogleAuthResult, getAccessToken, GoogleAuth } 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, getGoogleAuthResult, getAccessToken, effect_googleAuth, googleLogout } from "./services/google";
+export { getGoogle, getGoogleAuthResult, getAccessToken, GoogleAuth } from "./services/google";

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

@@ -1,4 +1,3 @@
-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: {
@@ -75,15 +74,17 @@ export declare const getGoogle: () => Promise<Google>;
  */
 export declare const getGoogleAuthResult: (idToken: string) => GoogleAuthResult;
 export declare const getAccessToken: (config: GetAccessTokenConfig) => Promise<string>;
-export declare const effect_googleAuth: <S>(props: {
-    config: GoogleAuthConfig;
+interface GoogleButtonOptions {
     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;
+    theme?: "outline" | "filled_blue" | "filled_black";
+    size?: "large" | "medium" | "small";
+    text?: "signin_with" | "signup_with" | "continue_with";
+    shape?: "rectangular" | "pill" | "circle" | "square";
+}
+export declare class GoogleAuth {
+    #private;
+    constructor(config: GoogleAuthConfig, options?: GoogleButtonOptions);
+    initialize(): Promise<GoogleAuthResult | null>;
+    logout(hint: string): void;
+}
+export {};

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

@@ -1,6 +1,18 @@
 // ========== ========== ========== ========== ==========
 // import
 // ========== ========== ========== ========== ==========
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _GoogleAuth_config, _GoogleAuth_options, _GoogleAuth_google, _GoogleAuth_initialized;
 // ========== ========== ========== ========== ==========
 // procedure
 // ========== ========== ========== ========== ==========
@@ -99,53 +111,68 @@ export const getAccessToken = async (config) => {
         tokenClient.requestAccessToken({ prompt }); // prompt == "none" のときには、事前にログインが必要
     });
 };
-// ========== ========== ========== ========== ==========
-// effect
-// ========== ========== ========== ========== ==========
-// ---------- ---------- ---------- ---------- ----------
-// effect_googleAuth
-// ---------- ---------- ---------- ---------- ----------
-export const effect_googleAuth = function (props) {
-    // variable
-    const { 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);
+export class GoogleAuth {
+    // constructor
+    constructor(config, options) {
+        // field
+        _GoogleAuth_config.set(this, void 0);
+        _GoogleAuth_options.set(this, void 0);
+        _GoogleAuth_google.set(this, void 0);
+        _GoogleAuth_initialized.set(this, void 0);
+        __classPrivateFieldSet(this, _GoogleAuth_config, config, "f");
+        __classPrivateFieldSet(this, _GoogleAuth_options, options !== null && options !== void 0 ? options : {}, "f");
+        __classPrivateFieldSet(this, _GoogleAuth_initialized, false, "f");
+    }
+    // method: initialize
+    async initialize() {
+        var _a, _b, _c, _d, _e;
+        if (__classPrivateFieldGet(this, _GoogleAuth_initialized, "f")) {
+            throw new Error("Already initialized");
         }
-        // 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");
-            }
+        __classPrivateFieldSet(this, _GoogleAuth_initialized, true, "f");
+        __classPrivateFieldSet(this, _GoogleAuth_google, await getGoogle(), "f");
+        const client = __classPrivateFieldGet(this, _GoogleAuth_google, "f").accounts.id;
+        if ((_a = __classPrivateFieldGet(this, _GoogleAuth_options, "f")) === null || _a === void 0 ? void 0 : _a.renderButton) {
+            client.renderButton(__classPrivateFieldGet(this, _GoogleAuth_options, "f").renderButton, {
+                theme: (_b = __classPrivateFieldGet(this, _GoogleAuth_options, "f").theme) !== null && _b !== void 0 ? _b : "outline",
+                size: (_c = __classPrivateFieldGet(this, _GoogleAuth_options, "f").size) !== null && _c !== void 0 ? _c : "medium",
+                text: (_d = __classPrivateFieldGet(this, _GoogleAuth_options, "f").text) !== null && _d !== void 0 ? _d : "signin_with",
+                shape: (_e = __classPrivateFieldGet(this, _GoogleAuth_options, "f").shape) !== null && _e !== void 0 ? _e : "rectangular",
+            });
+        }
+        return new Promise(resolve => {
+            var _a, _b;
+            let resolved = false;
+            const callback = (response) => {
+                if (resolved)
+                    return;
+                resolved = true;
+                resolve(getGoogleAuthResult(response.credential));
+            };
+            client.initialize({
+                client_id: __classPrivateFieldGet(this, _GoogleAuth_config, "f").clientId,
+                auto_select: (_a = __classPrivateFieldGet(this, _GoogleAuth_config, "f").autoSelect) !== null && _a !== void 0 ? _a : true,
+                ux_mode: (_b = __classPrivateFieldGet(this, _GoogleAuth_config, "f").uxMode) !== null && _b !== void 0 ? _b : "popup",
+                callback
+            });
+            client.prompt((notification) => {
+                if (!resolved && (notification.isNotDisplayed() ||
+                    notification.isSkippedMoment())) {
+                    resolved = true;
+                    resolve(null);
+                }
+            });
         });
-    }; // end result
-};
-// ---------- ---------- ---------- ---------- ----------
-// googleLogout
-// ---------- ---------- ---------- ---------- ----------
-export const googleLogout = (hint) => {
-    getGoogle().then(google => {
-        const client = google.accounts.id;
+    }
+    // method: logout
+    logout(hint) {
+        if (!__classPrivateFieldGet(this, _GoogleAuth_google, "f"))
+            return;
+        const client = __classPrivateFieldGet(this, _GoogleAuth_google, "f").accounts.id;
         client.disableAutoSelect();
         client.cancel();
         client.revoke(hint, () => { });
-    });
-};
+        __classPrivateFieldSet(this, _GoogleAuth_initialized, false, "f");
+    }
+}
+_GoogleAuth_config = new WeakMap(), _GoogleAuth_options = new WeakMap(), _GoogleAuth_google = new WeakMap(), _GoogleAuth_initialized = new WeakMap();

package/package.json

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