fix: Update types definition and examples

README.md

@@ -2,9 +2,26 @@
 
 **Document**
 
-https://fastschema.com/docs/sdk-js
+https://fastschema.com/docs/sdk/
 
-**Installation**
+FastSchema SDK provides a convenient way to connect to the FastSchema backend and perform various operations.
+
+The FastSchema JavaScript SDK works in both Node.js and browser environments. To use the SDK, you need to install it using npm.
+
+## Installation
+
+FastSchema SDK can be installed using browser script tags or npm.
+
+### Browser
+
+```html
+<script src="https://unpkg.com/fastschema@latest/dist/fastschema.umd.js"></script>
+<script>
+  const fs = new fastschema.FastSchema("http://localhost:8000");
+</script>
+```
+
+### NPM
 
 ```bash
 npm install fastschema
@@ -15,15 +32,15 @@ npm install fastschema
 The initialization must be done before any other operation.
 
 ```typescript
-import { FastSchema } from 'fastschema';
+import { FastSchema } from "fastschema";
 
 // Create a new instance of FastSchema
-const fs = new FastSchema('https://localhost:8000');
+const fs = new FastSchema("https://localhost:8000");
 
 // Login
 await fs.auth().login({
-  login: 'admin',
-  password: '123',
+  login: "admin",
+  password: "123",
 });
 
 // Initialize: This must be called before any other operation
@@ -36,22 +53,22 @@ await fs.init();
 
 ```typescript
 await fs.schemas().create({
-  name: 'tag',
-  namespace: 'tags',
-  label_field: 'name',
+  name: "tag",
+  namespace: "tags",
+  label_field: "name",
   fields: [
     {
-      name: 'name',
-      label: 'Name',
-      type: 'string',
+      name: "name",
+      label: "Name",
+      type: "string",
       sortable: true,
       filterable: true,
       unique: false,
     },
     {
-      name: 'description',
-      label: 'Description',
-      type: 'string',
+      name: "description",
+      label: "Description",
+      type: "string",
       optional: true,
     },
   ],
@@ -63,13 +80,13 @@ await fs.schemas().create({
 This operation will throw an error if the schema does not exist.
 
 ```typescript
-const schemaTag = fs.schema('tag');
+const schemaTag = fs.schema("tag");
 ```
 
 ### Update a schema
 
 ```typescript
-await fs.schemas().update('tag', {
+await fs.schemas().update("tag", {
   schema: {
     // Same as create
   },
@@ -85,15 +102,15 @@ await fs.schemas().update('tag', {
 ### Delete a schema
 
 ```typescript
-await fs.schemas().delete('tag');
+await fs.schemas().delete("tag");
 ```
 
 ## Content operations
 
-## Get content
+### Get content
 
 ```typescript
-fs.schema('tag').get<Tag>(params);
+fs.schema("tag").get<Tag>(params);
 ```
 
 `params` can be one of the following:
@@ -122,24 +139,24 @@ interface Tag {
   description: string;
 }
 
-const createdTag = await fs.schema('tag').create<Tag>({
-  name: 'Tag 01',
-  description: 'A description',
+const createdTag = await fs.schema("tag").create<Tag>({
+  name: "Tag 01",
+  description: "A description",
 });
 ```
 
 ### Update content
 
 ```typescript
-const updated = await fs.schema('tag').update(id, {
-  description: 'updated desc tag 1',
+const updated = await fs.schema("tag").update(id, {
+  description: "updated desc tag 1",
 });
 ```
 
 ### Delete content
 
 ```typescript
-await fs.schema('tag').delete(id);
+await fs.schema("tag").delete(id);
 ```
 
 ### Upload files
@@ -153,41 +170,47 @@ for (let i = 0; i < 5; i++) {
 const result = await fs.file().upload(files);
 ```
 
-## Realtime
+**Note**
+
+Nodejs version before 20 does not support the `File` object.
+You can use package `@web-std/file` to create a `File` object.
+
+## Realtime Updates
 
 FastSchema provides a way to listen to events in real-time.
+
 - `create`: When a new record is created
 - `update`: When a record is updated
 - `delete`: When a record is deleted
 - `*`: Listen to all events
 
 ```typescript
-const schemaTag = fs.schema('tag');
+const schemaTag = fs.schema("tag");
 
 const cb1 = (data: T, event: EventType, error: Error) => {
-  console.log('Event:', event, 'Data:', data, 'Error:', error);
+  console.log("Event:", event, "Data:", data, "Error:", error);
 };
 
 const cb2 = (data: T[], event: EventType, error: Error) => {
-  console.log('Event:', event, 'Data:', data, 'Error:', error);
+  console.log("Event:", event, "Data:", data, "Error:", error);
 };
 
 const cb3 = (data: T | T[], event: EventType, error: Error) => {
-  console.log('Event:', event, 'Data:', data, 'Error:', error);
+  console.log("Event:", event, "Data:", data, "Error:", error);
 };
 
-schemaTag.on('create', cb1);
-schemaTag.on('update', cb2);
-schemaTag.on('delete', cb2);
-schemaTag.on('*', cb3);
+schemaTag.on("create", cb1);
+schemaTag.on("update", cb2);
+schemaTag.on("delete", cb2);
+schemaTag.on("*", cb3);
 ```
 
 You can also listen to events for a specific record.
 
 ```typescript
-schemaTag.on('create', id, cb1);
-schemaTag.on('update', id, cb1);
-schemaTag.on('delete', id, cb1);
+schemaTag.on("create", id, cb1);
+schemaTag.on("update", id, cb1);
+schemaTag.on("delete", id, cb1);
 ```
 
 or use the configuration events:

examples/browser/index.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>FastSchema SDK</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 20px;
+    }
+
+    h1 {
+      padding: 10px;
+      margin: 0;
+    }
+
+    ul {
+      margin: 0;
+      padding: 0;
+      list-style-position: inside;
+    }
+
+    #app {
+      padding: 20px;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>FastSchema SDK</h1>
+  <div id="app">
+    <h2>Me</h2>
+    <ul id="me"></ul>
+
+    <h2>Schemas</h2>
+    <ul id="schemas"></ul>
+  </div>
+  <script src="https://unpkg.com/fastschema@latest/dist/fastschema.umd.js"></script>
+  <script>
+    (async () => {
+      const fs = new fastschema.FastSchema("http://localhost:8000");
+      await fs.auth().login({
+        login: "admin",
+        password: "123",
+      });
+      await fs.init();
+
+      const schemas = fs.schema();
+      const schemasElement = document.getElementById("schemas");
+      for (const schema of schemas) {
+        const li = document.createElement("li");
+        li.textContent = schema.name();
+        schemasElement.appendChild(li);
+      }
+
+      const me = await fs.auth().me();
+      const meElement = document.getElementById("me");
+      for (const key in me) {
+        let value = me[key];
+        if (typeof value === "object") {
+          value = JSON.stringify(value, null, 2);
+        }
+        const li = document.createElement("li");
+        li.textContent = `${key}: ${value}`;
+        meElement.appendChild(li);
+      }
+    })();
+  </script>
+</body>
+
+</html>

examples/nextjs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/nextjs/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/nextjs/next.config.mjs

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: false,
+};
+
+export default nextConfig;