https://github.com/anfibiacreativa/componentmodeldemo
Wasm component model demo. Components componentized with ComponentizeJS and transpiled with JCO. Reframed with web-fragments.
https://github.com/anfibiacreativa/componentmodeldemo
componentizejs wasm wasm-component web-fragments webassembly
Last synced: about 2 months ago
JSON representation
Wasm component model demo. Components componentized with ComponentizeJS and transpiled with JCO. Reframed with web-fragments.
- Host: GitHub
- URL: https://github.com/anfibiacreativa/componentmodeldemo
- Owner: anfibiacreativa
- License: mit
- Created: 2024-09-14T15:53:46.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-09-14T17:05:00.000Z (8 months ago)
- Last Synced: 2024-10-06T01:22:15.314Z (8 months ago)
- Topics: componentizejs, wasm, wasm-component, web-fragments, webassembly
- Language: TypeScript
- Homepage:
- Size: 125 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Micro-frontends and the Wasm component model
## Overview
This repo demonstrates the integration of [WebAssembly components](https://component-model.bytecodealliance.org/design/why-component-model.html) written in JavaScript, componentized with [ComponentizeJS](https://github.com/bytecodealliance/ComponentizeJS) as micro-frontends and integrated into a UI using a slightly modified version of [Web-Fragments reframed library](https://github.com/web-fragments/web-fragments).
## Usage
This repo is a `pnpm` workspaces structure containing several components, ready to componentize and transpile.
### Install all dependencies
Install all dependencies by running
```bash
$ pnpm i
```
at root level
### Componentize the components
Components are found under ./packages/wasm-sources.
Run
```bash
$ node componentize.mjs
```
to generate the `wasm.component` files. They will be generated under each component folder, in a new generated directory called `output`.
### Transpile the component using JCO
Now you can run
```bash
$ pnpm run transpile
```
To transpile the components. The output will be placed under the same `/output` directory.
For exammple, for `component2`, you should see the following output, both in the terminal and in the source code.
```bash
Transpiled JS Component Files:
- ./output/component2/component2.component.core.wasm 6.44 MiB
- ./output/component2/component2.component.core2.wasm 30.1 KiB
- ./output/component2/component2.component.d.ts 0.59 KiB
- ./output/component2/component2.component.js 44.5 KiB
- ./output/component2/imports/environment.d.ts 0.09 KiB
- ./output/component2/imports/exit.d.ts 0.16 KiB
- ./output/component2/imports/filesystem.d.ts 3.85 KiB
- ./output/component2/imports/monotonic-clock.d.ts 0.14 KiB
- ./output/component2/imports/preopens.d.ts 0.47 KiB
- ./output/component2/imports/random.d.ts 0.1 KiB
- ./output/component2/imports/streams.d.ts 0.58 KiB
- ./output/component2/imports/wall-clock.d.ts 0.18 KiB
```
You can add new components to experiment. As long as you add them to the `wasm-sources` and in a folder called `component{i}`, they will be included in the componentization and transpilation. You will also need to add this command to the `scripts` section of the `package.json`.
```json
"transpile": "jco transpile ./output/${COMPONENT_NAME}.component.wasm -o ./output/${COMPONENT_NAME} --wasi-shim",
```
This is the command responsible for the transpilation with `jco`.
## Adding the components to the frontend app.
This demo uses `web-fragments` to reframe the micro-frontends and add them to the UI. For example, to add component2, it is added as a new `.html` file, to the `public` folder at root level. That's the endpoint from where the data is streamed.
This code is reponsible to reframing the component
```javascript
// Reframe component2
const endpoints = ['component2.html'];
const ref = `./${endpoints[0]}`;
const refId = ref.replace(/\.html$/, '');
const tageName = 'section';
const { container } = reframed(ref, { containerTagName: tageName });
container.setAttribute('style', 'border:3px dotted red');
container.setAttribute('id', `${tageName}-${refId}`);
// append the reframed component to the DOM
const main = document.body.querySelector('main');
main.appendChild(container);
```
This is the code in main.js
Make sure to have all dependencies in place. Read more about `web-fragments` following [this link](https://github.com/web-fragments/web-fragments)