@rpcbase/client 0.230.0 → 0.231.0

package/package.json

@@ -1,81 +1,20 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.230.0",
+  "version": "0.231.0",
+  "type": "module",
+  "main": "./src/index.ts",
   "scripts": {
-    "build": "../../node_modules/.bin/wireit",
-    "test": "../../node_modules/.bin/wireit"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
+    "build": "tsc --watch",
+    "release": "wireit"
   },
   "wireit": {
-    "install": {
-      "command": "NODE_ENV=development yarn install --mutex network --frozen-lockfile",
-      "files": [
-        "yarn.lock"
-      ],
-      "output": [
-        "node_modules/"
-      ],
-      "allowUsuallyExcludedPaths": true
-    },
-    "build-firebase": {
-      "command": "webpack -c firebase/webpack.config.js",
-      "dependencies": [
-        "install"
-      ],
-      "files": [
-        "firebase/entry*.js",
-        "firebase/webpack.config.js"
-      ],
-      "output": [
-        "firebase/index.js",
-        "firebase/sw.js"
-      ]
-    },
-    "build": {
-      "dependencies": [
-        "build-firebase"
-      ]
-    },
-    "test": {
-      "command": "jest --coverage --coverageDirectory coverage/",
-      "dependencies": [
-        "build"
-      ],
-      "files": [
-        "**/*.js",
-        "!coverage/",
-        "!node_modules/"
-      ],
-      "output": [
-        "coverage/"
-      ]
-    },
-    "apply-version": {
-      "command": "node ../../scripts/prflow/apply-prerelease-versions.js $BRANCH_NAME",
-      "files": [
-        "package.json"
-      ],
-      "output": [],
-      "env": {
-        "BRANCH_NAME": {
-          "external": true
-        }
-      }
-    },
     "release": {
-      "command": "npm publish --tag $NPM_RELEASE_CHANNEL | tee publish-output.txt",
-      "dependencies": [
-        "test",
-        "apply-version"
-      ],
+      "command": "../../scripts/publish.js",
+      "dependencies": [],
       "files": [
         "package.json"
       ],
-      "output": [
-        "publish-output.txt"
-      ],
+      "output": [],
       "env": {
         "NPM_RELEASE_CHANNEL": {
           "external": true
@@ -83,50 +22,9 @@
       }
     }
   },
+  "peerDependencies": {},
   "dependencies": {
-    "@fingerprintjs/fingerprintjs": "3.4.2",
-    "@rpcbase/lottie": "3.5.3",
-    "@rpcbase/redbox-react": "0.3.0",
-    "@ui-kitten/components": "5.3.1",
-    "figma-squircle": "0.3.1",
-    "firebase": "11.0.2",
-    "framer-motion": "11.11.17",
-    "fuzzysort": "3.1.0",
-    "i18next": "23.16.4",
-    "i18next-chained-backend": "4.6.2",
-    "i18next-resources-to-backend": "1.2.1",
-    "js-tree": "2.0.2",
-    "lz-string": "1.5.0",
-    "posthog-js": "1.188.0",
-    "pouchdb-adapter-indexeddb": "9.0.0",
-    "pouchdb-core": "9.0.0",
-    "pouchdb-find": "9.0.0",
-    "react-bootstrap-typeahead": "6.3.2",
-    "react-i18next": "15.1.0",
-    "rrweb": "1.1.3",
-    "socket.io-client": "4.8.1",
-    "web-vitals": "4.2.4"
+    "axios": "1.7.9"
   },
-  "devDependencies": {
-    "@babel/core": "7.26.0",
-    "@babel/plugin-transform-modules-commonjs": "7.25.9",
-    "@babel/plugin-transform-runtime": "7.25.9",
-    "@babel/preset-react": "7.25.9",
-    "@testing-library/dom": "10.4.0",
-    "@testing-library/react": "16.0.1",
-    "axios": "1.7.7",
-    "babel-jest": "29.7.0",
-    "bluebird": "3.7.2",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "lodash": "4.17.21",
-    "page": "1.11.6",
-    "react": "19.0.0-rc.1",
-    "react-dom": "19.0.0-rc.1",
-    "@rpcbase/react-native-web": "0.19.13",
-    "react-test-renderer": "19.0.0-rc.1",
-    "validator": "13.12.0",
-    "webpack": "5.96.1",
-    "webpack-cli": "5.1.4"
-  }
+  "devDependencies": {}
 }

package/src/apiClient/getServerApiClient.ts

@@ -0,0 +1,131 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import assert from "assert"
+
+import { Application, IRouter, Request, Response } from "express"
+
+// import { Ctx } from "@rpcbase/api"
+type Ctx = any
+
+
+export const getServerApiClient = async(app: Application) => {
+  const callRoute = async <TResponse = Record<string, unknown>>(
+    app: Application,
+    method: string,
+    path: string,
+    req: Partial<Request>,
+    res: Partial<Response>
+  ): Promise<TResponse> => {
+    return new Promise((resolve, reject) => {
+      let isEnded = false
+
+      const mockReq = {
+        ...req,
+        method: method.toUpperCase(),
+        url: path
+      } as Request
+
+      const mockRes = {
+        ...res,
+        json: (data: any) => {
+          if (!isEnded) {
+            isEnded = true
+            resolve(data)
+          }
+        },
+        status: (statusCode: number) => {
+          console.log("Status:", statusCode)
+          return mockRes
+        },
+      } as Response
+
+      const routerStack: any[] = (app.router as unknown as IRouter).stack
+
+      const firstApiMiddlewareIndex = routerStack.findIndex((layer) => layer.name === "__FIRST_API_MIDDLEWARE__")
+      if (!(firstApiMiddlewareIndex > -1)) {
+        throw new Error("middleware: __FIRST_API_MIDDLEWARE__ was not found in stack")
+      }
+
+      const apiStack = routerStack.slice(firstApiMiddlewareIndex + 1)
+
+      const processLayer = async (index: number) => {
+        if (index >= apiStack.length || isEnded) return
+
+        const layer = apiStack[index]
+
+        const isNonMatchingLayer = !layer.match(path)
+        if (isNonMatchingLayer) {
+          // console.log("not machthing route:", path, "to layer:", index, layer.name, layer, "reason: ", {isNonMatchingLayer})
+          await processLayer(index + 1)
+          return
+        }
+
+        const runHandler = async(handler: any) => new Promise<void>((resolveMiddleware, rejectMiddleware) => {
+          handler(mockReq, mockRes, (err?: any) => {
+            if (err) {
+              console.error("Middleware error:", err)
+              if (!isEnded) {
+                isEnded = true
+                rejectMiddleware(err)
+              }
+              return
+            }
+            resolveMiddleware()
+          })
+        })
+
+        if (layer.route) {
+          if (!layer.route.methods[method.toLowerCase()]) {
+            // console.log("not machthing route:", path, "to route layer:", index, layer.name, layer, "reason: method not matching")
+            await processLayer(index + 1)
+            return
+          }
+
+          assert(layer.route.stack.length === 1, `expected only one handler per route for route: ${layer.route.path}`)
+
+          await runHandler(layer.route.stack[0].handle)
+
+        } else {
+          await runHandler(layer.handle)
+        }
+
+        if (!isEnded) {
+          await processLayer(index + 1)
+        }
+      }
+
+      // AWAIT ??
+      processLayer(0)
+
+      // Set a timeout to prevent hanging
+      setTimeout(() => {
+        if (!isEnded) {
+          reject("Route handler timed out")
+        }
+      }, 30000)
+    })
+  }
+
+  const createMethod = (method: string) => {
+    return async <TResponse = Record<string, unknown>>(
+      path: string,
+      payload: Record<string, unknown>,
+      ctx?: Ctx,
+    ): Promise<TResponse> => {
+      assert(ctx, "Context must be provided in SSR mode")
+
+      ctx.req.body = payload
+      return callRoute<TResponse>(app, method, path, ctx.req, ctx.res)
+    }
+  }
+
+  const apiClient = {
+    get: createMethod("get"),
+    post: createMethod("post"),
+    put: createMethod("put"),
+    delete: createMethod("delete")
+  }
+
+  return apiClient
+}
+
+export default getServerApiClient

package/src/apiClient/index.ts

@@ -0,0 +1,86 @@
+import assert from "assert"
+
+import type { Application } from "express"
+
+// import { Ctx } from "@rpcbase/api"
+type Ctx = any
+
+
+type ServerArgs = {
+  app: Application;
+};
+
+type PayloadNotCtx = Record<string, unknown> & {
+  [P in keyof Ctx]?: never;
+};
+
+type ApiClientMethod = <TResponse = Record<string, unknown>>(
+  path: string,
+  payload: PayloadNotCtx,
+  ctx?: Ctx,
+) => Promise<TResponse>;
+
+export type HttpMethod = "get" | "put" | "post" | "delete";
+type MethodRecord<T> = Record<HttpMethod, T>;
+
+export type ApiClient = MethodRecord<ApiClientMethod>;
+
+let apiClient: ApiClient
+
+export const initApiClient = async (args?: ServerArgs) => {
+  // @ts-ignore
+  if (import.meta.env.SSR) {
+    assert(args, "Server args must be provided in SSR mode")
+
+    const { getServerApiClient } = await import("./getServerApiClient")
+
+    apiClient = await getServerApiClient(args.app)
+  } else {
+    const axios = (await import("axios")).default
+
+    const axiosClient = axios.create({
+      baseURL: "/",
+      withCredentials: true,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+
+    const createMethod = (method: string): ApiClientMethod => {
+      return async <TResponse = Record<string, unknown>>(
+        path: string,
+        payload: PayloadNotCtx,
+        _ctx?: Ctx,
+      ): Promise<TResponse> => {
+        const config = {
+          method,
+          url: path,
+          data: payload,
+          headers: {
+            // ...(typeof ctxOrPath !== 'string' && {
+            //   // 'X-Custom-Header': ctxOrPath.someHeaderValue,
+            //   // ...ctxOrPath.additionalHeaders,
+            // }),
+          },
+        }
+
+        try {
+          const response = await axiosClient(config)
+          return response.data
+        } catch (error) {
+          console.log("AXIOS API ERROR", error)
+          throw error
+        }
+      }
+    }
+
+    apiClient = {
+      get: createMethod("get"),
+      put: createMethod("put"),
+      post: createMethod("post"),
+      delete: createMethod("delete"),
+    }
+  }
+}
+
+export { apiClient }

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./apiClient"
+export * from "./initClient"
+export * from "./types"

package/src/initClient.ts

@@ -0,0 +1,32 @@
+import { initApiClient } from "./apiClient"
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const showErrorOverlay = (err: { title: string, message: string, reason: string, plugin: string }) => {
+  const ErrorOverlay = customElements.get("vite-error-overlay")
+  // don't open outside vite environment
+  if (!ErrorOverlay) {return}
+  console.log(err)
+  const overlay = new ErrorOverlay(err)
+  document.body.appendChild(overlay)
+}
+
+
+const handleServerErrors = () => {
+  if ((window as any).__staticRouterHydrationData?.errors) {
+
+    const {errors} = (window as any).__staticRouterHydrationData
+
+    Object.values(errors).forEach((error: any) => {
+      showErrorOverlay({
+        plugin: "ssr-router",
+        ...error.reason
+      })
+    })
+  }
+}
+
+export const initClient = () => {
+  initApiClient()
+
+  handleServerErrors()
+}

package/src/types.ts

@@ -0,0 +1,7 @@
+import { Ctx } from "@rpcbase/api";
+import { Params } from "@rpcbase/router"
+
+export type LoaderArgs = {params: Params, ctx: Ctx}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type Loader = ({params, ctx}: LoaderArgs) => Promise<any>

package/AppProvider/AnalyticsContainer.js

@@ -1,56 +0,0 @@
-/* @flow */
-import {useEffect} from "react"
-import {usePostHog} from "posthog-js/react"
-import FingerprintJS from "@fingerprintjs/fingerprintjs"
-
-import getUid from "../auth/getUid"
-
-// TMP: RB_TENANT_ID must come from the server, not be set in env here
-import {RB_TENANT_ID, POSTHOG_KEY} from "env"
-
-
-const AnalyticsContainer = ({children}) => {
-  const {hostname} = window.location
-  if (__DEV__ || hostname === "localhost" || hostname.endsWith(".local")) return null
-  if (!POSTHOG_KEY) return null
-
-  const posthog = usePostHog()
-
-  const uid = getUid()
-
-  useEffect(() => {
-    if (!posthog) return
-
-    if (uid) {
-      posthog.identify(uid, {
-        uid,
-        env: __DEV__ ? "dev" : "prod",
-      })
-      posthog.group("customer", RB_TENANT_ID, {
-        name: "default",
-      })
-      posthog.group("env", __DEV__ ? "dev" : "prod")
-    }
-    // user isn't identified, use fingerprint instead
-    else {
-      const run = async() => {
-        const fp = await FingerprintJS.load()
-        const fpResult = await fp.get()
-
-        posthog.identify(fpResult.visitorId, {
-          type: "fingerprint",
-          env: __DEV__ ? "dev" : "prod",
-        })
-      }
-
-      run()
-    }
-  }, [posthog, uid])
-
-
-  return (
-    <>{children}</>
-  )
-}
-
-export default AnalyticsContainer

package/AppProvider/debug.js

@@ -1,4 +0,0 @@
-/* @flow */
-import {DEBUG} from "env"
-
-localStorage.debug = DEBUG

package/AppProvider/index.tsx

@@ -1,79 +0,0 @@
-import "./debug"
-import {useEffect} from "react"
-import {PostHogProvider} from "posthog-js/react"
-
-import page from "../page"
-import {HashStateProvider} from "../hashState"
-
-import AnalyticsContainer from "./AnalyticsContainer"
-
-// TODO: flags here should be optional
-import {flagValues} from "config/flags"
-
-import {POSTHOG_KEY} from "env"
-import {useAuthRouter} from "../auth/useAuthRouter"
-import getTenantId from "../auth/getTenantId"
-import getUid from "../auth/getUid"
-import {NotificationsProvider, NotificationsContainer} from "../notifications"
-import {connect as rts_connect} from "../rts/rts"
-
-// initial rts connect
-const tenantId = getTenantId()
-rts_connect(tenantId, getUid())
-
-
-const PostHogWrapper = ({children, ...props}) => {
-
-  const {hostname} = window.location
-
-  const hasPostHogKey = !!POSTHOG_KEY
-
-  if (__DEV__ || hostname === "localhost" || hostname.endsWith(".local") || !hasPostHogKey) {
-    return (
-      <>{children}</>
-    )
-  } else {
-    return (
-      <PostHogProvider
-        apiKey={POSTHOG_KEY}
-        options={{
-          api_host: "https://eu.posthog.com",
-          // TODO: this doesn't work
-          bootstrap: {
-            featureFlags: flagValues,
-          },
-        }}
-      >
-        <AnalyticsContainer>
-          {children}
-        </AnalyticsContainer>
-      </PostHogProvider>
-    )
-  }
-}
-
-const AppProvider = ({children, ...props}) => {
-
-  const {authComponent} = useAuthRouter()
-
-  useEffect(() => {
-    page.start()
-  }, [])
-
-  return (
-    <PostHogWrapper>
-      <HashStateProvider>
-        <NotificationsProvider>
-          <div className={cx({"d-none": !!authComponent})}>
-            {children}
-          </div>
-          {authComponent}
-          <NotificationsContainer />
-        </NotificationsProvider>
-      </HashStateProvider>
-    </PostHogWrapper>
-  )
-
-}
-
-export default AppProvider

package/access-control/ACLForm/components/GrantField/OpSelector.tsx

@@ -1,129 +0,0 @@
-import _get from "lodash/get"
-import {useState} from "react"
-import ToggleButton from "react-bootstrap/ToggleButton"
-import ToggleButtonGroup from "react-bootstrap/ToggleButtonGroup"
-
-import {useFormContext} from "react-hook-form"
-
-import {GRANTS_FIELD} from "../constants"
-import {CheckMark} from "./icons/CheckMark"
-
-
-const OPS = {
-  create: "Create",
-  read: "Read",
-  update: "Update",
-  delete: "Delete",
-}
-
-export const OpSelector = ({field, index, update}) => {
-  const PREFIX = `select-op-field-${field.id}`
-
-  const {
-    formState: {errors},
-    setValue,
-  } = useFormContext()
-
-  const fieldKey = `${GRANTS_FIELD}.${index}.ops`
-  const err = _get(errors, fieldKey, null)
-
-  const [ops, setOps] = useState(field.ops || {})
-
-  const updateOps = (nextOps) => {
-    setOps(nextOps)
-    setValue(fieldKey, nextOps, {
-      shouldTouch: true,
-      shouldValidate: !!err, // revalidate if there is an error
-    })
-  }
-
-  const handleChange = (selected) => {
-    const nextOps = {...ops}
-    // remove unselected keys from ops
-    Object.keys(nextOps).forEach((k) => !selected.includes[k] && delete nextOps[k])
-    // add new selected keys
-    selected.forEach((s) => (nextOps[s] = "own"))
-    updateOps(nextOps)
-  }
-
-  const getCRUDOps = () => Object.keys(ops)
-
-  const getOpScope = (k) => ops[k]
-
-  const updateOpScope = (k, selected) => {
-    const nextOps = {...ops}
-    nextOps[k] = selected
-    updateOps(nextOps)
-  }
-
-  const getCaption = () => {
-    if (err) {
-      return <p className="text-danger pt-1">{err.message}</p>
-    } else {
-      // iterate on OPS first, not ops to preserve semantic order
-      const targetOps = Object.keys(OPS).filter((k) => Object.keys(ops).includes(k))
-      let captionStr
-      if (targetOps.length === 0) {
-        captionStr = "Select operations above"
-      } else captionStr = `Allow ${targetOps.map((k) => `${OPS[k]}:${ops[k]}`).join(", ")}`
-      return <p className="text-secondary mt-1">{captionStr}</p>
-    }
-  }
-
-  return (
-    <div className="op-selector">
-      <div className="mb-1 fw-bold">Grant Operation:</div>
-      <ToggleButtonGroup
-        type="checkbox"
-        // TODO: support vertical layout when the modal isn't wide enough
-        // vertical
-        className={cx("w-100", {"border": !!err, "border-danger": !!err})}
-        value={getCRUDOps()}
-        onChange={handleChange}
-      >
-        {Object.keys(OPS).map((k) => (
-          <ToggleButton
-            variant="light"
-            key={`${PREFIX}-${index}-${k}`}
-            id={`${PREFIX}-${index}-${k}`}
-            value={k}
-            className="toggle-button-op py-1"
-          >
-            <>
-              <div className="">
-                <CheckMark hide={!getCRUDOps().includes(k)} />
-                {OPS[k]}
-              </div>
-              <ToggleButtonGroup
-                className="pt-1"
-                type="radio"
-                name={`${k}_op_scope`}
-                value={getOpScope(k)}
-                onChange={(selected) => updateOpScope(k, selected)}
-              >
-                <ToggleButton
-                  variant="primary"
-                  id={`${PREFIX}-${index}-${k}-own`}
-                  value={"own"}
-                  className="toggle-button-op py-1 text-monospace"
-                >
-                  own
-                </ToggleButton>
-                <ToggleButton
-                  variant="primary"
-                  id={`${PREFIX}-${index}-${k}-any`}
-                  value={"any"}
-                  className="toggle-button-op py-1 text-monospace"
-                >
-                  any
-                </ToggleButton>
-              </ToggleButtonGroup>
-            </>
-          </ToggleButton>
-        ))}
-      </ToggleButtonGroup>
-
-      {getCaption()}
-    </div>
-  )
-}