@gasboost/vite 1.1.0 → 1.2.0

package/README.md

@@ -603,6 +603,152 @@ URL encoded な RPC 名も decode されます。
 
 ---
 
+## Client Transport
+
+`@gasboost/client` を利用している場合、dev plugin はローカル開発時の transport を自動で Local RPC に切り替えます。
+
+アプリケーション側では development / production を判定する必要はありません。
+
+```ts
+import { appsScriptClient } from "@gasboost/client";
+import type { App } from "./server";
+
+const { client } = appsScriptClient<App>();
+
+const result = await client.sum(1, 2);
+```
+
+Vite Dev Server 上では、`appsScriptClient()` に transport が指定されていない場合、dev plugin が自動的に `FetchTransport` を適用します。
+
+```text
+appsScriptClient()
+        ↓
+FetchTransport
+        ↓
+POST /__gasboost/{rpcName}
+        ↓
+AppsScript.dispatch()
+```
+
+そのため、ローカル開発用に transport を切り替えるコードを書く必要はありません。
+
+```ts
+// 不要
+appsScriptClient({
+  transport: import.meta.env.DEV
+    ? new FetchTransport({
+        endpoint: "/__gasboost",
+      })
+    : new AppsScriptTransport(),
+});
+```
+
+production build では dev plugin による差し替えは行われません。
+
+GAS 上では `appsScriptClient()` のデフォルトである `AppsScriptTransport` がそのまま利用されます。
+
+```text
+appsScriptClient()
+        ↓
+AppsScriptTransport
+        ↓
+google.script.run
+```
+
+つまり、同じ application code のまま local development と GAS production の両方で利用できます。
+
+```ts
+const { client } = appsScriptClient<App>();
+```
+
+また、明示的に `transport` を指定した場合はその transport が優先されます。
+
+```ts
+const { client } = appsScriptClient<App>({
+  transport: customTransport,
+});
+```
+
+dev plugin が明示指定された transport を上書きすることはありません。
+
+---
+
+## HtmlTemplate variables
+
+GAS の `HtmlTemplate` では、`<?= variable ?>` を使用してサーバー側の値を HTML に埋め込めます。
+
+```html
+<script>
+  const variables = "<?= variables ?>";
+</script>
+```
+
+GAS 上では `HtmlTemplate` によって評価されますが、Vite Dev Server では GAS のテンプレート処理が実行されません。
+
+`@gasboost/vite` では、`template` オプションを指定することで、開発時にこれらの template variables を置換できます。
+
+```ts
+import { gasboost } from "@gasboost/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    gasboost({
+      entry: "./src/backend/main.ts",
+      template: {
+        variables: JSON.stringify({
+          scriptId: "local-script-id",
+          isSetupCompleted: true,
+          isTermsAccepted: true,
+        }),
+      },
+    }).dev,
+  ],
+});
+```
+
+例えば、次の HTML は、
+
+```html
+<script>
+  const variables = "<?= variables ?>";
+</script>
+```
+
+Vite の開発環境では次のように変換されます。
+
+```html
+<script>
+  const variables =
+    '{"scriptId":"local-script-id","isSetupCompleted":true,"isTermsAccepted":true}';
+</script>
+```
+
+複数の template variable も指定できます。
+
+```ts
+gasboost({
+  entry: "./src/backend/main.ts",
+  template: {
+    environment: "development",
+    userName: "Tiger",
+  },
+});
+```
+
+```html
+<p>Environment: <?= environment ?></p>
+<p>User: <?= userName ?></p>
+```
+
+`template` の型は `Record<string, string>` です。
+
+値の serialize は `@gasboost/vite` では行いません。オブジェクトなどを埋め込む場合は、利用側で `JSON.stringify()` などを使用して文字列へ変換してください。
+
+`template` による置換は Vite Dev Server でのみ行われます。production build では値を埋め込まず、GAS 上で実際の `HtmlTemplate` が template expression を評価します。
+
+---
+
 # build と dev の責務
 
 ```text

package/dist/gasboost.d.ts

@@ -4,6 +4,7 @@ export interface GasboostOptions {
     entry: string;
     envDir?: string;
     runtime?: GasRuntime;
+    template?: Record<string, string>;
 }
 export declare function gasboost(options: GasboostOptions): {
     build: Plugin;

package/dist/index.js

@@ -105,25 +105,58 @@ var v = class extends Error {
 	constructor(e) {
 		super(e), this.name = "InvalidRpcRequestError";
 	}
-};
-function y(e) {
-	let { runtime: t } = e;
+}, y = "@gasboost/client", b = "\0gasboost:client", x = "/__gasboost";
+function S(e) {
+	let { runtime: t, template: r } = e, i;
 	return {
 		name: "gasboost:dev",
 		apply: "serve",
+		enforce: "pre",
+		async resolveId(e, t, n) {
+			if (e !== y || this.environment.config.consumer !== "client") return null;
+			let r = await this.resolve(e, t, {
+				...n,
+				skipSelf: !0
+			});
+			return r ? (i = r.id, b) : null;
+		},
+		load(e) {
+			if (e !== b) return null;
+			if (!i) throw Error("@gasboost/client could not be resolved.");
+			let t = JSON.stringify(i);
+			return `
+import {
+  appsScriptClient as originalAppsScriptClient,
+  FetchTransport,
+} from ${t};
+
+export * from ${t};
+
+export function appsScriptClient(options = {}) {
+  return originalAppsScriptClient({
+    ...options,
+    transport:
+      options.transport ??
+      new FetchTransport({
+        endpoint: ${JSON.stringify(x)},
+      }),
+  });
+}
+`;
+		},
 		configureServer(r) {
 			h(t), r.middlewares.use(async (t, i, a) => {
 				if (!t.url) {
 					a();
 					return;
 				}
-				let o = t.url.split("?")[0];
-				if (!o.startsWith("/__gasboost/")) {
+				let o = t.url.split("?")[0], s = `${x}/`;
+				if (!o.startsWith(s)) {
 					a();
 					return;
 				}
-				let s = o.slice(12);
-				if (!s || s.includes("/")) {
+				let c = o.slice(s.length);
+				if (!c || c.includes("/")) {
 					a();
 					return;
 				}
@@ -135,10 +168,10 @@ function y(e) {
 					return;
 				}
 				try {
-					let { args: a } = await b(t), o = r.environments.ssr;
+					let { args: a } = await w(t), o = r.environments.ssr;
 					if (!n(o)) throw Error("Vite SSR environment is not runnable.");
-					let c = await (await o.runner.import(e.entry)).default.dispatch(decodeURIComponent(s), ...a);
-					i.statusCode = 200, i.setHeader("Content-Type", "application/json; charset=utf-8"), i.end(c.contents);
+					let s = await (await o.runner.import(e.entry)).default.dispatch(decodeURIComponent(c), ...a);
+					i.statusCode = 200, i.setHeader("Content-Type", "application/json; charset=utf-8"), i.end(s.contents);
 				} catch (e) {
 					i.statusCode = e instanceof v ? 400 : 500, i.setHeader("Content-Type", "application/json; charset=utf-8"), i.end(JSON.stringify({ error: e instanceof Error ? {
 						name: e.name,
@@ -150,10 +183,22 @@ function y(e) {
 					} }));
 				}
 			});
+		},
+		transformIndexHtml(e) {
+			if (!r) return e;
+			let t = e;
+			for (let [e, n] of Object.entries(r)) {
+				let r = RegExp(`<\\?=\\s*${C(e)}\\s*\\?>`, "g");
+				t = t.replace(r, () => n);
+			}
+			return t;
 		}
 	};
 }
-function b(e) {
+function C(e) {
+	return e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function w(e) {
 	return new Promise((t, n) => {
 		let r = [];
 		e.on("data", (e) => {
@@ -181,11 +226,11 @@ function b(e) {
 }
 //#endregion
 //#region src/gasboost.ts
-function x(e) {
+function T(e) {
 	return {
 		build: _(e),
-		dev: y(e)
+		dev: S(e)
 	};
 }
 //#endregion
-export { x as gasboost };
+export { T as gasboost };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gasboost/vite",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A Vite plugin for building @gasboost/app applications for Google Apps Script.",
   "keywords": [
     "google-apps-script",