Feat: Migrate to new web syntax

app/views/docs/databases.phtml

@@ -116,10 +116,17 @@
     <li>
         <h3>Web</h3>
         <div class="ide" data-lang="javascript" data-lang-label="Web SDK">
-            <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Appwrite } from "appwrite";
+            <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Client, Databases } from "appwrite";
 
-const sdk = new Appwrite();
-const promise = sdk.databases.createDocument('[DATABASE_ID]', '[COLLECTION_ID]', 'unique()', {});
+const client = new Client();
+
+client
+    .setEndpoint('https://[HOSTNAME_OR_IP]/v1')
+    .setProject('[PROJECT_ID]');
+
+const database = new Databases(client, '[DATABASE_ID]');
+
+const promise = database.createDocument('[COLLECTION_ID]', 'unique()', {});
 
 promise.then(function (response) {
     console.log(response); // Success
@@ -217,9 +224,10 @@ func main() async throws {
     <li>
         <h3>Web</h3>
         <div class="ide" data-lang="javascript" data-lang-label="Web SDK">
-            <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Query } from "appwrite";
+            <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Databases, Query } from "appwrite";
+const database = new Databases(client, "[DATABASE_ID]"); // 'client' comes from setup
 
-sdk.databases.listDocuments('[DATABASE_ID]', 'movies', [
+database.listDocuments('movies', [
     Query.equal('title', 'Avatar')
 ]);
 </code></pre>
@@ -347,10 +355,13 @@ func main() async throws{
     <li>
         <h3>Web</h3>
         <div class="ide" data-lang="javascript" data-lang-label="Web SDK">
-            <pre class="line-numbers"><code class="prism language-javascript" data-prism>sdk.databases.listDocuments('[DATABASE_ID]', 'movies', [
-            Query.equal('title', ['Avatar', 'Lord of the Rings']),
-            Query.greater('year', 1999)
-        ]);
+            <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Databases, Query } from "appwrite";
+const database = new Databases(client, "[DATABASE_ID]");  // 'client' comes from setup
+
+database.listDocuments('movies', [
+    Query.equal('title', ['Avatar', 'Lord of the Rings']),
+    Query.greater('year', 1999)
+]);
         </code></pre>
         </div>
     </li>

app/views/docs/functions.phtml

@@ -546,14 +546,17 @@ $image = new View(__DIR__.'/../general/image.phtml');
     <li>
         <h3>Web</h3>
         <div class="ide margin-bottom" data-lang="javascript" data-lang-label="Web SDK">
-            <pre class="line-numbers"><code class="prism language-javascript" data-prism>const sdk = new Appwrite();
+            <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Client, Functions } from "appwrite";
 
-sdk
-    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
-    .setProject('5df5acd0d48c2') // Your project ID
-;
+const client = new Client();
+
+client
+    .setEndpoint('https://[HOSTNAME_OR_IP]/v1')
+    .setProject('[PROJECT_ID]');
+
+const database = new Databases(client, '[DATABASE_ID]');
 
-let promise = sdk.functions.createExecution('[FUNCTION_ID]');
+let promise = functions.createExecution('[FUNCTION_ID]');
 
 promise.then(function (response) {
     console.log(response); // Success

app/views/docs/pagination.phtml

@@ -13,10 +13,14 @@
     <li>
         <h3>Web</h3>
         <div class="ide" data-lang="javascript" data-lang-label="Web SDK">
-            <pre class="line-numbers"><code class="prism language-javascript" data-prism>// Page 1
-const page1 = await sdk.database.listDocuments('movies', [], 25, 0);
+            <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Databases } from "appwrite";
+const database = new Databases(client, "[DATABASE_ID]");  // 'client' comes from setup
+
+// Page 1
+const page1 = await database.listDocuments('movies', [], 25, 0);
+
 // Page 2
-const page2 = await sdk.database.listDocuments('movies', [], 25, 25);
+const page2 = await database.listDocuments('movies', [], 25, 25);
         </code></pre>
         </div>
     </li>
@@ -129,12 +133,15 @@ func main() async throws {
     <li>
         <h3>Web</h3>
         <div class="ide" data-lang="javascript" data-lang-label="Web SDK">
-            <pre class="line-numbers"><code class="prism language-javascript" data-prism>// Page 1
-const page1 = await sdk.database.listDocuments('movies', [], 25, 0);
+            <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Databases } from "appwrite";
+const database = new Databases(client, "[DATABASE_ID]");  // 'client' comes from setup
+
+// Page 1
+const page1 = await database.listDocuments('movies', [], 25, 0);
 const lastId = results.documents[results.documents.length - 1].$id;
 
 // Page 2
-const page2 = await sdk.database.listDocuments('movies', [], 25, 0, lastId);
+const page2 = await database.listDocuments('movies', [], 25, 0, lastId);
         </code></pre>
         </div>
     </li>

app/views/docs/permissions.phtml

@@ -112,13 +112,17 @@
 <p>In the following example, we are creating a document that can be read by everyone and only be edited, or deleted by a user with a UID <span class="tag">user:5c1f88b42259e</span>.</p>
 
 <div class="ide" data-lang="javascript" data-lang-label="Web SDK">
-    <pre class="line-numbers"><code class="prism language-javascript" data-prism>const sdk = new Appwrite();
+    <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Client, Databases } from "appwrite";
+
+const client = new Client();
 
-sdk
-    .setProject('')
-;
+client
+    .setEndpoint('https://[HOSTNAME_OR_IP]/v1')
+    .setProject('[PROJECT_ID]');
 
-let promise = sdk.database.createDocument(
+const database = new Databases(client, '[DATABASE_ID]');
+
+let promise = database.createDocument(
     '[COLLECTION_ID]',
     {'actorName': 'Chris Evans', 'height': 183},
     ['role:all'], // Anyone can view this document
@@ -139,13 +143,17 @@ promise.then(function (response) {
 <p>In the following example, we are creating a document that can be read-only by members of <span class="tag">team:5c1f88b87435e</span> and can only be edited, or deleted by members of the same team that possesses the role <span class="tag">owner</span>.</p>
 
 <div class="ide" data-lang="javascript" data-lang-label="Web SDK">
-    <pre class="line-numbers"><code class="prism language-javascript" data-prism>const sdk = new Appwrite();
+    <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Client, Databases } from "appwrite";
+
+const client = new Client();
+
+client
+    .setEndpoint('https://[HOSTNAME_OR_IP]/v1')
+    .setProject('[PROJECT_ID]');
 
-sdk
-    .setProject('')
-;
+const database = new Databases(client, '[DATABASE_ID]');
 
-let promise = sdk.database.createDocument(
+let promise = database.createDocument(
     '[COLLECTION_ID]',
     {'actorName': 'Chris Evans', 'height': 183},
     ['team:5c1f88b87435e'], // The user must be a team member to grant this permission

app/views/docs/realtime.phtml

@@ -27,15 +27,16 @@ $channels = [
     <li>
         <h3>Web</h3>
         <div class="ide margin-bottom" data-lang="javascript" data-lang-label="Web SDK">
-            <pre class="line-numbers"><code class="prism language-javascript" data-prism>const sdk = new Appwrite();
+            <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Client } from "appwrite";
 
-sdk
-    .setEndpoint('https://[HOSTNAME_OR_IP]/v1') // Your API Endpoint
-    .setProject('5df5acd0d48c2') // Your project ID
-;
+const client = new Client();
+
+client
+    .setEndpoint('https://[HOSTNAME_OR_IP]/v1')
+    .setProject('[PROJECT_ID]');
 
 // Subscribe to files channel
-sdk.subscribe('files', response => {
+client.subscribe('files', response => {
     if(response.events.includes('buckets.*.files.*.create')) {
         // Log when a new file is uploaded
         console.log(response.payload);
@@ -132,9 +133,15 @@ let subscription = realtime.subscribe(channels: ["files"]) { message in
     <li>
         <h3>Web</h3>
         <div class="ide margin-bottom" data-lang="javascript" data-lang-label="Web SDK">
-            <pre class="line-numbers"><code class="prism language-javascript" data-prism>const sdk = new Appwrite();
+            <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Client } from "appwrite";
+
+const client = new Client();
+
+client
+    .setEndpoint('https://[HOSTNAME_OR_IP]/v1')
+    .setProject('[PROJECT_ID]');
 
-sdk.subscribe('account', response => {
+client.subscribe('account', response => {
     // Callback will be executed on all account events.
     console.log(response);
 });</code></pre>
@@ -189,9 +196,14 @@ realtime.subscribe(channel: "account", callback: { param in
     <li>
         <h3>Web</h3>
         <div class="ide margin-bottom" data-lang="javascript" data-lang-label="Web SDK">
-            <pre class="line-numbers"><code class="prism language-javascript" data-prism>const sdk = new Appwrite();
+            <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Client } from "appwrite";
+const client = new Client();
 
-sdk.subscribe(['databases.A.collections.A.documents.A', 'files'], response => {
+client
+    .setEndpoint('https://[HOSTNAME_OR_IP]/v1')
+    .setProject('[PROJECT_ID]');
+
+client.subscribe(['collections.A.documents.A', 'files'], response => {
     // Callback will be executed on changes for documents A and all files.
     console.log(response);
 });</code></pre>
@@ -245,9 +257,15 @@ realtime.subscribe(channels: ["databases.A.collections.A.documents.A", "files"],
     <li>
         <h3>Web</h3>
         <div class="ide margin-bottom" data-lang="javascript" data-lang-label="Web SDK">
-            <pre class="line-numbers"><code class="prism language-javascript" data-prism>const sdk = new Appwrite();
+            <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Client } from "appwrite";
+
+const client = new Client();
 
-const unsubscribe = sdk.subscribe('files', response => {
+client
+    .setEndpoint('https://[HOSTNAME_OR_IP]/v1')
+    .setProject('[PROJECT_ID]');
+
+const unsubscribe = client.subscribe('files', response => {
     // Callback will be executed on changes for all files.
     console.log(response);
 });
@@ -435,9 +453,10 @@ subscription.close()</code></pre>
     <li>
         <h3>Web</h3>
         <div class="ide margin-bottom" data-lang="javascript" data-lang-label="Web SDK">
-            <pre class="line-numbers"><code class="prism language-javascript" data-prism>const sdk = new Appwrite();
+            <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Client } from "appwrite";
+const client = new Client();
 
-sdk.setEndpointRealtime('[HOSTNAME_OR_IP]');</code></pre>
+client.setEndpointRealtime('[HOSTNAME_OR_IP]');</code></pre>
         </div>
     </li>
     <li>

app/views/docs/storage.phtml

@@ -74,15 +74,17 @@
     <li>
         <h3>Web</h3>
         <div class="ide" data-lang="javascript" data-lang-label="Web SDK">
-            <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Appwrite } from "appwrite";
+            <pre class="line-numbers"><code class="prism language-javascript" data-prism>import { Client, Storge } from "appwrite";
 
-const sdk = new Appwrite();
+const client = new Client();
 
-sdk
+client
     .setEndpoint('https://[HOSTNAME_OR_IP]/v1')
     .setProject('[PROJECT_ID]');
 
-const promise = sdk.storage.createFile('[BUCKET_ID]', 'unique()', document.getElementById('uploader').files[0]);
+const storage = new Storage(client);
+
+const promise = storage.createFile('[BUCKET_ID]', 'unique()', document.getElementById('uploader').files[0]);
 
 promise.then(function (response) {
     console.log(response); // Success