WebAssembly Component Model: Writing components in TypeScript with jco

This part isn’t required to use the project — but if you want to experiment with writing plugins in TypeScript, here’s how it works.

The downsides of writing plugins in TypeScript is mostly that your .wasm file will be much larger than the one compiled from rust or C:

• ~100KB of wasm for the rust plugin


• ~12MB of wasm for the TypeScript plugin

The reason is that a JavaScript runtime needs to be embedded in the .wasm file, which is not the case for the rust plugin.

More about the toolchain helps compile JS/TS code into WebAssembly components.

Build Steps

1. Generate TypeScript types:
   

CODE Kopieren

cd packages/plugin-name

jco types --world-name plugin-api --out-dir ./src/types ../../crates/pluginlab/wit

1. Bundle your TS code into a single file (using rolldown or another bundler).
   

CODE Kopieren

rolldown ./src/component.ts --file ./dist/component.js

1. Componentize it:
   

CODE Kopieren

jco componentize ./dist/component.js \

  --wit ../../crates/pluginlab/wit \

  --world-name plugin-api \

  --out ./dist/component.wasm \

  --disable http --disable random

1. (Optional) Optimize the resulting .wasm file:
   

CODE Kopieren

jco opt ./dist/component.wasm -o ./dist/component-opt.wasm

Example: package.json Scripts

CODE Kopieren

{

  "wit-types": "jco types ...",

  "bundle": "rolldown ...",

  "componentize": "jco componentize ...",

  "build": "npm run wit-types && npm run bundle && npm run componentize",

  "optimize": "jco opt ...",

  "typecheck": "tsc --noEmit"

}

📎 Here are links to the implementation of the plugin-echo plugin in TypeScript in the project.

Vollständiger Original-Bericht

Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

↗ Original-Artikel auf dev.to lesen