# Widget utilities
---
# STRUCTURE
This widget has structure as follows:

1. src/ : source code folder where `index.tsx` is the main file

2. dist/ : after compiled, all the distribution files will places here. Make user `main` attribute in package.json points to `dist/index.js`

4. tsconfig.json: typescript configuration
5. webpack.config.js: webpack configuration
---
# HOW TO USE


## I. In the main folder
1. Install all dependencies

```javascript
npm install
```

2. Compile the component

```javascript
npm run build

```

After this step, webpack will build the component and put in dist/.

After each change, we have to run this command again (we could set up some webpack's watch to do this automatically)

3. Publish in npm

```javascript
npm version patch
or
npm version major

npm publish
```

Note: Make sure you have account and granted access to the repo.
## II. In test/  folder

1. Import the component from npm respository

```javascript

npm install emagiz-widget-utilities
```

2. Run gulp 

```javascript
gulp
```
3. Open Mendix project and run


To sum up, if you change the component
- npm run build: to compile and copy the latest version to test project
- the change will be update in MxReactWidget
- make a change in MxReactWidget so guld can build new version of the widget
- refresh the browser to see the result.

## 3. When to publish the component

Only publish when tested fully in the test project which has similar enviroment as main eMagiz project.
Increate the version correctly.