From e5d21ae26d26ae1ebdc95773ad5b851692dc70a0 Mon Sep 17 00:00:00 2001 From: karthik2804 Date: Thu, 1 Aug 2024 05:01:28 +0200 Subject: [PATCH] update templates and readme Signed-off-by: karthik2804 --- README.md | 39 ++++++++++++++++--- templates/http-js/content/.gitignore | 5 +++ templates/http-js/content/knitwit.json | 9 +++++ templates/http-js/content/package.json | 23 +++++++++++ templates/http-js/content/spin.toml | 18 +++++++++ templates/http-js/content/src/index.js | 6 +++ templates/http-js/content/src/spin.js | 33 ++++++++++++++++ templates/http-js/content/webpack.config.js | 23 +++++++++++ .../http-js/metadata/snippets/component.txt | 11 ++++++ templates/http-js/metadata/spin-template.toml | 13 +++++++ templates/http-ts/content/src/spin.ts | 4 ++ .../http-ts/metadata/snippets/component.txt | 12 ++++++ 12 files changed, 190 insertions(+), 6 deletions(-) create mode 100644 templates/http-js/content/.gitignore create mode 100644 templates/http-js/content/knitwit.json create mode 100644 templates/http-js/content/package.json create mode 100644 templates/http-js/content/spin.toml create mode 100644 templates/http-js/content/src/index.js create mode 100644 templates/http-js/content/src/spin.js create mode 100644 templates/http-js/content/webpack.config.js create mode 100644 templates/http-js/metadata/snippets/component.txt create mode 100644 templates/http-js/metadata/spin-template.toml create mode 100644 templates/http-ts/metadata/snippets/component.txt diff --git a/README.md b/README.md index d341e750..975b293a 100644 --- a/README.md +++ b/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 -``` \ No newline at end of file +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) \ No newline at end of file diff --git a/templates/http-js/content/.gitignore b/templates/http-js/content/.gitignore new file mode 100644 index 00000000..1ba44682 --- /dev/null +++ b/templates/http-js/content/.gitignore @@ -0,0 +1,5 @@ +node_modules +dist +target +.spin/ +dist.js \ No newline at end of file diff --git a/templates/http-js/content/knitwit.json b/templates/http-js/content/knitwit.json new file mode 100644 index 00000000..a9375762 --- /dev/null +++ b/templates/http-js/content/knitwit.json @@ -0,0 +1,9 @@ +{ + "version": 1, + "project": { + "worlds": [ + "spin-http" + ] + }, + "packages": {} +} \ No newline at end of file diff --git a/templates/http-js/content/package.json b/templates/http-js/content/package.json new file mode 100644 index 00000000..75c2b7db --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/templates/http-js/content/spin.toml b/templates/http-js/content/spin.toml new file mode 100644 index 00000000..e387fe73 --- /dev/null +++ b/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"] \ No newline at end of file diff --git a/templates/http-js/content/src/index.js b/templates/http-js/content/src/index.js new file mode 100644 index 00000000..d6683528 --- /dev/null +++ b/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"); +} diff --git a/templates/http-js/content/src/spin.js b/templates/http-js/content/src/spin.js new file mode 100644 index 00000000..6a03a6eb --- /dev/null +++ b/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}`); + } +} \ No newline at end of file diff --git a/templates/http-js/content/webpack.config.js b/templates/http-js/content/webpack.config.js new file mode 100644 index 00000000..9f86f7be --- /dev/null +++ b/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 + }, +}; \ No newline at end of file diff --git a/templates/http-js/metadata/snippets/component.txt b/templates/http-js/metadata/snippets/component.txt new file mode 100644 index 00000000..6130fc89 --- /dev/null +++ b/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 }}" diff --git a/templates/http-js/metadata/spin-template.toml b/templates/http-js/metadata/spin-template.toml new file mode 100644 index 00000000..d3bcab65 --- /dev/null +++ b/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]$" } diff --git a/templates/http-ts/content/src/spin.ts b/templates/http-ts/content/src/spin.ts index 697c77f8..f788fed8 100644 --- a/templates/http-ts/content/src/spin.ts +++ b/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 "."; diff --git a/templates/http-ts/metadata/snippets/component.txt b/templates/http-ts/metadata/snippets/component.txt new file mode 100644 index 00000000..e8d59e7c --- /dev/null +++ b/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*$" } \ No newline at end of file