prostgles-client 4.0.409 → 4.0.411

package/README.md

@@ -21,7 +21,7 @@ Isomorphic TypeScript client for PostgreSQL
 npm/yarn
 
 ```bash
-$ npm install prostgles-client socket.io-client
+npm install prostgles-client socket.io-client
 ```
 
 CDN
@@ -29,11 +29,11 @@ CDN
 ```html
 <head>
   <script
-    src="https://unpkg.com/socket.io-client@3.0.3/dist/socket.io.min.js"
+    src="https://unpkg.com/socket.io-client@4.8.3/dist/socket.io.min.js"
     type="text/javascript"
   ></script>
   <script
-    src="https://unpkg.com/prostgles-client@latest/dist/index.js"
+    src="https://unpkg.com/prostgles-client@latest/dist/index.umd.js"
     type="text/javascript"
   ></script>
 </head>
@@ -46,7 +46,10 @@ CDN
 ```ts
 import prostgles from "prostgles-client";
 
-const prostglesClient = await prostgles({ endpoint, token });
+export const connect = async (endpoint: string, token: string) => {
+  const prostglesClient = await prostgles({ endpoint, token });
+  return prostglesClient;
+};
 ```
 
 ### React hooks
@@ -54,36 +57,39 @@ const prostglesClient = await prostgles({ endpoint, token });
 Subscribe to data changes with automatic re-renders:
 
 ```tsx
-import { useProstglesClient } from "prostgles-client/dist/prostgles";
-import type { DBGeneratedSchema } from "@common/DBGeneratedSchema";
+import { defineJoin, useProstglesClient, type TableHandlerClient } from "prostgles-client";
+import type { DBGeneratedSchema } from "./DBGeneratedSchema";
 
-const App = () => {
+export const App = () => {
   const client = useProstglesClient<DBGeneratedSchema>({ socketOptions: { path: "/ws-api" } });
 
-  if(client.isLoading) return "Loading...";
-  if(client.hasError) return <>Error: {client.error}</>;
+  if (client.isLoading) return "Loading...";
+  if (client.hasError) return <>Error: {String(client.error)}</>;
+  if (!client.db.users) return "Users unavailable";
 
-  return <UserPosts dbo={client.dbo} />
-}
+  return <UserPosts users={client.db.users} />;
+};
 
-const UserPosts = ({ dbo }: { dbo:  }) => {
-
-  const { data: user, isLoading } = dbo.users.useSubscribeOne(
+export const UserPosts = ({ users }: { users: TableHandlerClient<DBGeneratedSchema, "users"> }) => {
+  const { data: user, isLoading, error } = users.useSubscribeOne(
     { id: 1 },
     {
       select: {
         id: 1,
         first_name: 1,
         email: 1,
-        latest_posts: {
+        latest_posts: defineJoin({
           $leftJoin: ["posts"],
+          select: "*",
           orderBy: { created: -1 }
-        }
+        })
       }
     }
   );
 
-  if(isLoading) return "Loading ..."
+  if (isLoading) return "Loading...";
+  if (error) return <>Error: {String(error)}</>;
+  if (!user) return "User not found";
 
   return (
     <div>
@@ -97,25 +103,7 @@ const UserPosts = ({ dbo }: { dbo:  }) => {
       </ul>
     </div>
   );
-}
-```
-
-### Vanilla JavaScript
-
-```js
-prostgles({
-  socket: io(),
-  onReady: async (db) => {
-    const latest_posts = await db.posts.find({}, { orderBy: { created: -1 } });
-
-    // Insert data
-    await dbo.posts.insert({
-      title: "Hello World",
-      content: "My first post",
-      published: true,
-    });
-  },
-});
+};
 ```
 
 ## Type Safety
@@ -158,32 +146,38 @@ The key difference between **sync** and **subscribe** methods:
 - **Sync** (sync, syncOne) - Two-way data flow. Allows local optimistic updates that are automatically synced back to the server, while also receiving server updates.
 
 ```tsx
-// Sync: locally modified data is propagated instantly to the client
-const { data: draftPost, isLoading } = dbo.posts.useSyncOne(
-  { published: false },
-  { handlesOnData: true },
-);
-if (isLoading) return "Loading...";
-if (!draftPost) {
-  return <button onClick={() => dbo.posts.insert({ published: false })}>Create new post</button>;
-}
-return (
-  <form>
-    <input
-      type="text"
-      placeholder="Title"
-      value={draftPost.title}
-      onChange={(e) => draftPost.$update({ title: e.target.value })}
-    />
-    <input
-      type="text"
-      placeholder="Content"
-      value={draftPost.content}
-      onChange={(e) => draftPost.$update({ content: e.target.value })}
-    />
-    <button onClick={() => draftPost.$update({ published: true })}>Publish</button>
-  </form>
-);
+import type { TableHandlerClient } from "prostgles-client";
+import type { DBGeneratedSchema } from "./DBGeneratedSchema";
+
+export const DraftPost = ({ posts }: { posts: TableHandlerClient<DBGeneratedSchema, "posts"> }) => {
+  // Requires sync to be enabled for posts on the server
+  const { data: draftPost, isLoading, error } = posts.useSyncOne!(
+    { published: false },
+    { handlesOnData: true },
+  );
+  if (isLoading) return "Loading...";
+  if (error) return <>Error: {String(error)}</>;
+  if (!draftPost) {
+    return <button onClick={() => posts.insert({ published: false })}>Create new post</button>;
+  }
+  return (
+    <form>
+      <input
+        type="text"
+        placeholder="Title"
+        value={draftPost.title}
+        onChange={(e) => draftPost.$update({ title: e.target.value })}
+      />
+      <input
+        type="text"
+        placeholder="Content"
+        value={draftPost.content}
+        onChange={(e) => draftPost.$update({ content: e.target.value })}
+      />
+      <button type="button" onClick={() => draftPost.$update({ published: true })}>Publish</button>
+    </form>
+  );
+};
 ```
 
 ## Documentation

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { defineJoin, type UserLike } from "prostgles-types";
+import { defineJoin, ROW_ACTIONS_COLUMN, type UserLike } from "prostgles-types";
 import { prostgles as pgls, type InitOptions, type ProstglesInitOptions } from "./prostgles";
 import type { ClientFunctionHandler } from "./getMethods";
 declare function prostgles<DBSchema = void, FuncSchema extends ClientFunctionHandler = ClientFunctionHandler, U extends UserLike = UserLike>(params: ProstglesInitOptions<DBSchema, FuncSchema, U>): ReturnType<typeof pgls<DBSchema, FuncSchema, U>>;
@@ -19,4 +19,5 @@ export type { SQLHandler } from "prostgles-types";
 export { defineJoin };
 export type { ClientFunctionHandler, FunctionHandle } from "./getMethods";
 export default prostgles;
+export { ROW_ACTIONS_COLUMN };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,SAAS,IAAI,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAC7F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAE1D,iBAAS,SAAS,CAChB,QAAQ,GAAG,IAAI,EACf,UAAU,SAAS,qBAAqB,GAAG,qBAAqB,EAChE,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAE7B,MAAM,EAAE,oBAAoB,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,GACpD,UAAU,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;AACpD,iBAAS,SAAS,CAChB,QAAQ,GAAG,IAAI,EACf,UAAU,SAAS,qBAAqB,GAAG,qBAAqB,EAChE,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAC7B,MAAM,EAAE,WAAW,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;AAKlG,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,mBAAmB,IAAI,aAAa,EACzC,KAAK,oBAAoB,EACzB,KAAK,kBAAkB,EACvB,KAAK,WAAW,EAChB,KAAK,oBAAoB,EACzB,MAAM,GACP,MAAM,aAAa,CAAC;AACrB,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1E,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAChF,OAAO,EAAE,SAAS,IAAI,IAAI,EAAE,KAAK,WAAW,EAAE,KAAK,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAC7F,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAE1D,iBAAS,SAAS,CAChB,QAAQ,GAAG,IAAI,EACf,UAAU,SAAS,qBAAqB,GAAG,qBAAqB,EAChE,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAE7B,MAAM,EAAE,oBAAoB,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,GACpD,UAAU,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;AACpD,iBAAS,SAAS,CAChB,QAAQ,GAAG,IAAI,EACf,UAAU,SAAS,qBAAqB,GAAG,qBAAqB,EAChE,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAC7B,MAAM,EAAE,WAAW,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;AAKlG,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,mBAAmB,IAAI,aAAa,EACzC,KAAK,oBAAoB,EACzB,KAAK,kBAAkB,EACvB,KAAK,WAAW,EAChB,KAAK,oBAAoB,EACzB,MAAM,GACP,MAAM,aAAa,CAAC;AACrB,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,YAAY,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC1E,eAAe,SAAS,CAAC;AACzB,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/index.js

@@ -14,9 +14,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defineJoin = exports.ERR_CODE_MESSAGES = exports.useAuthState = exports.asName = void 0;
+exports.ROW_ACTIONS_COLUMN = exports.defineJoin = exports.ERR_CODE_MESSAGES = exports.useAuthState = exports.asName = void 0;
 const prostgles_types_1 = require("prostgles-types");
 Object.defineProperty(exports, "defineJoin", { enumerable: true, get: function () { return prostgles_types_1.defineJoin; } });
+Object.defineProperty(exports, "ROW_ACTIONS_COLUMN", { enumerable: true, get: function () { return prostgles_types_1.ROW_ACTIONS_COLUMN; } });
 const prostgles_1 = require("./prostgles");
 function prostgles(params) {
     return (0, prostgles_1.prostgles)(params);