[templates]: Add support for yarn

.github/workflows/test.yaml

@@ -43,14 +43,19 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest, macos-latest, windows-latest]
+        package-manager: [npm, yarn]
 
     steps:
         - uses: actions/checkout@v3
 
-        - name: Use Node.js 20
+        - name: Use Node.js 22
           uses: actions/setup-node@v3
           with:
-            node-version: 20
+            node-version: 22
+
+        - name: Install Yarn (if needed)
+          if: matrix.package-manager == 'yarn'
+          run: npm install -g yarn
 
         - name: Setup `spin`
           uses: fermyon/actions/spin/setup@v1
@@ -61,19 +66,17 @@ jobs:
           run: spin templates install --dir .
 
         - name: Create new project
-          run: spin new -t http-ts test-project -a
+          run: spin new -t http-ts test-project -v package-manager=${{ matrix.package-manager }} -a
 
         - name: Install dependencies of the test project
           run: |
             cd test-project
-            npm install
 
         - name: Add new component to project
           run: |
             cd test-project
-            spin add -t http-ts new-component -a
+            spin add -t http-ts new-component -v package-manager=${{ matrix.package-manager }} -a
             cd new-component
-            npm install
 
         - name: Build the application
           run: |

templates/http-js/content/package.json

@@ -1,23 +1,23 @@
 {
-    "name": "{{project-name | kebab_case}}",
-    "version": "1.0.0",
-    "description": "{{project-description}}",
-    "main": "index.js",
-    "scripts": {
-        "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/{{project-name | kebab_case}}.wasm",
-        "test": "echo \"Error: no test specified\" && exit 1"
-    },
-    "keywords": [],
-    "author": "",
-    "license": "ISC",
-    "devDependencies": {
-        "mkdirp": "^3.0.1",
-        "webpack": "^5.74.0",
-        "webpack-cli": "^4.10.0",
-        "@fermyon/knitwit": "0.3.0"
-    },
-    "dependencies": {
-        "@fermyon/spin-sdk": "^3.0.0",
-        "itty-router": "^5.0.18"
-    }
+  "name": "{{project-name | kebab_case}}",
+  "version": "1.0.0",
+  "description": "{{project-description}}",
+  "main": "index.js",
+  "scripts": {
+    "build": "knitwit --out-dir build/wit/knitwit --out-world combined && webpack --mode=production && mkdirp dist && j2w -i build/bundle.js -d build/wit/knitwit -n combined -o dist/{{project-name | kebab_case}}.wasm",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "mkdirp": "^3.0.1",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "@fermyon/knitwit": "0.3.0"
+  },
+  "dependencies": {
+    "@fermyon/spin-sdk": "^3.0.0",
+    "itty-router": "^5.0.18"
+  }
 }

templates/http-js/content/spin.toml

@@ -13,6 +13,8 @@ component = "{{project-name | kebab_case}}"
 [component.{{project-name | kebab_case}}]
 source = "dist/{{project-name | kebab_case}}.wasm"
 exclude_files = ["**/node_modules"]
+allowed_outbound_hosts = []
+
 [component.{{project-name | kebab_case}}.build]
-command = ["npm install", "npm run build"]
-watch = ["src/**/*.js"]
+command = ["{{package-manager}} install", "{{package-manager}} run build"]
+watch = ["src/**/*.js"]

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

@@ -7,5 +7,5 @@ source = "{{ output-path }}/dist/{{project-name | kebab_case}}.wasm"
 allowed_outbound_hosts = []
 
 [component.{{project-name | kebab_case}}.build]
-command = "npm install && npm run build"
+command = ["{{package-manager}} install", "{{package-manager}} run build"]
 workdir = "{{ output-path }}"

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

@@ -10,3 +10,4 @@ component = "component.txt"
 [parameters]
 project-description = { type = "string", prompt = "Description", default = "" }
 http-path = { type = "string", prompt = "HTTP path", default = "/...", pattern = "^/\\S*$" }
+package-manager = { type = "string", prompt = "Which package manager would you like to use (npm|yarn)", default = "npm", pattern = "^(npm|yarn)$" }

templates/http-ts/content/package.json

@@ -4,7 +4,7 @@
     "description": "{{project-description}}",
     "main": "index.js",
     "scripts": {
-        "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/{{ project-name | kebab_case }}.wasm",
+        "build": "knitwit --out-dir build/wit/knitwit --out-world combined && webpack --mode=production && mkdirp dist && j2w -i build/bundle.js -d build/wit/knitwit -n combined -o dist/{{ project-name | kebab_case }}.wasm",
         "test": "echo \"Error: no test specified\" && exit 1"
     },
     "keywords": [],

templates/http-ts/content/spin.toml

@@ -13,6 +13,8 @@ component = "{{project-name | kebab_case}}"
 [component.{{project-name | kebab_case}}]
 source = "dist/{{project-name | kebab_case}}.wasm"
 exclude_files = ["**/node_modules"]
+allowed_outbound_hosts = []
+
 [component.{{project-name | kebab_case}}.build]
-command = ["npm install", "npm run build"]
-watch = ["src/**/*.ts"]
+command = ["{{package-manager}} install", "{{package-manager}} run build"]
+watch = ["src/**/*.ts"]

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

@@ -7,5 +7,5 @@ source = "{{ output-path }}/dist/{{project-name | kebab_case}}.wasm"
 allowed_outbound_hosts = []
 
 [component.{{project-name | kebab_case}}.build]
-command = "npm install && npm run build"
+command = ["{{package-manager}} install", "{{package-manager}} run build"]
 workdir = "{{ output-path }}"

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

@@ -10,3 +10,4 @@ component = "component.txt"
 [parameters]
 project-description = { type = "string", prompt = "Description", default = "" }
 http-path = { type = "string", prompt = "HTTP path", default = "/...", pattern = "^/\\S*$" }
+package-manager = { type = "string", prompt = "Which package manager would you like to use (npm|yarn)", default = "npm", pattern = "^(npm|yarn)$" }

templates/redis-js/content/package.json

@@ -4,9 +4,8 @@
     "description": "{{project-description}}",
     "main": "index.js",
     "scripts": {
-        "build": "npx webpack --mode=production && npx mkdirp dist && npx j2w -i build/bundle.js -d build/wit/knitwit -n combined -o dist/{{project-name | kebab_case}}.wasm",
-        "test": "echo \"Error: no test specified\" && exit 1",
-        "postinstall": "knitwit --out-dir build/wit/knitwit --out-world combined"
+        "build": "knitwit --out-dir build/wit/knitwit --out-world combined && webpack --mode=production && mkdirp dist && j2w -i build/bundle.js -d build/wit/knitwit -n combined -o dist/{{project-name | kebab_case}}.wasm",
+        "test": "echo \"Error: no test specified\" && exit 1"
     },
     "keywords": [],
     "author": "",

templates/redis-js/content/spin.toml

@@ -16,6 +16,8 @@ component = "{{project-name | kebab_case}}"
 [component.{{project-name | kebab_case}}]
 source = "dist/{{project-name | kebab_case}}.wasm"
 exclude_files = ["**/node_modules"]
+allowed_outbound_hosts = []
+
 [component.{{project-name | kebab_case}}.build]
-command = "npm install && npm run build"
+command = ["{{package-manager}} install", "{{package-manager}} run build"]
 watch = ["src/**/*.ts", "package.json"]

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

@@ -6,5 +6,5 @@ component = "{{project-name | kebab_case}}"
 source = "{{ output-path }}/dist/{{project-name | kebab_case}}.wasm"
 allowed_outbound_hosts = []
 [component.{{project-name | kebab_case}}.build]
-command = "npm install && npm run build"
+command = ["{{package-manager}} install", "{{package-manager}} run build"]
 workdir = "{{ output-path }}"

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

@@ -17,3 +17,4 @@ skip_snippets = ["application_trigger"]
 project-description = { type = "string", prompt = "Description", default = "" }
 redis-address = { type = "string", prompt = "Redis address", default = "redis://localhost:6379" }
 redis-channel = { type = "string", prompt = "Redis channel" }
+package-manager = { type = "string", prompt = "Which package manager would you like to use (npm|yarn)", default = "npm", pattern = "^(npm|yarn)$" }

templates/redis-ts/content/package.json

@@ -4,9 +4,8 @@
     "description": "{{project-description}}",
     "main": "index.js",
     "scripts": {
-        "build": "npx webpack --mode=production && npx mkdirp dist && npx j2w -i build/bundle.js -d build/wit/knitwit -n combined -o dist/{{project-name | kebab_case}}.wasm",
-        "test": "echo \"Error: no test specified\" && exit 1",
-        "postinstall": "knitwit  --out-dir build/wit/knitwit --out-world combined"
+        "build": "knitwit  --out-dir build/wit/knitwit --out-world combined && webpack --mode=production && mkdirp dist && j2w -i build/bundle.js -d build/wit/knitwit -n combined -o dist/{{project-name | kebab_case}}.wasm",
+        "test": "echo \"Error: no test specified\" && exit 1"
     },
     "keywords": [],
     "author": "",

templates/redis-ts/content/spin.toml

@@ -16,6 +16,8 @@ component = "{{project-name | kebab_case}}"
 [component.{{project-name | kebab_case}}]
 source = "dist/{{project-name | kebab_case}}.wasm"
 exclude_files = ["**/node_modules"]
+allowed_outbound_hosts = []
+
 [component.{{project-name | kebab_case}}.build]
-command = "npm install && npm run build"
+command = ["{{package-manager}} install", "{{package-manager}} run build"]
 watch = ["src/**/*.ts", "package.json"]

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

@@ -6,5 +6,5 @@ component = "{{project-name | kebab_case}}"
 source = "{{ output-path }}/dist/{{project-name | kebab_case}}.wasm"
 allowed_outbound_hosts = []
 [component.{{project-name | kebab_case}}.build]
-command = "npm install && npm run build"
+command = ["{{package-manager}} install", "{{package-manager}} run build"]
 workdir = "{{ output-path }}"

templates/redis-ts/metadata/spin-template.toml

@@ -17,3 +17,4 @@ skip_snippets = ["application_trigger"]
 project-description = { type = "string", prompt = "Description", default = "" }
 redis-address = { type = "string", prompt = "Redis address", default = "redis://localhost:6379" }
 redis-channel = { type = "string", prompt = "Redis channel" }
+package-manager = { type = "string", prompt = "Which package manager would you like to use (npm|yarn)", default = "npm", pattern = "^(npm|yarn)$" }