Add template

Signed-off-by: Radu Matei <[email protected]>

.github/workflows/release.yml

@@ -49,12 +49,12 @@ jobs:
 
       - name: generate checksums
         run: |
-          sha256sum explorer/target/spin-http-js.wasm > checksums-${{ env.RELEASE_VERSION }}.txt
+          sha256sum explorer/target/spin-kv-explorer.wasm > checksums-${{ env.RELEASE_VERSION }}.txt
       - name: Create release
         uses: softprops/action-gh-release@v1
         with:
           fail_on_unmatched_files: true
           generate_release_notes: true
           files: |
-            explorer/target/spin-http-js.wasm
+            explorer/target/spin-kv-explorer.wasm
             checksums-${{ env.RELEASE_VERSION }}.txt

explorer/index.html

@@ -7,8 +7,7 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
-		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
-		crossorigin="anonymous">
+		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
@@ -40,12 +39,10 @@ <h6 id="storeName"> Default</h6>
 						</table>
 						<div class="row mb-2">
 							<div class="col-md-2">
-								<input id="keyInput" type="text" class="form-control"
-									placeholder="Key">
+								<input id="keyInput" type="text" class="form-control" placeholder="Key">
 							</div>
 							<div class="col-md-2">
-								<input id="valueInput" type="text" class="form-control"
-									placeholder="Value">
+								<input id="valueInput" type="text" class="form-control" placeholder="Value">
 							</div>
 							<div class="col-md-1">
 								<button id="add" class="btn btn-primary">Add</button>
@@ -70,7 +67,7 @@ <h6 id="storeName"> Default</h6>
 
 	<script>
 
-		fetch("/api/stores/default")
+		fetch("/internal/kv-explorer/api/stores/default")
 			.then((response) => response.json())
 			.then((data) => {
 				data.keys.forEach((item) => {
@@ -89,7 +86,7 @@ <h6 id="storeName"> Default</h6>
 
 			$(`#${key}View`).click(function () {
 				var key = $(this).data("key");
-				fetch(`/api/stores/default/keys/${key}`).then((response) => response.json()).then((data) => {
+				fetch(`/internal/kv-explorer/api/stores/default/keys/${key}`).then((response) => response.json()).then((data) => {
 					let decoder = new TextDecoder();
 					let value = decoder.decode(new Uint8Array(data.value));
 					$("#valueContent").text(value);
@@ -100,7 +97,7 @@ <h6 id="storeName"> Default</h6>
 
 			$(`#${key}Delete`).click(function () {
 				var key = $(this).data("key");
-				fetch(`/api/stores/default/keys/${key}`, {
+				fetch(`/internal/kv-explorer/api/stores/default/keys/${key}`, {
 					method: 'DELETE',
 				})
 					.then(() => {
@@ -126,7 +123,7 @@ <h6 id="storeName"> Default</h6>
 				key: key,
 				value: value
 			};
-			fetch("/api/stores/default", {
+			fetch("/internal/kv-explorer/api/stores/default", {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json'

explorer/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "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-kv-explorer.wasm dist/spin.js",
     "watch": "nodemon --watch src --ext ts,js --verbose --legacy-watch --signal SIGINT --exec 'npm run build'"
   },
   "devDependencies": {

explorer/src/index.ts

@@ -21,7 +21,7 @@ interface ListResult {
     keys: Array<string>
 }
 
-router.get("/api/stores/:store", async (req): Promise<HttpResponse> => {
+router.get("/internal/kv-explorer/api/stores/:store", async (req): Promise<HttpResponse> => {
     let store = req.params.store;
     console.log(`Listing keys from store: ${store}`);
 
@@ -39,7 +39,7 @@ router.get("/api/stores/:store", async (req): Promise<HttpResponse> => {
 });
 
 
-router.get("/api/stores/:store/keys/:key", async (req): Promise<HttpResponse> => {
+router.get("/internal/kv-explorer/api/stores/:store/keys/:key", async (req): Promise<HttpResponse> => {
     let store = req.params.store;
     let key = req.params.key;
     console.log(`Getting the value of key ${key} from store: ${store}`);
@@ -60,7 +60,7 @@ router.get("/api/stores/:store/keys/:key", async (req): Promise<HttpResponse> =>
     }
 });
 
-router.delete("/api/stores/:store/keys/:key", async req => {
+router.delete("/internal/kv-explorer/api/stores/:store/keys/:key", async req => {
     let store = req.params.store;
     let key = req.params.key;
 
@@ -81,7 +81,7 @@ router.delete("/api/stores/:store/keys/:key", async req => {
 });
 
 
-router.post("/api/stores/:store", async (req, extra) => {
+router.post("/internal/kv-explorer/api/stores/:store", async (req, extra) => {
     let input = JSON.parse(decoder.decode(extra.body)) as SetInput;
     console.log(`Adding new value in store ${req.params.store}. Input: ${input.key}. Value: ${input.value}`)
 
@@ -95,7 +95,7 @@ router.post("/api/stores/:store", async (req, extra) => {
     }
 });
 
-router.get('/', async () => {
+router.get('/internal/kv-explorer', async () => {
     let buf = encoder.encode(html()).buffer;
 
     return { status: 200, body: buf }

explorer/src/page.ts

@@ -14,7 +14,6 @@ export function html(): string {
 
 	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 
-
 </head>
 
 <body>
@@ -70,7 +69,7 @@ export function html(): string {
 
 	<script>
 
-		fetch("/api/stores/default")
+		fetch("/internal/kv-explorer/api/stores/default")
 			.then((response) => response.json())
 			.then((data) => {
 				data.keys.forEach((item) => {
@@ -88,7 +87,7 @@ export function html(): string {
 
 			$(\`#\${key}View\`).click(function () {
 				var key = $(this).data("key");
-				fetch(\`/api/stores/default/keys/\${key}\`).then((response) => response.json()).then((data) => {
+				fetch(\`/internal/kv-explorer/api/stores/default/keys/\${key}\`).then((response) => response.json()).then((data) => {
 					let decoder = new TextDecoder();
 					let value = decoder.decode(new Uint8Array(data.value));
 					$("#valueContent").text(value);
@@ -99,7 +98,7 @@ export function html(): string {
 
 			$(\`#\${key}Delete\`).click(function () {
 				var key = $(this).data("key");
-				fetch(\`/api/stores/default/keys/\${key}\`, {
+				fetch(\`/internal/kv-explorer/api/stores/default/keys/\${key}\`, {
 					method: 'DELETE',
 				})
 					.then(() => {
@@ -125,7 +124,7 @@ export function html(): string {
 				key: key,
 				value: value
 			};
-			fetch("/api/stores/default", {
+			fetch("/internal/kv-explorer/api/stores/default", {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json'

readme.md

@@ -1,3 +1,4 @@
 # Spin key/value explorer
 
-This is a simple Spin component for exploring the contents of key/value storages, which only supports the default key/value store.
+This is a simple Spin component for exploring the contents of key/value stores.
+

spin.toml

@@ -7,7 +7,7 @@ version = "0.1.0"
 
 [[component]]
 id = "explorer"
-source = "explorer/target/spin-http-js.wasm"
+source = "explorer/target/spin-kv-explorer.wasm"
 key_value_stores = ["default"]
 [component.trigger]
 route = "/..."

templates/kv-explorer/content/spin.toml

@@ -0,0 +1,12 @@
+spin_version = "1"
+name = "{{project-name}}"
+trigger = { type = "http", base = "/" }
+version = "0.1.0"
+
+[[component]]
+source = { url = "https://github.com/radu-matei/spin-kv-explorer/releases/download/v0.3.0/spin-http-js.wasm", digest = "sha256:c009e0d6f9e764d6628eb02515b7b029e44d53dcb49cc21a1ffed26be1db5bf3" }
+id = "kv-explorer"
+# add or remove stores you want to explore here
+key_value_stores = ["default"]
+[component.trigger]
+route = "/internal/kv-explorer/..."

templates/kv-explorer/metadata/snippets/component.txt

@@ -0,0 +1,7 @@
+[[component]]
+source = { url = "https://github.com/radu-matei/spin-kv-explorer/releases/download/v0.3.0/spin-http-js.wasm", digest = "sha256:c009e0d6f9e764d6628eb02515b7b029e44d53dcb49cc21a1ffed26be1db5bf3" }
+id = "kv-explorer"
+# add or remove stores you want to explore here
+key_value_stores = ["default"]
+[component.trigger]
+route = "/internal/kv-explorer/..."

templates/kv-explorer/metadata/spin-template.toml

@@ -0,0 +1,12 @@
+manifest_version = "1"
+id = "kv-explorer"
+description = "Explore the contents of Spin KV stores"
+trigger_type = "http"
+tags = ["http", "kv"]
+
+[add_component]
+skip_files = ["spin.toml"]
+[add_component.snippets]
+component = "component.txt"
+
+[parameters]