chore(tabby-chat-panel): add build script output for browser. (#4058)

* chore(tabby-chat-panel): add build script output for browser.

* chore: update pnpm-lock.

* fix(tabby-chat-panel): fix build script.

* chore: update pnpm-lock.

Author: icycodes

clients/tabby-chat-panel/package.json

@@ -31,7 +31,9 @@
     "dist"
   ],
   "scripts": {
-    "build": "unbuild",
+    "build": "pnpm build:unbuild & pnpm build:rollup",
+    "build:unbuild": "unbuild",
+    "build:rollup": "rollup -c rollup.config.js",
     "dev": "unbuild --stub",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -51,6 +53,10 @@
   "devDependencies": {
     "@antfu/eslint-config": "^2.16.0",
     "@antfu/ni": "^0.21.12",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.1",
     "@types/node": "^20.12.7",
     "@types/react": "18.2.23",
     "@types/semver": "^7.5.8",
@@ -59,6 +65,7 @@
     "eslint-formatter-mo": "^1.2.0",
     "lint-staged": "^15.2.2",
     "rimraf": "^5.0.5",
+    "rollup": "^4.27.3",
     "tsx": "^4.7.3",
     "typescript": "^5.4.5",
     "unbuild": "^2.0.0",

clients/tabby-chat-panel/rollup.config.js

@@ -0,0 +1,27 @@
+import typescript from '@rollup/plugin-typescript'
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import terser from '@rollup/plugin-terser'
+import { defineConfig } from 'rollup'
+
+export default defineConfig([{
+  input: 'src/browser.ts',
+  output: {
+    dir: 'dist',
+    format: 'iife',
+    entryFileNames: 'iife/tabby-chat-panel.min.js',
+    name: 'TabbyChatPanel',
+  },
+  treeshake: true,
+  plugins: [
+    resolve({
+      browser: true,
+    }),
+    commonjs(),
+    terser(),
+    typescript({
+      tsconfig: './tsconfig.json',
+      noEmitOnError: true,
+    }),
+  ],
+}])

clients/tabby-chat-panel/src/browser.ts

@@ -0,0 +1,9 @@
+import { createThreadFromIframe } from 'tabby-threads'
+import { createClient as createClientFromThread } from './thread'
+import type { ClientApi } from './client'
+import type { ServerApi, ServerApiList } from './server'
+
+export async function createClient(iframe: HTMLIFrameElement, api: ClientApi): Promise<ServerApiList> {
+  const thread = createThreadFromIframe<ClientApi, ServerApi>(iframe, { expose: api })
+  return await createClientFromThread(thread)
+}