How the component works

In this part we're going to explain how the React Component works and interfaces with Zint.

Micro Frontend

A React component has to be compiled as a Micro-frontend to be usable by Zint. The create-zint-component helper preconfigures Webpack to emit a micro-frontend.

info

What's a micro-frontend? A micro-frontend is a part of a web application which is able to be integrated into a larger application at run-time.

A typical modern web app depends on a lot of modules that are installed via npm and is bundled for production, often using webpack. Until micro-frontends webpack had to build the entire application at once.

Since version 5 webpack is capable of emitting micro-frontends (webpack's terminology for this is called 'Module Federation'.), which means it emits a partial build containing only some components, and this partial builds can be integrated in other webpack apps at runtime, without rebuilding either the component or the app. Basically they are the front-end equivalent of the shared library.

The relevant bits of configurations are in webpack.config.js and more precisely in the use of the ModuleFederationPlugin

zint.component.json

In a typical use of micro-frontends, the web app that loads the micro-frontend at run-time would know the name of the component it loads, even if it was built separately. Zint goes a little bit further since it has no knowledge of the components at build time. To be able to load a micro-frontend despite being unaware of it at build time, Zint needs a small 'manifesto' of the micro-frontend to know the name of the component(s) that the micro-frontend exposes.

This is where the zint.component.json comes to play: it describes the contents of the micro-frontend.

zint.component.json

{ "scope": "csv", 
  "exposes": {
      "Csv": "./src/Component" 
  }, 
  "dock":"react17-rxjs", 
  "dockVersion": "0.0.1+alpha"
}

In order for Zint to be able to load the component, the 'exposes' part of this file must be correct. In this object, the key (here "Csv") is the name of the exported module that Zint will load and "./src./Component" is the source file it corresponds to.

warning

This means, if you want to rename the Component.tsx file you need to update zint.component.json accordingly!

Component props

When called As the Component.tsx shows, the Component will receive two props:

Component.tsx

interface DataChunk {
    data: Buffer
}
interface Props  {
    data$: Observable<DataChunk>
    componentArgs: string[]
}

The data$ prop is an RxJS Observable that will stream the data from the terminal. It will emit DataChunks containing the binary data received from the terminal. This data will typically need to be processed by a pipeline of Operators to be usable, and the result store in the component's state.

The create-zint-component helper will pre-configure this RxJS pipeline according to the answers to its questionnaire, but it's likely that further customisation will be needed.

The componentArgs are the arguments of the zint command line, split as an array. So if the command was zint flamegraph --du --no-follow, the componentArgs will be ['--du', '--no-follow']