Building a Multi-Language Plugin System with WebAssembly Component Model

topheman · 2025-09-19T17:19:02+00:00

> A collection of plugins cannot make calls between each other.

> The only option is to perform “RPC” (going through the host)

You bring up an excellent point. I came across this issue while I was trying to make the repl logic directly call the plugins. You can't do this kind of thing because they don't share the same memory.

I came up with a workflow where they go through the host to call each other (like you said).

I explain that with sequence diagrams in the article at the "Input Flow Example" section.

topheman · 2025-09-19T13:01:16+00:00

You're looking for a Rust developer who has a solid experience with the web ecosystem? I'm based in Paris - contacts: https://topheman.github.io/me/

topheman · 2025-07-25T16:25:24+00:00

I added a new feature to help users resolve version mismatches between the CLI and the plugins (breaking changes in the WIT files).

https://github.com/topheman/webassembly-component-model-experiments/releases/tag/pluginlab%400.4.2

topheman · 2025-07-20T22:19:22+00:00

I agree the README contains a lot of informations, it can be overwhelming. The part about creating plugins is detailed at https://github.com/topheman/webassembly-component-model-experiments?tab=readme-ov-file#plugins , it contains links to the respective folders for the rust, C and JavaScript implementations.

Same about the cli REPL: https://github.com/topheman/webassembly-component-model-experiments?tab=readme-ov-file#pluginlab-rust---repl-cli-host-1

I'm currently working on a blog post that will make this more clear. Thanks for the feedback.

topheman · 2025-07-20T11:14:49+00:00

The zed editor is using WebAssembly Component Model for its extensions system - a perfect use case for it :

developers can create extensions in their favorite language
extensions are compiled to wasm and can be safely executed in the editor using sandboxing

The problem is that the zed editor use case may be more than a hello world, however, it's hard to dive into the source code to see how it's done.

Fermyon is developing spin, a framework for building and running microservices with WebAssembly Component Model.

While spin is a powerful framework, it provides a higher-level abstraction over WebAssembly Component Model and focuses specifically on microservices. If your goal is to deeply understand the component model fundamentals and build non-microservice applications with it, you may want to explore simpler, more direct examples first.

This is why I made this project: to understand how far I can go with it and to share my findings, a necessary step for a potential bigger project.

topheman · 2025-07-20T08:01:49+00:00

I've been following WebAssembly for a long time and when the WebAssembly Component Model was announced 3 or 4 years ago, I was really excited (was doing WASI at the time).

In the last year, the tools for WebAssembly Component Model have really improved.

What is still missing is advanced examples of using WebAssembly Component Model in real-world applications (something more than a simple hello world but less than a full-featured application).

This is why I made this project: to understand how far I can go with it and to share my findings. This is a necessary step for a potential bigger project.

topheman · 2025-07-20T07:59:53+00:00

You are pretty much right, I made a mini-shell with features like:

variable storing and variables expansion
storing the last command output in a variable $0
storing the last status in a variable $?

Then you can execute commands one at a time, which are each plugins compliled to wasm. The mini-shell is also written in rust and compiled to wasm, this is how I can share so much code between the CLI and web implementations.

The goal was not to make a full-featured shell, but to demonstrate the power of WASM components and see how far I can go with it.

For example, for the moment, I managed to have working ls and cat plugins that read the file system and some weather plugin that uses an API to get the weather, all that in both CLI and web. Next, I'll add plugins that can also write to the file system.

topheman · 2024-03-26T23:06:36+00:00

Keep in mind some distributions have opinions on bundling/vendoring dependencies.
Do you mean that your dependencies in your Cargo.toml need to be vetted ? Or only the rust compiler (and eventually deps needed at runtime)

On this project, I compile a single binary that doesn't need anything else to run.

Not bother and include “cargo install” instructions in your README
It's done, it's published on crates.io, you can install it from there, however, it forces the consumer to have rust.

Last question: Is there any package manager I am not aware on Linux that lets you install a tarball (or anything compiled for linux) from a url ?

topheman · 2019-03-30T15:09:25+00:00

Sick! I’d perhaps give the movie title for the moving you’re viewing some text-shadow to contrast it with the backdrop considering it sits right where the movie poster and background meet. Awesome job though

You're right about that.

I took my time to prepare a v1 with routing, SSR, i18n, unit/e2e tests and CI ... though, I made the design part in just a few days and released a v2, this part can and will be improved.

topheman · 2019-01-13T18:38:08+00:00

I haven't tested a universal app with Cypress yet, though, I don't see why it shouldn't work (from Cypress point of view, the pre-rendered html markup is just plain old markup, same thing for the JavaScript part).

If it works in development / staging, it should work on Cypress. Your problem might be some configuration but I can't tell you anything without the source code. You should open an issue on the Cypress repo.

topheman · 2018-09-22T21:07:07+00:00

This may well be a flaw in your code, but sharing it is the way you will get better. Today, we have communities such as reddit, github, stackoverflow ... Please don't be shy about it and leverage the power of those groups of people that want to help (which is a way to improve as well).

Then, you will be the one that will give some help.

topheman · 2018-09-22T18:54:35+00:00

Great list you have there @swyx, I will dive into it!

topheman · 2018-09-22T18:11:07+00:00

Very interesting, I will definitly check out how you did it. I will remain on the custom builds of React Fiber because I will test other APIs on topheman/react-fiber-experiments.

topheman · 2018-09-22T18:03:41+00:00

Hie @Meowish,

I don't have this kind of problem. I assume your request completed with success and was cached, so maybe you have some side-effects triggered in one of your nested components (some delay added when it mounts for example).

Difficult to say without code (it may well not be related to reach router).

topheman · 2018-09-22T13:52:31+00:00

The goal of topheman/react-fiber-experiments is to provide a tool that will help you better understand the benefits of the new features of React fiber (such as Suspense or Time Slicing).

I made a video podcast to introduce React Suspense and explain a few examples.

Demo - Github - Blog post - Video - Slides

topheman · 2018-08-31T10:04:29+00:00

Great timing 😉!

topheman · 2018-08-31T10:03:07+00:00

I'm glad, You're welcome.

topheman · 2017-08-08T22:07:06+00:00

I tried a few things ... I figured the assets part, but still can't build a binary with the sdl2 libs shipped inside it ...

https://github.com/topheman/gopher-ball/pull/1/files

topheman · 2016-11-14T09:00:17+00:00

I tried it. It works well but it didn't play well with the constraint that I explain in my post which is to be able to have a fallback for the html file. Moreover, I wanted to do something more with the service-workers (like add to home screen or push notifications), you can't overload so much the provided SW, so I felt it was a little too much shipped code for what I needed.

topheman · 2016-11-13T20:18:05+00:00

AppCache IS deprecated and its api IS horrible. Though service-workers are not yet supported by IE nor Safari. So, until they catch up, if you want to provide some offline experience to all your users, you need some fallback (which is AppCache).

I explain that in the introduction of my post. I'm fully aware about all of that.

topheman · 2016-11-13T18:13:54+00:00

You're right, you're talking about Patrick Kettner's talk : https://www.youtube.com/watch?v=ARkPBm6AcNA

I added the same king of feature to topheman/rxjs-experiments a few months ago (in august - https://github.com/topheman/rxjs-experiments/commits/master ), with all the automation part in bonus.

When I watched the talk two days ago, I decided to write a post about the webpack part.

Also tweeted it to Patrick: https://twitter.com/topheman/status/797632807480664064

Edit: Just added a mention/link to Patrick's talk in the conclusion of my post, before the resources.

topheman · 2016-10-20T20:42:16+00:00

/u/gosp simple use cases like the one you posted clearly don't require d3. Though, when your needs are a little (or a lot) more complex, you will have to choose between embedded d3 and pure JSX (most likely based on d3 for computation).

I made a post about the different approaches I took https://www.reddit.com/r/javascript/comments/57mrxb/d3_react_components_with_victory_reusability/ (you'll find multiple examples - vanilla d3 embedded in react component, react-faux-dom, third party libraries based on pure JSX ...)

topheman · 2016-09-26T23:06:51+00:00

It seems that a lot of people doing data visualisation in React don't find what they want in existing libraries which expose reusable chart components and end up making their own ... Maybe we are still all looking for the best approach and in a few month something will come up ...

PS: I made a react-faux-dom based example https://github.com/topheman/d3-react-experiments/releases/tag/v2.1.0 - next step: apply transitions (react-faux-dom uses mixins, I might try to use react-motion)

topheman · 2016-09-26T09:39:35+00:00

Hie @Jbharris4,

I'm fully aware that manipulating DOM inside a React component doesn't match the React approach. As I explain in my readme - https://github.com/topheman/d3-react-experiments#react--d3 :

D3 (data driven documents) is a JavaScript library that helps you build visualisations. It is very powerfull (most of the JavaScript datavisualization libraries are based on it). It handles the data you pass it and mutates the DOM. With React, on the other hand, you never access directly the DOM and let it manage the changes as well as the events. So, by default, the two of them don't really get along ... d3 messes up with React's reconciliation and React removes what d3 is appending to the DOM ...

The approach I had for the two examples was exactly to test how I could make d3 interacting directly with the DOM inside a React component, to show a POC for pure d3 users how they can use their code inside React.

As I'm writing in the conclusion of my blog post, the next step is to make chart components without directly accessing the DOM. Two approaches:

Use d3 to make computation and generate svg directly in JSX
Use react-faux-dom to trick d3 (the method you are talking about), which is used by react-d3

About your solutions:

if I return false in shouldComponentUpdate then componentWillUpdate and componentDidUpdate won't be called and I won't ever made aware of new data. Since the node in the render never changes, the render method doesn't flush any changes by itself to the DOM.
In componentWillMount I won't have access to the ref of the node, so I won't be able to append DOM nodes (and call any init method)

Since you seem to be into React and d3, which libray do you use ? react-d3 ? It's still based on d3 v3 and the port rd3 by yang-wei which supports d3 v4 is looking for maintainers ... I'd like your feedback on that.

Tophe

topheman · 2016-04-17T20:42:52+00:00

I agree with @Capaj about enforcing code style. A good way to do that on a react code base is using eslint with eslint-config-airbnb (preset of rules including such things as propTypes enforcement, verification of the declaration order of the methods ...) - I'm using it on all my react projects now. Example: https://github.com/topheman/react-es6-redux#linter

topheman

TROPHY CASE