Merge pull request #433 from appwrite/feat-add-bun-examples

christyjacob4 · web-flow · commit 324b3d7e039d · 2023-09-14T19:10:38.000-04:00
feat: add docs for bun runtime
diff --git a/app/views/docs/functions-develop.phtml b/app/views/docs/functions-develop.phtml
@@ -433,6 +433,43 @@ public class Handler {
 }</code></pre>
         </div>
     </li>
+    <li>
+        <h3>Bun</h3>
+        <div class="ide margin-top-small" data-lang="typescript" data-lang-label="Bun">
+            <pre class="line-numbers"><code class="prism language-typescript" data-prism>import { Client } from 'node-appwrite';
+
+// This is your Appwrite function
+// It's executed each time we get a request
+export default async ({ req, res, log, error }: any) => {
+  // Why not try the Appwrite SDK?
+  // const client = new Client()
+  //    .setEndpoint('https://cloud.appwrite.io/v1')
+  //    .setProject(Bun.env["APPWRITE_FUNCTION_PROJECT_ID"])
+  //    .setKey(Bun.env["APPWRITE_API_KEY"]);
+
+  // You can log messages to the console
+  log("Hello, Logs!");
+
+  // If something goes wrong, log an error
+  error("Hello, Errors!");
+
+  // The `req` object contains the request data
+  if (req.method === "GET") {
+    // Send a response with the res object helpers
+    // `res.send()` dispatches a string back to the client
+    return res.send("Hello, World!");
+  }
+
+  // `res.json()` is a handy helper for sending JSON
+  return res.json({
+    motto: "Build Fast. Scale Big. All in One Place.",
+    learn: "https://appwrite.io/docs",
+    connect: "https://appwrite.io/discord",
+    getInspired: "https://builtwith.appwrite.io",
+  });
+};</code></pre>
+        </div>
+    </li>
 </ul>
 
 <p>If you prefer to learn through more examples like this, explore the <a href="/docs/functions-examples">examples page</a>.</p>
@@ -447,7 +484,7 @@ public class Handler {
 <table class="full text-size-small">
     <thead>
         <tr>
-            <td>Property</td>
+            <td style="width: 250px">Property</td>
             <td>Description</td>
         </tr>
     </thead>
@@ -467,7 +504,6 @@ public class Handler {
         <tr>
             <td><code>error()</code></td>
             <td>Methoc to log errors to the Appwrite Console, end users will not be able to see these errors. See full examples <a href="#logging">here</a>.</td>
-            <td></td>
         </tr>
     </tbody>
 </table>
@@ -503,6 +539,22 @@ export default async function (context: any) {
     return context.res.send("This is a response!");
 }
    
+// after destructuring
+export default async function ({ req, res, log, error }: any) {
+    log("This is a log!");
+    return res.send("This is a response!");
+}</code></pre>
+        </div>
+    </li>
+    <li>
+        <h3>Bun</h3>
+        <div class="ide margin-top-small" data-lang="typescript" data-lang-label="Bun">
+            <pre class="line-numbers"><code class="prism language-typescript" data-prism>// before destructuring
+export default async function (context: any) {
+    context.log("This is a log!");
+    return context.res.send("This is a response!");
+}
+   
 // after destructuring
 export default async function ({ req, res, log, error }: any) {
     log("This is a log!");
@@ -756,6 +808,25 @@ public class Main {
 }</code></pre>
         </div>
     </li>
+    <li>
+        <h3>Bun</h3>
+        <div class="ide margin-top-small" data-lang="typescript" data-lang-label="Bun">
+            <pre class="line-numbers"><code class="prism language-typescript" data-prism>export default async ({ req, res, log }: any) => {
+    log(req.bodyRaw);                 // Raw request body, contains request data
+    log(JSON.stringify(req.body));    // Object from parsed JSON request body, otherwise string
+    log(JSON.stringify(req.headers)); // String key-value pairs of all request headers, keys are lowercase
+    log(req.scheme);                  // Value of the x-forwarded-proto header, usually http or https
+    log(req.method);                  // Request method, such as GET, POST, PUT, DELETE, PATCH, etc.
+    log(req.url);                     // Full URL, for example: http://awesome.appwrite.io:8000/v1/hooks?limit=12&offset=50
+    log(req.host);                    // Hostname from the host header, such as awesome.appwrite.io
+    log(req.port);                    // Port from the host header, for example 8000
+    log(req.path);                    // Path part of URL, for example /v1/hooks
+    log(req.queryString);             // Raw query params string. For example "limit=12&offset=50"
+    log(JSON.stringify(req.query));   // Parsed query params. For example, req.query.limit
+
+    return res.send("All the request parameters are logged to the Appwrite Console.");</code></pre>
+        </div>
+    </li>
 </ul>
 
 <h3><a href="#headers" id="headers">Headers</a></h3>
@@ -925,7 +996,7 @@ end</code></pre>
         case 'empty':
             return res.empty();
         case 'json':
-            return res.json({type": "This is a JSON response"});
+            return res.json({"type": "This is a JSON response"});
         case 'redirect':
             return res.redirect("https://appwrite.io", 301);
         case 'html':
@@ -1091,6 +1162,29 @@ namespace runtime {
         }
       }
   };
+}</code></pre>
+            </div>
+        </li>
+        <li>
+            <h3>Bun</h3>
+            <div class="ide margin-top-small" data-lang="typescript" data-lang-label="Bun">
+                <pre class="line-numbers"><code class="prism language-typescript" data-prism>export default async ({ req, res, log }) => {
+
+    switch (req.query.type) {
+        case 'empty':
+            return res.empty();
+        case 'json':
+            return res.json({"type": "This is a JSON response"});
+        case 'redirect':
+            return res.redirect("https://appwrite.io", 301);
+        case 'html':
+            return res.send(
+                "&lt;h1&gt;This is an HTML response&lt;/h1&gt;", 200, {
+                    "content-type": "text/html"
+                });
+        default:
+            return res.send("This is a text response");
+    }
 }</code></pre>
             </div>
         </li>
@@ -1198,9 +1292,9 @@ end</code></pre>
         <li>
             <h3>Deno</h3>
             <div class="ide margin-top-small" data-lang="typescript" data-lang-label="Deno">
-                <pre class="line-numbers"><code class="prism language-typescript" data-prism>export default async ({ res, log, error }: any) => {
+                <pre class="line-numbers"><code class="prism language-typescript" data-prism>export default async ({ req, res, log, error }: any) => {
     log("This is a log, use for logging information to console");
-    log(`This function was called with ${context.req.method} method`);
+    log(`This function was called with ${req.method} method`);
     error("This is an error, use for logging errors to console");
 
     return res.send("Check the Appwrite Console to see logs and errors!");
@@ -1312,6 +1406,18 @@ namespace runtime {
 }</code></pre>
             </div>
         </li>
+        <li>
+            <h3>Bun</h3>
+            <div class="ide margin-top-small" data-lang="typescript" data-lang-label="Bun">
+                <pre class="line-numbers"><code class="prism language-typescript" data-prism>export default async ({ req, res, log, error }: any) => {
+    log("This is a log, use for logging information to console");
+    log(`This function was called with ${req.method} method`);
+    error("This is an error, use for logging errors to console");
+
+    return res.send("Check the Appwrite Console to see logs and errors!");
+};</code></pre>
+            </div>
+        </li>
     </ul>
     <p>You can access these logs through the following steps.</p>
     <ol class="margin-top margin-bottom-large text-size-normal">
@@ -1535,6 +1641,14 @@ namespace runtime {
 
       return context.res.send(std::getenv("MY_VAR"));
   };
+}</code></pre>
+            </div>
+        </li>
+        <li>
+            <h3>Bun</h3>
+            <div class="ide margin-top-small" data-lang="typescript" data-lang-label="Bun">
+                <pre class="line-numbers"><code class="prism language-typescript" data-prism>export default async ({ req, res, log }) => {
+    return res.send(Bun.env.get('MY_VAR'));
 }</code></pre>
             </div>
         </li>
@@ -1619,6 +1733,14 @@ namespace runtime {
             <td><a href="https://www.nuget.org/" target="_blank">NuGet</a></td>
             <td><code>dotnet restore</code></td>
         </tr>
+        <tr>
+            <td>
+                <img src="" data-ls-attrs="src=/images/runtimes/bun.png" alt="Bun icon" class="avatar xxs" />
+            </td>
+            <td><b>Bun</b></td>
+            <td><a href="https://bun.sh/package-manager" target="_blank">bun</a></td>
+            <td><code>bun install</code></td>
+        </tr>
         <tr>
             <td>
                 <img src="" data-ls-attrs="src=/images/runtimes/kotlin.png" alt="Swift icon" class="avatar xxs" />
@@ -1997,6 +2119,35 @@ public class Main {
 
         return context.res.send("Document created");
     }
+}</code></pre>
+            </div>
+        </li>
+        <li>
+            <h3>Bun</h3>
+            <div class="ide margin-top-small" data-lang="typescript" data-lang-label="Bun">
+                <pre class="line-numbers"><code class="prism language-typescript" data-prism>import { Client, Databases, ID } from 'node-appwrite';
+                
+export default function ({req, res, error}: any){
+    const client = new Client()
+        .setEndpoint("https://cloud.appwrite.io/v1")
+        .setProject(Bun.env.get("APPWRITE_FUNCTION_PROJECT_ID") || "")
+        .setKey(Bun.env.get("APPWRITE_API_KEY") || "");
+    
+    const databases = new Databases(client);
+    
+    try {
+        databases.createDocument(
+            "[DATABASE_ID]",
+            "[COLLECTION_ID]",
+            ID.unique(),
+            {}
+        );
+    } catch (e) {
+        error("Failed to create document: " + e.message);
+        return res.send("Failed to create document");
+    }
+    
+    return res.send("Document created");
 }</code></pre>
             </div>
         </li>
@@ -2387,6 +2538,40 @@ public class Main {
         return context.res.send("Document created");
 
     }
+}</code></pre>
+            </div>
+        </li>
+        <li>
+            <h3>Bun</h3>
+            <div class="ide margin-top-small" data-lang="typescript" data-lang-label="Bun">
+                <pre class="line-numbers"><code class="prism language-typescript" data-prism>import { Client, Databases, ID } from 'node-appwrite';
+                
+export default function ({req, res, error}: any){
+    const client = new Client()
+        .setEndpoint("https://cloud.appwrite.io/v1")
+        .setProject(Bun.env.get("APPWRITE_FUNCTION_PROJECT_ID") || "")
+    
+    if (req.headers["x-appwrite-user-jwt"]) {
+        client.setJWT(req.headers["x-appwrite-user-jwt"]);
+    } else {
+        return res.send("Please sign in, JWT not found");
+    }
+    
+    const databases = new Databases(client);
+    
+    try {
+        databases.createDocument(
+            "[DATABASE_ID]",
+            "[COLLECTION_ID]",
+            ID.unique(),
+            {}
+        );
+    } catch (e) {
+        error("Failed to create document: " + e.message)
+        return res.send("Failed to create document");
+    }
+    
+    return res.send("Document created");
 }</code></pre>
             </div>
         </li>
@@ -2620,6 +2805,25 @@ public class Main {
     public RuntimeOutput main(RuntimeContext context) throws Exception {
         return context.res.send(Utils.add(1, 2));
     }
+}</code></pre>
+            </div>
+        </li>
+        <li>
+            <h3>Bun</h3>
+            <div class="ide margin-top-small" data-lang="typescript" data-lang-label="Bun">
+                <pre class="line-numbers"><code class="prism language-typescript" data-prism>// src/utils.ts
+
+export function add(a: number, b: number): number {
+    return a + b;
+}</code></pre>
+            </div>
+            <div class="ide margin-top-small" data-lang="typescript" data-lang-label="Bun">
+                <pre class="line-numbers"><code class="prism language-typescript" data-prism>// src/main.ts
+
+import { add } from './utils.ts';
+
+export default function ({res}: {res: any}) {
+    return res.send(add(1, 2));
 }</code></pre>
             </div>
         </li>
@@ -2630,14 +2834,19 @@ public class Main {
     <p>
         Appwrite Functions received major updates in Appwrite version 1.4.
         If you still have functions from previous versions, they will be <b>read-only</b> in Appwrite 1.4.
-        You will have to migrate your old functions to follow new runtime syntax.
+        You will have to recreate your old functions to follow new runtime syntax.
     </p>
 
     <p>
         Here's a checklist of things you need to know.
     </p>
 
     <ol class="margin-top margin-bottom-large text-size-normal">
+        <li>
+            Your old function from 1.3 will continue to work, but it can't be updated directly to a 1.4 function.
+            You need to create a new function following 1.4 syntax. 
+            After you've created your new function, point your application code to the new function and delete the old function.
+        </li>
         <li>
             The parameter passed into functions has changed.
             <code>req</code> and <code>res</code> has been replaced by <code>context</code>, which contains new logger methods.
diff --git a/app/views/docs/functions-runtimes.phtml b/app/views/docs/functions-runtimes.phtml
@@ -43,7 +43,6 @@ foreach ($runtimes as $key => $item) {
             <th style="width: 70px">Name</th>
             <th style="width: 100px">Version</th>
             <th style="width: 60px"></th>
-            <th>Image</th>
             <th  style="width: 80px">Architectures</th>
         </tr>
     </thead>
@@ -53,8 +52,10 @@ foreach ($runtimes as $key => $item) {
             <td>
                 <img src="" data-ls-attrs="src=/images/runtimes/<?php echo $this->escape($runtime['versions'][0]['logo'] ?? ''); ?>" alt="Function Env." class="avatar xxs" />
             </td>
-            <td>
-                <?php echo $this->escape($key); ?>
+            <td>                
+            <a href="https://hub.docker.com/r/openruntimes/<?php echo $this->escape($runtime['versions'][0]['key']); ?>/tags" target="_blank" rel="noopener">
+                <?php echo $this->escape($key); ?><i class="icon-link-ext"></i>
+            </a>
             </td>
             <td>
             <?php foreach($runtime['versions'] as $key => $version): ?>
@@ -68,11 +69,6 @@ foreach ($runtimes as $key => $item) {
                 <?php endif; ?> 
             <?php endforeach; ?> 
             </td>   
-            <td>
-            <?php foreach($runtime['versions'] as $key => $version): ?>
-                <a href="https://hub.docker.com/r/<?php echo $this->escape(strtok($version['image'], ':')); ?>" target="_blank" rel="noopener"><?php echo $this->escape($version['image'] ?? ''); ?> <i class="icon-link-ext"></i></a>
-            <?php endforeach; ?>
-            </td>
             <td><?php echo $this->escape(implode(' / ', $runtime['versions'][0]['supports'] ?? [])); ?></td>
         </tr>
         <?php endforeach; ?>
