Merge pull request #206 from vdice/chore/examples-templates-manifest-v2

chore(*): migrate examples/templates/tests to Spin manifest v2

README.md

@@ -61,7 +61,7 @@ Installed 2 template(s)
 Once the templates are installed, a new TypeScript project can be instantiated using:
 
 ```bash
-spin new http-ts hello_world --accept-defaults
+spin new -t http-ts hello_world --accept-defaults
 ```
 
 To run the created template:
@@ -73,7 +73,6 @@ spin build
 spin up
 ```
 
-
 ## Building
 
 You need to build the SDK from source to use it.
@@ -90,12 +89,16 @@ You need to build the SDK from source to use it.
 
 #### Setup SDK
 ```bash
-npm install --prefix crates/spin-js-engine/src/js_sdk 
+npm install --prefix crates/spin-js-engine/src/js_sdk
 make
 ```
 
 The build produces the `spinjs` utility, which is used to build wasm modules from JavaScript or TypeScript source. For convenience you can move `spinjs` to a directory in your path - e.g., `sudo cp target/release/spinjs /usr/local/bin/spinjs`.
 
 #### Build and run the examples
 
-There are some examples provided in the `example/` directory. Each example has a readme on building and running it.
+There are some examples provided in the [examples](./examples/) directory. Each example has a readme on building and running it.
+
+Ensure you have the [latest version of Spin](https://developer.fermyon.com/spin/install) and the [js2wasm plugin](#using-the-sdk) installed.
+
+__Note__: These examples track Spin's `main` branch, so you may need to ensure you are using the [canary](https://github.com/fermyon/spin/releases/tag/canary) Spin release.

examples/javascript/hello_world/README.md

@@ -5,13 +5,14 @@ This is the simplest example of using the Javascript SDK.
 ### Building the example
 
 ```console
+npm install
 spin build
 ```
 
 ### Running the example
 
 ```console
-spin up --follow-all
+spin up
 ```
 
 Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.

examples/javascript/hello_world/spin.toml

@@ -1,13 +1,15 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Fermyon Engineering <[email protected]>"]
 name = "spin-http-js"
-trigger = { type = "http", base = "/" }
 version = "1.0.0"
 
-[[component]]
-id = "hello"
-source = "target/spin-http-js.wasm"
-[component.trigger]
+[[trigger.http]]
 route = "/hello"
-[component.build]
+component = "hello"
+
+[component.hello]
+source = "target/spin-http-js.wasm"
+[component.hello.build]
 command = "npm install && npm run build"

examples/javascript/http-router/README.md

@@ -12,4 +12,6 @@ The app exposes the following endpoints:
 
 ## Build and run the app locally
 
+First, install npm dependencies with `npm install`.
+
 To build and run the app locally, you can either use `spin build` and `spin up` or combine both commands and simply run `spin build --up`.

examples/javascript/http-router/spin.toml

@@ -1,15 +1,17 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Thorsten Hans <[email protected]>"]
 description = "Sample to demonstrate the usage of the HTTP router"
 name = "http-router"
-trigger = { type = "http", base = "/" }
 version = "0.1.0"
 
-[[component]]
-id = "http-router"
+[[trigger.http]]
+route = "/..."
+component = "http-router"
+
+[component.http-router]
 source = "target/http-router.wasm"
 exclude_files = ["**/node_modules"]
-[component.trigger]
-route = "/..."
-[component.build]
+[component.http-router.build]
 command = "npm run build"

examples/javascript/kv/README.md

@@ -15,4 +15,6 @@ The app leverages the `default` key-value store as specified in `spin.toml`.
 
 ## Build and run the app locally
 
+First, install npm dependencies with `npm install`.
+
 To build and run the app locally, you can either use `spin build` and `spin up` or combine both commands and simply run `spin build --up`.

examples/javascript/kv/spin.toml

@@ -1,16 +1,18 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Thorsten Hans <[email protected]>"]
 description = "Demonstrates how to use key-value store APIs in JS"
 name = "kv"
-trigger = { type = "http", base = "/" }
 version = "0.1.0"
 
-[[component]]
-id = "kv"
+[[trigger.http]]
+route = "/..."
+component = "kv"
+
+[component.kv]
 source = "target/kv.wasm"
 key_value_stores = ["default"]
 exclude_files = ["**/node_modules"]
-[component.trigger]
-route = "/..."
-[component.build]
+[component.kv.build]
 command = "npm run build"

examples/javascript/outbound-http/README.md

@@ -5,12 +5,14 @@ This example showcases utilizing fetch to request data from an API and use it in
 ### Building the example
 
 ```
-npm run build
+npm install
+spin build
 ```
+
 ### Running the example
 
 ```
-spin up --follow-all
+spin up
 ```
 
 Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.

examples/javascript/outbound-http/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-http-js.wasm dist/spin.js",
+    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-outbound-http.wasm dist/spin.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],

examples/javascript/outbound-http/spin.toml

@@ -1,15 +1,17 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Fermyon Engineering <[email protected]>"]
-name = "spin-http-js"
-trigger = { type = "http", base = "/" }
+name = "spin-outbound-http"
 version = "1.0.0"
 
-[[component]]
-id = "hello"
-source = "target/spin-http-js.wasm"
-allowed_http_hosts = ["https://some-random-api.ml"]
-files = ["src/index.html"]
-[component.trigger]
+[[trigger.http]]
 route = "/hello"
-[component.build]
+component = "hello"
+
+[component.hello]
+source = "target/spin-outbound-http.wasm"
+allowed_http_hosts = ["random-data-api.fermyon.app"]
+files = ["src/index.js"]
+[component.hello.build]
 command = "npm run build"

examples/javascript/outbound-http/src/index.js

@@ -2,13 +2,13 @@ const encoder = new TextEncoder("utf-8")
 const decoder = new TextDecoder("utf-8")
 
 export async function handleRequest(request) {
-    const dogFact = await fetch("https://some-random-api.ml/facts/dog")
+    const physicsFact = await fetch("https://random-data-api.fermyon.app/physics/json")
 
-    const dogFactBody = decoder.decode(await dogFact.arrayBuffer() || new Uint8Array())
+    const physicsFactBody = decoder.decode(await physicsFact.arrayBuffer() || new Uint8Array())
 
     const env = JSON.stringify(process.env)
 
-    const body = `Here's a dog fact: ${dogFactBody}\n`
+    const body = `Here's a physics fact: ${physicsFactBody}\n`
 
     return {
         status: 200,

examples/javascript/planetscale/README.md

@@ -28,13 +28,13 @@ const config = {
 
 ```
 npm install
-npm run build
+spin build
 ```
 
 ### Running the example
 
 ```
-spin up --follow-all
+spin up
 ```
 
 Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.

examples/javascript/planetscale/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-http-js.wasm dist/spin.js",
+    "build": "npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-planetscale.wasm dist/spin.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
@@ -15,7 +15,7 @@
     "webpack-cli": "^4.10.0"
   },
   "dependencies": {
-    "@planetscale/database": "^1.4.0",
-    "@fermyon/spin-sdk": "^0.6.0"
+    "@fermyon/spin-sdk": "^0.6.0",
+    "@planetscale/database": "^1.4.0"
   }
 }

examples/javascript/planetscale/spin.toml

@@ -1,15 +1,17 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Fermyon Engineering <[email protected]>"]
-name = "spin-http-js"
-trigger = { type = "http", base = "/" }
+name = "spin-planetscale"
 version = "1.0.0"
 
-[[component]]
-id = "planetscale"
-source = "target/spin-http-js.wasm"
-allowed_http_hosts = ["https://aws.connect.psdb.cloud"]
-files = ["src/index.html"]
-[component.trigger]
+[[trigger.http]]
 route = "/hello"
-[component.build]
+component = "planetscale"
+
+[component.planetscale]
+source = "target/spin-planetscale.wasm"
+allowed_http_hosts = ["aws.connect.psdb.cloud"]
+files = ["src/index.js"]
+[component.planetscale.build]
 command = "npm run build"

examples/javascript/simple_ssr/README.md

@@ -3,15 +3,16 @@
 This example demonstrates server side rendering with react.
 
 ### Building the example
+
 ```
 npm install
-npm run build
+spin build
 ```
 
 ### Running the example
 
 ```
-spin up --follow-all
+spin up
 ```
 
 Use e.g. `curl -v http://127.0.0.1:3000/hello` to test the endpoint.

examples/javascript/simple_ssr/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "private": true,
   "scripts": {
-    "build": "npm run build:client && npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-http-js.wasm dist/spin.js",
+    "build": "npm run build:client && npx webpack --mode=production && mkdir -p target && spin js2wasm -o target/spin-simple-ssr.wasm dist/spin.js",
     "build:client": "esbuild src/client/index.js --bundle --outfile=dist/static/bundle.js --loader:.js=jsx",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

examples/javascript/simple_ssr/spin.toml

@@ -1,23 +1,24 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Fermyon Engineering <[email protected]>"]
-name = "spin-http-js"
-trigger = { type = "http", base = "/" }
+name = "spin-simple-ssr"
 version = "1.0.0"
 
+[[trigger.http]]
+route = "/hello"
+component = "SSR"
+
+[[trigger.http]]
+route = "/static/..."
+component = "fileserver"
 
-[[component]]
-id = "SSR"
-source = "target/spin-http-js.wasm"
-allowed_http_hosts = ["https://some-random-api.ml"]
+[component.SSR]
+source = "target/spin-simple-ssr.wasm"
 files = [{source = "src/public", destination = "/"} ]
-[component.trigger]
-route = "/hello"
-[component.build]
+[component.SSR.build]
 command = "npm run build"
 
-[[component]]
+[component.fileserver]
 source = "modules/spin_static_fs.wasm"
-id = "fileserver"
 files = [{ source = "dist/static", destination = "/" }, ]
-[component.trigger]
-route = "/static/..."

examples/javascript/sqlite/README.md

@@ -7,5 +7,6 @@ This is a simple showcase of the SQLite feature in the Spin JS SDK.
 Run the following:
 
 ```bash
-spin build -u --sqlite @migration.sql
+npm install
+spin build --up --sqlite @migration.sql
 ```

examples/javascript/sqlite/spin.toml

@@ -1,16 +1,18 @@
-spin_manifest_version = "1"
+spin_manifest_version = 2
+
+[application]
 authors = ["Ryan Levick <[email protected]>"]
 description = ""
 name = "sqlite"
-trigger = { type = "http", base = "/" }
 version = "0.1.0"
 
-[[component]]
-id = "sqlite"
+[[trigger.http]]
+route = "/..."
+component = "sqlite"
+
+[component.sqlite]
 source = "target/sqlite.wasm"
 exclude_files = ["**/node_modules"]
 sqlite_databases = ["default"]
-[component.trigger]
-route = "/..."
-[component.build]
+[component.sqlite.build]
 command = "npm run build"