@bsw/bsweventemitter/README.md

Publish Subscribe events for the page

# Introduction 
Publish Subscribe for spfx webparts to communcate with eachother on the same page. As this is being developed the milestones for going from a simple ts/js app to a npm published utiltiy to be used in spfx web parts are bieng mentioned. The imputes for this was spfx web part communication but there are no dependencies on the spfx framework.

#Usage
The use case here is for one compnent to load some data and other components to use the same data. This prevents having to load the same data in each component.
##Publish (emit)
This will publish data to the subject `links` after reading it from a SharePoint list.
```TypeScript
   import {EventEmitter} from '@bsw/bsweventemitter';
   import { IEventData } from '@bsw/bsweventemitter/lib/BSWEventEmitter';
   import { SPHttpClient, IHttpClientOptions,HttpClientResponse } from '@microsoft/sp-http';
  class PublishExample{
    private eventEmitter = EventEmitter;

    private loadLinks=() =>{
      let reqHeaders: Headers = new Headers();
      reqHeaders.append("Content-type", "application/json");
      reqHeaders.append("Cache-Control", "no-cache");
      let spOpts: IHttpClientOptions={headers:reqHeaders};

      this.props.context.spHttpClient.get("https://tenant.sharepoint.com/sites/SiteName/_api/web/lists/GetByTitle('Name of List')", SPHttpClient.configurations.v1, spOpts)
        .then((response: HttpClientResponse) => {
          response.json().then((json: any) => {        
            this.eventEmitter.emit("links",{data:json.value});
          });
        });
    }
  }
```
##Subscribe (on)
This will register a function to call when there is a change to the named subject `links` in this case.

```TypeScript
   import {EventEmitter} from '@bsw/bsweventemitter';
   import { IEventData } from '@bsw/bsweventemitter/lib/BSWEventEmitter';

   class SubscribeExample {
     private eventEmitter = EventEmitter;

     this.eventEmitter.on('links', this.receiveData);

     private receiveData = (ed:IEventData) =>{
       //do what ever with the data
       ed.data
     }
   }
```

# Develpment notes

## Config File purposes (helps me keep it straight)
  - tsconfig.json - tells typescript about the files
  - package.json - npm package config the **main property identifies the starting point** for the package. Tells clients of the package what is needed
  - gulpfile.js - the build config  identifies which files to build and what to name and where to put the finished files. The built file is what package.json will ultimetly point to.

### [Initail set up **gulpfile.js.initial**](https://www.typescriptlang.org/docs/handbook/gulp.html#minimal-project)
- Uses gulp, npm, typescript
To get the basic project going:
`>npm install --save-dev typescript gulp@4.0.0 gulp-typescript`

### [Then the next step was to 'Browserify' to project **gulpfile.js.browserify.tsify**](https://www.typescriptlang.org/docs/handbook/gulp.html#add-modules-to-the-code)
`>npm install --save-dev browserify tsify vinyl-source-stream`
Using these allowed the index.html to refrence bundle.js which was created when the updated defult gulp action was run.
Worth noting the in the gulpfile.js the debug: true uption passed into browserfly allows for .ts files to be debuged in the browser deveoper tools.

### [Then Watchify, Babel, and Uglify was done](https://www.typescriptlang.org/docs/handbook/gulp.html#watchify-babel-and-uglify)
  - Watchify starts gulp and keeps it running, incrementally compiling whenever you save a file. This lets you keep an edit-save-refresh cycle going in the browser.
  - Babel, a flexible compiler, lets you add extensive and customized transformations that TypeScript doesn’t support.
  - Uglify compacts your code so that it takes less time to download.

  `>npm install --save-dev watchify fancy-log`
  - This will allow hot changes so save and refresh work **gulpfile.js.watchify**

  `>npm install --save-dev gulp-uglify vinyl-buffer gulp-sourcemaps`


# Build and Test
`>tsc filename.ts`
  - this will buile a js file with the same name in the same directory. Rarely done
`>gulp`
  - this will run the default action in the gulpfile.js. It will build the files listed in the tsconfig.json files array. The built files are output in the dist folder
`>node dist/main.js`
 -  this will use node to run the js file

# Refrences
[tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
[Typescript Compiler Options](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for `"compilerOptions": {}` in the tsconfig.json