@metagptx/web-sdk 0.0.49 → 0.0.52-beta.3

package/README.md

@@ -1,6 +1,6 @@
 # FuncSea WebSDK
 
-A TypeScript SDK for interacting with FuncSea API, providing modules for authentication, entity management, API calls, and integrations.
+A TypeScript SDK for interacting with FuncSea API, providing modules for authentication, entity management, API calls, integrations, and a Vite plugin for automatic 404 page setup.
 
 ## Installation
 
@@ -14,6 +14,8 @@ yarn add @metagptx/web-sdk
 
 ## Quick Start
 
+### Basic Usage
+
 ```typescript
 import { createClient } from '@metagptx/web-sdk';
 
@@ -24,9 +26,27 @@ const client = createClient();
 const user = await client.auth.me();
 ```
 
+### Using the Vite Plugin
+
+If you're using Vite with React Router, you can use the included plugin to automatically add a 404 page:
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { vitePlugin404 } from '@metagptx/web-sdk';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    vitePlugin404(), // Automatically adds 404 page to your routes
+  ],
+});
+```
+
 ## Modules
 
-The SDK provides six main modules:
+The SDK provides six main modules and a Vite plugin:
 
 - **auth**: User authentication operations
 - **entities**: Dynamic entity CRUD operations
@@ -34,6 +54,7 @@ The SDK provides six main modules:
 - **integrations**: Integration function invocations
 - **frame**: Frame communication operations for iframe/parent window messaging
 - **utils**: Utility functions for URL opening and window management
+- **vitePlugin404**: Vite plugin for automatically adding a 404 page to React Router applications
 
 ## API Reference
 
@@ -598,6 +619,117 @@ The SDK automatically handles 401 (Unauthorized) responses by redirecting to the
 
 ---
 
+## Vite Plugin
+
+The SDK provides a Vite plugin for automatically adding a 404 page to your React Router application.
+
+### `vitePlugin404()`
+
+A Vite plugin that automatically creates a virtual 404 React component and adds it to your routing configuration.
+
+**Features:**
+- Automatically creates a beautiful 404 page component
+- Automatically adds a wildcard route (`path="*"`) to your `App.tsx`
+- Detects if already configured (won't duplicate routes)
+- Works seamlessly with React Router
+- Provides "Create page" functionality when running in MGX iframe
+
+**Setup:**
+
+1. Import the plugin in your `vite.config.ts`:
+
+```typescript
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import { vitePlugin404 } from '@metagptx/web-sdk';
+
+export default defineConfig({
+  plugins: [
+    react(),
+    vitePlugin404(), // Add the plugin
+  ],
+});
+```
+
+2. The plugin will automatically:
+   - Create a virtual `NotFoundPage` component
+   - Add the import statement to your `App.tsx`
+   - Add a `<Route path="*" element={<NotFoundPage />} />` route
+
+**Requirements:**
+
+- Your project must have an `App.tsx` file (or any file containing `App.tsx` in the path)
+- Your project must use React Router with `<Routes>` component
+- Your project should have `@/components/ui/button` component (or adjust the import in the plugin code)
+
+**How it works:**
+
+The plugin uses multiple strategies to intelligently add the 404 route:
+
+1. **Import placement strategies:**
+   - After `AuthError` import (if exists)
+   - After `MODULE_IMPORTS_END` comment (if exists)
+   - Before `MODULE_IMPORTS_START` comment (if exists)
+   - After the last import statement (fallback)
+
+2. **Route placement strategies:**
+   - Before `MODULE_ROUTES_END` comment (if exists)
+   - Before closing `</Routes>` tag
+   - After the last `<Route>` tag (fallback)
+
+**Example - Before plugin:**
+
+```tsx
+// App.tsx
+import { Route, Routes } from 'react-router-dom';
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/about" element={<About />} />
+    </Routes>
+  );
+}
+```
+
+**Example - After plugin (automatically transformed):**
+
+```tsx
+// App.tsx
+import { Route, Routes } from 'react-router-dom';
+import NotFoundPage from 'virtual:404-page';
+
+export default function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/about" element={<About />} />
+      <Route path="*" element={<NotFoundPage />} />
+    </Routes>
+  );
+}
+```
+
+**404 Page Features:**
+
+The generated 404 page includes:
+- Modern, responsive design with gradient background
+- "Return Home" button
+- "Create page" button (when running in MGX iframe) - uses `client.frame.createPage()`
+- "Go to MGX" button (when not in iframe)
+
+**Customization:**
+
+If you need to customize the 404 page, you can:
+1. Create your own 404 component
+2. Import it manually in `App.tsx`
+3. The plugin will detect existing 404 routes and skip automatic addition
+
+**Note:** The plugin only processes files that contain `App.tsx` in their path and end with `.tsx`. It will skip files that already have a 404 route configured.
+
+---
+
 ## TypeScript Support
 
 The SDK is written in TypeScript and provides full type definitions. You can use generic types for typed responses:
@@ -636,3 +768,38 @@ try {
   }
 }
 ```
+
+---
+
+## Exports
+
+The SDK exports the following:
+
+### Main Exports
+
+```typescript
+import { createClient, vitePlugin404 } from '@metagptx/web-sdk';
+```
+
+- **`createClient(config?)`**: Creates a new SDK client instance
+- **`vitePlugin404()`**: Vite plugin for automatic 404 page setup
+
+### Type Exports
+
+```typescript
+import type {
+  AnyType,
+  ApiCallParams,
+  ClientConfig,
+  IntegrationFunction,
+  IntegrationParams,
+  RequestConfig,
+} from '@metagptx/web-sdk';
+```
+
+- **`ClientConfig`**: Configuration options for `createClient()`
+- **`ApiCallParams`**: Parameters for `apiCall.invoke()`
+- **`IntegrationFunction`**: Type for integration functions
+- **`IntegrationParams`**: Parameters for integration function calls
+- **`RequestConfig`**: Axios request configuration options
+- **`AnyType`**: Generic type utility

package/dist/index.js

@@ -1,4 +1,4 @@
-import e from"axios";import t from"qs";const n=e=>{let t=e.response?.status;if(t&&t>=400&&t!==401)try{typeof window<`u`&&window.top&&window.top?.postMessage({type:`mgx-appview-error`,targetName:window.name,data:{errMsg:e.response?.data?.message||e.response?.data?.detail||`Server Error`,stack:JSON.stringify({url:e.response?.config?.url,data:e.response?.data,status:e.response?.status})}},`*`)}catch(e){console.warn(`Failed to notify parent window about API error:`,e)}},r=(r={})=>{let{onUnauthorized:i,...a}=r,o=typeof globalThis<`u`&&`localStorage`in globalThis&&typeof globalThis.localStorage?.getItem==`function`?globalThis.localStorage.getItem(`token`)??void 0:void 0,s={timeout:6e4,paramsSerializer:e=>t.stringify(e,{arrayFormat:`brackets`}),...a,headers:{"Content-Type":`application/json`,"App-Host":globalThis?.window?.location?.origin??``,...o?{Authorization:`Bearer ${o}`}:{},...a.headers}},c=e.create(s);return c.interceptors.request.use(e=>e,e=>Promise.reject(e)),c.interceptors.response.use(e=>e,e=>{let t=e.response?.status;return t===401&&i&&i(),n(e),Promise.reject(e)}),c},i=[`stripe.com`],a=e=>typeof e==`string`?e.startsWith(`_`)||e.startsWith(`$`)||e===`constructor`||e===`toString`||e===`valueOf`||e===`inspect`||e===`toJSON`:!0,o=()=>{let e=window.location?.href??``,t=``;e.startsWith(`/`)?t=e:e&&(t=e.replace(/^[a-z][a-z0-9+.-]*:\/\/[^/]+/i,``));let n=new URLSearchParams({from_url:t});window.location.href=`/api/v1/auth/login?${n.toString()}`},s=()=>globalThis?.window?.name?.includes(`devIframe`),c=e=>e?i.some(t=>e.toString().includes(t)):!1,l=e=>{let{requestInstance:t}=e;return{async login(){let e=new URLSearchParams(window.location.search),t=e.get(`token`);return t&&typeof globalThis<`u`&&`localStorage`in globalThis&&(globalThis.localStorage?.setItem(`token`,t),window.location.href=`/`),t},async me(){return t.get(`/api/v1/auth/me`)},async logout(){typeof globalThis<`u`&&`localStorage`in globalThis&&globalThis.localStorage?.removeItem(`token`);let e=await t.get(`/api/v1/auth/logout`);return typeof globalThis<`u`&&`window`in globalThis&&(globalThis.window.opener=null),window.location.href=`/`,e},toLogin:o}},u=e=>{let{requestInstance:t,entityName:n}=e,r=`/api/v1/entities/${n}`,i=e=>{if(!e)return;let t={...e};return e.fields&&Array.isArray(e.fields)&&(t.fields=e.fields.join(`,`)),e.query&&typeof e.query==`object`&&(t.query=JSON.stringify(e.query)),t};return{async query(e){let n=i(e);return t.get(r,{params:n})},async queryAll(e){let n=i(e);return t.get(`${r}/all`,{params:n})},async get(e){let{id:n,...a}=e,o=i(a);return t.get(`${r}/${n}`,{params:o})},async create(e){return t.post(r,e.data)},async update(e){return t.put(`${r}/${e.id}`,e.data)},async delete(e){return t.delete(`${r}/${e.id}`)},async deleteBatch(e){return t.delete(`${r}/batch`,{data:{ids:e.ids}})},async createBatch(e){return t.post(`${r}/batch`,e.data)},async updateBatch(e){return t.put(`${r}/batch`,e.data)}}},d=e=>{let{requestInstance:t}=e,n=new Map;return new Proxy({},{get(e,r){if(!a(r))return n.has(r)||n.set(r,u({requestInstance:t,entityName:r})),n.get(r)}})},f=e=>{let{requestInstance:t}=e;return{async invoke(e){let{url:n,method:r=`GET`,data:i,options:a={}}=e;if(typeof window<`u`&&a?.responseType===`stream`){let e;try{typeof globalThis<`u`&&`localStorage`in globalThis&&typeof globalThis.localStorage?.getItem==`function`&&(e=globalThis.localStorage.getItem(`token`)??void 0)}catch{}let t={"Content-Type":`application/json`,"App-Host":globalThis?.window?.location?.origin??``,...e?{Authorization:`Bearer ${e}`}:{},...a.headers||{}},o;i&&[`POST`,`PUT`,`PATCH`].includes(r.toUpperCase())&&(o=JSON.stringify(i));let s=await fetch(n,{method:r.toUpperCase(),headers:t,body:o});return s}let o={method:r.toUpperCase(),url:n,...a};return i&&[`POST`,`PUT`,`PATCH`].includes(o.method)?o.data=i:i&&[`GET`,`DELETE`].includes(o.method)&&(o.params=i),t.request(o)}}},p=e=>{let{requestInstance:t}=e;return new Proxy({},{get(e,n){if(!a(n))return new Proxy({},{get(e,r){if(!a(r))return(e={})=>{let i=`/api/integrations/core/${r}`;n!==`core`&&(i=`/api/integrations/providers/${n}/${r}`);let{payload:a={},option:o={}}=e,s=a instanceof FormData?{...o,headers:{...o.headers,"Content-Type":void 0}}:o;return t.post(i,a,s)}}})}})};let m=null;const h=e=>{if(m)return;let{requestInstance:t}=e,n=async e=>{let n=globalThis?.localStorage?.getItem(`token`);if(n)return;let r=e.token,i=await t.post(`/api/v1/auth/token/exchange`,{platform_token:r});i.status===200&&i.data.token&&(globalThis?.localStorage?.setItem(`token`,i.data.token),window.location.href=`/`)},r=e=>{switch(e.data.type){case`mgx-token-saved`:n(e.data.data);break;default:break}};m={requestInstance:t,handleMessage:r},globalThis?.window?.addEventListener(`message`,r)},g=()=>{let e=(e,t,n,r)=>{if(globalThis?.window===void 0||!globalThis?.window?.top){console.warn(`postMessage: window.top is not available`);return}try{let{targetOrigin:i=`*`,targetName:a=globalThis?.window?.name??``}=n||{},o={type:e,targetName:a,data:t};(r??globalThis?.window?.top)?.postMessage(o,i)}catch(e){console.warn(`Failed to send postMessage:`,e)}};return{postMessage:e}};let _=!1;const v=e=>{h(e);let{postMessage:t}=g(),n=()=>{if(_)return;_=!0;let e=globalThis?.localStorage?.getItem(`token`);e||(t(`mgx-token-request`,{domain:globalThis?.window?.location?.href??``},{},globalThis?.window?.opener),t(`mgx-token-request`,{domain:globalThis?.window?.location?.href??``}))};return n(),{createPage(e){let n=e??globalThis?.window?.location?.pathname??``;t(`mgx-create-page`,{path:n})}}},y=()=>{let{postMessage:e}=g(),t=t=>{if(t){if(globalThis?.window===void 0){console.warn(`openUrl: window is not available`);return}if(c(t)&&s()){e(`mgx-open-url`,{url:t.toString()},{},globalThis?.window?.opener);return}globalThis.window.location.href=t.toString()}};return{openUrl:t}},b=(e={})=>{let t=r({baseURL:`/`,...e}),n=l({requestInstance:t}),i=d({requestInstance:t}),a=f({requestInstance:t}),o=p({requestInstance:t}),s=v({requestInstance:t}),c=y();return{auth:n,entities:i,apiCall:a,integrations:o,frame:s,utils:c}};function x(){let e=`virtual:404-page`,t=`import { Button } from '@/components/ui/button';
+import e from"axios";import t from"qs";const n=e=>{let t=e.response?.status;if(t&&t>=400&&t!==401)try{typeof window<`u`&&window.top&&window.top?.postMessage({type:`mgx-appview-error`,targetName:window.name,data:{errMsg:e.response?.data?.message||e.response?.data?.detail||`Server Error`,stack:JSON.stringify({url:e.response?.config?.url,data:e.response?.data,status:e.response?.status})}},`*`)}catch(e){console.warn(`Failed to notify parent window about API error:`,e)}},r=(r={})=>{let{onUnauthorized:i,...a}=r,o=typeof globalThis<`u`&&`localStorage`in globalThis&&typeof globalThis.localStorage?.getItem==`function`?globalThis.localStorage.getItem(`token`)??void 0:void 0,s={timeout:6e4,paramsSerializer:e=>t.stringify(e,{arrayFormat:`brackets`}),...a,headers:{"Content-Type":`application/json`,"App-Host":globalThis?.window?.location?.origin??``,...o?{Authorization:`Bearer ${o}`}:{},...a.headers}},c=e.create(s);return c.interceptors.request.use(e=>e,e=>Promise.reject(e)),c.interceptors.response.use(e=>e,e=>{let t=e.response?.status;return t===401&&i&&i(),n(e),Promise.reject(e)}),c},i=[`stripe.com`],a=e=>typeof e==`string`?e.startsWith(`_`)||e.startsWith(`$`)||e===`constructor`||e===`toString`||e===`valueOf`||e===`inspect`||e===`toJSON`:!0,o=()=>{let e=window.location?.href??``,t=``;e.startsWith(`/`)?t=e:e&&(t=e.replace(/^[a-z][a-z0-9+.-]*:\/\/[^/]+/i,``));let n=new URLSearchParams({from_url:t});window.location.href=`/api/v1/auth/login?${n.toString()}`},s=()=>globalThis?.window?.name?.includes(`devIframe`),c=e=>e?i.some(t=>e.toString().includes(t)):!1,l=e=>{let{requestInstance:t}=e;return{async login(){let e=new URLSearchParams(window.location.search),t=e.get(`token`);return t&&typeof globalThis<`u`&&`localStorage`in globalThis&&(globalThis.localStorage?.setItem(`token`,t),globalThis.localStorage?.setItem(`isLougOutManual`,`false`),window.location.href=`/`),t},async me(){return t.get(`/api/v1/auth/me`)},async logout(){typeof globalThis<`u`&&`localStorage`in globalThis&&(globalThis.localStorage?.removeItem(`token`),globalThis.localStorage?.setItem(`isLougOutManual`,`true`));let e=await t.get(`/api/v1/auth/logout`);return typeof globalThis<`u`&&`window`in globalThis&&(globalThis.window.opener=null),window.location.href=`/`,e},toLogin:o}},u=e=>{let{requestInstance:t,entityName:n}=e,r=`/api/v1/entities/${n}`,i=e=>{if(!e)return;let t={...e};return e.fields&&Array.isArray(e.fields)&&(t.fields=e.fields.join(`,`)),e.query&&typeof e.query==`object`&&(t.query=JSON.stringify(e.query)),t};return{async query(e){let n=i(e);return t.get(r,{params:n})},async queryAll(e){let n=i(e);return t.get(`${r}/all`,{params:n})},async get(e){let{id:n,...a}=e,o=i(a);return t.get(`${r}/${n}`,{params:o})},async create(e){return t.post(r,e.data)},async update(e){return t.put(`${r}/${e.id}`,e.data)},async delete(e){return t.delete(`${r}/${e.id}`)},async deleteBatch(e){return t.delete(`${r}/batch`,{data:{ids:e.ids}})},async createBatch(e){return t.post(`${r}/batch`,e.data)},async updateBatch(e){return t.put(`${r}/batch`,e.data)}}},d=e=>{let{requestInstance:t}=e,n=new Map;return new Proxy({},{get(e,r){if(!a(r))return n.has(r)||n.set(r,u({requestInstance:t,entityName:r})),n.get(r)}})},f=e=>{let{requestInstance:t}=e;return{async invoke(e){let{url:n,method:r=`GET`,data:i,options:a={}}=e;if(typeof window<`u`&&a?.responseType===`stream`){let e;try{typeof globalThis<`u`&&`localStorage`in globalThis&&typeof globalThis.localStorage?.getItem==`function`&&(e=globalThis.localStorage.getItem(`token`)??void 0)}catch{}let t={"Content-Type":`application/json`,"App-Host":globalThis?.window?.location?.origin??``,...e?{Authorization:`Bearer ${e}`}:{},...a.headers||{}},o;i&&[`POST`,`PUT`,`PATCH`].includes(r.toUpperCase())&&(o=JSON.stringify(i));let s=await fetch(n,{method:r.toUpperCase(),headers:t,body:o});return s}let o={method:r.toUpperCase(),url:n,...a};return i&&[`POST`,`PUT`,`PATCH`].includes(o.method)?o.data=i:i&&[`GET`,`DELETE`].includes(o.method)&&(o.params=i),t.request(o)}}},p=e=>{let{requestInstance:t}=e;return new Proxy({},{get(e,n){if(!a(n))return new Proxy({},{get(e,r){if(!a(r))return(e={})=>{let i=`/api/integrations/core/${r}`;n!==`core`&&(i=`/api/integrations/providers/${n}/${r}`);let{payload:a={},option:o={}}=e,s=a instanceof FormData?{...o,headers:{...o.headers,"Content-Type":void 0}}:o;return t.post(i,a,s)}}})}})};let m=null;const h=e=>{if(m)return;let{requestInstance:t}=e,n=async e=>{let n=globalThis?.localStorage?.getItem(`token`);if(n)return;let r=e.token,i=await t.post(`/api/v1/auth/token/exchange`,{platform_token:r});i.status===200&&i.data.token&&(globalThis?.localStorage?.setItem(`token`,i.data.token),window.location.href=`/`)},r=e=>{switch(e.data.type){case`mgx-token-saved`:n(e.data.data);break;default:break}};m={requestInstance:t,handleMessage:r},globalThis?.window?.addEventListener(`message`,r)},g=()=>{let e=(e,t,n,r)=>{if(globalThis?.window===void 0||!globalThis?.window?.top){console.warn(`postMessage: window.top is not available`);return}try{let{targetOrigin:i=`*`,targetName:a=globalThis?.window?.name??``}=n||{},o={type:e,targetName:a,data:t};(r??globalThis?.window?.top)?.postMessage(o,i)}catch(e){console.warn(`Failed to send postMessage:`,e)}};return{postMessage:e}};let _=!1;const v=e=>{h(e);let{postMessage:t}=g(),n=()=>{if(_)return;_=!0;let e=globalThis?.localStorage?.getItem(`token`),n=globalThis?.localStorage?.getItem(`isLougOutManual`)===`true`,r=window.self!==window.top&&window.name?.includes(`devIframe`);!e&&!n&&r&&(t(`mgx-token-request`,{domain:globalThis?.window?.location?.href??``},{},globalThis?.window?.opener),t(`mgx-token-request`,{domain:globalThis?.window?.location?.href??``}))};return n(),{createPage(e){let n=e??globalThis?.window?.location?.pathname??``;t(`mgx-create-page`,{path:n})}}},y=()=>{let{postMessage:e}=g(),t=t=>{if(t){if(globalThis?.window===void 0){console.warn(`openUrl: window is not available`);return}if(c(t)&&s()){e(`mgx-open-url`,{url:t.toString()},{},globalThis?.window?.opener);return}globalThis.window.location.href=t.toString()}};return{openUrl:t}},b=(e={})=>{let t=r({baseURL:`/`,...e}),n=l({requestInstance:t}),i=d({requestInstance:t}),a=f({requestInstance:t}),o=p({requestInstance:t}),s=v({requestInstance:t}),c=y();return{auth:n,entities:i,apiCall:a,integrations:o,frame:s,utils:c}};function x(){let e=`virtual:404-page`,t=`import { Button } from '@/components/ui/button';
 import { createClient } from '@metagptx/web-sdk';
 
 // Create client instance

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@metagptx/web-sdk",
   "type": "module",
-  "version": "0.0.49",
+  "version": "0.0.52-beta.3",
   "packageManager": "pnpm@10.15.0+sha512.486ebc259d3e999a4e8691ce03b5cac4a71cbeca39372a9b762cb500cfdf0873e2cb16abe3d951b1ee2cf012503f027b98b6584e4df22524e0c7450d9ec7aa7b",
   "description": "TypeScript SDK for interacting with FuncSea API",
   "author": "MetaGPTX",
@@ -25,7 +25,7 @@
     "test": "vitest run",
     "test:coverage": "vitest --coverage run",
     "typecheck": "tsc --noEmit",
-    "release": "bumpp && npm publish",
+    "release": "bumpp && npm publish --tag beta",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
     "precommit": "npm run typecheck && lint-staged && npm run test:coverage",