update docs for the v4 of JS SDK with modularized packages

Signed-off-by: Karthik Ganeshram <[email protected]>

Author: karthik2804

content/v3/ai-sentiment-analysis-api-tutorial.md

@@ -451,7 +451,8 @@ impl FromStr for Sentiment {
 {{ startTab "TypeScript"}}
 
 ```typescript
-import { Llm, Kv } from "@fermyon/spin-sdk";
+import * as Llm from "@spinframework/spin-llm";
+import * as Kv from "@spinframework/spin-kv";
 import { AutoRouter } from 'itty-router';
 
 interface SentimentAnalysisRequest {

content/v3/build.md

@@ -78,7 +78,7 @@ It's normally convenient to put the detailed build instructions in `package.json
 ```json
 {
   "scripts": {
-    "build": "knitwit --out-dir build/wit/knitwit --out-world combined && npx webpack --mode=production && npx mkdirp target && npx j2w -i dist.js -d combined-wit -n combined -o target/spin-http-js.wasm"
+    "build": "npx webpack && mkdirp dist && j2w -i build/bundle.js -o target/spin-http-js.wasm"
   }
 }
 ```

content/v3/http-trigger.md

@@ -256,7 +256,7 @@ For a full Rust SDK reference, see the [Rust Spin SDK documentation](https://doc
 
 {{ startTab "TypeScript"}}
 
-> [**Want to go straight to the reference documentation?**  Find it here.](https://spinframework.github.io/spin-js-sdk/stable/)
+> [**Want to go straight to the reference documentation?**  Find it here.](https://spinframework.github.io/spin-js-sdk/)
 
 Building a Spin HTTP component with the JavaScript/TypeScript SDK now involves adding an event listener for the `fetch` event. This event listener handles incoming HTTP requests and allows you to construct and return HTTP responses.
 

content/v3/javascript-components.md

@@ -31,7 +31,7 @@ With JavaScript being a very popular language, Spin provides an SDK to support b
 
 > All examples from this page can be found in [the JavaScript SDK repository on GitHub](https://github.com/spinframework/spin-js-sdk/tree/main/examples).
 
-[**Want to go straight to the Spin SDK reference documentation?**  Find it here.](https://spinframework.github.io/spin-js-sdk/stable/)
+[**Want to go straight to the Spin SDK reference documentation?**  Find it here.](https://spinframework.github.io/spin-js-sdk/)
 
 ## Installing Templates
 
@@ -77,19 +77,18 @@ This creates a directory of the following structure:
 
 ```text
 hello-world
-├── config
-│   └── knitwit.json
 ├── package.json
+├── README.md
 ├── spin.toml
 ├── src
-│   └── index.ts
+│   └── index.ts
 ├── tsconfig.json
 └── webpack.config.js
 ```
 
 The source for the component is present in `src/index.ts`. [Webpack](https://webpack.js.org) is used to bundle the component into a single `.js` file which will then be compiled to a `.wasm` module.
 
-{{ details "Going from JavaScript to Wasm" "The JS source is compiled to a `wasm` module using the `j2w` node executable provided by the `@fermyon/spin-sdk` which is a wrapper around `ComponentizeJS`. The `knitwit.json` is the configuration file used by [knitwit](https://github.com/fermyon/knitwit) to manage the WebAssembly dependencies of each package."}}
+{{ details "Going from JavaScript to Wasm" "The JS source is compiled to a `wasm` module using the `j2w` node executable provided by the `@fermyon/spin-sdk` which is a wrapper around `ComponentizeJS` that is used to manage the dependencies."}}
 
 ## Building and Running the Template
 
@@ -259,13 +258,13 @@ You must [add `http://self` or `http://self.alt` to the component's `allowed_out
 > You can find a complete example for using outbound Redis from an HTTP component
 > in the [spin-js-sdk repository on GitHub](https://github.com/spinframework/spin-js-sdk/blob/main/examples/spin-host-apis/spin-redis).
 
-Using the Spin's JS SDK, you can use the Redis key/value store and to publish messages to Redis channels.
+We can install and use the `@spinframework/spin-redis` package to use the Redis key/value store and to publish messages to Redis channels.
 
 Let's see how we can use the JS/TS SDK to connect to Redis:
 
 ```javascript
 import { AutoRouter } from 'itty-router';
-import { Redis } from '@fermyon/spin-sdk';
+import { Redis } from '@spinframework/spin-redis';
 
 const encoder = new TextEncoder();
 const redisAddress = 'redis://localhost:6379/';
@@ -314,14 +313,20 @@ Spin has a key-value store built in. For information about using it from TypeScr
 
 ## Storing Data in SQLite
 
+We can use the `@spinframework/spin-sqlite` package to interact with Spin's SQLite interface. 
+
 For more information about using SQLite from TypeScript/Javascript, see [SQLite storage](sqlite-api-guide).
 
 ## Storing Data in MySQL and PostgreSQL Relational Databases
 
+We can use the `@spinframework/spin-mysql`, `@spinframework/spin-postgres` package to interact with Spin's RDBMS interfaces.
+
 For more information about using relational databases from TypeScript/JavaScript, see [Relational Databases](rdbms-storage).
 
 ## AI Inferencing From JS/TS Components
 
+We can use the `@spinframework/spin-llm` package to interact with Spin's LLM interface.
+
 For more information about using Serverless AI from JS/TS, see the [Serverless AI](serverless-ai-api-guide) API guide.
 
 ## Node.js Compatibility
@@ -331,21 +336,24 @@ The SDK does not support the full specification of `Node.js`. A limited set of A
 <!-- @selectiveCpy -->
 
 ```bash
-$ npm install @fermyon/wasi-ext
+$ npm install @spinframework/wasi-ext
 ```
 
 Once installed, the plugin provided by it can be added to the webpack config: 
 
 ```js
-const WasiExtPlugin = require("wasi-ext/plugin")
+import WasiExtPlugin from "@spinframework/wasi-ext/plugin/index.js";
 
-module.exports = {
+export default config = () => {
     ...
-    plugins: [
-        new WasiExtPlugin()
-    ],
-    ...
-};
+    return {
+        ...
+        plugins: [
+            new WasiExtPlugin()
+        ],
+        ...
+    }
+}
 ```
 
 This library only currently supports the following polyfills:

content/v3/key-value-store-tutorial.md

@@ -75,6 +75,8 @@ $ spin new -t http-rust spin-key-value
 
 ```bash
 $ spin new -t http-ts spin-key-value
+$ cd spin-key-value
+$ npm install @spinframework/spin-kv
 
 # Reference: https://github.com/spinframework/spin-js-sdk/tree/main/examples/spin-host-apis/spin-kv
 ```
@@ -234,15 +236,15 @@ fn handle_request(req: Request) -> anyhow::Result<impl IntoResponse> {
 
 ```typescript
 import { AutoRouter } from 'itty-router';
-import { Kv } from '@fermyon/spin-sdk';
+import { openDefault } from '@spinframework/spin-kv';
 
 const decoder = new TextDecoder();
 
 let router = AutoRouter();
 
 router
     .all("*", async (req: Request) => {
-        let store = Kv.openDefault();
+        let store = openDefault();
         let status = 200;
         let body;
 

content/v3/kv-store-api-guide.md

@@ -85,17 +85,17 @@ fn handle_request(_req: Request) -> Result<impl IntoResponse> {
 
 > [**Want to go straight to the reference documentation?**  Find it here.](https://spinframework.github.io/spin-js-sdk/stable/)
 
-The key value functions can be accessed after opening a store using either [the `Kv.open` or the `Kv.openDefault` methods](https://spinframework.github.io/spin-js-sdk/stable/modules/Kv.html) which returns a [handle to the store](https://spinframework.github.io/spin-js-sdk/stable/interfaces/Kv.Store.html). For example:
+The key value functions can be accessed after opening a store using either [the `open` or the `openDefault` functions](https://spinframework.github.io/spin-js-sdk/modules/_spinframework_spin-kv.html) which returns a [handle to the store](https://spinframework.github.io/spin-js-sdk/interfaces/_spinframework_spin-kv.Store.html). For example:
 
 ```ts
 import { AutoRouter } from 'itty-router';
-import { Kv } from '@fermyon/spin-sdk';
+import { openDefault } from '@spinframework/spin-kv';
 
 let router = AutoRouter();
 
 router
     .get("/", () => {
-        let store = Kv.openDefault()
+        let store = openDefault()
         store.set("mykey", "myvalue") 
         return new Response(store.get("mykey") ?? "Key not found");
     })

content/v3/mqtt-outbound.md

@@ -57,11 +57,13 @@ You can find a complete Rust code example for using outbound MQTT from an HTTP c
 
 {{ startTab "TypeScript"}}
 
-> [**Want to go straight to the reference documentation?**  Find it here.](https://spinframework.github.io/spin-js-sdk/stable/modules/Mqtt.html)
+> [**Want to go straight to the reference documentation?**  Find it here.](https://spinframework.github.io/spin-js-sdk/modules/_spinframework_spin-mqtt.html)
 
-To access an MQTT server, use the `Mqtt.open` function.
+To access an MQTT server, use the `open` function.
 
 ```ts
+import { open, QoS } from "@spinframework/spin-mqtt";
+
 let connection = Mqtt.open(address, username, password, keepAliveSecs);
 ```
 

content/v3/rdbms-storage.md

@@ -73,14 +73,14 @@ For full information about the MySQL and PostgreSQL APIs, see [the Spin SDK refe
 
 {{ startTab "TypeScript"}}
 
-> [**Want to go straight to the reference documentation?**  Find it here.](https://spinframework.github.io/spin-js-sdk/stable/)
+> [**Want to go straight to the reference documentation?**  Find it here.](https://spinframework.github.io/spin-js-sdk/)
 
 The code below is an [Outbound MySQL example](https://github.com/spinframework/spin-js-sdk/tree/main/examples/spin-host-apis/spin-mysql). There is also an outbound [PostgreSQL example](https://github.com/spinframework/spin-js-sdk/tree/main/examples/spin-host-apis/spin-postgres) available.
 
 ```ts
 // https://itty.dev/itty-router/routers/autorouter
 import { AutoRouter } from 'itty-router';
-import { Mysql } from '@fermyon/spin-sdk';
+import { open } from '@spinframework/spin-mysql';
 
 // Connects as the root user without a password 
 const DB_URL = "mysql://root:@127.0.0.1/spin_dev"
@@ -97,7 +97,7 @@ let router = AutoRouter();
 
 router
     .get("/", () => {
-        let conn = Mysql.open(DB_URL);
+        let conn = open(DB_URL);
         conn.execute('delete from test where id=?', [4]);
         conn.execute('insert into test values (4,5)', []);
         let ret = conn.query('select * from test', []);

content/v3/redis-outbound.md

@@ -89,14 +89,14 @@ You can find a complete Rust code example for using outbound Redis from an HTTP
 
 {{ startTab "TypeScript"}}
 
-> [**Want to go straight to the reference documentation?**  Find it here.](https://spinframework.github.io/spin-js-sdk/stable/)
+> [**Want to go straight to the reference documentation?**  Find it here.](https://spinframework.github.io/spin-js-sdk/)
 
-Redis functions are available on [the `Redis` module](https://spinframework.github.io/spin-js-sdk/stable/modules/Redis.html). The function names match the operations above. For example:
+Redis functions are available on [the `Redis` module](https://spinframework.github.io/spin-js-sdk/modules/_spinframework_spin-redis.html). The function names match the operations above. For example:
 
 ```javascript
-import { Redis } from "@fermyon/spin-sdk"
+import { open } from "@spinframework/spin-redis"
 
-let db = Redis.open("redis://localhost:6379")
+let db = open("redis://localhost:6379")
 let value = db.get(key);
 ```
 

content/v3/serverless-ai-api-guide.md

@@ -116,21 +116,21 @@ The `infer_with_options` examples, operation:
 
 {{ startTab "Typescript"}}
 
-> [**Want to go straight to the reference documentation?**  Find it here.](https://spinframework.github.io/spin-js-sdk/stable/modules/Llm.html)
+> [**Want to go straight to the reference documentation?**  Find it here.](https://spinframework.github.io/spin-js-sdk/)
 
-To use Serverless AI functions, [the `Llm` module](https://spinframework.github.io/spin-js-sdk/stable/modules/Llm.html) from the Spin SDK provides two methods: `infer` and `generateEmbeddings`. For example: 
+To use Serverless AI functions, [the `@spinframework/spin-llm` pacakge](https://spinframework.github.io/spin-js-sdk/modules/_spinframework_spin-llm.html) provides two methods: `infer` and `generateEmbeddings`. For example: 
 
 ```javascript
 import { AutoRouter } from 'itty-router';
-import { Llm } from '@fermyon/spin-sdk';
+import { inferencingModels, EmbeddingModels, infer, generateEmbeddings } from '@spinframework/spin-llm';
 
 let router = AutoRouter();
 
 router
     .get("/", () => {
-       let embeddings = Llm.generateEmbeddings(Llm.EmbeddingModels.AllMiniLmL6V2, ["someString"])
+       let embeddings = generateEmbeddings(EmbeddingModels.AllMiniLmL6V2, ["someString"])
         console.log(embeddings.embeddings)
-        let result = Llm.infer(Llm.InferencingModels.Llama2Chat, prompt)
+        let result = infer(InferencingModels.Llama2Chat, prompt)
 
         return new Response(result.text);
     })