update spin host api examples

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

Author: karthik2804

examples/spin-host-apis/spin-kv/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+dist
+target
+.spin/
+build/

examples/spin-host-apis/spin-kv/.npmrc

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

examples/spin-host-apis/spin-kv/README.md

@@ -7,7 +7,6 @@ This is a simple example showcasing using Spin key-value storage with TypeScript
 To build the app run the following commands:
 
 ```bash
-$ npm install
 $ spin build --up
 ```
 

examples/spin-host-apis/spin-kv/config/knitwit.json

@@ -0,0 +1,9 @@
+{
+    "version": 1,
+    "project": {
+        "worlds": [
+            "spin-http"
+        ]
+    },
+    "packages": {}
+}

examples/spin-host-apis/spin-kv/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/spin-kv.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/spin-kv.wasm",
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "keywords": [],
@@ -15,9 +15,11 @@
         "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": {
-        "@fermyon/spin-sdk": "^2.0.0"
+        "@fermyon/spin-sdk": "^3.0.0-rc1",
+        "itty-router": "^5.0.18"
     }
 }

examples/spin-host-apis/spin-kv/package.json

@@ -11,9 +11,9 @@ route = "/..."
 component = "spin-kv"
 
 [component.spin-kv]
-source = "target/spin-kv.wasm"
+source = "dist/spin-kv.wasm"
 exclude_files = ["**/node_modules"]
 key_value_stores = ["default"]
 [component.spin-kv.build]
-command = "npm run build"
-watch = ["src/**/*.ts", "package.json"]
+command = ["npm install", "npm run build"]
+watch = ["src/**/*.ts"]

examples/spin-host-apis/spin-kv/spin.toml

@@ -1,36 +1,48 @@
-import { Kv, ResponseBuilder } from '@fermyon/spin-sdk';
+// https://itty.dev/itty-router/routers/autorouter
+import { AutoRouter } from 'itty-router';
+import { Kv } from '@fermyon/spin-sdk';
 
 const decoder = new TextDecoder();
 
-export async function handler(req: Request, res: ResponseBuilder) {
-  let store = Kv.openDefault();
-  let status = 200;
-  let body;
+let router = AutoRouter();
 
-  switch (req.method) {
-    case 'POST':
-      store.set(req.url, (await req.text()) || new Uint8Array().buffer);
-      break;
-    case 'GET':
-      let val;
-      val = store.get(req.url);
-      if (!val) {
-        status = 404;
-      } else {
-        body = decoder.decode(val);
-      }
-      break;
-    case 'DELETE':
-      store.delete(req.url);
-      break;
-    case 'HEAD':
-      if (!store.exists(req.url)) {
-        status = 404;
-      }
-      break;
-    default:
-  }
+// 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("*", async (req: Request) => {
+        let store = Kv.openDefault();
+        let status = 200;
+        let body;
 
-  res.status(status);
-  res.send(body);
-}
+        switch (req.method) {
+            case 'POST':
+                store.set(req.url, (await req.text()) || new Uint8Array().buffer);
+                break;
+            case 'GET':
+                let val;
+                val = store.get(req.url);
+                if (!val) {
+                    status = 404;
+                } else {
+                    body = decoder.decode(val);
+                }
+                break;
+            case 'DELETE':
+                store.delete(req.url);
+                break;
+            case 'HEAD':
+                if (!store.exists(req.url)) {
+                    status = 404;
+                }
+                break;
+            default:
+        }
+
+        return new Response(body, { status });
+    })
+
+//@ts-ignore
+addEventListener('fetch', async (event: FetchEvent) => {
+    event.respondWith(router.fetch(event.request));
+});

examples/spin-host-apis/spin-kv/src/index.ts

@@ -1,33 +1,35 @@
 const path = require('path');
-const SpinSdkPlugin = require('@fermyon/spin-sdk/plugins/webpack');
+const SpinSdkPlugin = require("@fermyon/spin-sdk/plugins/webpack")
 
 module.exports = {
-  entry: './src/spin.ts',
-  experiments: {
-    outputModule: true,
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      },
+    entry: './src/index.ts',
+    experiments: {
+        outputModule: true,
+    },
+    module: {
+        rules: [
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules/,
+            },
+        ],
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+    },
+    output: {
+        path: path.resolve(__dirname, './build'),
+        filename: 'bundle.js',
+        module: true,
+        library: {
+            type: "module",
+        }
+    },
+    plugins: [
+        new SpinSdkPlugin()
     ],
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
-  },
-  output: {
-    path: path.resolve(__dirname, './'),
-    filename: 'dist.js',
-    module: true,
-    library: {
-      type: 'module',
+    optimization: {
+        minimize: false
     },
-  },
-  plugins: [new SpinSdkPlugin()],
-  optimization: {
-    minimize: false,
-  },
-};
+};