# Fentrica WebComponents

Larva WebComponents are used to develop hybrid mobile applications for Fentrica infrastructure and controllers.
Those components are actual User Interface Components - each component corresponds to the Fentrica Controllers User Interface nodes that you can use on a flow.
Those WebComponents should be loaded dynamically based on a controller (flow) configuration.

For a Fentrica real-time communication between components and controllers, you must use suitable communication module, like [this one @larva.io/clouddevice](https://www.npmjs.com/package/@larva.io/clouddevice).

License: [Attribution-NoDerivatives 4.0 International](https://unpkg.com/@larva.io/webcomponents/LICENSE.md)

## Documentation

[docs.fentrica.com](https://docs.fentrica.com/)

## Installation

```bash
npm install @larva.io/webcomponents
```

## Usage

### React

```tsx
import { LarApp } from '@larva.io/webcomponents/react';

function App() {
  return (
    <div>
      <LarApp />
    </div>
  );
}
```

### Vue 3

```js
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { LarvaWebcomponents } from '@larva.io/webcomponents/vue'

createApp(App)
  .use(LarvaWebcomponents)
  .mount('#app')
```

```vue
<!-- App.vue -->
<template>
  <LarApp />
</template>

<script>
import { LarApp } from '@larva.io/webcomponents/vue';

export default {
  components: {
    LarApp
  }
}
</script>
```

### Vanilla JavaScript / HTML

```html
<script type="module">
  import { defineCustomElements } from '@larva.io/webcomponents/loader';
  defineCustomElements();
</script>

<lar-app></lar-app>
```