blueboxspfxloader v1.0.9

��

Bluebox SPFx JS Module Loader

Bluebox specific SPFx Module loading utilizing RequireJS that is nativity loaded into modern SharePoint pages.

Usage:

import { LoaderService } from  "blueboxspfxloader";
const  loaderService = new  LoaderService();
const  location = window.location.pathname.split("/");
const  siteServerRelativeUrl = "/" + location[1] + "/" + location[2];
const  context = {"siteServerRelativeUrl":siteServerRelativeUrl};
const  pageContext = window._spPageContextInfo ? window._spPageContextInfo : context;
await  loaderService.InitBlueboxConfig(config.ModuleName,cdnBaseURL,pageContext.siteServerRelativeUrl);

notes

• Settings are loaded into the Bluebox._SiteSettings and Bluebox._TenantSettings global object. + _TenantSettings are loaded from a folder named the same as the SharePoint tenant in CDN + _SiteSettings are loaded from a child folder with the same name as the site collection within the _Tenant Folder in CDN
• Require JS path is made from the Bluebox._SiteSettings.Modules object if using v 1.0.8 or above. + requires SPCommonBaseURL setting in Tenant or SiteCollection.
• Require JS path is made from Bluebox._SiteSetting.ModuleSettings which will reference Bluebox._SiteSettings.Modules in v 1.0.5 or below
• RequireJS loading, if your module depends on another you need to specify all the dependencies in your config.json.

Env:

• node: 14.17.0

• npm: 6.14.13

Deployment and testing:

• Update package.json scripts {} object.

  		"prepare": "npm run build",
  
  		"prepublishOnly": "npm test && npm run lint",
  
  		"preversion": "npm run lint",
  
  		"version": "npm run format && git add -A src",
  
  		"postversion": "git push && git push --tags"

remove npm test from prepbulish if you don't want to use the tester (not working at the moment for loader because it uses window browser object)

Environment Issues:

• Uses Es6 Promise will need to add poly fill for older browser support (I.E)

• only usable in browser (requires window object)

• only usable when require js is loaded + Modern SharePoint loads RequireJS natively

TODO

Stable versions

1.0.9

see Version note for 1.0.9

1.0.8

see Version note 1.0.6 for whats added

1.0.5

see Version note 1.0.5 for whats added

Version notes

1.0.9

• replace isLocal setting in _SiteSettings to UseSiteCDNBaseURL
• module base url logic updated: apply the rules in order precidence is ascending. 1. if YOURMODULE.IsLocal == true THEN use ModuleLocalBaseURL 2. if _SiteSettings.UseSiteCDNBaseURL == true THEN use SPCommonBaseURL 3. other wise use SPCommonBaseURL in tenant config

1.0.8

• Fix issue with waiter and loading not resolving

1.0.7 - unsable

• Fix bug with cdn base paths not forming correctly

1.0.6 - unstable has error fixed with v 1.0.7

Add new pubic function InitBlueboxConfig, will create requireJS paths from Bluebox._SiteSettings.Modules instead of Bluebox._SiteSettings.ModuleSettings

this means all modules in the .Modules config will have a requireJS path. if you need a module loaded then the target module and its depenecies (and dependencies dependencies) have to be defined in .Modules

Config.json updates:

config.json cdnCoreUrl is replace with SPCommonBaseURL in both tenant and site settings.

1.0.5 - Stable version using cdnCoreUrl in config.json

Add new public function init, will create requireJS Paths from Bluebox._SiteSettings.ModuleSettings.

ModuleSettings is an array of module names that are used as keys to the Bluebox._SiteSettings.Module object.

note this version does not use SPCommonBaseURL introduced in 1.0.6

Module Config.json Dependency

Loader requires a window.Bluebox._SiteSettings.Modules object :

_SiteSettings

{
	"APIKey": "<your api key>",
	"APIUrl": "<your api url>",
	"cdnCoreUrl": "https://yourstorageurl/sp-common/4.1.0",
	"SPCommonBaseURL": "https://yourstorageurl./sp-common/4.1.0",
	"CDNVersion":"4.1.0",
	"IsLocal":false,	
	"Modules":{
		"jquery-ui":{
			"IsLocal":false,
			"Name": "jquery",
			"RelativePath": "/ext/jquery/jquery.ui.min.js",
			"RelativeCSSPath":[],
			"Extensions":"popr"
		},
		"popr":{
			"IsLocal": false,
			"Name":"popr",
			"RelativeCSSPath":["/Bluebox.css","/ext/popr/popr.css", "/ext/streamline/streamline.css", "/ext/linearicons/Linearicons.css"],
			"RelativePath":"/ext/popr/popr.require.js"
		}
	}
}

note all properties for each module item are required except for Extensions. RelativeCSSPath needs to be an array

The loader will look at your Bluebox._SiteSettings for modules note Bluebox._TenantSetting is not used for module information

ModuleYourModuleName.IsLocal:

used to determine which setting to retrieve the CDN url for spcommon

const cdnUrl = Module[YourModuleName].IsLocal ? Bluebox._SiteSetting.SPCommonBaseURL : Bluebox._TenantSetting.SPCommonBaseURL;

ModuleYourModuleName.RelativePath

relative location starting from / for you module

example value:

/ext/pnp/pnp-sp.js
/CDMSModules/Bluebox.CDMSDraftModule.js

SPCommonBaseURL:

use to source sp-common base path, both settings are present in _TenantSettings and _SiteSettings

this means there are only two paths for JS modules to load either from sp-common from the _TenantSetting or sp-common from the _SiteSetting

_TenantSetting should be defaultd to the CDN SP-Common folder.

Note it makes sense to have _TenantSetting to point to the tenant folder in CDN if needed.

_SiteSettings should point to the local client folder.

example value: https://bbxclientsdevstoragecdn.blob.core.windows.net/sp-common/4.1.0"