(WIP) Update templates/examples for SDK v3 (#319)

* bump templates to use v3.0.0-rc1 and depend on itty router directly
* update common pattern examples
* update github examples
* update upstash examples
* update drizzle example and update tsconfig to be ES2020
* fix outbound url for upstash
* update aws examples
* update blob-storage
* update serverlessdb examples
* update spin host api examples
* update spin SDK package and checkin package-lock for examples
* address review comments

Signed-off-by: karthik2804 <[email protected]>

Author: karthik2804

examples/aws/s3/.gitignore

@@ -2,4 +2,4 @@ node_modules
 dist
 target
 .spin/
-dist.js
+build/

examples/aws/s3/.npmrc

@@ -0,0 +1 @@
+KNITWIT_SOURCE=./config/knitwit.json

examples/aws/s3/README.md

@@ -4,14 +4,6 @@ This example showcases how to connect to and send messages using Amazon S3 with
 
 ## Prerequisites
 - `spin >=2.6.0`
-- 
-
-## Install Dependencies
-Install the necessary npm packages:
-
-```bash
-npm install
-```
 
 ## Setup the Example
 
@@ -30,18 +22,15 @@ npm install
 
    ```typescript
    const client = new S3Client({
-       region: "<>",
+       region: "us-west-2",
        credentials: {
-           accessKeyId: "<>>",
+           accessKeyId: "<>",
            secretAccessKey: "<>",
            sessionToken: "<>"
        },
    });
-
-   const params = {
-       Bucket: "<>"
-   };
    ```
+   *note*: The example assumes that the bucket is in the `us-west-2` region. If the object is in some other region modify the configuration of the client and also edit the `allowed_outbound_hosts` in the `spin.toml`.
 
 ## Building and Running the Example
 
@@ -50,4 +39,7 @@ spin build
 spin up
 ```
 
-Use e.g. `curl -v http://127.0.0.1:3000/` to test the endpoint.
+### Testing the different endpoints
+
+- `curl -v http://127.0.0.1:3000/list/<bucket name>` to list the objects stored in the given bucket.
+- `curl -v http://127.0.0.1:3000/stream/<bucket name>/<object key>`  to stream the object in the given bucket.

examples/aws/s3/knitwit.json renamed to examples/aws/s3/config/knitwit.json

@@ -4,7 +4,7 @@
     "description": "",
     "main": "index.js",
     "scripts": {
-        "build": "npx webpack --mode=production && npx mkdirp target && npx j2w -i dist.js -n spin-http -o target/s3.wasm",
+        "build": "knitwit --out-dir build/wit/knitwit --out-world combined && npx webpack --mode=production && npx mkdirp dist && npx j2w -i build/bundle.js -d build/wit/knitwit -n combined -o dist/s3.wasm",
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "keywords": [],
@@ -15,10 +15,12 @@
         "ts-loader": "^9.4.1",
         "typescript": "^4.8.4",
         "webpack": "^5.74.0",
-        "webpack-cli": "^4.10.0"
+        "webpack-cli": "^4.10.0",
+        "@fermyon/knitwit": "0.3.0"
     },
     "dependencies": {
-        "@aws-sdk/client-s3": "^3.600.0",
-        "@fermyon/spin-sdk": "^2.0.0"
+        "@fermyon/spin-sdk": "^3.0.0",
+        "itty-router": "^5.0.18",
+        "@aws-sdk/client-s3": "^3.600.0"
     }
 }

examples/aws/s3/package-lock.json

@@ -11,9 +11,9 @@ route = "/..."
 component = "s3"
 
 [component.s3]
-source = "target/s3.wasm"
+source = "dist/s3.wasm"
 exclude_files = ["**/node_modules"]
-allowed_outbound_hosts = ["https://*:*"]
+allowed_outbound_hosts = ["https://*.s3.us-west-2.amazonaws.com"]
 [component.s3.build]
-command = "npm run build"
-watch = ["src/**/*.ts", "package.json"]
+command = ["npm install", "npm run build"]
+watch = ["src/**/*.ts"]

examples/aws/s3/package.json

@@ -1,26 +1,43 @@
-import { ResponseBuilder } from '@fermyon/spin-sdk';
-import { S3Client, ListObjectsV2Command } from '@aws-sdk/client-s3';
+// https://itty.dev/itty-router/routers/autorouter
+import { AutoRouter } from 'itty-router';
+import { S3Client, ListObjectsV2Command, GetObjectCommand } from '@aws-sdk/client-s3';
 
 const client = new S3Client({
-  region: '<>',
-  credentials: {
-    accessKeyId: '<>>',
-    secretAccessKey: '<>',
-    sessionToken: '<>',
-  },
+    region: 'us-west-2',
+    credentials: {
+        accessKeyId: '<>',
+        secretAccessKey: '<>',
+        sessionToken: '<>',
+    },
 });
+let router = AutoRouter();
 
-const params = {
-  Bucket: '<>',
-};
+// Route ordering matters, the first route that matches will be used
+// Any route that does not return will be treated as a middleware
+// Any unmatched route will return a 404
+router
+    .get("/list/:bucket", async ({ bucket }) => {
+        let command = new ListObjectsV2Command({ Bucket: bucket });
+        try {
+            let data = await client.send(command);
+            return new Response(JSON.stringify(data.Contents, null, 2));
+        } catch (e: any) {
+            return new Response(`error : ${e.message}`, { status: 500 });
+        }
+    })
+    .get("/stream/:bucket/:file", async ({ bucket, file }) => {
+        let command = new GetObjectCommand({ Bucket: bucket, Key: file });
+        try {
+            const data = await client.send(command);
+            return new Response(data.Body as ReadableStream, {
+                status: 200,
+            });
+        } catch (e: any) {
+            return new Response(`error : ${e.message}`, { status: 500 });
+        }
+    })
 
-export async function handler(_req: Request, res: ResponseBuilder) {
-  const command = new ListObjectsV2Command(params);
-  try {
-    let data = await client.send(command);
-    res.send(JSON.stringify(data.Contents, null, 2));
-  } catch (e: any) {
-    res.status(500);
-    res.send(`error : ${e.message}`);
-  }
-}
+//@ts-ignore
+addEventListener('fetch', async (event: FetchEvent) => {
+    event.respondWith(router.fetch(event.request));
+});

examples/aws/s3/spin.toml

@@ -7,7 +7,7 @@
         "jsx": "react",
         "skipLibCheck": true,
         "lib": [
-            "ES2015",
+            "ES2020",
             "WebWorker"
         ],
         "allowJs": true,