hyperapp-is 0.1.31 → 0.1.33

package/README.md

@@ -204,6 +204,11 @@ npm で非公開の関数 (実験用)は、解説に記載します
 - [subscription_nodesCleanup](#subscription_nodescleanup)
 - [subscription_nodesLifecycleByIds](#subscription_nodeslifecyclebyids)
 
+**services / google**
+- [getGoogle](#getgoogle)
+- [googleAuth](#googleauth)
+- [getAccessToken](#getaccesstoken)
+
 ## source file / ソースファイル
 
 ```
@@ -255,18 +260,24 @@ src
 	 ├ animationView
 	 │  └ carousel.ts
 	 │
-	 └ dom
-		 ├ utils.ts
-		 │   ScrollMargin
-		 │   getScrollMargin
-		 │   MatrixState
-		 │   getMatrixState
-		 │
-		 └ lifecycle.ts
-			  effect_setTimedValue
-			  effect_nodesInitialize
-			  subscription_nodesCleanup
-			  subscription_nodesLifecycleByIds
+	 ├ dom
+	 │ ├ utils.ts
+	 │ │   ScrollMargin
+	 │ │   getScrollMargin
+	 │ │   MatrixState
+	 │ │   getMatrixState
+	 │ │
+	 │ └ lifecycle.ts
+	 │       effect_setTimedValue
+	 │       effect_nodesInitialize
+	 │       subscription_nodesCleanup
+	 │       subscription_nodesLifecycleByIds
+	 │
+	 └ service
+		 └ google.ts
+		      getGoogle
+			  googleAuth
+			  getAccessToken
 ```
 
 ## hyperapp-is/core
@@ -1576,3 +1587,56 @@ export const subscription_nodesLifecycleByIds = function <S> (
 - nodes.id        : ユニークID
 - nodes.initialize: 初期化イベント
 - nodes.finalize  : 終了時イベント
+
+---
+
+### getGoogle
+Google GIS 変数を取得する
+
+```ts
+export const getGoogle = async (): Promise<Google>
+```
+
+`<script src="https://accounts.google.com/gsi/client">` を読み込み、`window.google`の値（Promise結果）返却  
+
+---
+
+### googleAuth
+グーグル認証を行い `{ idToken: string, user: GoogleUser }` を取得します
+
+```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    ?: ポップアップ、もしくはリダイレクトでログインします
+
+---
+
+### getAccessToken
+Googleのaccess token を取得  
+
+```ts
+export const getAccessToken = (config: GetAccessTokenConfig): Promise<string>
+```
+
+```ts
+export interface GetAccessTokenConfig {
+	clientId: string
+	scope   : GoogleScope[]
+	prompt ?: "none" | "select_account" | "consent" // default: "select_account"
+}
+```
+
+- clientId: アプリケーションのID
+- scope   : スコープの配列
+- prompt ?: ログイン制御 `none` の場合、先にログインしていなければエラーとなります

package/dist/hyperapp-is/core/navigator.js

@@ -1,5 +1,6 @@
 // hyperapp-is / core / navigator.ts
 import { getValue, setValue, getLocalState, setLocalState, createLocalKey, } from "./state";
+import { HistoryInput } from "./component";
 import { getScrollMargin } from "../dom/utils";
 import { el, deleteKeys, SelectButton } from "./component";
 // ---------- ---------- ---------- ---------- ----------
@@ -255,10 +256,11 @@ export const NavigatorFinder = function (props) {
     // toolBarNode
     const toolBarNode = div({
         class: "toolBar"
-    }, input({
-        type: "text",
+    }, HistoryInput({
+        state,
+        id: `${id}_searchText`,
+        keyNames: [createLocalKey(id), "searchText"],
         placeholder: "search keys",
-        value: localState.searchText,
         oninput: action_inputSearchText
     }), button({
         type: "button",

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

@@ -12,3 +12,5 @@ export type { CarouselState, CarouselController } from "./animationView/carousel
 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";

package/dist/hyperapp-is/index.js

@@ -7,3 +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";

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

@@ -0,0 +1,57 @@
+export interface GoogleAccountsId {
+    initialize(config: {
+        client_id: string;
+        auto_select?: boolean;
+        ux_mode?: "popup" | "redirect";
+        callback: (response: {
+            credential: string;
+        }) => void;
+    }): void;
+    prompt(callback?: (notification: any) => void): void;
+}
+export interface GoogleTokenClient {
+    requestAccessToken(options?: {
+        prompt?: "none" | "consent" | "select_account";
+    }): void;
+}
+export interface GoogleAccountsOAuth2 {
+    initTokenClient(config: {
+        client_id: string;
+        scope: string;
+        callback: (response: {
+            access_token?: string;
+            error?: string;
+        }) => void;
+    }): GoogleTokenClient;
+}
+export interface GoogleAccounts {
+    id: GoogleAccountsId;
+    oauth2: GoogleAccountsOAuth2;
+}
+export interface Google {
+    accounts: GoogleAccounts;
+}
+export declare const getGoogle: () => Promise<Google>;
+export interface GoogleAuthConfig {
+    clientId: string;
+    autoSelect?: boolean;
+    uxMode?: "popup" | "redirect";
+}
+export interface GoogleUser {
+    name: string;
+    email: string;
+    picture: string;
+    sub: string;
+}
+export interface GoogleAuthResult {
+    idToken: string;
+    user: GoogleUser;
+}
+export declare const googleAuth: (config: GoogleAuthConfig) => Promise<GoogleAuthResult>;
+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";
+}
+export declare const getAccessToken: (config: GetAccessTokenConfig) => Promise<string>;

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

@@ -0,0 +1,117 @@
+// ---------- ---------- ----------
+// interface GoogleAccountsId
+// ---------- ---------- ----------
+// ---------- ---------- ----------
+// getGoogle
+// ---------- ---------- ----------
+// 2重読み込み防止用の変数
+let googlePromise = null;
+// google 変数を取得する
+export const getGoogle = async () => {
+    if (window.google)
+        return window.google;
+    if (googlePromise)
+        return googlePromise;
+    googlePromise = new Promise((resolve, reject) => {
+        const script = document.createElement("script");
+        script.src = "https://accounts.google.com/gsi/client";
+        // success
+        script.addEventListener("load", () => {
+            const result = window.google;
+            if (result) {
+                resolve(result);
+            }
+            else {
+                reject(new Error("error: loadGoogle: 001"));
+            }
+        });
+        // error
+        script.addEventListener("error", () => {
+            reject(new Error("error: loadGoogle: 002"));
+        });
+        // append child
+        document.body.appendChild(script);
+    });
+    return googlePromise;
+};
+// ---------- ---------- ---------- ---------- ----------
+// googleAuth
+// ---------- ---------- ---------- ---------- ----------
+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();
+    }); // end result
+};
+// ---------- ---------- ---------- ---------- ----------
+// getAccessToken
+// ---------- ---------- ---------- ---------- ----------
+export const getAccessToken = (config) => new Promise((resolve, reject) => {
+    var _a;
+    // get google
+    const google = window.google;
+    if (!google) {
+        reject(new Error("error: Google SDK not loaded. Call getGoogle() before getAccessToken()."));
+        return;
+    }
+    // variable
+    const prompt = (_a = config.prompt) !== null && _a !== void 0 ? _a : "select_account";
+    // initialize
+    const tokenClient = google.accounts.oauth2.initTokenClient({
+        client_id: config.clientId,
+        scope: config.scope.join(" "),
+        callback: (response) => {
+            if (response.error) {
+                reject(response);
+            }
+            else {
+                if (response.access_token) {
+                    resolve(response.access_token);
+                }
+                else {
+                    reject(new Error("No access_token"));
+                }
+            }
+        }
+    }); // end initialize
+    // request AccessToken
+    tokenClient.requestAccessToken({ prompt }); // prompt == "none" のときには、事前にログインが必要
+});

package/package.json

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