The developer will be able to embed technologically-independent applications into a hosting platform, also allowing event-based communication between them.
## Global state
Any component's global state can be accessed and modified using **Redux**'s `actions`, `dispatch` and `reducers`.
## Preserving state
The [Widget API](/widget-api) allows the developer to access any component's global state and preserve it in any particular way.
## Communication with the host
Through the use of native browser events or the [Widget API](/widget-api), the components can communicate with the hosting platform and react to e.g. theme changes.
## Communication between components of the same kind
The included event manager can be used to allow other components of the same kind to communicate between each other. See how it works in our [Live Examples section](./storybook)
This library allows developers to separate a monolith app into smaller components, which in turn:
- keeps the codebases DRY and simple
- reduces the amount of complexity of the global state in the application
- allows teams to work on features independently
## Developing independent widgets integrated into a hosting platform
Suppose that your team is presented with a task to create a platform containing many widgets which would fetch and display data in many different ways. One way to approach this problem is to build a monolith application with a lot of shared state and dependencies both internal and external. While this may seem simple at first, the application is bound to become more and more difficult to maintain with time.
### Perhaps another way would be to keep each widget independent from the others?
Yes! And this library will help you do exactly that. Moreover, you are not bound to any particular technology. Currently the developers in your team can use:
- React
- React with TypeScript
- jQuery
- TypeScript
- Vaniila JavaScript
so feel free to work with whatever suits your particular widget the best and easily switch to another technology with the next widget.
This repository contains the documentation, lib and templates for creating widgets.
Additional templates or implementations of widgets can be created by following README.
## Prerequisites
### Node.js and npm
...
...
@@ -20,16 +16,21 @@ To be able to use the widget API you will need to download the `@tecnojest/widge
### Installing from the npm registry
If you are a registered partner, you will be able to download the package from the official registry. You will need to configure your local npm engine to point to Tecnojest's registry, by doing the following:
If you are a registered partner, you will be able to download the package from the official registry. Otherwise, skip this step and [build the lib yourself](#buildingthelibyourself).
You will need to configure your local npm engine to point to Tecnojest's registry, by doing the following:
# authenticate in the private npm registry
npm login --registry https://npm.invidea.it
# set the registry to point to @tecnojest's scope
npm config set @tecnojest:registry https://npm.invidea.it
```bash
# authenticate in the private npm registry
npm login --registry https://npm.invidea.it
# set the registry to point to @tecnojest's scope
npm config set @tecnojest:registry https://npm.invidea.it
```
if during the first `npm login` step you receive a `UNABLE_TO_VERIFY_LEAF_SIGNATURE` error, then run:
npm config set strict-ssl false
```
npm config set strict-ssl false
```
and try again.
...
...
@@ -38,7 +39,7 @@ and try again.
Everyone is able to build the `lib` themselves. To do so, follow these steps:
First, follow the [getting started guide](/getting-started).
To be able to use the widget API you need to integrate this package in your project. Follow the steps in [New project](#new-project) if you are creating a new project from scratch, or in [Existing project](#existing-project) if you are trying to run an existing project locally.
<aid="existing-project"></a>
### Existing project
Simply follow the instructions above to login and change configurations, then run the usual routine:
```bash
npm install
npm start
```
<aid="new-project"></a>
### New project
### 1. Init new project
```bash
npm init
```
### 2. If you do not have access to the @tecnojest npm namespace skip this step and refer to Getting started to see how you can use the lib, else:
```bash
npm install @tecnojest/widget-base
```
### 3. Add peer dependencies into devDependcies of package.json file:
This file must include at least the EmbeddableWidget.Engine part, implementing the three methods `createElement(...)`, `render(...)`, and `unmountComponent(...)` - (the example above uses React and ReactDOM).
### React
If you wish to use React in your project, refer to [React Configuration](/getting-started/react-configuration)
### TypeScript
If you want to use TypeScript in your project, refer to [TypeScript Configuration](/getting-started/typescript-configuration)
> ⚠ Remember that all of these have to be `static`
## static externalScripts
To import e.g. `jQuery` or any other external dependency which should be shared among your components, you can define the following static in the main Widget class:
