@bsw/bsweventemitter NPM

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.

   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.

   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

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

>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

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