update templates and readme

Signed-off-by: karthik2804 <karthik.ganeshram@fermyon.com>

README.md

@@ -2,6 +2,9 @@
 
 This is an SDK for Javascript and Typescript based on [ComponentizeJS](https://github.com/bytecodealliance/ComponentizeJS).
 
+Note that this SDK supersedes an earlier, experimental version, which may be found in the [sdk-v1](https://github.com/fermyon/spin-python-sdk/tree/old-sdk) branch.
+
+## [API Documentation](https://fermyon.github.io/spin-js-sdk)
 
 ## Installing the templates
 
@@ -10,14 +13,23 @@ This is an SDK for Javascript and Typescript based on [ComponentizeJS](https://g
 The templates can be installed with the following command:
 
 ```bash
-spin templates install --update --git https://github.com/fermyon/spin-js-sdk --branch feat/sdk-v2
+spin templates install --update --git https://github.com/fermyon/spin-js-sdk 
 ```
 
 ## Creating and building a new app
 
+Create a new app from the template installed in the previous step:
+
 ```bash
 spin new -t http-ts hello-world -a
+```
+Change directory into the app:
+```bash
 cd hello-world
+```
+
+Install the dependencies and build the app:
+```bash
 npm install
 spin buiild
 ```
@@ -28,10 +40,25 @@ spin buiild
 spin up
 ```
 
-## Note: Installing the package
+Finally, you can test your app using e.g. `curl` in another terminal:
+
+```shell
+curl -i http://127.0.0.1:3000
+```
+
+If all goes well, you should see something like:
 
-Currently pre-release versions are published on NPM and can be installed using the following command: 
+```
+HTTP/1.1 200 OK
+content-type: text/plain
+content-length: 18
+date: Thu, 11 Apr 2024 17:42:31 GMT
 
-```bash
-npm install @fermyon/spin-sdk@next
-```
+Hello from Python!
+```
+
+Please file an issue if you have any trouble.
+
+See the [examples directory](https://github.com/fermyon/spin-js-sdk/tree/main/examples) in the repository for more examples.
+
+To learn more about the JS SDK checkout the [documentation](https://developer.fermyon.com/spin/v2/javascript-components)

templates/http-js/content/.gitignore

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

templates/http-js/content/knitwit.json

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

templates/http-js/content/package.json

@@ -0,0 +1,23 @@
+{
+    "name": "{{project-name | kebab_case}}",
+    "version": "1.0.0",
+    "description": "{{project-description}}",
+    "main": "index.js",
+    "scripts": {
+        "build": "npx webpack --mode=production && npx mkdirp target && npx j2w -i dist.js -d combined-wit -n combined -o target/{{project-name | kebab_case}}.wasm",
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "postinstall": "knitwit"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "mkdirp": "^3.0.1",
+        "webpack": "^5.74.0",
+        "webpack-cli": "^4.10.0",
+        "@fermyon/knitwit": "https://github.com/fermyon/knitwit"
+    },
+    "dependencies": {
+        "@fermyon/spin-sdk": "^2.0.0-alpha.3"
+    }
+}

templates/http-js/content/spin.toml

@@ -0,0 +1,18 @@
+spin_manifest_version = 2
+
+[application]
+authors = ["{{authors}}"]
+description = "{{project-description}}"
+name = "{{project-name}}"
+version = "0.1.0"
+
+[[trigger.http]]
+route = "{{http-path}}"
+component = "{{project-name | kebab_case}}"
+
+[component.{{project-name | kebab_case}}]
+source = "target/{{project-name | kebab_case}}.wasm"
+exclude_files = ["**/node_modules"]
+[component.{{project-name | kebab_case}}.build]
+command = "npm run build"
+watch = ["src/**/*.ts", "package.json"]

templates/http-js/content/src/index.js

@@ -0,0 +1,6 @@
+import { ResponseBuilder } from "@fermyon/spin-sdk";
+
+export async function handler(req, res) {
+    console.log(req);
+    res.send("hello universe");
+}

templates/http-js/content/src/spin.js

@@ -0,0 +1,33 @@
+// This file is a wrapper around the actual handler function defined in `index.js` and attaches it to
+// the fetchEvent. If you prefer to directly target the fetchEvent, you can
+// modify this file
+
+import { ResponseBuilder } from "@fermyon/spin-sdk";
+import { handler } from ".";
+
+addEventListener('fetch', (event) => {
+    handleEvent(event);
+});
+
+async function handleEvent(event) {
+
+    let resolve, reject;
+    let responsePromise = new Promise(async (res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    event.respondWith(responsePromise);
+
+    let res = new ResponseBuilder(resolve);
+
+    try {
+        // In case you want to do some work after the response is sent
+        // uncomment the line below and comment out the line with 
+        // await handler(event.request, res)
+        // event.waitUntil(handler(event.request, res))
+        await handler(event.request, res)
+    } catch (e) {
+        res.status(500);
+        res.send(`error in handler: ${e}`);
+    }
+}

templates/http-js/content/webpack.config.js

@@ -0,0 +1,23 @@
+const path = require('path');
+const SpinSdkPlugin = require("@fermyon/spin-sdk/plugins/webpack")
+
+module.exports = {
+    entry: './src/spin.js',
+    experiments: {
+        outputModule: true,
+    },
+    output: {
+        path: path.resolve(__dirname, './'),
+        filename: 'dist.js',
+        module: true,
+        library: {
+            type: "module",
+        }
+    },
+    plugins: [
+        new SpinSdkPlugin()
+    ],
+    optimization: {
+        minimize: false
+    },
+};

templates/http-js/metadata/snippets/component.txt

@@ -0,0 +1,11 @@
+[[trigger.http]]
+route = "{{http-path}}"
+component = "{{project-name | kebab_case}}"
+
+[component.{{project-name | kebab_case}}]
+source = "{{ output-path }}/target/{{project-name | kebab_case}}.wasm"
+allowed_outbound_hosts = []
+
+[component.{{project-name | kebab_case}}.build]
+command = "npm run build"
+workdir = "{{ output-path }}"

templates/http-js/metadata/spin-template.toml

@@ -0,0 +1,13 @@
+manifest_version = "1"
+id = "http-js"
+description = "HTTP request handler using Typescript"
+
+[add_component]
+skip_files = ["spin.toml"]
+[add_component.snippets]
+component = "component.txt"
+
+[parameters]
+project-description = { type = "string", prompt = "Description", default = "" }
+http-path = { type = "string", prompt = "HTTP path", default = "/...", pattern = "^/\\S*$" }
+# enable-experimental = { type = "string", prompt = "enable experimental interfaces [y/N]", default = "N", pattern = "^[yYnN]$" }

templates/http-ts/content/src/spin.ts

@@ -1,3 +1,7 @@
+// This file is a wrapper around the actual handler function defined in `index.ts` and attaches it to
+// the fetchEvent. If you prefer to directly target the fetchEvent, you can
+// modify this file
+
 import { ResponseBuilder } from "@fermyon/spin-sdk";
 import { handler } from ".";
 

templates/http-ts/metadata/snippets/component.txt

@@ -0,0 +1,12 @@
+manifest_version = "1"
+id = "http-js"
+description = "HTTP request handler using Javascript"
+
+[add_component]
+skip_files = ["spin.toml"]
+[add_component.snippets]
+component = "component.txt"
+
+[parameters]
+project-description = { type = "string",  prompt = "Description", default = "" }
+http-path = { type = "string", prompt = "HTTP path", default = "/...", pattern = "^/\\S*$" }